6157-actionClaim #106

Merged
carlossa merged 22 commits from 6157-actionClaim into dev 2023-11-24 07:46:30 +00:00
5 changed files with 137 additions and 58 deletions
Showing only changes of commit abb1b3f7c1 - Show all commits

View File

@ -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
Review

Esta tb borrala

Esta tb borrala
// },
// { 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
Outdated
Review

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>

View File

@ -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,
});

View File

@ -104,7 +104,6 @@ watchEffect(() => {
});
function getDestination(destinationId) {
carlossa marked this conversation as resolved Outdated
Outdated
Review

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);
}

View File

@ -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

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>

View File

@ -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"