aleksis/core/assets/components/app/SideNav.vue

+<template>
+  <v-navigation-drawer app>
+    <v-list nav dense shaped>
+      <v-list-item class="logo">
+        <a
+          id="logo-container"
+          @click="$router.push({ name: 'dashboard' })"
+          class="brand-logo"
+        >
+          <brand-logo :site-preferences="systemProperties.sitePreferences" />
+        </a>
+      </v-list-item>
+      <v-list-item class="search">
+        <sidenav-search />
+      </v-list-item>
+      <v-list-item-group :value="$route.name" v-if="sideNavMenu">
+        <div v-for="menuItem in sideNavMenu" :key="menuItem.name">
+          <v-list-group
+            v-if="menuItem.subMenu.length > 0"
+            href="#!"
+            :prepend-icon="menuItem.icon"
+            :value="$route.matched.slice(-2).shift().name === menuItem.name"
+          >
+            <template #activator>
+              <v-list-item-title
+                >{{ $t(menuItem.titleKey) }}
+              </v-list-item-title>
+            </template>
+            <v-list-item
+              v-for="subMenuItem in menuItem.subMenu"
+              exact
+              :to="{ name: subMenuItem.name }"
+              :target="subMenuItem.newTab ? '_blank' : '_self'"
+              :key="subMenuItem.name"
+              :value="subMenuItem.name"
+            >
+              <v-list-item-icon>
+                <v-icon v-if="subMenuItem.icon">{{ subMenuItem.icon }} </v-icon>
+              </v-list-item-icon>
+              <v-list-item-title
+                >{{ $t(subMenuItem.titleKey) }}
+              </v-list-item-title>
+            </v-list-item>
+          </v-list-group>
+          <v-list-item
+            v-else
+            exact
+            :to="{ name: menuItem.name }"
+            :target="menuItem.newTab ? '_blank' : '_self'"
+            :value="menuItem.name"
+          >
+            <v-list-item-icon>
+              <v-icon v-if="menuItem.icon">{{ menuItem.icon }}</v-icon>
+            </v-list-item-icon>
+            <v-list-item-title>{{ $t(menuItem.titleKey) }}</v-list-item-title>
+          </v-list-item>
+        </div>
+      </v-list-item-group>
+      <template v-else>
+        <v-skeleton-loader class="ma-2" type="list-item-avatar@5" />
+      </template>
+    </v-list>
+
+    <template #append>
+      <div class="pa-4 d-flex justify-center align-center">
+        <v-spacer />
+        <language-form
+          :available-languages="systemProperties.availableLanguages"
+        />
+        <v-spacer />
+      </div>
+    </template>
+  </v-navigation-drawer>
+</template>
+
+<script>
+import BrandLogo from "./BrandLogo.vue";
+import LanguageForm from "./LanguageForm.vue";
+import SidenavSearch from "./SidenavSearch.vue";
+
+export default {
+  name: "SideNav",
+  components: {
+    BrandLogo,
+    LanguageForm,
+    SidenavSearch,
+  },
+  props: {
+    sideNavMenu: { type: Array, required: true },
+    systemProperties: { type: Object, required: true },
+  },
+};
+</script>
+
+<style scoped></style>

aleksis/core/assets/components/app/SidenavSearch.vue

+<template>
+  <v-autocomplete
+    :prepend-icon="'mdi-magnify'"
+    append-icon=""
+    @click:prepend="$router.push(`/search/?q=${q}`)"
+    @keydown.enter="$router.push(`/search/?q=${q}`)"
+    single-line
+    clearable
+    :loading="$apollo.queries.searchSnippets.loading"
+    id="search"
+    type="search"
+    enterkeyhint="search"
+    :label="$t('actions.search')"
+    :search-input.sync="q"
+    flat
+    solo
+    cache-items
+    hide-no-data
+    hide-details
+    menu-props="closeOnContentClick"
+    :items="searchSnippets"
+  >
+    <template #item="{ item }">
+      <v-list-item @click="$router.push(item.obj.absoluteUrl.substring(7))">
+        <v-list-item-icon v-if="item.obj.icon">
+          <v-icon>{{ "mdi-" + item.obj.icon }}</v-icon>
+        </v-list-item-icon>
+        <v-list-item-content>
+          <v-list-item-title> {{ item.obj.name }}</v-list-item-title>
+          <v-list-item-subtitle>{{ item.text }}</v-list-item-subtitle>
+        </v-list-item-content>
+      </v-list-item>
+    </template>
+  </v-autocomplete>
+</template>
+
+<script>
+import gqlSearchSnippets from "./searchSnippets.graphql";
+
+export default {
+  name: "SidenavSearch",
+  data() {
+    return {
+      q: "",
+    };
+  },
+  apollo: {
+    searchSnippets: {
+      query: gqlSearchSnippets,
+      variables() {
+        return {
+          q: this.q,
+        };
+      },
+      skip() {
+        return !this.q;
+      },
+    },
+  },
+};
+</script>

aleksis/core/assets/components/SnackbarItem.vue → aleksis/core/assets/components/app/SnackbarItem.vue

@@ -2,7 +2,7 @@
   <v-snackbar :value="!snackbarItem.read" :color="snackbarItem.color">
     {{ $t(snackbarItem.messageKey) }}
     <template #action="{ attrs }">
-      <v-btn icon @click="checkSnackbarItem(snackbarItem.id)"
+      <v-btn icon @click="toggleSnackbarItem(snackbarItem.id)"
         ><v-icon>mdi-close</v-icon>
       </v-btn>
     </template>
@@ -10,7 +10,7 @@
 </template>
 
 <script>
-import gqlCheckSnackbarItem from "../checkSnackbarItem.graphql";
+import gqlCheckSnackbarItem from "./toggleSnackbarItem.graphql";
 
 export default {
   name: "SnackbarItem",
@@ -21,7 +21,7 @@ export default {
     },
   },
   methods: {
-    checkSnackbarItem(id) {
+    toggleSnackbarItem(id) {
       this.$apollo.mutate({
         mutation: gqlCheckSnackbarItem,
         variables: { id },

aleksis/core/assets/components/app/Splash.vue

+<template>
+  <div>
+    <div id="logo-container">
+      <img :src="'/logo'" alt="Logo" id="logo" width="600" />
+    </div>
+    <div class="lds-ellipsis">
+      <div></div>
+      <div></div>
+      <div></div>
+      <div></div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "Splash",
+  props: {
+    splash: {
+      type: Boolean,
+      default: false,
+    },
+  },
+};
+</script>
+
+<style scoped>
+.progress-container {
+  position: fixed;
+  top: 10%;
+  right: 0;
+  left: 0;
+  bottom: 10%;
+  z-index: 1000;
+}
+
+#logo {
+  width: 100%;
+}
+
+#logo-container {
+  width: min(80vw, 600px);
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  text-align: center;
+}
+
+.lds-ellipsis {
+  display: inline-block;
+  position: absolute;
+  bottom: 5%;
+  left: 50%;
+  transform: translate(-50%);
+  width: 80px;
+  height: 80px;
+}
+
+.lds-ellipsis div {
+  position: absolute;
+  top: 33px;
+  width: 13px;
+  height: 13px;
+  border-radius: 50%;
+  background: v-bind("$vuetify.theme.currentTheme.primary");
+  animation-timing-function: cubic-bezier(0, 1, 1, 0);
+}
+
+.lds-ellipsis div:nth-child(1) {
+  left: 8px;
+  animation: lds-ellipsis1 0.6s infinite;
+}
+
+.lds-ellipsis div:nth-child(2) {
+  left: 8px;
+  animation: lds-ellipsis2 0.6s infinite;
+}
+
+.lds-ellipsis div:nth-child(3) {
+  left: 32px;
+  animation: lds-ellipsis2 0.6s infinite;
+}
+
+.lds-ellipsis div:nth-child(4) {
+  left: 56px;
+  animation: lds-ellipsis3 0.6s infinite;
+}
+
+@keyframes lds-ellipsis1 {
+  0% {
+    transform: scale(0);
+  }
+  100% {
+    transform: scale(1);
+  }
+}
+
+@keyframes lds-ellipsis3 {
+  0% {
+    transform: scale(1);
+  }
+  100% {
+    transform: scale(0);
+  }
+}
+
+@keyframes lds-ellipsis2 {
+  0% {
+    transform: translate(0, 0);
+  }
+  100% {
+    transform: translate(24px, 0);
+  }
+}
+</style>

aleksis/core/assets/components/app/ping.graphql

+query Pinf($payload: String) {
+  ping(payload: $payload)
+}

aleksis/core/assets/checkSnackbarItem.graphql → aleksis/core/assets/components/app/toggleSnackbarItem.graphql

 mutation ($id: String!) {
-  checkSnackbarItem(id: $id) @client
+  toggleSnackbarItem(id: $id) @client
 }

aleksis/core/assets/whoAmI.graphql → aleksis/core/assets/components/app/whoAmI.graphql

-{
+query ($permissions: [String]!) {
   whoAmI {
     username
     isAuthenticated
@@ -11,9 +11,10 @@
       avatarUrl
       isDummy
       isImpersonate
-      preferences {
-        themeDesignMode
-      }
+    }
+    permissions: globalPermissionsByName(permissions: $permissions) {
+      name
+      result
     }
   }
 }

aleksis/core/assets/components/celery_progress/CeleryProgress.vue

+<!-- Display the progress/status of a background task on the server -->
+
 <template>
   <small-container>
     <v-card :loading="$apollo.loading">
@@ -80,15 +82,11 @@
 </template>
 
 <script>
-import BackButton from "../BackButton.vue";
-import MessageBox from "../MessageBox.vue";
 import gqlCeleryProgress from "./celeryProgress.graphql";
 import gqlCeleryProgressFetched from "./celeryProgressFetched.graphql";
-import SmallContainer from "../SmallContainer.vue";
 
 export default {
   name: "CeleryProgress",
-  components: { SmallContainer, BackButton, MessageBox },
   apollo: {
     celeryProgressByTaskId: {
       query: gqlCeleryProgress,

aleksis/core/assets/components/celery_progress/TaskListItem.vue

@@ -13,7 +13,7 @@
         v-if="!task.complete"
         color="primary"
         :value="task.progress.percent"
-      ></v-progress-circular>
+      />
       <v-icon size="32px" v-else-if="task.state === 'SUCCESS'" color="success"
         >mdi-check-circle-outline</v-icon
       >

aleksis/core/assets/components/person/AvatarClickBox.vue → aleksis/core/assets/components/generic/AvatarClickbox.vue

@@ -3,30 +3,22 @@
     <template #activator="{ on, attrs }">
       <v-card class="rounded-circle">
         <v-responsive :aspect-ratio="1" v-bind="attrs" v-on="on">
-          <avatar-content :id="id" class="rounded-circle" />
+          <slot name="activator" />
         </v-responsive>
       </v-card>
     </template>
-    <avatar-content :id="id" contain class="inDialog" />
+    <div class="inDialog">
+      <slot class="inDialog" />
+    </div>
   </v-dialog>
 </template>
 
 <script>
-import AvatarContent from "./AvatarContent.vue";
-
 export default {
   name: "AvatarClickBox",
-  components: { AvatarContent },
   data: () => ({
     overlay: false,
   }),
-  props: {
-    id: {
-      type: String,
-      required: false,
-      default: "",
-    },
-  },
 };
 </script>
 

aleksis/core/assets/components/generic/ButtonMenu.vue

+<template>
+  <v-menu transition="slide-y-transition" offset-y>
+    <template #activator="{ on, attrs }">
+      <slot name="activator" v-bind="{ on, attrs }">
+        <v-btn outlined text v-bind="attrs" v-on="on">
+          <v-icon center>
+            {{ icon }}
+          </v-icon>
+        </v-btn>
+      </slot>
+    </template>
+
+    <v-list>
+      <slot />
+    </v-list>
+  </v-menu>
+</template>
+
+<script>
+export default {
+  name: "ButtonMenu",
+  props: {
+    icon: {
+      type: String,
+      required: false,
+      default: "mdi-dots-horizontal",
+    },
+  },
+};
+</script>
+
+<style scoped></style>

aleksis/core/assets/components/generic/DetailView.vue

+<template>
+  <div>
+    <v-row class="align-center">
+      <v-col
+        v-if="!noAvatar"
+        cols="5"
+        sm="4"
+        md="3"
+        lg="2"
+        xl="1"
+        order="first"
+        max-width="220px"
+      >
+        <slot name="avatarContent" />
+      </v-col>
+
+      <v-col order="last" order-sm="1" cols="12" sm="">
+        <h1>
+          <slot name="title" />
+        </h1>
+
+        <div class="text-h5 grey--text text--darken-2">
+          <slot name="subtitle" />
+        </div>
+      </v-col>
+
+      <v-col order="1" order-sm="last" class="ms-5">
+        <slot
+          name="actions"
+          :classes="'d-flex gap justify-md-end flex-column-reverse flex-md-row align-end align-md-center'"
+        />
+      </v-col>
+    </v-row>
+    <slot />
+  </div>
+</template>
+
+<script>
+export default {
+  name: "DetailView",
+  props: {
+    noAvatar: {
+      type: Boolean,
+      required: false,
+    },
+  },
+};
+</script>
+
+<style scoped>
+.gap {
+  gap: 0.5rem;
+}
+</style>

aleksis/core/assets/components/generic/ListView.vue

+<template>
+  <detail-view no-avatar>
+    <template #title>
+      <slot name="title" />
+    </template>
+
+    <template #actions>
+      <slot name="actions" />
+    </template>
+
+    <slot name="filter" />
+    <slot />
+  </detail-view>
+</template>
+
+<script>
+import DetailView from "./DetailView.vue";
+export default {
+  name: "ListView",
+  components: {
+    DetailView,
+  },
+};
+</script>
+
+<style scoped></style>

aleksis/core/assets/components/MessageBox.vue → aleksis/core/assets/components/generic/MessageBox.vue

@@ -7,9 +7,6 @@ export default {
 
 <template>
   <v-alert border="left" text v-bind="$attrs">
-    <slot>
-      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
-      tempor incididunt ut labore et dolore magna aliqua.
-    </slot>
+    <slot></slot>
   </v-alert>
 </template>