feat : concept grid view

pages/concepts.vue

@@ -1,89 +1,6 @@
 <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>
+  <ConceptGrid></ConceptGrid>
 </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>