Skip to content

Commit 0e4b46a

Browse files
tacxoutacxou
committed
feat: refactor identity actions layout and enhance button group functionality
1 parent 18b18b8 commit 0e4b46a

File tree

1 file changed

+83
-51
lines changed

1 file changed

+83
-51
lines changed

‎src/components/identityForm/actions.vue‎

Lines changed: 83 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -33,61 +33,85 @@ div.flex
3333
:indeterminate-value="-2"
3434
:false-value="-3"
3535
)
36-
q-btn.q-mx-xs( @click="forceChangePassword()" color="orange-8" icon="mdi-lock-reset" :disabled="props.identity.state != IdentityState.SYNCED")
37-
q-tooltip.text-body2(slot="trigger") Obliger l'utilisateur à changer son mot de passe
38-
q-btn.q-mx-xs(@click="resetPasswordModal = true" color="red-8" icon="mdi-account-key" :disabled="props.identity.state != IdentityState.SYNCED")
39-
q-tooltip.text-body2(slot="trigger") Définir le mot de passe
40-
q-btn.q-mx-xs(@click="sendInit" color="primary" icon="mdi-email-arrow-right" :disabled="props.identity.state != IdentityState.SYNCED")
41-
q-tooltip.text-body2(slot="trigger") Envoyer le mail d'invitation
42-
q-btn.q-mx-xs(@click="submit" color="positive" icon="mdi-check" v-show="!isNew" v-if="crud.update")
43-
q-tooltip.text-body2(slot="trigger") Enregistrer les modifications
44-
q-btn.q-mx-xs(v-if="props.identity?._id" @click="sync" color="orange-8" :disabled="props.identity.state != IdentityState.TO_VALIDATE" icon="mdi-sync")
45-
q-tooltip.text-body2(slot="trigger" v-if="props.identity.state == IdentityState.TO_VALIDATE") Synchroniser l'identité
46-
q-tooltip.text-body2(slot="trigger" v-else) L'état de l'identité ne permet pas de la synchroniser
36+
q-btn-group(push)
37+
q-btn( @click="forceChangePassword()" color="orange-8" icon="mdi-lock-reset" :disabled="props.identity.state != IdentityState.SYNCED")
38+
q-tooltip.text-body2(slot="trigger") Obliger l'utilisateur à changer son mot de passe
39+
q-btn(@click="resetPasswordModal = true" color="red-8" icon="mdi-account-key" :disabled="props.identity.state != IdentityState.SYNCED")
40+
q-tooltip.text-body2(slot="trigger") Définir le mot de passe
41+
q-btn(@click="sendInit" color="primary" icon="mdi-email-arrow-right" :disabled="props.identity.state != IdentityState.SYNCED")
42+
q-tooltip.text-body2(slot="trigger") Envoyer le mail d'invitation
4743

48-
q-btn.q-mx-xs(v-if="props.identity?._id" @click.prevent="dialogLog = true" color="grey-8" icon="mdi-file-document" :href="'/jobs?filters[:concernedTo.id]=' + props.identity?._id" target="_blank")
49-
q-tooltip.text-body2(slot="trigger") Voir les logs de l'identité
50-
q-dialog(v-model="dialogLog" full-height full-width persistent)
51-
q-card
52-
q-toolbar.absolute.bg-purple.text-white(dense)
53-
q-toolbar-title Journaux de l'identité {{ props.identity?.inetOrgPerson?.cn }}
54-
q-btn(icon="mdi-close" @click="dialogLog = false" dense flat)
55-
object.absolute.full-width(
56-
type="text/html"
57-
:data="'/jobs?filters[:concernedTo.id]=' + props.identity?._id + '&embedded=1'"
58-
style="height: calc(100% - 56px); margin-top: 50px; z-index: 1;"
59-
)
60-
.fit.items-center.column.justify-center
61-
q-circular-progress(indeterminate size='80px')
62-
span.q-mt-md Chargement en cours ...
44+
q-separator(size='3px' vertical)
6345

64-
q-btn.q-mx-xs(v-if="props.identity?._id" @click.prevent="dialogLifecycle = true" color="purple-8" icon="mdi-clock" :href="'/lifecycles/' + props.identity?._id" target="_blank")
65-
q-tooltip.text-body2(slot="trigger") Voir le cycle de vie de l'identité
66-
q-dialog(v-model="dialogLifecycle" full-height full-width persistent)
67-
q-card
68-
q-toolbar.absolute.bg-purple.text-white(dense)
69-
q-toolbar-title Cycle de vie de l'identité {{ props.identity?.inetOrgPerson?.cn }}
70-
q-btn(icon="mdi-close" @click="dialogLifecycle = false" dense flat)
71-
object.absolute.full-width(
72-
type="text/html"
73-
:data="'/lifecycles/' + props.identity?._id + '?embedded=1'"
74-
style="height: calc(100% - 56px); margin-top: 50px; z-index: 1;"
75-
)
76-
.fit.items-center.column.justify-center
77-
q-circular-progress(indeterminate size='80px')
78-
span.q-mt-md Chargement en cours ...
46+
q-btn(@click="submit" color="positive" icon="mdi-check" v-show="!isNew" v-if="crud.update")
47+
q-tooltip.text-body2(slot="trigger") Enregistrer les modifications
48+
q-btn(v-if="props.identity?._id" @click="sync" color="orange-8" :disabled="props.identity.state != IdentityState.TO_VALIDATE" icon="mdi-sync")
49+
q-tooltip.text-body2(slot="trigger" v-if="props.identity.state == IdentityState.TO_VALIDATE") Synchroniser l'identité
50+
q-tooltip.text-body2(slot="trigger" v-else) L'état de l'identité ne permet pas de la synchroniser
7951

80-
q-btn.q-mx-xs(v-if="props.identity?._id" @click="deleteIdentity" color="negative" icon="mdi-delete")
81-
q-tooltip.text-body2(slot="trigger") Supprimer l'identité
82-
q-dialog(v-model="resetPasswordModal" persistent medium)
83-
q-card(style="width:800px")
84-
q-card-section(class="text-h6 bg-primary text-white") definition du mot de passe
85-
q-card-section
86-
input-new-password(v-model="newpassword")
87-
q-card-actions(align="right" class="bg-white text-teal")
88-
q-btn( label="Abandonner" color="negative" @click="resetPasswordModal = false" )
89-
q-btn( label="Sauver" color="positive" @click="doChangePassword" :disabled="newpassword === ''")
52+
q-separator(size='3px' vertical)
9053

54+
q-btn-dropdown.text-white(dropdown-icon="mdi-dots-vertical" style='background-color: rgba(0, 0, 0, .6)' no-caps)
55+
q-list
56+
a(:href="'/jobs?filters[:concernedTo.id]=' + props.identity?._id" target="_blank" style='text-decoration: none; color: inherit' @click.prevent="dialogLog = true")
57+
q-item(v-if="props.identity?._id" clickable v-close-popup)
58+
q-item-section(avatar)
59+
q-icon(name="mdi-file-document" color="grey-6")
60+
q-item-section
61+
q-item-label Voir les logs
62+
q-item-section(side)
63+
q-btn(icon="mdi-open-in-new" size='sm' flat dense @click.stop="open('/jobs?filters[:concernedTo.id]=' + props.identity?._id)")
64+
a(:href="'/lifecycles/' + props.identity?._id" target="_blank" style='text-decoration: none; color: inherit' @click.prevent="dialogLifecycle = true")
65+
q-item(v-if="props.identity?._id" clickable v-close-popup)
66+
q-item-section(avatar)
67+
q-icon(name="mdi-clock" color="purple-8")
68+
q-item-section
69+
q-item-label Voir le cycle de vie
70+
q-item-section(side)
71+
q-btn(icon="mdi-open-in-new" size='sm' flat dense @click.stop="open('/lifecycles/' + props.identity?._id)")
72+
q-separator(size='3px')
73+
q-item(v-if="props.identity?._id" clickable v-close-popup @click="deleteIdentity")
74+
q-item-section(avatar)
75+
q-icon(name="mdi-delete" color="negative")
76+
q-item-section
77+
q-item-label Supprimer l'identité
78+
79+
q-dialog(v-model="dialogLog" full-height full-width persistent)
80+
q-card
81+
q-toolbar.absolute.bg-purple.text-white(dense)
82+
q-toolbar-title Journaux de l'identité {{ props.identity?.inetOrgPerson?.cn }}
83+
q-btn(icon="mdi-close" @click="dialogLog = false" dense flat)
84+
object.absolute.full-width(
85+
type="text/html"
86+
:data="'/jobs?filters[:concernedTo.id]=' + props.identity?._id + '&embedded=1'"
87+
style="height: calc(100% - 56px); margin-top: 50px; z-index: 1;"
88+
)
89+
.fit.items-center.column.justify-center
90+
q-circular-progress(indeterminate size='80px')
91+
span.q-mt-md Chargement en cours ...
92+
93+
q-dialog(v-model="resetPasswordModal" persistent medium)
94+
q-card(style="width:800px")
95+
q-card-section(class="text-h6 bg-primary text-white") definition du mot de passe
96+
q-card-section
97+
input-new-password(v-model="newpassword")
98+
q-card-actions(align="right" class="bg-white text-teal")
99+
q-btn( label="Abandonner" color="negative" @click="resetPasswordModal = false" )
100+
q-btn( label="Sauver" color="positive" @click="doChangePassword" :disabled="newpassword === ''")
101+
102+
q-dialog(v-model="dialogLifecycle" full-height full-width persistent)
103+
q-card
104+
q-toolbar.absolute.bg-purple.text-white(dense)
105+
q-toolbar-title Cycle de vie de l'identité {{ props.identity?.inetOrgPerson?.cn }}
106+
q-btn(icon="mdi-close" @click="dialogLifecycle = false" dense flat)
107+
object.absolute.full-width(
108+
type="text/html"
109+
:data="'/lifecycles/' + props.identity?._id + '?embedded=1'"
110+
style="height: calc(100% - 56px); margin-top: 50px; z-index: 1;"
111+
)
112+
.fit.items-center.column.justify-center
113+
q-circular-progress(indeterminate size='80px')
114+
span.q-mt-md Chargement en cours ...
91115
</template>
92116

93117
<script lang="ts" setup>
@@ -182,6 +206,7 @@ async function create() {
182206
// console.log('submit from actions')
183207
emits('create')
184208
}
209+
185210
function setActivateColor() {
186211
if (props.identity.dataStatus === 1) {
187212
return 'green'
@@ -191,13 +216,15 @@ function setActivateColor() {
191216
return 'grey'
192217
}
193218
}
219+
194220
function showActivate() {
195221
if (props.identity.lastBackendSync != '') {
196222
return true
197223
} else {
198224
return false
199225
}
200226
}
227+
201228
async function forceChangePassword() {
202229
$q.dialog({
203230
title: 'Confirmation',
@@ -234,6 +261,7 @@ async function forceChangePassword() {
234261
}
235262
})
236263
}
264+
237265
async function activate() {
238266
let message = ''
239267
let bouton = ''
@@ -356,4 +384,8 @@ async function sendInit() {
356384
function back() {
357385
router.push('/identities')
358386
}
387+
388+
function open(url: string) {
389+
window.open(url, '_blank')
390+
}
359391
</script>

0 commit comments

Comments
 (0)