84 lines
2.4 KiB
Vue
84 lines
2.4 KiB
Vue
<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>
|