feat: add create functionality for healthcare professional

ConwayDecker · NabbeunNabi · commit d8b19e612836 · 2025-03-10T23:16:04.000+09:00
The values necessary within the store were added along with the api call to be used later.
The ModEditHealthcareProfessionalSection was refactored to be a generic component for creating or editing.
diff --git a/components/ModCreateHealthcareProfessionalSection.vue b/components/ModCreateHealthcareProfessionalSection.vue
diff --git a/components/ModDashboardHealthProfessionalCard.vue b/components/ModDashboardHealthProfessionalCard.vue
@@ -1,7 +1,7 @@
 <template>
     <div
         :class="[
-            'border-2 border-primary rounded-lg px-2 w-fit',
+            'mod-dashboard-healthcare-professional-card border-2 border-primary rounded-lg px-2 w-fit',
             (isEditable && chosenLocaleIndex === 0) ? 'border-t-0 mt-0 rounded-t-none' : 'my-3',
         ]"
     >
@@ -115,7 +115,8 @@
                     />
                 </div>
                 <div
-                    v-if="moderationScreenStore.editHealthcareProfessionalScreenIsActive()"
+                    v-if="moderationScreenStore.editHealthcareProfessionalScreenIsActive()
+                        || moderationScreenStore.createHealthcareProfessionalScreenIsActive()"
                     class="flex w-8 items-center justify-center
                 cursor-pointer font-bold text-secondary text-sm self-start p-1"
                 >
diff --git a/components/ModDashboardTopbar.vue b/components/ModDashboardTopbar.vue
@@ -5,12 +5,21 @@
         >
             {{ updateTextForModerationDashboard(moderationSubmissionsStore.selectedModerationListViewChosen) }}
         </h1>
-        <div class="dashboard-search flex flex-col mt-4">
+        <div class="dashboard-search flex items-center mt-4">
+            <NuxtLink
+                v-if="moderationSubmissionsStore.selectedModerationListViewChosen
+                    === SelectedModerationListView.HealthcareProfessionals"
+                :to="`/moderation/create-healthcare-professional`"
+                class="flex justify-center items-center rounded-full bg-secondary-bg border-primary p-1 border-2 w-40
+                font-semibold text-sm mr-2 overflow-hidden text-center hover:bg-currentColor"
+            >
+                {{ $t('modDashboardTopbar.addHealthcareProfessional') }}
+            </NuxtLink>
             <div class="justify-start items-start flex">
                 <input
                     type="text"
                     :placeholder="$t('modDashboardTopbar.placeholderText')"
-                    class="mb-5 px-3 py-3.5 w-96 h-12 bg-secondary-bg rounded-lg border border-primary-text-muted
+                    class=" px-3 py-3.5 w-96 h-12 bg-secondary-bg rounded-lg border border-primary-text-muted
                     text-primary-text text-sm font-normal font-sans placeholder-primary-text-muted"
                 >
                 <SVGLookingGlass
diff --git a/components/ModEditHealthcareProfessionalSection.vue b/components/ModEditHealthcareProfessionalSection.vue
@@ -107,7 +107,8 @@
                     </div>
                 </Transition>
                 <div
-                    v-if="healthcareProfessionalsStore.healthcareProfessionalSectionFields.names"
+                    v-if="moderationScreenStore.editHealthcareProfessionalScreenIsActive()
+                        && healthcareProfessionalsStore.healthcareProfessionalSectionFields.names"
                     class="flex flex-col"
                 >
                     <div
@@ -124,6 +125,25 @@
                         />
                     </div>
                 </div>
+                <div
+                    v-if="moderationScreenStore.createHealthcareProfessionalScreenIsActive()
+                        && healthcareProfessionalsStore.createHealthcareProfessionalInput.names"
+                    class="flex flex-col"
+                >
+                    <div
+                        v-for="(nameLocale, index) in healthcareProfessionalsStore.createHealthcareProfessionalInput.names"
+                        :key="`${nameLocale.firstName}-${nameLocale.lastName}-${index}`"
+                        @click="() => setChosenLocaleNameInput(index)"
+                    >
+                        <ModDashboardHealthProfessionalCard
+                            :healthcare-professional="{} as HealthcareProfessional"
+                            :healthcare-professional-name-by-locale="nameLocale"
+                            :chosen-locale-index="index"
+                            :is-editable="editingLocaleName"
+                            :set-is-editable-function="setEditingLocaleName"
+                        />
+                    </div>
+                </div>
                 <button
                     type="button"
                     data-testid="mod-healthcare-add-name-button"
@@ -265,7 +285,14 @@ import ModSearchbar from './ModSearchBar.vue'
 import { useHealthcareProfessionalsStore } from '~/stores/healthcareProfessionalsStore'
 import { useFacilitiesStore } from '~/stores/facilitiesStore'
 import { useLocaleStore } from '~/stores/localeStore'
-import { Insurance, Locale, Degree, Specialty, type LocalizedNameInput, type Facility } from '~/typedefs/gqlTypes'
+import { useModerationScreenStore } from '~/stores/moderationScreenStore'
+import { Insurance,
+    Locale,
+    Degree,
+    Specialty,
+    type LocalizedNameInput,
+    type Facility,
+    type HealthcareProfessional } from '~/typedefs/gqlTypes'
 import { useI18n } from '#imports'
 
 let toast: ToastInterface
@@ -277,6 +304,7 @@ const { t } = useI18n()
 const loadingStore = useLoadingStore()
 loadingStore.setIsLoading(true)
 
+const moderationScreenStore = useModerationScreenStore()
 const localesStore = useLocaleStore()
 const healthcareProfessionalsStore = useHealthcareProfessionalsStore()
 const facilitiesStore = useFacilitiesStore()
@@ -361,19 +389,35 @@ const setChosenLocaleNameInput = (index: number) => {
 
     //This will keep track of the healthcare professional to not lose it but we can swap it later with the chosen one
     const tempToHoldZeroIndexedHealthcareProfessionalToSwap
-    = healthcareProfessionalsStore.healthcareProfessionalSectionFields.names[0]
+    = moderationScreenStore.editHealthcareProfessionalScreenIsActive()
+        ? healthcareProfessionalsStore.healthcareProfessionalSectionFields.names[0]
+        : healthcareProfessionalsStore.createHealthcareProfessionalInput.names[0]
 
     //This finds the chosen healthcare professional to edit
     chosenHealthcareProfessionalToEdit.value
-    = healthcareProfessionalsStore.healthcareProfessionalSectionFields.names.find((_, index) => index === chosenLocaleIndex.value)
+    = moderationScreenStore.editHealthcareProfessionalScreenIsActive()
+            ? healthcareProfessionalsStore.healthcareProfessionalSectionFields
+                .names.find((_, index) => index === chosenLocaleIndex.value)
+            : healthcareProfessionalsStore.createHealthcareProfessionalInput
+                .names.find((_, index) => index === chosenLocaleIndex.value)
 
     if (chosenHealthcareProfessionalToEdit.value) {
         //Set the chosen healthcare professional name to move it closer to the input
-        healthcareProfessionalsStore.healthcareProfessionalSectionFields.names[0]
+        if (moderationScreenStore.editHealthcareProfessionalScreenIsActive()) {
+            healthcareProfessionalsStore.healthcareProfessionalSectionFields.names[0]
     = chosenHealthcareProfessionalToEdit.value
-        // Put the temp one in the index where the old locale name was
-        healthcareProfessionalsStore.healthcareProfessionalSectionFields.names[chosenLocaleIndex.value]
-        = tempToHoldZeroIndexedHealthcareProfessionalToSwap
+            // Put the temp one in the index where the old locale name was
+            healthcareProfessionalsStore.healthcareProfessionalSectionFields.names[chosenLocaleIndex.value]
+    = tempToHoldZeroIndexedHealthcareProfessionalToSwap
+        }
+
+        if (moderationScreenStore.createHealthcareProfessionalScreenIsActive()) {
+            healthcareProfessionalsStore.createHealthcareProfessionalInput.names[0]
+        = chosenHealthcareProfessionalToEdit.value
+            // Put the temp one in the index where the old locale name was
+            healthcareProfessionalsStore.createHealthcareProfessionalInput.names[chosenLocaleIndex.value]
+    = tempToHoldZeroIndexedHealthcareProfessionalToSwap
+        }
         //Autofill with the chosen healthcare professional locale name]
         autofillNameLocaleInputWithChosenHealthcareProfessional(chosenHealthcareProfessionalToEdit.value)
         // Set the chosenLocaleIndex to 0 so the correct pencil is showing
@@ -426,13 +470,21 @@ const handleUpdateExistingName = () => {
 }
 
 const handleDeleteExistingName = () => {
-    if (healthcareProfessionalsStore.healthcareProfessionalSectionFields.names.length <= 1) {
+    if (healthcareProfessionalsStore.healthcareProfessionalSectionFields.names.length <= 1
+      && moderationScreenStore.editHealthcareProfessionalScreenIsActive()
+    ) {
         toast.error(t('modHealthcareProfessionalSection.oneNameNecessary'))
         return
     }
-    // Remove the first element safely since we reordered the one for deletion at 0
-    healthcareProfessionalsStore.healthcareProfessionalSectionFields.names.shift()
 
+    // Remove the first element safely since we reordered the one for deletion at 0
+    if (moderationScreenStore.editHealthcareProfessionalScreenIsActive()) {
+        healthcareProfessionalsStore.healthcareProfessionalSectionFields.names.shift()
+    }
+    // Remove the first element safely since we reordered the one for deletion at 0
+    if (moderationScreenStore.createHealthcareProfessionalScreenIsActive()) {
+        healthcareProfessionalsStore.createHealthcareProfessionalInput.names.shift()
+    }
     setEditingLocaleName(false)
 
     // Allows for the inputs to completely transition before resetting the fields
@@ -451,8 +503,7 @@ const handleAddLocalizedName = () => {
         middleName: nameLocaleInputs.middleName
     }
     // Checks to keep user from adding a name with same locale instead of editing
-    const existingNameForLocale = healthcareProfessionalsStore.healthcareProfessionalSectionFields.names
-        .find(name => name.locale === nameLocaleInputs.locale)
+    const existingNameForLocale = checkIfHealthcareProfessionalHasAnExistingNameForLocale()
 
     // Displays message if user is trying to add a locale for name that exists and they aren't editing a healthcare professional
     if (existingNameForLocale) {
@@ -478,18 +529,40 @@ const handleAddLocalizedName = () => {
         return
     }
 
-    if (nameLocaleInputs.firstName
-      && nameLocaleInputs.lastName
-      && nameLocaleInputs.firstName.length
-      && nameLocaleInputs.lastName.length
-      && healthcareProfessionalsStore.healthcareProfessionalSectionFields.names) {
+    const checkValidityOfNameInputs
+        = nameLocaleInputs.firstName
+          && nameLocaleInputs.lastName
+          && nameLocaleInputs.firstName.length
+          && nameLocaleInputs.lastName.length
+
+    if (checkValidityOfNameInputs
+      && healthcareProfessionalsStore.healthcareProfessionalSectionFields.names
+      && moderationScreenStore.editHealthcareProfessionalScreenIsActive()) {
         healthcareProfessionalsStore.healthcareProfessionalSectionFields.names.push(localizedNameToAdd)
     }
 
+    if (checkValidityOfNameInputs
+      && healthcareProfessionalsStore.createHealthcareProfessionalInput.names
+      && moderationScreenStore.createHealthcareProfessionalScreenIsActive()) {
+        healthcareProfessionalsStore.createHealthcareProfessionalInput.names.push(localizedNameToAdd)
+    }
+
     // Sets the chosen healthcare professional to undefined to reset
     handleCloseAddingNewLocalizedName()
 }
 
+function checkIfHealthcareProfessionalHasAnExistingNameForLocale() {
+    if (moderationScreenStore.editHealthcareProfessionalScreenIsActive()) {
+        return healthcareProfessionalsStore.healthcareProfessionalSectionFields.names
+            .find(name => name.locale === nameLocaleInputs.locale)
+    }
+
+    if (moderationScreenStore.createHealthcareProfessionalScreenIsActive()) {
+        return healthcareProfessionalsStore.createHealthcareProfessionalInput.names
+            .find(name => name.locale === nameLocaleInputs.locale)
+    }
+}
+
 const handleFacilitySearchInputChange = (filteredItems: Ref<Facility[]>, inputValue: string) => {
     filteredItems.value = currentFacilities.filter(({ nameEn, nameJa, id }) => {
         const isMatch
diff --git a/components/ModMainContent.vue b/components/ModMainContent.vue
@@ -27,6 +27,16 @@
                 <ModEditHealthcareProfessionalSection />
             </form>
         </div>
+        <div
+            v-if="moderationScreenStore.createHealthcareProfessionalScreenIsActive()"
+            class="h-full overflow-hidden"
+        >
+            <form
+                class="p-4 h-full overflow-y-auto"
+            >
+                <ModCreateHealthcareProfessionalSection />
+            </form>
+        </div>
     </div>
 </template>
 
@@ -66,6 +76,11 @@ const setActiveScreenBasedOnRoute = async () => {
         healthcareProfessionalStore.selectedHealthcareProfessionalId = selectedIdFromModSubmissionList.value
         return
     }
+    if (
+        routePathForModerationScreen.value.includes('create-healthcare-professional')) {
+        moderationScreenStore.setActiveScreen(ModerationScreen.CreateHealthcareProfessional)
+        return
+    }
 
     // This will default the screen based on the route to the dashboard if all the other stuff fails
     moderationScreenStore.setActiveScreen(ModerationScreen.Dashboard)
@@ -75,6 +90,7 @@ const setActiveScreenBasedOnRoute = async () => {
 }
 
 watch(selectedIdFromModSubmissionList, setActiveScreenBasedOnRoute)
+watch(routePathForModerationScreen, setActiveScreenBasedOnRoute)
 
 onMounted(() => {
     setActiveScreenBasedOnRoute()
diff --git a/i18n/locales/en.json b/i18n/locales/en.json
@@ -144,6 +144,7 @@
         "healthcareProfessionalMedicalInfo": "Healthcare Professional Medical Info"
     },
     "modDashboardTopbar": {
+        "addHealthcareProfessional": "Add Healthcare Professional",
         "placeholderText": "Enter name or ID to search",
         "approved": "Approved",
         "rejected": "Rejected",
diff --git a/pages/moderation/create-healthcare-professional/index.vue b/pages/moderation/create-healthcare-professional/index.vue
@@ -0,0 +1,3 @@
+<template>
+    <NuxtPage />
+</template>
diff --git a/stores/healthcareProfessionalsStore.ts b/stores/healthcareProfessionalsStore.ts
@@ -2,13 +2,17 @@ import type { Maybe } from 'graphql/jsutils/Maybe'
 import { defineStore } from 'pinia'
 import { reactive, ref, type Ref } from 'vue'
 import { gql } from 'graphql-request'
-import { type Facility, type DeleteResult, type HealthcareProfessional,
+import { type Insurance,
+    type Degree,
+    type Specialty,
+    type Locale, type Facility, type DeleteResult, type HealthcareProfessional,
     type LocalizedNameInput,
     type Mutation,
     type MutationDeleteHealthcareProfessionalArgs,
     type MutationUpdateHealthcareProfessionalArgs,
     type Relationship,
-    RelationshipAction } from '~/typedefs/gqlTypes'
+    RelationshipAction,
+    type CreateHealthcareProfessionalInput } from '~/typedefs/gqlTypes'
 import { gqlClient, graphQLClientRequestWithRetry } from '~/utils/graphql'
 import { useLocaleStore } from '~/stores/localeStore'
 import type { ServerError, ServerResponse } from '~/typedefs/serverResponse'
@@ -33,6 +37,16 @@ export const useHealthcareProfessionalsStore = defineStore(
             spokenLanguages: [],
             updatedDate: ''
         })
+
+        const createHealthcareProfessionalInput: CreateHealthcareProfessionalInput = reactive({
+            acceptedInsurance: [] as Insurance[],
+            degrees: [] as Degree[],
+            facilityIds: [] as string[],
+            names: [] as LocalizedNameInput[],
+            specialties: [] as Specialty[],
+            spokenLanguages: [] as Locale[]
+        })
+
         const selectedFacilities: Ref<Facility[]> = ref([])
         // This is the array to be sent to the backend if there is a change in the relations
         const facilitiesRelationsToSelectedHealthcareProfessional: Ref<Relationship[]> = ref([])
@@ -150,6 +164,23 @@ export const useHealthcareProfessionalsStore = defineStore(
             return
         }
 
+        async function createHealthcareProfessional():
+        Promise<ServerResponse<Maybe<HealthcareProfessional>>> {
+            const serverResponse = { data: {} as Maybe<HealthcareProfessional>, errors: [] as ServerError[], hasErrors: false }
+
+            const response = await graphQLClientRequestWithRetry<Mutation>(
+                gqlClient.request.bind(gqlClient),
+                createHealthcareProfessionalGqMutation,
+                createHealthcareProfessionalInput
+            )
+
+            serverResponse.data = response.data?.createHealthcareProfessional
+            serverResponse.errors = response.errors ? response.errors : []
+            serverResponse.hasErrors = response.hasErrors
+
+            return serverResponse
+        }
+
         async function deleteHealthcareProfessional(healthcareProfessionalId: MutationDeleteHealthcareProfessionalArgs):
         Promise<ServerResponse<Maybe<DeleteResult>>> {
             const serverResponse = { data: {} as Maybe<DeleteResult>, errors: [] as ServerError[], hasErrors: false }
@@ -167,7 +198,9 @@ export const useHealthcareProfessionalsStore = defineStore(
             return serverResponse
         }
 
-        const displayChosenLocaleForHealthcareProfessional = (healthcareProfessional: HealthcareProfessional) => {
+        const displayChosenLocaleForHealthcareProfessional = (
+            healthcareProfessional: HealthcareProfessional | CreateHealthcareProfessionalInput
+        ) => {
             // find the name of the healthcare professional from the chosen display locale
             const nameFromChosenLocaleDisplay = healthcareProfessional.names.find(name => name.locale === localeStore.locale.code)
             // return the name of the healthcare professional of chosen locale or default to the 0 indexed recorded name
@@ -185,7 +218,9 @@ export const useHealthcareProfessionalsStore = defineStore(
             setSelectedHealthcareProfessional,
             removedHealthcareProfessionalNames,
             facilitiesRelationsToSelectedHealthcareProfessional,
-            selectedFacilities
+            selectedFacilities,
+            createHealthcareProfessional,
+            createHealthcareProfessionalInput
         }
     }
 )
@@ -287,3 +322,24 @@ mutation Mutation($id: ID!) {
   }
 }
 `
+
+const createHealthcareProfessionalGqMutation = gql`
+mutation Mutation($input: CreateHealthcareProfessionalInput!) {
+  createHealthcareProfessional(input: $input) {
+    id
+    names {
+      firstName
+      middleName
+      lastName
+      locale
+    }
+    spokenLanguages
+    degrees
+    specialties
+    acceptedInsurance
+    facilityIds
+    createdDate
+    updatedDate
+  }
+}
+`
diff --git a/stores/moderationScreenStore.ts b/stores/moderationScreenStore.ts

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+<template>`
	`2`	`+ <NuxtPage />`
	`3`	`+</template>`