Introduce event categories

Closes #1056

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

js/src/views/Event/Edit.vue

@@ -32,7 +32,28 @@
           />
         </b-field>
 
-        <tag-input v-model="event.tags" />
+        <div class="flex flex-wrap gap-4">
+          <b-field
+            :label="$t('Category')"
+            label-for="category"
+            class="w-full md:max-w-fit"
+          >
+            <b-select
+              :placeholder="$t('Select a category')"
+              v-model="event.category"
+              expanded
+            >
+              <option
+                v-for="category in eventCategories"
+                :value="category.id"
+                :key="category.id"
+              >
+                {{ category.label }}
+              </option>
+            </b-select>
+          </b-field>
+          <tag-input v-model="event.tags" class="flex-1" />
+        </div>
 
         <b-field
           horizontal
@@ -644,6 +665,7 @@ import { USER_SETTINGS } from "@/graphql/user";
 import { IUser } from "@/types/current-user.model";
 import { IAddress } from "@/types/address.model";
 import { LOGGED_USER_PARTICIPATIONS } from "@/graphql/participant";
+import { eventCategories } from "@/utils/categories";
 
 const DEFAULT_LIMIT_NUMBER_OF_PLACES = 10;
 
@@ -753,6 +775,8 @@ export default class EditEvent extends Vue {
 
   formatList = formatList;
 
+  eventCategories = eventCategories;
+
   @Watch("eventId", { immediate: true })
   resetFormForCreation(eventId: string): void {
     if (eventId === undefined) {
@@ -1059,22 +1083,6 @@ export default class EditEvent extends Vue {
       options: this.eventOptions,
     };
 
-    console.debug(this.event.beginsOn?.toISOString());
-
-    // if (this.event.beginsOn && this.timezone) {
-    //   console.debug(
-    //     "begins on should be",
-    //     zonedTimeToUtc(this.event.beginsOn, this.timezone).toISOString()
-    //   );
-    // }
-
-    // if (this.event.beginsOn && this.timezone) {
-    //   res.beginsOn = zonedTimeToUtc(
-    //     this.event.beginsOn,
-    //     this.timezone
-    //   ).toISOString();
-    // }
-
     const organizerActor = this.event.organizerActor?.id
       ? this.event.organizerActor
       : this.organizerActor;

js/src/views/Event/Event.vue

@@ -44,11 +44,10 @@
                   </popover-actor-card>
                 </span>
               </div>
-              <p
-                class="tags"
-                v-if="event.tags && event.tags.length > 0"
-                dir="auto"
-              >
+              <p class="tags" dir="auto">
+                <tag v-if="eventCategory" class="category">{{
+                  eventCategory
+                }}</tag>
                 <router-link
                   v-for="tag in event.tags"
                   :key="tag.title"
@@ -508,6 +507,7 @@ import { IEventMetadataDescription } from "@/types/event-metadata";
 import { eventMetaDataList } from "../../services/EventMetadata";
 import { USER_SETTINGS } from "@/graphql/user";
 import { IUser } from "@/types/current-user.model";
+import { eventCategories } from "@/utils/categories";
 
 // noinspection TypeScriptValidateTypes
 @Component({
@@ -1133,6 +1133,15 @@ export default class Event extends EventMixin {
   get routingType(): string | undefined {
     return this.config?.maps?.routing?.type;
   }
+
+  get eventCategory(): string | undefined {
+    if (this.event?.category === "MEETING") {
+      return undefined;
+    }
+    return eventCategories.find((eventCategory) => {
+      return eventCategory.id === this.event?.category;
+    })?.label as string;
+  }
 }
 </script>
 <style lang="scss" scoped>

js/src/views/Search.vue

@@ -92,6 +92,30 @@
               </option>
             </b-select>
           </b-field>
+          <b-field
+            expanded
+            :label="$t('Category')"
+            label-for="category"
+            class="searchCategory"
+          >
+            <b-select
+              expanded
+              v-model="eventCategory"
+              id="category"
+              :disabled="activeTab !== 0"
+            >
+              <option :value="null">
+                {{ $t("Any category") }}
+              </option>
+              <option
+                :value="category.id"
+                v-for="category in eventCategories"
+                :key="category.id"
+              >
+                {{ category.label }}
+              </option>
+            </b-select>
+          </b-field>
         </form>
       </div>
     </section>
@@ -223,6 +247,7 @@ import { REVERSE_GEOCODE } from "../graphql/address";
 import debounce from "lodash/debounce";
 import { CURRENT_USER_CLIENT } from "@/graphql/user";
 import { ICurrentUser } from "@/types/current-user.model";
+import { eventCategories } from "@/utils/categories";
 
 interface ISearchTimeOption {
   label: string;
@@ -364,6 +389,8 @@ export default class Search extends Vue {
 
   GROUP_PAGE_LIMIT = GROUP_PAGE_LIMIT;
 
+  eventCategories = eventCategories;
+
   $refs!: {
     aac: FullAddressAutoComplete;
     autocompleteSearchInput: any;
@@ -511,6 +538,23 @@ export default class Search extends Vue {
     });
   }
 
+  get eventCategory(): string | null {
+    return (this.$route.query.eventCategory as string) || null;
+  }
+
+  set eventCategory(eventCategory: string | null) {
+    let query = { ...this.$route.query, eventCategory };
+    if (query.eventCategory === null) {
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore
+      delete query.eventCategory;
+    }
+    this.$router.replace({
+      name: RouteName.SEARCH,
+      query,
+    });
+  }
+
   get weekend(): { start: Date; end: Date } {
     const now = new Date();
     const endOfWeekDate = endOfWeek(now, { locale: this.$dateFnsLocale });
@@ -642,36 +686,16 @@ h3.title {
 }
 
 form {
-  // ::v-deep .field label.label {
-  //   margin-bottom: 0;
-  // }
-
-  // .field.is-expanded:last-child > .field-body > .field.is-grouped {
-  //   flex-wrap: wrap;
-  //   flex: 1;
-  //   .field {
-  //     flex: 1 0 auto;
-  //     &:first-child {
-  //       flex: 3 0 300px;
-  //     }
-  //   }
-  // }
   display: grid;
   grid-gap: 0 15px;
-  grid-template-areas: "query" "location" "radius" "date" "type";
+  grid-template-areas: "query" "location" "radius" "date" "type" "category";
 
   & > * {
     margin-bottom: 0 !important;
   }
 
-  @include tablet {
-    grid-template-columns: max-content max-content max-content auto;
-    grid-template-areas: "query . ." "location . ." "radius date type";
-  }
-
   @include desktop {
-    grid-template-columns: max-content max-content max-content 1fr 3fr;
-    grid-template-areas: "query . location" "radius date type";
+    grid-template-areas: "query . ." "location radius ." "date type category";
   }
 
   .searchQuery {
@@ -681,7 +705,7 @@ form {
     }
     @include desktop {
       grid-column-start: 1;
-      grid-column-end: 4;
+      grid-column-end: 5;
     }
   }
 
@@ -694,21 +718,41 @@ form {
       grid-column: span 4;
     }
     @include desktop {
-      grid-column-start: 4;
-      grid-column-end: 7;
+      grid-column-start: 1;
+      grid-column-end: 4;
     }
   }
 
   .searchRadius {
     grid-area: radius;
+    @include desktop {
+      grid-column-start: 4;
+      grid-column-end: 5;
+    }
   }
 
   .searchDate {
     grid-area: date;
+    @include desktop {
+      grid-column-start: 1;
+      grid-column-end: 2;
+    }
   }
 
   .searchType {
     grid-area: type;
+    @include desktop {
+      grid-column-start: 2;
+      grid-column-end: 3;
+    }
+  }
+
+  .searchCategory {
+    grid-area: category;
+    @include desktop {
+      grid-column-start: 3;
+      grid-column-end: 5;
+    }
   }
 }
 </style>