139 lines
3.5 KiB
Vue
139 lines
3.5 KiB
Vue
<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"> </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>
|