web/app/components/imports/AddProductForm.vue

<script setup>
const { $insertapi } = useNuxtApp();

const isPending = ref(false);
const body = ref({
  name: null,
  manufacturer: null,
  os: null,
  battery: null,
  screen: null,
  cpu: null,
  gpu: null,
  camera_system: null,
  sim: null,
  network_technology: null,
  charging_technology: null,
  external_storage: null,
  ip_rating: null,
  design: null,
});

function selected(field, data) {
  body.value[field] = data.id;
}

async function createProduct() {
  isPending.value = true;
  const res = await $insertapi("product", body.value);
  isPending.value = false;
}

/* TODO: <SearchBox> addons */
const addOS = {
  component: "imports/AddOS",
  width: "60%",
  height: "auto",
  title: "AddOS",
};
</script>

<template>
  <h1 class="subtitle is-4">AddProductForm</h1>
  <form class="fixed-grid has-12-cols">
    <div class="grid">
      <div class="cell is-col-span-8">
        <div class="field">
          <label class="label">Tên sản phẩm</label>
          <div class="control">
            <input
              class="input"
              v-model.trim="body.name"
              type="text"
              placeholder="Tên"
            />
          </div>
        </div>
      </div>
      <div class="cell is-col-span-4">
        <div class="field">
          <label class="label">OS</label>
          <SearchBox
            v-bind="{
              api: 'OS',
              field: 'name',
              column: ['name'],
              first: true,
              placeholder: 'OS',
            }"
            @option="selected('os', $event)"
          />
        </div>
      </div>
      <div class="cell is-col-span-4">
        <div class="field">
          <label class="label">Hãng</label>
          <SearchBox
            v-bind="{
              api: 'Manufacturer',
              field: 'name',
              column: ['name'],
              first: true,
              placeholder: 'Hãng',
            }"
            @option="selected('manufacturer', $event)"
          />
        </div>
      </div>
      <div class="cell is-col-span-4">
        <div class="field">
          <label class="label">Pin</label>
          <SearchBox
            v-bind="{
              api: 'Battery',
              field: 'code',
              column: ['code'],
              first: true,
              placeholder: 'Pin',
            }"
            @option="selected('battery', $event)"
          />
        </div>
      </div>
      <div class="cell is-col-span-4">
        <div class="field">
          <label class="label">Màn hình</label>
          <SearchBox
            v-bind="{
              api: 'Screen',
              field: 'code',
              column: ['code'],
              first: true,
              placeholder: 'Màn hình',
            }"
            @option="selected('screen', $event)"
          />
        </div>
      </div>
      <div class="cell is-col-span-4">
        <div class="field">
          <label class="label">CPU</label>
          <SearchBox
            v-bind="{
              api: 'CPU',
              field: 'name',
              column: ['name'],
              first: true,
              placeholder: 'CPU',
            }"
            @option="selected('cpu', $event)"
          />
        </div>
      </div>
      <div class="cell is-col-span-4">
        <div class="field">
          <label class="label">GPU</label>
          <SearchBox
            v-bind="{
              api: 'GPU',
              field: 'name',
              column: ['name'],
              first: true,
              placeholder: 'GPU',
            }"
            @option="selected('gpu', $event)"
          />
        </div>
      </div>
      <div class="cell is-col-span-4">
        <div class="field">
          <label class="label">Camera</label>
          <SearchBox
            v-bind="{
              api: 'Camera_System',
              field: 'code',
              column: ['code'],
              first: true,
              placeholder: 'Camera',
            }"
            @option="selected('camera_system', $event)"
          />
        </div>
      </div>
      <div class="cell is-col-span-4">
        <div class="field">
          <label class="label">SIM</label>
          <SearchBox
            v-bind="{
              api: 'SIM',
              field: 'code',
              column: ['code'],
              first: true,
              placeholder: 'SIM',
            }"
            @option="selected('sim', $event)"
          />
        </div>
      </div>
      <div class="cell is-col-span-4">
        <div class="field">
          <label class="label">Kết nối</label>
          <SearchBox
            v-bind="{
              api: 'Network_Technology',
              field: 'name',
              column: ['name'],
              first: true,
              placeholder: 'Kết nối',
            }"
            @option="selected('network_technology', $event)"
          />
        </div>
      </div>
      <div class="cell is-col-span-4">
        <div class="field">
          <label class="label">Công nghệ sạc</label>
          <SearchBox
            v-bind="{
              api: 'Charging_Technology',
              field: 'code',
              column: ['code'],
              first: true,
              placeholder: 'Công nghệ sạc',
            }"
            @option="selected('charging_technology', $event)"
          />
        </div>
      </div>
      <div class="cell is-col-span-4">
        <div class="field">
          <label class="label">Bộ nhớ ngoài</label>
          <SearchBox
            v-bind="{
              api: 'External_Storage',
              field: 'code',
              column: ['code'],
              first: true,
              placeholder: 'Bộ nhớ ngoài',
            }"
            @option="selected('external_storage', $event)"
          />
        </div>
      </div>
      <div class="cell is-col-span-4">
        <div class="field">
          <label class="label">Chỉ số IP</label>
          <SearchBox
            v-bind="{
              api: 'IP_Rating',
              field: 'name',
              column: ['name'],
              first: true,
              placeholder: 'Chỉ số IP',
            }"
            @option="selected('ip_rating', $event)"
          />
        </div>
      </div>
      <div class="cell is-col-span-4">
        <div class="field">
          <label class="label">Chất liệu</label>
          <SearchBox
            v-bind="{
              api: 'Design',
              field: 'label',
              column: ['frame_material', 'back_material'],
              first: true,
              placeholder: 'Chất liệu',
            }"
            @option="selected('design', $event)"
          />
        </div>
      </div>
      <div class="cell is-col-span-12">
        <button
          :class="['button is-primary', { 'is-loading': isPending }]"
          :disabled="Object.values(body).every((v) => v === null)"
          @click.prevent="createProduct"
        >
          Tạo sản phẩm
        </button>
      </div>
    </div>
  </form>
</template>