Skip to content

Commit ef92b6f

Browse files
tacxoutacxou
committed
feat: Update layout components for improved styling and structure in identity forms and JSON form renderer
1 parent 5665957 commit ef92b6f

File tree

4 files changed

+127
-129
lines changed

4 files changed

+127
-129
lines changed

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ q-splitter(
44
separator-style="width: 8px"
55
background-color="primary"
66
class="full-height"
7-
:limits="!isSimple ? [30,70] : [0,100]"
7+
:limits="!isSimple ? [30,60] : [0,100]"
88
:horizontal='isSimple'
99
:style='{ "padding": isSimple ? "6px 0" : "0" }'
1010
)
@@ -74,15 +74,14 @@ q-splitter(
7474
p Selectionnez une entrée pour afficher son contenu...
7575
slot(name="right-panel-empty-content-after")
7676
div.full-height.q-pa-none.flex.justify-start(v-else style='flex-flow: column; overflow-y: auto;')
77-
q-toolbar.q-py-none(style='height: 50px;')
77+
q-toolbar.q-py-none
7878
q-btn(color="primary" icon="mdi-chevron-left" @click="cancel" tooltip="Retour" dense)
7979
q-tooltip.text-body2 Retour
8080
q-separator.q-mx-sm(vertical)
8181
slot(name="right-panel-title" :target="target")
8282
slot(name="right-panel-title-before" :target="target")
8383
q-toolbar-title(v-html=`isNew ? defaultTitle : getTitle` style='flex: 100 1 0%')
8484
slot(name="right-panel-title-after" :target="target")
85-
q-space
8685
slot(name="right-panel-actions")
8786
slot(name="right-panel-actions-content-before" :target="target")
8887
slot(name="right-panel-actions-content" v-if="defaultRightPanelButton" :target="target" :isNew="isNew" :crud="crud")
@@ -93,6 +92,7 @@ q-splitter(
9392
q-btn(color="negative" icon='mdi-delete' @click="remove(target)" v-show="!isNew" v-if="crud.delete")
9493
q-tooltip.text-body2 Supprimer
9594
slot(name="right-panel-actions-content-after" :target="target" :isNew="isNew" :crud="crud")
95+
q-separator
9696
q-card-section.q-pa-none.fit.flex(style='flex-flow: column; overflow: hidden;')
9797
slot(name="right-panel-content" :payload="{ target }" :isNew="isNew")
9898
slot(name="right-panel-content-before")

‎apps/web/src/components/identityForm/actions.vue‎

Lines changed: 93 additions & 94 deletions
Original file line numberDiff line numberDiff line change
@@ -1,101 +1,100 @@
11
<template lang="pug">
2-
div.flex
3-
div
4-
q-btn.sesame.infinite.animated.flash(color="negative" @click="validationsModal = true" v-if="!isNew && hasValidations()" outline)
5-
q-tooltip.text-body2(slot="trigger") Afficher les erreurs
6-
q-icon.text-negative(name='mdi-alert-box')
7-
q-dialog(v-model="validationsModal")
8-
q-card(style="min-width: 350px")
9-
q-card-section.q-pa-sm.bg-negative.text-white.flex
10-
q-icon(name='mdi-alert-box' size="2rem")
11-
div.text-h6.q-ml-md Erreurs de validation
12-
q-card-section.q-py-sm
13-
q-list(separator)
14-
q-item(v-for="field in Object.keys(validations)" :key="field")
15-
q-item-section.text-negative
16-
q-item-label {{ field }}
17-
q-item-label(v-for='f in validations[field]' caption) - {{ f }}
18-
q-card-actions(align="right")
19-
q-btn(flat label="Fermer" color="primary" v-close-popup)
20-
q-btn(color="positive" icon='mdi-content-save-plus' @click="create" v-show="isNew" v-if="crud.create")
21-
q-tooltip.text-body2 Créer
22-
q-toggle.q-px-md.q-gutter-y-lg(
23-
v-if="props.identity?._id"
24-
checked-icon="mdi-account-check"
25-
unchecked-icon="mdi-account-cancel"
26-
indeterminate-icon="mdi-lock-reset"
27-
keep-color
28-
size="xl"
29-
@click="activate"
30-
:color="setActivateColor()"
31-
label="Activation"
32-
v-model="props.identity.dataStatus"
33-
:true-value="1"
34-
:indeterminate-value="-2"
35-
:false-value="-3"
36-
)
37-
q-btn-group(v-if="props.identity?._id" push flat)
38-
q-btn(@click="forceChangePassword()" color="orange-8" icon="mdi-lock-reset" :disabled="props.identity.state != IdentityState.SYNCED" padding='5px 10px' dense)
39-
q-tooltip.text-body2(slot="trigger") Obliger l'utilisateur à changer son mot de passe
40-
q-btn(@click="resetPasswordModal = true" color="red-8" icon="mdi-account-key" :disabled="props.identity.state != IdentityState.SYNCED" padding='5px 10px' dense)
41-
q-tooltip.text-body2(slot="trigger") Définir le mot de passe
42-
q-btn(@click="sendInit" color="primary" icon="mdi-email-arrow-right" :disabled="props.identity.state != IdentityState.SYNCED" padding='5px 10px' dense)
43-
q-tooltip.text-body2(slot="trigger") Envoyer le mail d'invitation
44-
45-
q-separator(size='3px' vertical)
46-
47-
q-btn(@click="submit" color="positive" icon="mdi-check" v-show="!isNew" v-if="crud.update")
48-
q-tooltip.text-body2(slot="trigger") Enregistrer les modifications
49-
q-btn(v-if="props.identity?._id" @click="sync" color="orange-8" :disabled="props.identity.state != IdentityState.TO_VALIDATE" icon="mdi-sync")
50-
q-tooltip.text-body2(slot="trigger" v-if="props.identity.state == IdentityState.TO_VALIDATE") Synchroniser l'identité
51-
q-tooltip.text-body2(slot="trigger" v-else) L'état de l'identité ne permet pas de la synchroniser
52-
53-
q-separator(v-if="props.identity?._id" size='3px' vertical)
54-
55-
div(ref='targetEl' style='display: height: 36px;')
56-
q-tooltip.text-body2(:target="targetEl" anchor="top middle" self="bottom middle") État du cycle de vie : {{ stateName }}
57-
q-btn-dropdown.q-pl-sm.full-height(icon='mdi-clock' color='purple-8' square unelevated dense)
58-
q-list
59-
q-item(
60-
v-for='stateItem in stateList' :key='stateItem.key'
61-
@click="switchLifecycle(stateItem.key)"
62-
:active='stateItem.key === props.identity.lifecycle'
63-
active-class="bg-purple-8 text-white"
64-
clickable v-close-popup
65-
)
66-
q-item-section(avatar)
67-
q-icon(:name="stateItem.icon || 'mdi-help-rhombus-outline'" :color="stateItem.color")
68-
q-item-section
69-
q-item-label
70-
span(v-text='stateItem.label')
71-
| &nbsp;
72-
small(v-text='("(" + stateItem.key + ")")')
73-
q-separator(size='3px' vertical)
74-
75-
q-btn-dropdown.text-white(v-if="props.identity?._id" dropdown-icon="mdi-dots-vertical" style='background-color: rgba(0, 0, 0, .6)' padding='5px 10px' dense no-caps)
2+
div
3+
q-btn.sesame.infinite.animated.flash(color="negative" @click="validationsModal = true" v-if="!isNew && hasValidations()" outline)
4+
q-tooltip.text-body2(slot="trigger") Afficher les erreurs
5+
q-icon.text-negative(name='mdi-alert-box')
6+
q-dialog(v-model="validationsModal")
7+
q-card(style="min-width: 350px")
8+
q-card-section.q-pa-sm.bg-negative.text-white.flex
9+
q-icon(name='mdi-alert-box' size="2rem")
10+
div.text-h6.q-ml-md Erreurs de validation
11+
q-card-section.q-py-sm
12+
q-list(separator)
13+
q-item(v-for="field in Object.keys(validations)" :key="field")
14+
q-item-section.text-negative
15+
q-item-label {{ field }}
16+
q-item-label(v-for='f in validations[field]' caption) - {{ f }}
17+
q-card-actions(align="right")
18+
q-btn(flat label="Fermer" color="primary" v-close-popup)
19+
q-btn(color="positive" icon='mdi-content-save-plus' @click="create" v-show="isNew" v-if="crud.create")
20+
q-tooltip.text-body2 Créer
21+
q-toggle.q-px-md.q-gutter-y-lg.gt-sm(
22+
v-if="props.identity?._id"
23+
checked-icon="mdi-account-check"
24+
unchecked-icon="mdi-account-cancel"
25+
indeterminate-icon="mdi-lock-reset"
26+
keep-color
27+
szize="xl"
28+
@click="activate"
29+
:color="setActivateColor()"
30+
label="Activation"
31+
v-model="props.identity.dataStatus"
32+
:true-value="1"
33+
:indeterminate-value="-2"
34+
:false-value="-3"
35+
)
36+
q-btn-group(v-if="props.identity?._id" push flat)
37+
q-btn(@click="forceChangePassword()" color="orange-8" icon="mdi-lock-reset" :disabled="props.identity.state != IdentityState.SYNCED" padding='5px 10px' dense)
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" padding='5px 10px' dense)
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" padding='5px 10px' dense)
42+
q-tooltip.text-body2(slot="trigger") Envoyer le mail d'invitation
43+
44+
q-separator(size='3px' vertical)
45+
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
51+
52+
q-separator(v-if="props.identity?._id" size='3px' vertical)
53+
54+
div(ref='targetEl' style='display: height: 36px;')
55+
q-tooltip.text-body2(:target="targetEl" anchor="top middle" self="bottom middle") État du cycle de vie : {{ stateName }}
56+
q-btn-dropdown.q-pl-sm.full-height(icon='mdi-clock' color='purple-8' square unelevated dense)
7657
q-list
77-
a(:href="'/jobs?filters[:concernedTo.id]=' + props.identity?._id" target="_blank" style='text-decoration: none; color: inherit' @click.prevent="dialogLog = true")
78-
q-item(v-if="props.identity?._id" clickable v-close-popup)
79-
q-item-section(avatar)
80-
q-icon(name="mdi-file-document" color="grey-6")
81-
q-item-section
82-
q-item-label Voir les logs
83-
q-item-section(side)
84-
q-btn(icon="mdi-open-in-new" size='sm' flat dense @click.stop="open('/jobs?filters[:concernedTo.id]=' + props.identity?._id)")
85-
a(:href="'/lifecycles/' + props.identity?._id" target="_blank" style='text-decoration: none; color: inherit' @click.prevent="dialogLifecycle = true")
86-
q-item(v-if="props.identity?._id" clickable v-close-popup)
87-
q-item-section(avatar)
88-
q-icon(name="mdi-clock" color="purple-8")
89-
q-item-section
90-
q-item-label Voir le cycle de vie
91-
q-item-section(side)
92-
q-btn(icon="mdi-open-in-new" size='sm' flat dense @click.stop="open('/lifecycles/' + props.identity?._id)")
93-
q-separator(size='3px')
94-
q-item(v-if="props.identity?._id" clickable v-close-popup @click="deleteIdentity")
58+
q-item(
59+
v-for='stateItem in stateList' :key='stateItem.key'
60+
@click="switchLifecycle(stateItem.key)"
61+
:active='stateItem.key === props.identity.lifecycle'
62+
active-class="bg-purple-8 text-white"
63+
clickable v-close-popup
64+
)
65+
q-item-section(avatar)
66+
q-icon(:name="stateItem.icon || 'mdi-help-rhombus-outline'" :color="stateItem.color")
67+
q-item-section
68+
q-item-label
69+
span(v-text='stateItem.label')
70+
| &nbsp;
71+
small(v-text='("(" + stateItem.key + ")")')
72+
q-separator(size='3px' vertical)
73+
74+
q-btn-dropdown.text-white(v-if="props.identity?._id" dropdown-icon="mdi-dots-vertical" style='background-color: rgba(0, 0, 0, .6)' padding='5px 10px' dense no-caps)
75+
q-list
76+
a(:href="'/jobs?filters[:concernedTo.id]=' + props.identity?._id" target="_blank" style='text-decoration: none; color: inherit' @click.prevent="dialogLog = true")
77+
q-item(v-if="props.identity?._id" clickable v-close-popup)
78+
q-item-section(avatar)
79+
q-icon(name="mdi-file-document" color="grey-6")
80+
q-item-section
81+
q-item-label Voir les logs
82+
q-item-section(side)
83+
q-btn(icon="mdi-open-in-new" size='sm' flat dense @click.stop="open('/jobs?filters[:concernedTo.id]=' + props.identity?._id)")
84+
a(:href="'/lifecycles/' + props.identity?._id" target="_blank" style='text-decoration: none; color: inherit' @click.prevent="dialogLifecycle = true")
85+
q-item(v-if="props.identity?._id" clickable v-close-popup)
9586
q-item-section(avatar)
96-
q-icon(name="mdi-delete" color="negative")
87+
q-icon(name="mdi-clock" color="purple-8")
9788
q-item-section
98-
q-item-label Supprimer l'identité
89+
q-item-label Voir le cycle de vie
90+
q-item-section(side)
91+
q-btn(icon="mdi-open-in-new" size='sm' flat dense @click.stop="open('/lifecycles/' + props.identity?._id)")
92+
q-separator(size='3px')
93+
q-item(v-if="props.identity?._id" clickable v-close-popup @click="deleteIdentity")
94+
q-item-section(avatar)
95+
q-icon(name="mdi-delete" color="negative")
96+
q-item-section
97+
q-item-label Supprimer l'identité
9998

10099
q-dialog(v-model="dialogLog" full-height full-width persistent)
101100
q-card

‎apps/web/src/components/identityForm/index.vue‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
div
33
//- pre(v-html="JSON.stringify(identity, null, 2)")
44
q-tabs(v-model="tab" align="justify" outside-arrows mobile-arrows inline-label dense)
5-
q-tab(name="inetOrgPerson" label="inetOrgPerson" :alert="getTabValidations('inetOrgPerson')" alert-icon="mdi-alert" :class="`q-mr-xs`")
5+
q-tab.q-pt-sm(name="inetOrgPerson" label="inetOrgPerson" :alert="getTabValidations('inetOrgPerson')" alert-icon="mdi-alert" :class="`q-mr-xs`")
66
q-tab.q-pr-none(v-for="tab in tabs" :key="tab" :name="tab" :alert="getTabValidations(tab)" alert-icon="mdi-alert" :class="`q-mr-xs`")
77
div.flex.row.full-height.items-center(style='flex-wrap: nowrap;')
88
.q-tab__label(v-text='tab')
@@ -14,15 +14,15 @@ div
1414
q-item-section
1515
q-item-label(v-text="schema.name")
1616
q-tab-panels(v-model="tab" keep-alive)
17-
q-tab-panel(name="inetOrgPerson")
17+
q-tab-panel.q-pa-none(name="inetOrgPerson")
1818
sesame-json-form-renderer-api(
1919
v-if='identity.inetOrgPerson'
2020
schemaName="inetOrgPerson"
2121
v-model:data="identity.inetOrgPerson"
2222
v-model:validations="validations"
2323
:isNew="isNew"
2424
)
25-
q-tab-panel(v-for="t in tabs" :key="t" :name="t")
25+
q-tab-panel.q-pa-none(v-for="t in tabs" :key="t" :name="t")
2626
//- pre(v-html="JSON.stringify(identity.additionalFields.attributes[t], null, 2)")
2727
sesame-json-form-renderer-api(
2828
v-if='identity.additionalFields.attributes[t]'

‎apps/web/src/components/quasar-jsonform/layouts/QGroupLayoutRenderer.vue‎

Lines changed: 28 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,43 +1,42 @@
11
<template lang="pug">
22
q-card(v-if="layout.visible" :class="classes" :flat="bare" :bordered="!bare")
3-
q-card-section(v-if="layout.label").text-h6
3+
q-card-section(v-if="layout.label").text-h6.q-pb-none
44
| {{ layout.label }}
55
q-card-section(v-for="(element, index) in layout.uischema.elements" :key="`${layout.path}-${index}`")
66
dispatch-renderer(:schema="layout.schema" :uischema="element" :path="layout.path" :enabled="layout.enabled" :renderers="layout.renderers" :cells="layout.cells")
77
</template>
88

99
<script lang="ts">
10-
import { defineComponent } from 'vue';
11-
import { DispatchRenderer, rendererProps, useJsonFormsLayout } from '@jsonforms/vue';
12-
import type { RendererProps, Layout } from '@jsonforms/core';
13-
import { rankWith, and, isLayout, uiTypeIs } from '@jsonforms/core';
10+
import { defineComponent } from 'vue'
11+
import { DispatchRenderer, rendererProps, useJsonFormsLayout } from '@jsonforms/vue'
12+
import type { RendererProps, Layout } from '@jsonforms/core'
13+
import { rankWith, and, isLayout, uiTypeIs } from '@jsonforms/core'
1414
1515
const QGroupLayoutRenderer = defineComponent({
16-
name: 'q-group-layout-renderer',
17-
components: {
18-
DispatchRenderer,
16+
name: 'q-group-layout-renderer',
17+
components: {
18+
DispatchRenderer,
19+
},
20+
props: {
21+
...rendererProps<Layout>(),
22+
},
23+
setup(props: RendererProps<Layout>) {
24+
// Adapt or replace useVuetifyLayout with a Quasar-specific utility if necessary
25+
const { styles, layout } = useJsonFormsLayout(props) // Adjust according to Quasar use cases
26+
return { styles, layout }
27+
},
28+
computed: {
29+
// Update or adjust these computed properties as necessary for Quasar styling
30+
bare(): boolean {
31+
return !!this.layout.appliedOptions?.bare
1932
},
20-
props: {
21-
...rendererProps<Layout>(),
33+
classes(): string {
34+
// Adjust class bindings as necessary to align with Quasar conventions
35+
const classes = ['q-pa-none']
36+
return classes.join(' ')
2237
},
23-
setup(props: RendererProps<Layout>) {
24-
// Adapt or replace useVuetifyLayout with a Quasar-specific utility if necessary
25-
const { styles, layout } = useJsonFormsLayout(props); // Adjust according to Quasar use cases
26-
return { styles, layout };
27-
},
28-
computed: {
29-
// Update or adjust these computed properties as necessary for Quasar styling
30-
bare(): boolean {
31-
return !!this.layout.appliedOptions?.bare;
32-
},
33-
classes(): string {
34-
// Adjust class bindings as necessary to align with Quasar conventions
35-
const classes = ['q-pa-none'];
36-
return classes.join(' ');
37-
},
38-
},
39-
});
40-
41-
export default QGroupLayoutRenderer;
38+
},
39+
})
4240
41+
export default QGroupLayoutRenderer
4342
</script>

0 commit comments

Comments
 (0)