refs 6105 claimNotes and VnNotes created #83
|
|
@ -1,6 +1,6 @@
|
|||
<script setup>
|
||||
import WorkerDescriptorProxy from 'src/pages/Worker/Card/WorkerDescriptorProxy.vue';
|
||||
import AvatarPicture from 'src/components/ui/AvatarPicture.vue';
|
||||
import VnAvatar from 'src/components/ui/VnAvatar.vue';
|
||||
import { toDateHour } from 'src/filters';
|
||||
import { ref } from 'vue';
|
||||
import axios from 'axios';
|
||||
|
|
@ -19,7 +19,7 @@ const noteModal = ref(false);
|
|||
const newNote = ref('');
|
||||
const vnPaginateRef = ref();
|
||||
|
||||
|
jorgep marked this conversation as resolved
|
||||
async function fetch() {
|
||||
async function insert() {
|
||||
const body = $props.body;
|
||||
Object.assign(body, { text: newNote.value });
|
||||
await axios.post($props.url, body);
|
||||
|
|
@ -27,7 +27,7 @@ async function fetch() {
|
|||
}
|
||||
</script>
|
||||
<template>
|
||||
<div class="notes">
|
||||
<div class="notes row justify-center">
|
||||
<VnPaginate
|
||||
:data-key="$props.url"
|
||||
:url="$props.url"
|
||||
|
|
@ -38,10 +38,14 @@ async function fetch() {
|
|||
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">
|
||||
<QCard
|
||||
class="row justify-between items-center flex-wrap-wrap q-pa-md q-ma-md"
|
||||
|
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
|
||||
v-for="(note, index) in rows"
|
||||
|
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
|
||||
:key="index"
|
||||
>
|
||||
<div class="picture q-pa-sm col-6 col-lg-2">
|
||||
<slot name="picture">
|
||||
<AvatarPicture :worker="note.workerFk">
|
||||
<VnAvatar :worker="note.workerFk">
|
||||
<template #description>
|
||||
<span class="link">
|
||||
{{
|
||||
|
|
@ -50,15 +54,15 @@ async function fetch() {
|
|||
</span>
|
||||
<WorkerDescriptorProxy :id="note.worker.id" />
|
||||
</template>
|
||||
</AvatarPicture>
|
||||
</VnAvatar>
|
||||
</slot>
|
||||
</div>
|
||||
<div class="text">
|
||||
<div class="text q-mx-auto q-pa-xs col col-lg-8">
|
||||
<slot name="text">
|
||||
{{ note.text }}
|
||||
</slot>
|
||||
</div>
|
||||
<div class="actions">
|
||||
<div class="actions self-baseline text-right col-6 col-lg-2">
|
||||
<slot name="actions">
|
||||
<div>
|
||||
{{ toDateHour(note.created) }}
|
||||
|
|
@ -74,7 +78,7 @@ async function fetch() {
|
|||
class="add-btn"
|
||||
color="primary"
|
||||
icon="add"
|
||||
|
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
|
||||
size="md"
|
||||
size="xl"
|
||||
round
|
||||
@click="noteModal = true"
|
||||
/>
|
||||
|
|
@ -96,6 +100,7 @@ async function fetch() {
|
|||
type="textarea"
|
||||
:hint="t('Add note here...')"
|
||||
filled
|
||||
size="lg"
|
||||
autogrow
|
||||
v-model="newNote"
|
||||
></QInput>
|
||||
|
|
@ -111,7 +116,7 @@ async function fetch() {
|
|||
:label="t('globals.save')"
|
||||
color="primary"
|
||||
v-close-popup
|
||||
@click="fetch"
|
||||
@click="insert"
|
||||
/>
|
||||
</QCardActions>
|
||||
|
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
|
||||
</QCard>
|
||||
|
|
@ -120,19 +125,25 @@ async function fetch() {
|
|||
</template>
|
||||
<style lang="scss" scoped>
|
||||
|
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.
|
||||
.q-card {
|
||||
max-width: 60em;
|
||||
min-width: 340px;
|
||||
}
|
||||
.note-dialog {
|
||||
.note-dialog__header {
|
||||
&__header {
|
||||
width: 100%;
|
||||
|
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?
|
||||
}
|
||||
.note-dialog__content {
|
||||
&__content {
|
||||
width: 95%;
|
||||
}
|
||||
}
|
||||
.add-btn {
|
||||
width: 70px;
|
||||
height: 70px;
|
||||
|
||||
@media (max-width: $breakpoint-md) {
|
||||
.avatar-picture {
|
||||
width: 135px;
|
||||
}
|
||||
.text {
|
||||
order: 3;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<i18n>
|
||||
|
|
|
|||
|
|
@ -25,7 +25,7 @@ const body = {
|
|||
};
|
||||
</script>
|
||||
<template>
|
||||
<div class="claim-notes">
|
||||
<div class="claim-notes col items-center">
|
||||
<VnNotes
|
||||
:add-note="true"
|
||||
:id="id"
|
||||
|
|
@ -35,56 +35,3 @@ const body = {
|
|||
/>
|
||||
</div>
|
||||
</template>
|
||||
<style lang="scss">
|
||||
.q-card {
|
||||
max-width: 70em;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.claim-notes {
|
||||
.notes {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
||||
.text {
|
||||
width: 70%;
|
||||
padding: 10px;
|
||||
}
|
||||
.picture {
|
||||
width: 15%;
|
||||
}
|
||||
.actions {
|
||||
width: 15%;
|
||||
align-self: baseline;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
@media (max-width: $breakpoint-md) {
|
||||
.claim-notes {
|
||||
.notes {
|
||||
.picture,
|
||||
.actions {
|
||||
width: 50%;
|
||||
}
|
||||
.picture {
|
||||
.avatar-picture {
|
||||
width: 135px;
|
||||
}
|
||||
}
|
||||
.text {
|
||||
width: 90%;
|
||||
margin: 0 auto;
|
||||
order: 3;
|
||||
}
|
||||
|
||||
.actions {
|
||||
text-align: end;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Un component global, que se gastara en ticket, worker, etc no deuria tindre algo tan especific de claim