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>
|
<script setup>
|
||||||
import { onBeforeMount, ref, watch } from 'vue';
|
import { useRoute } from 'vue-router';
|
||||||
import { useRoute, useRouter } from 'vue-router';
|
|
||||||
import { useI18n } from 'vue-i18n';
|
|
||||||
|
|
||||||
import axios from 'axios';
|
import VnNotes from 'src/components/ui/VnNotes.vue';
|
||||||
import { date } from 'quasar';
|
|
||||||
|
|
||||||
const { t } = useI18n();
|
|
||||||
const route = useRoute();
|
const route = useRoute();
|
||||||
const router = useRouter();
|
|
||||||
|
|
||||||
const rows = ref([]);
|
|
||||||
|
|
||||||
const filter = {
|
const filter = {
|
||||||
order: 'created DESC',
|
order: 'created DESC',
|
||||||
where: { workerFk: null },
|
where: { workerFk: route.params.id },
|
||||||
include: { relation: 'user' },
|
include: {
|
||||||
|
relation: 'worker',
|
||||||
|
scope: {
|
||||||
|
fields: ['id', 'firstName', 'lastName'],
|
||||||
|
include: {
|
||||||
|
relation: 'user',
|
||||||
|
scope: {
|
||||||
|
fields: ['id', 'nickname'],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
};
|
};
|
||||||
|
|
||||||
onBeforeMount(() => {
|
const body = {
|
||||||
getData(route.params.id);
|
workerFk: 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' });
|
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div class="full-width flex justify-center">
|
<VnNotes
|
||||||
<QCard class="full-width q-pa-lg" v-if="rows.length">
|
style="overflow-y: auto"
|
||||||
<div>
|
:add-note="{ type: Boolean, default: true }"
|
||||||
<QCard
|
url="WorkerObservations"
|
||||||
v-for="(item, index) in rows"
|
:filter="filter"
|
||||||
:key="index"
|
:body="body"
|
||||||
: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>
|
|
||||||
</template>
|
</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