Template
90 lines
2.0 KiB
Vue
90 lines
2.0 KiB
Vue
<script setup lang="ts">
|
|
import Multiselect from "vue-multiselect";
|
|
import { useConceptStore } from "~/store/concepts.store";
|
|
|
|
const newConcept = ref("");
|
|
const conceptStore = useConceptStore();
|
|
|
|
await Promise.all([
|
|
conceptStore.fetchConceptList()
|
|
])
|
|
|
|
|
|
const loading = ref(false);
|
|
const conceptInput = ref<HTMLInputElement | null>(null);
|
|
|
|
async function createConcept() {
|
|
if (loading.value) {
|
|
return;
|
|
}
|
|
loading.value = true;
|
|
try {
|
|
await conceptStore.createConcept(newConcept.value);
|
|
newConcept.value = "";
|
|
} finally {
|
|
nextTick(() => {
|
|
loading.value = false;
|
|
nextTick(() => {
|
|
conceptInput.value?.focus();
|
|
});
|
|
});
|
|
}
|
|
}
|
|
|
|
function deleteConcept(id: number) {
|
|
conceptStore.deleteConcept(id);
|
|
}
|
|
|
|
onBeforeMount(() => {
|
|
conceptStore.subscribe();
|
|
});
|
|
|
|
onUnmounted(() => {
|
|
conceptStore.close();
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<div id="concepts">
|
|
<div class="header">
|
|
<span>Concept</span>
|
|
<span>Status</span>
|
|
<span>Delete</span>
|
|
<span>Type</span>
|
|
</div>
|
|
<div class="concept" v-for="concept in conceptStore.concepts" :key="concept.id">
|
|
<span>{{ concept.value }}</span>
|
|
<input type="checkbox" checked="true" disabled="true" />
|
|
<input type="button" value="Delete" @click="deleteConcept(concept.id)" />
|
|
<Multiselect :options="Object.values(conceptStore.conceptTypes)" track-by="id"
|
|
deselect-label="Can't remove this value" :allow-empty="false" label="value" v-model="concept.type">
|
|
</Multiselect>
|
|
</div>
|
|
<div class="new-concept">
|
|
<span>
|
|
<input ref="conceptInput" type="text" :disabled="loading" @keypress.enter="createConcept"
|
|
v-model="newConcept" />
|
|
<button :disabled="loading" @click="createConcept">Submit</button>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style lang="css" scoped>
|
|
div#concepts {
|
|
display: grid;
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
div.concept {
|
|
display: grid;
|
|
grid-template-columns: repeat(4, 1fr);
|
|
}
|
|
|
|
div.header {
|
|
display: grid;
|
|
grid-template-columns: repeat(4, 1fr);
|
|
align-items: center;
|
|
}
|
|
</style>
|