feat: implement delete facility functionality to moderation panel

assets/css/tailwind.css

@@ -36,6 +36,7 @@
     --color-primary-hover: /* #D66051 */ 214 97 81;
     --color-secondary-inverted: /* #FFFFFF */ 255 255 255;
     --color-secondary-hover: /* #D66051 */ 214 97 81;
+    --color-primary-gray: /* #CBD5E1 */ 203 213 225;
     /* element specific colors */
     --color-text-base: /* #130402 */ 18 4 2;
     --color-text-muted: /* #999999 */ 153 153 153;
@@ -55,6 +56,7 @@
     --color-primary-hover: /* #d66051 */ 214 96 81;
     --color-secondary-inverted: /* #ffffff */ 255 255 255;
     --color-secondary-hover: /* #d66051 */ 214 96 81;
+    --color-primary-gray: /* #CBD5E1 */ 203 213 225;
     /* element specific colors */
     --color-text-base: /* #252525 */ 37 37 37;
     --color-text-muted: /* #999999 */ 153 153 153;
@@ -74,6 +76,7 @@
     --color-primary-hover: /* #c46fb8 */ 196 111 184;
     --color-secondary-inverted: /* #ffffff */ 255 255 255;
     --color-secondary-hover: /* #d66051 */ 214 96 81;
+    --color-primary-gray: /* #CBD5E1 */ 203 213 225;
     /* element specific colors */
     --color-text-base: /* #252525 */ 37 37 37;
     --color-text-muted: /* #464646 */ 70 70 70;
@@ -93,6 +96,7 @@
     --color-primary-hover: /* #007ccf */ 0 124 207;
     --color-secondary-inverted: /* #ffffff */ 255 255 255;
     --color-secondary-hover: /* #d66051 */ 214 96 81;
+    --color-primary-gray: /* #CBD5E1 */ 203 213 225;
     /* element specific colors */
     --color-text-base: /* #252525 */ 37 37 37;
     --color-text-muted: /* #464646 */ 70 70 70;
@@ -112,6 +116,7 @@
     --color-primary-hover: /* #1abb85 */ 26 187 133;
     --color-secondary-inverted: /* #ffffff */ 255 255 255;
     --color-secondary-hover: /* #d66051 */ 214 96 81;
+    --color-primary-gray: /* #CBD5E1 */ 203 213 225;
     /* element specific colors */
     --color-text-base: /* #88eecc */ 136 238 204;
     --color-text-muted: /* #71c5a9 */ 113 197 169;

components/ModDashboardHealthProfessionalCard.vue

@@ -0,0 +1,137 @@
+<template>
+    <div class="w-96 my-1">
+        <div
+            class="flex justify-between items-center rounded-lg p-1 border-2 border-primary"
+        >
+            <div class="w-16 self-start">
+                <SVGProfileIcon
+                    role="img"
+                    alt="profile icon"
+                    title="profile icon"
+                    class="profile-icon stroke-primary w-16 h-16 stroke-1 inline mx-1 self-start"
+                />
+            </div>
+            <div v-if="moderationScreenStore.activeScreen === ModerationScreen.EditFacility">
+                <div class="flex flex-col h-full w-64 pl-1 mb-1">
+                    <div class="flex font-bold pt-2">
+                        <span>{{ healthcareProfessional.names[0].lastName }}</span>
+                        <span class="mx-2">{{ healthcareProfessional.names[0].firstName }}</span>
+                        <span v-show="healthcareProfessional.names[0].middleName">
+                            {{ healthcareProfessional.names[0].middleName }}
+                        </span>
+                    </div>
+                    <span>
+                        ID:  {{ healthcareProfessional.id }}
+                    </span>
+                    <div>
+                        <div
+                            class="flex flex-wrap justify-start items-start self-end pt-2"
+                        >
+                            <div
+                                v-for="(spokenLanguage, indexOfLocale)
+                                    in healthcareProfessional.spokenLanguages"
+                                :key="`${spokenLanguage}-${indexOfLocale}`"
+                                class="w-24 px-2 py-[1px] mr-1 mb-1 bg-primary-bg-gray text-nowrap rounded-full
+                                 text-sm text-center"
+                            >
+                                <span>
+                                    {{ localeStore.formatLanguageCodeToSimpleText(
+                                        spokenLanguage) }}
+                                </span>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div v-if="moderationScreenStore.activeScreen === ModerationScreen.EditSubmission">
+                <div
+                    v-for="(nameLocale, index) in healthcareProfessional.names"
+                    :key="`${nameLocale.firstName}-${nameLocale.lastName}-${index}`"
+                >
+                    <div class="flex font-bold pt-2">
+                        <span>{{ nameLocale.lastName }}</span>
+                        <span class="mx-2">{{ nameLocale.firstName }}</span>
+                        <span v-show="nameLocale.middleName">
+                            {{ nameLocale.middleName }}
+                        </span>
+                    </div>
+                    <span
+                        class="w-24 px-2 py-[1px] mr-1 mb-1 bg-primary-text-muted text-nowrap rounded-full
+                    text-sm text-center"
+                    >
+                        {{ localeStore.formatLanguageCodeToSimpleText(
+                            nameLocale.locale) }}
+                    </span>
+                </div>
+            </div>
+            <div
+                v-if="!isHealthcareProfessionalReadyForRemoval(healthcareProfessional.id)"
+                class="flex w-8 items-center justify-center
+                    cursor-pointer font-bold text-secondary text-sm self-start p-1"
+                @click="() => removeHealthcareProfessional(healthcareProfessional.id)"
+            >
+                <SVGTrashCan
+                    class="flex items-center justify-center w-6 h-6"
+                />
+            </div>
+            <div
+                v-if="isHealthcareProfessionalReadyForRemoval(healthcareProfessional.id)"
+                class="flex w-8 items-center justify-center
+                    cursor-pointer font-bold text-secondary text-sm self-start p-1"
+                @click="() => undoRemovalOfHealthcareProfessional(healthcareProfessional.id)"
+            >
+                <SVGUndoIcon
+                    class="flex items-center justify-center w-6 h-6"
+                />
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import SVGTrashCan from '~/assets/icons/trash-can.svg'
+import SVGProfileIcon from '~/assets/icons/profile-icon.svg'
+import SVGUndoIcon from '~/assets/icons/undo-icon.svg'
+import { useLocaleStore } from '~/stores/localeStore'
+import { useFacilitiesStore } from '~/stores/facilitiesStore'
+import { ModerationScreen, useModerationScreenStore } from '~/stores/moderationScreenStore'
+import { RelationshipAction, type HealthcareProfessional, type Relationship } from '~/typedefs/gqlTypes'
+
+const localeStore = useLocaleStore()
+const facilitiesStore = useFacilitiesStore()
+const moderationScreenStore = useModerationScreenStore()
+
+// This checks whether an existing healthcare professional has been added for removal
+const isHealthcareProfessionalReadyForRemoval = (id: string) =>
+    facilitiesStore.facilitySectionFields.healthProfessionalsRelations
+        .find(healthcareProfessionalRelation => healthcareProfessionalRelation.otherEntityId === id
+        && healthcareProfessionalRelation.action === RelationshipAction.Delete)
+
+const removeHealthcareProfessional = (id: string) => {
+    switch (moderationScreenStore.activeScreen) {
+        case ModerationScreen.EditFacility:
+            if (props.healthcareProfessionalsRelatedToFacility && props.healthcareProfessionalsRelatedToFacility.includes(id)) {
+                facilitiesStore.facilitySectionFields.healthProfessionalsRelations
+                    .push({ otherEntityId: id, action: RelationshipAction.Delete })
+                return
+            }
+            facilitiesStore.facilitySectionFields.healthProfessionalsRelations
+            = facilitiesStore.facilitySectionFields.healthProfessionalsRelations
+                    .filter((healthcareProfessionalRelation: Relationship) => healthcareProfessionalRelation.otherEntityId !== id)
+            facilitiesStore.healthProfessionalsRelationsForDisplay
+            = facilitiesStore.healthProfessionalsRelationsForDisplay
+                    .filter(healthcareProfessional => healthcareProfessional.id !== id)
+    }
+}
+
+const undoRemovalOfHealthcareProfessional = (id: string) => {
+    facilitiesStore.facilitySectionFields.healthProfessionalsRelations
+        = facilitiesStore.facilitySectionFields.healthProfessionalsRelations
+            .filter((healthcareProfessionalRelation: Relationship) => healthcareProfessionalRelation.otherEntityId !== id)
+}
+
+const props = defineProps<{
+    healthcareProfessional: HealthcareProfessional
+    healthcareProfessionalsRelatedToFacility?: string[]
+}>()
+</script>