feat(admin): add user role management

apps/settings/src/components/Members.vue

@@ -5,13 +5,7 @@
       <MessageError v-if="graphqlError">{{ graphqlError }}</MessageError>
       <MessageSuccess v-if="success">{{ success }}</MessageSuccess>
     </div>
-    <div
-      v-if="
-        session &&
-        (session.email == 'admin' ||
-          (session.roles && session.roles.length > 0))
-      "
-    >
+    <div v-if="session?.email === 'admin' || session?.roles?.length">
       <h5 class="card-title">Manage members</h5>
       <p>Use table below to add, edit or remove members</p>
       <form v-if="canEdit" class="form-inline">
@@ -109,13 +103,11 @@ export default {
       loading: false,
     };
   },
-
   computed: {
     canEdit() {
       return (
-        this.session != null &&
-        (this.session.email == "admin" ||
-          this.session.roles.includes("Manager"))
+        this.session?.email === "admin" ||
+        this.session?.roles.includes("Manager")
       );
     },
   },
@@ -130,7 +122,7 @@ export default {
         `mutation drop($member:[String]){drop(members:$member){message}}`,
         { member: name }
       )
-        .then((data) => {
+        .then(() => {
           this.loadMembers();
         })
         .catch((error) => {

apps/tailwind-components/components/Modal.vue

@@ -10,7 +10,7 @@ function showModal() {
   visible.value = true;
 }
 
-const closeModal = (returnVal?: string) => {
+const closeModal = (_returnVal?: string) => {
   visible.value = false;
 };
 
@@ -20,6 +20,7 @@ defineExpose({
   visible,
 });
 </script>
+
 <template>
   <section
     v-show="visible"

apps/tailwind-components/components/Navigation.vue

@@ -22,7 +22,6 @@ const mainButtons = computed(() =>
 const subButtons = computed(() =>
   props.navigation.slice(props.maximumButtonShown)
 );
-const active = "underline";
 </script>
 
 <template>

apps/tailwind-components/components/Table.vue

@@ -1,4 +1,3 @@
-<!-- eslint-disable vue/multi-word-component-names -->
 <template>
   <table class="w-full table-auto">
     <thead>

apps/tailwind-components/components/TableCell.vue

@@ -1,4 +1,3 @@
-<!-- eslint-disable vue/multi-word-component-names -->
 <script setup>
 defineProps({
   allowLineBreak: {

apps/tailwind-components/components/TableRow.vue

@@ -1,4 +1,3 @@
-<!-- eslint-disable vue/multi-word-component-names -->
 <template>
   <tr class="sm:hover:bg-blue-50 sm:hover:cursor-pointer">
     <slot></slot>

apps/tailwind-components/components/input/Radio.vue

@@ -9,7 +9,7 @@
 
 <script lang="ts" setup>
 defineProps<{
-  value: string;
+  value: string | boolean;
 }>();
 
 const modelValue = defineModel<string>();

apps/tailwind-components/components/input/RadioGroup.vue

@@ -3,7 +3,7 @@
     <div
       class="flex justify-start align-center"
       v-for="option in radioOptions"
-      :key="option.value"
+      :key="JSON.stringify(option.value)"
     >
       <InputRadio
         :id="`${id}-radio-group-${option.value}`"
@@ -41,7 +41,7 @@
 
 <script lang="ts" setup>
 interface RadioOptionsDataIF {
-  value: string;
+  value: string | boolean;
   label?: string;
   checked?: boolean | undefined;
 }
@@ -57,7 +57,7 @@ withDefaults(
   }
 );
 
-const modelValue = defineModel<string>();
+const modelValue = defineModel<string | boolean>();
 
 function resetModelValue() {
   modelValue.value = "";

apps/tailwind-components/components/input/Select.vue

@@ -1,6 +1,4 @@
 <script setup lang="ts">
-import type { N } from "vitest/dist/reporters-MmQN-57K.js";
-
 withDefaults(
   defineProps<{
     id: string;

apps/tailwind-components/nuxt.config.ts

@@ -1,32 +1,35 @@
 // https://nuxt.com/docs/api/configuration/nuxt-config
 export default defineNuxtConfig({
   devtools: { enabled: true },
-  modules: ['@nuxtjs/tailwindcss', '@nuxt/test-utils/module'],
+  modules: ["@nuxtjs/tailwindcss", "@nuxt/test-utils/module"],
   tailwindcss: {
-    cssPath: '~/assets/css/main.css',
-    configPath: '~/tailwind.config.js'
+    cssPath: "~/assets/css/main.css",
+    configPath: "~/tailwind.config.js",
   },
 
-  ssr: process.env.NUXT_PUBLIC_IS_SSR === 'false' ? false : true,
+  ssr: process.env.NUXT_PUBLIC_IS_SSR === "false" ? false : true,
 
   router: {
-    options: process.env.NUXT_PUBLIC_IS_SSR === 'false' ? {
-      hashMode: true
-    } : {}
+    options:
+      process.env.NUXT_PUBLIC_IS_SSR === "false"
+        ? {
+            hashMode: true,
+          }
+        : {},
   },
 
   nitro: {
     prerender: {
-      ignore: ['/_tailwind/']
-    }
+      ignore: ["/_tailwind/"],
+    },
   },
 
   app: {
     head: {
       htmlAttrs: {
-        'data-theme': ''
-      }
-    }
+        "data-theme": "",
+      },
+    },
   },
 
   components: [
@@ -36,16 +39,16 @@ export default defineNuxtConfig({
     },
     {
       path: "~/components/viz",
-      pathPrefix: false
+      pathPrefix: false,
     },
     "~/components",
   ],
 
   runtimeConfig: {
     public: {
-      apiBase: "https://emx2.dev.molgenis.org/", // "http://localhost:8080/",
+      apiBase: "http://localhost:8080/",
     },
   },
 
-  compatibilityDate: '2024-08-23',
-})
+  compatibilityDate: "2024-08-23",
+});

apps/tailwind-components/pages/Button.story.vue

@@ -42,22 +42,23 @@
 
     <h2 class="text-2xl">Icons</h2>
     <div class="flex gap-4">
-      <Button type="primary" size="medium" icon="filter" iconPosition="left"
-        >Filter</Button
-      >
-      <Button type="primary" size="small" icon="filter" iconPosition="right"
-        >Filter</Button
-      >
-      <Button type="secondary" size="small" icon="star" iconPosition="left"
-        >Star</Button
-      >
+      <Button type="primary" size="medium" icon="filter" iconPosition="left">
+        Filter
+      </Button>
+      <Button type="primary" size="small" icon="filter" iconPosition="right">
+        Filter
+      </Button>
+      <Button type="secondary" size="small" icon="star" iconPosition="left">
+        Star
+      </Button>
       <Button
         type="secondary"
         size="small"
         icon="CaretDown"
         iconPosition="right"
-        >CaretDown</Button
       >
+        CaretDown
+      </Button>
     </div>
   </div>
 </template>

apps/tailwind-components/pages/Modal.story.vue

@@ -8,6 +8,7 @@ function showModal() {
 
 let sectionCount = ref(0);
 </script>
+
 <template>
   <button
     @click="showModal"

apps/tailwind-components/server/routes/[schema]/graphql.ts

@@ -2,13 +2,13 @@ import { joinURL } from "ufo";
 import { createConsola } from "consola";
 
 export default defineEventHandler((event) => {
- const config = useRuntimeConfig(event); 
- const logger = createConsola({ level: config.logLevel?? 3 });
+  const config = useRuntimeConfig(event);
+  const logger = createConsola({ level: config.logLevel ?? 3 });
   logger.info("proxy schema gql request : ", event.path);
   if (event.method === "POST") {
     readBody(event).then((body) => {
       if (body.query) {
-        logger.debug( body.query);
+        logger.debug(body.query);
       }
       if (body.variables) {
         logger.debug(body.variables);
@@ -17,6 +17,6 @@ export default defineEventHandler((event) => {
   }
   const schema = getRouterParam(event, "schema") || "";
   logger.info("to : ", joinURL(config.public.apiBase, schema, "graphql"));
-  const target = joinURL(config.public.apiBase, schema,"graphql");
+  const target = joinURL(config.public.apiBase, schema, "graphql");
   return proxyRequest(event, target);
 });

apps/ui/layouts/default.vue

@@ -2,7 +2,7 @@
 const config = useRuntimeConfig();
 const route = useRoute();
 const { data: session } = await useSession();
-console.log("session form defaiult layout: ", session.value);
+console.log("session form default layout: ", session.value);
 
 const faviconHref = config.public.emx2Theme
   ? `/_nuxt-styles/img/${config.public.emx2Theme}.ico`
@@ -21,8 +21,8 @@ useHead({
       return `${titleChunk} | ${config.public.siteTitle}`;
     } else if (titleChunk) {
       return titleChunk;
-    } else if (config.public.siteTitle) {
-      return config.public.siteTitle as string;
+      // } else if (config.public.siteTitle) {
+      //   return config.public.siteTitle as string;
     } else {
       return "Emx2";
     }
@@ -67,6 +67,11 @@ const navigation = computed(() => {
           <Navigation :navigation="navigation" />
         </template>
         <template #account>
+          <HeaderButton
+            label="Admin"
+            icon="Database"
+            @click="navigateTo({ path: '/admin/' })"
+          />
           <HeaderButton
             :label="isSignedIn ? 'Account' : 'Signin'"
             icon="user"

apps/ui/middleware/adminOnly.ts

@@ -1,7 +1,7 @@
-export default defineNuxtRouteMiddleware(async (to, from) => {
-    const {data: session} = await useSession();
-    const isAdmin = computed(() => session.value.email === "admin");
-    if (!isAdmin.value) {
-      return navigateTo('/login')
-    }
-  })
+export default defineNuxtRouteMiddleware(async (_to, _from) => {
+  const { data: session } = await useSession();
+  const isAdmin = computed(() => session.value.email === "admin");
+  if (!isAdmin.value) {
+    return navigateTo("/login");
+  }
+});

apps/ui/pages/account.vue

@@ -37,15 +37,17 @@ async function signout() {
           type="primary"
           size="medium"
           @click="signout"
-          >Sign out</Button
         >
+          Sign out
+        </Button>
         <Button
           v-else
           type="primary"
           size="medium"
           @click="navigateTo('/login')"
-          >Sign in</Button
         >
+          Sign in
+        </Button>
       </div>
 
       <div class="mt-3">{{ errorMsg }}</div>