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

4043-form_data #25

Merged
joan merged 5 commits from 4043-form_data into dev 2022-11-02 11:33:08 +00:00
Conversation 0 Commits 5 Files Changed 26 +340 -379
12 changed files with 340 additions and 379 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit bd908e5e93 - Show all commits

2
src/App.vue
View File

@ -61,7 +61,7 @@ function responseError(error) {
router.push({ path: '/login' });
}
return Promise.resolve(error);
return Promise.reject(error);
}
axios.interceptors.response.use((response) => {

9
src/components/FetchData.vue
View File

@ -15,13 +15,10 @@ const $props = defineProps({
type: Object,
default: null,
},
limit: {
type: String,
default: '20',
},
});
const emit = defineEmits(['fetch-data']);
defineExpose({ fetch });
const emit = defineEmits(['onFetch']);
onMounted(async () => {
if ($props.autoLoad) {
@ -34,7 +31,7 @@ async function fetch() {
params: { filter: $props.filter },
});
return emit('fetch-data', data);
emit('onFetch', data);
}
const render = () => {

35
src/components/FormModel.vue
View File

@ -5,11 +5,13 @@ import { useQuasar } from 'quasar';
import axios from 'axios';
import { useState } from 'src/composables/useState';
import { useValidator } from 'src/composables/useValidator';
import SkeletonForm from 'src/components/SkeletonForm.vue';
const quasar = useQuasar();
const { t } = useI18n();
const state = useState();
const { validate } = useValidator();
const $props = defineProps({
url: {
@ -26,7 +28,7 @@ const $props = defineProps({
},
});
const emit = defineEmits(['fetch-data']);
const emit = defineEmits(['onFetch']);
defineExpose({
save,
@ -53,7 +55,7 @@ async function fetch() {
watch(formData.value, () => (hasChanges.value = true));
return emit('fetch-data', state.get($props.model));
emit('onFetch', state.get($props.model));
}
async function save() {
@ -64,10 +66,10 @@ async function save() {
});
}
isLoading.value = true;
await new Promise((resolve) => {
setTimeout(resolve, 5000);
});
await axios.patch($props.url, formData.value);
originalData.value = formData.value;
hasChanges.value = false;
isLoading.value = false;
}
@ -75,11 +77,29 @@ function reset() {
state.set($props.model, originalData.value);
hasChanges.value = false;
}
function filter(value, update, filterOptions) {
update(
() => {
const { options, filterFn } = filterOptions;
options.value = filterFn(options, value);
},
(ref) => {
ref.setOptionIndex(-1);
ref.moveOptionSelection(1, true);
}
);
}
</script>
<template>
<q-banner v-if="hasChanges" inline-actions class="text-white bg-red"> You have changes pending to save </q-banner>
<q-banner v-if="hasChanges" class="text-white bg-warning">
<q-icon name="warning" size="md" class="q-mr-md" />
<span>{{ t('globals.changesToSave') }}</span>
</q-banner>
<q-form v-if="formData" @submit="save" @reset="reset" class="q-pa-md">
<slot name="form" :data="formData"></slot>
<slot name="form" :data="formData" :validate="validate" :filter="filter"></slot>
<div class="q-mt-lg">
<slot name="actions">
<q-btn :label="t('globals.save')" type="submit" color="primary" />
<q-btn
@ -91,6 +111,7 @@ function reset() {
:disable="!hasChanges"
/>
</slot>
</div>
</q-form>
<skeleton-form v-if="!formData" />
<q-inner-loading :showing="isLoading" :label="t('globals.pleaseWait')" color="primary" />

27
src/components/SmartCard.vue
View File

@ -1,6 +1,6 @@
<script setup>
import axios from 'axios';
import { onMounted, ref } from 'vue';
import { onMounted, ref, watch } from 'vue';
import { useI18n } from 'vue-i18n';
const { t } = useI18n();
@ -10,6 +10,10 @@ const $props = defineProps({
type: String,
default: '',
},
data: {
type: Array,
default: null,
},
filter: {
type: Object,
default: null,
@ -35,6 +39,17 @@ const $props = defineProps({
defineEmits(['onNavigate']);
defineExpose({ fetch });
onMounted(() => {
if ($props.autoLoad) fetch();
});
watch(
() => $props.data,
() => {
rows.value = $props.data;
}
);
const isLoading = ref(false);
const hasMoreData = ref(false);
const pagination = ref({
@ -42,17 +57,13 @@ const pagination = ref({
rowsPerPage: $props.rowsPerPage,
page: 1,
});
const rows = ref(null);
onMounted(() => {
if ($props.autoLoad) fetch();
else rows.value = [];
});
async function fetch() {
const { page, rowsPerPage, sortBy, descending } = pagination.value;
if (!$props.url) return;
isLoading.value = true;
const filter = {
@ -89,7 +100,7 @@ async function fetch() {
async function onLoad(...params) {
const done = params[1];
if (!rows.value || rows.value.length === 0) return done(false);
if (!rows.value || rows.value.length === 0 || !$props.url) return done(false);
pagination.value.page = pagination.value.page + 1;

1
src/i18n/en/index.js
View File

@ -21,6 +21,7 @@ export default {
yes: 'Yes',
no: 'No',
noChanges: 'No changes to save',
changesToSave: 'You have changes pending to save',
confirmRemove: 'You are about to delete this row. Are you sure?',
rowAdded: 'Row added',
rowRemoved: 'Row removed',

1
src/i18n/es/index.js
View File

@ -21,6 +21,7 @@ export default {
yes: 'Si',
no: 'No',
noChanges: 'Sin cambios que guardar',
changesToSave: 'Tienes cambios pendientes de guardar',
confirmRemove: 'Vas a eliminar este registro. ¿Continuar?',
rowAdded: 'Fila añadida',
rowRemoved: 'Fila eliminada',

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

@ -1,33 +1,43 @@
<script setup>
import { ref, onMounted, watch } from 'vue';
import { ref } from 'vue';
import { useRoute } from 'vue-router';
import { useI18n } from 'vue-i18n';
import { useQuasar } from 'quasar';
import axios from 'axios';
import { useSession } from 'src/composables/useSession';
import { useValidator } from 'src/composables/useValidator';
import SkeletonForm from 'src/components/SkeletonForm.vue';
onMounted(() => {
fetch();
fetchWorkers();
fetchClaimStates();
});
import { useSession } from 'src/composables/useSession';
import FetchData from 'src/components/FetchData.vue';
import FormModel from 'src/components/FormModel.vue';
const route = useRoute();
const quasar = useQuasar();
const { t } = useI18n();
const { validate } = useValidator();
const session = useSession();
const token = session.getToken();
const claim = ref(null);
const claimCopy = ref(null);
const hasChanges = ref(false);
// const claim = ref(null);
// const claimCopy = ref(null);
// const hasChanges = ref(false);
function fetch() {
const id = route.params.id;
const filter = {
// function fetch() {
// const id = route.params.id;
// const filter = {
// include: [
// {
// relation: 'client',
// scope: {
// fields: ['name'],
// },
// },
// ],
// };
// const options = { params: { filter } };
// axios.get(`Claims/${id}`, options).then(({ data }) => {
// claim.value = data;
// claimCopy.value = Object.assign({}, data);
// watch(claim.value, () => (hasChanges.value = true));
// });
// }
const claimFilter = {
include: [
{
relation: 'client',
@ -36,117 +46,121 @@ function fetch() {
},
},
],
};
const options = { params: { filter } };
axios.get(`Claims/${id}`, options).then(({ data }) => {
claim.value = data;
claimCopy.value = Object.assign({}, data);
watch(claim.value, () => (hasChanges.value = true));
});
}
};
const workers = ref([]);
const workersCopy = ref([]);
function fetchWorkers() {
const filter = {
where: {
role: 'salesPerson',
},
};
const options = { params: { filter } };
axios.get(`Workers/activeWithRole`, options).then(({ data }) => {
workers.value = data;
workersCopy.value = data;
});
}
const claimStates = ref([]);
const claimStatesCopy = ref([]);
function fetchClaimStates() {
axios.get(`ClaimStates`).then(({ data }) => {
// function filter(value, update, options, originalOptions, filter) {
// update(
// () => {
// if (value === '') {
// options.value = originalOptions.value;
// return;
// }
// options.value = options.value.filter(filter);
// },
// (ref) => {
// ref.setOptionIndex(-1);
// ref.moveOptionSelection(1, true);
// }
// );
// }
// function filterWorkers(value, update) {
// const search = value.toLowerCase();
// filter(value, update, workers, workersCopy, (row) => {
// const id = row.id;
// const name = row.name.toLowerCase();
// const idMatch = id == search;
// const nameMatch = name.indexOf(search) > -1;
// return idMatch || nameMatch;
// });
// }
// function filterStates(value, update) {
// const search = value.toLowerCase();
// filter(value, update, claimStates, claimStatesCopy, (row) => {
// const description = row.description.toLowerCase();
// return description.indexOf(search) > -1;
// });
// }
function setWorkers(data) {
workers.value = data;
workersCopy.value = data;
}
function setClaimStates(data) {
claimStates.value = data;
claimStatesCopy.value = data;
});
}
function filter(value, update, options, originalOptions, filter) {
update(
() => {
if (value === '') {
options.value = originalOptions.value;
return;
}
options.value = options.value.filter(filter);
},
(ref) => {
ref.setOptionIndex(-1);
ref.moveOptionSelection(1, true);
}
);
}
function filterWorkers(value, update) {
const workerFilter = {
options: workers,
filterFn: (options, value) => {
const search = value.toLowerCase();
filter(value, update, workers, workersCopy, (row) => {
if (value === '') return workersCopy.value;
return options.value.filter((row) => {
const id = row.id;
const name = row.name.toLowerCase();
const idMatch = id == search;
const nameMatch = name.indexOf(search) > -1;
const idMatches = id == search;
const nameMatches = name.indexOf(search) > -1;
return idMatch || nameMatch;
return idMatches || nameMatches;
});
}
},
};
function filterStates(value, update) {
const statesFilter = {
options: claimStates,
filterFn: (options, value) => {
const search = value.toLowerCase();
filter(value, update, claimStates, claimStatesCopy, (row) => {
if (value === '') return claimStatesCopy.value;
return options.value.filter((row) => {
const description = row.description.toLowerCase();
return description.indexOf(search) > -1;
});
}
function save() {
const id = route.params.id;
const formData = claim.value;
if (!hasChanges.value) {
return quasar.notify({
type: 'negative',
message: t('globals.noChanges'),
});
}
axios.patch(`Claims/${id}`, formData).then((hasChanges.value = false));
}
function onReset() {
claim.value = claimCopy.value;
hasChanges.value = false;
}
},
};
</script>
<template>
<fetch-data
url="Workers/activeWithInheritedRole"
:filter="{ where: { role: 'salesPerson' } }"
@on-fetch="setWorkers"
auto-load
/>
<fetch-data url="ClaimStates" @on-fetch="setClaimStates" auto-load />
<q-page class="q-pa-md">
<div class="container">
<q-card class="q-pa-md">
<skeleton-form v-if="!claim" />
<q-form v-if="claim" @submit="save" @reset="onReset" greedy>
<q-card>
<form-model :url="`Claims/${route.params.id}`" :filter="claimFilter" model="claim">
<template #form="{ data, validate, filter }">
<div class="row q-gutter-md q-mb-md">
<div class="col">
<q-input v-model="claim.client.name" :label="t('claim.basicData.customer')" disable />
<q-input v-model="data.client.name" :label="t('claim.basicData.customer')" disable />
</div>
<div class="col">
<q-input v-model="claim.created" mask="####-##-##" fill-mask="_" autofocus>
<q-input v-model="data.created" mask="####-##-##" fill-mask="_" autofocus>
<template #append>
<q-icon name="event" class="cursor-pointer">
<q-popup-proxy cover transition-show="scale" transition-hide="scale">
<q-date v-model="claim.created" mask="YYYY-MM-DD">
<q-date v-model="data.created" mask="YYYY-MM-DD">
<div class="row items-center justify-end">
<q-btn v-close-popup label="Close" color="primary" flat />
</div>
@ -160,7 +174,7 @@ function onReset() {
<div class="row q-gutter-md q-mb-md">
<div class="col">
<q-select
v-model="claim.workerFk"
v-model="data.workerFk"
:options="workers"
option-value="id"
option-label="name"
@ -168,15 +182,15 @@ function onReset() {
:label="t('claim.basicData.assignedTo')"
map-options
use-input
@filter="filterWorkers"
@filter="(value, update) => filter(value, update, workerFilter)"
:rules="validate('claim.claimStateFk')"
:input-debounce="0"
>
<template #before>
<q-avatar color="orange">
<q-img
v-if="claim.workerFk"
:src="`/api/Images/user/160x160/${claim.workerFk}/download?access_token=${token}`"
v-if="data.workerFk"
:src="`/api/Images/user/160x160/${data.workerFk}/download?access_token=${token}`"
spinner-color="white"
/>
</q-avatar>
@ -185,7 +199,7 @@ function onReset() {
</div>
<div class="col">
<q-select
v-model="claim.claimStateFk"
v-model="data.claimStateFk"
:options="claimStates"
option-value="id"
option-label="description"
@ -193,7 +207,7 @@ function onReset() {
:label="t('claim.basicData.state')"
map-options
use-input
@filter="filterStates"
@filter="(value, update) => filter(value, update, statesFilter)"
:rules="validate('claim.claimStateFk')"
:input-debounce="0"
>
@ -203,14 +217,14 @@ function onReset() {
<div class="row q-gutter-md q-mb-md">
<div class="col">
<q-input
v-model="claim.packages"
v-model="data.packages"
:label="t('claim.basicData.packages')"
:rules="validate('claim.packages')"
/>
</div>
<div class="col">
<q-input
v-model="claim.rma"
v-model="data.rma"
:label="t('claim.basicData.returnOfMaterial')"
:rules="validate('claim.rma')"
/>
@ -218,14 +232,11 @@ function onReset() {
</div>
<div class="row q-gutter-md q-mb-md">
<div class="col">
<q-checkbox v-model="claim.hasToPickUp" :label="t('claim.basicData.picked')" />
<q-checkbox v-model="data.hasToPickUp" :label="t('claim.basicData.picked')" />
</div>
</div>
<div>
<q-btn :label="t('globals.save')" type="submit" color="primary" />
<q-btn :label="t('globals.reset')" type="reset" class="q-ml-sm" color="primary" flat />
</div>
</q-form>
</template>
</form-model>
</q-card>
</div>
</q-page>

2
src/pages/Claim/Card/ClaimCard.vue
View File

@ -163,7 +163,7 @@ function stateColor(code) {
</q-scroll-area>
</q-drawer>
<q-page-container>
<router-view v-if="claim.id" :claim="claim"></router-view>
<router-view></router-view>
</q-page-container>
</template>

55
src/pages/Claim/Card/ClaimRma.vue
View File

@ -1,24 +1,27 @@
<script setup>
import { onMounted, ref } from 'vue';
import { ref } from 'vue';
import { useI18n } from 'vue-i18n';
import { useQuasar } from 'quasar';
import { useRoute } from 'vue-router';
import axios from 'axios';
import SmartCard from 'src/components/SmartCard.vue';
import FetchData from 'src/components/FetchData.vue';
import { toDate } from 'src/filters';
onMounted(() => fetch());
const $props = defineProps({
claim: {
type: Object,
required: true,
},
});
const quasar = useQuasar();
const route = useRoute();
const { t } = useI18n();
// const card = ref();
const claim = ref([]);
const fetcher = ref();
// const rma = computed(() => claim.value.rma);
const filter = {
include: {
relation: 'rmas',
scope: {
include: {
relation: 'worker',
scope: {
@ -27,27 +30,23 @@ const filter = {
},
},
},
where: {
code: $props.claim.rma,
},
},
};
function fetch() {
//console.log($props.claim);
}
function addRow() {
async function addRow() {
const formData = {
code: $props.claim.rma,
code: claim.value.rma,
};
axios.post(`ClaimRmas`, formData).then(() => {
await axios.post(`ClaimRmas`, formData);
await fetcher.value.fetch();
quasar.notify({
type: 'positive',
message: t('globals.rowAdded'),
icon: 'check',
});
});
}
const confirmShown = ref(false);
@ -57,9 +56,11 @@ function confirmRemove(id) {
rmaId.value = id;
}
function remove() {
async function remove() {
const id = rmaId.value;
axios.delete(`ClaimRmas/${id}`).then(() => {
await axios.delete(`ClaimRmas/${id}`);
await fetcher.value.fetch();
confirmShown.value = false;
quasar.notify({
@ -67,7 +68,6 @@ function remove() {
message: t('globals.rowRemoved'),
icon: 'check',
});
});
}
function hide() {
@ -75,6 +75,13 @@ function hide() {
}
</script>
<template>
<fetch-data
ref="fetcher"
:url="`Claims/${route.params.id}`"
:filter="filter"
@on-fetch="($data) => (claim = $data)"
auto-load
/>
<q-page class="q-pa-md sticky">
<q-page-sticky expand position="top">
<q-toolbar class="bg-grey-9">
@ -85,7 +92,7 @@ function hide() {
</q-toolbar>
</q-page-sticky>
<smart-card ref="card" url="/ClaimRmas" :filter="filter" sort-by="id DESC" auto-load>
<smart-card :data="claim.rmas">
<template #header="{ row }">
<q-item-label caption>{{ t('claim.rma.user') }}</q-item-label>
<q-item-label>{{ row.worker.user.name }}</q-item-label>

52
src/pages/Claim/ClaimCreate.vue
View File

@ -1,52 +0,0 @@
<script setup>
import { reactive, watch } from 'vue'
const customer = reactive({
name: '',
});
watch(() => customer.name, () => {
console.log('customer.name changed');
});
</script>
<template>
<q-page class="q-pa-md">
<q-card class="q-pa-md">
<q-form @submit="onSubmit" @reset="onReset" class="q-gutter-md">
<q-input
filled
v-model="customer.name"
label="Your name *"
hint="Name and surname"
lazy-rules
:rules="[val => val && val.length > 0 || 'Please type something']"
/>
<q-input
filled
type="number"
v-model="age"
label="Your age *"
lazy-rules
:rules="[
val => val !== null && val !== '' || 'Please type your age',
val => val > 0 && val < 100 || 'Please type a real age'
]"
/>
<div>
<q-btn label="Submit" type="submit" color="primary" />
<q-btn label="Reset" type="reset" color="primary" flat class="q-ml-sm" />
</div>
</q-form>
</q-card>
</q-page>
</template>
<style lang="scss" scoped>
.card {
width: 100%;
max-width: 60em;
}
</style>

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

@ -1,86 +1,60 @@
<script setup>
import { onMounted, ref } from 'vue';
import { ref } from 'vue';
import { useRoute } from 'vue-router';
import { useI18n } from 'vue-i18n';
// import { useQuasar } from 'quasar';
// import axios from 'axios';
import { useSession } from 'src/composables/useSession';
import { useValidator } from 'src/composables/useValidator';
import { useState } from 'src/composables/useState';
import FetchData from 'src/components/FetchData.vue';
import FormModel from 'src/components/FormModel.vue';
onMounted(() => {
// fetch();
// fetchWorkers();
// fetchBusinessTypes();
// fetchContactChannels();
});
const route = useRoute();
// const quasar = useQuasar();
const { t } = useI18n();
const { validate } = useValidator();
const state = useState();
const session = useSession();
const token = session.getToken();
const data2 = state.get('customer');
console.log(data2);
const workers = ref([]);
const contactChannels = ref([]);
const workersCopy = ref([]);
const businessTypes = ref([]);
const contactChannels = ref([]);
// const customer = ref(null);
// const customerCopy = ref(null);
// const hasChanges = ref(false);
function setWorkers(data) {
workers.value = data;
workersCopy.value = data;
}
// function filter(value, update, options, originalOptions, filter) {
// update(
// () => {
// if (value === '') {
// options.value = originalOptions.value;
const filterOptions = {
options: workers,
filterFn: (options, value) => {
const search = value.toLowerCase();
// return;
// }
if (value === '') return workersCopy.value;
// options.value = options.value.filter(filter);
// },
// (ref) => {
// ref.setOptionIndex(-1);
// ref.moveOptionSelection(1, true);
// }
// );
// }
return options.value.filter((row) => {
const id = row.id;
const name = row.name.toLowerCase();
// function filterWorkers(value, update) {
// const search = value.toLowerCase();
const idMatches = id == search;
const nameMatches = name.indexOf(search) > -1;
// filter(value, update, workers, workersCopy, (row) => {
// const id = row.id;
// const name = row.name.toLowerCase();
// const idMatch = id == search;
// const nameMatch = name.indexOf(search) > -1;
// return idMatch || nameMatch;
// });
// }
return idMatches || nameMatches;
});
},
};
</script>
<template>
<fetch-data
url="Workers/activeWithRole"
url="Workers/activeWithInheritedRole"
:filter="{ where: { role: 'salesPerson' } }"
@fetch-data="($data) => (workers = $data)"
@on-fetch="setWorkers"
auto-load
/>
<fetch-data url="ContactChannels" @fetch-data="($data) => (contactChannels = $data)" auto-load />
<fetch-data url="BusinessTypes" @fetch-data="($data) => (businessTypes = $data)" auto-load />
<fetch-data url="ContactChannels" @on-fetch="($data) => (contactChannels = $data)" auto-load />
<fetch-data url="BusinessTypes" @on-fetch="($data) => (businessTypes = $data)" auto-load />
<q-page class="q-pa-md">
<div class="container">
<q-card>
<form-model :url="`Clients/${route.params.id}`" model="customer">
<template #form="{ data }">
<template #form="{ data, validate, filter }">
<div class="row q-gutter-md q-mb-md">
<div class="col">
<q-input
@ -152,7 +126,7 @@ const businessTypes = ref([]);
:label="t('customer.basicData.salesPerson')"
map-options
use-input
@filter="filterWorkers"
@filter="(value, update) => filter(value, update, filterOptions)"
:rules="validate('client.salesPersonFk')"
:input-debounce="0"
>

12
src/router/modules/claim.js
View File

@ -34,15 +34,6 @@ export default {
roles: ['claimManager']
},
component: () => import('src/pages/Claim/ClaimRmaList.vue'),
},
{
name: 'ClaimCreate',
path: 'create',
meta: {
title: 'createClaim',
icon: 'vn:addperson',
},
component: () => import('src/pages/Claim/ClaimCreate.vue'),
}
]
},
@ -76,8 +67,7 @@ export default {
title: 'rma',
roles: ['claimManager']
},
component: () => import('src/pages/Claim/Card/ClaimRma.vue'),
props: { claim: true }
component: () => import('src/pages/Claim/Card/ClaimRma.vue')
}
]
},