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>