refactor case assign component

frontend/src/components/incidentManagement/cases/CaseAssignUser.vue

@@ -13,22 +13,22 @@
 </template>
 
 <script setup lang="ts">
-import { computed, onBeforeMount, ref, toRefs, watch } from "vue"
+import { computed, inject, onBeforeMount, ref, toRefs, watch, type Ref } from "vue"
 import { useMessage, NPopselect } from "naive-ui"
 import Api from "@/api"
 import type { Case } from "@/types/incidentManagement/cases.d"
 
 const props = defineProps<{
 	caseData: Case
-	users?: string[]
 }>()
-const { caseData, users } = toRefs(props)
+const { caseData } = toRefs(props)
 
 const emit = defineEmits<{
 	(e: "updated", value: Case): void
 }>()
 
 const loadingUsers = ref(false)
+const users = inject<Ref<string[]>>("assignable-users", ref([]))
 const message = useMessage()
 const usersListVisible = ref(false)
 const assignedTo = computed(() => caseData.value.assigned_to)
@@ -87,14 +87,11 @@ function parseUsers(users: string[]) {
 	usersOptions.value = users.map(o => ({ label: o, value: o }))
 }
 
-watch(
-	() => users?.value,
-	val => {
-		if (val !== undefined && val.length) {
-			parseUsers(val)
-		}
+watch(users, val => {
+	if (val !== undefined && val.length) {
+		parseUsers(val)
 	}
-)
+})
 
 watch(userSelected, () => {
 	assignUser()
@@ -111,7 +108,7 @@ onBeforeMount(() => {
 		userSelected.value = assignedTo.value
 	}
 
-	if (users?.value?.length) {
+	if (users.value.length) {
 		parseUsers(users.value)
 	}
 })

frontend/src/components/incidentManagement/cases/CaseDetails.vue

@@ -4,30 +4,24 @@
 			type="line"
 			animated
 			:tabs-padding="24"
-			v-if="incidentCase"
+			v-if="caseEntity"
 			class="grow"
 			pane-wrapper-class="flex flex-col grow"
 		>
 			<n-tab-pane name="Overview" tab="Overview" display-directive="show:lazy" class="flex flex-col grow">
 				<div class="pt-1">
-					<CaseOverview
-						:caseData="incidentCase"
-						:availableUsers
-						@updated="updateCase($event)"
-						@deleted="emit('deleted')"
-					/>
+					<CaseOverview :caseData="caseEntity" @updated="updateCase($event)" @deleted="emit('deleted')" />
 				</div>
 			</n-tab-pane>
 			<n-tab-pane name="Alerts" tab="Alerts" display-directive="show:lazy">
 				<div class="p-7 pt-4 flex flex-col gap-2">
 					<AlertItem
-						v-for="alert of incidentCase.alerts"
+						v-for="alert of caseEntity.alerts"
 						:key="alert.id"
 						:alertData="alert"
-						:availableUsers
 						embedded
-						@deleted="getCase(incidentCase.id)"
-						@updated="getCase(incidentCase.id)"
+						@deleted="getCase(caseEntity.id)"
+						@updated="getCase(caseEntity.id)"
 					/>
 				</div>
 			</n-tab-pane>
@@ -47,9 +41,8 @@ import type { Case } from "@/types/incidentManagement/cases.d"
 const props = defineProps<{
 	caseData?: Case
 	caseId?: number
-	availableUsers?: string[]
 }>()
-const { caseData, caseId, availableUsers } = toRefs(props)
+const { caseData, caseId } = toRefs(props)
 
 const emit = defineEmits<{
 	(e: "deleted"): void
@@ -58,10 +51,10 @@ const emit = defineEmits<{
 
 const message = useMessage()
 const loading = ref(false)
-const incidentCase = ref<Case | null>(null)
+const caseEntity = ref<Case | null>(null)
 
 function updateCase(updatedCase: Case) {
-	incidentCase.value = updatedCase
+	caseEntity.value = updatedCase
 	emit("updated", updatedCase)
 }
 
@@ -72,7 +65,7 @@ function getCase(caseId: number) {
 		.getCase(caseId)
 		.then(res => {
 			if (res.data.success) {
-				incidentCase.value = res.data?.cases?.[0] || null
+				caseEntity.value = res.data?.cases?.[0] || null
 			} else {
 				message.warning(res.data?.message || "An error occurred. Please try again later.")
 			}
@@ -89,7 +82,7 @@ onBeforeMount(() => {
 	if (caseId.value) {
 		getCase(caseId.value)
 	} else if (caseData.value) {
-		incidentCase.value = _clone(caseData.value)
+		caseEntity.value = _clone(caseData.value)
 	}
 })
 </script>

frontend/src/components/incidentManagement/cases/CaseItem.vue

@@ -1,27 +1,27 @@
 <template>
-	<div class="case-item" :class="'status-' + incidentCase?.case_status">
+	<div class="case-item" :class="'status-' + caseEntity?.case_status">
 		<n-spin :show="loading">
-			<div class="flex flex-col" v-if="incidentCase">
+			<div class="flex flex-col" v-if="caseEntity">
 				<div class="header-box px-5 py-3 pb-0 flex justify-between items-center">
 					<div class="id flex items-center gap-2 cursor-pointer" @click="openDetails()">
-						<span>#{{ incidentCase.id }}</span>
+						<span>#{{ caseEntity.id }}</span>
 						<Icon :name="InfoIcon" :size="16"></Icon>
 					</div>
-					<div class="time" v-if="incidentCase.case_creation_time">
-						{{ formatDate(incidentCase.case_creation_time, dFormats.datetime) }}
+					<div class="time" v-if="caseEntity.case_creation_time">
+						{{ formatDate(caseEntity.case_creation_time, dFormats.datetime) }}
 					</div>
 				</div>
 
 				<div class="main-box flex flex-col gap-3 px-5 py-3">
 					<div class="content flex flex-col gap-1 grow">
 						<div class="title">
-							{{ incidentCase.case_name }}
+							{{ caseEntity.case_name }}
 						</div>
 					</div>
 
 					<div class="badges-box flex flex-wrap items-center gap-3">
 						<CaseStatusSwitch
-							:caseData="incidentCase"
+							:caseData="caseEntity"
 							v-slot="{ loading: loadingStatus }"
 							@updated="updateCase($event)"
 						>
@@ -30,11 +30,11 @@
 								class="cursor-pointer"
 								bright
 								:color="
-									incidentCase.case_status === 'OPEN'
+									caseEntity.case_status === 'OPEN'
 										? 'danger'
-										: incidentCase.case_status === 'IN_PROGRESS'
+										: caseEntity.case_status === 'IN_PROGRESS'
 											? 'warning'
-											: incidentCase.case_status === 'CLOSED'
+											: caseEntity.case_status === 'CLOSED'
 												? 'success'
 												: undefined
 								"
@@ -45,44 +45,43 @@
 										:show="loadingStatus"
 										content-class="flex flex-col justify-center"
 									>
-										<StatusIcon :status="incidentCase.case_status" />
+										<StatusIcon :status="caseEntity.case_status" />
 									</n-spin>
 								</template>
 								<template #label>Status</template>
 								<template #value>
 									<div class="flex gap-2 items-center">
-										{{ incidentCase.case_status || "n/d" }}
+										{{ caseEntity.case_status || "n/d" }}
 										<Icon :name="EditIcon" :size="13" />
 									</div>
 								</template>
 							</Badge>
 						</CaseStatusSwitch>
 
 						<CaseAssignUser
-							:caseData="incidentCase"
-							:users="availableUsers"
+							:caseData="caseEntity"
 							v-slot="{ loading: loadingAssignee }"
 							@updated="updateCase($event)"
 						>
 							<Badge
 								type="splitted"
 								class="cursor-pointer"
 								bright
-								:color="incidentCase.assigned_to ? 'success' : undefined"
+								:color="caseEntity.assigned_to ? 'success' : undefined"
 							>
 								<template #iconLeft>
 									<n-spin
 										:size="12"
 										:show="loadingAssignee"
 										content-class="flex flex-col justify-center"
 									>
-										<AssigneeIcon :assignee="incidentCase.assigned_to" />
+										<AssigneeIcon :assignee="caseEntity.assigned_to" />
 									</n-spin>
 								</template>
 								<template #label>Assignee</template>
 								<template #value>
 									<div class="flex gap-2 items-center">
-										{{ incidentCase.assigned_to || "n/d" }}
+										{{ caseEntity.assigned_to || "n/d" }}
 										<Icon :name="EditIcon" :size="13" />
 									</div>
 								</template>
@@ -96,23 +95,22 @@
 						<n-collapse-item name="alerts-list">
 							<template #header>
 								Alerts
-								<code class="ml-2">{{ incidentCase.alerts.length }}</code>
+								<code class="ml-2">{{ caseEntity.alerts.length }}</code>
 							</template>
 							<template #header-extra>
 								<div class="actions-box">
 									<n-button quaternary size="tiny" @click="handleDelete()">Delete Case</n-button>
 								</div>
 							</template>
 							<div>
-								<template v-if="incidentCase.alerts.length">
+								<template v-if="caseEntity.alerts.length">
 									<AlertItem
-										v-for="alert of incidentCase.alerts"
+										v-for="alert of caseEntity.alerts"
 										:key="alert.id"
 										:alertData="alert"
-										:availableUsers
 										compact
-										@deleted="getCase(incidentCase.id)"
-										@updated="getCase(incidentCase.id)"
+										@deleted="getCase(caseEntity.id)"
+										@updated="getCase(caseEntity.id)"
 									/>
 								</template>
 								<template v-else>
@@ -143,9 +141,8 @@
 				role="modal"
 			>
 				<CaseDetails
-					v-if="incidentCase"
-					:caseData="incidentCase"
-					:availableUsers
+					v-if="caseEntity"
+					:caseData="caseEntity"
 					@deleted="emitDelete()"
 					@updated="updateCase($event)"
 				/>
@@ -173,8 +170,8 @@ import _truncate from "lodash/truncate"
 import type { Case } from "@/types/incidentManagement/cases.d"
 import { useSettingsStore } from "@/stores/settings"
 
-const props = defineProps<{ caseData?: Case; caseId?: number; availableUsers?: string[]; detailsOnMounted?: boolean }>()
-const { caseData, caseId, availableUsers, detailsOnMounted } = toRefs(props)
+const props = defineProps<{ caseData?: Case; caseId?: number; detailsOnMounted?: boolean }>()
+const { caseData, caseId, detailsOnMounted } = toRefs(props)
 
 const emit = defineEmits<{
 	(e: "deleted"): void
@@ -189,11 +186,11 @@ const message = useMessage()
 const dFormats = useSettingsStore().dateFormat
 const loading = ref(false)
 const showDetails = ref(false)
-const incidentCase = ref<Case | null>(null)
-const caseNameTruncated = computed(() => _truncate(incidentCase.value?.case_name, { length: 50 }))
+const caseEntity = ref<Case | null>(null)
+const caseNameTruncated = computed(() => _truncate(caseEntity.value?.case_name, { length: 50 }))
 
 function updateCase(updatedCase: Case) {
-	incidentCase.value = updatedCase
+	caseEntity.value = updatedCase
 	emit("updated", updatedCase)
 }
 
@@ -204,7 +201,7 @@ function getCase(caseId: number) {
 		.getCase(caseId)
 		.then(res => {
 			if (res.data.success) {
-				incidentCase.value = res.data?.cases?.[0] || null
+				caseEntity.value = res.data?.cases?.[0] || null
 			} else {
 				message.warning(res.data?.message || "An error occurred. Please try again later.")
 			}
@@ -218,9 +215,9 @@ function getCase(caseId: number) {
 }
 
 function handleDelete() {
-	if (incidentCase.value) {
+	if (caseEntity.value) {
 		handleDeleteCase({
-			caseData: incidentCase.value,
+			caseData: caseEntity.value,
 			cbBefore: () => {
 				loading.value = true
 			},
@@ -253,7 +250,7 @@ onBeforeMount(() => {
 	if (caseId.value) {
 		getCase(caseId.value)
 	} else if (caseData.value) {
-		incidentCase.value = _clone(caseData.value)
+		caseEntity.value = _clone(caseData.value)
 	}
 })
 

frontend/src/components/incidentManagement/cases/CaseOverview.vue

@@ -61,7 +61,6 @@
 							<div class="flex">
 								<CaseAssignUser
 									:caseData
-									:users="availableUsers"
 									v-slot="{ loading: loadingAssignee }"
 									@updated="updateCase($event)"
 								>
@@ -131,8 +130,8 @@ import { formatDate } from "@/utils"
 import { useSettingsStore } from "@/stores/settings"
 import type { Case } from "@/types/incidentManagement/cases.d"
 
-const props = defineProps<{ caseData: Case; availableUsers?: string[] }>()
-const { caseData, availableUsers } = toRefs(props)
+const props = defineProps<{ caseData: Case }>()
+const { caseData } = toRefs(props)
 
 const emit = defineEmits<{
 	(e: "deleted"): void

frontend/src/components/incidentManagement/cases/CasesList.vue

@@ -133,7 +133,6 @@
 						v-for="item of itemsPaginated"
 						:key="item.id"
 						:caseData="item"
-						:availableUsers
 						:detailsOnMounted="highlight === item.id.toString()"
 						class="item-appear item-appear-bottom item-appear-005"
 						@deleted="getData()"
@@ -158,7 +157,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onBeforeMount, computed, watch, toRefs } from "vue"
+import { ref, onBeforeMount, computed, watch, toRefs, provide } from "vue"
 import {
 	useMessage,
 	NSpin,
@@ -264,6 +263,8 @@ watch(
 	}
 )
 
+provide("assignable-users", availableUsers)
+
 function resetFilters() {
 	filters.value.type = undefined
 	showFilters.value = false