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

feat: refs #8118 add VnDropdown component and integrate it into Claim and Ticket summaries #1517

Merged
benjaminedc merged 53 commits from 8118-createComponentVnDropdown into dev 2025-03-26 10:32:30 +00:00
Conversation 1 Commits 53 Files Changed 3 +22 -28
3 changed files with 22 additions and 28 deletions
Showing only changes of commit 13c547dd6a - Show all commits
src
components/common
VnDropdown.vue
pages
Claim/Card
ClaimSummary.vue
Ticket/Card
TicketSummary.vue

27
src/components/common/VnDropdown.vue
View File

@ -11,14 +11,18 @@ const $props = defineProps({
type: Boolean,
default: null,
},
moduleName: {
type: String,
default: null,
},
options: {
benjaminedc marked this conversation as resolved
jorgep commented 2025-02-28 12:21:56 +00:00
Review

No usar moduleName , optionLabel

No usar moduleName , optionLabel
type: Array,
default: null,
},
optionLabel: {
type: String,
default: 'name',
},
benjaminedc marked this conversation as resolved Outdated
jorgep commented 2025-02-28 12:32:41 +00:00
Outdated
Review

añadir también optionValue, tiene que ser flexible, puede que no se quiera usar siempre code, si quieres ponerlo como opción por defecto vale.

añadir también optionValue, tiene que ser flexible, puede que no se quiera usar siempre code, si quieres ponerlo como opción por defecto vale.
optionValue: {
type: String,
default: 'id',
},
});
async function changeState(value) {
@ -37,24 +41,13 @@ async function changeState(value) {
>
<VnSelect
benjaminedc marked this conversation as resolved
jorgep commented 2025-02-28 12:25:15 +00:00
Review

añadir: :option-label="optionLabel", se puede hacer directamente :option-label si se llama igual la variable que quieres pasar, pero al ser camelCase no sé si funciona.

añadir: `:option-label="optionLabel"`, se puede hacer directamente :option-label si se llama igual la variable que quieres pasar, pero al ser camelCase no sé si funciona.
:options="$props.options"
:option-label="$props.optionLabel"
:option-value="$props.optionValue"
hide-selected
option-value="code"
hide-dropdown-icon
focus-on-mount
@update:model-value="changeState"
>
<template #option="scope">
<QItem v-bind="scope.itemProps">
<QItemSection>
<QItemLabel v-if="$props.moduleName === 'Ticket'">
{{ scope.opt?.name }}
</QItemLabel>
<QItemLabel v-if="$props.moduleName === 'Claim'">
{{ scope.opt?.description }}
</QItemLabel>
</QItemSection>
</QItem>
</template>
</VnSelect>
benjaminedc marked this conversation as resolved
jorgep commented 2025-03-14 09:39:55 +00:00
Review

Este template es el que tiene por defecto VnSelect, no hace falta que lo añadas aquí.

Este template es el que tiene por defecto VnSelect, no hace falta que lo añadas aquí.
</QBtnDropdown>
</template>

17
src/pages/Claim/Card/ClaimSummary.vue
View File

@ -174,9 +174,8 @@ function openDialog(dmsId) {
}
async function changeState(value) {
benjaminedc marked this conversation as resolved Outdated
jorgep commented 2025-02-28 12:37:01 +00:00
Outdated
Review

Si en VnDropdown, creas la prop optionValue y le dices que use id , ya no te hace falta hacer un find para encontrar el id.

Si en VnDropdown, creas la prop optionValue y le dices que use id , ya no te hace falta hacer un find para encontrar el id.
const newState = claimStates.value.find((state) => state.code == value);
await axios.patch(`Claims/updateClaim/${entityId.value}`, {
claimStateFk: newState.id,
claimStateFk: value,
});
router.go(route.fullPath);
}
@ -184,14 +183,15 @@ async function changeState(value) {
function claimUrl(section) {
return '#/claim/' + entityId.value + '/' + section;
}
onMounted(async () => {
const { data } = await axios.get('ClaimStates');
claimStates.value = data;
});
</script>
benjaminedc marked this conversation as resolved Outdated
jorgep commented 2025-03-14 09:34:47 +00:00
Outdated
Review

Pasar a fetchData y obtener solo los campos que necesitas(id y name)

Pasar a fetchData y obtener solo los campos que necesitas(id y name)
<template>
<FetchData
url="ClaimStates"
:filter="{ fields: ['id', 'description'] }"
@on-fetch="(data) => (claimStates = data)"
auto-load
/>
<FetchData
url="ClaimDms"
:filter="claimDmsFilter"
@ -210,8 +210,9 @@ onMounted(async () => {
</template>
<template #header-right>
<VnDropdown
:moduleName="route.meta.moduleName"
:options="claimStates"
option-label="description"
option-value="id"
benjaminedc marked this conversation as resolved Outdated
jorgep commented 2025-03-24 08:44:13 +00:00
Outdated
Review

Si usas id no no hace falta pasar la propiedad, utiliza ese por defecto

Si usas id no no hace falta pasar la propiedad, utiliza ese por defecto
@change-state="changeState($event)"
/>
</template>

6
src/pages/Ticket/Card/TicketSummary.vue
View File

@ -114,10 +114,10 @@ onMounted(async () => {
</template>
<template #header-right>
<VnDropdown
:moduleName="route.meta.moduleName"
:moduleId="entityId"
:options="editableStates"
:disable="!isEditable()"
:options="editableStates"
:option-label="'name'"
benjaminedc marked this conversation as resolved Outdated
jorgep commented 2025-03-24 09:24:15 +00:00
Outdated
Review

no hace falta usar ":" cuando es texto.

no hace falta usar ":" cuando es texto.
:option-value="'code'"
benjaminedc marked this conversation as resolved Outdated
jorgep commented 2025-03-14 09:39:05 +00:00
Outdated
Review

Aquí tenías puesto antes el code, ahora usas el id,, pero el back espera un code.

Aquí tenías puesto antes el code, ahora usas el id,, pero el back espera un code.
@change-state="changeState($event)"
benjaminedc marked this conversation as resolved
jorgep commented 2025-03-24 09:32:14 +00:00
Review

No hace falta poner $event, con poner changeState es suficiente.

No hace falta poner $event, con poner **changeState** es suficiente.
/>
</template>