Skip to content

Commit 66f54a4

Browse files
RICHARD-QuentinRICHARD-Quentin
committed
fix top table
1 parent ce4c7bd commit 66f54a4

File tree

1 file changed

+54
-35
lines changed

1 file changed

+54
-35
lines changed

‎app/src/pages/tickets.vue‎

Lines changed: 54 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -12,26 +12,27 @@ div
1212
selection="multiple" v-model:selected="selected" virtual-scroll style="height: 75vh;" :selected-rows-label="(numberOfRows) => `${numberOfRows} tickets sélectionnées`"
1313
)
1414
template(v-slot:top)
15-
q-btn-group(rounded flat)
16-
q-btn(icon="mdi-eye-check-outline" color="primary" rounded @click="markAsRead" size="md" :disable="selected.length === 0" primary)
17-
q-tooltip.text-body2(transition-show="scale" transition-hide="scale") Marqué comme lu
18-
q-btn(flat icon="mdi-merge" color="primary" rounded @click="mergeTickets" size="md" :disable="selected.length === 0 || selected.length === 1")
19-
q-tooltip.text-body2(transition-show="scale" transition-hide="scale") Fusionner les tickets sélectionnés
20-
q-btn(flat icon="mdi-eye" color="primary" rounded @click="goToTicket(selected[0])" size="md" :disable="selected.length === 0 || selected.length !== 1")
21-
q-tooltip.text-body2(transition-show="scale" transition-hide="scale") Afficher les tickets sélectionnés
22-
q-btn(flat icon="mdi-delete" color="primary" rounded @click="deleteTickets" size="md" :disable="selected.length === 0")
23-
q-tooltip.text-body2(transition-show="scale" transition-hide="scale") Supprimer les tickets sélectionnés
24-
q-space
25-
q-btn-group(rounded flat)
26-
q-btn(flat icon="mdi-table-headers-eye" color="primary")
27-
q-tooltip.text-body2(transition-show="scale" transition-hide="scale") Afficher/cacher des colones
28-
q-menu(max-width="350px" max-height="350px").q-pa-md
29-
.row
30-
.col-6(v-for="column in columns" :key="column.value")
31-
q-toggle(v-model="visibleColumns" :label="column.label" :val="column.name")
32-
q-btn(flat icon="mdi-refresh" @click="refresh" color="primary")
33-
q-tooltip.text-body2(transition-show="scale" transition-hide="scale") Rafraichir
34-
q-btn(icon="mdi-plus" color="primary" @click="$router.push('/tickets/create')") Créer
15+
.col-12.col-sm
16+
q-btn-group(rounded flat)
17+
q-btn(icon="mdi-eye-check-outline" color="primary" rounded @click="markAsRead" size="md" :disable="selected.length === 0" primary)
18+
q-tooltip.text-body2(transition-show="scale" transition-hide="scale") Marqué comme lu
19+
q-btn(flat icon="mdi-merge" color="primary" rounded @click="mergeTickets" size="md" :disable="selected.length === 0 || selected.length === 1")
20+
q-tooltip.text-body2(transition-show="scale" transition-hide="scale") Fusionner les tickets sélectionnés
21+
q-btn(flat icon="mdi-eye" color="primary" rounded @click="goToTicket(selected[0])" size="md" :disable="selected.length === 0 || selected.length !== 1")
22+
q-tooltip.text-body2(transition-show="scale" transition-hide="scale") Afficher les tickets sélectionnés
23+
q-btn(flat icon="mdi-delete" color="primary" rounded @click="deleteTickets" size="md" :disable="selected.length === 0")
24+
q-tooltip.text-body2(transition-show="scale" transition-hide="scale") Supprimer les tickets sélectionnés
25+
.col-12.col-sm.flex.justify-end
26+
q-btn-group(rounded flat)
27+
q-btn(flat icon="mdi-table-headers-eye" color="primary")
28+
q-tooltip.text-body2(transition-show="scale" transition-hide="scale") Afficher/cacher des colones
29+
q-menu(max-width="350px" max-height="350px").q-pa-md
30+
.row
31+
.col-6(v-for="column in columns" :key="column.value")
32+
q-toggle(v-model="visibleColumns" :label="column.label" :val="column.name")
33+
q-btn(flat icon="mdi-refresh" @click="refresh" color="primary")
34+
q-tooltip.text-body2(transition-show="scale" transition-hide="scale") Rafraichir
35+
q-btn(icon="mdi-plus" color="primary" @click="$router.push('/tickets/create')") Créer
3536
template(v-slot:body-cell-actions="props")
3637
q-td(:props="props")
3738
q-btn-group(flat rounded)
@@ -45,14 +46,33 @@ div
4546
q-icon(:name="getType(props.row.type).icon" :color="getType(props.row.type).color" size="xs").q-mx-xs
4647
q-icon(:name="getState(props.row.state).icon" :color="getState(props.row.state).color" size="xs").q-mx-xs
4748

49+
template(v-slot:body-cell-envelope.senders.name="props")
50+
q-td(:props="props")
51+
span.q-ml-sm {{ props.row.envelope.senders.length === 0 ? "Pas d'appelant" : props.row.envelope.senders[0].name }}
52+
span(v-if="props.row.envelope.senders.length > 1") , {{ props.row.envelope.senders.length -1 }} autre{{ props.row.envelope.senders.length === 2 ? '' : 's' }}...
53+
q-tooltip.text-body2(transition-show="scale" transition-hide="scale") ...{{ [...props.row.envelope.senders].slice(1).map(s => s.name).join(', ') }}
54+
55+
template(v-slot:body-cell-envelope.observers.name="props")
56+
q-td(:props="props")
57+
span.q-ml-sm {{ props.row.envelope.observers.length === 0 ? "Pas de concerné" : props.row.envelope.observers[0].name }}
58+
span(v-if="props.row.envelope.observers.length > 1") , {{ props.row.envelope.observers.length -1 }} autre{{ props.row.envelope.observers.length === 2 ? '' : 's' }}...
59+
q-tooltip.text-body2(transition-show="scale" transition-hide="scale") ...{{ [...props.row.envelope.observers].slice(1).map(s => s.name).join(', ') }}
60+
61+
template(v-slot:body-cell-envelope.assigned.name="props")
62+
q-td(:props="props")
63+
span.q-ml-sm {{ props.row.envelope.assigned.length === 0 ? "Pas d'assigné" : props.row.envelope.assigned[0].name }}
64+
span(v-if="props.row.envelope.assigned.length > 1") , {{ props.row.envelope.assigned.length -1 }} autre{{ props.row.envelope.assigned.length === 2 ? '' : 's' }}...
65+
q-tooltip.text-body2(transition-show="scale" transition-hide="scale") ...{{ [...props.row.envelope.assigned].slice(1).map(s => s.name).join(', ') }}
66+
67+
4868

4969

5070
</template>
5171

5272
<script lang="ts" setup>
5373
import { ref, provide } from "vue";
5474
import { useHttpApi } from "~/composables/useHttpApi";
55-
import { computed, useDayjs, onMounted } from "#imports";
75+
import { computed, useDayjs, onMounted, onBeforeMount } from "#imports";
5676
import { useRoute, useRouter } from "nuxt/app";
5777
import type { QTableProps } from "quasar";
5878
import type { components } from '#build/types/service-api'
@@ -63,8 +83,8 @@ const daysjs = useDayjs()
6383
const route = useRoute()
6484
const router = useRouter()
6585
66-
onMounted(() => {
67-
pagination.value!.rowsNumber = getTotalRowsNumber.value
86+
onMounted(async () => {
87+
pagination.value!.rowsNumber = await ticketFetch.data.value?.total
6888
const query = { ...route.query }
6989
const limit = query.limit ?? 10
7090
const skip = query.skip ?? 0
@@ -112,21 +132,21 @@ const columns = ref<QTableProps['columns']>([
112132
{
113133
name: 'envelope.senders.name',
114134
label: 'Appelant',
115-
field: (row: Ticket) => row.envelope.senders.length > 0 ? row.envelope.senders[0].name : '',
135+
field: (row: Ticket) => row.envelope.senders,
116136
align: 'left',
117137
sortable: true
118138
},
119139
{
120140
name: 'envelope.observers.name',
121141
label: 'Concerné',
122-
field: (row: Ticket) => row.envelope.observers.length > 0 ? row.envelope.observers[0].name : '',
142+
field: (row: Ticket) => row.envelope.observers,
123143
align: 'left',
124144
sortable: true
125145
},
126146
{
127147
name: 'envelope.assigned.name',
128148
label: 'Assigné',
129-
field: (row: Ticket) => row.envelope.assigned.length > 0 ? row.envelope.assigned[0].name : '',
149+
field: (row: Ticket) => row.envelope.assigned,
130150
align: 'left',
131151
sortable: true
132152
},
@@ -183,9 +203,12 @@ const columnsType = ref([
183203
184204
const ticketFetch = useHttpApi('tickets/ticket', {
185205
method: 'get',
186-
query: computed(() => ({
187-
...route.query,
188-
}))
206+
query: computed(() => {
207+
console.log("ticketFetch computed")
208+
return {
209+
...route.query,
210+
}
211+
})
189212
})
190213
const categoriesFetch = useHttpApi('core/categories')
191214
const stateFetch = useHttpApi('tickets/state')
@@ -212,10 +235,6 @@ const goToTicket = (ticket: Ticket) => {
212235
router.push(`/ticket/${ticket._id}`)
213236
}
214237
215-
const getTotalRowsNumber = computed(() => {
216-
return ticketFetch.data.value?.total ?? 0
217-
})
218-
219238
const pagination = ref<QTableProps['pagination']>({
220239
page: 1,
221240
rowsPerPage: 10,
@@ -224,9 +243,9 @@ const pagination = ref<QTableProps['pagination']>({
224243
descending: true
225244
})
226245
227-
const onRequest = (props: any) => {
246+
const onRequest = async (props: any) => {
228247
const { page, rowsPerPage, sortBy, descending } = props.pagination
229-
pagination.value!.rowsNumber = getTotalRowsNumber.value
248+
pagination.value!.rowsNumber = await ticketFetch.data.value?.total
230249
pagination.value!.page = page
231250
pagination.value!.rowsPerPage = rowsPerPage
232251
pagination.value!.sortBy = sortBy

0 commit comments

Comments
 (0)