forked from verdnatura/salix-front
137 lines
4.6 KiB
Vue
137 lines
4.6 KiB
Vue
<script setup>
|
|
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';
|
|
import VnUserLink from '../ui/VnUserLink.vue';
|
|
|
|
const $props = defineProps({
|
|
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 full-height full-width">
|
|
<VnPaginate
|
|
:data-key="$props.url"
|
|
:url="$props.url"
|
|
order="created DESC"
|
|
:limit="20"
|
|
:filter="$props.filter"
|
|
auto-load
|
|
ref="vnPaginateRef"
|
|
>
|
|
<template #body="{ rows }">
|
|
<div class="column items-center full-width">
|
|
<QCard
|
|
class="q-pa-xs q-mb-sm full-width"
|
|
v-for="(note, index) in rows"
|
|
:key="index"
|
|
>
|
|
<QCardSection horizontal>
|
|
<slot name="picture">
|
|
<VnAvatar
|
|
:descriptor="false"
|
|
:worker-id="note.workerFk"
|
|
size="md"
|
|
/>
|
|
</slot>
|
|
<div class="full-width row justify-between q-pa-xs">
|
|
<VnUserLink
|
|
:name="`${note.worker.user.nickname}`"
|
|
:worker-id="note.worker.id"
|
|
/>
|
|
|
|
<slot name="actions">
|
|
{{ toDateHour(note.created) }}
|
|
</slot>
|
|
</div>
|
|
</QCardSection>
|
|
<QCardSection class="q-pa-xs q-my-none q-py-none">
|
|
<slot name="text">
|
|
{{ note.text }}
|
|
</slot>
|
|
</QCardSection>
|
|
</QCard>
|
|
</div>
|
|
</template>
|
|
</VnPaginate>
|
|
<QPageSticky position="bottom-right" :offset="[25, 25]" v-if="addNote">
|
|
<QBtn 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 {
|
|
width: 90%;
|
|
@media (max-width: $breakpoint-sm) {
|
|
width: 100%;
|
|
}
|
|
&__section {
|
|
word-wrap: break-word;
|
|
}
|
|
}
|
|
.q-dialog .q-card {
|
|
width: 400px;
|
|
}
|
|
</style>
|
|
<i18n>
|
|
es:
|
|
Add note here...: Añadir nota aquí...
|
|
Add note: Añadir nota
|
|
</i18n>
|