128 lines
4.2 KiB
Vue
128 lines
4.2 KiB
Vue
<script setup>
|
|
import WorkerDescriptorProxy from 'src/pages/Worker/Card/WorkerDescriptorProxy.vue';
|
|
import VnAvatar from 'src/components/ui/VnAvatar.vue';
|
|
import { toDateHour } from 'src/filters';
|
|
import { ref } from 'vue';
|
|
import axios from 'axios';
|
|
import { useI18n } from 'vue-i18n';
|
|
import VnPaginate from './VnPaginate.vue';
|
|
|
|
const $props = defineProps({
|
|
id: { type: String, required: true },
|
|
url: { type: String, default: null },
|
|
filter: { type: Object, default: () => {} },
|
|
body: { type: Object, default: () => {} },
|
|
addNote: { type: Boolean, default: false },
|
|
});
|
|
const { t } = useI18n();
|
|
const noteModal = ref(false);
|
|
const newNote = ref('');
|
|
const vnPaginateRef = ref();
|
|
|
|
async function insert() {
|
|
const body = $props.body;
|
|
Object.assign(body, { text: newNote.value });
|
|
await axios.post($props.url, body);
|
|
vnPaginateRef.value.fetch();
|
|
newNote.value = '';
|
|
}
|
|
</script>
|
|
<template>
|
|
<div class="column items-center">
|
|
<VnPaginate
|
|
:data-key="$props.url"
|
|
:url="$props.url"
|
|
order="created DESC"
|
|
:limit="20"
|
|
:filter="$props.filter"
|
|
auto-load
|
|
ref="vnPaginateRef"
|
|
>
|
|
<template #body="{ rows }">
|
|
<QCard class="q-pa-md q-mb-md" v-for="(note, index) in rows" :key="index">
|
|
<QCardSection horizontal>
|
|
<slot name="picture">
|
|
<VnAvatar :worker="note.workerFk" />
|
|
</slot>
|
|
<QItem class="full-width justify-between items-start">
|
|
<span class="link">
|
|
{{ `${note.worker.firstName} ${note.worker.lastName}` }}
|
|
<WorkerDescriptorProxy :id="note.worker.id" />
|
|
</span>
|
|
<slot name="actions">
|
|
{{ toDateHour(note.created) }}
|
|
</slot>
|
|
</QItem>
|
|
</QCardSection>
|
|
<QCardSection>
|
|
<slot name="text">
|
|
{{ note.text }}
|
|
</slot>
|
|
</QCardSection>
|
|
</QCard>
|
|
</template>
|
|
</VnPaginate>
|
|
<QPageSticky position="bottom-right" :offset="[25, 25]">
|
|
<QBtn
|
|
v-if="addNote"
|
|
color="primary"
|
|
icon="add"
|
|
size="lg"
|
|
round
|
|
@click="noteModal = true"
|
|
/>
|
|
</QPageSticky>
|
|
<QDialog v-model="noteModal" @hide="newNote = ''">
|
|
<QCard>
|
|
<QCardSection>
|
|
<QItem class="q-px-none">
|
|
<span class="text-primary text-h6 full-width">
|
|
<QIcon name="draft" class="q-mr-xs" />
|
|
{{ t('Add note') }}
|
|
</span>
|
|
<QBtn icon="close" flat round dense v-close-popup />
|
|
</QItem>
|
|
</QCardSection>
|
|
<QCardSection>
|
|
<QInput
|
|
autofocus
|
|
type="textarea"
|
|
:label="t('Add note here...')"
|
|
filled
|
|
size="lg"
|
|
autogrow
|
|
v-model="newNote"
|
|
></QInput>
|
|
</QCardSection>
|
|
<QCardActions class="justify-end q-mr-sm">
|
|
<QBtn
|
|
flat
|
|
:label="t('globals.close')"
|
|
color="primary"
|
|
v-close-popup
|
|
/>
|
|
<QBtn
|
|
:label="t('globals.save')"
|
|
color="primary"
|
|
v-close-popup
|
|
@click="insert"
|
|
/>
|
|
</QCardActions>
|
|
</QCard>
|
|
</QDialog>
|
|
</div>
|
|
</template>
|
|
<style lang="scss" scoped>
|
|
.q-card {
|
|
max-width: 80em;
|
|
}
|
|
.q-dialog .q-card {
|
|
width: 400px;
|
|
}
|
|
</style>
|
|
<i18n>
|
|
es:
|
|
Add note here...: Añadir nota aquí...
|
|
Add note: Añadir nota
|
|
</i18n>
|