6157-actionClaim #106
|
@ -1,9 +1,11 @@
|
|||
<script setup>
|
||||
import { computed, useSlots, ref, watch, watchEffect } from 'vue';
|
||||
import { computed, useSlots, ref, watch, onMounted } from 'vue';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import axios from 'axios';
|
||||
import SkeletonDescriptor from 'components/ui/SkeletonDescriptor.vue';
|
||||
import { useArrayData } from 'src/composables/useArrayData';
|
||||
import { table } from 'quasar/dist/icon-set/material-icons.umd.prod';
|
||||
import { useArrayDataStore } from 'stores/useArrayDataStore';
|
||||
|
||||
const $props = defineProps({
|
||||
dataKey: { type: String, default: null },
|
||||
|
@ -28,55 +30,119 @@ const $props = defineProps({
|
|||
default: null,
|
||||
},
|
||||
});
|
||||
const arrayData = useArrayData('claimData');
|
||||
console.log('arraydata en descriptor', arrayData.store.data);
|
||||
|
||||
// watch(
|
||||
// () => $props,
|
||||
// (props) => {
|
||||
// fetch(props.url);
|
||||
carlossa marked this conversation as resolved
|
||||
// },
|
||||
// { deep: true }
|
||||
// );
|
||||
|
||||
// const emit = defineEmits(['onFetch']);
|
||||
// const arrayData = computed(() => {
|
||||
// const currentArrayData = useArrayData($props.dataKey);
|
||||
// const newArrayData = useArrayData($props.dataKey, {
|
||||
// url: $props.url,
|
||||
// filter: $props.filter,
|
||||
// });
|
||||
// console.log(currentArrayData.store.url, currentArrayData?.store?.url != $props.url);
|
||||
// if (currentArrayData?.store?.url != $props.url) newArrayData.fetch({ append: false });
|
||||
// return newArrayData;
|
||||
// });
|
||||
|
||||
// watch(
|
||||
// () => arrayData,
|
||||
// (arrayData) => {
|
||||
// console.log('watch CHANGE??', arrayData.value.store.data);
|
||||
// entity.value = arrayData.value.store.data;
|
||||
// emit('onFetch', arrayData.value.store.data);
|
||||
// },
|
||||
// { deep: true }
|
||||
// );
|
||||
carlossa marked this conversation as resolved
Outdated
alexm
commented
Borrala si no se gasta ni fa res Borrala si no se gasta ni fa res
|
||||
|
||||
// const slots = useSlots();
|
||||
// const { t } = useI18n();
|
||||
// let lastUrl = ref(null);
|
||||
// const entity = ref();
|
||||
|
||||
// async function fetch(url) {
|
||||
// console.log('FETCH??', arrayData.value.store.url, url);
|
||||
// if (arrayData.value.store.url == url) return;
|
||||
// useArrayData($props.dataKey, {
|
||||
// url: url ?? $props.url,
|
||||
// filter: $props.filter,
|
||||
// });
|
||||
// await arrayData.value.fetch({ append: false });
|
||||
// console.log('FETCH?? 2', url, $props.url);
|
||||
// // if (arrayData.value.store.data) emit('onFetch', arrayData.value.store.data);
|
||||
// }
|
||||
|
||||
// watch($props, async () => {
|
||||
// if (lastUrl.value == $props.url) return;
|
||||
// entity.value = arrayData.value.store.data;
|
||||
// // await fetch();
|
||||
// });
|
||||
|
||||
// onMounted(async () => {
|
||||
// console.log('onMounted');
|
||||
// fetch($props.url);
|
||||
// });
|
||||
|
||||
/*
|
||||
|
||||
ArrayData es null. la url tb
|
||||
|
||||
Watch → arrayData
|
||||
url diferent a la nostra fetch
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
*/
|
||||
|
||||
// onMounted(async () => {
|
||||
// console.log('onMounted');
|
||||
// fetch($props.url);
|
||||
// });
|
||||
const slots = useSlots();
|
||||
const { t } = useI18n();
|
||||
const entity = ref(null);
|
||||
let lastUrl = ref(null);
|
||||
entity.value = computed(() => {
|
||||
console.log('COMPUTED ', arrayData.store.data.id);
|
||||
return arrayData.store.data;
|
||||
});
|
||||
|
||||
const emit = defineEmits(['onFetch']);
|
||||
const arrayDataStore = useArrayDataStore();
|
||||
|
||||
async function fetch() {
|
||||
console.log('MY FETCH');
|
||||
lastUrl.value = $props.url;
|
||||
const params = {};
|
||||
const arrayData = computed(() => {
|
||||
const current = arrayDataStore.get($props.dataKey);
|
||||
const currentArrayData = useArrayData($props.dataKey);
|
||||
const newArrayData = useArrayData($props.dataKey, {
|
||||
url: $props.url,
|
||||
filter: $props.filter,
|
||||
});
|
||||
console.log(
|
||||
'URLS ',
|
||||
currentArrayData.store.url,
|
||||
$props.dataKey,
|
||||
$props.url,
|
||||
current?.url
|
||||
);
|
||||
if (current?.url != $props.url) newArrayData.fetch({ append: false });
|
||||
if (newArrayData.store.data) emit('onFetch', newArrayData.store.data);
|
||||
|
||||
if ($props.filter) params.filter = JSON.stringify($props.filter);
|
||||
|
||||
const { data } = await axios.get($props.url, { params });
|
||||
entity.value = data;
|
||||
|
||||
emit('onFetch', data);
|
||||
}
|
||||
|
||||
watch($props, async () => {
|
||||
console.log(useArrayData('claimData'));
|
||||
if (lastUrl.value == $props.url) return;
|
||||
entity.value = null;
|
||||
// await fetch();
|
||||
return newArrayData;
|
||||
});
|
||||
|
||||
watchEffect(() => {
|
||||
console.log(arrayData.store.data);
|
||||
entity.value = arrayData.store.data;
|
||||
});
|
||||
|
||||
async function myFn() {
|
||||
const arrayData = useArrayData('claimData');
|
||||
const store = arrayData.store;
|
||||
console.log('myFn', store);
|
||||
}
|
||||
watch(
|
||||
() => arrayData,
|
||||
(arrayData) => {
|
||||
console.log('watch CHANGE??', arrayDataStore.get($props.dataKey));
|
||||
},
|
||||
{ deep: true }
|
||||
);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<QBtn @click="myFn()">a</QBtn>
|
||||
<div class="descriptor">
|
||||
<template v-if="entity">
|
||||
<template v-if="arrayData.store.data">
|
||||
<div class="header bg-primary q-pa-sm">
|
||||
<RouterLink :to="{ name: `${module}List` }">
|
||||
<QBtn
|
||||
|
@ -93,7 +159,12 @@ async function myFn() {
|
|||
</QTooltip>
|
||||
</QBtn>
|
||||
</RouterLink>
|
||||
<RouterLink :to="{ name: `${module}Summary`, params: { id: entity.id } }">
|
||||
<RouterLink
|
||||
:to="{
|
||||
name: `${module}Summary`,
|
||||
params: { id: arrayData.store.data.id },
|
||||
}"
|
||||
>
|
||||
<QBtn
|
||||
round
|
||||
flat
|
||||
|
@ -136,33 +207,37 @@ async function myFn() {
|
|||
<span v-if="$props.title" :title="$props.title">
|
||||
{{ $props.title }}
|
||||
</span>
|
||||
<slot v-else name="description" :entity="entity">
|
||||
<span :title="entity.name">
|
||||
{{ entity.name }}
|
||||
<slot
|
||||
v-else
|
||||
name="description"
|
||||
:entity="arrayData.store.data"
|
||||
>
|
||||
<span :title="arrayData.store.data.name">
|
||||
{{ arrayData.store.data.name }}
|
||||
</span>
|
||||
</slot>
|
||||
</div>
|
||||
</QItemLabel>
|
||||
<QItem dense>
|
||||
<QItemLabel class="subtitle" caption>
|
||||
#{{ $props.subtitle ?? entity.id }}
|
||||
#{{ $props.subtitle ?? arrayData.store.data.id }}
|
||||
</QItemLabel>
|
||||
</QItem>
|
||||
</QList>
|
||||
<div class="list-box q-mt-xs">
|
||||
<slot name="body" :entity="entity" />
|
||||
<slot name="body" :entity="arrayData.store.data" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="icons">
|
||||
<slot name="icons" :entity="entity" />
|
||||
<slot name="icons" :entity="arrayData.store.data" />
|
||||
</div>
|
||||
<div class="actions">
|
||||
<slot name="actions" :entity="entity" />
|
||||
<slot name="actions" :entity="arrayData.store.data" />
|
||||
</div>
|
||||
<slot name="after" />
|
||||
</template>
|
||||
<!-- Skeleton -->
|
||||
<SkeletonDescriptor v-if="!entity" />
|
||||
<SkeletonDescriptor v-if="!arrayData.store.data" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
|
@ -7,7 +7,7 @@ const arrayDataStore = useArrayDataStore();
|
|||
|
||||
export function useArrayData(key, userOptions) {
|
||||
if (!key) throw new Error('ArrayData: A key is required to use this composable');
|
||||
|
||||
console.log('CALLED WITH KEY → ', key, userOptions);
|
||||
if (!arrayDataStore.get(key)) {
|
||||
arrayDataStore.set(key);
|
||||
}
|
||||
|
@ -40,7 +40,7 @@ export function useArrayData(key, userOptions) {
|
|||
'userParams',
|
||||
'userFilter',
|
||||
];
|
||||
if (typeof userOptions === 'object') {
|
||||
if (userOptions && typeof userOptions === 'object') {
|
||||
for (const option in userOptions) {
|
||||
const isEmpty = userOptions[option] == null || userOptions[option] == '';
|
||||
if (isEmpty || !allowedOptions.includes(option)) continue;
|
||||
|
@ -74,6 +74,7 @@ export function useArrayData(key, userOptions) {
|
|||
Object.assign(params, store.userParams);
|
||||
|
||||
store.isLoading = true;
|
||||
console.log('ARRAY FETCH', store.url);
|
||||
const response = await axios.get(store.url, {
|
||||
signal: canceller.signal,
|
||||
params,
|
||||
|
@ -147,7 +148,7 @@ export function useArrayData(key, userOptions) {
|
|||
if (store.userParams && Object.keys(store.userParams).length !== 0)
|
||||
query.params = JSON.stringify(store.userParams);
|
||||
|
||||
router.replace({
|
||||
router?.replace({
|
||||
path: route.path,
|
||||
query: query,
|
||||
});
|
||||
|
|
|
@ -104,7 +104,6 @@ watchEffect(() => {
|
|||
});
|
||||
|
||||
function getDestination(destinationId) {
|
||||
carlossa marked this conversation as resolved
Outdated
alexm
commented
Esta funcio no se crida mai Esta funcio no se crida mai
|
||||
console.log(destinationTypes.value.find((type) => type.id == destinationId));
|
||||
return destinationTypes.value.find((type) => type.id == destinationId);
|
||||
}
|
||||
|
||||
|
|
|
@ -69,6 +69,8 @@ function stateColor(code) {
|
|||
}
|
||||
const data = ref(useCardDescription());
|
||||
const setData = (entity) => {
|
||||
console.log('SET ENTITY SETDATA', entity);
|
||||
carlossa marked this conversation as resolved
Outdated
jsegarra
commented
Revisamos linea 65! **Revisamos linea 65!**
|
||||
if (!entity) return;
|
||||
data.value = useCardDescription(entity.client.name, entity.id);
|
||||
state.set('ClaimDescriptor', entity);
|
||||
};
|
||||
|
@ -83,6 +85,7 @@ const setData = (entity) => {
|
|||
:title="data.title"
|
||||
:subtitle="data.subtitle"
|
||||
@on-fetch="setData"
|
||||
data-key="claimData"
|
||||
>
|
||||
<template #menu="{ entity }">
|
||||
<ClaimDescriptorMenu :claim="entity" />
|
||||
|
@ -120,16 +123,16 @@ const setData = (entity) => {
|
|||
<VnLv :label="t('claim.card.commercial')">
|
||||
<template #value>
|
||||
<span class="link">
|
||||
{{ entity.client.salesPersonUser.name }}
|
||||
<WorkerDescriptorProxy :id="entity.client.salesPersonFk" />
|
||||
{{ entity.client?.salesPersonUser?.name }}
|
||||
<WorkerDescriptorProxy :id="entity.client?.salesPersonFk" />
|
||||
</span>
|
||||
</template>
|
||||
</VnLv>
|
||||
<VnLv
|
||||
:label="t('claim.card.province')"
|
||||
:value="entity.ticket.address.province.name"
|
||||
:value="entity.ticket?.address?.province?.name"
|
||||
/>
|
||||
<VnLv :label="t('claim.card.zone')" :value="entity.ticket.zone.name" />
|
||||
<VnLv :label="t('claim.card.zone')" :value="entity.ticket?.zone?.name" />
|
||||
</template>
|
||||
<template #actions="{ entity }">
|
||||
<QCardActions>
|
||||
|
|
|
@ -55,13 +55,14 @@ function getWorkerAvatar() {
|
|||
}
|
||||
const data = ref(useCardDescription());
|
||||
const setData = (entity) => {
|
||||
console.log('entity ASDASD', entity);
|
||||
if (!entity) return;
|
||||
data.value = useCardDescription(entity.user.nickname, entity.id);
|
||||
};
|
||||
</script>
|
||||
<template>
|
||||
<CardDescriptor
|
||||
module="Worker"
|
||||
data-key="workerData"
|
||||
:url="`Workers/${entityId}`"
|
||||
:filter="filter"
|
||||
:title="data.title"
|
||||
|
|
Loading…
Reference in New Issue
Esta tb borrala