changes

app/components/imports/addons/AddDesign.vue

@@ -0,0 +1,71 @@
+<script setup>
+const { $empty, $insertapi } = useNuxtApp();
+
+const isLoading = ref(false);
+const body = ref({
+  code: null,
+  frame_material: null,
+  back_material: null,
+});
+
+async function submit() {
+  isLoading.value = true;
+  await $insertapi("Design", body.value);
+  isLoading.value = false;
+}
+</script>
+
+<template>
+  <form class="fixed-grid has-12-cols">
+    <div class="grid">
+      <div class="cell is-col-span-4">
+        <div class="field">
+          <label class="label">Mã</label>
+          <div class="control">
+            <input
+              type="text"
+              class="input"
+              v-model.trim="body.code"
+              placeholder="Mã"
+            />
+          </div>
+        </div>
+      </div>
+      <div class="cell is-col-span-4">
+        <div class="field">
+          <label class="label">Khung</label>
+          <div class="control">
+            <input
+              type="text"
+              class="input"
+              v-model.trim="body.frame_material"
+              placeholder="Khung"
+            />
+          </div>
+        </div>
+      </div>
+      <div class="cell is-col-span-4">
+        <div class="field">
+          <label class="label">Lưng</label>
+          <div class="control">
+            <input
+              type="text"
+              class="input"
+              v-model.trim="body.back_material"
+              placeholder="Lưng"
+            />
+          </div>
+        </div>
+      </div>
+      <div class="cell is-col-span-12">
+        <button
+          @click.prevent="submit"
+          :disabled="Object.values(body).every($empty)"
+          :class="['button is-primary', { 'is-loading': isLoading }]"
+        >
+          Thêm
+        </button>
+      </div>
+    </div>
+  </form>
+</template>