#7874 add observation type #765
|
|
@ -1,6 +1,6 @@
|
|||
<script setup>
|
||||
import axios from 'axios';
|
||||
import { ref } from 'vue';
|
||||
import { ref, reactive } from 'vue';
|
||||
import { onBeforeRouteLeave } from 'vue-router';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import { useQuasar } from 'quasar';
|
||||
|
|
@ -12,36 +12,40 @@ import VnPaginate from 'components/ui/VnPaginate.vue';
|
|||
import VnUserLink from 'components/ui/VnUserLink.vue';
|
||||
import VnConfirm from 'components/ui/VnConfirm.vue';
|
||||
import VnAvatar from 'components/ui/VnAvatar.vue';
|
||||
import VnRow from 'components/ui/VnRow.vue';
|
||||
|
jorgep marked this conversation as resolved
Outdated
|
||||
import VnSelect from 'components/common/VnSelect.vue';
|
||||
import FetchData from 'components/FetchData.vue';
|
||||
import VnInput from 'components/common/VnInput.vue';
|
||||
|
||||
const $props = defineProps({
|
||||
url: { type: String, default: null },
|
||||
filter: { type: Object, default: () => {} },
|
||||
body: { type: Object, default: () => {} },
|
||||
addNote: { type: Boolean, default: false },
|
||||
selectType: { type: Boolean, default: false },
|
||||
});
|
||||
|
||||
const { t } = useI18n();
|
||||
const state = useState();
|
||||
const quasar = useQuasar();
|
||||
const currentUser = ref(state.getUser());
|
||||
const newNote = ref('');
|
||||
const newNote = reactive({ text: null, observationTypeFk: null });
|
||||
|
jorgep marked this conversation as resolved
Outdated
jsegarra
commented
porque no puede ser null? porque no puede ser null?
|
||||
const observationTypes = ref([]);
|
||||
const vnPaginateRef = ref();
|
||||
function handleKeyUp(event) {
|
||||
if (event.key === 'Enter') {
|
||||
event.preventDefault();
|
||||
if (!event.shiftKey) insert();
|
||||
}
|
||||
}
|
||||
|
||||
async function insert() {
|
||||
if (!newNote.text || !newNote.observationTypeFk) return;
|
||||
|
||||
const body = $props.body;
|
||||
const newBody = { ...body, ...{ text: newNote.value } };
|
||||
const newBody = {
|
||||
...body,
|
||||
...{ text: newNote.text, observationTypeFk: newNote.observationTypeFk },
|
||||
};
|
||||
await axios.post($props.url, newBody);
|
||||
await vnPaginateRef.value.fetch();
|
||||
newNote.value = '';
|
||||
}
|
||||
|
||||
onBeforeRouteLeave((to, from, next) => {
|
||||
if (newNote.value)
|
||||
if (newNote.text)
|
||||
quasar.dialog({
|
||||
component: VnConfirm,
|
||||
componentProps: {
|
||||
|
|
@ -54,6 +58,13 @@ onBeforeRouteLeave((to, from, next) => {
|
|||
});
|
||||
</script>
|
||||
<template>
|
||||
<FetchData
|
||||
v-if="selectType"
|
||||
url="ObservationTypes"
|
||||
:filter="{ fields: ['id', 'description'] }"
|
||||
auto-load
|
||||
@on-fetch="(data) => (observationTypes = data)"
|
||||
/>
|
||||
<QCard class="q-pa-xs q-mb-xl full-width" v-if="$props.addNote">
|
||||
<QCardSection horizontal>
|
||||
<VnAvatar :worker-id="currentUser.id" size="md" />
|
||||
|
|
@ -62,29 +73,42 @@ onBeforeRouteLeave((to, from, next) => {
|
|||
{{ t('globals.now') }}
|
||||
</div>
|
||||
</QCardSection>
|
||||
<QCardSection class="q-pa-xs q-my-none q-py-none" horizontal>
|
||||
<QInput
|
||||
v-model="newNote"
|
||||
class="full-width"
|
||||
type="textarea"
|
||||
:label="t('Add note here...')"
|
||||
filled
|
||||
size="lg"
|
||||
autogrow
|
||||
autofocus
|
||||
@keyup="handleKeyUp"
|
||||
clearable
|
||||
>
|
||||
<template #append>
|
||||
<QBtn
|
||||
:title="t('Save (Enter)')"
|
||||
icon="save"
|
||||
color="primary"
|
||||
flat
|
||||
@click="insert"
|
||||
/>
|
||||
</template>
|
||||
</QInput>
|
||||
<QCardSection class="q-px-xs q-my-none q-py-none">
|
||||
<VnRow class="full-width">
|
||||
<VnSelect
|
||||
:label="t('Observation type')"
|
||||
v-if="selectType"
|
||||
url="ObservationTypes"
|
||||
v-model="newNote.observationTypeFk"
|
||||
option-label="description"
|
||||
style="flex: 0.15"
|
||||
:required="true"
|
||||
@keyup.enter.stop="insert"
|
||||
/>
|
||||
<VnInput
|
||||
v-model.trim="newNote.text"
|
||||
type="textarea"
|
||||
:label="t('Add note here...')"
|
||||
filled
|
||||
size="lg"
|
||||
autogrow
|
||||
@keyup.enter.stop="insert"
|
||||
clearable
|
||||
:required="true"
|
||||
>
|
||||
<template #append>
|
||||
<QBtn
|
||||
:title="t('Save (Enter)')"
|
||||
icon="save"
|
||||
color="primary"
|
||||
flat
|
||||
@click="insert"
|
||||
class="q-mb-xs"
|
||||
dense
|
||||
/>
|
||||
</template>
|
||||
</VnInput>
|
||||
</VnRow>
|
||||
</QCardSection>
|
||||
</QCard>
|
||||
<VnPaginate
|
||||
|
|
@ -98,6 +122,10 @@ onBeforeRouteLeave((to, from, next) => {
|
|||
class="show"
|
||||
v-bind="$attrs"
|
||||
search-url="notes"
|
||||
@on-fetch="
|
||||
newNote.text = '';
|
||||
newNote.observationTypeFk = null;
|
||||
"
|
||||
>
|
||||
<template #body="{ rows }">
|
||||
<TransitionGroup name="list" tag="div" class="column items-center full-width">
|
||||
|
|
@ -111,13 +139,28 @@ onBeforeRouteLeave((to, from, next) => {
|
|||
:descriptor="false"
|
||||
:worker-id="note.workerFk"
|
||||
size="md"
|
||||
:title="note.worker?.user.nickname"
|
||||
/>
|
||||
<div class="full-width row justify-between q-pa-xs">
|
||||
<VnUserLink
|
||||
:name="`${note.worker.user.nickname}`"
|
||||
:worker-id="note.worker.id"
|
||||
/>
|
||||
{{ toDateHourMin(note.created) }}
|
||||
<div>
|
||||
<VnUserLink
|
||||
:name="`${note.worker.user.nickname}`"
|
||||
:worker-id="note.worker.id"
|
||||
/>
|
||||
<QBadge
|
||||
class="q-ml-xs"
|
||||
outline
|
||||
color="grey"
|
||||
v-if="selectType && note.observationTypeFk"
|
||||
>
|
||||
{{
|
||||
observationTypes.find(
|
||||
(ot) => ot.id === note.observationTypeFk
|
||||
)?.description
|
||||
}}
|
||||
</QBadge>
|
||||
</div>
|
||||
|
jorgep marked this conversation as resolved
Outdated
jsegarra
commented
Porque usamos vnselect para informar al usuario del tipo? Entendería esto si de alguna manera cambiase de estado, es decir readonly o no. Porque usamos vnselect para informar al usuario del tipo? Entendería esto si de alguna manera cambiase de estado, es decir readonly o no.
Mi propuesta es que sea un texto o por ejemplo un QBadge outlined
Veo consigo usar vnselect readonly
jorgep
commented
Es para seguir el patrón de estilo de otras secciones. @jgallego que opinas? Es para seguir el patrón de estilo de otras secciones. @jgallego que opinas?
|
||||
<span v-text="toDateHourMin(note.created)" />
|
||||
</div>
|
||||
</QCardSection>
|
||||
<QCardSection class="q-pa-xs q-my-none q-py-none">
|
||||
|
|
@ -131,12 +174,6 @@ onBeforeRouteLeave((to, from, next) => {
|
|||
<style lang="scss" scoped>
|
||||
.q-card {
|
||||
width: 90%;
|
||||
@media (max-width: $breakpoint-sm) {
|
||||
width: 100%;
|
||||
}
|
||||
&__section {
|
||||
word-wrap: break-word;
|
||||
}
|
||||
}
|
||||
.q-dialog .q-card {
|
||||
width: 400px;
|
||||
|
|
@ -150,11 +187,28 @@ onBeforeRouteLeave((to, from, next) => {
|
|||
opacity: 0;
|
||||
background-color: $primary;
|
||||
}
|
||||
|
||||
.vn-row > :nth-child(2) {
|
||||
|
jorgep
commented
El vnSelect El vnSelect
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
@media (max-width: $breakpoint-xs) {
|
||||
.vn-row > :deep(*) {
|
||||
margin-left: 0;
|
||||
}
|
||||
.q-card {
|
||||
width: 100%;
|
||||
|
||||
&__section {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<i18n>
|
||||
es:
|
||||
Add note here...: Añadir nota aquí...
|
||||
New note: Nueva nota
|
||||
Save (Enter): Guardar (Intro)
|
||||
|
||||
Observation type: Tipo de observación
|
||||
</i18n>
|
||||
|
|
|
|||
|
|
@ -22,5 +22,6 @@ const noteFilter = computed(() => {
|
|||
:filter="noteFilter"
|
||||
:body="{ clientFk: route.params.id }"
|
||||
style="overflow-y: auto"
|
||||
:select-type="true"
|
||||
/>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -25,19 +25,31 @@ const { notify } = useNotify();
|
|||
const { t } = useI18n();
|
||||
|
||||
const newObservation = ref(null);
|
||||
const obsId = ref(null);
|
||||
|
||||
const onSubmit = async () => {
|
||||
try {
|
||||
|
jorgep marked this conversation as resolved
Outdated
jsegarra
commented
Cada vez que hacemos un submit lanzamos una petición que siempre será la misma? Cada vez que hacemos un submit lanzamos una petición que siempre será la misma?
Fuera no lo veo porque haríamos una llamada cuando no es necesario pero dentro tampoco. Quizás algo intermedio tipo, si ya has hecho la petición una vez no la hagas otra
jorgep
commented
Al ser un dialogo , una vez se cierra ya no se puede usar(o no de la manera en que lo usamos nosotros) y se abre uno nuevo la proxima vez. De todas maneras pongo la comprobación. Al ser un dialogo , una vez se cierra ya no se puede usar(o no de la manera en que lo usamos nosotros) y se abre uno nuevo la proxima vez. De todas maneras pongo la comprobación.
|
||||
const data = $props.clients.map((item) => {
|
||||
return { clientFk: item.clientFk, text: newObservation.value };
|
||||
});
|
||||
await axios.post('ClientObservations', data);
|
||||
if (!obsId.value)
|
||||
obsId.value = (
|
||||
await axios.get('ObservationTypes/findOne', {
|
||||
params: { filter: { where: { description: 'Finance' } } },
|
||||
})
|
||||
).data?.id;
|
||||
|
||||
const payload = {
|
||||
const bodyObs = $props.clients.map((item) => {
|
||||
return {
|
||||
clientFk: item.clientFk,
|
||||
text: newObservation.value,
|
||||
observationTypeFk: obsId.value,
|
||||
};
|
||||
});
|
||||
await axios.post('ClientObservations', bodyObs);
|
||||
|
||||
const bodyObsMail = {
|
||||
defaulters: $props.clients,
|
||||
observation: newObservation.value,
|
||||
};
|
||||
await axios.post('Defaulters/observationEmail', payload);
|
||||
await axios.post('Defaulters/observationEmail', bodyObsMail);
|
||||
|
||||
await $props.promise();
|
||||
|
||||
|
|
|
|||
|
|
@ -240,39 +240,33 @@ function handleLocation(data, location) {
|
|||
class="row q-gutter-md q-mb-md"
|
||||
v-for="(note, index) in notes"
|
||||
>
|
||||
|
jorgep
commented
Aqui solo quito los divs y mejoró la ui, pero porque era algo sencillo, esta tarea no va realcionada con esta sección. Aqui solo quito los divs y mejoró la ui, pero porque era algo sencillo, esta tarea no va realcionada con esta sección.
|
||||
<div class="col">
|
||||
<VnSelect
|
||||
:label="t('Observation type')"
|
||||
:options="observationTypes"
|
||||
hide-selected
|
||||
option-label="description"
|
||||
option-value="id"
|
||||
v-model="note.observationTypeFk"
|
||||
/>
|
||||
</div>
|
||||
<div class="col">
|
||||
<VnInput
|
||||
:label="t('Description')"
|
||||
:rules="validate('route.description')"
|
||||
clearable
|
||||
v-model="note.description"
|
||||
/>
|
||||
</div>
|
||||
<div class="flex items-center">
|
||||
<QIcon
|
||||
@click.stop="deleteNote(note.id, index)"
|
||||
class="cursor-pointer"
|
||||
color="primary"
|
||||
name="delete"
|
||||
size="sm"
|
||||
>
|
||||
<QTooltip>
|
||||
{{ t('Remove note') }}
|
||||
</QTooltip>
|
||||
</QIcon>
|
||||
</div>
|
||||
<VnSelect
|
||||
:label="t('Observation type')"
|
||||
:options="observationTypes"
|
||||
hide-selected
|
||||
option-label="description"
|
||||
option-value="id"
|
||||
v-model="note.observationTypeFk"
|
||||
/>
|
||||
<VnInput
|
||||
:label="t('Description')"
|
||||
:rules="validate('route.description')"
|
||||
clearable
|
||||
v-model="note.description"
|
||||
/>
|
||||
<QIcon
|
||||
:style="{ flex: 0, 'align-self': $q.screen.gt.xs ? 'end' : 'center' }"
|
||||
@click.stop="deleteNote(note.id, index)"
|
||||
class="cursor-pointer"
|
||||
color="primary"
|
||||
name="delete"
|
||||
size="sm"
|
||||
>
|
||||
<QTooltip>
|
||||
{{ t('Remove note') }}
|
||||
</QTooltip>
|
||||
</QIcon>
|
||||
</VnRow>
|
||||
|
||||
<QBtn
|
||||
@click.stop="addNote()"
|
||||
class="cursor-pointer add-icon q-mt-md"
|
||||
|
|
|
|||
|
|
@ -1,4 +1,6 @@
|
|||
describe('ClaimNotes', () => {
|
||||
const saveBtn = '.q-field__append > .q-btn > .q-btn__content > .q-icon';
|
||||
const firstNote = '.q-infinite-scroll :nth-child(1) > .q-card__section--vert';
|
||||
beforeEach(() => {
|
||||
cy.login('developer');
|
||||
cy.visit(`/#/claim/${2}/notes`);
|
||||
|
|
@ -7,7 +9,7 @@ describe('ClaimNotes', () => {
|
|||
it('should add a new note', () => {
|
||||
const message = 'This is a new message.';
|
||||
cy.get('.q-textarea').type(message);
|
||||
cy.get('.q-field__append > .q-btn > .q-btn__content > .q-icon').click(); //save
|
||||
cy.get(':nth-child(1) > .q-card__section--vert').should('have.text', message);
|
||||
cy.get(saveBtn).click();
|
||||
cy.get(firstNote).should('have.text', message);
|
||||
});
|
||||
});
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Podemos seguir el standard de las lineas superiores, queda raro 2 formatos en el mismo archivo