refs 6105 claimNotes and VnNotes created #83
|
|
@ -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();
|
||||
|
||||
|
jorgep marked this conversation as resolved
|
||||
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"
|
||||
|
jorgep marked this conversation as resolved
Outdated
alexm
commented
Sols seria canviar el nom del ref, pq la url i tot si q ho tens dinamic Sols seria canviar el nom del ref, pq la url i tot si q ho tens dinamic
|
||||
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">
|
||||
|
jorgep marked this conversation as resolved
Outdated
alexm
commented
El ref este si no es gasta en cap lloc lleval El ref este si no es gasta en cap lloc lleval
|
||||
<slot name="picture">
|
||||
|
jgallego marked this conversation as resolved
Outdated
alexm
commented
El QDialog dixal al final del html, si no queda confus El QDialog dixal al final del html, si no queda confus
|
||||
<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"
|
||||
/>
|
||||
|
jorgep marked this conversation as resolved
Outdated
alexm
commented
Podries gastar el component VnPaginate i te ahorraries el fetch de dalt i el v.for de aci. Pots gastar el component i possarli v-bind="$attrs" i li pasa les propietats que a tu te hajen pasat. I ja no has ni de fenirles tu Podries gastar el component VnPaginate i te ahorraries el fetch de dalt i el v.for de aci.
Apart aixina tens millor logica per als filtros (VnPaginate te mes props que podrien ser utils en un futur):
```
dataKey: {
type: String,
required: true,
},
autoLoad: {
type: Boolean,
default: false,
},
data: {
type: Array,
default: null,
},
url: {
type: String,
default: '',
},
filter: {
type: Object,
default: null,
},
where: {
type: Object,
default: null,
},
order: {
type: String,
default: '',
},
limit: {
type: Number,
default: 10,
},
userParams: {
type: Object,
default: null,
},
offset: {
type: Number,
default: 500,
},
```
Pots gastar el component i possarli v-bind="$attrs" i li pasa les propietats que a tu te hajen pasat. I ja no has ni de fenirles tu
|
||||
</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>
|
||||
|
jorgep marked this conversation as resolved
alexm
commented
Quasar te clases (paregut a bootstrap) que te dixa fer coses de estes i te ahorra CSS. igual que la part de: Es pot fer tambe: Quasar te clases (paregut a bootstrap) que te dixa fer coses de estes i te ahorra CSS.
Per exemple esta la clase column que ja te fa esta part:
```
display: flex;
flex-direction: column;
```
igual que la part de:
```
align-self: flex-start;
display: flex;
justify-content: space-between;
```
Es pot fer tambe:
https://quasar.dev/layout/grid/column#introduction
|
||||
.q-card {
|
||||
min-width: 350px;
|
||||
min-width: 340px;
|
||||
}
|
||||
.note-dialog {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.note-dialog__header {
|
||||
|
jorgep marked this conversation as resolved
Outdated
alexm
commented
Ya esta todo bien, faltaría mirar si podemos quitar CSS Ya esta todo bien, faltaría mirar si podemos quitar CSS
jorgep
commented
Creo que no, son propiedades width y order. Creo que no, son propiedades width y order.
|
||||
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 {
|
||||
|
jorgep marked this conversation as resolved
Outdated
alexm
commented
Si ya tiene la propiedad size="md" pq tiene una clase? Si ya tiene la propiedad size="md" pq tiene una clase?
|
||||
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 {
|
||||
|
jorgep marked this conversation as resolved
Outdated
alexm
commented
Lo mateix intentem no gastar tant de CSS i gastar mes coses de Quasar. https://quasar.dev/layout/grid/column#introduction Lo mateix intentem no gastar tant de CSS i gastar mes coses de Quasar. https://quasar.dev/layout/grid/column#introduction
jorgep
commented
Estoy dando estilo a clases de un componente hijo desde el padre, aquí no puedo usar las clases de quasar. Estoy dando estilo a clases de un componente hijo desde el padre, aquí no puedo usar las clases de quasar.
alexm
commented
Pero entonces estas clases (si son de quasar mejor). Deberian estar en el componente. Si no en cada sitio donde uses el componente lo tendrás que estilar. De hecho cuando hice esta sección: src/pages/Ticket/Card/TicketSms.vue use 0 lineas de CSS. Pero entonces estas clases (si son de quasar mejor). Deberian estar en el componente. Si no en cada sitio donde uses el componente lo tendrás que estilar.
De hecho cuando hice esta sección: src/pages/Ticket/Card/TicketSms.vue use 0 lineas de CSS.
Y VnNotes es un 99% igual
http://localhost:9000/#/ticket/1/sms?order=smsFk+DESC&limit=5
|
||||
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 {
|
||||
|
jorgep marked this conversation as resolved
Outdated
alexm
commented
Aci seria mes convenient lo de $breakpoint-md (per exemple) Aci seria mes convenient lo de $breakpoint-md (per exemple)
|
||||
.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
Un component global, que se gastara en ticket, worker, etc no deuria tindre algo tan especific de claim