From c01a7ec49c1080ddd7a91e03d2e27f740e65f26d Mon Sep 17 00:00:00 2001
From: aydawka <aydan.gasimova2@gmail.com>
Date: Tue, 22 Apr 2025 19:16:27 -0700
Subject: [PATCH 01/11] =?UTF-8?q?feat:=20=E2=9C=A8=20add=20validation=20st?=
 =?UTF-8?q?yle?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/types/Dataset.d.ts                        | 10 +++
 .../study/dataset/publish/new/NewVersion.vue  | 65 ++++++++++++++++++-
 2 files changed, 74 insertions(+), 1 deletion(-)

diff --git a/src/types/Dataset.d.ts b/src/types/Dataset.d.ts
index 3a7f7bf0..dc79e8e7 100644
--- a/src/types/Dataset.d.ts
+++ b/src/types/Dataset.d.ts
@@ -238,6 +238,16 @@ export interface DatasetRelatedIdentifiers {
   related_identifiers: DatasetRelatedIdentifier[];
 }
 
+export interface FieldValidation {
+  name: string;
+  identifier: string;
+}
+
+export interface DatasetMetadataValidation {
+  message: string;
+  metadata: FieldValidation[];
+}
+
 export interface DatasetHealthsheetRecord {
   id: number;
   question: string;
diff --git a/src/views/study/dataset/publish/new/NewVersion.vue b/src/views/study/dataset/publish/new/NewVersion.vue
index 755178f9..7444c302 100644
--- a/src/views/study/dataset/publish/new/NewVersion.vue
+++ b/src/views/study/dataset/publish/new/NewVersion.vue
@@ -2,6 +2,7 @@
 import { faker } from "@faker-js/faker";
 
 import { useSidebarStore } from "@/stores/sidebar";
+import { DatasetMetadataValidation } from "@/types/Dataset";
 import { baseURL } from "@/utils/constants";
 
 const route = useRoute();
@@ -17,6 +18,7 @@ const routeParams = {
 
 const studyId = routeParams.studyId as string;
 const datasetId = routeParams.datasetId as string;
+const responseLoading = ref(false);
 
 const loading = ref(false);
 
@@ -26,6 +28,8 @@ const version = ref({
   title: faker.commerce.productName(),
 });
 
+const moduleData = reactive<DatasetMetadataValidation[]>([]);
+
 const rules: FormRules = {
   title: [
     {
@@ -38,6 +42,31 @@ const rules: FormRules = {
 
 onBeforeMount(async () => {
   sidebarStore.setAppSidebarCollapsed(true);
+  responseLoading.value = true;
+
+  const response = await fetch(
+    `${baseURL}/study/${studyId}/dataset/${datasetId}/metadata-validation`,
+    {
+      method: "GET",
+    }
+  );
+  responseLoading.value = false;
+
+  if (!response.ok) {
+    push.error("Something went wrong.");
+
+    throw new Error("Network response was not ok");
+  }
+
+  const data = await response.json();
+
+  console.log(data);
+
+  moduleData.splice(0, moduleData.length, ...(data ?? []).map((item: any) => ({ ...item })));
+
+  //
+  // aboutList = moduleData.map((item: any) => item.about);
+  // datasetSubjects = moduleData.map((item: any) => item.dataset_subjects);
 });
 
 const createVersion = (e: MouseEvent) => {
@@ -96,7 +125,41 @@ const createVersion = (e: MouseEvent) => {
 
     <n-divider />
 
+    <div class="mr-4 flex flex-col gap-2 pb-4" :key="index" v-for="(item, index) in moduleData">
+      <n-alert :title="item.message" class="w-full" type="error">
+        <!--        {{ item }}-->
+        <!--      <div v-for="(field, index) in item?.metadata" :key="index">{{ field.name }}</div>-->
+
+        <div
+          v-for="(field, index) in item?.metadata"
+          :key="index"
+          class="flex flex-col gap-4 text-sm"
+        >
+          <RouterLink
+            :to="{
+              name: `study:metadata:${field.identifier}`,
+              params: {
+                studyId: routeParams.studyId,
+                datasetId: routeParams.datasetId,
+              },
+            }"
+          >
+            <n-button size="tiny" type="info" ghost>
+              Add missing {{ field.identifier }} {{ field.name }}
+            </n-button>
+          </RouterLink>
+
+          <!--          <RouterLink :to="{ name: 'study:metadata:eligibility', params: { studyId: 'test-id' } }">-->
+          <!--            <n-button size="tiny" type="info" ghost> Add missing eligibility criteria </n-button>-->
+          <!--          </RouterLink>-->
+        </div>
+      </n-alert>
+    </div>
+
+    <LottieLoader v-if="responseLoading" />
+
     <n-form
+      v-else
       ref="formRef"
       :model="version"
       :rules="rules"
@@ -111,7 +174,7 @@ const createVersion = (e: MouseEvent) => {
       <n-divider />
 
       <div class="flex justify-start">
-        <n-button size="large" type="primary" @click="createVersion" :loading="loading">
+        <n-button disabled size="large" type="primary" @click="createVersion" :loading="loading">
           <template #icon>
             <f-icon icon="gridicons:create" />
           </template>

From 539d1949cb8de4eccb40ed05ffb9b6c97e81306a Mon Sep 17 00:00:00 2001
From: aydawka <aydan.gasimova2@gmail.com>
Date: Fri, 25 Apr 2025 09:55:53 -0700
Subject: [PATCH 02/11] =?UTF-8?q?add:=20=E2=9E=95=20alerts=20for=20metadat?=
 =?UTF-8?q?a=20to=20publish?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../study/dataset/publish/new/NewVersion.vue  | 36 +++++++++++--------
 1 file changed, 22 insertions(+), 14 deletions(-)

diff --git a/src/views/study/dataset/publish/new/NewVersion.vue b/src/views/study/dataset/publish/new/NewVersion.vue
index 7444c302..e6cb9e4b 100644
--- a/src/views/study/dataset/publish/new/NewVersion.vue
+++ b/src/views/study/dataset/publish/new/NewVersion.vue
@@ -2,7 +2,7 @@
 import { faker } from "@faker-js/faker";
 
 import { useSidebarStore } from "@/stores/sidebar";
-import { DatasetMetadataValidation } from "@/types/Dataset";
+import type { DatasetMetadataValidation } from "@/types/Dataset";
 import { baseURL } from "@/utils/constants";
 
 const route = useRoute();
@@ -112,6 +112,21 @@ const createVersion = (e: MouseEvent) => {
     }
   });
 };
+
+function uniqueMetadataIdentifiers(fullMetadata: any) {
+  const uniqueIdentifier = new Set();
+
+  const uniqueFields = fullMetadata.filter((field: any) => {
+    const key = field.identifier; // or field.field if that's your unique identifier
+    if (!uniqueIdentifier.has(key)) {
+      uniqueIdentifier.add(key);
+      return true;
+    }
+    return false;
+  });
+
+  return uniqueFields;
+}
 </script>
 
 <template>
@@ -125,19 +140,16 @@ const createVersion = (e: MouseEvent) => {
 
     <n-divider />
 
-    <div class="mr-4 flex flex-col gap-2 pb-4" :key="index" v-for="(item, index) in moduleData">
+    <div class="mr-4 flex gap-2 pb-4" :key="index" v-for="(item, index) in moduleData">
       <n-alert :title="item.message" class="w-full" type="error">
-        <!--        {{ item }}-->
-        <!--      <div v-for="(field, index) in item?.metadata" :key="index">{{ field.name }}</div>-->
-
         <div
-          v-for="(field, index) in item?.metadata"
-          :key="index"
-          class="flex flex-col gap-4 text-sm"
+          class="mb-2 flex text-sm"
+          v-for="f in uniqueMetadataIdentifiers(item.metadata)"
+          :key="f.name"
         >
           <RouterLink
             :to="{
-              name: `study:metadata:${field.identifier}`,
+              name: `study:metadata:team`,
               params: {
                 studyId: routeParams.studyId,
                 datasetId: routeParams.datasetId,
@@ -145,13 +157,9 @@ const createVersion = (e: MouseEvent) => {
             }"
           >
             <n-button size="tiny" type="info" ghost>
-              Add missing {{ field.identifier }} {{ field.name }}
+              Add Missing {{ f.identifier }} Details
             </n-button>
           </RouterLink>
-
-          <!--          <RouterLink :to="{ name: 'study:metadata:eligibility', params: { studyId: 'test-id' } }">-->
-          <!--            <n-button size="tiny" type="info" ghost> Add missing eligibility criteria </n-button>-->
-          <!--          </RouterLink>-->
         </div>
       </n-alert>
     </div>

From 3933ddc0faae1b314cfd5e4ec865148ee9c1b163 Mon Sep 17 00:00:00 2001
From: aydawka <aydan.gasimova2@gmail.com>
Date: Sun, 27 Apr 2025 23:25:05 -0700
Subject: [PATCH 03/11] =?UTF-8?q?fix:=20=F0=9F=90=9B=20routing?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/types/Dataset.d.ts                             | 2 ++
 src/views/study/dataset/publish/new/NewVersion.vue | 9 +++++----
 2 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/src/types/Dataset.d.ts b/src/types/Dataset.d.ts
index dc79e8e7..2de77843 100644
--- a/src/types/Dataset.d.ts
+++ b/src/types/Dataset.d.ts
@@ -241,11 +241,13 @@ export interface DatasetRelatedIdentifiers {
 export interface FieldValidation {
   name: string;
   identifier: string;
+  route: string;
 }
 
 export interface DatasetMetadataValidation {
   message: string;
   metadata: FieldValidation[];
+  route_identifier: string;
 }
 
 export interface DatasetHealthsheetRecord {
diff --git a/src/views/study/dataset/publish/new/NewVersion.vue b/src/views/study/dataset/publish/new/NewVersion.vue
index e6cb9e4b..4a0ca55c 100644
--- a/src/views/study/dataset/publish/new/NewVersion.vue
+++ b/src/views/study/dataset/publish/new/NewVersion.vue
@@ -144,12 +144,13 @@ function uniqueMetadataIdentifiers(fullMetadata: any) {
       <n-alert :title="item.message" class="w-full" type="error">
         <div
           class="mb-2 flex text-sm"
-          v-for="f in uniqueMetadataIdentifiers(item.metadata)"
-          :key="f.name"
+          v-for="field in uniqueMetadataIdentifiers(item.metadata)"
+          :key="field.identifier"
         >
           <RouterLink
+            @click="storeErrorFields(field.name)"
             :to="{
-              name: `study:metadata:team`,
+              name: `${item.route_identifier}:${field.route}`,
               params: {
                 studyId: routeParams.studyId,
                 datasetId: routeParams.datasetId,
@@ -157,7 +158,7 @@ function uniqueMetadataIdentifiers(fullMetadata: any) {
             }"
           >
             <n-button size="tiny" type="info" ghost>
-              Add Missing {{ f.identifier }} Details
+              Add Missing {{ field.identifier }} Details
             </n-button>
           </RouterLink>
         </div>

From e3c1c87ab283693a67d863515d29ad0a7a0d3dd6 Mon Sep 17 00:00:00 2001
From: aydawka <aydan.gasimova2@gmail.com>
Date: Sun, 27 Apr 2025 23:38:59 -0700
Subject: [PATCH 04/11] =?UTF-8?q?fix:=20=F0=9F=90=9B=20identifier=20header?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/types/Dataset.d.ts                             | 2 +-
 src/views/study/dataset/publish/new/NewVersion.vue | 8 ++++----
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/types/Dataset.d.ts b/src/types/Dataset.d.ts
index 2de77843..c9ba2340 100644
--- a/src/types/Dataset.d.ts
+++ b/src/types/Dataset.d.ts
@@ -240,7 +240,7 @@ export interface DatasetRelatedIdentifiers {
 
 export interface FieldValidation {
   name: string;
-  identifier: string;
+  metadata_header: string;
   route: string;
 }
 
diff --git a/src/views/study/dataset/publish/new/NewVersion.vue b/src/views/study/dataset/publish/new/NewVersion.vue
index 4a0ca55c..a8696b6c 100644
--- a/src/views/study/dataset/publish/new/NewVersion.vue
+++ b/src/views/study/dataset/publish/new/NewVersion.vue
@@ -117,7 +117,7 @@ function uniqueMetadataIdentifiers(fullMetadata: any) {
   const uniqueIdentifier = new Set();
 
   const uniqueFields = fullMetadata.filter((field: any) => {
-    const key = field.identifier; // or field.field if that's your unique identifier
+    const key = field.metadata_header; // or field.field if that's your unique identifier
     if (!uniqueIdentifier.has(key)) {
       uniqueIdentifier.add(key);
       return true;
@@ -144,8 +144,8 @@ function uniqueMetadataIdentifiers(fullMetadata: any) {
       <n-alert :title="item.message" class="w-full" type="error">
         <div
           class="mb-2 flex text-sm"
-          v-for="field in uniqueMetadataIdentifiers(item.metadata)"
-          :key="field.identifier"
+          v-for="(field, index) in uniqueMetadataIdentifiers(item.metadata)"
+          :key="index"
         >
           <RouterLink
             @click="storeErrorFields(field.name)"
@@ -158,7 +158,7 @@ function uniqueMetadataIdentifiers(fullMetadata: any) {
             }"
           >
             <n-button size="tiny" type="info" ghost>
-              Add Missing {{ field.identifier }} Details
+              Add Missing {{ field.metadata_header }} Details
             </n-button>
           </RouterLink>
         </div>

From d0a96eae667a8be452bec6bcedca79211b867ef4 Mon Sep 17 00:00:00 2001
From: aydawka <aydan.gasimova2@gmail.com>
Date: Sun, 27 Apr 2025 23:41:00 -0700
Subject: [PATCH 05/11] =?UTF-8?q?wip:=20=F0=9F=9A=A7=20add=20pinia=20store?=
 =?UTF-8?q?s=20displaying=20specific=20error=20fields?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/stores/errorField.ts                    | 20 ++++++++++++++++++++
 src/stores/showAlert.ts                     | 17 +++++++++++++++++
 src/views/study/metadata/team/StudyTeam.vue | 19 +++++++++++++++++--
 3 files changed, 54 insertions(+), 2 deletions(-)
 create mode 100644 src/stores/errorField.ts
 create mode 100644 src/stores/showAlert.ts

diff --git a/src/stores/errorField.ts b/src/stores/errorField.ts
new file mode 100644
index 00000000..946117a3
--- /dev/null
+++ b/src/stores/errorField.ts
@@ -0,0 +1,20 @@
+import { defineStore } from "pinia";
+
+export const useErrorStore = defineStore(
+  "errorFields",
+  () => {
+    const errorFields = ref<string>("");
+
+    const setErrorFields = (value: string) => {
+      errorFields.value = value;
+    };
+
+    return {
+      errorFields,
+      setErrorFields,
+    };
+  },
+  {
+    persist: { storage: localStorage },
+  }
+);
diff --git a/src/stores/showAlert.ts b/src/stores/showAlert.ts
new file mode 100644
index 00000000..5331ef09
--- /dev/null
+++ b/src/stores/showAlert.ts
@@ -0,0 +1,17 @@
+import { defineStore } from "pinia";
+
+export const useAlertStore = defineStore(
+  "alertStore",
+  () => {
+    const showAlert = ref(false);
+
+    const setShowAlert = (value: boolean) => {
+      showAlert.value = value;
+    };
+
+    return { setShowAlert, showAlert };
+  },
+  {
+    persist: { storage: localStorage },
+  }
+);
diff --git a/src/views/study/metadata/team/StudyTeam.vue b/src/views/study/metadata/team/StudyTeam.vue
index 519bab04..ef5e913c 100644
--- a/src/views/study/metadata/team/StudyTeam.vue
+++ b/src/views/study/metadata/team/StudyTeam.vue
@@ -1,9 +1,10 @@
 <script setup lang="ts">
-import type { FormInst } from "naive-ui";
-import type { MenuOption } from "naive-ui";
+import type { FormInst, MenuOption } from "naive-ui";
 import { nanoid } from "nanoid";
 
 import FORM_JSON from "@/assets/data/form.json";
+import { useErrorStore } from "@/stores/errorField";
+import { useAlertStore } from "@/stores/showAlert";
 import { useStudyStore } from "@/stores/study";
 import type { StudyTeam } from "@/types/Study";
 import { baseURL } from "@/utils/constants";
@@ -15,6 +16,14 @@ const studyStore = useStudyStore();
 
 const formRef = ref<FormInst | null>(null);
 
+const errorStore = useErrorStore();
+const errorFields = errorStore.errorFields;
+const alertStore = useAlertStore();
+
+router.beforeEach((to, from) => {
+  alertStore.setShowAlert(from.name === "dataset:publish:versions:new");
+});
+
 const moduleData = reactive<StudyTeam>({
   collaborators: [],
   sponsors: {
@@ -258,6 +267,12 @@ const scrollToSection = (key: string) => {
             label-placement="top"
             class="w-full"
           >
+            <div v-if="alertStore.showAlert" class="pb-4">
+              <n-alert type="error">
+                <p>Please fill the following required field(s): {{ errorFields }}</p>
+              </n-alert>
+            </div>
+
             <h1 class="pb-4">Collaboration</h1>
 
             <h2 class="sponsors pb-8">Sponsors</h2>

From 78a1a53c3b56936718f571bdb76500a84f669eb7 Mon Sep 17 00:00:00 2001
From: aydawka <aydan.gasimova2@gmail.com>
Date: Mon, 28 Apr 2025 13:03:11 -0700
Subject: [PATCH 06/11] =?UTF-8?q?feat:=20=E2=9C=A8=20add=20fake=20to=20cre?=
 =?UTF-8?q?ate=20a=20new=20study?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/study/new/NewStudy.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/views/study/new/NewStudy.vue b/src/views/study/new/NewStudy.vue
index cc06268f..2485ae4c 100644
--- a/src/views/study/new/NewStudy.vue
+++ b/src/views/study/new/NewStudy.vue
@@ -32,7 +32,7 @@ const routeParams = {
 const study = reactive({
   title: faker.commerce.productName(),
   image: "",
-  short_description: "",
+  short_description: faker.commerce.productDescription(),
 });
 
 // const keywordOptions = FormJSON.keywordOptions;

From 7b0a99dabcb89aa8cbd646f866ecd873188cc470 Mon Sep 17 00:00:00 2001
From: aydawka <aydan.gasimova2@gmail.com>
Date: Mon, 28 Apr 2025 13:04:22 -0700
Subject: [PATCH 07/11] =?UTF-8?q?feat:=20=E2=9C=A8=20add=20alert=20to=20te?=
 =?UTF-8?q?am=20and=20location?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../enrollment/locations/StudyLocations.vue      | 16 ++++++++++++++++
 src/views/study/metadata/team/StudyTeam.vue      |  6 ++++--
 2 files changed, 20 insertions(+), 2 deletions(-)

diff --git a/src/views/study/metadata/enrollment/locations/StudyLocations.vue b/src/views/study/metadata/enrollment/locations/StudyLocations.vue
index ed7c6b90..33455d82 100644
--- a/src/views/study/metadata/enrollment/locations/StudyLocations.vue
+++ b/src/views/study/metadata/enrollment/locations/StudyLocations.vue
@@ -4,6 +4,7 @@ import { nanoid } from "nanoid";
 
 import COUNTRIES_JSON from "@/assets/data/countries.json";
 import FORM_JSON from "@/assets/data/form.json";
+import { useErrorStore } from "@/stores/errorField";
 import { useStudyStore } from "@/stores/study";
 import type { StudyLocations } from "@/types/Study";
 import { baseURL } from "@/utils/constants";
@@ -14,12 +15,23 @@ const push = usePush();
 
 const studyStore = useStudyStore();
 
+const errorStore = useErrorStore();
+
+const errorFields = errorStore.errorFields;
 const formRef = ref<FormInst | null>(null);
 
 const moduleData = reactive<StudyLocations>({
   location_list: [],
 });
 
+const showAlert = ref(false);
+
+router.beforeEach((to) => {
+  const isValidationRoute =
+    to.path ===
+    `${baseURL}/study/${to.params.studyId}/dataset/${to.params.datasetId}/publish:versions:new`;
+  showAlert.value = isValidationRoute;
+});
 const countryOptions = computed(() => {
   return COUNTRIES_JSON.map((item) => {
     return {
@@ -178,6 +190,10 @@ const saveMetadata = (e: MouseEvent) => {
         v-else
         :disabled="studyStore.currentStudyRole === 'viewer'"
       >
+        <n-alert v-if="showAlert" type="error" class="pb-4">
+          <p>Error Fields: {{ errorFields }}</p>
+        </n-alert>
+
         <CollapsibleCard
           v-for="(item, index) in moduleData.location_list"
           :key="item.id"
diff --git a/src/views/study/metadata/team/StudyTeam.vue b/src/views/study/metadata/team/StudyTeam.vue
index ef5e913c..8bb5e426 100644
--- a/src/views/study/metadata/team/StudyTeam.vue
+++ b/src/views/study/metadata/team/StudyTeam.vue
@@ -21,7 +21,7 @@ const errorFields = errorStore.errorFields;
 const alertStore = useAlertStore();
 
 router.beforeEach((to, from) => {
-  alertStore.setShowAlert(from.name === "dataset:publish:versions:new");
+  alertStore.setShowAlert(from?.name === "dataset:publish:versions:new");
 });
 
 const moduleData = reactive<StudyTeam>({
@@ -269,7 +269,9 @@ const scrollToSection = (key: string) => {
           >
             <div v-if="alertStore.showAlert" class="pb-4">
               <n-alert type="error">
-                <p>Please fill the following required field(s): {{ errorFields }}</p>
+                <p class="text-sm">
+                  Please fill the following required field(s): {{ errorFields }}
+                </p>
               </n-alert>
             </div>
 

From a4d6bc3a9aa9c4e07fc3582b0c951a8530bbfbec Mon Sep 17 00:00:00 2001
From: aydawka <aydan.gasimova2@gmail.com>
Date: Tue, 29 Apr 2025 00:08:40 -0700
Subject: [PATCH 08/11] =?UTF-8?q?fix:=20=F0=9F=90=9B=20error=20fields?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/study/dataset/publish/new/NewVersion.vue | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/src/views/study/dataset/publish/new/NewVersion.vue b/src/views/study/dataset/publish/new/NewVersion.vue
index a8696b6c..cd2cdca6 100644
--- a/src/views/study/dataset/publish/new/NewVersion.vue
+++ b/src/views/study/dataset/publish/new/NewVersion.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { faker } from "@faker-js/faker";
 
+import { useErrorStore } from "@/stores/errorField";
 import { useSidebarStore } from "@/stores/sidebar";
 import type { DatasetMetadataValidation } from "@/types/Dataset";
 import { baseURL } from "@/utils/constants";
@@ -11,6 +12,8 @@ const push = usePush();
 
 const sidebarStore = useSidebarStore();
 
+const errorStore = useErrorStore();
+
 const routeParams = {
   datasetId: route.params.datasetId,
   studyId: route.params.studyId,
@@ -127,6 +130,10 @@ function uniqueMetadataIdentifiers(fullMetadata: any) {
 
   return uniqueFields;
 }
+
+const storeErrorFields = (error: string) => {
+  errorStore.setErrorFields(error);
+};
 </script>
 
 <template>

From fddc52a00aa3e9fe3b71538b75a49240a4656df0 Mon Sep 17 00:00:00 2001
From: aydawka <aydan.gasimova2@gmail.com>
Date: Wed, 30 Apr 2025 00:12:57 -0700
Subject: [PATCH 09/11] =?UTF-8?q?fix:=20=F0=9F=90=9B=20add=20alert=20store?=
 =?UTF-8?q?=20to=20study=20metadata?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../study/dataset/publish/new/NewVersion.vue  |  8 ++++---
 .../study/metadata/status/StudyStatus.vue     | 13 ++++++++++
 src/views/study/metadata/team/StudyTeam.vue   | 24 +++++++++----------
 3 files changed, 29 insertions(+), 16 deletions(-)

diff --git a/src/views/study/dataset/publish/new/NewVersion.vue b/src/views/study/dataset/publish/new/NewVersion.vue
index cd2cdca6..851a06f8 100644
--- a/src/views/study/dataset/publish/new/NewVersion.vue
+++ b/src/views/study/dataset/publish/new/NewVersion.vue
@@ -131,8 +131,8 @@ function uniqueMetadataIdentifiers(fullMetadata: any) {
   return uniqueFields;
 }
 
-const storeErrorFields = (error: string) => {
-  errorStore.setErrorFields(error);
+const getNamesForHeader = (metadata, header) => {
+  return metadata.filter((m) => m.metadata_header === header).map((m) => m.name);
 };
 </script>
 
@@ -155,13 +155,15 @@ const storeErrorFields = (error: string) => {
           :key="index"
         >
           <RouterLink
-            @click="storeErrorFields(field.name)"
             :to="{
               name: `${item.route_identifier}:${field.route}`,
               params: {
                 studyId: routeParams.studyId,
                 datasetId: routeParams.datasetId,
               },
+              state: {
+                missingFields: getNamesForHeader(item.metadata, field.metadata_header),
+              },
             }"
           >
             <n-button size="tiny" type="info" ghost>
diff --git a/src/views/study/metadata/status/StudyStatus.vue b/src/views/study/metadata/status/StudyStatus.vue
index 92dc49a5..f0542375 100644
--- a/src/views/study/metadata/status/StudyStatus.vue
+++ b/src/views/study/metadata/status/StudyStatus.vue
@@ -7,6 +7,10 @@ import { useStudyStore } from "@/stores/study";
 import type { StudyStatusModule } from "@/types/Study";
 import { baseURL } from "@/utils/constants";
 
+const routeState = window.history.state;
+
+const missingFieldsList = (routeState?.missingFields || []).map((f) => f).join(", ");
+
 const route = useRoute();
 const push = usePush();
 
@@ -155,6 +159,15 @@ const saveMetadata = (e: MouseEvent) => {
         :disabled="studyStore.currentStudyRole === 'viewer'"
         v-else
       >
+        <div class="pb-4" v-if="routeState.missingfields && routeState.missingfields.length">
+          <n-alert type="error">
+            Please fill the following required field(s):
+            <span class="italic">
+              {{ missingFieldsList }}
+            </span>
+          </n-alert>
+        </div>
+
         <n-form-item label="Overall Status" path="overall_status">
           <n-select
             v-model:value="moduleData.overall_status"
diff --git a/src/views/study/metadata/team/StudyTeam.vue b/src/views/study/metadata/team/StudyTeam.vue
index 8bb5e426..3faad36a 100644
--- a/src/views/study/metadata/team/StudyTeam.vue
+++ b/src/views/study/metadata/team/StudyTeam.vue
@@ -3,26 +3,23 @@ import type { FormInst, MenuOption } from "naive-ui";
 import { nanoid } from "nanoid";
 
 import FORM_JSON from "@/assets/data/form.json";
-import { useErrorStore } from "@/stores/errorField";
-import { useAlertStore } from "@/stores/showAlert";
 import { useStudyStore } from "@/stores/study";
 import type { StudyTeam } from "@/types/Study";
 import { baseURL } from "@/utils/constants";
 
 const route = useRoute();
+
 const router = useRouter();
 const push = usePush();
 const studyStore = useStudyStore();
 
 const formRef = ref<FormInst | null>(null);
 
-const errorStore = useErrorStore();
-const errorFields = errorStore.errorFields;
-const alertStore = useAlertStore();
-
-router.beforeEach((to, from) => {
-  alertStore.setShowAlert(from?.name === "dataset:publish:versions:new");
-});
+const routeState = window.history.state;
+const missingFieldsList = (routeState?.missingFields || []).map((f) => f).join(", ");
+console.log(routeState?.missingFields.length, "lklll");
+// const errorFields = errorStore.errorFields;
+// const alertStore = useAlertStore();
 
 const moduleData = reactive<StudyTeam>({
   collaborators: [],
@@ -267,11 +264,12 @@ const scrollToSection = (key: string) => {
             label-placement="top"
             class="w-full"
           >
-            <div v-if="alertStore.showAlert" class="pb-4">
+            <div class="pb-4" v-if="routeState?.missingFields && routeState.missingFields.length">
               <n-alert type="error">
-                <p class="text-sm">
-                  Please fill the following required field(s): {{ errorFields }}
-                </p>
+                Please fill the following required field(s):
+                <span class="italic">
+                  {{ missingFieldsList }}
+                </span>
               </n-alert>
             </div>
 

From cb6d243d17580c18026919721927b006d3376e72 Mon Sep 17 00:00:00 2001
From: aydawka <aydan.gasimova2@gmail.com>
Date: Wed, 30 Apr 2025 16:51:17 -0700
Subject: [PATCH 10/11] =?UTF-8?q?fix:=20=F0=9F=90=9B=20align=20style=20for?=
 =?UTF-8?q?=20metadata?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/stores/errorField.ts                      | 20 -------------------
 src/stores/showAlert.ts                       | 17 ----------------
 .../metadata/about/DatasetMetadataOther.vue   | 12 +++++++++++
 .../DatasetMetadataAccessRights.vue           | 12 +++++++++++
 .../DatasetMetadataDataManagement.vue         | 12 +++++++++++
 .../DatasetMetadataGeneralInformation.vue     | 12 +++++++++++
 .../DatasetMetadataIdentifiers.vue            | 12 +++++++++++
 .../DatasetMetadataRelatedIdentifiers.vue     | 12 +++++++++++
 .../metadata/team/DatasetMetadataTeam.vue     | 12 +++++++++++
 .../study/dataset/publish/new/NewVersion.vue  |  3 ---
 .../metadata/description/StudyDescription.vue | 11 ++++++++++
 .../study/metadata/design/StudyDesign.vue     | 11 ++++++++++
 .../metadata/eligibility/StudyEligibility.vue | 20 ++++++++++++++-----
 .../enrollment/contacts/StudyContacts.vue     | 11 ++++++++++
 .../enrollment/locations/StudyLocations.vue   | 17 +++++++++-------
 .../enrollment/officials/StudyOfficials.vue   | 11 ++++++++++
 .../metadata/oversight/StudyOversight.vue     | 11 ++++++++++
 .../study/metadata/status/StudyStatus.vue     |  3 +--
 src/views/study/metadata/team/StudyTeam.vue   |  3 ---
 .../metadata/treatment/arms/StudyArms.vue     | 14 ++++++++++++-
 .../interventions/StudyInterventions.vue      | 11 ++++++++++
 21 files changed, 189 insertions(+), 58 deletions(-)
 delete mode 100644 src/stores/errorField.ts
 delete mode 100644 src/stores/showAlert.ts

diff --git a/src/stores/errorField.ts b/src/stores/errorField.ts
deleted file mode 100644
index 946117a3..00000000
--- a/src/stores/errorField.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-import { defineStore } from "pinia";
-
-export const useErrorStore = defineStore(
-  "errorFields",
-  () => {
-    const errorFields = ref<string>("");
-
-    const setErrorFields = (value: string) => {
-      errorFields.value = value;
-    };
-
-    return {
-      errorFields,
-      setErrorFields,
-    };
-  },
-  {
-    persist: { storage: localStorage },
-  }
-);
diff --git a/src/stores/showAlert.ts b/src/stores/showAlert.ts
deleted file mode 100644
index 5331ef09..00000000
--- a/src/stores/showAlert.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import { defineStore } from "pinia";
-
-export const useAlertStore = defineStore(
-  "alertStore",
-  () => {
-    const showAlert = ref(false);
-
-    const setShowAlert = (value: boolean) => {
-      showAlert.value = value;
-    };
-
-    return { setShowAlert, showAlert };
-  },
-  {
-    persist: { storage: localStorage },
-  }
-);
diff --git a/src/views/study/dataset/metadata/about/DatasetMetadataOther.vue b/src/views/study/dataset/metadata/about/DatasetMetadataOther.vue
index 88654130..6e97d42c 100644
--- a/src/views/study/dataset/metadata/about/DatasetMetadataOther.vue
+++ b/src/views/study/dataset/metadata/about/DatasetMetadataOther.vue
@@ -19,6 +19,9 @@ const routeParams = {
 const studyId = routeParams.studyId;
 const datasetId = routeParams.datasetId;
 
+const routeState = window.history.state;
+const missingFieldsList = (routeState?.missingFields || []).map((f) => f).join(", ");
+
 const moduleData = ref<DatasetOther>({
   acknowledgement: "",
   format: [],
@@ -189,6 +192,15 @@ const scrollToSection = (key: string) => {
             class="w-full"
             :disabled="studyStore.currentStudyRole === 'viewer'"
           >
+            <div class="pb-4" v-if="routeState?.missingFields && routeState.missingFields.length">
+              <n-alert type="error">
+                Please fill the following required field(s):
+                <span class="italic">
+                  {{ missingFieldsList }}
+                </span>
+              </n-alert>
+            </div>
+
             <h3 class="resource-type">Resource Type</h3>
 
             <p class="pb-8 pt-2">
diff --git a/src/views/study/dataset/metadata/access-rights/DatasetMetadataAccessRights.vue b/src/views/study/dataset/metadata/access-rights/DatasetMetadataAccessRights.vue
index b4a91433..b8b962ab 100644
--- a/src/views/study/dataset/metadata/access-rights/DatasetMetadataAccessRights.vue
+++ b/src/views/study/dataset/metadata/access-rights/DatasetMetadataAccessRights.vue
@@ -23,6 +23,9 @@ const routeParams = {
 const studyId = routeParams.studyId;
 const datasetId = routeParams.datasetId;
 
+const routeState = window.history.state;
+const missingFieldsList = (routeState?.missingFields || []).map((f) => f).join(", ");
+
 const displayLicenseEditor = ref(false);
 const draftLicense = ref("");
 const licenseName = ref("");
@@ -250,6 +253,15 @@ const scrollToSection = (key: string) => {
             label-placement="top"
             class="w-full overflow-auto"
           >
+            <div class="pb-4" v-if="routeState?.missingFields && routeState.missingFields.length">
+              <n-alert type="error">
+                Please fill the following required field(s):
+                <span class="italic">
+                  {{ missingFieldsList }}
+                </span>
+              </n-alert>
+            </div>
+
             <h2 class="access pb-4">Access</h2>
 
             <n-card class="bg-gray-50">
diff --git a/src/views/study/dataset/metadata/data-management/DatasetMetadataDataManagement.vue b/src/views/study/dataset/metadata/data-management/DatasetMetadataDataManagement.vue
index 1622ba8b..641e9ac2 100644
--- a/src/views/study/dataset/metadata/data-management/DatasetMetadataDataManagement.vue
+++ b/src/views/study/dataset/metadata/data-management/DatasetMetadataDataManagement.vue
@@ -20,6 +20,9 @@ const routeParams = {
 const studyId = routeParams.studyId;
 const datasetId = routeParams.datasetId;
 
+const routeState = window.history.state;
+const missingFieldsList = (routeState?.missingFields || []).map((f) => f).join(", ");
+
 const moduleData = reactive<DatasetDataManagement>({
   consent: {
     details: "",
@@ -250,6 +253,15 @@ const scrollToSection = (key: string) => {
             label-placement="top"
             class="w-full"
           >
+            <div class="pb-4" v-if="routeState?.missingFields && routeState.missingFields.length">
+              <n-alert type="error">
+                Please fill the following required field(s):
+                <span class="italic">
+                  {{ missingFieldsList }}
+                </span>
+              </n-alert>
+            </div>
+
             <h2 class="consent pb-4">Consent</h2>
 
             <n-card class="bg-gray-50">
diff --git a/src/views/study/dataset/metadata/general-information/DatasetMetadataGeneralInformation.vue b/src/views/study/dataset/metadata/general-information/DatasetMetadataGeneralInformation.vue
index 790e7fd1..c298e040 100644
--- a/src/views/study/dataset/metadata/general-information/DatasetMetadataGeneralInformation.vue
+++ b/src/views/study/dataset/metadata/general-information/DatasetMetadataGeneralInformation.vue
@@ -23,6 +23,9 @@ const routeParams = {
 const studyId = routeParams.studyId;
 const datasetId = routeParams.datasetId;
 
+const routeState = window.history.state;
+const missingFieldsList = (routeState?.missingFields || []).map((f) => f).join(", ");
+
 const formRef = ref<FormInst | null>(null);
 const moduleData = reactive<DatasetGeneralInformation>({
   dates: [],
@@ -308,6 +311,15 @@ const scrollToSection = (key: string) => {
             label-placement="top"
             :disabled="studyStore.currentStudyRole === 'viewer'"
           >
+            <div v-if="routeState?.missingFields && routeState.missingFields.length">
+              <n-alert type="error">
+                Please fill the following required field(s):
+                <span class="italic">
+                  {{ missingFieldsList }}
+                </span>
+              </n-alert>
+            </div>
+
             <h2 class="titles py-4">Titles</h2>
 
             <n-card class="bg-gray-50">
diff --git a/src/views/study/dataset/metadata/identifiers/DatasetMetadataIdentifiers.vue b/src/views/study/dataset/metadata/identifiers/DatasetMetadataIdentifiers.vue
index df1f0efa..0ae8b6a7 100644
--- a/src/views/study/dataset/metadata/identifiers/DatasetMetadataIdentifiers.vue
+++ b/src/views/study/dataset/metadata/identifiers/DatasetMetadataIdentifiers.vue
@@ -21,6 +21,9 @@ const routeParams = {
 const studyId = routeParams.studyId;
 const datasetId = routeParams.datasetId;
 
+const routeState = window.history.state;
+const missingFieldsList = (routeState?.missingFields || []).map((f) => f).join(", ");
+
 const formRef = ref<FormInst | null>(null);
 const moduleData = reactive<DatasetIdentifiers>({
   identifiers: [],
@@ -197,6 +200,15 @@ const scrollToSection = (key: string) => {
         </div>
 
         <div class="w-full">
+          <div v-if="routeState?.missingFields && routeState.missingFields.length">
+            <n-alert type="error">
+              Please fill the following required field(s):
+              <span class="italic">
+                {{ missingFieldsList }}
+              </span>
+            </n-alert>
+          </div>
+
           <h3 class="primary-Identifier">Primary Identifier</h3>
 
           <p class="pb-8 pt-2">
diff --git a/src/views/study/dataset/metadata/related/DatasetMetadataRelatedIdentifiers.vue b/src/views/study/dataset/metadata/related/DatasetMetadataRelatedIdentifiers.vue
index a749eb2a..23d82226 100644
--- a/src/views/study/dataset/metadata/related/DatasetMetadataRelatedIdentifiers.vue
+++ b/src/views/study/dataset/metadata/related/DatasetMetadataRelatedIdentifiers.vue
@@ -22,6 +22,9 @@ const routeParams = {
 const studyId = routeParams.studyId;
 const datasetId = routeParams.datasetId;
 
+const routeState = window.history.state;
+const missingFieldsList = (routeState?.missingFields || []).map((f) => f).join(", ");
+
 const formRef = ref<FormInst | null>(null);
 
 const moduleData = reactive<DatasetRelatedIdentifiers>({
@@ -178,6 +181,15 @@ const saveMetadata = (e: MouseEvent) => {
         class="pr-4"
         v-else
       >
+        <div v-if="routeState?.missingFields && routeState.missingFields.length">
+          <n-alert type="error">
+            Please fill the following required field(s):
+            <span class="italic">
+              {{ missingFieldsList }}
+            </span>
+          </n-alert>
+        </div>
+
         <CollapsibleCard
           v-for="(item, index) in moduleData.related_identifiers"
           :key="item.id"
diff --git a/src/views/study/dataset/metadata/team/DatasetMetadataTeam.vue b/src/views/study/dataset/metadata/team/DatasetMetadataTeam.vue
index fa654414..21059ac3 100644
--- a/src/views/study/dataset/metadata/team/DatasetMetadataTeam.vue
+++ b/src/views/study/dataset/metadata/team/DatasetMetadataTeam.vue
@@ -22,6 +22,9 @@ const routeParams = {
 const studyId = routeParams.studyId;
 const datasetId = routeParams.datasetId;
 
+const routeState = window.history.state;
+const missingFieldsList = (routeState?.missingFields || []).map((f) => f).join(", ");
+
 const formRef = ref<FormInst | null>(null);
 
 const moduleData = reactive<DatasetTeam>({
@@ -375,6 +378,15 @@ const scrollToSection = (key: string) => {
             class="w-full pr-4"
             :disabled="studyStore.currentStudyRole === 'viewer'"
           >
+            <div class="pb-4" v-if="routeState?.missingFields && routeState.missingFields.length">
+              <n-alert type="error">
+                Please fill the following required field(s):
+                <span class="italic">
+                  {{ missingFieldsList }}
+                </span>
+              </n-alert>
+            </div>
+
             <h2 class="creators pb-4">Creators</h2>
 
             <n-card class="bg-gray-50">
diff --git a/src/views/study/dataset/publish/new/NewVersion.vue b/src/views/study/dataset/publish/new/NewVersion.vue
index 851a06f8..d4a8eb25 100644
--- a/src/views/study/dataset/publish/new/NewVersion.vue
+++ b/src/views/study/dataset/publish/new/NewVersion.vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import { faker } from "@faker-js/faker";
 
-import { useErrorStore } from "@/stores/errorField";
 import { useSidebarStore } from "@/stores/sidebar";
 import type { DatasetMetadataValidation } from "@/types/Dataset";
 import { baseURL } from "@/utils/constants";
@@ -12,8 +11,6 @@ const push = usePush();
 
 const sidebarStore = useSidebarStore();
 
-const errorStore = useErrorStore();
-
 const routeParams = {
   datasetId: route.params.datasetId,
   studyId: route.params.studyId,
diff --git a/src/views/study/metadata/description/StudyDescription.vue b/src/views/study/metadata/description/StudyDescription.vue
index e779ca02..45c201fb 100644
--- a/src/views/study/metadata/description/StudyDescription.vue
+++ b/src/views/study/metadata/description/StudyDescription.vue
@@ -12,6 +12,8 @@ const router = useRouter();
 const push = usePush();
 
 const studyStore = useStudyStore();
+const routeState = window.history.state;
+const missingFieldsList = (routeState?.missingFields || []).map((f) => f).join(", ");
 
 const formRef = ref<FormInst | null>(null);
 
@@ -355,6 +357,15 @@ const scrollToSection = (key: string) => {
             :disabled="studyStore.currentStudyRole === 'viewer'"
             class="w-full"
           >
+            <div class="pb-4" v-if="routeState?.missingFields && routeState.missingFields.length">
+              <n-alert type="error">
+                Please fill the following required field(s):
+                <span class="italic">
+                  {{ missingFieldsList }}
+                </span>
+              </n-alert>
+            </div>
+
             <h2 class="description pb-4">Description</h2>
 
             <n-card class="rounded-xl bg-gray-50">
diff --git a/src/views/study/metadata/design/StudyDesign.vue b/src/views/study/metadata/design/StudyDesign.vue
index 5f385300..0bdab9ca 100644
--- a/src/views/study/metadata/design/StudyDesign.vue
+++ b/src/views/study/metadata/design/StudyDesign.vue
@@ -11,6 +11,8 @@ const router = useRouter();
 const push = usePush();
 
 const studyStore = useStudyStore();
+const routeState = window.history.state;
+const missingFieldsList = (routeState?.missingFields || []).map((f) => f).join(", ");
 
 const formRef = ref<FormInst | null>(null);
 
@@ -359,6 +361,15 @@ const scrollToSection = (key: string) => {
             label-placement="top"
             class="w-full pr-4"
           >
+            <div class="pb-4" v-if="routeState?.missingFields && routeState.missingFields.length">
+              <n-alert type="error">
+                Please fill the following required field(s):
+                <span class="italic">
+                  {{ missingFieldsList }}
+                </span>
+              </n-alert>
+            </div>
+
             <h3 class="study-type pb-4">Study Type</h3>
 
             <p class="pb-8 pt-2">
diff --git a/src/views/study/metadata/eligibility/StudyEligibility.vue b/src/views/study/metadata/eligibility/StudyEligibility.vue
index 1a2d6f11..614148b3 100644
--- a/src/views/study/metadata/eligibility/StudyEligibility.vue
+++ b/src/views/study/metadata/eligibility/StudyEligibility.vue
@@ -11,6 +11,8 @@ const router = useRouter();
 const push = usePush();
 
 const studyStore = useStudyStore();
+const routeState = window.history.state;
+const missingFieldsList = (routeState?.missingFields || []).map((f) => f).join(", ");
 
 const loading = ref(false);
 const responseLoading = ref(false);
@@ -203,8 +205,8 @@ const scrollToSection = (key: string) => {
     <n-scrollbar ref="scrollbarRef" class="max-h-[80vh]">
       <LottieLoader v-if="responseLoading" />
 
-      <div v-else class="flex flex-row-reverse max-lg:flex-col">
-        <div class="max-2xl:w-[500px] max-lg:hidden lg:block 2xl:w-[250px]">
+      <div v-else class="flex flex-row-reverse justify-end max-lg:flex-col">
+        <div class="max-2xl:w-[500px] max-lg:hidden lg:block 2xl:w-[750px]">
           <n-menu
             :options="menuOptions"
             @update:value="scrollToSection"
@@ -221,8 +223,17 @@ const scrollToSection = (key: string) => {
         </div>
 
         <FadeTransition>
-          <div>
-            <div v-if="!moduleData.study_type">
+          <div class="w-full">
+            <div v-if="!moduleData.study_type" class="flex flex-col gap-4">
+              <div v-if="routeState?.missingFields && routeState.missingFields.length">
+                <n-alert type="error">
+                  Please fill the following required field(s):
+                  <span class="italic">
+                    {{ missingFieldsList }}
+                  </span>
+                </n-alert>
+              </div>
+
               <n-alert
                 title="A study type should be added before you can add eligibility details."
                 type="error"
@@ -256,7 +267,6 @@ const scrollToSection = (key: string) => {
               size="large"
               :disabled="!moduleData.study_type || studyStore.currentStudyRole === 'viewer'"
               label-placement="top"
-              class="w-full"
             >
               <h3 class="gender">Gender</h3>
 
diff --git a/src/views/study/metadata/enrollment/contacts/StudyContacts.vue b/src/views/study/metadata/enrollment/contacts/StudyContacts.vue
index e1e4153b..a70206b5 100644
--- a/src/views/study/metadata/enrollment/contacts/StudyContacts.vue
+++ b/src/views/study/metadata/enrollment/contacts/StudyContacts.vue
@@ -11,6 +11,8 @@ const router = useRouter();
 const push = usePush();
 
 const studyStore = useStudyStore();
+const routeState = window.history.state;
+const missingFieldsList = (routeState?.missingFields || []).map((f) => f).join(", ");
 
 const formRef = ref<FormInst | null>(null);
 
@@ -177,6 +179,15 @@ const saveMetadata = (e: MouseEvent) => {
         class="pr-4"
         v-else
       >
+        <div v-if="routeState?.missingFields && routeState.missingFields.length">
+          <n-alert type="error">
+            Please fill the following required field(s):
+            <span class="italic">
+              {{ missingFieldsList }}
+            </span>
+          </n-alert>
+        </div>
+
         <CollapsibleCard
           v-for="(item, index) in moduleData.central_contact_list"
           :key="item.id"
diff --git a/src/views/study/metadata/enrollment/locations/StudyLocations.vue b/src/views/study/metadata/enrollment/locations/StudyLocations.vue
index 33455d82..4ce3458b 100644
--- a/src/views/study/metadata/enrollment/locations/StudyLocations.vue
+++ b/src/views/study/metadata/enrollment/locations/StudyLocations.vue
@@ -4,7 +4,6 @@ import { nanoid } from "nanoid";
 
 import COUNTRIES_JSON from "@/assets/data/countries.json";
 import FORM_JSON from "@/assets/data/form.json";
-import { useErrorStore } from "@/stores/errorField";
 import { useStudyStore } from "@/stores/study";
 import type { StudyLocations } from "@/types/Study";
 import { baseURL } from "@/utils/constants";
@@ -14,10 +13,9 @@ const router = useRouter();
 const push = usePush();
 
 const studyStore = useStudyStore();
+const routeState = window.history.state;
+const missingFieldsList = (routeState?.missingFields || []).map((f) => f).join(", ");
 
-const errorStore = useErrorStore();
-
-const errorFields = errorStore.errorFields;
 const formRef = ref<FormInst | null>(null);
 
 const moduleData = reactive<StudyLocations>({
@@ -190,9 +188,14 @@ const saveMetadata = (e: MouseEvent) => {
         v-else
         :disabled="studyStore.currentStudyRole === 'viewer'"
       >
-        <n-alert v-if="showAlert" type="error" class="pb-4">
-          <p>Error Fields: {{ errorFields }}</p>
-        </n-alert>
+        <div v-if="routeState?.missingFields && routeState.missingFields.length">
+          <n-alert type="error">
+            Please fill the following required field(s):
+            <span class="italic">
+              {{ missingFieldsList }}
+            </span>
+          </n-alert>
+        </div>
 
         <CollapsibleCard
           v-for="(item, index) in moduleData.location_list"
diff --git a/src/views/study/metadata/enrollment/officials/StudyOfficials.vue b/src/views/study/metadata/enrollment/officials/StudyOfficials.vue
index 32b9d003..ae17eb3c 100644
--- a/src/views/study/metadata/enrollment/officials/StudyOfficials.vue
+++ b/src/views/study/metadata/enrollment/officials/StudyOfficials.vue
@@ -12,6 +12,8 @@ const router = useRouter();
 const push = usePush();
 
 const studyStore = useStudyStore();
+const routeState = window.history.state;
+const missingFieldsList = (routeState?.missingFields || []).map((f) => f).join(", ");
 
 const formRef = ref<FormInst | null>(null);
 
@@ -175,6 +177,15 @@ const saveMetadata = (e: MouseEvent) => {
         v-else
         :disabled="studyStore.currentStudyRole === 'viewer'"
       >
+        <div v-if="routeState?.missingFields && routeState.missingFields.length">
+          <n-alert type="error">
+            Please fill the following required field(s):
+            <span class="italic">
+              {{ missingFieldsList }}
+            </span>
+          </n-alert>
+        </div>
+
         <CollapsibleCard
           v-for="(item, index) in moduleData.overall_official_list"
           :key="item.id"
diff --git a/src/views/study/metadata/oversight/StudyOversight.vue b/src/views/study/metadata/oversight/StudyOversight.vue
index 5c1a1ebf..34161028 100644
--- a/src/views/study/metadata/oversight/StudyOversight.vue
+++ b/src/views/study/metadata/oversight/StudyOversight.vue
@@ -14,6 +14,8 @@ const studyStore = useStudyStore();
 const formRef = ref<FormInst | null>(null);
 
 // date type: dayjs().format("YYYY-MM-DD HH:mm:ss")
+const routeState = window.history.state;
+const missingFieldsList = (routeState?.missingFields || []).map((f) => f).join(", ");
 
 const moduleData = ref<StudyOversightModule>({
   fda_regulated_device: null,
@@ -128,6 +130,15 @@ const saveMetadata = (e: MouseEvent) => {
         :disabled="studyStore.currentStudyRole === 'viewer'"
         v-else
       >
+        <div class="pb-4" v-if="routeState?.missingFields && routeState.missingFields.length">
+          <n-alert type="error">
+            Please fill the following required field(s):
+            <span class="italic">
+              {{ missingFieldsList }}
+            </span>
+          </n-alert>
+        </div>
+
         <n-form-item label="Human Subject Review Status" path="human_subject_review_status">
           <n-select
             v-model:value="moduleData.human_subject_review_status"
diff --git a/src/views/study/metadata/status/StudyStatus.vue b/src/views/study/metadata/status/StudyStatus.vue
index f0542375..7e84ef07 100644
--- a/src/views/study/metadata/status/StudyStatus.vue
+++ b/src/views/study/metadata/status/StudyStatus.vue
@@ -8,7 +8,6 @@ import type { StudyStatusModule } from "@/types/Study";
 import { baseURL } from "@/utils/constants";
 
 const routeState = window.history.state;
-
 const missingFieldsList = (routeState?.missingFields || []).map((f) => f).join(", ");
 
 const route = useRoute();
@@ -159,7 +158,7 @@ const saveMetadata = (e: MouseEvent) => {
         :disabled="studyStore.currentStudyRole === 'viewer'"
         v-else
       >
-        <div class="pb-4" v-if="routeState.missingfields && routeState.missingfields.length">
+        <div class="pb-4" v-if="routeState?.missingFields && routeState.missingFields.length">
           <n-alert type="error">
             Please fill the following required field(s):
             <span class="italic">
diff --git a/src/views/study/metadata/team/StudyTeam.vue b/src/views/study/metadata/team/StudyTeam.vue
index 3faad36a..8e79ee39 100644
--- a/src/views/study/metadata/team/StudyTeam.vue
+++ b/src/views/study/metadata/team/StudyTeam.vue
@@ -17,9 +17,6 @@ const formRef = ref<FormInst | null>(null);
 
 const routeState = window.history.state;
 const missingFieldsList = (routeState?.missingFields || []).map((f) => f).join(", ");
-console.log(routeState?.missingFields.length, "lklll");
-// const errorFields = errorStore.errorFields;
-// const alertStore = useAlertStore();
 
 const moduleData = reactive<StudyTeam>({
   collaborators: [],
diff --git a/src/views/study/metadata/treatment/arms/StudyArms.vue b/src/views/study/metadata/treatment/arms/StudyArms.vue
index caece73f..812c8429 100644
--- a/src/views/study/metadata/treatment/arms/StudyArms.vue
+++ b/src/views/study/metadata/treatment/arms/StudyArms.vue
@@ -18,6 +18,9 @@ const responseLoading = ref(false);
 
 const formRef = ref<FormInst | null>(null);
 
+const routeState = window.history.state;
+const missingFieldsList = (routeState?.missingFields || []).map((f) => f).join(", ");
+
 const moduleData = reactive<StudyArms>({
   arms: [],
   study_type: "",
@@ -149,7 +152,16 @@ const saveMetadata = (e: MouseEvent) => {
     <FadeTransition>
       <LottieLoader v-if="responseLoading" />
 
-      <div v-else>
+      <div v-else class="flex flex-col gap-4">
+        <div v-if="routeState?.missingFields && routeState.missingFields.length">
+          <n-alert type="error">
+            Please fill the following required field(s):
+            <span class="italic">
+              {{ missingFieldsList }}
+            </span>
+          </n-alert>
+        </div>
+
         <div v-if="!moduleData.study_type">
           <n-alert
             title="A study type should be added before you can add study arms."
diff --git a/src/views/study/metadata/treatment/interventions/StudyInterventions.vue b/src/views/study/metadata/treatment/interventions/StudyInterventions.vue
index 5a5c61b6..d8526e2d 100644
--- a/src/views/study/metadata/treatment/interventions/StudyInterventions.vue
+++ b/src/views/study/metadata/treatment/interventions/StudyInterventions.vue
@@ -18,6 +18,8 @@ const formRef = ref<FormInst | null>(null);
 const moduleData = reactive<StudyInterventions>({
   interventions: [],
 });
+const routeState = window.history.state;
+const missingFieldsList = (routeState?.missingFields || []).map((f) => f).join(", ");
 
 const loading = ref(false);
 const responseLoading = ref(false);
@@ -172,6 +174,15 @@ const saveMetadata = (e: MouseEvent) => {
         :disabled="studyStore.currentStudyRole === 'viewer'"
         v-else
       >
+        <div v-if="routeState?.missingFields && routeState.missingFields.length">
+          <n-alert type="error">
+            Please fill the following required field(s):
+            <span class="italic">
+              {{ missingFieldsList }}
+            </span>
+          </n-alert>
+        </div>
+
         <CollapsibleCard
           v-for="(item, index) in moduleData.interventions"
           :key="item.id"

From e6429cfc620398afe51bd7d31b918232533376cf Mon Sep 17 00:00:00 2001
From: aydawka <aydan.gasimova2@gmail.com>
Date: Fri, 30 May 2025 10:31:28 -0700
Subject: [PATCH 11/11] =?UTF-8?q?fix:=20=F0=9F=90=9B=20add=20header=20to?=
 =?UTF-8?q?=20the=20error=20messages?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/study/dataset/publish/new/NewVersion.vue        | 5 +++--
 src/views/study/metadata/description/StudyDescription.vue | 5 ++---
 src/views/study/metadata/team/StudyTeam.vue               | 5 ++---
 3 files changed, 7 insertions(+), 8 deletions(-)

diff --git a/src/views/study/dataset/publish/new/NewVersion.vue b/src/views/study/dataset/publish/new/NewVersion.vue
index d4a8eb25..e590b087 100644
--- a/src/views/study/dataset/publish/new/NewVersion.vue
+++ b/src/views/study/dataset/publish/new/NewVersion.vue
@@ -128,9 +128,9 @@ function uniqueMetadataIdentifiers(fullMetadata: any) {
   return uniqueFields;
 }
 
-const getNamesForHeader = (metadata, header) => {
+function getNamesForHeader(metadata, header) {
   return metadata.filter((m) => m.metadata_header === header).map((m) => m.name);
-};
+}
 </script>
 
 <template>
@@ -159,6 +159,7 @@ const getNamesForHeader = (metadata, header) => {
                 datasetId: routeParams.datasetId,
               },
               state: {
+                metadata_header: field.metadata_header,
                 missingFields: getNamesForHeader(item.metadata, field.metadata_header),
               },
             }"
diff --git a/src/views/study/metadata/description/StudyDescription.vue b/src/views/study/metadata/description/StudyDescription.vue
index 45c201fb..e8064847 100644
--- a/src/views/study/metadata/description/StudyDescription.vue
+++ b/src/views/study/metadata/description/StudyDescription.vue
@@ -14,6 +14,7 @@ const push = usePush();
 const studyStore = useStudyStore();
 const routeState = window.history.state;
 const missingFieldsList = (routeState?.missingFields || []).map((f) => f).join(", ");
+const metadata_header = routeState?.metadata_header || "";
 
 const formRef = ref<FormInst | null>(null);
 
@@ -360,9 +361,7 @@ const scrollToSection = (key: string) => {
             <div class="pb-4" v-if="routeState?.missingFields && routeState.missingFields.length">
               <n-alert type="error">
                 Please fill the following required field(s):
-                <span class="italic">
-                  {{ missingFieldsList }}
-                </span>
+                <span class="italic"> {{ metadata_header }}:{{ missingFieldsList }} </span>
               </n-alert>
             </div>
 
diff --git a/src/views/study/metadata/team/StudyTeam.vue b/src/views/study/metadata/team/StudyTeam.vue
index 8e79ee39..7abbdf56 100644
--- a/src/views/study/metadata/team/StudyTeam.vue
+++ b/src/views/study/metadata/team/StudyTeam.vue
@@ -17,6 +17,7 @@ const formRef = ref<FormInst | null>(null);
 
 const routeState = window.history.state;
 const missingFieldsList = (routeState?.missingFields || []).map((f) => f).join(", ");
+const metadata_header = routeState?.metadata_header || "";
 
 const moduleData = reactive<StudyTeam>({
   collaborators: [],
@@ -264,9 +265,7 @@ const scrollToSection = (key: string) => {
             <div class="pb-4" v-if="routeState?.missingFields && routeState.missingFields.length">
               <n-alert type="error">
                 Please fill the following required field(s):
-                <span class="italic">
-                  {{ missingFieldsList }}
-                </span>
+                <span class="italic"> {{ metadata_header }}:{{ missingFieldsList }} </span>
               </n-alert>
             </div>