salix-front/src/components/ui/VnNotes.vue

<script setup>
import axios from 'axios';
import { ref, reactive } from 'vue';
import { onBeforeRouteLeave } from 'vue-router';
import { useI18n } from 'vue-i18n';
import { useQuasar } from 'quasar';

import { toDateHourMin } from 'src/filters';
import { useState } from 'src/composables/useState';

import VnPaginate from 'components/ui/VnPaginate.vue';
import VnUserLink from 'components/ui/VnUserLink.vue';
import VnConfirm from 'components/ui/VnConfirm.vue';
import VnAvatar from 'components/ui/VnAvatar.vue';
import VnRow from 'components/ui/VnRow.vue';
import VnSelect from 'components/common/VnSelect.vue';
import FetchData from 'components/FetchData.vue';
import VnInput from 'components/common/VnInput.vue';

const $props = defineProps({
    url: { type: String, default: null },
    filter: { type: Object, default: () => {} },
    body: { type: Object, default: () => {} },
    addNote: { type: Boolean, default: false },
    selectType: { type: Boolean, default: false },
});

const { t } = useI18n();
const state = useState();
const quasar = useQuasar();
const currentUser = ref(state.getUser());
const newNote = reactive({ text: null, observationTypeFk: null });
const observationTypes = ref([]);
const vnPaginateRef = ref();

async function insert() {
    if (!newNote.text || ($props.selectType && !newNote.observationTypeFk)) return;

    const body = $props.body;
    const newBody = {
        ...body,
        ...{ text: newNote.text, observationTypeFk: newNote.observationTypeFk },
    };
    await axios.post($props.url, newBody);
    await vnPaginateRef.value.fetch();
}
onBeforeRouteLeave((to, from, next) => {
    if (newNote.text)
        quasar.dialog({
            component: VnConfirm,
            componentProps: {
                title: t('globals.unsavedPopup.title'),
                message: t('globals.unsavedPopup.subtitle'),
                promise: () => next(),
            },
        });
    else next();
});
</script>
<template>
    <FetchData
        v-if="selectType"
        url="ObservationTypes"
        :filter="{ fields: ['id', 'description'] }"
        auto-load
        @on-fetch="(data) => (observationTypes = data)"
    />
    <QCard class="q-pa-xs q-mb-xl full-width" v-if="$props.addNote">
        <QCardSection horizontal>
            <VnAvatar :worker-id="currentUser.id" size="md" />
            <div class="full-width row justify-between q-pa-xs">
                <VnUserLink :name="t('New note')" :worker-id="currentUser.id" />
                {{ t('globals.now') }}
            </div>
        </QCardSection>
        <QCardSection class="q-px-xs q-my-none q-py-none">
            <VnRow class="full-width">
                <VnSelect
                    :label="t('Observation type')"
                    v-if="selectType"
                    url="ObservationTypes"
                    v-model="newNote.observationTypeFk"
                    option-label="description"
                    style="flex: 0.15"
                    :required="true"
                    @keyup.enter.stop="insert"
                />
                <VnInput
                    v-model.trim="newNote.text"
                    type="textarea"
                    :label="t('Add note here...')"
                    filled
                    size="lg"
                    autogrow
                    @keyup.enter.stop="insert"
                    clearable
                    :required="true"
                >
                    <template #append>
                        <QBtn
                            :title="t('Save (Enter)')"
                            icon="save"
                            color="primary"
                            flat
                            @click="insert"
                            class="q-mb-xs"
                            dense
                        />
                    </template>
                </VnInput>
            </VnRow>
        </QCardSection>
    </QCard>
    <VnPaginate
        :data-key="$props.url"
        :url="$props.url"
        order="created DESC"
        :limit="0"
        :filter="$props.filter"
        auto-load
        ref="vnPaginateRef"
        class="show"
        v-bind="$attrs"
        search-url="notes"
        @on-fetch="
            newNote.text = '';
            newNote.observationTypeFk = null;
        "
    >
        <template #body="{ rows }">
            <TransitionGroup name="list" tag="div" class="column items-center full-width">
                <QCard
                    class="q-pa-xs q-mb-sm full-width"
                    v-for="(note, index) in rows"
                    :key="note.id ?? index"
                >
                    <QCardSection horizontal>
                        <VnAvatar
                            :descriptor="false"
                            :worker-id="note.workerFk"
                            size="md"
                            :title="note.worker?.user.nickname"
                        />
                        <div class="full-width row justify-between q-pa-xs">
                            <div>
                                <VnUserLink
                                    :name="`${note.worker.user.nickname}`"
                                    :worker-id="note.worker.id"
                                />
                                <QBadge
                                    class="q-ml-xs"
                                    outline
                                    color="grey"
                                    v-if="selectType && note.observationTypeFk"
                                >
                                    {{
                                        observationTypes.find(
                                            (ot) => ot.id === note.observationTypeFk
                                        )?.description
                                    }}
                                </QBadge>
                            </div>
                            <span v-text="toDateHourMin(note.created)" />
                        </div>
                    </QCardSection>
                    <QCardSection class="q-pa-xs q-my-none q-py-none">
                        {{ note.text }}
                    </QCardSection>
                </QCard>
            </TransitionGroup>
        </template>
    </VnPaginate>
</template>
<style lang="scss" scoped>
.q-card {
    width: 90%;
}
.q-dialog .q-card {
    width: 400px;
}
.list-enter-active,
.list-leave-active {
    transition: all 1s ease;
}
.list-enter-from,
.list-leave-to {
    opacity: 0;
    background-color: $primary;
}

.vn-row > :nth-child(2) {
    margin-left: 0;
}

@media (max-width: $breakpoint-xs) {
    .vn-row > :deep(*) {
        margin-left: 0;
    }
    .q-card {
        width: 100%;

        &__section {
            padding: 0;
        }
    }
}
</style>
<i18n>
    es:
        Add note here...: Añadir nota aquí...
        New note: Nueva nota
        Save (Enter): Guardar (Intro)
        Observation type: Tipo de observación
</i18n>