Introducing filtering out logic for groups for content types on js, d…

…ata filter util

components/view-components/PracticalInformation.vue

@@ -3,7 +3,6 @@ const props = defineProps({
   data: {
     type: Object,
     required: true,
-    default: null,
   },
 
   userProfilePage: {

components/views/exerciseView.vue

@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import { filterGroups } from '~/utils/dataFilter';
+
 const props = defineProps({
   data: {
     type: Object,
@@ -12,7 +14,7 @@ useHead({
 });
 
 const practicalInfoData = computed(() => {
-  return [
+  const data = [
     {
       group: [
         {
@@ -21,7 +23,6 @@ const practicalInfoData = computed(() => {
         },
       ],
     },
-
     {
       group: [
         {
@@ -51,7 +52,6 @@ const practicalInfoData = computed(() => {
         },
       ],
     },
-
     {
       group: [
         {
@@ -66,7 +66,6 @@ const practicalInfoData = computed(() => {
         },
       ],
     },
-
     {
       group: [
         {
@@ -78,6 +77,8 @@ const practicalInfoData = computed(() => {
       ],
     },
   ];
+
+  return filterGroups(data);
 });
 </script>
 

utils/dataFilter.ts

@@ -0,0 +1,20 @@
+export const isValidContent = (content: any) => {
+  if (Array.isArray(content)) {
+    return content.some((item) => item !== null && item !== '');
+  }
+  return content !== null && content !== '' && typeof content !== 'undefined';
+};
+
+// WIP - needs more testing / work against other content types
+export const filterGroups = (data: any[]) => {
+  return data
+    .map((group) => ({
+      group: group.group.filter((item: any) => {
+        if (item.type === 'sustainability_goals') {
+          return isValidContent(item.content);
+        }
+        return isValidContent(item.content) || isValidContent(item.description);
+      }),
+    }))
+    .filter((group) => group.group.length > 0);
+};