activist-org#830 add UI for organization group sub pages

aasimsyed · Apr 21, 2024 · 91348aa · 91348aa
1 parent 6aaa197
commit 91348aa
Show file tree

Hide file tree

Showing 28 changed files with 617 additions and 102 deletions.
diff --git a/frontend/components/card/CardAbout.vue b/frontend/components/card/CardAbout.vue
@@ -5,6 +5,7 @@
         v-if="organization && !expandText"
         :entityName="organization.name"
       />
+      <ModalQRCode v-if="group && !expandText" :entityName="group.name" />
       <button
         v-if="expandText"
         @click="
@@ -22,16 +23,23 @@
           </h3>
           <IconEdit />
         </div>
-        <div v-if="event" class="flex-col space-y-3">
-          <ShieldTopic :topic="event.topic" />
+        <div v-if="organization" class="flex-col space-y-3">
+          <ShieldTopic :topic="organization.topic" />
+          <div class="flex items-center gap-3">
+            <MetaTagLocation :location="organization.location" />
+            <MetaTagMembers
+              :members="organization.members"
+              :label="$t('components._global.members_lower')"
+            />
+          </div>
           <div>
             <p
               ref="description"
               :class="{
-                'line-clamp-2': !expandText,
+                'line-clamp-3': !expandText,
               }"
             >
-              {{ event.description }}
+              {{ organization.description }}
             </p>
             <div class="flex justify-center">
               <button
@@ -59,12 +67,12 @@
             </div>
           </div>
         </div>
-        <div v-if="organization" class="flex-col space-y-3">
-          <ShieldTopic :topic="organization.topic" />
+        <div v-else-if="group" class="flex-col space-y-3">
+          <ShieldTopic :topic="group.topic" />
           <div class="flex items-center gap-3">
-            <MetaTagLocation :location="organization.location" />
+            <MetaTagLocation :location="group.location" />
             <MetaTagMembers
-              :members="organization.members"
+              :members="group.members"
               :label="$t('components._global.members_lower')"
             />
           </div>
@@ -75,7 +83,44 @@
                 'line-clamp-3': !expandText,
               }"
             >
-              {{ organization.description }}
+              {{ group.description }}
+            </p>
+            <div class="flex justify-center">
+              <button
+                v-if="!expandText && descriptionExpandable"
+                @click="
+                  emit('expand-reduce-text');
+                  expand_reduce_text();
+                "
+                class="focus-brand mt-1 font-semibold text-light-link-text dark:text-dark-link-text"
+                :aria-label="$t('components.card-about.full-text-aria-label')"
+              >
+                {{ $t("components.card-about.full-text") }}
+              </button>
+              <button
+                v-else-if="descriptionExpandable"
+                @click="
+                  emit('expand-reduce-text');
+                  expand_reduce_text();
+                "
+                class="focus-brand mt-1 font-semibold text-light-link-text dark:text-dark-link-text"
+                :aria-label="$t('components.card-about.reduce-text-aria-label')"
+              >
+                {{ $t("components.card-about.reduce-text") }}
+              </button>
+            </div>
+          </div>
+        </div>
+        <div v-else-if="event" class="flex-col space-y-3">
+          <ShieldTopic :topic="event.topic" />
+          <div>
+            <p
+              ref="description"
+              :class="{
+                'line-clamp-2': !expandText,
+              }"
+            >
+              {{ event.description }}
             </p>
             <div class="flex justify-center">
               <button
@@ -110,10 +155,12 @@
 
 <script setup lang="ts">
 import type { Event } from "~/types/event";
+import type { Group } from "~/types/group";
 import type { Organization } from "~/types/organization";
 
 defineProps<{
   organization?: Organization;
+  group?: Group;
   event?: Event;
 }>();
 

diff --git a/frontend/components/card/CardGetInvolved.vue b/frontend/components/card/CardGetInvolved.vue
@@ -2,7 +2,10 @@
   <div class="card-style px-5 py-5">
     <div class="relative flex flex-col lg:flex-row">
       <div class="flex items-center gap-5">
-        <h3 v-if="organization" class="responsive-h3 text-left font-display">
+        <h3
+          v-if="organization || group"
+          class="responsive-h3 text-left font-display"
+        >
           {{ $t("components.card-get-involved.get-involved") }}
         </h3>
         <h3 v-else class="responsive-h3 text-left font-display">
@@ -29,6 +32,16 @@
           iconSize="1.45em"
           ariaLabel="components.btn-route-internal.join-organization-aria-label"
         />
+        <BtnRouteInternal
+          v-else-if="group"
+          :cta="true"
+          linkTo="/"
+          label="components.btn-route-internal.join-group"
+          fontSize="sm"
+          rightIcon="bi:arrow-right"
+          iconSize="1.45em"
+          ariaLabel="components.btn-route-internal.join-group-aria-label"
+        />
       </div>
     </div>
     <div v-if="organization" class="mt-4">
@@ -44,11 +57,17 @@
       </div>
       <div v-else>
         <p>
-          {{ $t("components.card-get-involved.join-subtext") }}
+          {{ $t("components.card-get-involved.join-organization-subtext") }}
           {{ organization.name }}.
         </p>
       </div>
     </div>
+    <div v-else-if="group" class="space-y-3 pt-3">
+      <p>
+        {{ $t("components.card-get-involved.join-group-subtext") }}
+        {{ group.name }}.
+      </p>
+    </div>
     <div v-else-if="event" class="space-y-3 pt-3">
       <p>
         {{ event.getInvolvedDescription }}
@@ -75,10 +94,12 @@
 
 <script setup lang="ts">
 import type { Event } from "~/types/event";
+import type { Group } from "~/types/group";
 import type { Organization } from "~/types/organization";
 
 defineProps<{
   organization?: Organization;
+  group?: Group;
   event?: Event;
   disclaimer?: string;
 }>();

diff --git a/frontend/components/form/radio/FormRadio.vue b/frontend/components/form/radio/FormRadio.vue
@@ -24,12 +24,13 @@ export interface Props {
   error?: string;
 }
 
+const uuid = uuidv4();
+
 const props = withDefaults(defineProps<Props>(), {
   label: "",
   error: "",
 });
 
 const emit = defineEmits(["update:modelValue"]);
 const { updateValue } = useFormInput(props, emit);
-const uuid = uuidv4();
 </script>
diff --git a/frontend/components/header/HeaderAppPage.vue b/frontend/components/header/HeaderAppPage.vue
@@ -2,6 +2,7 @@
   <PageBreadcrumbs
     class="mt-4 hidden md:block"
     :organization="organization"
+    :group="group"
     :event="event"
   />
   <div
@@ -78,12 +79,14 @@
 
 <script setup lang="ts">
 import type { Event } from "~/types/event";
+import type { Group } from "~/types/group";
 import type { Organization } from "~/types/organization";
 
 const props = defineProps<{
   header?: string;
   tagline?: string;
   organization?: Organization;
+  group?: Group;
   event?: Event;
   underDevelopment?: boolean;
 }>();
@@ -96,6 +99,9 @@ if (props.organization) {
   headerName = props.organization.name;
   headerTagline = props.organization.tagline;
   headerStatus = props.organization.status;
+} else if (props.group) {
+  headerName = props.group.name;
+  headerTagline = props.group.tagline;
 } else if (props.event) {
   headerName = props.event.name;
   headerTagline = props.event.tagline;

diff --git a/frontend/components/icon/IconApplication.vue b/frontend/components/icon/IconApplication.vue
@@ -4,6 +4,7 @@
     height="16"
     viewBox="0 0 16 16"
     xmlns="http://www.w3.org/2000/svg"
+    fill="currentColor"
   >
     <g clip-path="url(#clip0_10_18)">
       <path

diff --git a/frontend/components/icon/IconFAQ.vue b/frontend/components/icon/IconFAQ.vue
@@ -4,6 +4,7 @@
     height="16"
     viewBox="0 0 16 16"
     xmlns="http://www.w3.org/2000/svg"
+    fill="currentColor"
   >
     <path
       d="M14 1C14.2652 1 14.5196 1.10536 14.7071 1.29289C14.8946 1.48043 15 1.73478 15 2V10C15 10.2652 14.8946 10.5196 14.7071 10.7071C14.5196 10.8946 14.2652 11 14 11H4.414C3.88361 11.0001 3.37499 11.2109 3 11.586L1 13.586V2C1 1.73478 1.10536 1.48043 1.29289 1.29289C1.48043 1.10536 1.73478 1 2 1H14ZM2 0C1.46957 0 0.960859 0.210714 0.585787 0.585787C0.210714 0.960859 0 1.46957 0 2V14.793C2.10149e-05 14.8919 0.0293926 14.9886 0.0843973 15.0709C0.139402 15.1531 0.217567 15.2172 0.308999 15.255C0.400432 15.2928 0.501021 15.3026 0.598036 15.2832C0.695051 15.2638 0.784131 15.216 0.854 15.146L3.707 12.293C3.89449 12.1055 4.14881 12.0001 4.414 12H14C14.5304 12 15.0391 11.7893 15.4142 11.4142C15.7893 11.0391 16 10.5304 16 10V2C16 1.46957 15.7893 0.960859 15.4142 0.585787C15.0391 0.210714 14.5304 0 14 0H2Z"

diff --git a/frontend/components/icon/IconJoin.vue b/frontend/components/icon/IconJoin.vue
@@ -4,6 +4,7 @@
     height="16"
     viewBox="0 0 16 16"
     xmlns="http://www.w3.org/2000/svg"
+    fill="currentColor"
   >
     <g clip-path="url(#clip0_5143_33166)">
       <path

diff --git a/frontend/components/icon/IconSupport.vue b/frontend/components/icon/IconSupport.vue
@@ -4,6 +4,7 @@
     height="16"
     viewBox="0 0 16 16"
     xmlns="http://www.w3.org/2000/svg"
+    fill="currentColor"
   >
     <g clip-path="url(#clip0_5138_33028)">
       <path

diff --git a/frontend/components/menu/MenuNavigationDropdown.vue b/frontend/components/menu/MenuNavigationDropdown.vue
@@ -84,8 +84,8 @@ import {
 import type MenuEntry from "~/types/menu-entry";
 import { SidebarType } from "~/types/sidebar-type";
 
-const route = useRoute();
 const { locale } = useI18n();
+const route = useRoute();
 
 function currentRoutePathIncludes(path: string): boolean {
   const { locale } = useI18n();

diff --git a/frontend/components/menu/MenuSubPageSelector.vue b/frontend/components/menu/MenuSubPageSelector.vue
@@ -0,0 +1,56 @@
+<template>
+  <div class="h-fit w-full">
+    <TabGroup @change="changeTab" manual :default-index="defaultIndex">
+      <TabList class="flex flex-row">
+        <Tab v-for="selector in selectors" :key="selector.id" class="w-full">
+          <NuxtLink
+            class="focus-brand flex w-full items-center justify-center rounded-none border-[1px] border-light-text px-3 py-1 dark:border-dark-text"
+            :class="{
+              'bg-light-menu-selection text-light-layer-1 hover:bg-light-menu-selection/90 dark:bg-dark-menu-selection dark:text-dark-layer-1 dark:hover:bg-dark-menu-selection/90':
+                selector.id == props.selectedRoute,
+              'bg-light-layer-2 text-light-text hover:bg-light-highlight dark:bg-dark-layer-2 dark:text-dark-text dark:hover:bg-dark-highlight':
+                selector.id != props.selectedRoute,
+            }"
+            :to="localePath(selector.routeURL)"
+          >
+            <div class="md:hidden">
+              <Icon
+                v-if="selector.iconName"
+                :name="selector.iconName"
+                size="1em"
+              />
+            </div>
+            <p :class="{ 'hidden md:block': selector.iconName }">
+              {{ selector.label }}
+            </p>
+          </NuxtLink>
+        </Tab>
+      </TabList>
+    </TabGroup>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { Tab, TabGroup, TabList } from "@headlessui/vue";
+import type { SubPageSelector } from "~/types/sub-page-selector";
+
+const props = defineProps<{
+  selectors: SubPageSelector[];
+  selectedRoute: number;
+}>();
+
+const localePath = useLocalePath();
+const nuxtApp = useNuxtApp();
+const router = useRouter();
+
+const defaultIndex = computed(() => {
+  return props.selectors.findIndex((selector) => selector.selected) || 0;
+});
+
+function changeTab(index: number) {
+  const selectedRoute = props.selectors[index]?.routeURL;
+  if (selectedRoute) {
+    router.push(nuxtApp.$localePath(selectedRoute));
+  }
+}
+</script>
diff --git a/frontend/components/modal/ModalSharePage.vue b/frontend/components/modal/ModalSharePage.vue
@@ -208,27 +208,30 @@ import { SEmail, SFacebook, SMastodon, STelegram, STwitter } from "vue-socials";
 import ModalBase from "~/components/modal/ModalBase.vue";
 import type { BtnAction } from "~/types/btn-props";
 import type { Event } from "~/types/event";
+import type { Group } from "~/types/group";
 import type { Organization } from "~/types/organization";
 
 const props = defineProps<{
   cta: BtnAction["cta"];
   label: BtnAction["label"];
   ariaLabel: BtnAction["ariaLabel"];
-  event?: Event;
   organization?: Organization;
-  // group?: Group; // add group when we have it
+  group?: Group;
+  event?: Event;
 }>();
 
 const getEntityType = () => {
-  if (props.event) {
-    return setEntityInfo(props.event);
-  } else if (props.organization) {
+  if (props.organization) {
     return setEntityInfo(props.organization);
+  } else if (props.group) {
+    return setEntityInfo(props.group);
+  } else if (props.event) {
+    return setEntityInfo(props.event);
   }
 };
 
 const setEntityInfo = (
-  data: typeof props.event | typeof props.organization
+  data: typeof props.organization | typeof props.group | typeof props.event
 ) => {
   if (!data) return;
   return {

diff --git a/frontend/components/page/PageBreadcrumbs.vue b/frontend/components/page/PageBreadcrumbs.vue
@@ -33,6 +33,24 @@
           >
             {{ organization.name }}
           </a>
+          <a
+            v-else-if="
+              Number.isInteger(Number(breadcrumb)) && group && index == 1
+            "
+            class="focus-brand text-light-distinct-text hover:text-light-text dark:text-dark-distinct-text dark:hover:text-dark-text"
+            :href="makeURL(breadcrumb)"
+          >
+            {{ group.organization }}
+          </a>
+          <a
+            v-else-if="
+              Number.isInteger(Number(breadcrumb)) && group && index == 3
+            "
+            class="focus-brand text-light-distinct-text hover:text-light-text dark:text-dark-distinct-text dark:hover:text-dark-text"
+            :href="makeURL(breadcrumb)"
+          >
+            {{ group.name }}
+          </a>
           <a
             v-else
             class="focus-brand text-light-distinct-text hover:text-light-text dark:text-dark-distinct-text dark:hover:text-dark-text"
@@ -57,12 +75,14 @@
 
 <script setup lang="ts">
 import type { Event } from "~/types/event";
+import type { Group } from "~/types/group";
 import type { Organization } from "~/types/organization";
 const { locales } = useI18n();
 const localePath = useLocalePath();
 
 defineProps<{
   organization?: Organization;
+  group?: Group;
   event?: Event;
 }>();