Se implementa nuevo componente para la gestion de notas
gitea/salix-front/pipeline/pr-dev There was a failure building this commit
Details
gitea/salix-front/pipeline/pr-dev There was a failure building this commit
Details
This commit is contained in:
carlosfonseca
parent
081d4bf5fc
commit
8cf14929e3
|
|
@ -1,98 +1,38 @@
|
|||
<script setup>
|
||||
import { onBeforeMount, ref, watch } from 'vue';
|
||||
import { useRoute, useRouter } from 'vue-router';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import { useRoute } from 'vue-router';
|
||||
|
||||
import axios from 'axios';
|
||||
import { date } from 'quasar';
|
||||
import VnNotes from 'src/components/ui/VnNotes.vue';
|
||||
|
||||
const { t } = useI18n();
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
|
||||
const rows = ref([]);
|
||||
|
||||
const filter = {
|
||||
order: 'created DESC',
|
||||
where: { workerFk: null },
|
||||
include: { relation: 'user' },
|
||||
where: { workerFk: route.params.id },
|
||||
include: {
|
||||
relation: 'worker',
|
||||
scope: {
|
||||
fields: ['id', 'firstName', 'lastName'],
|
||||
include: {
|
||||
relation: 'user',
|
||||
scope: {
|
||||
fields: ['id', 'nickname'],
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
onBeforeMount(() => {
|
||||
getData(route.params.id);
|
||||
});
|
||||
|
||||
watch(
|
||||
() => route.params.id,
|
||||
(newValue) => {
|
||||
getData(newValue);
|
||||
}
|
||||
);
|
||||
|
||||
const getData = async (id) => {
|
||||
filter.where.workerFk = id;
|
||||
try {
|
||||
const { data } = await axios.get('WorkerObservations', {
|
||||
params: { filter: JSON.stringify(filter) },
|
||||
});
|
||||
rows.value = data;
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
}
|
||||
};
|
||||
|
||||
const toWorkerNoteCreate = () => {
|
||||
router.push({ name: 'WorkerNoteCreate' });
|
||||
const body = {
|
||||
workerFk: route.params.id,
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="full-width flex justify-center">
|
||||
<QCard class="full-width q-pa-lg" v-if="rows.length">
|
||||
<div>
|
||||
<QCard
|
||||
v-for="(item, index) in rows"
|
||||
:key="index"
|
||||
:class="{
|
||||
'q-pa-md': true,
|
||||
'q-rounded': true,
|
||||
'custom-border': true,
|
||||
'q-mb-md': index < rows.length - 1,
|
||||
}"
|
||||
>
|
||||
<div class="flex justify-end">
|
||||
<p class="color-vn-label q-mb-none">
|
||||
{{ date.formatDate(item?.created, 'DD-MM-YYYY HH:mm') }}
|
||||
</p>
|
||||
</div>
|
||||
<h6 class="q-mt-none q-mb-none">{{ item.text }}</h6>
|
||||
</QCard>
|
||||
</div>
|
||||
</QCard>
|
||||
<div v-else>
|
||||
<h5 class="flex justify-center color-vn-label">
|
||||
{{ t('globals.noResults') }}
|
||||
</h5>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<QPageSticky :offset="[18, 18]">
|
||||
<QBtn @click.stop="toWorkerNoteCreate()" color="primary" fab icon="add" />
|
||||
<QTooltip>
|
||||
{{ t('New note') }}
|
||||
</QTooltip>
|
||||
</QPageSticky>
|
||||
<VnNotes
|
||||
style="overflow-y: auto"
|
||||
:add-note="{ type: Boolean, default: true }"
|
||||
url="WorkerObservations"
|
||||
:filter="filter"
|
||||
:body="body"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
.custom-border {
|
||||
border: 2px solid var(--vn-light-gray);
|
||||
border-radius: 10px;
|
||||
padding: 10px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<i18n>
|
||||
es:
|
||||
New note: Nueva nota
|
||||
</i18n>
|
||||
|
|
|
|||
|
|
@ -1,99 +0,0 @@
|
|||
<script setup>
|
||||
import { computed, ref } from 'vue';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import { useRoute, useRouter } from 'vue-router';
|
||||
|
||||
import axios from 'axios';
|
||||
|
||||
import useNotify from 'src/composables/useNotify';
|
||||
|
||||
import VnRow from 'components/ui/VnRow.vue';
|
||||
|
||||
const { notify } = useNotify();
|
||||
const { t } = useI18n();
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
|
||||
const isLoading = ref(false);
|
||||
const text = ref('');
|
||||
|
||||
const hasChanged = computed(() => {
|
||||
return text.value !== '';
|
||||
});
|
||||
|
||||
const onSubmit = async () => {
|
||||
isLoading.value = true;
|
||||
|
||||
const payload = {
|
||||
text: text.value,
|
||||
workerFk: Number(route.params.id),
|
||||
};
|
||||
try {
|
||||
await axios.post('WorkerObservations', payload);
|
||||
text.value = null;
|
||||
notify('globals.dataSaved', 'positive');
|
||||
toWorkerNotes();
|
||||
} catch (error) {
|
||||
notify(error.error, 'negative');
|
||||
} finally {
|
||||
isLoading.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
const toWorkerNotes = () => {
|
||||
router.push({
|
||||
name: 'WorkerNotes',
|
||||
params: {
|
||||
id: route.params.id,
|
||||
},
|
||||
});
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Teleport to="#st-actions">
|
||||
<QBtnGroup push class="q-gutter-x-sm">
|
||||
<QBtn
|
||||
:disabled="isLoading"
|
||||
:label="t('globals.cancel')"
|
||||
:loading="isLoading"
|
||||
@click="toWorkerNotes"
|
||||
color="primary"
|
||||
flat
|
||||
icon="close"
|
||||
/>
|
||||
<QBtn
|
||||
:disabled="!hasChanged"
|
||||
:label="t('globals.save')"
|
||||
:loading="isLoading"
|
||||
@click="onSubmit"
|
||||
color="primary"
|
||||
icon="save"
|
||||
/>
|
||||
</QBtnGroup>
|
||||
</Teleport>
|
||||
|
||||
<div class="full-width flex justify-center">
|
||||
<QCard class="card-width q-pa-lg">
|
||||
<QCardSection>
|
||||
<QForm>
|
||||
<VnRow class="row q-gutter-md q-mb-md">
|
||||
<div class="col">
|
||||
<QInput
|
||||
:label="t('Note')"
|
||||
autofocus
|
||||
type="textarea"
|
||||
v-model="text"
|
||||
/>
|
||||
</div>
|
||||
</VnRow>
|
||||
</QForm>
|
||||
</QCardSection>
|
||||
</QCard>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<i18n>
|
||||
es:
|
||||
Note: Nota
|
||||
</i18n>
|
||||
Loading…
Reference in New Issue