initial

frontend/app/pages/data/[id].vue

@@ -0,0 +1,84 @@
+<template>
+  <div>
+    <div v-if="loadedType">
+      <!-- Show our basic breadcrumb view -->
+      <simple-breadcrumb
+        :last="loadedType.name"
+        :previous="[{ path: '/data', title: 'Data Structures' }]"
+      />
+
+      <!-- Show our editor -->
+      <data-type-editor v-model="loadedType" />
+
+      <u-button
+        color="primary"
+        size="xl"
+        class="my-3"
+        @click="onSave(loadedType)"
+      >
+        <span class="px-3">Save</span>
+      </u-button>
+
+      <div
+        class="px-3 py-2 border-l-4 border-l-red-700 bg-red-100 mt-5 prose-sm"
+      >
+        <h2 style="margin: 0" class="text-red-700">Important</h2>
+        <ol class="list-decimal">
+          <li>
+            All dynamic changes are performed on a
+            <strong>local copy</strong> of the data that we received from the
+            backend during the page load event.
+          </li>
+          <li>
+            If a view requires additional data to be rendered, that data should
+            also be loaded, or a more complex data structure must be sent by the
+            backend.
+          </li>
+          <li>
+            Additional data can also be loaded dynamically in response to
+            various UI events.
+          </li>
+          <li>
+            <strong>But!</strong> The save operation is performed atomically in
+            a single <strong>ACID</strong> transaction on the server side. This
+            is the only way we can avoid partial saves or discrepancies in
+            business-critical data. See the architecture proposal for more
+            details.
+          </li>
+        </ol>
+      </div>
+    </div>
+    <div v-else>Loading ....</div>
+  </div>
+</template>
+<script setup lang="ts">
+import { API } from "~/API";
+import type { DataType } from "~/types";
+
+// Current page's route (path)
+const route = useRoute();
+const api = API.instance();
+
+// The loading state, initially undefined
+const loadedType = ref<DataType | undefined>(undefined);
+
+function onSave(type: DataType) {
+  api.saveDataType(type).then(() => {
+    // Get the fresh copy of the data
+    loadTypeFromUrlParameter();
+  });
+}
+
+onMounted(() => {
+  loadTypeFromUrlParameter();
+});
+
+function loadTypeFromUrlParameter() {
+  // Load the type by the page's [id] parameter
+  const dataId = route.params.id as string;
+  api.readDataType(dataId).then((response) => {
+    // Update the loaded type var
+    loadedType.value = response;
+  });
+}
+</script>