Skip to content

Commit f2289a9

Browse files
RICHARD-QuentinRICHARD-Quentin
committed
page vue ticket
1 parent 6c35a9d commit f2289a9

File tree

4 files changed

+192
-48
lines changed

4 files changed

+192
-48
lines changed

‎app/src/components/ticket/leftPanel.vue‎

Lines changed: 23 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,33 @@
11
<template lang="pug">
2-
q-card.bg-gray-4
3-
q-card-section
4-
.text-h6 Autres sections
5-
q-separator(inset)
6-
q-card-actions(align="center" vertical)
7-
q-btn(color="primary" flat) Mes tickets
8-
q-btn(color="primary" flat) Tout les tickets
9-
q-separator(inset)
10-
q-card-actions(align="center" vertical)
11-
q-btn(v-for="projet in projets.data" color="primary" flat :key="projet.id" :to="`/ticket/${projet.id}`") {{ projet.name }}
2+
div
3+
q-toolbar
4+
q-breadcrumbs
5+
q-breadcrumbs-el(to="/") Accueil
6+
q-breadcrumbs-el(to="/tickets") Tickets
7+
q-breadcrumbs-el(:label="sequence")
8+
q-card.bg-gray-4
9+
q-card-section
10+
.text-h6 Autres sections
11+
q-separator(inset)
12+
q-card-actions(align="center" vertical)
13+
q-btn(color="primary" flat) Mes tickets
14+
q-btn(color="primary" flat) Tout les tickets
15+
q-separator(inset)
16+
q-card-actions(align="center" vertical)
17+
q-btn(v-for="projet in projets.data" color="primary" flat :key="projet.id" :to="`/ticket/${projet.id}`") {{ projet.name }}
1218

1319
</template>
1420

1521
<script lang="ts" setup>
1622
import { ref, onMounted, computed } from 'vue'
1723
import { useHttpApi } from '~/composables/useHttpApi';
24+
1825
const { data: projets } = await useHttpApi(`core/project`)
26+
defineProps({
27+
sequence: {
28+
type: String,
29+
required: true
30+
}
31+
})
1932
2033
</script>

‎app/src/components/ticket/mainPanel.vue‎

Lines changed: 42 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,43 @@
11
<template lang="pug">
2-
3-
</template>
2+
q-card(style="height: 100%")
3+
q-toolbar
4+
q-toolbar-title {{ sequence }} | {{ subject }}
5+
q-card-section(style="height: auto")
6+
//- q-scroll-area(:style="{height: '100%'}")
7+
q-chat-message(v-for='(message, index) in thread.data' :key='message._id'
8+
:text="message.fragments.map(f => f.message)"
9+
:sent="index % 2 === 0"
10+
)
11+
12+
q-card-section
13+
q-editor(v-model="message" dense)
14+
</template>
15+
16+
<script lang="ts" setup>
17+
import { ref, onMounted, computed } from 'vue'
18+
import { useRoute } from 'nuxt/app';
19+
import { useHttpApi } from '~/composables/useHttpApi';
20+
21+
const props = defineProps({
22+
sequence: {
23+
type: String,
24+
required: true
25+
},
26+
subject: {
27+
type: String,
28+
required: true
29+
}
30+
})
31+
32+
const route = useRoute()
33+
const query = ref({
34+
"filters[ticketId]": `${route.params.id}`
35+
})
36+
const { data: thread } = await useHttpApi(`tickets/thread`, {
37+
method: 'get',
38+
query
39+
})
40+
41+
const message = ref('')
42+
</script>
43+

‎app/src/components/ticket/rightPanel.vue‎

Lines changed: 111 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,120 @@
11
<template lang="pug">
2-
q-list
3-
q-expansion-item(label="Enveloppe")
4-
q-card
5-
q-card-section
6-
span {{ ticketData.envelope }}
7-
q-expansion-item(label="Informations")
8-
q-card
9-
q-card-section
10-
span {{ ticketData.project }} Type: {{ ticketData.type }} {{ ticketData.priority }} {{ ticketData.impact }} {{ ticketData.state }} {{ ticketData.sla }}
11-
q-expansion-item(label="Cycle de vie")
12-
q-card
13-
q-card-section
14-
span {{ ticketData }}
15-
span {{ ticketData }}
2+
q-scroll-area(:style="{height: '100%'}")
3+
q-card
4+
q-list
5+
q-expansion-item(label="Enveloppe")
6+
q-card
7+
q-card-section
8+
q-select.q-my-xs(
9+
label="Appelant(s)" filled v-model="ticket.envelope.senders"
10+
option-label="name"
11+
use-input use-chips multiple
12+
new-value-mode="add-unique"
13+
)
14+
q-select.q-my-xs(
15+
option-label="name"
16+
label="Appelant(s)" filled v-model="ticket.envelope.observers"
17+
use-input use-chips multiple
18+
new-value-mode="add-unique"
19+
)
20+
q-select.q-my-xs(
21+
option-label="name"
22+
label="Appelant(s)" filled v-model="ticket.envelope.assigned"
23+
use-input use-chips multiple
24+
new-value-mode="add-unique"
25+
)
26+
q-expansion-item(label="Informations")
27+
q-card
28+
q-card-section
29+
.row.items-center
30+
.col-6 Type de ticket :
31+
.col-6
32+
q-chip(:icon="typeOfTicket.icon" :color="typeOfTicket.color" outline).q-mx-auto {{ typeOfTicket.label }}
33+
q-select.q-my-xs(
34+
label="Projet(s)" filled v-model="ticket.project"
35+
option-label="name"
36+
use-input use-chips
37+
new-value-mode="add-unique"
38+
)
39+
q-select.q-my-xs(
40+
label="Priorité" filled
41+
option-label="name"
42+
use-input use-chips
43+
new-value-mode="add-unique"
44+
v-model="ticket.priority"
45+
)
46+
q-select.q-my-xs(
47+
label="Impact" filled
48+
option-label="name"
49+
use-input use-chips
50+
new-value-mode="add-unique"
51+
v-model="ticket.impact"
52+
)
53+
q-select.q-my-xs(
54+
label="SLA" filled
55+
option-label="name"
56+
use-input use-chips
57+
new-value-mode="add-unique"
58+
v-model="ticket.sla"
59+
)
60+
q-input.q-my-xs( label="Due date" type="date" filled v-model="dueDate")
61+
q-input.q-my-xs( label="Temps total" type="time" filled readonly v-model="totalTime")
62+
q-expansion-item(label="Cycle de vie")
63+
q-card
64+
q-card-section
65+
.row.items-center
66+
.col-6 Etape de vie :
67+
.col-6
68+
q-chip(:icon="lifestepOfTicket?.icon" :color="lifestepOfTicket?.color" outline).q-mx-auto {{ lifestepOfTicket?.label }}
69+
.row.items-center
70+
.col-6 State :
71+
.col-6
72+
q-chip(:icon="stateOfTicket?.icon" :color="stateOfTicket?.color" outline).q-mx-auto {{ stateOfTicket?.name }}
1673
</template>
1774

1875
<script lang="ts" setup>
19-
defineProps({
76+
import { ref, onMounted, computed, inject } from 'vue'
77+
import { ticketType, lifeSteps, useDayjs } from '#imports';
78+
import { useHttpApi } from '~/composables/useHttpApi';
79+
const props = defineProps({
2080
ticketData: {
2181
type: Object,
2282
required: true
2383
}
2484
})
25-
</script>
85+
const dayjs = useDayjs()
86+
const ticket = ref(props.ticketData)
87+
const { data: states, pending: statesPending, refresh: statesRefresh, error: statesError } = await useHttpApi('/tickets/state', {
88+
method: 'get'
89+
})
90+
const typeOfTicket = computed(() => {
91+
return ticketType.find((type: any) => type.value === ticket.value.type)
92+
})
93+
94+
const lifestepOfTicket = computed(() => {
95+
return lifeSteps.find((step: any) => step.value === ticket.value.lifestep)
96+
})
97+
98+
const stateOfTicket = computed(() => {
99+
return states.value?.data.find((state: any) => state._id === ticket.value.state.id)
100+
})
101+
102+
const totalTime = computed(() => {
103+
const min = ticket.value.totalTime % 60
104+
const hour = Math.floor(ticket.value.totalTime / 60)
105+
const minString = min < 10 ? `0${min}` : `${min}`
106+
const hourString = hour < 10 ? `0${hour}` : `${hour}`
107+
return `${hourString}:${minString}`
108+
})
109+
110+
const dueDate = computed(() => {
111+
return dayjs(ticket.value.sla.dueAt).format('YYYY-MM-DD')
112+
})
113+
114+
onMounted(() => {
115+
// ticket.value.senders = props.ticketData.envelope.senders.map((sender: any) => sender.name)
116+
// ticket.value.observers = props.ticketData.envelope.observers.map((observer: any) => observer.name)
117+
// ticket.value.assigned = props.ticketData.envelope.assigned.map((assignee: any) => assignee.name)
118+
})
119+
120+
</script>

‎app/src/pages/ticket/[id].vue‎

Lines changed: 16 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,30 @@
11
<template lang="pug">
2-
.column
3-
.row.q-my-md.q-px-sm
4-
q-breadcrumbs
5-
q-breadcrumbs-el(to="/") Accueil
6-
q-breadcrumbs-el(to="/tickets") Tickets
7-
q-breadcrumbs-el(:label="ticketData.data.sequence")
8-
.row.q-gutter-md(style={'min-height': 'auto'})
9-
.col-2
10-
tk-ticketLeftPanel
11-
.col-6
12-
tk-ticketMainPanel()
13-
.col-3
14-
tk-ticketRightPanel(:ticketData="ticketData.data")
2+
q-page.row.items-stretch
3+
.col-12
4+
.row(style="height: 100%")
5+
.col-2.q-pa-sm
6+
tk-ticketLeftPanel(:sequence="ticketData.data.sequence")
7+
.col-6.q-pa-sm
8+
tk-ticketMainPanel(:sequence="ticketData.data.sequence" :subject="ticketData.data.subject")
9+
.col-4.q-pa-sm
10+
tk-ticketRightPanel(:ticketData="ticketData.data")
1511
</template>
1612

1713
<script lang="ts" setup>
1814
import { ref, onMounted, computed } from 'vue'
1915
import { useRoute } from 'nuxt/app';
2016
import { useHttpApi } from '~/composables/useHttpApi';
21-
17+
import { useDraggable } from '@vueuse/core'
2218
const route = useRoute()
2319
const id = ref<string>('')
2420
const { data: ticketData } = await useHttpApi(`/tickets/ticket/${route.params.id}`, {
2521
method: 'get'
2622
})
2723
28-
onMounted(async () => {
29-
30-
})
31-
32-
24+
</script>
3325

34-
</script>
26+
<style lang="css" scoped>
27+
.mainContent {
28+
height: calc(100% - 50px);
29+
}
30+
</style>

0 commit comments

Comments
 (0)