Skip to content

Commit 8d43019

Browse files
tacxoutacxou
committed
Enhance lifecycle and state icon handling with dynamic color styling in state column and identities page
1 parent 79bf4d9 commit 8d43019

File tree

3 files changed

+69
-56
lines changed

3 files changed

+69
-56
lines changed

‎src/components/table/state-col.vue‎

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
<template lang="pug">
22
q-td
3-
q-icon(:name="stateInfo.icon" :color="stateInfo.color" :class="`q-mr-md`")
3+
q-icon(:name="stateInfo.icon" :color="stateInfo.color" :style='{color: stateInfo.color.startsWith("#") ? stateInfo.color : "inherit"}' :class="`q-mr-md`")
44
q-tooltip.text-body2(slot="trigger") Etat : {{ stateInfo.name }}
5-
q-icon(:name="initStateInfo.icon" :color="initStateInfo.color" :class="`q-mr-md`")
6-
q-tooltip.text-body2(slot="trigger") Etat : {{ initStateInfo.name }}
7-
q-icon(:name="lifecycleInfo.icon" :color="lifecycleInfo.color" :class="`q-mr-md`")
5+
q-icon(:name="initStateInfo.icon" :color="initStateInfo.color" :style='{color: initStateInfo.color.startsWith("#") ? initStateInfo.color : "inherit"}' :class="`q-mr-md`")
6+
q-tooltip.text-body2(slot="trigger") Initialisation du compte : {{ initStateInfo.name }}
7+
q-icon(:name="lifecycleInfo.icon" :color="lifecycleInfo.color" :style='{color: lifecycleInfo.color.startsWith("#") ? lifecycleInfo.color : "inherit"}' :class="`q-mr-md`")
88
q-tooltip.text-body2(slot="trigger") Cycle de vie : {{ lifecycleInfo.name }}
99
</template>
1010

@@ -13,7 +13,7 @@ import { inject, computed } from 'vue'
1313
import { ref } from 'vue'
1414
import type { components } from '#build/types/service-api'
1515
import type { PropType } from 'vue'
16-
import { useIdentityStates, useIdentityLifecycles,useIdentityInitStates } from '~/composables'
16+
import { useIdentityStates, useIdentityLifecycles, useIdentityInitStates } from '~/composables'
1717
const { getStateColor, getStateName, getStateInfos } = useIdentityStates()
1818
const { getInitStateColor, getInitStateName, getInitStateInfos } = useIdentityInitStates()
1919
const { getLifecycleColor, getLifecycleName, getLifecycleInfos } = useIdentityLifecycles()
@@ -38,5 +38,4 @@ const lifecycleInfo = computed(() => {
3838
const lifecycle = props.identity.lifecycle
3939
return getLifecycleInfos(lifecycle)
4040
})
41-
4241
</script>

‎src/composables/useIdentityLifecycle.ts‎

Lines changed: 57 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -1,65 +1,76 @@
11

22
type useIdentityLifecycleReturnType = {
3-
getLifecycleColor: (state: number) => string;
4-
getLifecycleName: (state: number) => string;
5-
getLifecycleIcon: (state: number) => string;
6-
getLifecycleInfos: (state: number) => { color: string, name: string, value: number };
3+
getLifecycleColor: (state: string) => string;
4+
getLifecycleName: (state: string) => string;
5+
getLifecycleIcon: (state: string) => string;
6+
getLifecycleInfos: (state: string) => { color: string, name: string, value: string, icon: string };
77
};
88

99

1010
export enum IdentityLifecycle {
11-
IMPORTED = 3,
12-
OFFICIAL = 2,
13-
ACTIVE = 1,
14-
PROVISIONAL = 0,
15-
INACTIVE = -1,
16-
DELETED = -2,
11+
WAIT = "W",
12+
OFFICIAL = "O",
13+
ACTIVE = "A",
14+
PROVISIONAL = "P",
15+
INACTIVE = "I",
16+
DELETED = "D",
17+
18+
// IMPORTED = 3,
19+
// OFFICIAL = 2,
20+
// ACTIVE = 1,
21+
// PROVISIONAL = 0,
22+
// INACTIVE = -1,
23+
// DELETED = -2,
1724
}
1825

1926

2027
export const IdentityLifecycleList = [
21-
{ value: IdentityLifecycle.IMPORTED, text: 'Importé', color: '#F0E68C', icon: 'mdi-circle', display: true }, // Khaki
22-
{ value: IdentityLifecycle.OFFICIAL, text: 'Officiel', color: '#228B22', icon: 'mdi-circle', display: true }, // Forest Green
23-
{ value: IdentityLifecycle.ACTIVE, text: 'Actif', color: '#00FF00', icon: 'mdi-circle', display: true }, // Lime
24-
{ value: IdentityLifecycle.PROVISIONAL, text: 'Provisoir', color: '#FFD700', icon: 'mdi-circle', display: true }, // Gold
25-
{ value: IdentityLifecycle.INACTIVE, text: 'Inactif', color: '#808080', icon: 'mdi-circle', display: true }, // Gray
26-
{ value: IdentityLifecycle.DELETED, text: 'Supprimé', color: '#FF0000', icon: 'mdi-circle', display: true }, // Red
28+
// { value: IdentityLifecycle.IMPORTED, text: 'Importé', color: '#F0E68C', icon: 'mdi-clock', display: true }, // Khaki
29+
{ value: IdentityLifecycle.OFFICIAL, text: 'Officiel', color: '#228B22', icon: 'mdi-clock', display: true }, // Forest Green
30+
{
31+
value: IdentityLifecycle.ACTIVE, text: 'Actif', color: '#00FF00', icon: 'mdi-clock-check', display: true
32+
}, // Lime
33+
{ value: IdentityLifecycle.PROVISIONAL, text: 'Provisoir', color: '#FFD700', icon: 'mdi-progress-clock', display: true }, // Gold
34+
{ value: IdentityLifecycle.INACTIVE, text: 'Inactif', color: '#808080', icon: 'mdi-clock-alert', display: true }, // Gray
35+
{
36+
value: IdentityLifecycle.DELETED, text: 'Supprimé', color: '#FF0000', icon: 'mdi-archive-clock', display: true
37+
}, // Red
2738
];
2839

2940
export function useIdentityLifecycles(): useIdentityLifecycleReturnType {
30-
function getLifecycleName(state: number): string {
31-
const found = IdentityLifecycleList.find(item => item.value === state);
32-
if (found && found?.display) return found.text;
33-
return 'Inconnu';
34-
}
41+
function getLifecycleName(state: string): string {
42+
const found = IdentityLifecycleList.find(item => item.value === state);
43+
if (found && found?.display) return found.text;
44+
return 'Inconnu';
45+
}
3546

36-
function getLifecycleColor(state: number): string {
37-
const found = IdentityLifecycleList.find(item => item.value === state);
38-
if (found && found?.display) return found.color;
39-
return 'grey';
40-
}
47+
function getLifecycleColor(state: string): string {
48+
const found = IdentityLifecycleList.find(item => item.value === state);
49+
if (found && found?.display) return found.color;
50+
return 'grey';
51+
}
4152

42-
function getLifecycleIcon(state: number): string {
43-
const found = IdentityLifecycleList.find(item => item.value === state);
44-
if (found && found?.display) return found.icon;
45-
return 'mdi-circle';
46-
}
53+
function getLifecycleIcon(state: string): string {
54+
const found = IdentityLifecycleList.find(item => item.value === state);
55+
if (found && found?.display) return found.icon;
56+
return 'mdi-circle';
57+
}
4758

48-
function getLifecycleInfos(state: number): { color: string, name: string, icon: string, value: number }{
49-
const found = IdentityLifecycleList.find(item => item.value === state);
50-
if (found && found?.display) return {
51-
color: found.color,
52-
name: found.text,
53-
icon: found.icon,
54-
value: state
55-
};
56-
return {
57-
color: 'grey',
58-
name: 'Inconnu',
59-
icon: 'mdi-circle',
60-
value: state
61-
};
62-
}
59+
function getLifecycleInfos(state: string): { color: string, name: string, icon: string, value: string } {
60+
const found = IdentityLifecycleList.find(item => item.value === state);
61+
if (found && found?.display) return {
62+
color: found.color,
63+
name: found.text,
64+
icon: found.icon,
65+
value: state,
66+
};
67+
return {
68+
color: 'grey',
69+
name: 'Inconnu',
70+
icon: 'mdi-help-rhombus-outline',
71+
value: state,
72+
};
73+
}
6374

6475

6576
return { getLifecycleName, getLifecycleColor, getLifecycleIcon, getLifecycleInfos };

‎src/pages/identities/index.vue‎

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -22,10 +22,12 @@ q-page.container
2222
:defaultRightPanelButton="false"
2323
)
2424
template(#right-panel-title-before="props")
25-
q-icon(name="mdi-circle" :color="getStateColor(props?.target?.state)" class="q-mr-xs")
26-
q-tooltip.text-body2(slot="trigger") {{ getStateName(props.target.state) }}
27-
q-icon(:name="getInitStateIcon(props?.target?.initState)" :color="getInitStateColor(props?.target?.initState)" class="q-mr-xs")
28-
q-tooltip.text-body2(slot="trigger") {{ getInitStateName(props.target.initState) }}
25+
q-icon(name="mdi-circle" :color="getStateColor(props?.target?.state)" :style='{color: getStateColor(props?.target?.state).startsWith("#") ? getStateColor(props?.target?.state) : "inherit"}' class="q-mr-xs")
26+
q-tooltip.text-body2(slot="trigger") Initialisation du compte : {{ getStateName(props.target.state) }}
27+
q-icon(:name="getInitStateIcon(props?.target?.initState)" :color="getInitStateColor(props?.target?.initState)" :style='{color: getInitStateColor(props?.target?.initState).startsWith("#") ? getInitStateColor(props?.target?.initState) : "inherit"}' class="q-mr-xs")
28+
q-tooltip.text-body2(slot="trigger") Initialisation du compte : {{ getInitStateName(props.target.initState) }}
29+
q-icon(:name="getLifecycleIcon(props?.target?.lifecycle)" :color="getLifecycleColor(props?.target?.lifecycle)" :style='{color: getLifecycleColor(props?.target?.lifecycle).startsWith("#") ? getLifecycleColor(props?.target?.lifecycle) : "inherit"}' class="q-mr-xs")
30+
q-tooltip.text-body2(slot="trigger") Cycle de vie : {{ getLifecycleName(props.target.lifecycle) }}
2931
template(#top-left-btn-grp="{selectedValues}")
3032
sesame-table-top-left( :selected="selectedValues" @refresh="refresh" @clear="clearSelected" :total="identities?.total")
3133
template(#body-cell-states="props")
@@ -84,6 +86,7 @@ const { handleError } = useErrorHandling()
8486
const form = ref<any>(null)
8587
const { getStateColor, getStateName } = useIdentityStates()
8688
const { getInitStateColor, getInitStateName, getInitStateIcon } = useIdentityInitStates()
89+
const { getLifecycleColor, getLifecycleIcon, getLifecycleName } = useIdentityLifecycles()
8790
8891
onMounted(() => {
8992
initializePagination(identities.value?.total)

0 commit comments

Comments
 (0)