Improvements to group page

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

js/src/components/Account/ActorCard.vue

@@ -13,7 +13,7 @@
           {{ actor.name || `@${usernameWithDomain(actor)}` }}
         </p>
         <p class="has-text-grey" v-if="actor.name">@{{ usernameWithDomain(actor) }}</p>
-        <p v-if="full" class="summary" :class="{ limit: limit }">{{ actor.summary }}</p>
+        <div v-if="full" class="summary" :class="{ limit: limit }" v-html="actor.summary" />
       </div>
     </div>
   </div>

js/src/components/Editor.vue

@@ -40,6 +40,7 @@
           </button>
 
           <button
+            v-if="!isBasicMode"
             class="menubar__button"
             :class="{ 'is-active': isActive.heading({ level: 1 }) }"
             @click="commands.heading({ level: 1 })"
@@ -49,6 +50,7 @@
           </button>
 
           <button
+            v-if="!isBasicMode"
             class="menubar__button"
             :class="{ 'is-active': isActive.heading({ level: 2 }) }"
             @click="commands.heading({ level: 2 })"
@@ -58,6 +60,7 @@
           </button>
 
           <button
+            v-if="!isBasicMode"
             class="menubar__button"
             :class="{ 'is-active': isActive.heading({ level: 3 }) }"
             @click="commands.heading({ level: 3 })"
@@ -75,12 +78,18 @@
             <b-icon icon="link" />
           </button>
 
-          <button class="menubar__button" @click="showImagePrompt(commands.image)" type="button">
+          <button
+            class="menubar__button"
+            v-if="!isBasicMode"
+            @click="showImagePrompt(commands.image)"
+            type="button"
+          >
             <b-icon icon="image" />
           </button>
 
           <button
             class="menubar__button"
+            v-if="!isBasicMode"
             :class="{ 'is-active': isActive.bullet_list() }"
             @click="commands.bullet_list"
             type="button"
@@ -89,6 +98,7 @@
           </button>
 
           <button
+            v-if="!isBasicMode"
             class="menubar__button"
             :class="{ 'is-active': isActive.ordered_list() }"
             @click="commands.ordered_list"
@@ -98,6 +108,7 @@
           </button>
 
           <button
+            v-if="!isBasicMode"
             class="menubar__button"
             :class="{ 'is-active': isActive.blockquote() }"
             @click="commands.blockquote"
@@ -106,11 +117,11 @@
             <b-icon icon="format-quote-close" />
           </button>
 
-          <button class="menubar__button" @click="commands.undo" type="button">
+          <button v-if="!isBasicMode" class="menubar__button" @click="commands.undo" type="button">
             <b-icon icon="undo" />
           </button>
 
-          <button class="menubar__button" @click="commands.redo" type="button">
+          <button v-if="!isBasicMode" class="menubar__button" @click="commands.redo" type="button">
             <b-icon icon="redo" />
           </button>
         </div>
@@ -229,26 +240,30 @@ export default class EditorComponent extends Vue {
 
   filteredActors: IActor[] = [];
 
-  suggestionRange!: object | null;
+  suggestionRange!: Record<string, unknown> | null;
 
   navigatedActorIndex = 0;
 
   popup!: Instance[] | null;
 
-  get isDescriptionMode() {
-    return this.mode === "description";
+  get isDescriptionMode(): boolean {
+    return this.mode === "description" || this.isBasicMode;
   }
 
-  get isCommentMode() {
+  get isCommentMode(): boolean {
     return this.mode === "comment";
   }
 
-  get hasResults() {
-    return this.filteredActors.length;
+  get hasResults(): boolean {
+    return this.filteredActors.length > 0;
   }
 
-  get showSuggestions() {
-    return this.query || this.hasResults;
+  get showSuggestions(): boolean {
+    return (this.query || this.hasResults) as boolean;
+  }
+
+  get isBasicMode(): boolean {
+    return this.mode === "basic";
   }
 
   // eslint-disable-next-line
@@ -258,7 +273,7 @@ export default class EditorComponent extends Vue {
 
   observer!: MutationObserver | null;
 
-  mounted() {
+  mounted(): void {
     this.editor = new Editor({
       extensions: [
         new Blockquote(),

js/src/components/Event/EventListViewCard.vue

@@ -16,7 +16,7 @@
           </span>
           <span>
             <span>
-              {{ $t("Organized by {name}", { name: event.organizerActor.displayName() }) }}
+              {{ $t("Organized by {name}", { name: usernameWithDomain(event.organizerActor) }) }}
             </span>
           </span>
         </div>
@@ -53,7 +53,7 @@
 import { ParticipantRole, EventVisibility, IEventCardOptions, IEvent } from "@/types/event.model";
 import { Component, Prop } from "vue-property-decorator";
 import DateCalendarIcon from "@/components/Event/DateCalendarIcon.vue";
-import { IPerson } from "@/types/actor";
+import { IPerson, usernameWithDomain } from "@/types/actor";
 import { mixins } from "vue-class-component";
 import ActorMixin from "@/mixins/actor";
 import { CURRENT_ACTOR_CLIENT } from "@/graphql/actor";
@@ -96,6 +96,8 @@ export default class EventListViewCard extends mixins(ActorMixin, EventMixin) {
   EventVisibility = EventVisibility;
 
   RouteName = RouteName;
+
+  usernameWithDomain = usernameWithDomain;
 }
 </script>
 

js/src/components/Event/EventMinimalistCard.vue

@@ -9,7 +9,46 @@
       <p v-if="event.physicalAddress" class="has-text-grey">
         {{ event.physicalAddress.description }}
       </p>
-      <p v-else>3 demandes de participation à traiter</p>
+      <p v-else>
+        <span v-if="event.options.maximumAttendeeCapacity !== 0">
+          {{
+            $tc(
+              "{available}/{capacity} available places",
+              event.options.maximumAttendeeCapacity - event.participantStats.participant,
+              {
+                available:
+                  event.options.maximumAttendeeCapacity - event.participantStats.participant,
+                capacity: event.options.maximumAttendeeCapacity,
+              }
+            )
+          }}
+        </span>
+        <span v-else>
+          {{
+            $tc("{count} participants", event.participantStats.participant, {
+              count: event.participantStats.participant,
+            })
+          }}
+        </span>
+        <span v-if="event.participantStats.notApproved > 0">
+          <b-button
+            type="is-text"
+            @click="
+              gotToWithCheck(participation, {
+                name: RouteName.PARTICIPATIONS,
+                query: { role: ParticipantRole.NOT_APPROVED },
+                params: { eventId: event.uuid },
+              })
+            "
+          >
+            {{
+              $tc("{count} requests waiting", event.participantStats.notApproved, {
+                count: event.participantStats.notApproved,
+              })
+            }}
+          </b-button>
+        </span>
+      </p>
     </div>
   </router-link>
 </template>