changes

app/components/imports/AddIMEIForm.vue

@@ -0,0 +1,81 @@
+<script setup>
+const props = defineProps({
+  variant: Object,
+});
+
+const { $empty, $insertapi } = useNuxtApp();
+const emit = defineEmits(["created"]);
+const isLoading = ref(false);
+const body = ref({
+  imei: null,
+  variant: props.variant.id,
+});
+
+async function submit() {
+  isLoading.value = true;
+  const res = await $insertapi("IMEI", body.value);
+  isLoading.value = false;
+  if (res !== "error") {
+    emit("created");
+  }
+}
+</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">Variant</label>
+          <SearchBox
+            v-bind="{
+              api: 'Product_Variant',
+              field: 'code',
+              column: ['code'],
+              optionid: variant.id,
+              disabled: true,
+              first: true,
+              placeholder: 'Variant',
+            }"
+            @option="body.variant = $event?.id ?? $event"
+          />
+        </div>
+      </div>
+      <div class="cell is-col-span-6">
+        <div class="field">
+          <label class="label">IMEI</label>
+          <div class="control">
+            <input
+              v-model.trim="body.imei"
+              type="text"
+              class="input"
+              placeholder="IMEI"
+              maxlength="15"
+            />
+          </div>
+          <p class="help is-info">15 chữ số</p>
+        </div>
+      </div>
+      <div class="cell is-col-span-2">
+        <div class="field">
+          <div class="control">
+            <label class="label is-invisible">Submit</label>
+            <button
+              :class="['button is-primary is-fullwidth', isLoading && 'is-loading']"
+              :disabled="$empty(body.imei) || body.imei.length !== 15"
+              @click.prevent="submit"
+            >
+              <span class="icon">
+                <Icon
+                  name="material-symbols:add-rounded"
+                  :size="18"
+                />
+              </span>
+              <span>Thêm</span>
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </form>
+</template>