feat : concept creation

pages/concepts.vue

@@ -5,7 +5,10 @@ import { useConceptStore } from "~/store/concepts.store";
 const newConcept = ref("");
 const conceptStore = useConceptStore();
 
-await conceptStore.fetchConceptList();
+await Promise.all([
+  conceptStore.fetchConceptList()
+])
+
 
 const loading = ref(false);
 const conceptInput = ref<HTMLInputElement | null>(null);
@@ -49,25 +52,18 @@ onUnmounted(() => {
       <span>Delete</span>
       <span>Type</span>
     </div>
-    <div
-      class="concept"
-      v-for="concept in conceptStore.concepts"
-      :key="concept.id"
-    >
+    <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="[]"></Multiselect>
+      <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"
-        />
+        <input ref="conceptInput" type="text" :disabled="loading" @keypress.enter="createConcept"
+          v-model="newConcept" />
         <button :disabled="loading" @click="createConcept">Submit</button>
       </span>
     </div>
@@ -84,6 +80,7 @@ div.concept {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
 }
+
 div.header {
   display: grid;
   grid-template-columns: repeat(4, 1fr);