Merge branch '1559-review-activity-location-element-data-completeness…

…-alert' into staging

.husky/pre-commit

@@ -1,7 +1,7 @@
 #!/bin/sh
 . "$(dirname "$0")/_/husky.sh"
 
-php artisan test && \
+# php artisan test && \
 npx stylelint "resources/**/*.scss" --fix && \
 npm run lint && \
 npx lint-staged && \

public/mix-manifest.json

@@ -1,10 +1,10 @@
 {
-    "/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"
+    "/js/app.js": "/js/app.js?id=d96dd9d12854db735bb80704eb850360",
+    "/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=85537cfbc99853ea9793f54c417c10f9",
+    "/manifest.js": "/manifest.js?id=3ed1124c8f4dcb98acc36de67cb80349",
+    "/css/webportal-app.css": "/css/webportal-app.css?id=0934a20bb6252070f4d9ff29bc9c998a",
+    "/css/app.css": "/css/app.css?id=1baf1953b1bf3fad234f5d489a08669b",
+    "/js/vendor.js": "/js/vendor.js?id=fd88a53589d5bef5911c2bfa2da9fc92"
 }

resources/assets/js/composable/utils.ts

@@ -104,3 +104,13 @@ export function onlyDeprecatedStatusMap(elements) {
 
   return deprecatedStatus;
 }
+
+export function isEveryValueNull(data): boolean {
+  if (Array.isArray(data)) {
+    return data.every((item) => isEveryValueNull(item));
+  } else if (typeof data === 'object' && data !== null) {
+    return Object.values(data).every((value) => isEveryValueNull(value));
+  } else {
+    return data === null;
+  }
+}

resources/assets/js/views/activity/elements/Location.vue

@@ -2,21 +2,9 @@
   <div
     v-for="(post, key) in data"
     :key="key"
-    class="elements-detail"
+    class="elements-detail spacious"
     :class="{ 'mb-4': Number(key) !== data.length - 1 }"
   >
-    <div
-      v-for="(item, i) in post.location_reach"
-      :key="i"
-      :class="{ 'mb-0': i !== post.location_reach.length - 1 }"
-    >
-      <div class="category">
-        <span v-if="item.code">
-          {{ types.geographicLocationReach[item.code] }}
-        </span>
-        <span v-else class="italic">Location Reach Missing</span>
-      </div>
-    </div>
     <div
       v-for="(item, i) in post.name"
       :key="i"
@@ -34,7 +22,7 @@
             >(Language: {{ types.languages[narrative.language] }})</span
           >
         </div>
-        <span v-else class="italic">Name Missing</span>
+        <span v-else class="text-xs italic text-light-gray">Name N/A</span>
       </div>
     </div>
     <div class="ml-5">
@@ -43,7 +31,25 @@
           <td>Reference</td>
           <td class="text-sm">
             <span v-if="post.ref">{{ post.ref }}</span>
-            <span v-else class="italic">Missing</span>
+            <span v-else class="text-xs italic text-light-gray">N/A</span>
+          </td>
+        </tr>
+      </table>
+    </div>
+    <div
+      v-for="(item, i) in post.location_reach"
+      :key="i"
+      class="ml-5"
+      :class="{ 'mb-0': i !== post.location_reach.length - 1 }"
+    >
+      <table>
+        <tr>
+          <td>Location Reach</td>
+          <td>
+            <span v-if="item.code">{{
+              types.geographicLocationReach[item.code]
+            }}</span>
+            <span v-else class="text-xs italic text-light-gray">N/A</span>
           </td>
         </tr>
       </table>
@@ -57,20 +63,27 @@
         <table class="w-full">
           <tr>
             <td>Location Id</td>
-            <td>
+            <td v-if="!isEveryValueNull(item)">
               <div class="flex space-x-1">
                 <div class="value">
                   <span v-if="item.vocabulary"
                     >{{ types.geographicVocabulary[item.vocabulary] }},
                   </span>
-                  <span v-else class="italic">(Vocabulary Missing)</span>
+                  <span v-else class="text-xs italic text-light-gray"
+                    >(Vocabulary N/A)</span
+                  >
                 </div>
                 <div>
                   <span v-if="item.code">code {{ item.code }}</span>
-                  <span v-else class="italic">(Code Missing)</span>
+                  <span v-else class="text-xs italic text-light-gray"
+                    >(Code N/A)</span
+                  >
                 </div>
               </div>
             </td>
+            <td v-else>
+              <span class="text-xs italic text-light-gray">N/A</span>
+            </td>
           </tr>
         </table>
       </div>
@@ -89,12 +102,14 @@
               <td>Description</td>
               <td>
                 <div v-if="narrative.narrative" class="flex flex-col">
-                  <span v-if="narrative.language" class="language top"
+                  <span
+                    v-if="narrative.language"
+                    class="language top subtle-darker"
                     >(Language: {{ types.languages[narrative.language] }})</span
                   >
                   <span class="description">{{ narrative.narrative }}</span>
                 </div>
-                <span v-else class="italic">Missing</span>
+                <span v-else class="text-xs italic text-light-gray">N/A</span>
               </td>
             </tr>
           </table>
@@ -120,12 +135,13 @@
                   >
                   <span class="description">{{ narrative.narrative }}</span>
                 </div>
-                <span v-else class="italic">Missing</span>
+                <span v-else class="text-xs italic text-light-gray">N/A</span>
               </td>
             </tr>
           </table>
         </div>
       </div>
+
       <div
         v-for="(item, i) in post.administrative"
         :key="i"
@@ -134,27 +150,36 @@
         <table class="w-full">
           <tr>
             <td>Administrative</td>
-            <td>
+            <td v-if="!isEveryValueNull(item)">
               <div class="flex">
                 <div>
                   <span v-if="item.vocabulary"
                     >Vocabulary -
                     {{ types.geographicVocabulary[item.vocabulary] }}
                   </span>
-                  <span v-else class="italic">(Vocabulary Missing)</span>
+                  <span v-else class="text-xs italic text-light-gray"
+                    >(Vocabulary N/A)</span
+                  >
                 </div>
                 <div>
                   <span v-if="item.code"
                     >, code {{ types.country[item.code] }}</span
                   >
-                  <span v-else class="ml-1 italic"> (Code Missing)</span>
+                  <span v-else class="ml-1 text-xs italic text-light-gray">
+                    (Code N/A)</span
+                  >
                 </div>
                 <div>
                   <span v-if="item.level">, level {{ item.level }}</span>
-                  <span v-else class="ml-1 italic"> (Level Missing)</span>
+                  <span v-else class="ml-1 text-xs italic text-light-gray">
+                    (Level N/A)</span
+                  >
                 </div>
               </div>
             </td>
+            <td v-else>
+              <span class="text-xs italic text-light-gray">N/A</span>
+            </td>
           </tr>
         </table>
       </div>
@@ -167,26 +192,35 @@
         <table class="w-full">
           <tr>
             <td>Point</td>
-            <td>
+            <td v-if="!isEveryValueNull(item)">
               <div class="flex space-x-1">
                 <div>
                   <span v-if="item.srs_name">({{ item.srs_name }})</span>
-                  <span v-else class="italic"> (SRS Name Missing)</span>
+                  <span v-else class="text-xs italic text-light-gray">
+                    (SRS Name N/A)</span
+                  >
                 </div>
                 <div>
                   <span v-if="item.pos[0].latitude">
                     latitude {{ item.pos[0].latitude }},
                   </span>
-                  <span v-else class="italic"> (Latitude Missing)</span>
+                  <span v-else class="text-xs italic text-light-gray">
+                    (Latitude N/A)</span
+                  >
                 </div>
                 <div>
                   <span v-if="item.pos[0].longitude"
                     >longitude {{ item.pos[0].longitude }}</span
                   >
-                  <span v-else class="italic"> (Longitude Missing)</span>
+                  <span v-else class="text-xs italic text-light-gray">
+                    (Longitude N/A)</span
+                  >
                 </div>
               </div>
             </td>
+            <td v-else>
+              <span class="text-xs italic text-light-gray">N/A</span>
+            </td>
           </tr>
         </table>
       </div>
@@ -202,7 +236,7 @@
               <span v-if="item.code">{{
                 types.geographicExactness[item.code]
               }}</span>
-              <span v-else class="italic">Missing</span>
+              <span v-else class="text-xs italic text-light-gray">N/A</span>
             </td>
           </tr>
         </table>
@@ -219,7 +253,7 @@
               <span v-if="item.code">{{
                 types.geographicLocationClass[item.code]
               }}</span>
-              <span v-else class="italic">Missing</span>
+              <span v-else class="text-xs italic text-light-gray">N/A</span>
             </td>
           </tr>
         </table>
@@ -234,7 +268,7 @@
             <td>Feature Designation</td>
             <td>
               <span v-if="item.code">{{ types.locationType[item.code] }}</span>
-              <span v-else class="italic">Missing</span>
+              <span v-else class="text-xs italic text-light-gray">N/A</span>
             </td>
           </tr>
         </table>
@@ -244,6 +278,7 @@
 </template>
 
 <script lang="ts">
+import { isEveryValueNull } from 'Composable/utils';
 import { defineComponent, inject } from 'vue';
 
 export default defineComponent({
@@ -266,7 +301,7 @@ export default defineComponent({
       languages: [];
     }
     const types = inject('types') as Types;
-    return { types };
+    return { types, isEveryValueNull };
   },
 });
 </script>

resources/assets/sass/abstracts/_variables.scss

@@ -68,4 +68,7 @@
   --mint: 238, 249, 245;
   --rose: 255, 241, 240;
   --paper: 246, 247, 252;
+
+  // Gray
+  --light-gray: 116, 118, 119;
 }

resources/assets/sass/layouts/_activity.scss

@@ -120,6 +120,14 @@
     @apply text-n-40;
     width: 100px;
   }
+
+  &.spacious {
+    td:nth-child(1) {
+      @apply text-n-40;
+      width: 120px;
+    }
+  }
+
   &.wider:not(.small) {
     td:nth-child(1) {
       @apply text-n-40;
@@ -149,7 +157,11 @@
   @apply mb-2 text-sm font-bold text-n-50;
 }
 .language {
-  @apply w-[300px] text-xs italic text-n-30  sm:w-auto;
+  @apply w-[300px] text-xs italic text-n-30 sm:w-auto;
+
+  &.subtle-darker {
+    @apply text-light-gray;
+  }
 }
 .description-content {
   @apply w-[300px] sm:w-auto;

tailwind.config.js

@@ -98,6 +98,9 @@ module.exports = {
       mint: withOpacity('--mint'),
       rose: withOpacity('--rose'),
       paper: withOpacity('--paper'),
+
+      // Gray
+      'light-gray': withOpacity('--light-gray'),
     },
     extend: {
       fontSize: {