Skip to content

Commit d6d8590

Browse files
RICHARD-QuentinRICHARD-Quentin
committed
Ajout d'une modale pour update plusieurs identitées en même temps
1 parent 9bdeb52 commit d6d8590

File tree

5 files changed

+174
-33
lines changed

5 files changed

+174
-33
lines changed

‎src/components/2pan/index.vue‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -30,12 +30,11 @@ q-splitter(
3030
:selected-rows-label="(numberOfRows) => `${numberOfRows} entrée(s) sélectionnée(s)`"
3131
flat
3232
)
33-
slot(name="top-left")
3433
template(v-for="(_, name) in $slots" v-slot:[name]="slotData")
3534
slot(:name="name" v-bind="slotData")
3635
template(v-slot:top-left)
3736
q-btn-group(rounded flat)
38-
slot(name="top-left-btn-grp" :selected="selected")
37+
slot(name="top-left-btn-grp" :selectedValues="selected")
3938
slot(name="top-left-btn-grp-content-before")
4039
slot(name="top-left-btn-grp-content-after")
4140
template(v-slot:top-right)

‎src/components/table/top-left.vue‎

Lines changed: 95 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,11 @@
22
q-btn-group(rounded flat)
33
q-btn(flat icon="mdi-eye" color="primary" rounded @click="goToIdentity(selected[0])" size="md" :disable="selected.length === 0 || selected.length !== 1")
44
q-tooltip.text-body2(transition-show="scale" transition-hide="scale") Afficher les identités sélectionnées
5-
q-btn(flat icon="mdi-merge" color="primary" rounded @click="merge" size="md" :disable="true ||selected.length === 0 || selected.length === 1")
6-
q-tooltip.text-body2(transition-show="scale" transition-hide="scale") Fusionner les identités sélectionnées
7-
q-btn(flat icon="mdi-lock" color="primary" rounded @click="updateLifestep(LifeStep.CLOSED)" size="md" :disable="selected.length === 0")
5+
//- q-btn(flat icon="mdi-merge" color="primary" rounded @click="merge" size="md" :disable="true ||selected.length === 0 || selected.length === 1")
6+
//- q-tooltip.text-body2(transition-show="scale" transition-hide="scale") Fusionner les identités sélectionnées
7+
//- q-btn(flat icon="mdi-check" color="primary" rounded @click="openUpdateModale(IdentityState.TO_VALIDATE)" size="md" :disable="selected.length === 0")
8+
//- q-tooltip.text-body2(transition-show="scale" transition-hide="scale") Valider les identités sélectionnées
9+
q-btn(flat icon="mdi-sync" color="primary" rounded @click="openUpdateModale(IdentityState.TO_VALIDATE)" size="md" :disable="selected.length === 0")
810
q-tooltip.text-body2(transition-show="scale" transition-hide="scale") Mettre à synchroniser les identités sélectionnées
911
q-btn(flat icon="mdi-close" color="primary" rounded @click="clearSelection" size="md")
1012
q-tooltip.text-body2(transition-show="scale" transition-hide="scale") Nettoyer la selection
@@ -14,19 +16,103 @@ q-btn-group(rounded flat)
1416
import type { components } from '#build/types/service-api'
1517
import type { PropType } from 'vue'
1618
import { useRouter } from 'nuxt/app'
17-
type Ticket = components['schemas']['TicketDto']
19+
import updateIdentityModale from '../updateIdentityModale.vue'
20+
import { useIdentityStates } from '#imports'
21+
import { IdentityState } from '~/composables'
22+
import { useIdentityStateStore } from '~/stores/identityState'
23+
24+
const $q = useQuasar()
1825
1926
const props = defineProps({
2027
selected: {
21-
type: Array as PropType<Ticket[]>,
28+
type: Array as PropType<any[]>,
2229
default: () => [],
2330
},
2431
})
2532
26-
const emit = defineEmits(['updateLifestep', 'clear'])
33+
const emit = defineEmits(['updateLifestep', 'clear', 'refresh'])
34+
35+
const { getStateName } = useIdentityStates()
36+
const { getStateValue } = useIdentityStateStore()
37+
// function updateLifestep(lifestep: LifeStep) {
38+
// emit('updateLifestep', { identity: props.selected, lifestep })
39+
// }
40+
41+
function openUpdateModale(identityState: IdentityState) {
42+
console.log('openUpdateModale')
43+
44+
const name = getStateName(identityState)
45+
const count = getStateValue(identityState)
46+
47+
$q.dialog({
48+
component: updateIdentityModale,
49+
componentProps: {
50+
selectedIdentities: props.selected,
51+
identityTypesName: name,
52+
allIdentitiesCount: count,
53+
},
54+
})
55+
.onOk(async (data) => {
56+
console.log('syncIdentities', data)
57+
data.syncAllIdentities ? await updateAllIdentities(identityState) : await updateIdentity(props.selected, identityState)
58+
})
59+
.onCancel(() => {
60+
console.log('cancelSync')
61+
})
62+
}
63+
64+
function getTargetState(state: IdentityState) {
65+
switch (state) {
66+
case IdentityState.TO_VALIDATE:
67+
return IdentityState.TO_SYNC
68+
default:
69+
return state
70+
}
71+
}
2772
28-
function updateLifestep(lifestep: LifeStep) {
29-
emit('updateLifestep', { identity: props.selected, lifestep })
73+
async function updateAllIdentities(state: IdentityState) {
74+
const { data: identities } = await useHttp(`/management/identities?limit=999999&&filters[@state][]=${state}`, {
75+
method: 'get',
76+
})
77+
78+
if (!identities) {
79+
$q.notify({
80+
message: 'Aucune identité à mettre à jour',
81+
color: 'negative',
82+
})
83+
return
84+
}
85+
updateIdentity(identities.value.data, state)
86+
}
87+
88+
async function updateIdentity(identities, state: IdentityState) {
89+
const targetState = getTargetState(state)
90+
91+
console.log('updateIdentity', identities)
92+
const ids = identities.map((identity) => identity._id)
93+
const { data, error } = await useHttp(`/management/identities/state`, {
94+
method: 'patch',
95+
body: {
96+
ids,
97+
originState: state,
98+
targetState,
99+
},
100+
})
101+
102+
if (error.value) {
103+
$q.notify({
104+
message: error.value.data.message,
105+
color: 'negative',
106+
})
107+
return
108+
}
109+
110+
$q.notify({
111+
message: `Les identités ont été mises à jour avec succès`,
112+
color: 'positive',
113+
})
114+
emit('refresh')
115+
emit('clear')
30116
}
31117
32118
function clearSelection() {
@@ -41,7 +127,7 @@ function merge() {
41127
console.log('merge')
42128
}
43129
44-
function goToIdentity(identity: Ticket) {
130+
function goToIdentity(identity) {
45131
useRouter().push(`/identity/${identity._id}`)
46132
}
47133
</script>

‎src/components/updateIdentityModale.vue‎

Lines changed: 75 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
1+
<template lang="pug">
2+
q-dialog(
3+
ref="dialogRef",
4+
@hide="onDialogHide",
5+
)
6+
q-card.q-dialog-plugin
7+
q-card-section
8+
q-card-title.text-h6
9+
| Mettre à jour les identités
10+
q-card-section
11+
q-card-main
12+
13+
p {{ mainText }}
14+
15+
q-checkbox(
16+
v-model="syncAllIdentities",
17+
:label="checkboxLabel",
18+
)
19+
20+
q-card-actions
21+
q-space
22+
q-btn(
23+
color="positive",
24+
label="Valider",
25+
@click="syncIdentities"
26+
)
27+
q-btn(
28+
color="negative",
29+
label="Annuler",
30+
@click="cancelSync"
31+
)
32+
</template>
33+
34+
<script lang="ts" setup>
35+
import { ref } from 'vue'
36+
import { useDialogPluginComponent } from 'quasar'
37+
38+
const props = defineProps({
39+
selectedIdentities: {
40+
type: Array,
41+
default: () => [],
42+
},
43+
identityTypesName: {
44+
type: String,
45+
required: true,
46+
},
47+
allIdentitiesCount: {
48+
type: Number,
49+
required: true,
50+
default: 0,
51+
},
52+
})
53+
54+
defineEmits([...useDialogPluginComponent.emits])
55+
56+
const mainText = computed(() => `Vous êtes sur le point de mettre à jour ${props.selectedIdentities.length} identités "${props.identityTypesName}". Voulez-vous continuer ?`)
57+
58+
const checkboxLabel = computed(() => {
59+
return `Mettre à jour toutes les identités "${props.identityTypesName}" (${props.allIdentitiesCount})`
60+
})
61+
62+
const syncAllIdentities = ref(false)
63+
64+
const syncIdentities = () => {
65+
console.log('syncIdentities')
66+
onDialogOK({ syncAllIdentities: syncAllIdentities.value })
67+
}
68+
69+
const cancelSync = () => {
70+
console.log('cancelSync')
71+
onDialogCancel()
72+
}
73+
74+
const { dialogRef, onDialogHide, onDialogOK, onDialogCancel } = useDialogPluginComponent()
75+
</script>

‎src/pages/identities/index.vue‎

Lines changed: 2 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -2,26 +2,6 @@
22
div
33
.q-px-md
44
sesame-searchfilters(:fields="fieldsList")
5-
//- .q-px-md
6-
//- q-table.sesamesticky-last-column-table(
7-
//- :rows="identities?.data"
8-
//- :rows-per-page-options="[5, 10, 15]" :loading="pending" :columns="columns" row-key="_id" :visible-columns="visibleColumns"
9-
//- v-model:pagination="pagination" title="Identitiées" @request="onRequest($event, identities.total)"
10-
//- rows-per-page-label="Lignes par page" no-data-label="Aucune donnée" loading-label="Chargement..." no-results-label="Aucun résultat"
11-
//- :pagination-label="(firstRowIndex, endRowIndex, totalRowsNumber) => `${firstRowIndex}-${endRowIndex} sur ${totalRowsNumber} lignes`"
12-
//- selection="multiple" v-model:selected="selected" :selected-rows-label="(numberOfRows) => `${numberOfRows} identitées sélectionnées`"
13-
//- )
14-
//- template(#top-left)
15-
//- sesame-table-top-left(:selected="selected" @updateLifestep="updateLifestep($event)" @clear="selected = []")
16-
//- template(#top-right)
17-
//- sesame-table-top-right(:columns="columns" v-model="visibleColumns" @refresh="refresh")
18-
//- template(#body-cell-actions="props")
19-
//- sesame-table-actions(:identity="props.row" @updateLifestep="updateLifestep($event)")
20-
//- template(#body-cell-states="props")
21-
//- sesame-table-state-col(:identity="props.row")
22-
//- template(#body-cell-inetOrgPerson.cn="props")
23-
//- td
24-
//- span {{ props.row.inetOrgPerson.cn }} {{ props.row.inetOrgPerson.givenName }}
255

266
sesame-2pan(
277
ref="twopan"
@@ -43,8 +23,8 @@ div
4323
template(#right-panel-title-before="props")
4424
q-icon(name="mdi-circle" :color="getStateColor(props.target.state)" :class="`q-mr-xs`")
4525
q-tooltip.text-body2(slot="trigger") {{ getStateName(props.target.state) }}
46-
template(#top-left)
47-
sesame-table-top-left(:selected="selected" @updateLifestep="updateLifestep($event)" @clear="selected = []")
26+
template(#top-left-btn-grp="{selectedValues}")
27+
sesame-table-top-left(:selected="selectedValues" @refresh="refresh" @clear="selected = []")
4828
template(#body-cell-states="props")
4929
sesame-table-state-col(:identity="props.row")
5030
template(#right-panel-actions-content-after="{target}")

‎src/stores/identityState.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ export const useIdentityStateStore = defineStore('identityStates', {
1212
[IdentityState.SYNCED]: 0,
1313
}),
1414
getters: {
15+
getStateValue: (state) => (key: IdentityState) => state[key],
1516
getTotalCount: state => state.total,
1617
getToCompleteCount: state => state[IdentityState.TO_COMPLETE],
1718
getToValidateCount: state => state[IdentityState.TO_VALIDATE],

0 commit comments

Comments
 (0)