From 4e70d356aff3bb1bca31180f6a84c1a897cf8270 Mon Sep 17 00:00:00 2001
From: Fidal Mathew <84982038+FidalMathew@users.noreply.github.com>
Date: Thu, 18 Jan 2024 06:28:22 +0000
Subject: [PATCH 1/4] add reference and scroll in EditView

---
 .../channelEdit/components/edit/EditView.vue  | 84 +++++++++++++++----
 .../channelEdit/vuex/contentNode/getters.js   |  7 ++
 2 files changed, 76 insertions(+), 15 deletions(-)

diff --git a/contentcuration/contentcuration/frontend/channelEdit/components/edit/EditView.vue b/contentcuration/contentcuration/frontend/channelEdit/components/edit/EditView.vue
index 4a1e0cebb5..de3d6ddeb4 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/components/edit/EditView.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/components/edit/EditView.vue
@@ -13,11 +13,7 @@
         <ToolBar v-if="showTabs" :flat="!tabsElevated" class="tabs" color="white">
           <Tabs v-model="currentTab" slider-color="primary" height="64px">
             <!-- Details tab -->
-            <VTab
-              ref="detailstab"
-              :href="`#${tabs.DETAILS}`"
-              @click="trackTab('Details')"
-            >
+            <VTab ref="detailstab" :href="`#${tabs.DETAILS}`" @click="trackTab('Details')">
               {{ $tr(tabs.DETAILS) }}
               <VTooltip v-if="!areDetailsValid || !areFilesValid" top lazy>
                 <template #activator="{ on }">
@@ -72,21 +68,22 @@
               </VAlert>
               <VAlert v-else-if="!areDetailsValid" :value="true" type="error" outline icon="error">
                 {{ $tr('errorBannerText') }}
+                <ul>
+                  <li
+                    v-for="(error, index) in errorsList"
+                    :key="index"
+                    @click="handleErrorClick(error)"
+                  >
+                    {{ error }}
+                  </li>
+                </ul>
               </VAlert>
-              <DetailsTabView
-                :key="nodeIds.join('-')"
-                ref="detailsTab"
-                :nodeIds="nodeIds"
-              />
+              <DetailsTabView :key="nodeIds.join('-')" ref="detailsTab" :nodeIds="nodeIds" />
             </VTabItem>
             <VTabItem :key="tabs.QUESTIONS" ref="questionwindow" :value="tabs.QUESTIONS" lazy>
               <AssessmentTab :nodeId="nodeIds[0]" />
             </VTabItem>
-            <VTabItem
-              :key="tabs.RELATED"
-              :value="tabs.RELATED"
-              lazy
-            >
+            <VTabItem :key="tabs.RELATED" :value="tabs.RELATED" lazy>
               <RelatedResourcesTab :nodeId="nodeIds[0]" />
             </VTabItem>
           </VTabsItems>
@@ -133,6 +130,7 @@
       return {
         currentTab: null,
         tabsElevated: false,
+        errorsList: [],
       };
     },
     computed: {
@@ -141,6 +139,7 @@
         'getContentNodeDetailsAreValid',
         'getContentNodeFilesAreValid',
         'getImmediateRelatedResourcesCount',
+        'getNodeDetailsErrorsList',
       ]),
       ...mapGetters('assessmentItem', ['getAssessmentItemsAreValid', 'getAssessmentItemsCount']),
       firstNode() {
@@ -182,6 +181,8 @@
         return this.$tr('editingMultipleCount', totals);
       },
       areDetailsValid() {
+        this.setErrors(this.getNodeDetailsErrorsList(this.nodeIds[0]));
+
         return !this.oneSelected || this.getContentNodeDetailsAreValid(this.nodeIds[0]);
       },
       areAssessmentItemsValid() {
@@ -243,6 +244,59 @@
       trackTab(name) {
         this.$analytics.trackClick('channel_editor_modal', name);
       },
+      handleErrorClick(error) {
+        const errorRefs = {
+          Title: 'title',
+          License: 'license',
+          'Copyright holder': 'copyright_holder',
+          Completion: 'randomize',
+          'Learning Activity': 'learning_activities',
+        };
+
+        const errorRef = errorRefs[error];
+
+        const targetElement = this.$refs.detailsTab.$refs[errorRef];
+
+        console.log(targetElement, 'target');
+
+        if (!targetElement) {
+          console.error(`Target element ref not found for error: ${error}`);
+        }
+
+        const nativeElement = targetElement.$el;
+
+        if (nativeElement.scrollIntoView) {
+          nativeElement.scrollIntoView({ behavior: 'smooth' });
+        }
+      },
+      setErrors(errorTags) {
+        const errorsTagList = this.getNodeDetailsErrorsList(errorTags);
+        // fetch unique errors
+        // set that to errorsList
+        const errorRefs = {
+          TITLE_REQUIRED: 'Title',
+          LICENSE_REQUIRED: 'License',
+          COPYRIGHT_HOLDER_REQUIRED: 'Copyright holder',
+          MASTERY_MODEL_REQUIRED: 'Completion',
+          MASTERY_MODEL_M_REQUIRED: 'Completion',
+          MASTERY_MODEL_M_WHOLE_NUMBER: 'Completion',
+          MASTERY_MODEL_M_GT_ZERO: 'Completion',
+          MASTERY_MODEL_M_LTE_N: 'Completion',
+          MASTERY_MODEL_N_REQUIRED: 'Completion',
+          MASTERY_MODEL_N_WHOLE_NUMBER: 'Completion',
+          MASTERY_MODEL_N_GT_ZERO: 'Completion',
+          LEARNING_ACTIVITY_REQUIRED: 'Learning Activity',
+        };
+
+        const uniqueErrorsSet = new Set();
+        for (const error of errorsTagList) {
+          if (Object.prototype.hasOwnProperty.call(errorRefs, error)) {
+            uniqueErrorsSet.add(errorRefs[error]);
+          }
+        }
+        const arr = [...uniqueErrorsSet];
+        this.errorsList = arr;
+      },
       /*
        * @public
        */
diff --git a/contentcuration/contentcuration/frontend/channelEdit/vuex/contentNode/getters.js b/contentcuration/contentcuration/frontend/channelEdit/vuex/contentNode/getters.js
index e38a191164..8f9a80f742 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/vuex/contentNode/getters.js
+++ b/contentcuration/contentcuration/frontend/channelEdit/vuex/contentNode/getters.js
@@ -129,6 +129,13 @@ export function getContentNodeDetailsAreValid(state) {
   };
 }
 
+export function getNodeDetailsErrorsList(state) {
+  return function(contentNodeId) {
+    const contentNode = state.contentNodesMap[contentNodeId];
+    return getNodeDetailsErrors(contentNode);
+  };
+}
+
 export function getContentNodeFilesAreValid(state, getters, rootState, rootGetters) {
   return function(contentNodeId) {
     const contentNode = state.contentNodesMap[contentNodeId];

From fe6ff5c110852ce973727d6634e6625cde1bfb07 Mon Sep 17 00:00:00 2001
From: Fidal Mathew <84982038+FidalMathew@users.noreply.github.com>
Date: Thu, 18 Jan 2024 13:50:23 +0000
Subject: [PATCH 2/4] fix bug

---
 .../frontend/channelEdit/components/edit/EditView.vue          | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/contentcuration/contentcuration/frontend/channelEdit/components/edit/EditView.vue b/contentcuration/contentcuration/frontend/channelEdit/components/edit/EditView.vue
index de3d6ddeb4..e3737b0973 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/components/edit/EditView.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/components/edit/EditView.vue
@@ -181,8 +181,7 @@
         return this.$tr('editingMultipleCount', totals);
       },
       areDetailsValid() {
-        this.setErrors(this.getNodeDetailsErrorsList(this.nodeIds[0]));
-
+        this.setErrors(this.nodeIds[0]);
         return !this.oneSelected || this.getContentNodeDetailsAreValid(this.nodeIds[0]);
       },
       areAssessmentItemsValid() {

From a963480e7a745c24f51b4511323030752775af1e Mon Sep 17 00:00:00 2001
From: Fidal Mathew <84982038+FidalMathew@users.noreply.github.com>
Date: Sat, 20 Jan 2024 04:22:16 +0000
Subject: [PATCH 3/4] fix minor bugs

---
 .../channelEdit/components/edit/EditView.vue  | 67 +++++++++++--------
 1 file changed, 39 insertions(+), 28 deletions(-)

diff --git a/contentcuration/contentcuration/frontend/channelEdit/components/edit/EditView.vue b/contentcuration/contentcuration/frontend/channelEdit/components/edit/EditView.vue
index e3737b0973..1ef8982633 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/components/edit/EditView.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/components/edit/EditView.vue
@@ -74,7 +74,7 @@
                     :key="index"
                     @click="handleErrorClick(error)"
                   >
-                    {{ error }}
+                    <a class="error-ref">  {{ error }} </a>
                   </li>
                 </ul>
               </VAlert>
@@ -107,6 +107,14 @@
   import ToolBar from 'shared/views/ToolBar';
   import Tabs from 'shared/views/Tabs';
 
+  const EditFields = {
+    TITLE: 'Title',
+    LICENSE: 'License',
+    COPYRIGHT_HOLDER: 'Copyright holder',
+    COMPLETION: 'Completion',
+    LEARNING_ACTIVITY: 'Learning activity',
+  };
+
   export default {
     name: 'EditView',
     components: {
@@ -245,51 +253,49 @@
       },
       handleErrorClick(error) {
         const errorRefs = {
-          Title: 'title',
-          License: 'license',
-          'Copyright holder': 'copyright_holder',
-          Completion: 'randomize',
-          'Learning Activity': 'learning_activities',
+          [EditFields.TITLE]: 'title',
+          [EditFields.LICENSE]: 'license',
+          [EditFields.COPYRIGHT_HOLDER]: 'copyright_holder',
+          [EditFields.COMPLETION]: 'randomize',
+          [EditFields.LEARNING_ACTIVITY]: 'learning_activities',
         };
 
         const errorRef = errorRefs[error];
-
         const targetElement = this.$refs.detailsTab.$refs[errorRef];
 
-        console.log(targetElement, 'target');
-
         if (!targetElement) {
           console.error(`Target element ref not found for error: ${error}`);
+          return;
         }
 
         const nativeElement = targetElement.$el;
-
-        if (nativeElement.scrollIntoView) {
-          nativeElement.scrollIntoView({ behavior: 'smooth' });
-        }
+        const containerElement = this.$refs.editview;
+        const position = nativeElement.getBoundingClientRect();
+        const offsetY = position.top - nativeElement.clientHeight - 50; //  additional padding of 50 to adjust position.
+        containerElement.scrollTo({ top: offsetY, behavior: 'smooth' });
       },
-      setErrors(errorTags) {
-        const errorsTagList = this.getNodeDetailsErrorsList(errorTags);
+      setErrors(nodeId) {
+        const errorsTagList = this.getNodeDetailsErrorsList(nodeId);
         // fetch unique errors
         // set that to errorsList
         const errorRefs = {
-          TITLE_REQUIRED: 'Title',
-          LICENSE_REQUIRED: 'License',
-          COPYRIGHT_HOLDER_REQUIRED: 'Copyright holder',
-          MASTERY_MODEL_REQUIRED: 'Completion',
-          MASTERY_MODEL_M_REQUIRED: 'Completion',
-          MASTERY_MODEL_M_WHOLE_NUMBER: 'Completion',
-          MASTERY_MODEL_M_GT_ZERO: 'Completion',
-          MASTERY_MODEL_M_LTE_N: 'Completion',
-          MASTERY_MODEL_N_REQUIRED: 'Completion',
-          MASTERY_MODEL_N_WHOLE_NUMBER: 'Completion',
-          MASTERY_MODEL_N_GT_ZERO: 'Completion',
-          LEARNING_ACTIVITY_REQUIRED: 'Learning Activity',
+          TITLE_REQUIRED: EditFields.TITLE,
+          LICENSE_REQUIRED: EditFields.LICENSE,
+          COPYRIGHT_HOLDER_REQUIRED: EditFields.COPYRIGHT_HOLDER,
+          MASTERY_MODEL_REQUIRED: EditFields.COMPLETION,
+          MASTERY_MODEL_M_REQUIRED: EditFields.COMPLETION,
+          MASTERY_MODEL_M_WHOLE_NUMBER: EditFields.COMPLETION,
+          MASTERY_MODEL_M_GT_ZERO: EditFields.COMPLETION,
+          MASTERY_MODEL_M_LTE_N: EditFields.COMPLETION,
+          MASTERY_MODEL_N_REQUIRED: EditFields.COMPLETION,
+          MASTERY_MODEL_N_WHOLE_NUMBER: EditFields.COMPLETION,
+          MASTERY_MODEL_N_GT_ZERO: EditFields.COMPLETION,
+          LEARNING_ACTIVITY_REQUIRED: EditFields.LEARNING_ACTIVITY,
         };
 
         const uniqueErrorsSet = new Set();
         for (const error of errorsTagList) {
-          if (Object.prototype.hasOwnProperty.call(errorRefs, error)) {
+          if (errorRefs[error]) {
             uniqueErrorsSet.add(errorRefs[error]);
           }
         }
@@ -368,4 +374,9 @@
     overflow: auto;
   }
 
+  .error-ref {
+    color: inherit;
+    text-decoration: underline;
+  }
+
 </style>

From 6ba65d11098eb3aa78cea1289a48f166f4d06cf3 Mon Sep 17 00:00:00 2001
From: Fidal Mathew <84982038+FidalMathew@users.noreply.github.com>
Date: Sat, 20 Jan 2024 11:16:11 +0000
Subject: [PATCH 4/4] translate fields

---
 .../channelEdit/components/edit/EditView.vue    | 17 +++++++++++------
 1 file changed, 11 insertions(+), 6 deletions(-)

diff --git a/contentcuration/contentcuration/frontend/channelEdit/components/edit/EditView.vue b/contentcuration/contentcuration/frontend/channelEdit/components/edit/EditView.vue
index 1ef8982633..f6fbd41659 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/components/edit/EditView.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/components/edit/EditView.vue
@@ -74,7 +74,7 @@
                     :key="index"
                     @click="handleErrorClick(error)"
                   >
-                    <a class="error-ref">  {{ error }} </a>
+                    <a class="error-ref"> {{ $tr(error) }} </a>
                   </li>
                 </ul>
               </VAlert>
@@ -108,11 +108,11 @@
   import Tabs from 'shared/views/Tabs';
 
   const EditFields = {
-    TITLE: 'Title',
-    LICENSE: 'License',
-    COPYRIGHT_HOLDER: 'Copyright holder',
-    COMPLETION: 'Completion',
-    LEARNING_ACTIVITY: 'Learning activity',
+    TITLE: 'titleLabel',
+    LICENSE: 'licenseLabel',
+    COPYRIGHT_HOLDER: 'copyrightHolderLabel',
+    COMPLETION: 'completionLabel',
+    LEARNING_ACTIVITY: 'learningActivityLabel',
   };
 
   export default {
@@ -325,6 +325,11 @@
       errorBannerText: 'Please provide the required information',
       editingMultipleCount:
         'Editing details for {topicCount, plural,\n =1 {# folder}\n other {# folders}}, {resourceCount, plural,\n =1 {# resource}\n other {# resources}}',
+      titleLabel: 'Title',
+      licenseLabel: 'License',
+      copyrightHolderLabel: 'Copyright holder',
+      completionLabel: 'Completion',
+      learningActivityLabel: 'Learning activity',
     },
   };