new publishing ui

public/mix-manifest.json

@@ -1,10 +1,10 @@
 {
-    "/js/app.js": "/js/app.js?id=239450b3420afa610c5ca224886f10bb",
-    "/js/script.js": "/js/script.js?id=486f329f14e1f080305e7c109ca928ac",
-    "/js/webportal-script.js": "/js/webportal-script.js?id=fd5980061c5c73a9d216570039251afa",
-    "/js/formbuilder.js": "/js/formbuilder.js?id=d4beed1df0c8551620ef37f6d44fe08f",
-    "/manifest.js": "/manifest.js?id=3ed1124c8f4dcb98acc36de67cb80349",
-    "/css/webportal-app.css": "/css/webportal-app.css?id=c443ef7137096026b2dac7666178e273",
-    "/css/app.css": "/css/app.css?id=db58d0ac7d674a5f1116a90d7176694d",
-    "/js/vendor.js": "/js/vendor.js?id=1bc70e4682ff5afe64dfd102dd3d1f8f"
+    "/js/app.js": "/js/app.js",
+    "/js/script.js": "/js/script.js",
+    "/js/webportal-script.js": "/js/webportal-script.js",
+    "/js/formbuilder.js": "/js/formbuilder.js",
+    "/manifest.js": "/manifest.js",
+    "/css/webportal-app.css": "/css/webportal-app.css",
+    "/css/app.css": "/css/app.css",
+    "/js/vendor.js": "/js/vendor.js"
 }

resources/assets/js/components/ActivityValidation.vue

@@ -1,20 +1,24 @@
 <template>
   <div class="relative w-[365px] bg-n-10">
-    <h6 class="mb-2 font-bold">Validating</h6>
-    <div class="relative rounded-lg border border-n-20 bg-white p-4">
+    <div class="flex justify-between">
+      <h6 class="mb-2 font-bold">Publishing Activity</h6>
       <button
-        v-if="
-          (localStoragePercent ? +localStoragePercent : percentageWidth) ===
-            100 || hasError
-        "
-        class="absolute right-0 top-0 -translate-y-1/2 translate-x-1/2 rounded-full bg-white p-[1px]"
-        @click="stopValidating"
+        class="flex items-center gap-1.5 text-xs font-bold text-bluecoral"
+        @click="handleMinimize"
       >
-        <svg-vue class="text-sm" icon="cross-icon" />
+        <span>EXPAND</span>
+        <svg-vue class="text-[9px]" icon="open-link" />
       </button>
+    </div>
+    <div class="relative rounded-lg border border-n-20 bg-white p-4">
       <div class="flex justify-between">
         <div class="flex space-x-2">
-          <div class="text-sm text-n-50">Multiple Activities</div>
+          <div class="pb-3 text-sm text-n-50" v-if="percentageWidth == 100">
+            Data checking complete. Click continue to publish
+          </div>
+          <div class="text-sm text-n-50" v-else>
+            Checking your data before publication
+          </div>
           <div
             class="relative mx-2 h-5 w-5 rounded-full bg-spring-10 text-xs font-medium text-spring-50"
           >
@@ -25,93 +29,94 @@
             </div>
           </div>
         </div>
+
         <button
-          v-if="
-            (localStoragePercent ? +localStoragePercent : percentageWidth) ==
-            100
-          "
-          class="text-xs font-bold uppercase text-spring-50"
-          @click="startBulkPublish"
+          v-if="percentageWidth !== 100"
+          @click="validationCancelHandler()"
+          class="flex items-center text-xs font-bold uppercase text-bluecoral"
         >
-          proceed
-        </button>
-        <button v-else @click="stopValidating">
           <svg-vue
             v-if="!hasError"
-            class="mr-1 text-lg text-n-40"
-            icon="delete"
+            class="mt-2 fill-bluecoral text-lg text-bluecoral"
+            icon="cross"
           />
+          <span>Cancel</span>
         </button>
       </div>
       <div class="flex items-center justify-between space-x-2">
         <div
-          class="my-5 mr-2 h-1 w-[283px] justify-start rounded-full bg-spring-10"
+          class="my-2 mr-2 h-1.5 w-[283px] flex-1 justify-start rounded-full bg-[#C4C4C4]"
           :class="!hasError ? ' ' : '!mb-2 bg-[#E34D5B]'"
+          v-if="percentageWidth !== 100"
         >
           <div
             v-if="!hasError"
             :style="{
-              width:
-                ((localStoragePercent
-                  ? +localStoragePercent
-                  : percentageWidth) ?? 0) + '%',
+              width: (percentageWidth ?? 0) + '%',
             }"
             class="h-full rounded-full bg-spring-50"
           ></div>
         </div>
-        <span v-if="!hasError" class="text-sm text-[#344054]"
-          >{{
-            isNaN(localStoragePercent ? +localStoragePercent : percentageWidth)
-              ? 0
-              : Math.round(
-                  (localStoragePercent
-                    ? +localStoragePercent
-                    : percentageWidth) * 100
-                ) / 100
-          }}%</span
-        >
-        <span v-else>
+        <span v-if="hasError">
           <svg-vue
             class="mr-1 text-[20px] text-[#E34D5B]"
             icon="warning-fill"
           />
         </span>
       </div>
-      <div v-if="!hasError">
-        <button
-          class="flex space-x-2"
-          @click="showValidatingList = !showValidatingList"
+      <div>
+        <div
+          v-if="percentageWidth === 100"
+          class="flex items-start gap-1 border-b border-[#D0DDE0] pt-1 pb-5 text-xs font-bold text-n-50"
         >
-          <span class="text-sm text-bluecoral">{{
-            showValidatingList ? 'Hide details' : 'Show Details'
-          }}</span>
           <svg-vue
-            class="mr-1 text-[7px] text-bluecoral duration-300"
-            :class="showValidatingList ? 'rotate-180' : ''"
-            icon="dropdown-arrow"
-          />
-        </button>
-        <ul
-          :class="showValidatingList ? 'h-auto  py-2 ' : 'h-0'"
-          class="flex flex-col space-y-2 duration-200"
-        >
-          <li
-            v-for="(name, index) in validationNames"
-            :key="index"
-            class="overflow-x-hidden text-ellipsis whitespace-nowrap text-sm text-n-40 duration-200"
+            icon="warning-activity"
+            class="flex-shrink-0 text-base text-[#E34D5B]"
+          ></svg-vue>
+          <span>
+            There may be data quality issues with
+            {{ totalValidationFailedActivities }} activities. You can still
+            continue to publish
+          </span>
+        </div>
+
+        <div class="flex justify-center pt-2">
+          <div class="flex flex-1 items-center justify-center">
+            <button
+              v-if="percentageWidth === 100 || hasError"
+              @click="validationCancelHandler()"
+              class="flex items-center text-xs font-bold uppercase text-bluecoral"
+            >
+              <svg-vue icon="cross" class="mt-2 text-lg"></svg-vue>
+              <span>Cancel</span>
+            </button>
+          </div>
+          <button
+            v-if="percentageWidth == 100"
+            class="flex flex-1 justify-center rounded border border-bluecoral bg-bluecoral px-3 py-2 text-xs font-bold uppercase text-white"
+            @click="startBulkPublish"
           >
-            {{ name ?? '' }}
-          </li>
-        </ul>
+            <span>proceed</span>
+          </button>
+        </div>
       </div>
-      <div v-else>
+      <div v-if="hasError">
         <span class="text-sm text-[#E34D5B]">Validation failed</span>
       </div>
     </div>
   </div>
 </template>
 <script setup lang="ts">
-import { watch, defineProps, computed, ref, onMounted, defineEmits } from 'vue';
+import {
+  watch,
+  defineProps,
+  computed,
+  ref,
+  onMounted,
+  defineEmits,
+  defineExpose,
+} from 'vue';
+
 import { useStore } from 'Store/activities/index';
 import axios from 'axios';
 
@@ -135,7 +140,6 @@ const props = defineProps({
 const emit = defineEmits(['stopValidation', 'proceed']);
 
 //setting percentage of validation progressbar , to maintain consistency when page is reloaded or navigated
-const localStoragePercent = ref(localStorage.getItem('validationPercent'));
 const showValidatingList = ref(false);
 const hasError = ref(false);
 
@@ -160,14 +164,40 @@ watch(
   }
 );
 
-const stopValidating = () => {
-  emit('stopValidation');
-  axios.get(`/activities/delete-validation-status`).then(() => {
+// const stopValidating = () => {
+//   axios.get(`/activities/delete-validation-status`).then(() => {
+//     store.dispatch('updateStartValidation', false);
+//     store.dispatch('updateValidatingActivities', '');
+//     localStorage.removeItem('validatingActivities');
+//     localStorage.removeItem('activityValidating');
+//   });
+// };
+
+const validationCancelHandler = async () => {
+  try {
+    const res = await axios.get(`/activities/delete-validation-status`);
+
+    // Emitting stop validation event
+    emit('stopValidation');
+
+    // Dispatching actions to update the store
     store.dispatch('updateStartValidation', false);
     store.dispatch('updateValidatingActivities', '');
+
+    // Updating the hasFailedActivities status in the store
+    store.state.bulkActivityPublishStatus.publishing.hasFailedActivities = {
+      ...store.state.bulkActivityPublishStatus.publishing.hasFailedActivities,
+      status: false,
+      data: {} as any,
+      ids: [],
+    };
+
+    // Removing items from localStorage
     localStorage.removeItem('validatingActivities');
     localStorage.removeItem('activityValidating');
-  });
+  } catch (error) {
+    console.error(error);
+  }
 };
 
 const startBulkPublish = () => {
@@ -185,10 +215,27 @@ const percentageWidth = computed(() => {
       : 0) * 100
   );
 });
+
+const handleMinimize = () => {
+  store.dispatch('updateMinimizeScreen', false);
+};
+
 watch(
-  () => percentageWidth?.value,
+  () => store.state.bulkActivityPublishStatus.cancelValidationAndPublishing,
   (value) => {
-    localStorage.setItem('validationPercent', (value ?? 0).toString());
+    if (value) {
+      validationCancelHandler();
+    }
   }
 );
+
+const totalValidationFailedActivities = computed(() => {
+  return Object.values(
+    store.state.bulkActivityPublishStatus.importedActivitiesList
+  ).filter((item) => !item.is_valid).length;
+});
+
+defineExpose({
+  validationCancelHandler,
+});
 </script>