From 96129d2339133027220d3b5fcb1c52f84bcc5cbb Mon Sep 17 00:00:00 2001
From: Thomas Citharel <tcit@tcit.fr>
Date: Wed, 24 May 2023 15:29:26 +0200
Subject: [PATCH 1/6] feat(front): make profile members link to profile on
 group admin view and the reverse

Signed-off-by: Thomas Citharel <tcit@tcit.fr>
---
 js/src/views/Admin/AdminGroupProfile.vue | 58 +++++++++++++++++-------
 js/src/views/Admin/AdminProfile.vue      | 48 ++++++++++++++------
 2 files changed, 76 insertions(+), 30 deletions(-)

diff --git a/js/src/views/Admin/AdminGroupProfile.vue b/js/src/views/Admin/AdminGroupProfile.vue
index 422672e2a..a74050f2c 100644
--- a/js/src/views/Admin/AdminGroupProfile.vue
+++ b/js/src/views/Admin/AdminGroupProfile.vue
@@ -114,26 +114,52 @@
         >
           <article class="flex gap-1">
             <div class="flex-none">
-              <figure v-if="props.row.actor.avatar">
-                <img
-                  class="rounded"
-                  :src="props.row.actor.avatar.url"
-                  alt=""
-                  width="48"
-                  height="48"
-                />
-              </figure>
-              <AccountCircle :size="48" v-else />
+              <router-link
+                class="no-underline"
+                :to="{
+                  name: RouteName.ADMIN_PROFILE,
+                  params: { id: props.row.actor.id },
+                }"
+              >
+                <figure v-if="props.row.actor.avatar">
+                  <img
+                    class="rounded"
+                    :src="props.row.actor.avatar.url"
+                    alt=""
+                    width="48"
+                    height="48"
+                  />
+                </figure>
+                <AccountCircle :size="48" v-else />
+              </router-link>
             </div>
             <div>
               <div class="prose dark:prose-invert">
-                <span v-if="props.row.actor.name">{{
-                  props.row.actor.name
-                }}</span
-                ><span v-else>@{{ usernameWithDomain(props.row.actor) }}</span
+                <router-link
+                  class="no-underline"
+                  :to="{
+                    name: RouteName.ADMIN_PROFILE,
+                    params: { id: props.row.actor.id },
+                  }"
+                  v-if="props.row.actor.name"
+                  >{{ props.row.actor.name }}</router-link
+                ><router-link
+                  class="no-underline"
+                  :to="{
+                    name: RouteName.ADMIN_PROFILE,
+                    params: { id: props.row.actor.id },
+                  }"
+                  v-else
+                  >@{{ usernameWithDomain(props.row.actor) }}</router-link
                 ><br />
-                <span v-if="props.row.actor.name"
-                  >@{{ usernameWithDomain(props.row.actor) }}</span
+                <router-link
+                  class="no-underline"
+                  :to="{
+                    name: RouteName.ADMIN_PROFILE,
+                    params: { id: props.row.actor.id },
+                  }"
+                  v-if="props.row.actor.name"
+                  >@{{ usernameWithDomain(props.row.actor) }}</router-link
                 >
               </div>
             </div>
diff --git a/js/src/views/Admin/AdminProfile.vue b/js/src/views/Admin/AdminProfile.vue
index 32ecf05d4..9494ba99a 100644
--- a/js/src/views/Admin/AdminProfile.vue
+++ b/js/src/views/Admin/AdminProfile.vue
@@ -199,23 +199,43 @@
           v-slot="props"
         >
           <article class="flex gap-2">
-            <figure class="" v-if="props.row.parent.avatar">
-              <img
-                class="rounded-full"
-                :src="props.row.parent.avatar.url"
-                alt=""
-                width="48"
-                height="48"
-              />
-            </figure>
-            <AccountCircle v-else :size="48" />
+            <router-link
+              class="no-underline"
+              :to="{
+                name: RouteName.ADMIN_GROUP_PROFILE,
+                params: { id: props.row.parent.id },
+              }"
+            >
+              <figure class="" v-if="props.row.parent.avatar">
+                <img
+                  class="rounded-full"
+                  :src="props.row.parent.avatar.url"
+                  alt=""
+                  width="48"
+                  height="48"
+                />
+              </figure>
+              <AccountCircle v-else :size="48" />
+            </router-link>
             <div class="">
               <div class="prose dark:prose-invert">
-                <span v-if="props.row.parent.name">{{
-                  props.row.parent.name
-                }}</span
+                <router-link
+                  class="no-underline"
+                  :to="{
+                    name: RouteName.ADMIN_GROUP_PROFILE,
+                    params: { id: props.row.parent.id },
+                  }"
+                  v-if="props.row.parent.name"
+                  >{{ props.row.parent.name }}</router-link
                 ><br />
-                <span>@{{ usernameWithDomain(props.row.parent) }}</span>
+                <router-link
+                  class="no-underline"
+                  :to="{
+                    name: RouteName.ADMIN_GROUP_PROFILE,
+                    params: { id: props.row.parent.id },
+                  }"
+                  >@{{ usernameWithDomain(props.row.parent) }}</router-link
+                >
               </div>
             </div>
           </article>

From 2933ee06791a24dbf8c8b2a2eabc67f71e56f361 Mon Sep 17 00:00:00 2001
From: Thomas Citharel <tcit@tcit.fr>
Date: Wed, 24 May 2023 15:29:49 +0200
Subject: [PATCH 2/6] fix(graphql): fix calling GET_GROUP

Signed-off-by: Thomas Citharel <tcit@tcit.fr>
---
 js/src/graphql/group.ts | 7 -------
 1 file changed, 7 deletions(-)

diff --git a/js/src/graphql/group.ts b/js/src/graphql/group.ts
index c68278b52..689288b65 100644
--- a/js/src/graphql/group.ts
+++ b/js/src/graphql/group.ts
@@ -1,5 +1,4 @@
 import gql from "graphql-tag";
-import { DISCUSSION_BASIC_FIELDS_FRAGMENT } from "./discussion";
 import { RESOURCE_METADATA_BASIC_FIELDS_FRAGMENT } from "./resources";
 import { POST_BASIC_FIELDS } from "./post";
 import { ACTOR_FRAGMENT } from "./actor";
@@ -246,7 +245,6 @@ export const GROUP_FIELDS_FRAGMENTS = gql`
     }
   }
   ${GROUP_BASIC_FIELDS_FRAGMENTS}
-  ${DISCUSSION_BASIC_FIELDS_FRAGMENT}
   ${RESOURCE_METADATA_BASIC_FIELDS_FRAGMENT}
 `;
 
@@ -278,8 +276,6 @@ export const GET_GROUP = gql`
     $postsLimit: Int
     $membersPage: Int
     $membersLimit: Int
-    $discussionsPage: Int
-    $discussionsLimit: Int
   ) {
     getGroup(id: $id) {
       mediaSize
@@ -287,9 +283,6 @@ export const GET_GROUP = gql`
     }
   }
   ${GROUP_FIELDS_FRAGMENTS}
-  ${DISCUSSION_BASIC_FIELDS_FRAGMENT}
-  ${POST_BASIC_FIELDS}
-  ${RESOURCE_METADATA_BASIC_FIELDS_FRAGMENT}
 `;
 
 export const CREATE_GROUP = gql`

From 3e0324d36ec5a8aa388e6b5d598a6f9a0c596797 Mon Sep 17 00:00:00 2001
From: Thomas Citharel <tcit@tcit.fr>
Date: Wed, 24 May 2023 15:31:48 +0200
Subject: [PATCH 3/6] feat(front): make profiles and group admin views default
 to local

Signed-off-by: Thomas Citharel <tcit@tcit.fr>
---
 js/src/views/Admin/GroupProfiles.vue | 2 +-
 js/src/views/Admin/ProfilesView.vue  | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/js/src/views/Admin/GroupProfiles.vue b/js/src/views/Admin/GroupProfiles.vue
index cd30e5875..dbd904eea 100644
--- a/js/src/views/Admin/GroupProfiles.vue
+++ b/js/src/views/Admin/GroupProfiles.vue
@@ -133,7 +133,7 @@ const preferredUsername = ref("");
 const name = ref("");
 const domain = ref("");
 
-const local = useRouteQuery("local", false, booleanTransformer);
+const local = useRouteQuery("local", true, booleanTransformer);
 const suspended = useRouteQuery("suspended", false, booleanTransformer);
 const page = useRouteQuery("page", 1, integerTransformer);
 
diff --git a/js/src/views/Admin/ProfilesView.vue b/js/src/views/Admin/ProfilesView.vue
index 9d51b9207..67bb16fb6 100644
--- a/js/src/views/Admin/ProfilesView.vue
+++ b/js/src/views/Admin/ProfilesView.vue
@@ -119,7 +119,7 @@ const preferredUsername = ref("");
 const name = ref("");
 const domain = ref("");
 
-const local = useRouteQuery("local", false, booleanTransformer);
+const local = useRouteQuery("local", true, booleanTransformer);
 const suspended = useRouteQuery("suspended", false, booleanTransformer);
 const page = useRouteQuery("page", 1, integerTransformer);
 

From 94f186ce5080316cd633e0344651b0050c2f14d4 Mon Sep 17 00:00:00 2001
From: Thomas Citharel <tcit@tcit.fr>
Date: Wed, 24 May 2023 15:36:38 +0200
Subject: [PATCH 4/6] fix(front): increase padding next to arrow down in
 <select> elements

Signed-off-by: Thomas Citharel <tcit@tcit.fr>
---
 js/src/assets/oruga-tailwindcss.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/js/src/assets/oruga-tailwindcss.css b/js/src/assets/oruga-tailwindcss.css
index f06833582..06e5fd8c2 100644
--- a/js/src/assets/oruga-tailwindcss.css
+++ b/js/src/assets/oruga-tailwindcss.css
@@ -193,7 +193,7 @@ body {
 
 /* Select */
 .select {
-  @apply dark:bg-zinc-600 dark:placeholder:text-zinc-400 dark:text-zinc-50 rounded pl-2 pr-6 border-2 border-transparent h-10 shadow-none border rounded;
+  @apply dark:bg-zinc-600 dark:placeholder:text-zinc-400 dark:text-zinc-50 rounded pl-2 pr-8 border-2 border-transparent h-10 shadow-none border rounded;
 }
 
 /* Radio */

From 7fa452d9e3f9bb2443e571c9a32eaed51e32480a Mon Sep 17 00:00:00 2001
From: Thomas Citharel <tcit@tcit.fr>
Date: Wed, 24 May 2023 15:41:13 +0200
Subject: [PATCH 5/6] feat(front): improve padding on event tags

Signed-off-by: Thomas Citharel <tcit@tcit.fr>
---
 js/src/views/Event/EventView.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/js/src/views/Event/EventView.vue b/js/src/views/Event/EventView.vue
index 2d5b2015d..73092ebab 100755
--- a/js/src/views/Event/EventView.vue
+++ b/js/src/views/Event/EventView.vue
@@ -108,7 +108,7 @@
                   <tag v-if="eventCategory" class="category" capitalize>{{
                     eventCategory
                   }}</tag>
-                  <router-link
+                  <router-link class="rounded-md truncate text-sm text-violet-title py-1 bg-purple-3 dark:text-violet-3 category"
                     v-for="tag in event?.tags ?? []"
                     :key="tag.title"
                     :to="{ name: RouteName.TAG, params: { tag: tag.title } }"

From dc3b93ffb5a4b072aec792533fd6e4b58ed7a893 Mon Sep 17 00:00:00 2001
From: Thomas Citharel <tcit@tcit.fr>
Date: Wed, 24 May 2023 16:14:19 +0200
Subject: [PATCH 6/6] feat(front): show skeleton content on event view until
 the event is loaded

Signed-off-by: Thomas Citharel <tcit@tcit.fr>
---
 .../Event/SkeletonDateCalendarIcon.vue        | 18 +++++
 js/src/views/Event/EventView.vue              | 71 ++++++++++++++++---
 2 files changed, 81 insertions(+), 8 deletions(-)
 create mode 100644 js/src/components/Event/SkeletonDateCalendarIcon.vue

diff --git a/js/src/components/Event/SkeletonDateCalendarIcon.vue b/js/src/components/Event/SkeletonDateCalendarIcon.vue
new file mode 100644
index 000000000..b31ad986d
--- /dev/null
+++ b/js/src/components/Event/SkeletonDateCalendarIcon.vue
@@ -0,0 +1,18 @@
+<template>
+  <div
+    class="datetime-container flex flex-col rounded-lg text-center justify-center overflow-hidden items-stretch bg-white dark:bg-gray-700 text-violet-3 dark:text-white"
+  >
+    <div class="datetime-container-content">
+      <div class="ml-2 h-8 bg-slate-200 w-16"></div>
+      <div class="ml-2 mt-2 h-4 bg-slate-200 w-16"></div>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+div.datetime-container {
+  width: calc(80px);
+  box-shadow: 0 0 12px rgba(0, 0, 0, 0.2);
+  height: calc(80px);
+}
+</style>
diff --git a/js/src/views/Event/EventView.vue b/js/src/views/Event/EventView.vue
index 73092ebab..8046344b9 100755
--- a/js/src/views/Event/EventView.vue
+++ b/js/src/views/Event/EventView.vue
@@ -7,7 +7,12 @@
         class="flex flex-col relative pb-2 bg-white dark:bg-zinc-700 my-2 rounded"
       >
         <div class="date-calendar-icon-wrapper relative" v-if="event?.beginsOn">
+          <skeleton-date-calendar-icon
+            v-if="eventLoading"
+            class="absolute left-3 -top-16"
+          />
           <date-calendar-icon
+            v-else
             :date="event.beginsOn.toString()"
             class="absolute left-3 -top-16"
           />
@@ -16,7 +21,12 @@
         <section class="intro px-2 pt-4" dir="auto">
           <div class="flex flex-wrap gap-2">
             <div class="flex-1 min-w-[300px]">
+              <div
+                v-if="eventLoading"
+                class="animate-pulse mb-2 h-12 bg-slate-200 w-3/4"
+              />
               <h1
+                v-else
                 class="text-4xl font-bold m-0"
                 dir="auto"
                 :lang="event?.language"
@@ -24,7 +34,11 @@
                 {{ event?.title }}
               </h1>
               <div class="organizer">
-                <div v-if="event?.organizerActor && !event?.attributedTo">
+                <div
+                  v-if="eventLoading"
+                  class="animate-pulse mb-2 h-6 space-y-6 bg-slate-200 w-64"
+                />
+                <div v-else-if="event?.organizerActor && !event?.attributedTo">
                   <popover-actor-card
                     :actor="event.organizerActor"
                     :inline="true"
@@ -71,7 +85,11 @@
                 </span>
               </div>
               <div class="flex flex-wrap items-center gap-2 gap-y-4 mt-2 my-3">
-                <p v-if="event?.status !== EventStatus.CONFIRMED">
+                <div
+                  v-if="eventLoading"
+                  class="animate-pulse mb-2 h-6 space-y-6 bg-slate-200 w-64"
+                />
+                <p v-else-if="event?.status !== EventStatus.CONFIRMED">
                   <tag
                     variant="warning"
                     v-if="event?.status === EventStatus.TENTATIVE"
@@ -83,7 +101,7 @@
                     >{{ t("Event cancelled") }}</tag
                   >
                 </p>
-                <template v-if="!event?.draft">
+                <template v-if="!eventLoading && !event?.draft">
                   <p
                     v-if="event?.visibility === EventVisibility.PUBLIC"
                     class="inline-flex gap-1"
@@ -104,11 +122,16 @@
                     <tag variant="info">{{ organizerDomain }}</tag>
                   </a>
                 </template>
-                <p class="flex flex-wrap gap-1 items-center" dir="auto">
+                <div
+                  v-if="eventLoading"
+                  class="animate-pulse mb-2 h-6 space-y-6 bg-slate-200 w-64"
+                />
+                <p v-else class="flex flex-wrap gap-1 items-center" dir="auto">
                   <tag v-if="eventCategory" class="category" capitalize>{{
                     eventCategory
                   }}</tag>
-                  <router-link class="rounded-md truncate text-sm text-violet-title py-1 bg-purple-3 dark:text-violet-3 category"
+                  <router-link
+                    class="rounded-md truncate text-sm text-violet-title py-1 bg-purple-3 dark:text-violet-3 category"
                     v-for="tag in event?.tags ?? []"
                     :key="tag.title"
                     :to="{ name: RouteName.TAG, params: { tag: tag.title } }"
@@ -122,8 +145,12 @@
               </div>
             </div>
 
+            <div v-if="eventLoading">
+              <div class="animate-pulse mb-2 h-6 bg-slate-200 w-64" />
+              <div class="animate-pulse mb-2 h-6 bg-slate-200 w-64" />
+            </div>
             <EventActionSection
-              v-if="event"
+              v-else-if="event"
               :event="event"
               :currentActor="currentActor"
               :participations="participations"
@@ -140,8 +167,23 @@
           class="rounded bg-white dark:bg-zinc-700 shadow-md h-min max-w-screen-sm"
         >
           <div class="sticky p-4">
+            <aside
+              v-if="eventLoading"
+              class="animate-pulse rounded bg-white dark:bg-zinc-700 h-min max-w-screen-sm"
+            >
+              <div class="mb-6 p-2" v-for="i in 3" :key="i">
+                <div class="mb-2 h-6 bg-slate-200 w-64" />
+                <div class="flex space-x-4 flex-row">
+                  <div class="rounded-full bg-slate-200 h-10 w-10"></div>
+                  <div class="flex flex-col flex-1 space-y-2">
+                    <div class="h-3 bg-slate-200"></div>
+                    <div class="h-3 bg-slate-200"></div>
+                  </div>
+                </div>
+              </div>
+            </aside>
             <event-metadata-sidebar
-              v-if="event"
+              v-else-if="event"
               :event="event"
               :user="loggedUser"
               @showMapModal="showMap = true"
@@ -153,7 +195,19 @@
             class="event-description bg-white dark:bg-zinc-700 px-3 pt-1 pb-3 rounded mb-4"
           >
             <h2 class="text-2xl">{{ t("About this event") }}</h2>
-            <p v-if="!event?.description">
+            <div
+              v-if="eventLoading"
+              class="animate-pulse mb-2 h-6 space-y-6 bg-slate-200 w-3/4"
+            />
+            <div
+              v-if="eventLoading"
+              class="animate-pulse mb-2 h-6 space-y-6 bg-slate-200 w-3/4"
+            />
+            <div
+              v-if="eventLoading"
+              class="animate-pulse mb-2 h-6 space-y-6 bg-slate-200 w-1/4"
+            />
+            <p v-else-if="!event?.description">
               {{ t("The event organizer didn't add any description.") }}
             </p>
             <div v-else>
@@ -235,6 +289,7 @@ import {
   usernameWithDomain,
 } from "@/types/actor";
 import DateCalendarIcon from "@/components/Event/DateCalendarIcon.vue";
+import SkeletonDateCalendarIcon from "@/components/Event/SkeletonDateCalendarIcon.vue";
 import Earth from "vue-material-design-icons/Earth.vue";
 import Link from "vue-material-design-icons/Link.vue";
 import MultiCard from "@/components/Event/MultiCard.vue";