feat(admin): add user role management (#4248)

new tailwind admin screen with role management for users.

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">
@@ -106,13 +100,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")
       );
     },
   },
@@ -127,7 +119,7 @@ export default {
         `mutation drop($member:[String]){drop(members:$member){message}}`,
         { member: name }
       )
-        .then((data) => {
+        .then(() => {
           this.loadMembers();
         })
         .catch((error) => {

apps/tailwind-components/components/Header.vue

@@ -9,6 +9,8 @@
           <!-- <SearchBar /> -->
         </div>
 
+        <slot name="admin" />
+
         <slot name="account">
           <!-- <HeaderButton label="Favorites" icon="star" /> -->
           <HeaderButton label="Account" icon="user" />

apps/tailwind-components/components/Modal.vue

@@ -10,7 +10,7 @@ function showModal() {
   visible.value = true;
 }
 
-const closeModal = (returnVal?: string) => {
+const closeModal = () => {
   visible.value = false;
 };
 
@@ -20,6 +20,7 @@ defineExpose({
   visible,
 });
 </script>
+
 <template>
   <section
     v-show="visible"
@@ -29,11 +30,12 @@ defineExpose({
     class="fixed min-h-lvh w-full top-0 left-0 flex z-20"
   >
     <a
-      @click="closeModal('close from backdrop')"
+      id="backdrop"
+      @click="closeModal()"
       class="w-full h-full absolute left-0 bg-black/60"
       href="#"
       tabindex="-1"
-    ></a>
+    />
 
     <div class="bg-white w-3/4 relative m-auto h-3/4 rounded-50px max-w-xl">
       <header class="pt-[36px] px-[50px] overflow-y-auto">
@@ -43,38 +45,23 @@ defineExpose({
         </h2>
 
         <button
-          @click="closeModal('close from btn')"
+          @click="closeModal()"
           aria-label="Close modal"
           class="absolute top-7 right-8 p-1"
         >
           <BaseIcon class="text-blue-500" name="cross" />
         </button>
 
-        <slot name="header"></slot>
+        <slot name="header" />
       </header>
 
       <div class="px-[50px] overflow-y-auto py-4 max-h-[calc(80vh-232px)]">
-        <slot></slot>
+        <slot />
       </div>
 
       <footer class="bg-modal-footer px-[50px] rounded-b-50px">
         <menu class="flex items-center justify-left h-[116px]">
-          <slot name="footer">
-            <div class="flex flex-wrap gap-5">
-              <button
-                @click="closeModal('close from btn')"
-                class="flex items-center border rounded-full h-10.5 px-5 text-heading-lg gap-3 tracking-widest uppercase font-display bg-button-primary text-button-primary border-button-primary hover:bg-button-primary-hover hover:text-button-primary-hover hover:border-button-primary-hover"
-              >
-                Primary
-              </button>
-              <button
-                @click="closeModal('close from btn')"
-                class="flex items-center border rounded-full h-10.5 px-5 text-heading-lg gap-3 tracking-widest uppercase font-display bg-button-secondary text-button-secondary border-button-secondary hover:bg-button-secondary-hover hover:text-button-secondary-hover hover:border-button-secondary-hover"
-              >
-                Secondary
-              </button>
-            </div>
-          </slot>
+          <slot name="footer" />
         </menu>
       </footer>
     </div>

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

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

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

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 text-title">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);
 });