refactor: refs #8833 streamline state color handling in Claim components

src/pages/Claim/Card/ClaimDescriptor.vue

@@ -28,14 +28,8 @@ const entityId = computed(() => {
     return $props.id || route.params.id;
 });
 
-const STATE_COLOR = {
+function stateColor(entity) {
-    pending: 'warning',
+    return entity?.claimState?.classColor || 'grey';
-    incomplete: 'info',
-    resolved: 'positive',
-    canceled: 'negative',
-};
-function stateColor(code) {
-    return STATE_COLOR[code];
 }
 
 onMounted(async () => {
@@ -56,11 +50,7 @@ onMounted(async () => {
         <template #body="{ entity }">
             <VnLv v-if="entity.claimState" :label="t('claim.state')">
                 <template #value>
-                    <QBadge
+                    <QBadge :color="stateColor(entity)" text-color="black" dense>
-                        :color="stateColor(entity.claimState.code)"
-                        text-color="black"
-                        dense
-                    >
                         {{ entity.claimState.description }}
                     </QBadge>
                 </template>

src/pages/Claim/Card/ClaimSummary.vue

@@ -108,15 +108,9 @@ const markerLabels = [
     { value: 5, label: t('claim.person') },
 ];
 
-const STATE_COLOR = {
-    pending: 'warning',
-    incomplete: 'info',
-    resolved: 'positive',
-    canceled: 'negative',
-};
-
 function stateColor(code) {
-    return STATE_COLOR[code];
+    const claimState = claimStates.value.find((state) => state.code === code);
+    return claimState?.classColor || 'grey';
 }
 
 const developmentColumns = ref([
@@ -188,7 +182,7 @@ function claimUrl(section) {
 <template>
     <FetchData
         url="ClaimStates"
-        :filter="{ fields: ['id', 'description'] }"
+        :filter="{ fields: ['id', 'description', 'code', 'classColor'] }"
         @on-fetch="(data) => (claimStates = data)"
         auto-load
     />

src/pages/Claim/ClaimList.vue

@@ -101,7 +101,10 @@ const columns = computed(() => [
         name: 'stateCode',
         chip: {
             condition: () => true,
-            color: ({ stateCode }) => STATE_COLOR[stateCode] ?? 'bg-grey',
+            color: ({ stateCode }) => {
+                const state = states.value?.find(({ code }) => code === stateCode);
+                return state ? `bg-${state.classColor}` : 'bg-grey';
+            },
         },
         columnFilter: {
             name: 'claimStateFk',
@@ -131,12 +134,6 @@ const columns = computed(() => [
         ],
     },
 ]);
-
-const STATE_COLOR = {
-    pending: 'bg-warning',
-    loses: 'bg-negative',
-    resolved: 'bg-positive',
-};
 </script>
 
 <template>