template form

apps/central/src/components/admin/ManageTemplates.vue

@@ -1,24 +1,62 @@
 <template>
   <div>Manage scripts</div>
-  <RoutedTableExplorer
-    v-if="session"
+  <InputSelect :options="schemas"></InputSelect>
+  <TableExplorer
     tableId="Templates"
     schemaId="_SYSTEM_"
     :canEdit="true"
     :canManage="false"
   >
-  </RoutedTableExplorer>
+    <template v-slot:rowheader="slotProps">
+      <TemplateEditButton :taskId="slotProps.row.id" />
+    </template>
+  </TableExplorer>
 </template>
 
 <script>
-import { RoutedTableExplorer } from "molgenis-components";
+import { TableExplorer, InputSelect } from "molgenis-components";
+import TemplateEditButton from "./TemplateEditButton.vue";
+import { request } from "graphql-request";
 
 export default {
   components: {
-    RoutedTableExplorer,
+    TemplateEditButton,
+    TableExplorer,
+    InputSelect,
   },
   props: {
     session: Object,
   },
+  data: function () {
+    return {
+      schemas: [],
+      loading: false,
+      graphqlError: null,
+    };
+  },
+  created() {
+    this.getSchemaList();
+  },
+  methods: {
+    getSchemaList() {
+      this.loading = true;
+      const schemaFragment = "_schemas{id,label,description}";
+      const lastUpdateFragment =
+        "_lastUpdate{schemaName, tableName, stamp, userId, operation}";
+      request(
+        "graphql",
+        `{${schemaFragment} ${this.showChangeColumn ? lastUpdateFragment : ""}}`
+      )
+        .then((data) => {
+          this.schemas = data._schemas;
+          this.loading = false;
+        })
+        .catch((error) => {
+          console.error("internal server error", error);
+          this.graphqlError = "internal server error" + error;
+          this.loading = false;
+        });
+    },
+  },
 };
 </script>

apps/central/src/components/admin/TemplateEditButton.vue

@@ -0,0 +1,54 @@
+<template>
+  <div>
+    <IconAction v-if="!isModalShown" icon="search" @click="open" />
+    <LayoutModal v-else title="Job details" :show="isModalShown" @close="close">
+      <template #body>
+        <Task v-if="taskId" :taskId="taskId" />
+      </template>
+      <template #footer>
+        <ButtonAlt @click="close">Close</ButtonAlt>
+      </template>
+    </LayoutModal>
+  </div>
+</template>
+<script>
+import {
+  ButtonAction,
+  ButtonAlt,
+  IconAction,
+  LayoutModal,
+  Task,
+} from "molgenis-components";
+
+export default {
+  components: {
+    IconAction,
+    LayoutModal,
+    ButtonAction,
+    ButtonAlt,
+    Task,
+  },
+  props: {
+    taskId: {
+      type: String,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      error: null,
+      success: null,
+      loading: false,
+      isModalShown: false,
+    };
+  },
+  methods: {
+    open() {
+      this.isModalShown = true;
+    },
+    close() {
+      this.isModalShown = false;
+    },
+  },
+};
+</script>