initial

frontend/app/pages/data/index.vue

@@ -0,0 +1,139 @@
+<template>
+  <div>
+    <h1>Data Structures</h1>
+    <table class="w-full lg:w-1/2">
+      <thead>
+        <tr>
+          <th class="w-0">ID</th>
+          <th>Name</th>
+          <th class="w-0">&nbsp;</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr v-for="type in types.dataTypes" :key="type.id">
+          <td class="w-0 text-nowrap">
+            {{ type.id }}
+          </td>
+          <td class="w-full">
+            <router-link :to="'/data/' + type.id">{{ type.name }}</router-link>
+          </td>
+          <td class="w-0">
+            <u-button
+              icon="i-bi-trash"
+              size="xs"
+              color="error"
+              @click="deleteType(type)"
+            />
+          </td>
+        </tr>
+      </tbody>
+    </table>
+
+    <u-button color="primary" @click="showNewTypeModal">Create New</u-button>
+
+    <u-modal
+      v-model:open="newTypeDialogShow"
+      :dismissible="false"
+      title="New Type"
+      description="Create and save a new type"
+    >
+      <template #body>
+        <div class="grid grid-cols-1 gap-3">
+          <u-form-field label="ID">
+            <u-input v-model="newType.id" />
+          </u-form-field>
+          <u-form-field label="Name">
+            <u-input v-model="newType.name" />
+          </u-form-field>
+        </div>
+      </template>
+      <template #footer>
+        <u-button
+          :disabled="newType.id.length === 0 || newType.name.length === 0"
+          @click="saveNewType"
+        >
+          Save
+        </u-button>
+      </template>
+    </u-modal>
+  </div>
+</template>
+<script setup lang="ts">
+import { API } from "~/API";
+import { DataType, DataTypeConfiguration } from "~/types";
+import { confirmationDialog } from "~/ui";
+
+const types = ref<DataTypeConfiguration>(new DataTypeConfiguration([]));
+
+// Var that holds our new type instance
+const newType = ref<DataType>(DataType.empty());
+const newTypeDialogShow = ref(false);
+
+const api = API.instance();
+
+//  INIT !! This hook will be called when the layout has beed initialized
+onMounted(readAllTypes);
+
+function showNewTypeModal() {
+  newType.value = DataType.empty();
+  newTypeDialogShow.value = true;
+}
+
+function deleteType(type: DataType) {
+  confirmationDialog().show("delete", () => {
+    // This will be executed on confirmation
+
+    api.deleteDataType(type).finally(() => {
+      // The delete call doesn't return anything, updating the list...
+      readAllTypes();
+    });
+  });
+}
+
+function saveNewType() {
+  api
+    .saveDataType(newType.value)
+    .then((configuration) => {
+      // Update the types list
+      types.value = configuration;
+      toaster.add({
+        title: "Success !!!",
+        color: "success",
+      });
+    })
+    .catch((e) => {
+      // Just log the error
+      console.error("API response error", e);
+      toaster.add({
+        title: "Backend Error",
+        color: "error",
+      });
+    })
+    .finally(() => {
+      // Reset the new type states
+      newType.value = DataType.empty();
+      newTypeDialogShow.value = false;
+    });
+}
+
+const toaster = useToast();
+
+function readAllTypes() {
+  // Call the backend to initialize the available data types
+  api
+    .readConfiguration()
+    .then((configuration) => {
+      // Save the configuration in the global state var
+      // (see the description in the state's declaration (app/composables/application.ts)
+      types.value = configuration;
+    })
+    .catch((e) => {
+      // Log & show the error
+      console.error("API response error", e);
+      toaster.add({
+        title: "Backend Error",
+        color: "error",
+      });
+    });
+}
+</script>