Skip to content

Commit 8e328e9

Browse files
RICHARD-QuentinRICHARD-Quentin
committed
Ajout de la fonctionnalité useMenu dans les composables
1 parent f6a3dad commit 8e328e9

File tree

5 files changed

+279
-221
lines changed

5 files changed

+279
-221
lines changed

‎src/composables/index.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,3 +2,4 @@ export * from './pushQuery'
22
export * from './usePagination'
33
export * from './useIdentityStates'
44
export * from './useIdentityLifecycle'
5+
export * from './useMenu'

‎src/composables/useMenu.ts‎

Lines changed: 158 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,158 @@
1+
import { useIdentityAffectationStore } from "~/stores/identityAffectation"
2+
import { IdentityState, useIdentityStates } from "./useIdentityStates"
3+
import { useIdentityStateStore } from "~/stores/identityState"
4+
5+
const { getStateInfos } = useIdentityStates()
6+
7+
type Badge = {
8+
name: string
9+
color: string
10+
value: string
11+
}
12+
13+
type Menu = {
14+
icon: string
15+
label: string
16+
path: string
17+
color: string
18+
part: string
19+
badgeValue?: string
20+
badge?: Badge
21+
}
22+
23+
function useMenu(identityStateStore, identityAffectationStore) {
24+
const menuParts = ref(['Listes', 'Affectations', 'Etats'])
25+
const menus = ref([
26+
{
27+
icon: 'mdi-account',
28+
label: 'Liste des identités',
29+
path: '/identities',
30+
color: 'primary',
31+
part: 'Listes',
32+
},
33+
{
34+
icon: 'mdi-card-account-details',
35+
label: 'Liste des agents',
36+
path: '/account',
37+
color: 'primary',
38+
part: 'Listes',
39+
},
40+
{
41+
icon: 'mdi-account-check',
42+
label: 'A valider',
43+
path: `/identities?sort[metadata.lastUpdatedAt]=desc&skip=0&limit=10&filters[@state][]=${IdentityState.TO_VALIDATE}`,
44+
color: 'primary',
45+
part: 'Etats',
46+
badgeValue: 'TO_VALIDATE',
47+
},
48+
{
49+
icon: 'mdi-account-alert',
50+
label: 'A compléter',
51+
path: `/identities?sort[metadata.lastUpdatedAt]=desc&skip=0&limit=10&filters[@state][]=${IdentityState.TO_COMPLETE}`,
52+
color: 'primary',
53+
part: 'Etats',
54+
badgeValue: 'TO_COMPLETE',
55+
},
56+
{
57+
icon: 'mdi-sync',
58+
label: 'A synchroniser',
59+
path: `/identities?sort[metadata.lastUpdatedAt]=desc&skip=0&limit=10&filters[@state][]=${IdentityState.TO_SYNC}`,
60+
color: 'primary',
61+
part: 'Etats',
62+
badgeValue: 'TO_SYNC',
63+
},
64+
{
65+
icon: 'mdi-loading',
66+
label: 'En cours de synchronisation',
67+
path: `/identities?sort[metadata.lastUpdatedAt]=desc&skip=0&limit=10&filters[@state][]=${IdentityState.PROCESSING}`,
68+
color: 'primary',
69+
part: 'Etats',
70+
badgeValue: 'PROCESSING',
71+
},
72+
{
73+
icon: 'mdi-check',
74+
label: 'Synchronisées',
75+
path: `/identities?sort[metadata.lastUpdatedAt]=desc&skip=0&limit=10&filters[@state][]=${IdentityState.SYNCED}`,
76+
color: 'primary',
77+
part: 'Etats',
78+
badgeValue: 'SYNCED',
79+
},
80+
{
81+
icon: 'mdi-account-off',
82+
label: 'Etudiants',
83+
path: '/identities?sort[metadata.lastUpdatedAt]=desc&skip=0&limit=10&filters[^additionalFields.attributes.supann.supannTypeEntiteAffectation]=/etd/i',
84+
color: 'primary',
85+
part: 'Affectations',
86+
badgeValue: 'ETD',
87+
},
88+
{
89+
icon: 'mdi-account-tie',
90+
label: 'Administratifs',
91+
path: '/identities?sort[metadata.lastUpdatedAt]=desc&skip=0&limit=10&filters[^additionalFields.attributes.supann.supannTypeEntiteAffectation]=/adm/i',
92+
color: 'primary',
93+
part: 'Affectations',
94+
badgeValue: 'ADM',
95+
},
96+
{
97+
icon: 'mdi-account-group',
98+
label: 'Enseignants',
99+
path: '/identities?sort[metadata.lastUpdatedAt]=desc&skip=0&limit=10&filters[^additionalFields.attributes.supann.supannTypeEntiteAffectation]=/esn/i',
100+
color: 'primary',
101+
part: 'Affectations',
102+
badgeValue: 'ESN',
103+
},
104+
{
105+
icon: 'mdi-account-remove',
106+
label: 'En erreur',
107+
path: `/identities?sort[metadata.lastUpdatedAt]=desc&skip=0&limit=10&filters[@state][]=${IdentityState.ON_ERROR}`,
108+
color: 'primary',
109+
part: 'Etats',
110+
badgeValue: 'ON_ERROR',
111+
},
112+
// {
113+
// icon: 'mdi-cog',
114+
// label: 'Paramètres',
115+
// path: '/settings',
116+
// color: 'primary',
117+
// part: 'Paramètres'
118+
// }
119+
])
120+
121+
const badgesValues = ref({
122+
TO_VALIDATE: computed(() => (identityStateStore.getToValidateCount > 9999 ? '9999+' : identityStateStore.getToValidateCount)),
123+
TO_COMPLETE: computed(() => (identityStateStore.getToCompleteCount > 9999 ? '9999+' : identityStateStore.getToCompleteCount)),
124+
TO_SYNC: computed(() => (identityStateStore.getToSyncCount > 9999 ? '9999+' : identityStateStore.getToSyncCount)),
125+
PROCESSING: computed(() => (identityStateStore.getProcessingCount > 9999 ? '9999+' : identityStateStore.getProcessingCount)),
126+
SYNCED: computed(() => (identityStateStore.getSyncedCount > 9999 ? '9999+' : identityStateStore.getSyncedCount)),
127+
ON_ERROR: computed(() => (identityStateStore.getOnErrorCount > 9999 ? '9999+' : identityStateStore.getOnErrorCount)),
128+
ETD: computed(() => (identityAffectationStore.getEtdCount > 9999 ? '9999+' : identityAffectationStore.getEtdCount)),
129+
ADM: computed(() => (identityAffectationStore.getAdmCount > 9999 ? '9999+' : identityAffectationStore.getAdmCount)),
130+
ESN: computed(() => (identityAffectationStore.getEsnCount > 9999 ? '9999+' : identityAffectationStore.getEsnCount)),
131+
})
132+
133+
function getMenu(): Menu[] {
134+
const menuWithBadgeValue: Menu[] = menus.value.reduce((acc: Menu[], menu) => {
135+
const badgeType = menu.badgeValue ? menu.badgeValue : 'UNKNOWN'
136+
const stateInfo = getStateInfos(IdentityState[badgeType])
137+
const badgeInfos: Badge = {
138+
name: stateInfo.name,
139+
color: stateInfo.color === 'grey' ? 'primary' : stateInfo.color,
140+
value: badgesValues.value[badgeType] || '0',
141+
}
142+
acc.push({
143+
...menu,
144+
badge: menu.badgeValue ? badgeInfos : undefined,
145+
})
146+
return acc
147+
}, [])
148+
return menuWithBadgeValue
149+
}
150+
151+
function getMenuByPart(part: string): Menu[] {
152+
return getMenu().filter((menu) => menu.part === part)
153+
}
154+
155+
return { getMenu, menuParts, badgesValues, getMenuByPart }
156+
}
157+
158+
export { useMenu }

‎src/layouts/default.vue‎

Lines changed: 95 additions & 86 deletions
Original file line numberDiff line numberDiff line change
@@ -8,77 +8,97 @@ q-layout
88
q-item(@click="push('/')" clickable v-ripple)
99
q-item-section(avatar)
1010
q-icon(name="mdi-home")
11-
q-tooltip.text-body2(anchor="center right" self="center left") Accueil
12-
q-item(@click="push('/identities')" clickable)
13-
q-item-section(avatar)
14-
q-icon(name="mdi-account")
15-
q-tooltip.text-body2(anchor="center right" self="center left") Liste des identités
16-
q-item(@click="push('/agents')" clickable)
17-
q-item-section(avatar)
18-
q-icon(name="mdi-card-account-details")
19-
q-tooltip.text-body2(anchor="center right" self="center left") Liste des agents
20-
q-space
21-
q-separator
22-
q-item(@click="push(`/identities?sort[metadata.lastUpdatedAt]=desc&skip=0&limit=10&filters[@state][]=${IdentityState.TO_VALIDATE}`)" clickable)
23-
q-item-section(avatar)
24-
q-icon(name="mdi-account-check")
25-
q-badge(color="primary" floating ) {{ TO_VALIDATE }}
26-
q-tooltip.text-body2(anchor="center right" self="center left") A valider
27-
28-
q-item(@click="push(`/identities?sort[metadata.lastUpdatedAt]=desc&skip=0&limit=10&filters[@state][]=${IdentityState.TO_COMPLETE}`)" clickable)
29-
q-item-section(avatar)
30-
q-icon(name="mdi-account-alert")
31-
q-badge(color="primary" floating) {{ TO_COMPLETE }}
32-
q-tooltip.text-body2(anchor="center right" self="center left") A compléter
33-
q-item(@click="push(`/identities?sort[metadata.lastUpdatedAt]=desc&skip=0&limit=10&filters[@state][]=${IdentityState.ON_ERROR}`)" clickable)
34-
q-item-section(avatar)
35-
q-icon(name="mdi-account-remove")
36-
q-tooltip.text-body2(anchor="center right" self="center left") En erreur
37-
q-badge(color="primary" floating) {{ ON_ERROR }}
38-
39-
q-item(@click="push(`/identities?sort[metadata.lastUpdatedAt]=desc&skip=0&limit=10&filters[@state][]=${IdentityState.TO_SYNC}`)" clickable)
40-
q-item-section(avatar)
41-
q-icon(name="mdi-sync")
42-
q-tooltip.text-body2(anchor="center right" self="center left") A synchroniser
43-
q-badge(color="primary" floating) {{ TO_SYNC }}
44-
45-
q-item(@click="push(`/identities?sort[metadata.lastUpdatedAt]=desc&skip=0&limit=10&filters[@state][]=${IdentityState.PROCESSING}`)" clickable)
46-
q-item-section(avatar)
47-
q-icon(name="mdi-loading")
48-
q-tooltip.text-body2(anchor="center right" self="center left") En cours de synchronisation
49-
q-badge(color="primary" floating) {{ PROCESSING }}
50-
51-
q-item(@click="push(`/identities?sort[metadata.lastUpdatedAt]=desc&skip=0&limit=10&filters[@state][]=${IdentityState.SYNCED}`)" clickable)
52-
q-item-section(avatar)
53-
q-icon(name="mdi-check")
54-
q-tooltip.text-body2(anchor="center right" self="center left") Synchronisées
55-
q-badge(color="primary" floating) {{ SYNCED }}
56-
5711
q-separator
58-
q-item(@click="push('/identities?sort[metadata.lastUpdatedAt]=desc&skip=0&limit=10&filters[^additionalFields.attributes.supann.supannTypeEntiteAffectation]=/etd/i')" clickable)
59-
q-item-section(avatar)
60-
q-icon(name="mdi-account-off")
61-
q-tooltip.text-body2(anchor="center right" self="center left") Etudiants
62-
q-badge(color="primary" floating) {{ ETD }}
63-
q-item(@click="push('/identities?sort[metadata.lastUpdatedAt]=desc&skip=0&limit=10&filters[^additionalFields.attributes.supann.supannTypeEntiteAffectation]=/adm/i')" clickable)
12+
q-list(v-for="part in menuParts" :key="part")
13+
q-item(
14+
v-for="menu in getMenuByPart(part)" :key="part" clickable v-ripple
15+
@click="push(menu.path)"
16+
)
6417
q-item-section(avatar)
65-
q-icon(name="mdi-account-tie")
66-
q-tooltip.text-body2(anchor="center right" self="center left") Administratifs
67-
q-badge(color="primary" floating) {{ ADM }}
68-
q-item(@click="push('/identities?sort[metadata.lastUpdatedAt]=desc&skip=0&limit=10&filters[^additionalFields.attributes.supann.supannTypeEntiteAffectation]=/esn/i')" clickable)
69-
q-item-section(avatar)
70-
q-icon(name="mdi-account-group")
71-
q-tooltip.text-body2(anchor="center right" self="center left") Enseignants
72-
q-badge(color="primary" floating) {{ ESN }}
18+
q-icon(:name="menu.icon")
19+
q-badge(v-if="menu.badgeValue" :color="menu.badge.color" floating) {{ menu.badge.value }}
7320
q-separator
74-
q-item(@click="push('/settings')" clickable)
75-
q-item-section(avatar)
76-
q-icon(name="mdi-cog")
77-
q-tooltip.text-body2(anchor="center right" self="center left") Paramètres
78-
q-item(@click="test" clickable)
79-
q-item-section(avatar)
80-
q-icon(name="mdi-logout")
81-
q-tooltip.text-body2(anchor="center right" self="center left") Déconnexion
21+
//- q-item-section.avatar
22+
//- q-icon(:name="getMenuByPart(part)[0].icon")
23+
//- q-item-section
24+
//- q-item-label {{ part }}
25+
//- q-tooltip.text-body2(anchor="center right" self="center left") {{ part }}
26+
//- q-badge(v-if="badgesValues[part]" color="primary" floating) {{ badgesValues[part] }}
27+
//- q-item(@click="push('/')" clickable v-ripple)
28+
//- q-item-section(avatar)
29+
//- q-icon(name="mdi-home")
30+
//- q-tooltip.text-body2(anchor="center right" self="center left") Accueil
31+
//- q-item(@click="push('/agents')" clickable)
32+
//- q-item-section(avatar)
33+
//- q-icon(name="mdi-card-account-details")
34+
//- q-tooltip.text-body2(anchor="center right" self="center left") Liste des agents
35+
//- q-item(@click="push('/identities')" clickable)
36+
//- q-item-section(avatar)
37+
//- q-icon(name="mdi-account")
38+
//- q-badge(color="primary" floating) {{ TOTAL }}
39+
//- q-tooltip.text-body2(anchor="center right" self="center left") Liste des identités
40+
//- q-space
41+
//- q-separator
42+
//- q-item(@click="push(`/identities?sort[metadata.lastUpdatedAt]=desc&skip=0&limit=10&filters[@state][]=${IdentityState.TO_VALIDATE}`)" clickable)
43+
//- q-item-section(avatar)
44+
//- q-icon(name="mdi-account-check")
45+
//- q-badge(color="primary" floating ) {{ TO_VALIDATE }}
46+
//- q-tooltip.text-body2(anchor="center right" self="center left") A valider
47+
48+
//- q-item(@click="push(`/identities?sort[metadata.lastUpdatedAt]=desc&skip=0&limit=10&filters[@state][]=${IdentityState.TO_COMPLETE}`)" clickable)
49+
//- q-item-section(avatar)
50+
//- q-icon(name="mdi-account-alert")
51+
//- q-badge(color="primary" floating) {{ TO_COMPLETE }}
52+
//- q-tooltip.text-body2(anchor="center right" self="center left") A compléter
53+
//- q-item(@click="push(`/identities?sort[metadata.lastUpdatedAt]=desc&skip=0&limit=10&filters[@state][]=${IdentityState.ON_ERROR}`)" clickable)
54+
//- q-item-section(avatar)
55+
//- q-icon(name="mdi-account-remove")
56+
//- q-tooltip.text-body2(anchor="center right" self="center left") En erreur
57+
//- q-badge(color="primary" floating) {{ ON_ERROR }}
58+
59+
//- q-item(@click="push(`/identities?sort[metadata.lastUpdatedAt]=desc&skip=0&limit=10&filters[@state][]=${IdentityState.TO_SYNC}`)" clickable)
60+
//- q-item-section(avatar)
61+
//- q-icon(name="mdi-sync")
62+
//- q-tooltip.text-body2(anchor="center right" self="center left") A synchroniser
63+
//- q-badge(color="primary" floating) {{ TO_SYNC }}
64+
65+
//- q-item(@click="push(`/identities?sort[metadata.lastUpdatedAt]=desc&skip=0&limit=10&filters[@state][]=${IdentityState.PROCESSING}`)" clickable)
66+
//- q-item-section(avatar)
67+
//- q-icon(name="mdi-loading")
68+
//- q-tooltip.text-body2(anchor="center right" self="center left") En cours de synchronisation
69+
//- q-badge(color="primary" floating) {{ PROCESSING }}
70+
71+
//- q-item(@click="push(`/identities?sort[metadata.lastUpdatedAt]=desc&skip=0&limit=10&filters[@state][]=${IdentityState.SYNCED}`)" clickable)
72+
//- q-item-section(avatar)
73+
//- q-icon(name="mdi-check")
74+
//- q-tooltip.text-body2(anchor="center right" self="center left") Synchronisées
75+
//- q-badge(color="primary" floating) {{ SYNCED }}
76+
77+
//- q-separator
78+
//- q-item(@click="push('/identities?sort[metadata.lastUpdatedAt]=desc&skip=0&limit=10&filters[^additionalFields.attributes.supann.supannTypeEntiteAffectation]=/etd/i')" clickable)
79+
//- q-item-section(avatar)
80+
//- q-icon(name="mdi-account-off")
81+
//- q-tooltip.text-body2(anchor="center right" self="center left") Etudiants
82+
//- q-badge(color="primary" floating) {{ ETD }}
83+
//- q-item(@click="push('/identities?sort[metadata.lastUpdatedAt]=desc&skip=0&limit=10&filters[^additionalFields.attributes.supann.supannTypeEntiteAffectation]=/adm/i')" clickable)
84+
//- q-item-section(avatar)
85+
//- q-icon(name="mdi-account-tie")
86+
//- q-tooltip.text-body2(anchor="center right" self="center left") Administratifs
87+
//- q-badge(color="primary" floating) {{ ADM }}
88+
//- q-item(@click="push('/identities?sort[metadata.lastUpdatedAt]=desc&skip=0&limit=10&filters[^additionalFields.attributes.supann.supannTypeEntiteAffectation]=/esn/i')" clickable)
89+
//- q-item-section(avatar)
90+
//- q-icon(name="mdi-account-group")
91+
//- q-tooltip.text-body2(anchor="center right" self="center left") Enseignants
92+
//- q-badge(color="primary" floating) {{ ESN }}
93+
//- q-separator
94+
//- q-item(@click="push('/settings')" clickable)
95+
//- q-item-section(avatar)
96+
//- q-icon(name="mdi-cog")
97+
//- q-tooltip.text-body2(anchor="center right" self="center left") Paramètres
98+
//- q-item(@click="test" clickable)
99+
//- q-item-section(avatar)
100+
//- q-icon(name="mdi-logout")
101+
//- q-tooltip.text-body2(anchor="center right" self="center left") Déconnexion
82102
83103
q-page-container
84104
nuxt-page
@@ -89,33 +109,23 @@ import { ref } from 'vue'
89109
import { IdentityState } from '~/composables'
90110
import { useIdentityStateStore } from '~/stores/identityState'
91111
import { useIdentityAffectationStore } from '~/stores/identityAffectation'
112+
import { useMenu } from '~/composables'
113+
92114
const drawer = ref(true)
93115
94116
const router = useRouter()
95-
96-
const identityStore = useIdentityStateStore()
117+
const identityStateStore = useIdentityStateStore()
97118
const identityAffectationStore = useIdentityAffectationStore()
98-
const { fetchAllStateCount } = identityStore
119+
const { fetchAllStateCount } = identityStateStore
99120
const { fetchAllAffectationCount } = identityAffectationStore
100-
fetchAllStateCount()
101-
fetchAllAffectationCount()
102-
121+
await identityStateStore.fetchAllStateCount()
122+
await identityAffectationStore.fetchAllAffectationCount()
103123
104-
const TO_COMPLETE = computed(() => identityStore.getToCompleteCount > 99 ? '99+' : identityStore.getToCompleteCount)
105-
const TO_VALIDATE = computed(() => identityStore.getToValidateCount > 99 ? '99+' : identityStore.getToValidateCount)
106-
const ON_ERROR = computed(() => identityStore.getOnErrorCount > 99 ? '99+' : identityStore.getOnErrorCount)
107-
const TO_SYNC = computed(() => identityStore.getToSyncCount > 99 ? '99+' : identityStore.getToSyncCount)
108-
const PROCESSING = computed(() => identityStore.getProcessingCount > 99 ? '99+' : identityStore.getProcessingCount)
109-
const SYNCED = computed(() => identityStore.getSyncedCount > 99 ? '99+' : identityStore.getSyncedCount)
110-
111-
const ADM = computed(() => identityAffectationStore.getAdmCount > 9999 ? '9999+' : identityAffectationStore.getAdmCount)
112-
const ETD = computed(() => identityAffectationStore.getEtdCount > 9999 ? '9999+' : identityAffectationStore.getEtdCount)
113-
const ESN = computed(() => identityAffectationStore.getEsnCount > 9999 ? '9999+' : identityAffectationStore.getEsnCount)
124+
const { getMenu, badgesValues, menuParts, getMenuByPart } = useMenu(identityStateStore, identityAffectationStore)
114125
115126
// const { fetchAllStateCount } = identityStore
116127
// await identityStore.fetchAllStateCount()
117128
118-
119129
function push(path: string) {
120130
router.push(path)
121131
}
@@ -127,7 +137,6 @@ function logout() {
127137
function test() {
128138
console.log('test')
129139
}
130-
131140
</script>
132141

133142
<style>

0 commit comments

Comments
 (0)