refs #6118 fixResponsive
gitea/salix-front/pipeline/head This commit looks good Details

This commit is contained in:
Pablo Natek 2023-09-19 09:42:47 +02:00
parent c727480569
commit 8d27ef5402
5 changed files with 252 additions and 261 deletions

View File

@ -107,21 +107,28 @@ watch(formUrl, async () => {
<QIcon name="warning" size="md" class="q-mr-md" /> <QIcon name="warning" size="md" class="q-mr-md" />
<span>{{ t('globals.changesToSave') }}</span> <span>{{ t('globals.changesToSave') }}</span>
</QBanner> </QBanner>
<QForm v-if="formData" @submit="save" @reset="reset" class="q-pa-md"> <QForm v-if="formData" @submit="save" @reset="reset" class="q-pa-md formModel">
<slot name="form" :data="formData" :validate="validate" :filter="filter"></slot> <QCard class="q-pa-lg">
<div class="q-mt-lg"> <slot
<slot name="actions"> name="form"
<QBtn :label="t('globals.save')" type="submit" color="primary" /> :data="formData"
<QBtn :validate="validate"
:label="t('globals.reset')" :filter="filter"
type="reset" ></slot>
class="q-ml-sm" <div class="q-mt-lg">
color="primary" <slot name="actions">
flat <QBtn :label="t('globals.save')" type="submit" color="primary" />
:disable="!hasChanges" <QBtn
/> :label="t('globals.reset')"
</slot> type="reset"
</div> class="q-ml-sm"
color="primary"
flat
:disable="!hasChanges"
/>
</slot>
</div>
</QCard>
</QForm> </QForm>
<SkeletonForm v-if="!formData" /> <SkeletonForm v-if="!formData" />
<QInnerLoading <QInnerLoading
@ -130,3 +137,16 @@ watch(formUrl, async () => {
color="primary" color="primary"
/> />
</template> </template>
<style lang="scss">
@media screen and (max-width: 800px) {
.q-card > div {
flex-direction: column;
}
}
.formModel {
max-width: 800px;
width: 100%;
}
</style>

View File

@ -14,12 +14,6 @@ a {
color: $orange-4; color: $orange-4;
} }
@media screen and (max-width: $width-md) {
.q-form > div {
flex-direction: column;
}
}
// Removes chrome autofill background // Removes chrome autofill background
input:-webkit-autofill, input:-webkit-autofill,
select:-webkit-autofill { select:-webkit-autofill {

View File

@ -48,12 +48,4 @@ $dark: #292929;
$layout-shadow-dark: 0 0 10px 2px rgba(0, 0, 0, 0.2), 0 0px 10px rgba(0, 0, 0, 0.24); $layout-shadow-dark: 0 0 10px 2px rgba(0, 0, 0, 0.2), 0 0px 10px rgba(0, 0, 0, 0.24);
$spacing-md: 16px; $spacing-md: 16px;
// Width from Salix variables.scss
$width-xs: 400px;
$width-sm: 544px;
$width-md: 800px;
$width-lg: 1280px;
$width-xl: 1600px;
$width-full: 100%; $width-full: 100%;

View File

@ -92,129 +92,124 @@ const statesFilter = {
<FetchData url="ClaimStates" @on-fetch="setClaimStates" auto-load /> <FetchData url="ClaimStates" @on-fetch="setClaimStates" auto-load />
<div class="column items-center"> <div class="column items-center">
<QCard> <FormModel
<FormModel :url="`Claims/${route.params.id}`"
:url="`Claims/${route.params.id}`" :url-update="`Claims/updateClaim/${route.params.id}`"
:url-update="`Claims/updateClaim/${route.params.id}`" :filter="claimFilter"
:filter="claimFilter" model="claim"
model="claim" >
> <template #form="{ data, validate, filter }">
<template #form="{ data, validate, filter }"> <div class="row q-gutter-md q-mb-md">
<div class="row q-gutter-md q-mb-md"> <div class="col">
<div class="col"> <QInput
<QInput v-model="data.client.name"
v-model="data.client.name" :label="t('claim.basicData.customer')"
:label="t('claim.basicData.customer')" disable
disable />
/>
</div>
<div class="col">
<QInput
v-model="data.created"
mask="####-##-##"
fill-mask="_"
autofocus
>
<template #append>
<QIcon name="event" class="cursor-pointer">
<QPopupProxy
cover
transition-show="scale"
transition-hide="scale"
>
<QDate
v-model="data.created"
mask="YYYY-MM-DD"
>
<div class="row items-center justify-end">
<QBtn
v-close-popup
label="Close"
color="primary"
flat
/>
</div>
</QDate>
</QPopupProxy>
</QIcon>
</template>
</QInput>
</div>
</div> </div>
<div class="row q-gutter-md q-mb-md"> <div class="col">
<div class="col"> <QInput
<QSelect v-model="data.created"
v-model="data.workerFk" mask="####-##-##"
:options="workers" fill-mask="_"
option-value="id" autofocus
option-label="name" >
emit-value <template #append>
:label="t('claim.basicData.assignedTo')" <QIcon name="event" class="cursor-pointer">
map-options <QPopupProxy
use-input cover
@filter=" transition-show="scale"
(value, update) => filter(value, update, workerFilter) transition-hide="scale"
" >
:rules="validate('claim.claimStateFk')" <QDate v-model="data.created" mask="YYYY-MM-DD">
:input-debounce="0" <div class="row items-center justify-end">
> <QBtn
<template #before> v-close-popup
<QAvatar color="orange"> label="Close"
<QImg color="primary"
v-if="data.workerFk" flat
:src="`/api/Images/user/160x160/${data.workerFk}/download?access_token=${token}`" />
spinner-color="white" </div>
/> </QDate>
</QAvatar> </QPopupProxy>
</template> </QIcon>
</QSelect> </template>
</div> </QInput>
<div class="col">
<QSelect
v-model="data.claimStateFk"
:options="claimStates"
option-value="id"
option-label="description"
emit-value
:label="t('claim.basicData.state')"
map-options
use-input
@filter="
(value, update) => filter(value, update, statesFilter)
"
:rules="validate('claim.claimStateFk')"
:input-debounce="0"
>
</QSelect>
</div>
</div> </div>
<div class="row q-gutter-md q-mb-md"> </div>
<div class="col"> <div class="row q-gutter-md q-mb-md">
<QInput <div class="col">
v-model.number="data.packages" <QSelect
:label="t('claim.basicData.packages')" v-model="data.workerFk"
:rules="validate('claim.packages')" :options="workers"
type="number" option-value="id"
/> option-label="name"
</div> emit-value
<div class="col"> :label="t('claim.basicData.assignedTo')"
<QInput map-options
v-model="data.rma" use-input
:label="t('claim.basicData.returnOfMaterial')" @filter="
:rules="validate('claim.rma')" (value, update) => filter(value, update, workerFilter)
/> "
</div> :rules="validate('claim.claimStateFk')"
:input-debounce="0"
>
<template #before>
<QAvatar color="orange">
<QImg
v-if="data.workerFk"
:src="`/api/Images/user/160x160/${data.workerFk}/download?access_token=${token}`"
spinner-color="white"
/>
</QAvatar>
</template>
</QSelect>
</div> </div>
<div class="row q-gutter-md q-mb-md"> <div class="col">
<div class="col"> <QSelect
<QCheckbox v-model="data.claimStateFk"
v-model="data.hasToPickUp" :options="claimStates"
:label="t('claim.basicData.picked')" option-value="id"
/> option-label="description"
</div> emit-value
:label="t('claim.basicData.state')"
map-options
use-input
@filter="
(value, update) => filter(value, update, statesFilter)
"
:rules="validate('claim.claimStateFk')"
:input-debounce="0"
>
</QSelect>
</div> </div>
</template> </div>
</FormModel> <div class="row q-gutter-md q-mb-md">
</QCard> <div class="col">
<QInput
v-model.number="data.packages"
:label="t('claim.basicData.packages')"
:rules="validate('claim.packages')"
type="number"
/>
</div>
<div class="col">
<QInput
v-model="data.rma"
:label="t('claim.basicData.returnOfMaterial')"
:rules="validate('claim.rma')"
/>
</div>
</div>
<div class="row q-gutter-md q-mb-md">
<div class="col">
<QCheckbox
v-model="data.hasToPickUp"
:label="t('claim.basicData.picked')"
/>
</div>
</div>
</template>
</FormModel>
</div> </div>
</template> </template>

View File

@ -59,121 +59,111 @@ const filterOptions = {
auto-load auto-load
/> />
<div class="column items-center"> <div class="column items-center">
<QCard> <FormModel :url="`Clients/${route.params.id}`" model="customer">
<FormModel :url="`Clients/${route.params.id}`" model="customer"> <template #form="{ data, validate, filter }">
<template #form="{ data, validate, filter }"> <div class="row q-gutter-md q-mb-md">
<div class="row q-gutter-md q-mb-md"> <div class="col">
<div class="col"> <QInput
<QInput v-model="data.socialName"
v-model="data.socialName" :label="t('customer.basicData.socialName')"
:label="t('customer.basicData.socialName')" :rules="validate('client.socialName')"
:rules="validate('client.socialName')" autofocus
autofocus />
/>
</div>
<div class="col">
<QSelect
v-model="data.businessTypeFk"
:options="businessTypes"
option-value="code"
option-label="description"
emit-value
:label="t('customer.basicData.businessType')"
map-options
:rules="validate('client.businessTypeFk')"
:input-debounce="0"
/>
</div>
</div> </div>
<div class="row q-gutter-md q-mb-md"> <div class="col">
<div class="col"> <QSelect
<QInput v-model="data.businessTypeFk"
v-model="data.contact" :options="businessTypes"
:label="t('customer.basicData.contact')" option-value="code"
:rules="validate('client.contact')" option-label="description"
clearable emit-value
/> :label="t('customer.basicData.businessType')"
</div> map-options
<div class="col"> :rules="validate('client.businessTypeFk')"
<QInput :input-debounce="0"
v-model="data.email" />
type="email"
:label="t('customer.basicData.email')"
:rules="validate('client.email')"
clearable
/>
</div>
</div> </div>
<div class="row q-gutter-md q-mb-md"> </div>
<div class="col"> <div class="row q-gutter-md q-mb-md">
<QInput <div class="col">
v-model="data.phone" <QInput
:label="t('customer.basicData.phone')" v-model="data.contact"
:rules="validate('client.phone')" :label="t('customer.basicData.contact')"
clearable :rules="validate('client.contact')"
/> clearable
</div> />
<div class="col">
<QInput
v-model="data.mobile"
:label="t('customer.basicData.mobile')"
:rules="validate('client.mobile')"
clearable
/>
</div>
</div> </div>
<div class="row q-gutter-md q-mb-md"> <div class="col">
<div class="col"> <QInput
<QSelect v-model="data.email"
v-model="data.salesPersonFk" type="email"
:options="workers" :label="t('customer.basicData.email')"
option-value="id" :rules="validate('client.email')"
option-label="name" clearable
emit-value />
:label="t('customer.basicData.salesPerson')"
map-options
use-input
@filter="
(value, update) =>
filter(value, update, filterOptions)
"
:rules="validate('client.salesPersonFk')"
:input-debounce="0"
>
<template #prepend>
<QAvatar color="orange">
<QImg
v-if="data.salesPersonFk"
:src="`/api/Images/user/160x160/${data.salesPersonFk}/download?access_token=${token}`"
spinner-color="white"
/>
</QAvatar>
</template>
</QSelect>
</div>
<div class="col">
<QSelect
v-model="data.contactChannelFk"
:options="contactChannels"
option-value="id"
option-label="name"
emit-value
:label="t('customer.basicData.contactChannel')"
map-options
:rules="validate('client.contactChannelFk')"
:input-debounce="0"
/>
</div>
</div> </div>
</template> </div>
</FormModel> <div class="row q-gutter-md q-mb-md">
</QCard> <div class="col">
<QInput
v-model="data.phone"
:label="t('customer.basicData.phone')"
:rules="validate('client.phone')"
clearable
/>
</div>
<div class="col">
<QInput
v-model="data.mobile"
:label="t('customer.basicData.mobile')"
:rules="validate('client.mobile')"
clearable
/>
</div>
</div>
<div class="row q-gutter-md q-mb-md">
<div class="col">
<QSelect
v-model="data.salesPersonFk"
:options="workers"
option-value="id"
option-label="name"
emit-value
:label="t('customer.basicData.salesPerson')"
map-options
use-input
@filter="
(value, update) => filter(value, update, filterOptions)
"
:rules="validate('client.salesPersonFk')"
:input-debounce="0"
>
<template #prepend>
<QAvatar color="orange">
<QImg
v-if="data.salesPersonFk"
:src="`/api/Images/user/160x160/${data.salesPersonFk}/download?access_token=${token}`"
spinner-color="white"
/>
</QAvatar>
</template>
</QSelect>
</div>
<div class="col">
<QSelect
v-model="data.contactChannelFk"
:options="contactChannels"
option-value="id"
option-label="name"
emit-value
:label="t('customer.basicData.contactChannel')"
map-options
:rules="validate('client.contactChannelFk')"
:input-debounce="0"
/>
</div>
</div>
</template>
</FormModel>
</div> </div>
</template> </template>
<style lang="scss" scoped>
.q-card {
width: $width-full;
max-width: $width-md;
}
</style>