verdnatura/salix-front
verdnatura
/
salix-front
1
2
Fork 1
Code Issues Pull Requests 58 Releases Wiki Activity

refs #6118 importSalixVariables #93

Merged
pablone merged 19 commits from 6118-responsiveFixes into dev 2023-10-30 10:32:15 +00:00
Conversation 0 Commits 19 Files Changed 4 +261 -254
4 changed files with 261 additions and 254 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
src/components/FormModel.vue
View File

@ -122,9 +122,24 @@ 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"> <div class="column items-center">
<slot name="form" :data="formData" :validate="validate" :filter="filter"></slot> <QForm
v-if="formData"
@submit="save"
@reset="reset"
class="q-pa-md"
id="formModel"
>
<QCard>
<slot
name="form"
:data="formData"
:validate="validate"
:filter="filter"
/>
</QCard>
</QForm> </QForm>
</div>
<Teleport to="#st-actions" v-if="stateStore?.isSubToolbarShown()"> <Teleport to="#st-actions" v-if="stateStore?.isSubToolbarShown()">
<div v-if="$props.defaultActions"> <div v-if="$props.defaultActions">
<QBtnGroup push class="q-gutter-x-sm"> <QBtnGroup push class="q-gutter-x-sm">
@ -156,3 +171,12 @@ watch(formUrl, async () => {
color="primary" color="primary"
/> />
</template> </template>
<style lang="scss" scoped>
#formModel {
max-width: 800px;
width: 100%;
}
.q-card {
padding: 32px;
}
</style>

12
src/components/ui/VnRow.vue Normal file
View File

@ -0,0 +1,12 @@
<template>
<div id="row">
<slot></slot>
</div>
</template>
<style lang="scss" scopped>
@media screen and (max-width: 800px) {
#row {
flex-direction: column;
}
}
</style>

42
src/pages/Claim/Card/ClaimBasicData.vue
View File

@ -6,6 +6,7 @@ import { useI18n } from 'vue-i18n';
import { useSession } from 'src/composables/useSession'; import { useSession } from 'src/composables/useSession';
import FetchData from 'components/FetchData.vue'; import FetchData from 'components/FetchData.vue';
import FormModel from 'components/FormModel.vue'; import FormModel from 'components/FormModel.vue';
import VnRow from 'components/ui/VnRow.vue';
const route = useRoute(); const route = useRoute();
const { t } = useI18n(); const { t } = useI18n();
@ -90,9 +91,6 @@ const statesFilter = {
auto-load auto-load
/> />
<FetchData url="ClaimStates" @on-fetch="setClaimStates" auto-load /> <FetchData url="ClaimStates" @on-fetch="setClaimStates" auto-load />
<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}`"
@ -100,7 +98,7 @@ const statesFilter = {
model="claim" model="claim"
> >
<template #form="{ data, validate, filter }"> <template #form="{ data, validate, filter }">
<div class="row q-gutter-md q-mb-md"> <VnRow 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"
@ -122,10 +120,7 @@ const statesFilter = {
transition-show="scale" transition-show="scale"
transition-hide="scale" transition-hide="scale"
> >
<QDate <QDate v-model="data.created" mask="YYYY-MM-DD">
v-model="data.created"
mask="YYYY-MM-DD"
>
<div class="row items-center justify-end"> <div class="row items-center justify-end">
<QBtn <QBtn
v-close-popup v-close-popup
@ -140,8 +135,8 @@ const statesFilter = {
</template> </template>
</QInput> </QInput>
</div> </div>
</div> </VnRow>
<div class="row q-gutter-md q-mb-md"> <VnRow class="row q-gutter-md q-mb-md">
<div class="col"> <div class="col">
<QSelect <QSelect
v-model="data.workerFk" v-model="data.workerFk"
@ -152,9 +147,7 @@ const statesFilter = {
:label="t('claim.basicData.assignedTo')" :label="t('claim.basicData.assignedTo')"
map-options map-options
use-input use-input
@filter=" @filter="(value, update) => filter(value, update, workerFilter)"
(value, update) => filter(value, update, workerFilter)
"
:rules="validate('claim.claimStateFk')" :rules="validate('claim.claimStateFk')"
:input-debounce="0" :input-debounce="0"
> >
@ -179,16 +172,14 @@ const statesFilter = {
:label="t('claim.basicData.state')" :label="t('claim.basicData.state')"
map-options map-options
use-input use-input
@filter=" @filter="(value, update) => filter(value, update, statesFilter)"
(value, update) => filter(value, update, statesFilter)
"
:rules="validate('claim.claimStateFk')" :rules="validate('claim.claimStateFk')"
:input-debounce="0" :input-debounce="0"
> >
</QSelect> </QSelect>
</div> </div>
</div> </VnRow>
<div class="row q-gutter-md q-mb-md"> <VnRow class="row q-gutter-md q-mb-md">
<div class="col"> <div class="col">
<QInput <QInput
v-model.number="data.packages" v-model.number="data.packages"
@ -204,24 +195,15 @@ const statesFilter = {
:rules="validate('claim.rma')" :rules="validate('claim.rma')"
/> />
</div> </div>
</div> </VnRow>
<div class="row q-gutter-md q-mb-md"> <VnRow class="row q-gutter-md q-mb-md">
<div class="col"> <div class="col">
<QCheckbox <QCheckbox
v-model="data.hasToPickUp" v-model="data.hasToPickUp"
:label="t('claim.basicData.picked')" :label="t('claim.basicData.picked')"
/> />
</div> </div>
</div> </VnRow>
</template> </template>
</FormModel> </FormModel>
</QCard>
</div>
</template> </template>
<style lang="scss" scoped>
.q-card {
width: 100%;
max-width: 60em;
}
</style>

33
src/pages/Customer/Card/CustomerBasicData.vue
View File

@ -6,6 +6,7 @@ import { useI18n } from 'vue-i18n';
import { useSession } from 'src/composables/useSession'; import { useSession } from 'src/composables/useSession';
import FetchData from 'components/FetchData.vue'; import FetchData from 'components/FetchData.vue';
import FormModel from 'components/FormModel.vue'; import FormModel from 'components/FormModel.vue';
import VnRow from 'components/ui/VnRow.vue';
const route = useRoute(); const route = useRoute();
const { t } = useI18n(); const { t } = useI18n();
@ -58,11 +59,10 @@ const filterOptions = {
@on-fetch="(data) => (businessTypes = data)" @on-fetch="(data) => (businessTypes = data)"
auto-load auto-load
/> />
<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"> <VnRow class="row q-gutter-md q-mb-md">
<div class="col"> <div class="col">
<QInput <QInput
v-model="data.socialName" v-model="data.socialName"
@ -84,8 +84,8 @@ const filterOptions = {
:input-debounce="0" :input-debounce="0"
/> />
</div> </div>
</div> </VnRow>
<div class="row q-gutter-md q-mb-md"> <VnRow class="row q-gutter-md q-mb-md">
<div class="col"> <div class="col">
<QInput <QInput
v-model="data.contact" v-model="data.contact"
@ -103,8 +103,8 @@ const filterOptions = {
clearable clearable
/> />
</div> </div>
</div> </VnRow>
<div class="row q-gutter-md q-mb-md"> <VnRow class="row q-gutter-md q-mb-md">
<div class="col"> <div class="col">
<QInput <QInput
v-model="data.phone" v-model="data.phone"
@ -121,8 +121,8 @@ const filterOptions = {
clearable clearable
/> />
</div> </div>
</div> </VnRow>
<div class="row q-gutter-md q-mb-md"> <VnRow class="row q-gutter-md q-mb-md">
<div class="col"> <div class="col">
<QSelect <QSelect
v-model="data.salesPersonFk" v-model="data.salesPersonFk"
@ -133,10 +133,7 @@ const filterOptions = {
:label="t('customer.basicData.salesPerson')" :label="t('customer.basicData.salesPerson')"
map-options map-options
use-input use-input
@filter=" @filter="(value, update) => filter(value, update, filterOptions)"
(value, update) =>
filter(value, update, filterOptions)
"
:rules="validate('client.salesPersonFk')" :rules="validate('client.salesPersonFk')"
:input-debounce="0" :input-debounce="0"
> >
@ -164,15 +161,7 @@ const filterOptions = {
:input-debounce="0" :input-debounce="0"
/> />
</div> </div>
</div> </VnRow>
</template> </template>
</FormModel> </FormModel>
</QCard>
</div>
</template> </template>
<style lang="scss" scoped>
.q-card {
width: 800px;
}
</style>