verdnatura/salix-front
verdnatura
/
salix-front
1
2
Fork 1
Code Issues Pull Requests 61 Releases Wiki Activity

refs 6105 VnNotes and ClaimNotes refactored
gitea/salix-front/pipeline/head This commit looks good Details

This commit is contained in:
Jorge Penadés 2023-08-18 12:12:53 +02:00
parent 97180b8490
commit 4bac67de38
5 changed files with 87 additions and 107 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
src/components/ui/AvatarPicture.vue
View File

@ -8,7 +8,7 @@ const session = useSession();
const token = session.getToken(); const token = session.getToken();
</script> </script>
<template> <template>
<div class="avatar-picture"> <div class="avatar-picture column items-center">
<QAvatar color="orange"> <QAvatar color="orange">
<QImg <QImg
:src="`/api/Images/user/160x160/${$props.worker}/download?access_token=${token}`" :src="`/api/Images/user/160x160/${$props.worker}/download?access_token=${token}`"
@ -24,13 +24,3 @@ const token = session.getToken();
</div> </div>
</div> </div>
</template> </template>
<style lang="scss" scoped>
.avatar-picture {
display: flex;
flex-direction: column;
align-items: center;
.description {
text-align: center;
}
}
</style>

136
src/components/ui/VnNotes.vue
View File

@ -4,8 +4,8 @@ import AvatarPicture from 'src/components/ui/AvatarPicture.vue';
import { toDateHour } from 'src/filters'; import { toDateHour } from 'src/filters';
import { ref } from 'vue'; import { ref } from 'vue';
import axios from 'axios'; import axios from 'axios';
import FetchData from 'components/FetchData.vue';
import { useI18n } from 'vue-i18n'; import { useI18n } from 'vue-i18n';
import VnPaginate from './VnPaginate.vue';
const $props = defineProps({ const $props = defineProps({
id: { type: String, required: true }, id: { type: String, required: true },
@ -15,36 +15,75 @@ const $props = defineProps({
addNote: { type: Boolean, default: false }, addNote: { type: Boolean, default: false },
}); });
const { t } = useI18n(); const { t } = useI18n();
const notes = ref([]);
const noteModal = ref(false); const noteModal = ref(false);
const newNote = ref(''); const newNote = ref('');
const claimObservationRef = ref(); const vnPaginateRef = ref();
function setNotes(data) {
notes.value = data;
}
async function fetch() { async function fetch() {
const body = $props.body; const body = $props.body;
Object.assign(body, { text: newNote.value }); Object.assign(body, { text: newNote.value });
await axios.post($props.url, body); await axios.post($props.url, body);
claimObservationRef.value.fetch(); vnPaginateRef.value.fetch();
} }
</script> </script>
<template> <template>
<FetchData <div class="notes">
:url="$props.url" <VnPaginate
:filter="$props.filter" :data-key="$props.url"
@on-fetch="setNotes" :url="$props.url"
auto-load order="created DESC"
ref="claimObservationRef" :limit="20"
/> :filter="$props.filter"
<div class="notes" ref="notesContainer"> auto-load
ref="vnPaginateRef"
>
<template #body="{ rows }">
<QCard class="q-pa-md q-ma-md" v-for="(note, index) in rows" :key="index">
<div class="picture q-pa-sm">
<slot name="picture">
<AvatarPicture :worker="note.workerFk">
<template #description>
<span class="link">
{{
`${note.worker.firstName} ${note.worker.lastName}`
}}
</span>
<WorkerDescriptorProxy :id="note.worker.id" />
</template>
</AvatarPicture>
</slot>
</div>
<div class="text">
<slot name="text">
{{ note.text }}
</slot>
</div>
<div class="actions">
<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="md"
round
@click="noteModal = true"
/>
</QPageSticky>
<QDialog v-model="noteModal" persistent> <QDialog v-model="noteModal" persistent>
<QCard class="note-dialog q-pa-sm"> <QCard class="note-dialog column q-pa-sm">
<QCardSection class="note-dialog__header"> <QCardSection class="note-dialog__header row self-start justify-between">
<div class="note-dialog__title"> <div class="note-dialog__title row items-center text-primary text-h6">
<QIcon name="draft" class="note-dialog__title-icon" /> <QIcon name="draft" class="note-dialog__title-icon q-mr-sm" />
<div class="text-h6 note-dialog__title-text"> <div class="text-h6 note-dialog__title-text">
{{ t('Add note') }} {{ t('Add note') }}
</div> </div>
@ -61,7 +100,7 @@ async function fetch() {
v-model="newNote" v-model="newNote"
></QInput> ></QInput>
</QCardSection> </QCardSection>
<QCardActions class="note-dialog__actions q-mr-md"> <QCardActions class="note-dialog__actions self-end q-mr-md">
<QBtn <QBtn
flat flat
:label="t('globals.close')" :label="t('globals.close')"
@ -77,76 +116,23 @@ async function fetch() {
</QCardActions> </QCardActions>
</QCard> </QCard>
</QDialog> </QDialog>
<QCard class="q-pa-md" v-for="(note, index) in notes" :key="index">
<div class="picture q-pa-sm">
<slot name="picture">
<AvatarPicture :worker="note.workerFk">
<template #description>
<span class="link">
{{ `${note.worker.firstName} ${note.worker.lastName}` }}
</span>
<WorkerDescriptorProxy :id="note.worker.id" />
</template>
</AvatarPicture>
</slot>
</div>
<div class="text">
<slot name="text">
{{ note.text }}
</slot>
</div>
<div class="actions">
<slot name="actions">
<div>
{{ toDateHour(note.created) }}
</div>
</slot>
</div>
</QCard>
<QBtn
v-if="addNote"
class="add-btn"
color="primary"
round
@click="noteModal = true"
>
<QIcon name="add" size="md"></QIcon>
</QBtn>
</div> </div>
</template> </template>
<style lang="scss" scoped> <style lang="scss" scoped>
.q-card { .q-card {
min-width: 350px; min-width: 340px;
} }
.note-dialog { .note-dialog {
display: flex;
flex-direction: column;
.note-dialog__header { .note-dialog__header {
width: 100%; width: 100%;
align-self: flex-start;
display: flex;
justify-content: space-between;
}
.note-dialog__title {
display: flex;
align-items: center;
gap: 5px;
color: $primary;
font-size: large;
} }
.note-dialog__content { .note-dialog__content {
width: 95%; width: 95%;
} }
.note-dialog__actions {
align-self: flex-end;
}
} }
.add-btn { .add-btn {
width: 70px; width: 70px;
height: 70px; height: 70px;
position: sticky;
left: 95%;
bottom: 2%;
} }
</style> </style>
<i18n> <i18n>

2
src/components/ui/VnPaginate.vue
View File

@ -49,6 +49,7 @@ const props = defineProps({
}); });
const emit = defineEmits(['onFetch', 'onPaginate']); const emit = defineEmits(['onFetch', 'onPaginate']);
defineExpose({ fetch });
const isLoading = ref(false); const isLoading = ref(false);
const pagination = ref({ const pagination = ref({
sortBy: props.order, sortBy: props.order,
@ -82,7 +83,6 @@ async function fetch() {
if (!arrayData.hasMoreData.value) { if (!arrayData.hasMoreData.value) {
isLoading.value = false; isLoading.value = false;
} }
emit('onFetch', store.data); emit('onFetch', store.data);
} }

42
src/pages/Claim/Card/ClaimNotes.vue
View File

@ -9,7 +9,6 @@ const user = state.getUser();
const id = route.params.id; const id = route.params.id;
const claimFilter = { const claimFilter = {
order: 'created DESC',
where: { claimFk: id }, where: { claimFk: id },
fields: ['created', 'workerFk', 'text'], fields: ['created', 'workerFk', 'text'],
include: { include: {
@ -38,7 +37,6 @@ const body = {
</template> </template>
<style lang="scss"> <style lang="scss">
.q-card { .q-card {
width: 100%;
max-width: 70em; max-width: 70em;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
@ -50,36 +48,42 @@ const body = {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
> * {
margin: 10px;
}
.text { .text {
flex: 70%; width: 70%;
padding: 10px; padding: 10px;
} }
.picture { .picture {
flex: 15%; width: 15%;
.avatar-picture {
width: 70px;
}
} }
.actions { .actions {
flex: 15%; width: 15%;
align-self: baseline; align-self: baseline;
text-align: center; text-align: center;
} }
} }
} }
@media (max-width: 1150px) { @media (max-width: $breakpoint-md) {
.claim-notes { .claim-notes {
.text { .notes {
margin-top: 20px; .picture,
order: 3; .actions {
flex: 100%; width: 50%;
} }
.picture {
.avatar-picture {
width: 135px;
}
}
.text {
width: 90%;
margin: 0 auto;
order: 3;
}
.actions { .actions {
text-align: end; text-align: end;
}
} }
} }
} }

2
test/cypress/integration/ClaimNotes.spec.js
View File

@ -11,6 +11,6 @@ describe('ClaimNotes', () => {
cy.get('.add-btn').click(); cy.get('.add-btn').click();
cy.get('.note-dialog__content').type(message); cy.get('.note-dialog__content').type(message);
cy.get('.note-dialog__actions .q-btn:nth-child(2)').click(); cy.get('.note-dialog__actions .q-btn:nth-child(2)').click();
cy.get('.notes > :nth-child(1) > .text').should('have.text', message); cy.get('.notes .q-card .text').eq(0).should('have.text', message);
}); });
}); });