Simplify event list card with a dropdown, load group attribution and

show identity for participation

Signed-off-by: Thomas Citharel <tcit@tcit.fr>

js/src/components/Event/EventListCard.vue

@@ -1,7 +1,13 @@
 <template>
   <article class="box">
-    <div class="columns">
+    <div class="identity-header">
-      <div class="content column">
+      <figure class="image is-24x24" v-if="participation.actor.avatar">
+        <img class="is-rounded" :src="participation.actor.avatar.url" alt="" />
+      </figure>
+      {{ displayNameAndUsername(participation.actor) }}
+    </div>
+    <div class="list-card">
+      <div class="content">
         <div class="title-wrapper">
           <div class="date-component">
             <date-calendar-icon :date="participation.event.beginsOn" />
@@ -45,23 +51,10 @@
             <i18n tag="span" path="Organized by {name}">
               <popover-actor-card
                 slot="name"
-                :actor="participation.event.organizerActor"
+                :actor="organizerActor"
                 :inline="true"
               >
-                {{ participation.event.organizerActor.displayName() }}
+                {{ organizerActor.displayName() }}
-              </popover-actor-card>
-            </i18n>
-            <i18n
-              v-if="participation.role === ParticipantRole.PARTICIPANT"
-              path="Going as {name}"
-              tag="span"
-            >
-              <popover-actor-card
-                slot="name"
-                :actor="participation.actor"
-                :inline="true"
-              >
-                {{ participation.actor.displayName() }}
               </popover-actor-card>
             </i18n>
           </span>
@@ -128,88 +121,90 @@
           </span>
         </div>
       </div>
-      <div class="actions column is-narrow">
+      <div class="actions">
-        <ul>
+        <b-dropdown aria-role="list" position="is-bottom-left">
-          <li
+          <b-button slot="trigger" role="button" icon-right="dots-horizontal">
+            {{ $t("Actions") }}
+          </b-button>
+
+          <b-dropdown-item
             v-if="
               ![
                 ParticipantRole.PARTICIPANT,
                 ParticipantRole.NOT_APPROVED,
               ].includes(participation.role)
             "
-          >
+            aria-role="listitem"
-            <b-button
-              type="is-text"
             @click="
               gotToWithCheck(participation, {
                 name: RouteName.EDIT_EVENT,
                 params: { eventId: participation.event.uuid },
               })
             "
-              icon-left="pencil"
-              >{{ $t("Edit") }}</b-button
           >
-          </li>
+            <b-icon icon="pencil" />
-          <li v-if="participation.role === ParticipantRole.CREATOR">
+            {{ $t("Edit") }}
-            <b-button
+          </b-dropdown-item>
-              type="is-text"
+
+          <b-dropdown-item
+            v-if="participation.role === ParticipantRole.CREATOR"
+            aria-role="listitem"
             @click="
               gotToWithCheck(participation, {
                 name: RouteName.DUPLICATE_EVENT,
                 params: { eventId: participation.event.uuid },
               })
             "
-              icon-left="content-duplicate"
           >
+            <b-icon icon="content-duplicate" />
             {{ $t("Duplicate") }}
-            </b-button>
+          </b-dropdown-item>
-          </li>
+
-          <li
+          <b-dropdown-item
             v-if="
               ![
                 ParticipantRole.PARTICIPANT,
                 ParticipantRole.NOT_APPROVED,
               ].includes(participation.role)
             "
+            aria-role="listitem"
             @click="openDeleteEventModalWrapper"
           >
-            <b-button type="is-text" icon-left="delete">{{
+            <b-icon icon="delete" />
-              $t("Delete")
+            {{ $t("Delete") }}
-            }}</b-button>
+          </b-dropdown-item>
-          </li>
+
-          <li
+          <b-dropdown-item
             v-if="
               ![
                 ParticipantRole.PARTICIPANT,
                 ParticipantRole.NOT_APPROVED,
               ].includes(participation.role)
             "
-          >
+            aria-role="listitem"
-            <b-button
-              type="is-text"
             @click="
               gotToWithCheck(participation, {
                 name: RouteName.PARTICIPATIONS,
                 params: { eventId: participation.event.uuid },
               })
             "
-              icon-left="account-multiple-plus"
-              >{{ $t("Manage participations") }}</b-button
           >
-          </li>
+            <b-icon icon="account-multiple-plus" />
-          <li>
+            {{ $t("Manage participations") }}
-            <b-button
+          </b-dropdown-item>
-              tag="router-link"
+
-              icon-left="view-compact"
+          <b-dropdown-item aria-role="listitem" has-link>
-              type="is-text"
+            <router-link
               :to="{
                 name: RouteName.EVENT,
                 params: { uuid: participation.event.uuid },
               }"
-              >{{ $t("View event page") }}</b-button
             >
-          </li>
+              <b-icon icon="view-compact" />
-        </ul>
+              {{ $t("View event page") }}
+            </router-link>
+          </b-dropdown-item>
+        </b-dropdown>
       </div>
     </div>
   </article>
@@ -223,7 +218,7 @@ import { RawLocation, Route } from "vue-router";
 import { EventVisibility, ParticipantRole } from "@/types/enums";
 import { IParticipant } from "../../types/participant.model";
 import { IEventCardOptions } from "../../types/event.model";
-import { IPerson } from "../../types/actor";
+import { displayNameAndUsername, IActor, IPerson } from "../../types/actor";
 import ActorMixin from "../../mixins/actor";
 import { CURRENT_ACTOR_CLIENT } from "../../graphql/actor";
 import EventMixin from "../../mixins/event";
@@ -268,6 +263,8 @@ export default class EventListCard extends mixins(ActorMixin, EventMixin) {
 
   EventVisibility = EventVisibility;
 
+  displayNameAndUsername = displayNameAndUsername;
+
   RouteName = RouteName;
 
   get mergedOptions(): IEventCardOptions {
@@ -307,6 +304,16 @@ export default class EventListCard extends mixins(ActorMixin, EventMixin) {
     }
     return this.$router.push(route);
   }
+
+  get organizerActor(): IActor | undefined {
+    if (
+      this.participation.event.attributedTo &&
+      this.participation.event.attributedTo.id
+    ) {
+      return this.participation.event.attributedTo;
+    }
+    return this.participation.event.organizerActor;
+  }
 }
 </script>
 
@@ -333,7 +340,18 @@ article.box {
       line-height: 1.75em;
     }
   }
+
+  .list-card {
+    display: flex;
+    align-items: center;
+
+    .actions {
+      padding-right: 7.5px;
+      cursor: pointer;
+    }
+
     div.content {
+      flex: 1;
       padding: 5px;
 
       .participation-actor span,
@@ -372,35 +390,21 @@ article.box {
         }
       }
     }
-
-  .actions {
-    ul li {
-      margin: 0 auto;
-      .is-link {
-        cursor: pointer;
   }
 
-      .button.is-text {
+  .identity-header {
-        text-decoration: none;
+    background: $yellow-2;
+    display: flex;
+    padding: 5px;
 
-        ::v-deep span:first-child i.mdi::before {
+    figure {
-          font-size: 24px !important;
+      padding-right: 3px;
-        }
-
-        ::v-deep span:last-child {
-          padding-left: 4px;
-        }
-
-        &:hover {
-          background: #f5f5f5;
     }
   }
 
-      * {
+  & > .columns {
-        font-size: 0.8rem;
+    padding: 1.25rem;
-        color: $background-color;
-      }
-    }
   }
+  padding: 0;
 }
 </style>

js/src/graphql/actor.ts

@@ -211,6 +211,18 @@ export const LOGGED_USER_PARTICIPATIONS = gql`
                 url
               }
             }
+            attributedTo {
+              avatar {
+                id
+                url
+              }
+              preferredUsername
+              name
+              summary
+              domain
+              url
+              id
+            }
             participantStats {
               going
               notApproved
@@ -220,6 +232,11 @@ export const LOGGED_USER_PARTICIPATIONS = gql`
               maximumAttendeeCapacity
               remainingAttendeeCapacity
             }
+            tags {
+              id
+              slug
+              title
+            }
           }
           id
           role

js/src/views/Event/Event.vue

@@ -279,7 +279,6 @@
                     icon-right="dots-horizontal"
                   >
                     {{ $t("Actions") }}
-                    <!-- <b-icon icon="dots-horizontal" /> -->
                   </b-button>
                   <b-dropdown-item
                     aria-role="listitem"