141 lines
4.2 KiB
Vue
141 lines
4.2 KiB
Vue
<script setup>
|
|
import VnAvatar from 'src/components/ui/VnAvatar.vue';
|
|
import { toDateHourMin } 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';
|
|
import { useState } from 'src/composables/useState';
|
|
|
|
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 state = useState();
|
|
const currentUser = ref(state.getUser());
|
|
const newNote = ref('');
|
|
const vnPaginateRef = ref();
|
|
function handleKeyUp(event) {
|
|
if (event.key === 'Enter') {
|
|
event.preventDefault();
|
|
if (!event.shiftKey) insert();
|
|
}
|
|
}
|
|
async function insert() {
|
|
const body = $props.body;
|
|
Object.assign(body, { text: newNote.value });
|
|
await axios.post($props.url, body);
|
|
await vnPaginateRef.value.fetch();
|
|
newNote.value = '';
|
|
}
|
|
</script>
|
|
<template>
|
|
<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-pa-xs q-my-none q-py-none" horizontal>
|
|
<QInput
|
|
v-model="newNote"
|
|
class="full-width"
|
|
type="textarea"
|
|
:label="t('Add note here...')"
|
|
filled
|
|
size="lg"
|
|
autogrow
|
|
autofocus
|
|
@keyup="handleKeyUp"
|
|
clearable
|
|
>
|
|
<template #append>
|
|
<QBtn
|
|
:title="t('Save (Enter)')"
|
|
icon="save"
|
|
color="primary"
|
|
flat
|
|
@click="insert"
|
|
/>
|
|
</template>
|
|
</QInput>
|
|
</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"
|
|
>
|
|
<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"
|
|
/>
|
|
<div class="full-width row justify-between q-pa-xs">
|
|
<VnUserLink
|
|
:name="`${note.worker.user.nickname}`"
|
|
:worker-id="note.worker.id"
|
|
/>
|
|
{{ 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%;
|
|
@media (max-width: $breakpoint-sm) {
|
|
width: 100%;
|
|
}
|
|
&__section {
|
|
word-wrap: break-word;
|
|
}
|
|
}
|
|
.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;
|
|
}
|
|
</style>
|
|
<i18n>
|
|
es:
|
|
Add note here...: Añadir nota aquí...
|
|
New note: Nueva nota
|
|
Save (Enter): Guardar (Intro)
|
|
|
|
</i18n>
|