154 lines
5.1 KiB
Vue
154 lines
5.1 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();
|
|
}
|
|
</script>
|
|
<template>
|
|
<div class="notes row justify-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="row justify-between items-center flex-wrap-wrap q-pa-md q-ma-md"
|
|
v-for="(note, index) in rows"
|
|
:key="index"
|
|
>
|
|
<div class="picture q-pa-sm col-6 col-lg-2">
|
|
<slot name="picture">
|
|
<VnAvatar :worker="note.workerFk">
|
|
<template #description>
|
|
<span class="link">
|
|
{{
|
|
`${note.worker.firstName} ${note.worker.lastName}`
|
|
}}
|
|
</span>
|
|
<WorkerDescriptorProxy :id="note.worker.id" />
|
|
</template>
|
|
</VnAvatar>
|
|
</slot>
|
|
</div>
|
|
<div class="text q-mx-auto q-pa-xs col col-lg-8">
|
|
<slot name="text">
|
|
{{ note.text }}
|
|
</slot>
|
|
</div>
|
|
<div class="actions self-baseline text-right col-6 col-lg-2">
|
|
<slot name="actions">
|
|
<div>
|
|
{{ toDateHour(note.created) }}
|
|
</div>
|
|
</slot>
|
|
</div>
|
|
</QCard>
|
|
</template>
|
|
</VnPaginate>
|
|
<QPageSticky position="bottom-right" :offset="[25, 25]">
|
|
<QBtn
|
|
v-if="addNote"
|
|
class="add-btn"
|
|
color="primary"
|
|
icon="add"
|
|
size="xl"
|
|
round
|
|
@click="noteModal = true"
|
|
/>
|
|
</QPageSticky>
|
|
<QDialog v-model="noteModal" persistent>
|
|
<QCard class="note-dialog column q-pa-sm">
|
|
<QCardSection class="note-dialog__header row self-start justify-between">
|
|
<div class="note-dialog__title row items-center text-primary text-h6">
|
|
<QIcon name="draft" class="note-dialog__title-icon q-mr-sm" />
|
|
<div class="text-h6 note-dialog__title-text">
|
|
{{ t('Add note') }}
|
|
</div>
|
|
</div>
|
|
<QBtn icon="close" flat round dense v-close-popup />
|
|
</QCardSection>
|
|
<QCardSection class="note-dialog__content">
|
|
<QInput
|
|
autofocus
|
|
type="textarea"
|
|
:hint="t('Add note here...')"
|
|
filled
|
|
size="lg"
|
|
autogrow
|
|
v-model="newNote"
|
|
></QInput>
|
|
</QCardSection>
|
|
<QCardActions class="note-dialog__actions self-end q-mr-md">
|
|
<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: 60em;
|
|
min-width: 340px;
|
|
}
|
|
.note-dialog {
|
|
&__header {
|
|
width: 100%;
|
|
}
|
|
&__content {
|
|
width: 95%;
|
|
}
|
|
}
|
|
|
|
@media (max-width: $breakpoint-md) {
|
|
.avatar-picture {
|
|
width: 135px;
|
|
}
|
|
.text {
|
|
order: 3;
|
|
}
|
|
}
|
|
</style>
|
|
<i18n>
|
|
es:
|
|
Add note here...: Añadir nota aquí...
|
|
Add note: Añadir nota
|
|
</i18n>
|