feat: Move settings app over to using molgenis-components (#1286)

molgenis · May 19, 2022 · 18ac256 · 18ac256
1 parent 761a277
commit 18ac256
Show file tree

Hide file tree

Showing 7 changed files with 47 additions and 13 deletions.
diff --git a/apps/molgenis-components/src/components/layout/Molgenis.vue b/apps/molgenis-components/src/components/layout/Molgenis.vue
@@ -57,7 +57,7 @@ export default {
   props: {
     menuItems: {
       type: Array,
-      default: [
+      default: () => [
         { label: "Tables", href: "tables", role: "Viewer" },
         {
           label: "Schema",

diff --git a/apps/settings/package.json b/apps/settings/package.json
@@ -8,7 +8,7 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
-    "@mswertz/emx2-styleguide": "*",
+    "molgenis-components": "*",
     "core-js": "3.22.5",
     "graphql-request": "3.7.0",
     "vue": "2.6.14",

diff --git a/apps/settings/src/App.vue b/apps/settings/src/App.vue
@@ -18,6 +18,7 @@
                 menu: 'Menu',
                 pages: 'Pages',
               }"
+              :key="key"
             >
               <router-link
                 class="nav-link"
@@ -40,7 +41,7 @@
 </template>
 
 <script>
-import { Molgenis } from "@mswertz/emx2-styleguide";
+import { Molgenis } from "molgenis-components";
 
 export default {
   components: {

diff --git a/apps/settings/src/components/Members.vue b/apps/settings/src/components/Members.vue
@@ -16,12 +16,14 @@
       <p>Use table below to add, edit or remove members</p>
       <form v-if="canEdit" class="form-inline">
         <InputString
+          id="member-email"
           class="mb-2 mr-sm-4"
           v-model="editMember['email']"
           placeholder="email address"
           label="Email:"
         />
         <InputSelect
+          id="member-role"
           class="mb-2 mr-sm-4"
           v-model="editMember['role']"
           :options="roles"
@@ -62,7 +64,7 @@ import {
   MessageError,
   MessageSuccess,
   Spinner,
-} from "@mswertz/emx2-styleguide";
+} from "molgenis-components";
 import { request } from "graphql-request";
 
 export default {

diff --git a/apps/settings/src/components/MenuDesign.vue b/apps/settings/src/components/MenuDesign.vue
@@ -18,15 +18,16 @@
         </div>
         <div>
           <label v-if="idx == 0">label</label>
-          <InputString v-model="item.label" :defaultValue="item.label" />
+          <InputString :id="'menu-label' + idx" v-model="item.label" :defaultValue="item.label" />
         </div>
         <div>
           <label v-if="idx == 0">href</label>
-          <InputString v-model="item.href" :defaultValue="item.href" />
+          <InputString :id="'menu-href' + idx" v-model="item.href" :defaultValue="item.href" />
         </div>
         <div>
           <label v-if="idx == 0">role</label>
           <InputSelect
+            :id="'menu-role' + idx"
             v-model="item.role"
             :defaultValue="item.role"
             :options="['Viewer', 'Editor', 'Manager']"
@@ -46,7 +47,7 @@ import {
   IconDanger,
   InputSelect,
   InputString,
-} from "@mswertz/emx2-styleguide";
+} from "molgenis-components";
 
 export default {
   components: {

diff --git a/apps/settings/src/components/MenuManager.vue b/apps/settings/src/components/MenuManager.vue
@@ -51,12 +51,39 @@ import {
   IconAction,
   MessageError,
   MessageSuccess,
-  DefaultMenuMixin,
-} from "@mswertz/emx2-styleguide";
+} from "molgenis-components";
 import { request } from "graphql-request";
 
+const defaultMenu = [
+  { label: "Tables", href: "tables", role: "Viewer" },
+  {
+    label: "Schema",
+    href: "schema",
+    role: "Manager",
+  },
+  {
+    label: "Up/Download",
+    href: "updownload",
+    role: "Editor",
+  },
+  {
+    label: "Graphql",
+    href: "graphql-playground",
+    role: "Viewer",
+  },
+  {
+    label: "Settings",
+    href: "settings",
+    role: "Manager",
+  },
+  {
+    label: "Help",
+    href: "docs",
+    role: "Viewer",
+  },
+];
+
 export default {
-  mixins: [DefaultMenuMixin],
   components: {
     MenuDesign,
     IconAction,
@@ -90,7 +117,7 @@ export default {
         this.draft = JSON.parse(JSON.stringify(this.session.settings.menu));
       } else {
         //deep clone
-        this.draft = JSON.parse(JSON.stringify(this.defaultMenu));
+        this.draft = JSON.parse(JSON.stringify(defaultMenu));
       }
       this.updateKey();
     },

diff --git a/apps/settings/src/components/PageManager.vue b/apps/settings/src/components/PageManager.vue
@@ -2,13 +2,14 @@
   <div>
     <h5 class="card-title">Manage pages</h5>
     <ul>
-      <li v-for="page in pages">
+      <li v-for="(page, index) in pages" :key="index">
         <a :href="'../pages/#/' + page">{{ page }}</a>
         <IconAction icon="edit" @click="openPageEdit(page)" />
       </li>
     </ul>
     <form class="form-inline">
       <InputString
+        id="page-title"
         label="Add new page: "
         v-model="newPage"
         :errorMessage="nameError"
@@ -25,7 +26,7 @@ import {
   ButtonAction,
   IconAction,
   InputString,
-} from "@mswertz/emx2-styleguide";
+} from "molgenis-components";
 
 export default {
   components: {
@@ -50,6 +51,8 @@ export default {
     nameError() {
       if (this.pages.includes(this.newPage)) {
         return "Page name already exists";
+      } else {
+        return undefined
       }
     },
     pages() {