Skip to content

Commit 3be8f7d

Browse files
RICHARD-QuentinRICHARD-Quentin
committed
auto regiister changes
1 parent 4cf81f9 commit 3be8f7d

File tree

2 files changed

+184
-69
lines changed

2 files changed

+184
-69
lines changed

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

Lines changed: 132 additions & 69 deletions
Original file line numberDiff line numberDiff line change
@@ -3,87 +3,99 @@ q-scroll-area(:style="{height: '100%'}")
33
q-card
44
q-toolbar.justify-end
55
q-btn-group
6+
q-btn(color="green" icon="mdi-clipboard-arrow-down" @click="console.log('Imprimer')" size="md") M'assigner le ticket
7+
q-tooltip.text-body2 M'assigner le ticket
68
q-btn(color="primary" icon="mdi-printer" @click="console.log('Imprimer')" size="md")
79
q-tooltip.text-body2 Imprimer
810
q-btn(color="info" icon="mdi-content-save-all" @click="console.log('Save')" size="md")
911
q-tooltip.text-body2 Sauvegarder
1012
q-btn(color="red" icon="mdi-arrow-left" @click="console.log(router.go(-1))" size="md")
1113
q-tooltip.text-body2 Retour
12-
q-expansion-item(label="Enveloppe").bg-gray-4
13-
q-card
14-
q-card-section
15-
q-select.q-my-xs(
16-
label="Appelant(s)" filled v-model="ticket.envelope.senders"
17-
option-label="name"
18-
use-input use-chips multiple
19-
new-value-mode="add-unique"
20-
)
21-
q-select.q-my-xs(
22-
option-label="name"
23-
label="Appelant(s)" filled v-model="ticket.envelope.observers"
24-
use-input use-chips multiple
25-
new-value-mode="add-unique"
26-
)
27-
q-select.q-my-xs(
28-
option-label="name"
29-
label="Appelant(s)" filled v-model="ticket.envelope.assigned"
30-
use-input use-chips multiple
31-
new-value-mode="add-unique"
32-
)
33-
q-expansion-item(label="Informations").bg-gray-4
34-
q-card
35-
q-card-section
36-
.row.items-center
37-
.col-6 Type de ticket :
38-
.col-6
39-
q-chip(:icon="typeOfTicket.icon" :color="typeOfTicket.color" outline).q-mx-auto {{ typeOfTicket.label }}
40-
q-select.q-my-xs(
41-
label="Projet(s)" filled v-model="ticket.project"
42-
option-label="name"
43-
use-input use-chips
44-
new-value-mode="add-unique"
45-
)
46-
q-select.q-my-xs(
47-
label="Priorité" filled
48-
option-label="name"
49-
use-input use-chips
50-
new-value-mode="add-unique"
51-
v-model="ticket.priority"
52-
)
53-
q-select.q-my-xs(
54-
label="Impact" filled
55-
option-label="name"
56-
use-input use-chips
57-
new-value-mode="add-unique"
58-
v-model="ticket.impact"
59-
)
60-
q-select.q-my-xs(
61-
label="SLA" filled
62-
option-label="name"
63-
use-input use-chips
64-
new-value-mode="add-unique"
65-
v-model="ticket.sla"
66-
)
67-
q-input.q-my-xs( label="Due date" type="date" filled v-model="dueDate")
68-
q-input.q-my-xs( label="Temps total" type="time" filled readonly v-model="totalTime")
69-
q-expansion-item(label="Cycle de vie").bg-gray-4
70-
q-card
71-
q-card-section
72-
.row.items-center
73-
.col-6 Etape de vie :
74-
.col-6
75-
q-chip(:icon="lifestepOfTicket?.icon" :color="lifestepOfTicket?.color" outline).q-mx-auto {{ lifestepOfTicket?.label }}
76-
.row.items-center
77-
.col-6 State :
78-
.col-6
79-
q-chip(:icon="stateOfTicket?.icon" :color="stateOfTicket?.color" outline).q-mx-auto {{ stateOfTicket?.name }}
14+
q-card-section.text-right
15+
span.text-caption(v-if="countdown>0") Enregistrement des changements dans {{ countdown }}s
16+
span.text-caption(v-else) Données a jours
17+
q-card-section
18+
q-expansion-item(label="Enveloppe").bg-gray-4
19+
q-card
20+
q-card-section
21+
q-select.q-my-xs(
22+
label="Appelant(s)" filled v-model="ticket.envelope.senders"
23+
option-label="name"
24+
use-input use-chips multiple
25+
new-value-mode="add-unique"
26+
)
27+
q-select.q-my-xs(
28+
option-label="name"
29+
label="Concerné(s)" filled v-model="ticket.envelope.observers"
30+
use-input use-chips multiple
31+
new-value-mode="add-unique"
32+
)
33+
q-select.q-my-xs(
34+
option-label="name"
35+
label="Assigné(s)" filled v-model="ticket.envelope.assigned"
36+
use-input use-chips multiple
37+
new-value-mode="add-unique"
38+
)
39+
q-expansion-item(label="Informations").bg-gray-4
40+
q-card
41+
q-card-section
42+
.row.items-center
43+
.col-6 Type de ticket :
44+
.col-6
45+
q-chip(:icon="typeOfTicket.icon" :color="typeOfTicket.color" outline).q-mx-auto {{ typeOfTicket.label }}
46+
q-select.q-my-xs(
47+
label="Projet(s)" filled v-model="ticket.project"
48+
use-input use-chips
49+
new-value-mode="add-unique"
50+
:options="projects.data"
51+
option-label="name"
52+
)
53+
q-select.q-my-xs(
54+
label="Priorité" filled
55+
use-input use-chips
56+
v-model="ticket.priority"
57+
:options="priority"
58+
option-label="name"
59+
)
60+
q-select.q-my-xs(
61+
label="Impact" filled
62+
use-input use-chips
63+
new-value-mode="add-unique"
64+
v-model="ticket.impact"
65+
:options="impact"
66+
option-label="name"
67+
)
68+
q-select.q-my-xs(
69+
label="SLA" filled
70+
use-input use-chips
71+
new-value-mode="add-unique"
72+
v-model="ticket.sla"
73+
:options="sla.data"
74+
option-label="name"
75+
)
76+
q-input.q-my-xs( label="Due date" type="date" filled v-model="dueDate")
77+
q-input.q-my-xs( label="Temps total" type="time" filled readonly v-model="totalTime")
78+
q-expansion-item(label="Cycle de vie").bg-gray-4
79+
q-card
80+
q-card-section
81+
.row.items-center
82+
.col-6 Etape de vie :
83+
.col-6
84+
q-chip(:icon="lifestepOfTicket?.icon" :color="lifestepOfTicket?.color" outline).q-mx-auto {{ lifestepOfTicket?.label }}
85+
.row.items-center
86+
.col-6 State :
87+
.col-6
88+
q-chip(:icon="stateOfTicket?.icon" :color="stateOfTicket?.color" outline).q-mx-auto {{ stateOfTicket?.name }}
8089
</template>
8190

8291
<script lang="ts" setup>
83-
import { ref, onMounted, computed, inject } from 'vue'
92+
import { ref, onMounted, computed, inject, watch } from 'vue'
8493
import { ticketType, lifeSteps, useDayjs } from '#imports';
8594
import { useHttpApi } from '~/composables/useHttpApi';
8695
import { useRouter } from 'vue-router';
96+
import { impact, priority } from '~/utils';
97+
import { omit } from 'radash'
98+
8799
const props = defineProps({
88100
ticketData: {
89101
type: Object,
@@ -96,6 +108,15 @@ const ticket = ref(props.ticketData)
96108
const { data: states, pending: statesPending, refresh: statesRefresh, error: statesError } = await useHttpApi('/tickets/state', {
97109
method: 'get'
98110
})
111+
112+
const { data: projects, pending: projectsPending, refresh: projectsRefresh, error: projectsError } = await useHttpApi('/core/project', {
113+
method: 'get'
114+
})
115+
116+
const { data: sla, pending: slaPending, refresh: slaRefresh, error: slaError } = await useHttpApi('/tickets/sla', {
117+
method: 'get'
118+
})
119+
99120
const typeOfTicket = computed(() => {
100121
return ticketType.find((type: any) => type.value === ticket.value.type)
101122
})
@@ -108,6 +129,48 @@ const stateOfTicket = computed(() => {
108129
return states.value?.data.find((state: any) => state._id === ticket.value.state.id)
109130
})
110131
132+
const countdown = ref(0)
133+
let interval: NodeJS.Timeout
134+
135+
watch(ticket, (newTicket, oldTicket) => {
136+
startCountdown()
137+
console.log('ticket changed')
138+
console.log(newTicket)
139+
console.log(oldTicket)
140+
}, { deep: true })
141+
142+
watch(countdown, (newCountdown) => {
143+
if (newCountdown === 0) {
144+
resetCountdown()
145+
const body = omit(ticket.value, ['_id', 'metadata', 'tags', 'sequence', 'subject'])
146+
useHttpApi(`/tickets/ticket/${ticket.value._id}`, {
147+
method: 'patch',
148+
body
149+
})
150+
}
151+
})
152+
153+
const startCountdown = () => {
154+
resetCountdown()
155+
interval = setInterval(() => {
156+
countdown.value--
157+
console.log(countdown.value)
158+
}, 1000)
159+
}
160+
161+
const resetCountdown = () => {
162+
countdown.value = 15
163+
clearInterval(interval)
164+
}
165+
166+
const ticketCountdown = computed(() => {
167+
const dueAt = dayjs(ticket.value.sla.dueAt)
168+
const now = dayjs()
169+
const diff = dueAt.diff(now, 'second')
170+
countdown.value = diff
171+
return diff
172+
})
173+
111174
const totalTime = computed(() => {
112175
const min = ticket.value.totalTime % 60
113176
const hour = Math.floor(ticket.value.totalTime / 60)

‎app/src/utils/statics.ts‎

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,3 +15,55 @@ export enum ThreadType {
1515
INCOMING = 4,
1616
OUTGOING = 5,
1717
}
18+
19+
export enum Impact {
20+
Low = 'Low',
21+
Medium = 'Medium',
22+
High = 'High',
23+
Critical = 'Critical',
24+
}
25+
26+
export enum Priority {
27+
Low = 'Low',
28+
Normal = 'Normal',
29+
High = 'High',
30+
Urgent = 'Urgent',
31+
}
32+
33+
export const impact = [
34+
{
35+
_id: generateMongoId(),
36+
name: Impact.Low,
37+
},
38+
{
39+
_id: generateMongoId(),
40+
name: Impact.Medium,
41+
},
42+
{
43+
_id: generateMongoId(),
44+
name: Impact.High,
45+
},
46+
{
47+
_id: generateMongoId(),
48+
name: Impact.Critical,
49+
},
50+
]
51+
52+
export const priority = [
53+
{
54+
_id: generateMongoId(),
55+
name: Priority.Low,
56+
},
57+
{
58+
_id: generateMongoId(),
59+
name: Priority.Normal,
60+
},
61+
{
62+
_id: generateMongoId(),
63+
name: Priority.High,
64+
},
65+
{
66+
_id: generateMongoId(),
67+
name: Priority.Urgent,
68+
},
69+
]

0 commit comments

Comments
 (0)