Improve texts

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

js/src/components/Discussion/DiscussionComment.vue

@@ -91,8 +91,9 @@ import { CURRENT_ACTOR_CLIENT } from "../../graphql/actor";
 export default class DiscussionComment extends Vue {
   @Prop({ required: true, type: Object }) comment!: IComment;
 
-  editMode: boolean = false;
-  updatedComment: string = "";
+  editMode = false;
+
+  updatedComment = "";
 
   currentActor!: IPerson;
 

js/src/components/Event/AddressAutoComplete.vue

@@ -45,6 +45,7 @@ import { IConfig } from "../../types/config.model";
 })
 export default class AddressAutoComplete extends Vue {
   @Prop({ required: true }) value!: IAddress;
+
   @Prop({ required: false }) placeholder!: string;
 
   addressData: IAddress[] = [];

js/src/components/Event/EventListCard.vue

@@ -186,7 +186,7 @@
 import { Component, Prop } from "vue-property-decorator";
 import DateCalendarIcon from "@/components/Event/DateCalendarIcon.vue";
 import { mixins } from "vue-class-component";
-import { RawLocation } from "vue-router";
+import { RawLocation, Route } from "vue-router";
 import {
   IParticipant,
   ParticipantRole,
@@ -246,12 +246,13 @@ export default class EventListCard extends mixins(ActorMixin, EventMixin) {
   /**
    * Delete the event
    */
-  async openDeleteEventModalWrapper() {
+  async openDeleteEventModalWrapper(): Promise<void> {
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
     // @ts-ignore
     await this.openDeleteEventModal(this.participation.event, this.currentActor);
   }
 
-  async gotToWithCheck(participation: IParticipant, route: RawLocation) {
+  async gotToWithCheck(participation: IParticipant, route: RawLocation): Promise<Route> {
     if (participation.actor.id !== this.currentActor.id && participation.event.organizerActor) {
       const organizer = participation.event.organizerActor as IPerson;
       await changeIdentity(this.$apollo.provider.defaultClient, organizer);

js/src/components/Event/EventListViewCard.vue

@@ -50,12 +50,7 @@
 </template>
 
 <script lang="ts">
-import {
-  IParticipant,
-  ParticipantRole,
-  EventVisibility,
-  IEventCardOptions,
-} from "@/types/event.model";
+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";
@@ -63,8 +58,6 @@ import { mixins } from "vue-class-component";
 import ActorMixin from "@/mixins/actor";
 import { CURRENT_ACTOR_CLIENT } from "@/graphql/actor";
 import EventMixin from "@/mixins/event";
-import { changeIdentity } from "@/utils/auth";
-import { Route } from "vue-router";
 import RouteName from "../../router/name";
 
 const defaultOptions: IEventCardOptions = {
@@ -88,7 +81,7 @@ export default class EventListViewCard extends mixins(ActorMixin, EventMixin) {
   /**
    * The participation associated
    */
-  @Prop({ required: true }) event!: IParticipant;
+  @Prop({ required: true }) event!: IEvent;
 
   /**
    * Options are merged with default options

js/src/components/Event/FullAddressAutoComplete.vue

@@ -118,6 +118,7 @@ import { IConfig } from "../../types/config.model";
 })
 export default class FullAddressAutoComplete extends Vue {
   @Prop({ required: true }) value!: IAddress;
+
   @Prop({ required: false, default: "" }) label!: string;
 
   addressData: IAddress[] = [];

js/src/components/Group/GroupSection.vue

@@ -1,50 +1,91 @@
 <template>
   <section>
-    <h2 :class="{ privateSection }">
-      <b-icon :icon="icon" />
-      <span>{{ title }}</span>
-    </h2>
-    <slot></slot>
+    <div class="group-section-title" :class="{ privateSection }">
+      <h2>
+        <b-icon :icon="icon" />
+        <span>{{ title }}</span>
+      </h2>
+      <router-link :to="route">{{ $t("View all") }}</router-link>
+    </div>
+    <div class="main-slot">
+      <slot></slot>
+    </div>
+    <div class="create-slot">
+      <slot name="create"></slot>
+    </div>
   </section>
 </template>
 
 <script lang="ts">
 import { Component, Vue, Prop } from "vue-property-decorator";
+import { Route } from "vue-router";
 
 @Component
 export default class GroupSection extends Vue {
   @Prop({ required: true, type: String }) title!: string;
+
   @Prop({ required: true, type: String }) icon!: string;
+
   @Prop({ required: false, type: Boolean, default: true }) privateSection!: boolean;
+
+  @Prop({ required: true, type: Object }) route!: Route;
 }
 </script>
 <style lang="scss" scoped>
 @import "@/variables.scss";
 
-h2 {
+section {
+  display: flex;
+  flex-direction: column;
+  margin-bottom: 2rem;
+  border: 2px solid $violet;
+
+  .create-slot {
+    display: flex;
+    justify-content: end;
+    padding-bottom: 0.5rem;
+    padding-right: 0.5rem;
+  }
+
+  .main-slot {
+    min-height: 5rem;
+    padding: 5px;
+  }
+}
+
+div.group-section-title {
   display: flex;
   align-items: stretch;
-  margin: 15px 0 30px;
+  background: $secondary;
+  color: #3a384c;
 
-  /deep/ span {
-    background: $secondary;
-    display: inline;
-    padding: 3px 8px;
-    color: #3a384c;
-    font-family: "Liberation Sans", "Helvetica Neue", Roboto, Helvetica, Arial, serif;
-    font-weight: 500;
-    font-size: 30px;
+  &.privateSection {
+    color: $violet-2;
+    background: $purple-2;
+  }
+
+  /deep/ & > a {
+    align-self: center;
+    margin-right: 5px;
+    color: $orange-3;
+  }
+
+  h2 {
     flex: 1;
-  }
 
-  /deep/ span.icon {
-    flex: 0;
-    height: 100%;
-  }
-}
+    /deep/ span {
+      display: inline;
+      padding: 3px 8px;
+      font-family: "Liberation Sans", "Helvetica Neue", Roboto, Helvetica, Arial, serif;
+      font-weight: 500;
+      font-size: 30px;
+      flex: 1;
+    }
 
-h2.privateSection /deep/ span {
-  color: $violet-2;
-  background: $purple-2;
+    /deep/ span.icon {
+      flex: 0;
+      height: 100%;
+    }
+  }
 }
 </style>

js/src/components/NavBar.vue

@@ -157,7 +157,7 @@ export default class NavBar extends Vue {
 
   RouteName = RouteName;
 
-  mobileNavbarActive: boolean = false;
+  mobileNavbarActive = false;
 
   @Watch("currentActor")
   async initializeListOfIdentities() {

js/src/components/Participation/UnloggedParticipation.vue

@@ -73,7 +73,6 @@
 <script lang="ts">
 import { Component, Prop, Vue } from "vue-property-decorator";
 import { FETCH_EVENT } from "@/graphql/event";
-import EventListCard from "@/components/Event/EventListCard.vue";
 import EventListViewCard from "@/components/Event/EventListViewCard.vue";
 import { EventModel, IEvent } from "@/types/event.model";
 import VerticalDivider from "@/components/Utils/VerticalDivider.vue";
@@ -86,7 +85,6 @@ import RouteName from "../../router/name";
   components: {
     VerticalDivider,
     EventListViewCard,
-    EventListCard,
     Subtitle,
   },
   apollo: {
@@ -114,7 +112,8 @@ export default class UnloggedParticipation extends Vue {
 
   config!: IConfig;
 
-  get host() {
+  // eslint-disable-next-line class-methods-use-this
+  get host(): string {
     return window.location.hostname;
   }
 

js/src/components/SearchField.vue

@@ -21,7 +21,7 @@ import RouteName from "../router/name";
 export default class SearchField extends Vue {
   @Prop({ type: String, required: false }) placeholder!: string;
 
-  search: string = "";
+  search = "";
 
   enter() {
     this.$emit("navbar-search");