Fix of breadcrumbs, add hydrate org events/groups, populate args

backend/backend/management/commands/populate_db.py

@@ -33,12 +33,16 @@ def add_arguments(self, parser: ArgumentParser) -> None:
         parser.add_argument("--orgs-per-user", type=int, default=1)
         parser.add_argument("--groups-per-org", type=int, default=1)
         parser.add_argument("--events-per-org", type=int, default=1)
+        parser.add_argument("--resources-per-entity", type=int, default=1)
+        parser.add_argument("--faq-entries-per-entity", type=int, default=1)
 
     def handle(self, *args: str, **options: Unpack[Options]) -> None:
         num_users = options["users"]
         num_orgs_per_user = options["orgs_per_user"]
         num_groups_per_org = options["groups_per_org"]
         num_events_per_org = options["events_per_org"]
+        num_resources_per_entity = options["resources_per_entity"]
+        num_faq_entries_per_entity = options["faq_entries_per_entity"]
 
         # Clear all tables before creating new data.
         UserModel.objects.exclude(username="admin").delete()
@@ -77,7 +81,7 @@ def handle(self, *args: str, **options: Unpack[Options]) -> None:
                             created_by=user,
                         )
 
-                    org_texts = OrganizationTextFactory(iso="wt", primary=True)
+                    org_texts = OrganizationTextFactory(iso="en", primary=True)
 
                     user_org = OrganizationFactory(
                         created_by=user,
@@ -100,12 +104,28 @@ def handle(self, *args: str, **options: Unpack[Options]) -> None:
                             name=f"{user_topic.name} Group",
                         )
 
+            num_orgs = num_users * num_orgs_per_user
+            num_groups = num_users * num_orgs_per_user * num_groups_per_org
+            num_events = num_users * num_orgs_per_user * num_events_per_org
+            num_resources = num_users * (
+                num_orgs_per_user
+                + num_orgs_per_user * num_events_per_org * num_resources_per_entity
+                + num_orgs_per_user * num_groups_per_org * num_resources_per_entity
+            )
+            num_faq_entries = num_users * (
+                num_orgs_per_user
+                + num_orgs_per_user * num_events_per_org * num_faq_entries_per_entity
+                + num_orgs_per_user * num_groups_per_org * num_faq_entries_per_entity
+            )
+
             self.stdout.write(
                 self.style.ERROR(
                     f"Number of users created: {num_users}\n"
-                    f"Number of organizations created: {num_users * num_orgs_per_user}\n"
-                    f"Number of groups created: {num_users * num_orgs_per_user * num_groups_per_org}\n"
-                    f"Number of events created: {num_users * num_orgs_per_user * num_events_per_org}\n"
+                    f"Number of organizations created: {num_orgs}\n"
+                    f"Number of groups created: {num_groups}\n"
+                    f"Number of events created: {num_events}\n"
+                    f"Number of resources created: {num_resources}\n"
+                    f"Number of FAQ entries created: {num_faq_entries}\n"
                 )
             )
 

docker-compose.yml

@@ -12,7 +12,13 @@ services:
       python manage.py loaddata fixtures/superuser.json &&
       python manage.py loaddata fixtures/status_types.json &&
       python manage.py loaddata fixtures/topics.json &&
-      python manage.py populate_db --users 10 --orgs-per-user 1 --groups-per-org 1 --events-per-org 1 &&
+      python manage.py populate_db \
+        --users 10 \
+        --orgs-per-user 1 \
+        --groups-per-org 1 \
+        --events-per-org 1 \
+        --resources-per-entity 1 \
+        --faq-entries-per-entity 1 &&
       python manage.py runserver 0.0.0.0:${BACKEND_PORT}"
     ports:
       - "${BACKEND_PORT}:${BACKEND_PORT}"

frontend/components/card/search-result/CardSearchResult.vue

@@ -34,9 +34,9 @@
               }"
               :src="imageUrl"
               :alt="
-                $t('components.card_search_result.organization_img_alt_text') +
+                $t('components.card_search_result.group_img_alt_text') +
                 ' ' +
-                group.organization.name
+                group.name
               "
             />
             <div
@@ -180,11 +180,11 @@
           <div
             class="flex justify-center space-x-3 md:justify-start lg:space-x-4"
           >
-            <MetaTagOrganization
+            <!-- <MetaTagOrganization
               v-for="(o, i) in organizations"
               :key="i"
               :organization="o"
-            />
+            /> -->
             <!-- <MetaTagMembers
               :members="members"
               label="components.card_search_result.members"
@@ -207,7 +207,11 @@
           <p v-if="group">@{{ group.groupName }}</p>
         </div>
         <p
-          class="line-clamp-4 justify-center md:line-clamp-4 md:justify-start md:px-0 md:py-0 lg:line-clamp-5"
+          class="justify-center md:justify-start md:px-0 md:py-0"
+          :class="{
+            'line-clamp-3': isReduced,
+            'line-clamp-4 lg:line-clamp-5': !isReduced,
+          }"
         >
           {{ description }}
         </p>
@@ -235,6 +239,8 @@ const props = defineProps<{
   isPrivate?: boolean;
 }>();
 
+console.log(`Props: ${JSON.stringify(props, null, 2)}`);
+
 const aboveMediumBP = useBreakpoint("md");
 
 const i18n = useI18n();
@@ -298,8 +304,8 @@ const eventType = computed<"action" | "learn">(() => {
 const imageUrl = computed<string>(() => {
   if (props.organization && props.organization.iconUrl) {
     return props.organization.iconUrl;
-  } else if (props.group && props.group.organization.iconUrl) {
-    return props.group.organization.iconUrl;
+  } else if (props.group && props.group.iconUrl) {
+    return props.group.iconUrl;
   } else if (props.event && props.event.iconUrl) {
     return props.event.iconUrl;
   } else if (props.user && props.user.iconUrl) {
@@ -359,17 +365,17 @@ const onlineLocation = computed<string>(() => {
   }
 });
 
-const organizations = computed<Organization[]>(() => {
-  if (props.group) {
-    return [props.group.organization];
-  } else if (props.event) {
-    return props.event.organizations;
-  } else if (props.resource) {
-    return [props.resource.organization];
-  } else {
-    return [];
-  }
-});
+// const organizations = computed<Organization[]>(() => {
+//   if (props.group) {
+//     return [props.group.organization];
+//   } else if (props.event) {
+//     return props.event.organizations;
+//   } else if (props.resource) {
+//     return [props.resource.organization];
+//   } else {
+//     return [];
+//   }
+// });
 
 // const stars = computed<number>(() => {
 //   if (props.resource && props.resource.starers) {

frontend/components/page/PageBreadcrumbs.vue

@@ -97,12 +97,13 @@ let organization: Organization;
 let group: Group;
 let event: Event;
 
+// Note: UUID Regex: [0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}
 const organizationRegex =
-  /^(http:\/\/localhost:\d+|https?:\/\/[\w.-]+)(\/[a-z]{2})?\/organizations\/[0-9a-fA-F-]+(\/about)?$/;
+  /^(http:\/\/localhost:\d+|https?:\/\/[\w.-]+)(\/[a-z]{2})?\/organizations\/[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}.+$/;
 const groupRegex =
-  /^(http:\/\/localhost:\d+|https?:\/\/[\w.-]+)(\/[a-z]{2})?\/organizations\/[0-9a-fA-F-]+\/groups\/([0-9a-fA-F-]+)(\/about)?$/;
+  /^(http:\/\/localhost:\d+|https?:\/\/[\w.-]+)(\/[a-z]{2})?\/organizations\/[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}\/groups\/([0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}).+$/;
 const eventRegex =
-  /^(http:\/\/localhost:\d+|https?:\/\/[\w.-]+)(\/[a-z]{2})?\/events\/([0-9a-fA-F-]+)(\/about)?$/;
+  /^(http:\/\/localhost:\d+|https?:\/\/[\w.-]+)(\/[a-z]{2})?\/events\/([0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}).+$/;
 
 if (organizationRegex.test(url)) {
   pageType = "organization";

frontend/i18n/en-US.json

@@ -146,6 +146,7 @@
   "components.card_search_result.navigate_to_organization_aria_label": "Navigate to the page for this organization",
   "components.card_search_result.navigate_to_resource_aria_label": "Navigate to the page for this resource",
   "components.card_search_result.navigate_to_user_aria_label": "Navigate to the page for this user",
+  "components.card_search_result.group_img_alt_text": "The group logo of",
   "components.card_search_result.organization_img_alt_text": "The organization logo of",
   "components.card_search_result.supporters_lower": "supporters",
   "components.card_search_result.view_video": "View video",

frontend/pages/organizations/[id]/events.vue

@@ -13,7 +13,6 @@
         organization.name + ' ' + $t('pages.organizations._global.events_lower')
       "
       :tagline="$t('pages.organizations._global.events_tagline')"
-      :underDevelopment="true"
     >
       <div class="flex space-x-2 lg:space-x-3">
         <BtnRouteInternal
@@ -28,9 +27,9 @@
         />
       </div>
     </HeaderAppPage>
-    <div v-if="orgEvents.length > 0" class="space-y-3 py-4">
+    <div v-if="organization.events?.length > 0" class="space-y-3 py-4">
       <CardSearchResultEvent
-        v-for="(u, i) in orgEvents"
+        v-for="(u, i) in organization.events"
         :key="i"
         :isReduced="true"
         :event="u"
@@ -41,7 +40,6 @@
 </template>
 
 <script setup lang="ts">
-import type { Event } from "~/types/events/event";
 import { IconMap } from "~/types/icon-map";
 
 const idParam = useRoute().params.id;
@@ -51,6 +49,4 @@ const organizationStore = useOrganizationStore();
 await organizationStore.fetchById(id);
 
 const { organization } = organizationStore;
-
-const orgEvents: Event[] = [];
 </script>

frontend/pages/organizations/[id]/groups/index.vue

@@ -15,7 +15,6 @@
         $t('pages.organizations.groups.index.groups_lower')
       "
       :tagline="$t('pages.organizations.groups.index.tagline')"
-      :underDevelopment="true"
     >
       <div class="flex space-x-2 lg:space-x-3">
         <BtnRouteInternal
@@ -30,7 +29,7 @@
         />
       </div>
     </HeaderAppPage>
-    <div v-if="organization.groups" class="space-y-3 py-4">
+    <div v-if="organization.groups?.length > 0" class="space-y-3 py-4">
       <CardSearchResultGroup
         v-for="(g, i) in organization.groups"
         :key="i"

frontend/stores/organization.ts

@@ -30,7 +30,9 @@ export const useOrganizationStore = defineStore("organization", {
       socialLinks: [""],
       status: 1,
       creationDate: "",
+
       groups: [],
+      events: [],
 
       organizationTextId: "",
       texts: {
@@ -118,6 +120,7 @@ export const useOrganizationStore = defineStore("organization", {
         this.organization.texts = organization.texts;
 
         this.organization.groups = organization.groups;
+        this.organization.events = organization.events;
       }
 
       this.loading = false;
@@ -152,7 +155,9 @@ export const useOrganizationStore = defineStore("organization", {
             socialLinks: org.socialLinks,
             status: org.status,
             creationDate: org.creationDate,
+
             groups: org.groups,
+            events: org.events,
 
             organizationTextId: org.texts.orgId,
             texts: org.texts,