Add admin bar and other fixes

frontend/src/components/admin/Sidebar.vue

@@ -204,7 +204,7 @@ export default {
   },
   methods: {
     logout() {
-      localStorage.removeItem("token");
+      this.$store.dispatch("user/logout");
       this.$router.push("/");
     },
     beforeEnter(el) {

frontend/src/components/main/AlertBar.vue

@@ -2,6 +2,9 @@
   <div
     v-if="show"
     class="fixed w-full py-3 px-8 z-50 main-text font-bold rounded-b-lg flex items-center"
+    :class="{
+      'mt-8': showUserBar,
+    }"
     :style="`background-color: ${settings.alertBgColor};color: ${settings.alertTextColor}`"
   >
     <div class="w-full">
@@ -41,6 +44,11 @@ export default {
       this.show = false;
     },
   },
+  computed: {
+    showUserBar() {
+      return this.isAdmin || this.isUnitLeader;
+    },
+  },
   created() {
     if (localStorage.getItem("alert") !== this.settings.alertText) {
       this.show = true;

frontend/src/components/main/UserBar.vue

@@ -0,0 +1,90 @@
+<template>
+  <div
+    class="fixed z-50 w-full h-8 bg-gray-900 text-white mb-5 hidden md:flex flex-row justify-between px-5"
+  >
+    <div class="flex flex-row space-x-2 items-center">
+      <img class="py-1 h-full" :src="logo" />
+      <div class="flex flex-row space-x-5 items-center pl-5">
+        <button @click="goToDashboard">
+          <font-awesome-icon :icon="icons.faGauge" />
+          {{ $t("dashboard.goToDashboard") }}
+        </button>
+        <button @click="goToEditPage" v-if="showPageEdit">
+          <font-awesome-icon :icon="icons.faPen" />
+          {{ $t("dashboard.editPage") }}
+        </button>
+        <button @click="goToEvents" v-if="showActivityEdit">
+          <font-awesome-icon :icon="icons.faCalendarDays" />
+          {{ $t("dashboard.editEvents") }}
+        </button>
+      </div>
+    </div>
+    <div class="flex flex-row space-x-5 items-center">
+      <button>
+        <font-awesome-icon :icon="icons.faUser" />
+        {{ userName }}
+      </button>
+      <button @click="logout">
+        <font-awesome-icon :icon="icons.faDoorOpen" />
+        {{ $t("dashboard.logout") }}
+      </button>
+    </div>
+  </div>
+</template>
+<script>
+import {
+  faDoorOpen,
+  faPen,
+  faGauge,
+  faUser,
+  faCalendarDays,
+} from "@fortawesome/free-solid-svg-icons";
+export default {
+  data() {
+    return {
+      show: false,
+      icons: {
+        faDoorOpen,
+        faPen,
+        faGauge,
+        faUser,
+        faCalendarDays,
+      },
+    };
+  },
+  props: ["pageId", "groupId"],
+  methods: {
+    goToEditPage() {
+      this.$router.push(`/dashboard/pages/${this.pageId}`);
+    },
+    goToDashboard() {
+      this.$router.push("/dashboard");
+    },
+    goToEvents() {
+      this.$router.push(`/dashboard/events`);
+    },
+    logout() {
+      this.$store.dispatch("user/logout");
+    },
+  },
+  computed: {
+    userName() {
+      return this.$store.state.user.user.nickname;
+    },
+    logo() {
+      return this.backendURL + this.settings.divisionLogo?.path;
+    },
+    showPageEdit() {
+      return (
+        this.$store.state.user.groupIds.includes(this.groupId) || this.isAdmin
+      );
+    },
+    showActivityEdit() {
+      return (
+        this.groupId &&
+        (this.$store.state.user.groupIds.includes(this.groupId) || this.isAdmin)
+      );
+    },
+  },
+};
+</script>

frontend/src/store/modules/user.js

@@ -9,6 +9,7 @@ export const user = {
       isAdmin: false,
       isUnitLeader: false,
       groups: [],
+      groupIds: [],
     };
   },
   mutations: {
@@ -29,6 +30,7 @@ export const user = {
     },
     setGroups(state, groups) {
       state.groups = groups;
+      state.groupIds = groups.map((group) => group.id);
     },
   },
   actions: {
@@ -49,6 +51,10 @@ export const user = {
         console.log("User not logged in");
       }
     },
+    logout({ commit }) {
+      localStorage.removeItem("token");
+      commit("clear");
+    },
   },
   getters: {},
 };

frontend/src/translations.js

@@ -211,6 +211,9 @@ export const messages = {
       passwordProtected: "Passwortgeschützt",
       passwordInfo:
         "Das Passwort wird verschlüsselt gespeichert und wird deshalb nicht angezeigt auch wenn es bereits gesetzt wurde.",
+      editPage: "Diese Seite bearbeiten",
+      editEvents: "Aktivitäten bearbeiten",
+      goToDashboard: "Zum Dashboard",
     },
     page: {
       campDateLabel: "Lagerdatum",

frontend/src/views/Dashboard/DashboardHome.vue

@@ -2,16 +2,157 @@
   <Card v-if="user" class="text-4xl font-extrabold">{{
     $t("dashboard.hello", { name: user.nickname })
   }}</Card>
+  <div class="flex flex-col space-y-2 pt-5">
+    <template v-for="card in cards" :key="card.id">
+      <button
+        @click="redirectTo(card.link)"
+        v-if="(isAdmin && card.adminOnly) || !card.adminOnly"
+        class="bg-gray-50 hover:text-gray-700 rounded-lg px-4 py-2 md:px-5"
+      >
+        <div class="w-full h-full flex items-center space-x-8">
+          <div class="h-full aspect-square">
+            <font-awesome-icon :icon="card.icon" class="size-10" />
+          </div>
+          <p class="font-semibold text-xl">{{ card.name }}</p>
+        </div>
+      </button>
+    </template>
+  </div>
 </template>
 
 <script>
 import Card from "../../components/admin/Card.vue";
+import {
+  faStairs,
+  faBookOpen,
+  faPhotoVideo,
+  faUsers,
+  faUser,
+  faRectangleList,
+  faEllipsis,
+  faGear,
+  faLocationDot,
+  faCalendarDays,
+  faAddressCard,
+  faCampground,
+  faDoorOpen,
+  faCircleQuestion,
+  faBars,
+  faGhost,
+} from "@fortawesome/free-solid-svg-icons";
 export default {
   components: { Card },
+  data() {
+    return {
+      cards: [
+        {
+          id: 1,
+          name: this.$t("dashboard.menuAndLinks"),
+          adminOnly: true,
+          icon: faEllipsis,
+          link: "/dashboard/menu",
+        },
+        {
+          id: 2,
+          name: this.$t("dashboard.pages"),
+          adminOnly: false,
+          icon: faBookOpen,
+          link: "/dashboard/pages",
+        },
+        {
+          id: 3,
+          name: this.isRegion
+            ? this.$t("dashboard.divisions")
+            : this.$t("dashboard.groups"),
+          adminOnly: false,
+          icon: faUsers,
+          link: "/dashboard/groups",
+        },
+        {
+          id: 4,
+          name: this.$t("dashboard.contacts"),
+          adminOnly: true,
+          icon: faAddressCard,
+          link: "/dashboard/contacts",
+        },
+        {
+          id: 5,
+          name: this.$t("dashboard.sections"),
+          adminOnly: true,
+          icon: faStairs,
+          link: "/dashboard/sections",
+        },
+        {
+          id: 6,
+          name: this.$t("dashboard.events"),
+          adminOnly: false,
+          icon: faCalendarDays,
+          link: "/dashboard/events",
+        },
+        {
+          id: 7,
+          name: this.$t("dashboard.camps"),
+          adminOnly: false,
+          icon: faCampground,
+          link: "/dashboard/camps",
+        },
+        {
+          id: 8,
+          name: this.$t("dashboard.locations"),
+          adminOnly: false,
+          icon: faLocationDot,
+          link: "/dashboard/locations",
+        },
+        {
+          id: 9,
+          name: this.$t("dashboard.faqs"),
+          adminOnly: false,
+          icon: faCircleQuestion,
+          link: "/dashboard/faqs",
+        },
+        {
+          id: 10,
+          name: this.$t("dashboard.forms"),
+          adminOnly: false,
+          icon: faRectangleList,
+          link: "/dashboard/forms",
+        },
+        {
+          id: 11,
+          name: this.$t("dashboard.media"),
+          adminOnly: false,
+          icon: faPhotoVideo,
+          link: "/dashboard/media",
+        },
+        {
+          id: 12,
+          name: this.$t("dashboard.users"),
+          adminOnly: true,
+          icon: faUser,
+          link: "/dashboard/users",
+        },
+        {
+          id: 13,
+          name: this.$t("dashboard.settings"),
+          adminOnly: true,
+          icon: faGear,
+          link: "/dashboard/settings",
+        },
+      ],
+    };
+  },
   computed: {
     user() {
       return this.$store.state.user.user;
     },
+    isRegion() {
+      return this.settings.isRegion;
+    },
+  },
+  methods: {
+    redirectTo(link) {
+      this.$router.push(link);
+    },
   },
 };
 </script>

frontend/src/views/Home.vue

@@ -1,11 +1,16 @@
 <template>
   <AlertBar v-if="settings.showAlert" />
-  <RegularPage :key="`page-${pageKey}`" v-if="!pageNonExistent" :page="page">
+  <UserBar v-if="showUserBar" :pageId="page.id" :groupId="page.groupId" />
+  <RegularPage
+    :key="`page-${pageKey}`"
+    v-if="page && !pageNonExistent"
+    :page="page"
+  >
     <template v-slot:navbar>
       <NavBar :menuItems="menuItems" />
     </template>
   </RegularPage>
-  <FooterComponent v-if="!pageNonExistent" />
+  <FooterComponent v-if="page && !pageNonExistent" />
   <CookieBanner />
 </template>
 <script>
@@ -14,6 +19,7 @@ import FooterComponent from "../components/main/FooterComponent.vue";
 import RegularPage from "./RegularPage.vue";
 import CookieBanner from "../components/main/CookieBanner.vue";
 import AlertBar from "../components/main/AlertBar.vue";
+import UserBar from "../components/main/UserBar.vue";
 
 export default {
   components: {
@@ -22,6 +28,7 @@ export default {
     RegularPage,
     CookieBanner,
     AlertBar,
+    UserBar,
   },
   data() {
     return {
@@ -77,14 +84,6 @@ export default {
         console.log(error);
       }
     },
-    async getGroup(groupId) {
-      try {
-        const response = await this.callApi("get", `/groups/${groupId}`);
-        this.group = response.data;
-      } catch (error) {
-        //console.log(error);
-      }
-    },
     handlePageChange(event) {
       console.log(event);
     },
@@ -95,6 +94,10 @@ export default {
         this.settings?.divisionName || ""
       }`;
     },
+    showUserBar() {
+      const user = this.$store.state.user;
+      return this.$store.state.user.user && (user.isAdmin || user.isUnitLeader);
+    },
   },
   watch: {
     $route() {