changes

app/components/SearchBox.vue

@@ -79,7 +79,6 @@
         <button
           class="button is-light"
           @click="clearValue"
-          style="height: 100%"
           type="button"
         >
           <span class="icon">

app/components/datatable/MenuSave.vue

@@ -4,9 +4,19 @@
     class="mb-4"
     v-if="currentsetting"
   >
-    <p>
+    <span>Đang mở: </span>
-      Đang mở: <b>{{ $stripHtml(currentsetting.name, 40) }}</b>
+    <b>{{ $stripHtml(currentsetting.name, 40) }}</b>
-    </p>
+    <button
+      class="button is-small size-7 p-0 ml-1 is-primary is-light is-rounded"
+      @click="$copyToClipboard(currentsetting.name)"
+    >
+      <span class="icon">
+        <Icon
+          name="material-symbols:content-copy-outline-rounded"
+          :size="14"
+        />
+      </span>
+    </button>
   </div>
   <div class="field">
     <label class="label">Chọn chế độ lưu</label>
@@ -100,7 +110,8 @@
 <script setup>
 import { ref } from "vue";
 import { useStore } from "@/stores/index";
-const emit = defineEmits([]);
+
+const emit = defineEmits(["modalevent", "close"]);
 const store = useStore();
 const props = defineProps({
   pagename: String,
@@ -109,7 +120,7 @@ const props = defineProps({
   data: Object,
   focus: Boolean,
 });
-const { $empty, $copy, $stripHtml, $updateapi, $insertapi, $findIndex, $snackbar } = useNuxtApp();
+const { $empty, $copy, $copyToClipboard, $stripHtml, $updateapi, $insertapi, $findIndex, $snackbar } = useNuxtApp();
 const radioOption = ref();
 const login = { id: 1 };
 const errors = ref([]);

app/components/datatable/ScrollBox.vue

@@ -18,7 +18,7 @@
             <span>{{ $stripHtml(v[name] || v.fullname || v.code || "n/a", 75) }}</span>
             <span
               v-if="checked[i] && notick !== true"
-              class="icon right-3"
+              class="icon right-3 has-background-inherit"
             >
               <Icon
                 name="material-symbols:check-rounded"
@@ -101,7 +101,7 @@
         <span>{{ $stripHtml(v[name] || v.fullname || v.code || "n/a", 75) }}</span>
         <span
           v-if="checked[i] && notick !== true"
-          class="icon right-3"
+          class="icon right-3 has-background-inherit"
         >
           <Icon
             name="material-symbols:check-rounded"

app/components/imports/AddIMEIForm.vue

@@ -26,16 +26,16 @@ async function submit() {
     <div class="grid">
       <div class="cell is-col-span-4">
         <div class="field">
-          <label class="label">Variant</label>
+          <label class="label">Mã Phiên bản</label>
           <SearchBox
             v-bind="{
               api: 'Product_Variant',
               field: 'code',
               column: ['code'],
               optionid: variant.id,
+              clearable: false,
               disabled: true,
               first: true,
-              placeholder: 'Variant',
             }"
             @option="body.variant = $event?.id ?? $event"
           />

app/components/imports/AddProductVariant.vue

@@ -20,7 +20,6 @@ watch(product, () => {
               field: 'name',
               column: ['name'],
               first: true,
-              clearable: true,
               placeholder: 'Tìm sản phẩm',
               addon: {
                 component: 'imports/AddProductForm',

app/components/imports/ProductForm.vue

@@ -114,7 +114,6 @@ async function submit() {
               field: 'name',
               column: ['name'],
               first: true,
-              clearable: true,
               optionid: body.os,
               placeholder: 'OS',
               addon: {
@@ -137,7 +136,6 @@ async function submit() {
               field: 'name',
               column: ['name'],
               first: true,
-              clearable: true,
               optionid: body.manufacturer,
               placeholder: 'Hãng',
               addon: {
@@ -160,7 +158,6 @@ async function submit() {
               field: 'code',
               column: ['code'],
               first: true,
-              clearable: true,
               optionid: body.battery,
               placeholder: 'Pin',
               addon: {
@@ -183,7 +180,6 @@ async function submit() {
               field: 'label',
               column: ['resolution', 'standard', 'technology'],
               first: true,
-              clearable: true,
               optionid: body.screen,
               placeholder: 'Màn hình',
               addon: {
@@ -206,7 +202,6 @@ async function submit() {
               field: 'name',
               column: ['name'],
               first: true,
-              clearable: true,
               placeholder: 'CPU',
               optionid: body.cpu,
               addon: {
@@ -229,7 +224,6 @@ async function submit() {
               field: 'name',
               column: ['name'],
               first: true,
-              clearable: true,
               optionid: body.gpu,
               placeholder: 'GPU',
               addon: {
@@ -252,7 +246,6 @@ async function submit() {
               field: 'code',
               column: ['code'],
               first: true,
-              clearable: true,
               optionid: body.camera_system,
               placeholder: 'Camera',
               addon: {
@@ -275,7 +268,6 @@ async function submit() {
               field: 'code',
               column: ['code'],
               first: true,
-              clearable: true,
               optionid: body.sim,
               placeholder: 'SIM',
               addon: {
@@ -298,7 +290,6 @@ async function submit() {
               field: 'name',
               column: ['name'],
               first: true,
-              clearable: true,
               optionid: body.network_technology,
               placeholder: 'Kết nối',
               addon: {
@@ -321,7 +312,6 @@ async function submit() {
               field: 'code',
               column: ['code'],
               first: true,
-              clearable: true,
               optionid: body.charging_technology,
               placeholder: 'Công nghệ sạc',
               addon: {
@@ -344,7 +334,6 @@ async function submit() {
               field: 'code',
               column: ['code'],
               first: true,
-              clearable: true,
               optionid: body.external_storage,
               placeholder: 'Bộ nhớ ngoài',
               position: 'is-top-right',
@@ -368,7 +357,6 @@ async function submit() {
               field: 'name',
               column: ['name'],
               first: true,
-              clearable: true,
               optionid: body.ip_rating,
               placeholder: 'Chỉ số IP',
               position: 'is-top-right',
@@ -392,7 +380,6 @@ async function submit() {
               field: 'label',
               column: ['frame_material', 'back_material'],
               first: true,
-              clearable: true,
               optionid: body.design,
               placeholder: 'Chất liệu',
               position: 'is-top-right',

app/components/imports/ProductVariantForm.vue

@@ -137,7 +137,6 @@ async function submit() {
               field: 'name',
               column: ['name'],
               first: true,
-              clearable: true,
               optionid: body.color,
               placeholder: 'Màu sắc',
               addon: {
@@ -160,7 +159,6 @@ async function submit() {
               field: 'code',
               column: ['code'],
               first: true,
-              clearable: true,
               optionid: body.ram,
               placeholder: 'RAM',
               addon: {
@@ -183,7 +181,6 @@ async function submit() {
               field: 'code',
               column: ['code'],
               first: true,
-              clearable: true,
               optionid: body.internal_storage,
               placeholder: 'Bộ nhớ trong',
               addon: {

app/components/imports/ProductVariantFormNew.vue

@@ -77,7 +77,6 @@ async function submit() {
               field: 'name',
               column: ['name'],
               first: true,
-              clearable: true,
               placeholder: 'Sản phẩm',
               addon: {
                 component: 'imports/ProductForm',
@@ -116,7 +115,6 @@ async function submit() {
               field: 'name',
               column: ['name'],
               first: true,
-              clearable: true,
               optionid: body.color,
               placeholder: 'Màu sắc',
               addon: {
@@ -139,7 +137,6 @@ async function submit() {
               field: 'code',
               column: ['code'],
               first: true,
-              clearable: true,
               optionid: body.ram,
               placeholder: 'RAM',
               addon: {
@@ -162,7 +159,6 @@ async function submit() {
               field: 'code',
               column: ['code'],
               first: true,
-              clearable: true,
               optionid: body.internal_storage,
               placeholder: 'Bộ nhớ trong',
               addon: {

app/components/menu/MenuFile.vue

@@ -34,7 +34,7 @@ export default {
   props: ["api", "pagename", "row", "disable"],
   methods: {
     async openFile(row) {
-      let url = `${this.$getpath()}static/files/${row.file__file || row.file}`;
+      const url = `${this.$getpath()}static/files/${row.file__file || row.file}`;
       window.open(url, "_blank");
     },
     async downloadFile(url, fileName) {

app/components/pos/ChooseIMEIModal.vue

@@ -37,7 +37,7 @@ async function fetchImeis() {
     filter: { variant: props.variant.id },
   });
 
-  imeis.value = imeisFetched;
+  imeis.value = imeisFetched.filter((imeiRec) => !store.selectedImeis.find((i) => i.imei === imeiRec.imei));
   isLoading.value = false;
 }
 onMounted(fetchImeis);
@@ -84,27 +84,24 @@ onMounted(fetchImeis);
           v-for="(imeiRec, i) in imeis"
           :key="imeiRec.id"
           class="is-clickable"
-          :class="
+          :class="selectedImeis.find((i) => i.imei === imeiRec.imei) && 'is-selected'"
-            (store.selectedImeis.find((i) => i.imei === imeiRec.imei) ||
-              selectedImeis.find((i) => i.imei === imeiRec.imei)) &&
-            'is-selected'
-          "
           @click="toggleSelected(imeiRec)"
         >
           <td class="is-narrow">
             <label class="checkbox">
               <input
                 type="checkbox"
-                :checked="
+                :checked="selectedImeis.find((i) => i.imei === imeiRec.imei)"
-                  store.selectedImeis.find((i) => i.imei === imeiRec.imei) ||
-                  selectedImeis.find((i) => i.imei === imeiRec.imei)
-                "
               />
             </label>
           </td>
           <td class="is-narrow">{{ i + 1 }}</td>
           <td class="is-family-monospace">{{ imeiRec.imei }}</td>
-          <td>{{ imeiRec.deleted ? "Không có sẵn" : "Có sẵn" }}</td>
+          <td>
+            <span :class="['tag is-light', imeiRec.deleted ? 'is-danger' : 'is-success']">{{
+              imeiRec.deleted ? "Không có sẵn" : "Có sẵn"
+            }}</span>
+          </td>
         </tr>
       </tbody>
     </table>

app/components/pos/POS.vue

@@ -3,6 +3,8 @@ import ProductCard from "@/components/pos/ProductCard.vue";
 import SearchBox from "@/components/SearchBox.vue";
 
 const store = useStore();
+const { $numtoString } = useNuxtApp();
+
 function openModal() {
   store.showmodal = {
     component: "pos/ProductSelection",
@@ -12,28 +14,31 @@ function openModal() {
   };
 }
 
-const customer = ref(null);
+const record = ref({
-const paymentMethod = ref(null);
+  customer: null,
+  paymentMethod: null,
+});
+const subtotal = computed(() => {
+  return store.selectedImeis.reduce((prev, curr) => prev + curr.variant__price, 0);
+});
 </script>
 
 <template>
-  <div class="card">
+  <div class="block">
-    <div class="card-content">
+    <button
-      <button
+      @click="openModal"
-        @click="openModal"
+      class="button is-primary"
-        class="button is-primary"
+    >
-      >
+      <span class="icon">
-        <span class="icon">
+        <Icon
-          <Icon
+          name="material-symbols:add-rounded"
-            name="material-symbols:add-rounded"
+          :size="20"
-            :size="20"
+        />
-          />
+      </span>
-        </span>
+      <span>Chọn sản phẩm</span>
-        <span>Chọn sản phẩm</span>
+    </button>
-      </button>
-    </div>
   </div>
-  <div class="fixed-grid has-12-cols">
+  <div class="fixed-grid has-1-cols-mobile has-12-cols">
     <div class="grid">
       <div class="cell is-col-span-8">
         <div class="card">
@@ -46,7 +51,6 @@ const paymentMethod = ref(null);
                 />
               </span>
               <span>Giỏ hàng</span>
-              <span>({{ store.selectedImeis.length }})</span>
             </p>
             <div
               v-if="store.selectedImeis.length > 0"
@@ -86,7 +90,6 @@ const paymentMethod = ref(null);
                   field: 'label',
                   column: ['label'],
                   first: true,
-                  clearable: true,
                   placeholder: 'Khách hàng',
                   addon: {
                     component: 'customer/CustomerQuickAdd',
@@ -94,7 +97,7 @@ const paymentMethod = ref(null);
                     height: 'auto',
                     title: 'Tạo khách hàng',
                   },
-                  onOption: (e) => (customer = e),
+                  onOption: (e) => (record.customer = e),
                 }"
               />
             </div>
@@ -118,14 +121,43 @@ const paymentMethod = ref(null);
                   field: 'name',
                   column: ['name'],
                   first: true,
-                  clearable: true,
                   placeholder: 'Phương thức thanh toán',
-                  onOption: (e) => (paymentMethod = e),
+                  onOption: (e) => (record.paymentMethod = e),
                 }"
               />
             </div>
           </div>
         </div>
+        <div class="card mb-3">
+          <div class="card-content">
+            <p class="icon-text fs-17 font-semibold mb-4">Tổng cộng</p>
+            <div>
+              <table class="table is-fullwidth fs-13">
+                <tbody>
+                  <tr>
+                    <td>
+                      <span>Tạm tính</span>
+                      <span> ({{ store.selectedImeis.length }} sản phẩm)</span>
+                    </td>
+                    <td class="has-text-right">{{ $numtoString(subtotal, { hasUnit: true }) }}</td>
+                  </tr>
+                  <tr>
+                    <td class="font-bold fs-14">Tổng cộng</td>
+                    <td class="has-text-right has-text-success-35 font-bold fs-17">
+                      {{ $numtoString(subtotal, { hasUnit: true }) }}
+                    </td>
+                  </tr>
+                </tbody>
+              </table>
+              <button
+                class="button is-fullwidth is-success"
+                :disabled="!record.customer || !record.paymentMethod"
+              >
+                Thanh toán
+              </button>
+            </div>
+          </div>
+        </div>
       </div>
     </div>
   </div>

app/components/pos/ProductCard.vue

@@ -4,7 +4,7 @@ import { remove } from "es-toolkit";
 const props = defineProps({
   imei: Object,
 });
-const { $copyToClipboard, $numtoString, $snackbar } = useNuxtApp();
+const { $numtoString, $snackbar } = useNuxtApp();
 const store = useStore();
 function removeFromCart() {
   remove(store.selectedImeis, (imeiRec) => imeiRec.id === props.imei.id);
@@ -14,7 +14,7 @@ function removeFromCart() {
 
 <template>
   <div class="card m-0">
-    <div class="card-content p-4 is-flex is-gap-3 is-justify-content-space-between is-align-items-center">
+    <div class="card-content p-4 is-flex is-gap-2 is-justify-content-space-between is-align-items-center">
       <div class="is-flex is-gap-4 is-justify-content-space-between is-align-items-center is-flex-grow-1">
         <div class="media m-0">
           <div class="media-left">
@@ -24,30 +24,16 @@ function removeFromCart() {
           </div>
           <div class="media-content">
             <p class="font-bold fs-15">{{ imei.variant__product__name }}</p>
-            <p class="fs-13">
+            <p class="fs-13 has-text-grey">
               <span>{{ imei.variant__ram__code }}</span>
               <span> • </span>
               <span>{{ imei.variant__internal_storage__code }}</span>
               <span> • </span>
               <span>{{ imei.variant__color__name }}</span>
             </p>
-            <div class="fs-13 is-flex is-gap-0.5 is-align-items-center">
-              <span class="is-family-monospace">IMEI: {{ imei.imei }}</span>
-              <button
-                class="button is-small size-7 p-0 is-primary is-light is-rounded"
-                @click="$copyToClipboard(imei.imei)"
-              >
-                <span class="icon">
-                  <Icon
-                    name="material-symbols:content-copy-outline-rounded"
-                    :size="14"
-                  />
-                </span>
-              </button>
-            </div>
           </div>
         </div>
-        <p class="has-text-primary-50 font-semibold">{{ $numtoString(imei.variant__price, { hasUnit: true }) }}</p>
+        <p class="has-text-primary-50 font-medium">{{ $numtoString(imei.variant__price, { hasUnit: true }) }}</p>
       </div>
       <div>
         <button

app/components/pos/ProductSelection.vue

@@ -18,7 +18,7 @@ function selected(api, chosen) {
             <div class="control">
               <input
                 class="input"
-                v-model.trim="filter.name"
+                v-model.trim="filter.product__name__icontains"
                 type="text"
                 placeholder="Tên"
               />
@@ -34,7 +34,6 @@ function selected(api, chosen) {
                 field: 'name',
                 column: ['name'],
                 first: true,
-                clearable: true,
                 optionid: filter.os,
                 placeholder: 'OS',
               }"
@@ -51,7 +50,6 @@ function selected(api, chosen) {
                 field: 'name',
                 column: ['name'],
                 first: true,
-                clearable: true,
                 optionid: filter.manufacturer,
                 placeholder: 'Hãng',
               }"
@@ -68,7 +66,6 @@ function selected(api, chosen) {
                 field: 'code',
                 column: ['code'],
                 first: true,
-                clearable: true,
                 optionid: filter.battery,
                 placeholder: 'Pin',
               }"
@@ -85,7 +82,6 @@ function selected(api, chosen) {
                 field: 'label',
                 column: ['resolution', 'standard', 'technology'],
                 first: true,
-                clearable: true,
                 optionid: filter.screen,
                 placeholder: 'Màn hình',
               }"
@@ -102,7 +98,6 @@ function selected(api, chosen) {
                 field: 'name',
                 column: ['name'],
                 first: true,
-                clearable: true,
                 placeholder: 'CPU',
                 optionid: filter.cpu,
               }"
@@ -119,7 +114,6 @@ function selected(api, chosen) {
                 field: 'name',
                 column: ['name'],
                 first: true,
-                clearable: true,
                 optionid: filter.gpu,
                 placeholder: 'GPU',
               }"
@@ -136,7 +130,6 @@ function selected(api, chosen) {
                 field: 'code',
                 column: ['code'],
                 first: true,
-                clearable: true,
                 optionid: filter.external_storage,
                 placeholder: 'Bộ nhớ ngoài',
                 position: 'is-top-right',

app/components/snackbar/Error.vue

@@ -9,7 +9,7 @@
     </span>
     <p
       v-html="content"
-      class="control is-expanded"
+      class="control is-expanded fs-14"
     ></p>
   </div>
 </template>

app/components/snackbar/Info.vue

@@ -1,5 +1,8 @@
 <template>
-  <p v-html="props.content"></p>
+  <p
+    v-html="props.content"
+    class="fs-14"
+  ></p>
 </template>
 <script setup>
 const props = defineProps({

app/components/snackbar/SnackBar.vue

@@ -13,7 +13,9 @@ setTimeout(() => store.commit("snackbar", undefined), 3900);
 </script>
 
 <template>
-  <div class="snackbar is-flex is-align-items-center is-gap-3 pl-3 pr-1.5 py-2 rounded-md has-text-white">
+  <div
+    class="snackbar is-flex is-justify-content-space-between is-align-items-center is-gap-3 pl-3 pr-1.5 py-2 rounded-md has-text-white"
+  >
     <Info
       v-if="component === 'Info'"
       v-bind="vbind"
@@ -47,13 +49,13 @@ setTimeout(() => store.commit("snackbar", undefined), 3900);
 .snackbar {
   position: fixed;
   z-index: 999;
-  top: 50px;
+  top: 40px;
   left: 0;
   right: 0;
   margin-inline: auto;
   width: fit-content;
-  max-width: 500px;
+  max-width: min(500px, 90vw);
-  background-color: hsl(from var(--bulma-grey-darker) h s l / 0.9);
+  background-color: hsl(from var(--bulma-grey-darker) h s l / 0.85);
 }
 
 .button.is-ghost {

app/components/snackbar/Success.vue

@@ -9,7 +9,7 @@
     </span>
     <p
       v-html="content"
-      class="control is-expanded"
+      class="control is-expanded fs-14"
     ></p>
   </div>
 </template>

app/plugins/01-common.js

@@ -43,7 +43,7 @@ export default defineNuxtPlugin((nuxtApp) => {
     $store.commit("snackbar", {
       component,
       vbind: {
-        content: typeof content == "string" ? content : JSON.stringify(content),
+        content: typeof content === "string" ? content : JSON.stringify(content),
       },
     });
   };
@@ -190,7 +190,7 @@ export default defineNuxtPlugin((nuxtApp) => {
   };
 
   const copyToClipboard = function (text) {
-    snackbar("Copied to clipboard");
+    snackbar("Copied to clipboard", "Success");
     if (window.clipboardData && window.clipboardData.setData) {
       // IE specific code path to prevent textarea being shown while dialog is visible.
       return clipboardData.setData("Text", text);
@@ -296,8 +296,8 @@ export default defineNuxtPlugin((nuxtApp) => {
   };
 
   const download = async function (url, fileName) {
-    let name = dayjs(new Date()).format("YYYYMMDDhhmmss") + "-" + fileName;
+    const name = dayjs(new Date()).format("YYYYMMDDhhmmss") + "-" + fileName;
-    const response = await fetch(url, { method: "GET" });
+    const response = await fetch(url);
     const blob = await response.blob();
     const urlDownload = window.URL.createObjectURL(blob);
     const link = document.createElement("a");

app/plugins/02-connection.js

@@ -1516,9 +1516,7 @@ export default defineNuxtPlugin((nuxtApp) => {
     }
 
     try {
-      const response = await $fetch(url.toString(), {
+      const response = await $fetch(url.toString());
-        method: "GET",
-      });
 
       if (response && response.pdf) {
         const pdfUrl = `${apiBaseUrl}static/contract/${response.pdf}`;