feat(VnNotes): refs #6336 better design
gitea/salix-front/pipeline/pr-dev This commit looks good
Details
gitea/salix-front/pipeline/pr-dev This commit looks good
Details
This commit is contained in:
parent
4efe09722f
commit
f176312163
|
|
@ -6,6 +6,7 @@ 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 },
|
||||
|
|
@ -13,8 +14,10 @@ const $props = defineProps({
|
|||
body: { type: Object, default: () => {} },
|
||||
addNote: { type: Boolean, default: false },
|
||||
});
|
||||
|
||||
const { t } = useI18n();
|
||||
const noteModal = ref(false);
|
||||
const state = useState();
|
||||
const currentUser = ref(state.getUser());
|
||||
const newNote = ref('');
|
||||
const vnPaginateRef = ref();
|
||||
|
||||
|
|
@ -22,98 +25,90 @@ async function insert() {
|
|||
const body = $props.body;
|
||||
Object.assign(body, { text: newNote.value });
|
||||
await axios.post($props.url, body);
|
||||
vnPaginateRef.value.fetch();
|
||||
await 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 = ''" persistent>
|
||||
<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
|
||||
<QCard class="q-pa-xs q-mb-xl full-width" v-if="$props.addNote">
|
||||
<QCardSection horizontal>
|
||||
<VnAvatar :descriptor="false" :worker-id="1" 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.ctrl.enter.stop="insert"
|
||||
clearable
|
||||
>
|
||||
<template #append
|
||||
><QBtn
|
||||
:title="t('Save (ctrl + Enter)')"
|
||||
icon="save"
|
||||
color="primary"
|
||||
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>
|
||||
</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 in rows"
|
||||
:key="note.id"
|
||||
>
|
||||
<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>
|
||||
</TransitionGroup>
|
||||
</template>
|
||||
</VnPaginate>
|
||||
</template>
|
||||
<style lang="scss" scoped>
|
||||
.q-card {
|
||||
|
|
@ -128,9 +123,20 @@ async function insert() {
|
|||
.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í...
|
||||
Add note: Añadir nota
|
||||
New note: Nueva nota
|
||||
Save (ctrl + Enter): Guardar (Ctrl + Intro)
|
||||
|
||||
</i18n>
|
||||
|
|
|
|||
|
|
@ -90,6 +90,7 @@ globals:
|
|||
parkingList: Parkings list
|
||||
created: Created
|
||||
worker: Worker
|
||||
now: Now
|
||||
errors:
|
||||
statusUnauthorized: Access denied
|
||||
statusInternalServerError: An internal server error has ocurred
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
|
|
@ -38,10 +38,11 @@ const body = {
|
|||
</script>
|
||||
<template>
|
||||
<VnNotes
|
||||
style="overflow-y: auto"
|
||||
:add-note="$props.addNote"
|
||||
url="claimObservations"
|
||||
:add-note="$props.addNote"
|
||||
:filter="claimFilter"
|
||||
:body="body"
|
||||
v-bind="$attrs"
|
||||
style="overflow-y: auto"
|
||||
/>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -28,11 +28,5 @@ const body = {
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<VnNotes
|
||||
style="overflow-y: auto"
|
||||
:add-note="{ type: Boolean, default: true }"
|
||||
url="WorkerObservations"
|
||||
:filter="filter"
|
||||
:body="body"
|
||||
/>
|
||||
<VnNotes :add-note="true" url="WorkerObservations" :filter="filter" :body="body" />
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,3 @@
|
|||
/// <reference types="cypress" />
|
||||
describe('ClaimNotes', () => {
|
||||
beforeEach(() => {
|
||||
cy.login('developer');
|
||||
|
|
@ -7,11 +6,8 @@ describe('ClaimNotes', () => {
|
|||
|
||||
it('should add a new note', () => {
|
||||
const message = 'This is a new message.';
|
||||
cy.get('.q-page-sticky > div > button').click();
|
||||
cy.get('.q-dialog .q-card__section:nth-child(2)').type(message);
|
||||
cy.get('.q-card__actions button:nth-child(2)').click();
|
||||
cy.get('.q-card .q-card__section:nth-child(2)')
|
||||
.eq(0)
|
||||
.should('have.text', message);
|
||||
cy.get('.q-textarea').type(message);
|
||||
cy.get('.q-field__append > .q-btn > .q-btn__content > .q-icon').click(); //save
|
||||
cy.get(':nth-child(1) > .q-card__section--vert').should('have.text', message);
|
||||
});
|
||||
});
|
||||
|
|
|
|||
Loading…
Reference in New Issue