Draft: 1196-contact-info-ui-fix

public/mix-manifest.json

@@ -1,10 +1,10 @@
 {
-    "/js/app.js": "/js/app.js?id=6fde52b6777e9f01abc0788f7970ca00",
+    "/js/app.js": "/js/app.js?id=1cbee339cffd63e68511ff9c364cc247",
     "/js/script.js": "/js/script.js?id=4920eb85d84da1e87cb71769c04a12a2",
     "/js/webportal-script.js": "/js/webportal-script.js?id=f9c23d4bccd261db9414465886315f45",
     "/js/formbuilder.js": "/js/formbuilder.js?id=151384c2b4e7d700f9822f8de83ea9f5",
     "/manifest.js": "/manifest.js?id=3ed1124c8f4dcb98acc36de67cb80349",
     "/css/webportal-app.css": "/css/webportal-app.css?id=73bbfd8fe9a130f4a36272473e66dca9",
     "/css/app.css": "/css/app.css?id=05319deec7a76207709e2042ba0c4e87",
-    "/js/vendor.js": "/js/vendor.js?id=c2e49a212b42e7c3e897e62227a205a6"
+    "/js/vendor.js": "/js/vendor.js?id=37611b9bd499199676dd578c549f9ac8"
 }

resources/assets/js/composable/helper.ts

@@ -0,0 +1,15 @@
+/*
+ * Helper functions
+ */
+
+
+/*
+ * Check if given element is empty or null
+ */
+export default function isEmpty(element, key = ''){
+  if(key === ''){
+    return element === '' || element === null;
+  }
+
+  return element[key] === '' || element[key] === null;
+}

resources/assets/js/composable/title.ts

@@ -19,7 +19,7 @@ function getActivityTitle(
       }
     }
 
-    // default title return if language does not exists in data
+    // default title return if language does not exist in data
     title = data['0'].narrative && data['0'].narrative !== '' ? data['0'].narrative : 'Untitled';
   }
   return title;

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

@@ -28,7 +28,7 @@
         <tr class="multiline">
           <td>Narrative</td>
           <td>
-            <div v-if="item.narrative" class="flex flex-col">
+            <div v-if="!isEmpty(item.narrative)" class="flex flex-col">
               <span v-if="item.language" class="language top">
                 (Language: {{ types.languages[item.language] }})
               </span>
@@ -48,6 +48,7 @@
 import { defineComponent, inject } from 'vue';
 
 import moment from 'moment';
+import isEmpty from 'Composable/helper';
 
 export default defineComponent({
   name: 'ActivityDate',
@@ -71,5 +72,6 @@ export default defineComponent({
 
     return { types, formatDate };
   },
+  methods: { isEmpty },
 });
 </script>

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

@@ -14,7 +14,7 @@
         :class="{ 'mb-4': Number(key) !== data.condition.length - 1 }"
       >
         <div class="mb-2 text-sm font-bold">
-          <div v-if="post.condition_type">
+          <div v-if="!isEmpty(post.condition_type)">
             {{ types.conditionType[post.condition_type] }}
           </div>
           <span v-else class="italic">Type Missing</span>
@@ -29,7 +29,7 @@
             >
               <td>Narrative</td>
               <td>
-                <div v-if="item.narrative" class="flex flex-col">
+                <div v-if="!isEmpty(item.narrative)" class="flex flex-col">
                   <span v-if="item.language" class="language top"
                     >(Language: {{ types.languages[item.language] }})</span
                   >
@@ -51,6 +51,7 @@
 <script lang="ts">
 import { defineComponent, inject } from 'vue';
 import dateFormat from 'Composable/dateFormat';
+import isEmpty from 'Composable/helper';
 
 export default defineComponent({
   name: 'ActivityConditions',
@@ -70,5 +71,6 @@ export default defineComponent({
 
     return { types, dateFormat };
   },
+  methods: { isEmpty },
 });
 </script>

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

@@ -6,7 +6,7 @@
     :class="{ 'mb-4': Number(key) !== data.length - 1 }"
   >
     <div class="category text-sm font-bold">
-      <span v-if="post.type">{{ types.contactType[post.type] }}</span>
+      <span v-if="!isEmpty(post.type)">{{ types.contactType[post.type] }}</span>
       <span v-else class="italic">Type Missing</span>
     </div>
 
@@ -27,13 +27,17 @@
                 <div class="language mb-1.5">
                   (Language:
                   {{
-                    narrative.language
-                      ? types.languages[narrative.language]
-                      : 'Missing'
+                    isEmpty(narrative, 'language')
+                      ? 'Not Available'
+                      : types.languages[narrative.language]
                   }})
                 </div>
                 <div class="w-[500px] max-w-full">
-                  {{ narrative.narrative ?? 'Missing' }}
+                  {{
+                    isEmpty(narrative, 'narrative')
+                      ? 'Missing'
+                      : narrative.narrative
+                  }}
                 </div>
               </div>
             </td>
@@ -52,13 +56,17 @@
                 <div class="language mb-1.5">
                   (Language:
                   {{
-                    narrative.language
-                      ? types.languages[narrative.language]
-                      : 'Missing'
+                    isEmpty(narrative, 'language')
+                      ? 'Not Available'
+                      : types.languages[narrative.language]
                   }})
                 </div>
                 <div class="w-[500px] max-w-full">
-                  {{ narrative.narrative ?? 'Missing' }}
+                  {{
+                    isEmpty(narrative, 'narrative')
+                      ? 'Missing'
+                      : narrative.narrative
+                  }}
                 </div>
               </div>
             </td>
@@ -78,13 +86,17 @@
                 <div class="language mb-1.5">
                   (Language:
                   {{
-                    narrative.language
-                      ? types.languages[narrative.language]
-                      : 'Missing'
+                    isEmpty(narrative, 'language')
+                      ? 'Not Available'
+                      : types.languages[narrative.language]
                   }})
                 </div>
                 <div class="w-[500px] max-w-full">
-                  {{ narrative.narrative ?? 'Missing' }}
+                  {{
+                    isEmpty(narrative, 'narrative')
+                      ? 'Missing'
+                      : narrative.narrative
+                  }}
                 </div>
               </div>
             </td>
@@ -103,13 +115,17 @@
                 <div class="language mb-1.5">
                   (Language:
                   {{
-                    narrative.language
-                      ? types.languages[narrative.language]
-                      : 'Missing'
+                    isEmpty(narrative, 'language')
+                      ? 'Not Available'
+                      : types.languages[narrative.language]
                   }})
                 </div>
                 <div class="w-[500px] max-w-full">
-                  {{ narrative.narrative ?? 'Missing' }}
+                  {{
+                    isEmpty(narrative, 'narrative')
+                      ? 'Missing'
+                      : narrative.narrative
+                  }}
                 </div>
               </div>
             </td>
@@ -126,7 +142,11 @@
                 }"
               >
                 <div class="w-[500px] max-w-full">
-                  {{ email_value.email ?? 'Missing' }}
+                  {{
+                    isEmpty(email_value, 'email')
+                      ? 'Missing'
+                      : email_value.email
+                  }}
                 </div>
               </div>
             </td>
@@ -143,7 +163,7 @@
                 }"
               >
                 <div class="w-[500px] max-w-full">
-                  {{ tel.telephone ?? 'Missing' }}
+                  {{ isEmpty(tel, 'telephone') ? 'Missing' : tel.telephone }}
                 </div>
               </div>
             </td>
@@ -160,7 +180,7 @@
                 }"
               >
                 <div class="w-[500px] max-w-full">
-                  {{ w.website ?? 'Missing' }}
+                  {{ isEmpty(w, 'website') ? 'Missing' : w.website }}
                 </div>
               </div>
             </td>
@@ -183,13 +203,17 @@
                   <div class="language mb-1.5">
                     (Language:
                     {{
-                      narrative.language
-                        ? types.languages[narrative.language]
-                        : 'Not Available'
+                      isEmpty(narrative, 'language')
+                        ? 'Not Available'
+                        : types.languages[narrative.language]
                     }})
                   </div>
                   <div class="w-[500px] max-w-full">
-                    {{ narrative.narrative ?? 'Not Available' }}
+                    {{
+                      isEmpty(narrative, 'narrative')
+                        ? 'Missing'
+                        : narrative.narrative
+                    }}
                   </div>
                 </div>
               </div>
@@ -203,7 +227,7 @@
 
 <script lang="ts">
 import { defineComponent, inject } from 'vue';
-
+import isEmpty from 'Composable/helper';
 export default defineComponent({
   name: 'ActivityContactInfo',
   components: {},
@@ -222,5 +246,6 @@ export default defineComponent({
 
     return { types };
   },
+  methods: { isEmpty },
 });
 </script>

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

@@ -5,7 +5,7 @@
     :class="{ 'mb-4': Number(key) !== data.length - 1 }"
   >
     <div class="description-type mb-2 text-sm font-bold">
-      <span v-if="post.type">
+      <span v-if="!isEmpty(post.type)">
         {{ types.descriptionType[post.type] }}
       </span>
       <span v-else class="italic">Type Missing</span>
@@ -16,7 +16,7 @@
       :class="{ 'mb-4': i !== post.narrative.length - 1 }"
       class="description-content text-sm"
     >
-      <div v-if="item.narrative" class="flex flex-col">
+      <div v-if="!isEmpty(item.narrative)" class="flex flex-col">
         <span v-if="item.language" class="language mb-1.5">
           (Language: {{ types.languages[item.language] }})
         </span>
@@ -31,6 +31,7 @@
 
 <script lang="ts">
 import { defineComponent, inject } from 'vue';
+import isEmpty from 'Composable/helper';
 
 export default defineComponent({
   name: 'ActivityDescription',
@@ -49,5 +50,6 @@ export default defineComponent({
     const types = inject('types') as Types;
     return { types };
   },
+  methods: { isEmpty },
 });
 </script>

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

@@ -7,7 +7,11 @@
   >
     <div class="category">
       <span v-if="post.type">
-        {{ types.humanitarianScopeType[post.type] ?? 'Missing' }}
+        {{
+          isEmpty(types.humanitarianScopeType[post.type])
+            ? 'Missing'
+            : types.humanitarianScopeType[post.type]
+        }}
       </span>
       <span v-else>Vocabulary Missing</span>
     </div>
@@ -18,7 +22,9 @@
             <td>Vocabulary</td>
             <td>
               {{
-                types.humanitarianScopeVocabulary[post.vocabulary] ?? 'Missing'
+                isEmpty(types.humanitarianScopeVocabulary[post.vocabulary])
+                  ? 'Missing'
+                  : types.humanitarianScopeVocabulary[post.vocabulary]
               }}
             </td>
           </tr>
@@ -38,7 +44,7 @@
           <tr>
             <td>Code</td>
             <td>
-              {{ post.code ?? 'Missing' }}
+              {{ isEmpty(post.code) ? 'Missing' : post.code }}
             </td>
           </tr>
           <tr>
@@ -53,13 +59,17 @@
                 <div class="language mb-1.5">
                   (Language:
                   {{
-                    narrative.language
-                      ? types.languages[narrative.language]
-                      : 'Missing'
+                    isEmpty(narrative.language)
+                      ? 'Missing'
+                      : types.languages[narrative.language]
                   }})
                 </div>
                 <div class="w-[500px] max-w-full">
-                  {{ narrative.narrative ?? 'Missing' }}
+                  {{
+                    isEmpty(narrative.narrative)
+                      ? 'Missing'
+                      : narrative.narrative
+                  }}
                 </div>
               </div>
             </td>
@@ -72,6 +82,7 @@
 
 <script setup lang="ts">
 import { defineProps, inject } from 'vue';
+import isEmpty from '../../../composable/helper';
 
 defineProps({
   data: {

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

@@ -6,14 +6,14 @@
     :class="{ 'mb-4': Number(key) !== data.length - 1 }"
   >
     <div class="mb-1 text-sm">
-      <div v-if="post.legacy_name">{{ post.legacy_name }}</div>
+      <div v-if="!isEmpty(post.legacy_name)">{{ post.legacy_name }}</div>
       <span v-else class="italic">Name Missing</span>
     </div>
     <div class="ml-5">
       <table>
         <tr>
           <td>Value</td>
-          <td v-if="post.value">
+          <td v-if="!isEmpty(post.value)">
             <span class="description">{{ post.value }}</span>
           </td>
           <td v-else class="italic">Missing</td>
@@ -22,7 +22,7 @@
       <table>
         <tr>
           <td>Iati-Equivalent</td>
-          <td v-if="post.iati_equivalent">
+          <td v-if="!isEmpty(post.iati_equivalent)">
             <span class="description">{{ post.iati_equivalent }}</span>
           </td>
           <td v-else class="italic">Missing</td>
@@ -34,6 +34,7 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
+import isEmpty from 'Composable/helper';
 
 export default defineComponent({
   name: 'ActivitySector',
@@ -46,5 +47,6 @@ export default defineComponent({
   setup() {
     return {};
   },
+  methods: { isEmpty },
 });
 </script>