Merge pull request #302 from Instanssi/add-events-page

Add events page
Instanssi · Mar 29, 2024 · 461ba87 · 461ba87
2 parents 56e8ce5 + 6330286
commit 461ba87
Show file tree

Hide file tree

Showing 7 changed files with 357 additions and 5 deletions.
diff --git a/admin/src/App.vue b/admin/src/App.vue
@@ -31,6 +31,12 @@ const primaryLinks: NavigationLinks = [
         icon: "fas fa-dashboard",
         to: "dashboard",
     },
+    {
+        title: t("App.nav.events"),
+        icon: "fas fa-calendar-days",
+        to: "events",
+        requirePerm: PermissionTarget.EVENT,
+    },
     {
         title: t("App.nav.blog"),
         icon: "fas fa-blog",

diff --git a/admin/src/assets/main.scss b/admin/src/assets/main.scss
@@ -1,8 +1,8 @@
 @import "vuetify";
-@import "@fontsource/open-sans";
-@import "@fontsource/fira-mono";
-@import "@fontsource/exo-2/900.css";
-@import "@fontsource/exo-2/600.css";
+@import "@fontsource/open-sans/latin-400.css";
+@import "@fontsource/fira-mono/latin-400.css";
+@import "@fontsource/exo-2/latin-900.css";
+@import "@fontsource/exo-2/latin-600.css";
 
 html,
 body {

diff --git a/admin/src/components/EventDialog.vue b/admin/src/components/EventDialog.vue
@@ -0,0 +1,74 @@
+<template>
+    <BaseDialog
+        :title="t('EventDialog.title')"
+        :ok-text="t('General.save')"
+        ok-icon="fas fa-floppy-disk"
+        :width="1000"
+        ref="dialog"
+    >
+        <v-form>
+            <v-text-field v-model="name" variant="outlined" :label="t('EventDialog.labels.name')" />
+            <v-text-field v-model="tag" variant="outlined" :label="t('EventDialog.labels.tag')" />
+            <v-text-field
+                type="date"
+                v-model="date"
+                variant="outlined"
+                :label="t('EventDialog.labels.date')"
+            />
+            <v-text-field
+                v-model="mainUrl"
+                variant="outlined"
+                :label="t('EventDialog.labels.mainUrl')"
+            />
+            <v-switch v-model="archived" :label="archivedLabel" />
+        </v-form>
+    </BaseDialog>
+</template>
+
+<script setup lang="ts">
+import BaseDialog from "@/components/BaseDialog.vue";
+import { computed, type Ref, ref } from "vue";
+import { useI18n } from "vue-i18n";
+import type { Event } from "@/api";
+
+const dialog: Ref<InstanceType<typeof BaseDialog> | undefined> = ref();
+
+const { t } = useI18n();
+const name = ref("");
+const tag = ref("");
+const date = ref("");
+const archived = ref(false);
+const mainUrl = ref("");
+const archivedLabel = computed(() =>
+    archived.value ? t("EventDialog.labels.isArchived") : t("EventDialog.labels.isNotArchived")
+);
+
+async function modal(item: undefined | Event = undefined) {
+    if (item !== undefined) {
+        name.value = item.name;
+        tag.value = item.tag ?? "";
+        date.value = item.date;
+        archived.value = item.archived ?? false;
+        mainUrl.value = item.mainurl ?? "";
+    } else {
+        name.value = "";
+        tag.value = "";
+        date.value = "";
+        archived.value = false;
+        mainUrl.value = "";
+    }
+    const ok = (await dialog.value?.modal()) ?? false;
+    return {
+        ok,
+        name: name.value,
+        tag: tag.value,
+        date: date.value,
+        archived: archived.value,
+        mainUrl: mainUrl.value,
+    };
+}
+
+defineExpose({ modal });
+</script>
+
+<style scoped lang="scss"></style>
diff --git a/admin/src/icons.ts b/admin/src/icons.ts
@@ -13,6 +13,7 @@ import {
     faFloppyDisk,
     faXmark,
     faPenToSquare,
+    faCalendarDays,
 } from "@fortawesome/free-solid-svg-icons";
 
 // These are used by vuetify and imported for the standard set
@@ -67,7 +68,8 @@ export function setupIcons(app: App): void {
         faLock,
         faXmark,
         faFloppyDisk,
-        faPenToSquare
+        faPenToSquare,
+        faCalendarDays
     );
     library.add(faGoogle, faSteam, faGithub);
 

diff --git a/admin/src/locales/en.json b/admin/src/locales/en.json
@@ -37,13 +37,36 @@
         "dashboard": "Dashboard",
         "site": "Site",
         "blog": "Blog",
+        "events": "Events",
         "logout": "Log out"
       }
     },
     "MainNavigation": {
       "title": "Instanssi",
       "event": "Event"
     },
+    "EventView": {
+      "title": "Events",
+      "newEvent": "New event",
+      "loadingEvents": "Loading events ...",
+      "noEventsFound": "No events found.",
+      "confirmDelete": "Do your really want to delete event '{name}' ?",
+      "headers":  {
+        "id": "ID",
+        "name": "Name",
+        "tag": "Tag",
+        "date": "Starting date",
+        "archived": "Archived",
+        "mainUrl": "Main URL",
+        "actions": "Actions"
+      },
+      "errors": {
+        "failedToLoad": "Failed to load events; try again later.",
+        "failedToDelete": "Failed to delete event; try again later.",
+        "failedToEdit": "Failed to edit event; try again later.",
+        "failedToCreate": "Failed to create event; try again later."
+      }
+    },
     "BlogEditorView": {
       "title": "Blog",
       "newBlogPost": "New blog post",
@@ -76,6 +99,17 @@
         "postNotVisible": "Post is private; only admins can see it"
       }
     },
+    "EventDialog": {
+      "title": "Event",
+      "labels": {
+        "name": "Name",
+        "tag": "Tag",
+        "date": "Starting date",
+        "mainUrl": "Main URL",
+        "isArchived": "Event is archived",
+        "isNotArchived": "Event is not archived"
+      }
+    },
     "MainView": {
       "title": "Dashboard"
     },

diff --git a/admin/src/router.ts b/admin/src/router.ts
@@ -26,6 +26,15 @@ const router = createRouter({
                 },
             },
         },
+        {
+            path: "/:eventId(\\d+)/events",
+            name: "events",
+            meta: {
+                requireAuth: true,
+            },
+            props: true,
+            component: () => import("@/views/EventView.vue"),
+        },
         {
             path: "/:eventId(\\d+)/blog",
             name: "blog",