refs 6105 VnNotes and ClaimNotes refactored
gitea/salix-front/pipeline/head This commit looks good
Details
gitea/salix-front/pipeline/head This commit looks good
Details
This commit is contained in:
parent
97180b8490
commit
4bac67de38
|
|
@ -8,7 +8,7 @@ const session = useSession();
|
|||
const token = session.getToken();
|
||||
</script>
|
||||
<template>
|
||||
<div class="avatar-picture">
|
||||
<div class="avatar-picture column items-center">
|
||||
<QAvatar color="orange">
|
||||
<QImg
|
||||
:src="`/api/Images/user/160x160/${$props.worker}/download?access_token=${token}`"
|
||||
|
|
@ -24,13 +24,3 @@ const token = session.getToken();
|
|||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<style lang="scss" scoped>
|
||||
.avatar-picture {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
.description {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -4,8 +4,8 @@ import AvatarPicture from 'src/components/ui/AvatarPicture.vue';
|
|||
import { toDateHour } from 'src/filters';
|
||||
import { ref } from 'vue';
|
||||
import axios from 'axios';
|
||||
import FetchData from 'components/FetchData.vue';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import VnPaginate from './VnPaginate.vue';
|
||||
|
||||
const $props = defineProps({
|
||||
id: { type: String, required: true },
|
||||
|
|
@ -15,36 +15,75 @@ const $props = defineProps({
|
|||
addNote: { type: Boolean, default: false },
|
||||
});
|
||||
const { t } = useI18n();
|
||||
const notes = ref([]);
|
||||
const noteModal = ref(false);
|
||||
const newNote = ref('');
|
||||
const claimObservationRef = ref();
|
||||
|
||||
function setNotes(data) {
|
||||
notes.value = data;
|
||||
}
|
||||
const vnPaginateRef = ref();
|
||||
|
||||
async function fetch() {
|
||||
const body = $props.body;
|
||||
Object.assign(body, { text: newNote.value });
|
||||
await axios.post($props.url, body);
|
||||
claimObservationRef.value.fetch();
|
||||
vnPaginateRef.value.fetch();
|
||||
}
|
||||
</script>
|
||||
<template>
|
||||
<FetchData
|
||||
:url="$props.url"
|
||||
:filter="$props.filter"
|
||||
@on-fetch="setNotes"
|
||||
auto-load
|
||||
ref="claimObservationRef"
|
||||
/>
|
||||
<div class="notes" ref="notesContainer">
|
||||
<div class="notes">
|
||||
<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="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>
|
||||
<QCard class="note-dialog q-pa-sm">
|
||||
<QCardSection class="note-dialog__header">
|
||||
<div class="note-dialog__title">
|
||||
<QIcon name="draft" class="note-dialog__title-icon" />
|
||||
<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>
|
||||
|
|
@ -61,7 +100,7 @@ async function fetch() {
|
|||
v-model="newNote"
|
||||
></QInput>
|
||||
</QCardSection>
|
||||
<QCardActions class="note-dialog__actions q-mr-md">
|
||||
<QCardActions class="note-dialog__actions self-end q-mr-md">
|
||||
<QBtn
|
||||
flat
|
||||
:label="t('globals.close')"
|
||||
|
|
@ -77,76 +116,23 @@ async function fetch() {
|
|||
</QCardActions>
|
||||
</QCard>
|
||||
</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>
|
||||
</template>
|
||||
<style lang="scss" scoped>
|
||||
.q-card {
|
||||
min-width: 350px;
|
||||
min-width: 340px;
|
||||
}
|
||||
.note-dialog {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.note-dialog__header {
|
||||
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 {
|
||||
width: 95%;
|
||||
}
|
||||
.note-dialog__actions {
|
||||
align-self: flex-end;
|
||||
}
|
||||
}
|
||||
.add-btn {
|
||||
width: 70px;
|
||||
height: 70px;
|
||||
position: sticky;
|
||||
left: 95%;
|
||||
bottom: 2%;
|
||||
}
|
||||
</style>
|
||||
<i18n>
|
||||
|
|
|
|||
|
|
@ -49,6 +49,7 @@ const props = defineProps({
|
|||
});
|
||||
|
||||
const emit = defineEmits(['onFetch', 'onPaginate']);
|
||||
defineExpose({ fetch });
|
||||
const isLoading = ref(false);
|
||||
const pagination = ref({
|
||||
sortBy: props.order,
|
||||
|
|
@ -82,7 +83,6 @@ async function fetch() {
|
|||
if (!arrayData.hasMoreData.value) {
|
||||
isLoading.value = false;
|
||||
}
|
||||
|
||||
emit('onFetch', store.data);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -9,7 +9,6 @@ const user = state.getUser();
|
|||
const id = route.params.id;
|
||||
|
||||
const claimFilter = {
|
||||
order: 'created DESC',
|
||||
where: { claimFk: id },
|
||||
fields: ['created', 'workerFk', 'text'],
|
||||
include: {
|
||||
|
|
@ -38,7 +37,6 @@ const body = {
|
|||
</template>
|
||||
<style lang="scss">
|
||||
.q-card {
|
||||
width: 100%;
|
||||
max-width: 70em;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
|
@ -50,36 +48,42 @@ const body = {
|
|||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
> * {
|
||||
margin: 10px;
|
||||
}
|
||||
|
||||
.text {
|
||||
flex: 70%;
|
||||
width: 70%;
|
||||
padding: 10px;
|
||||
}
|
||||
.picture {
|
||||
flex: 15%;
|
||||
.avatar-picture {
|
||||
width: 70px;
|
||||
}
|
||||
width: 15%;
|
||||
}
|
||||
.actions {
|
||||
flex: 15%;
|
||||
width: 15%;
|
||||
align-self: baseline;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
@media (max-width: 1150px) {
|
||||
@media (max-width: $breakpoint-md) {
|
||||
.claim-notes {
|
||||
.text {
|
||||
margin-top: 20px;
|
||||
order: 3;
|
||||
flex: 100%;
|
||||
}
|
||||
.notes {
|
||||
.picture,
|
||||
.actions {
|
||||
width: 50%;
|
||||
}
|
||||
.picture {
|
||||
.avatar-picture {
|
||||
width: 135px;
|
||||
}
|
||||
}
|
||||
.text {
|
||||
width: 90%;
|
||||
margin: 0 auto;
|
||||
order: 3;
|
||||
}
|
||||
|
||||
.actions {
|
||||
text-align: end;
|
||||
.actions {
|
||||
text-align: end;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -11,6 +11,6 @@ describe('ClaimNotes', () => {
|
|||
cy.get('.add-btn').click();
|
||||
cy.get('.note-dialog__content').type(message);
|
||||
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);
|
||||
});
|
||||
});
|
||||
|
|
|
|||
Loading…
Reference in New Issue