From a5a88b3b1cf53ad2298645066e5a105c8c376d5a Mon Sep 17 00:00:00 2001
From: Viet An <tiktaktictac269@gmail.com>
Date: Thu, 11 Jun 2026 09:16:47 +0700
Subject: [PATCH] changes

---
 app/assets/styles/main.scss              |  4 +-
 app/components/datatable/ContextMenu.vue | 84 ++++++++++++------------
 app/components/imports/DeleteProduct.vue |  2 +-
 app/components/imports/ProductForm.vue   |  4 +-
 app/components/media/ImageLayout.vue     |  2 +-
 app/utils/apis.js                        |  3 +-
 6 files changed, 49 insertions(+), 50 deletions(-)

diff --git a/app/assets/styles/main.scss b/app/assets/styles/main.scss
index af89648..a9d31da 100644
--- a/app/assets/styles/main.scss
+++ b/app/assets/styles/main.scss
@@ -7,7 +7,6 @@
 
 // Tooltip Styles
 .tooltiptext {
-  visibility: hidden;
   opacity: 0;
   background-color: var(--bulma-primary-95);
   color: var(--bulma-primary-bold);
@@ -16,7 +15,7 @@
   margin-left: 0px;
   z-index: 999;
   bottom: 110%;
-  transition: opacity 0.3s;
+  transition: opacity 0.2s;
   padding: 0.4rem 0.6rem;
   font-size: 13px;
   pointer-events: none;
@@ -28,7 +27,6 @@
 }
 
 @mixin tooltipshow() {
-  visibility: visible;
   opacity: 1;
   position: absolute;
   min-width: 300px;
diff --git a/app/components/datatable/ContextMenu.vue b/app/components/datatable/ContextMenu.vue
index 1b0f146..ff73ea2 100644
--- a/app/components/datatable/ContextMenu.vue
+++ b/app/components/datatable/ContextMenu.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="field has-addons is-justify-content-center">
-    <!-- <p class="control">
+    <!-- <div class="control">
       <button
         class="button is-light is-primary"
         @click="checkFilter() ? false : $emit('modalevent', { name: 'dosort', data: 'az' })"
@@ -18,8 +18,8 @@
         style="top: 110%; bottom: unset; min-width: max-content; left: 25px"
         >Sắp xếp tăng dần</span
       >
-    </p>
-    <p class="control">
+    </div>
+    <div class="control">
       <button
         class="button is-light is-primary"
         @click="checkFilter() ? false : $emit('modalevent', { name: 'dosort', data: 'za' })"
@@ -37,8 +37,8 @@
         style="top: 110%; bottom: unset; min-width: max-content; left: 25px"
         >Sắp xếp giảm dần</span
       >
-    </p> -->
-    <p class="control">
+    </div> -->
+    <div class="control">
       <button
         class="button"
         @click="moveLeft()"
@@ -52,11 +52,11 @@
       </button>
       <span
         class="tooltiptext"
-        style="top: 110%; bottom: unset; min-width: max-content; left: 25px"
+        style="top: 110%; bottom: unset; min-width: max-content; left: 0"
         >Chuyển cột sang trái</span
       >
-    </p>
-    <p class="control">
+    </div>
+    <div class="control">
       <button
         class="button"
         @click="moveRight()"
@@ -70,11 +70,11 @@
       </button>
       <span
         class="tooltiptext"
-        style="top: 110%; bottom: unset; min-width: max-content; left: 25px"
+        style="top: 110%; bottom: unset; min-width: max-content; left: 0"
         >Chuyển cột sang phải</span
       >
-    </p>
-    <p class="control">
+    </div>
+    <div class="control">
       <button
         class="button"
         @click="resizeWidth()"
@@ -88,11 +88,11 @@
       </button>
       <span
         class="tooltiptext"
-        style="top: 110%; bottom: unset; min-width: max-content; left: 25px"
+        style="top: 110%; bottom: unset; min-width: max-content; left: 0"
         >Tăng độ rộng cột</span
       >
-    </p>
-    <p class="control">
+    </div>
+    <div class="control">
       <button
         class="button"
         @click="resizeWidth(true)"
@@ -106,11 +106,11 @@
       </button>
       <span
         class="tooltiptext"
-        style="top: 110%; bottom: unset; min-width: max-content; left: 25px"
+        style="top: 110%; bottom: unset; min-width: max-content; left: 0"
         >Giảm độ rộng cột</span
       >
-    </p>
-    <p class="control">
+    </div>
+    <div class="control">
       <button
         class="button"
         @click="hideField()"
@@ -124,11 +124,11 @@
       </button>
       <span
         class="tooltiptext"
-        style="top: 110%; bottom: unset; min-width: max-content; left: 25px"
+        style="top: 110%; bottom: unset; min-width: max-content; left: 0"
         >Ẩn cột</span
       >
-    </p>
-    <p class="control">
+    </div>
+    <div class="control">
       <button
         class="button"
         @click="!currentField.mandatory && doRemove()"
@@ -142,11 +142,11 @@
       </button>
       <span
         class="tooltiptext"
-        style="top: 110%; bottom: unset; min-width: max-content; left: 25px"
+        style="top: 110%; bottom: unset; min-width: max-content; left: 0"
         >Xóa cột</span
       >
-    </p>
-    <p class="control">
+    </div>
+    <div class="control">
       <button
         class="button"
         @click="$copyToClipboard(currentField.name)"
@@ -160,11 +160,11 @@
       </button>
       <span
         class="tooltiptext"
-        style="top: 110%; bottom: unset; min-width: max-content; left: 25px"
+        style="top: 110%; bottom: unset; min-width: max-content; left: 0"
         >Sao chép cột</span
       >
-    </p>
-    <p class="control">
+    </div>
+    <div class="control">
       <button
         class="button"
         @click="fieldList()"
@@ -178,11 +178,11 @@
       </button>
       <span
         class="tooltiptext"
-        style="top: 110%; bottom: unset; min-width: max-content; left: 25px"
+        style="top: 110%; bottom: unset; min-width: max-content; left: 0"
         >Danh sách cột</span
       >
-    </p>
-    <p class="control">
+    </div>
+    <div class="control">
       <button
         class="button"
         @click="createField()"
@@ -196,11 +196,11 @@
       </button>
       <span
         class="tooltiptext"
-        style="top: 110%; bottom: unset; min-width: max-content; left: 25px"
+        style="top: 110%; bottom: unset; min-width: max-content; left: 0"
         >Tạo cột mới</span
       >
-    </p>
-    <p class="control">
+    </div>
+    <div class="control">
       <button
         class="button"
         @click="tableOption()"
@@ -214,11 +214,11 @@
       </button>
       <span
         class="tooltiptext"
-        style="top: 110%; bottom: unset; min-width: max-content; left: -45px"
+        style="top: 110%; bottom: unset; min-width: max-content; right: 0"
         >Tùy chọn bảng</span
       >
-    </p>
-    <p class="control">
+    </div>
+    <div class="control">
       <button
         class="button is-primary"
         @click="saveSetting()"
@@ -230,12 +230,14 @@
           />
         </span>
       </button>
-      <span
-        class="tooltiptext has-background-primary has-text-white"
-        style="top: 110%; bottom: unset; min-width: max-content; left: -45px"
-        >Lưu thiết lập</span
+      <p
+        class="tooltiptext"
+        style="top: 110%; bottom: unset; min-width: max-content; right: 0"
       >
-    </p>
+        <span class="is-block">Lưu thiết lập: </span>
+        <span class="is-block fs-12 is-family-monospace">{{ pagedata.setting.name }}</span>
+      </p>
+    </div>
   </div>
   <div class="tabs is-centered">
     <ul>
@@ -642,7 +644,7 @@ function resizeWidth(minus) {
 }
 </script>
 <style lang="css" scoped>
-p.control {
+.control {
   flex-grow: 1;
 
   > button {
diff --git a/app/components/imports/DeleteProduct.vue b/app/components/imports/DeleteProduct.vue
index 8db9f5a..bafa9fc 100644
--- a/app/components/imports/DeleteProduct.vue
+++ b/app/components/imports/DeleteProduct.vue
@@ -23,7 +23,7 @@ function displayModal() {
 
 const refreshData = inject("refreshData");
 async function deleteProduct() {
-  const res = await $deleteapi("product", props.product.id);
+  const res = await $deleteapi("Product", props.product.id);
   if (res !== "error") {
     if (refreshData) refreshData();
   }
diff --git a/app/components/imports/ProductForm.vue b/app/components/imports/ProductForm.vue
index 7048892..6e0c830 100644
--- a/app/components/imports/ProductForm.vue
+++ b/app/components/imports/ProductForm.vue
@@ -73,11 +73,11 @@ const refreshData = inject("refreshData");
 async function submit() {
   isPending.value = true;
   const res = props.variantId
-    ? await $patchapi("product", {
+    ? await $patchapi("Product", {
         id: productVariant.value.product,
         ...body.value,
       })
-    : await $insertapi("product", { data: body.value });
+    : await $insertapi("Product", { data: body.value });
   if (res !== "error") {
     if (refreshData) refreshData();
   }
diff --git a/app/components/media/ImageLayout.vue b/app/components/media/ImageLayout.vue
index af07ab8..1866524 100644
--- a/app/components/media/ImageLayout.vue
+++ b/app/components/media/ImageLayout.vue
@@ -210,7 +210,7 @@ const project = await $getdata("project", { filter: { id: props.projectId }, fir
 const images = ref([]);
 const isForProduct = computed(() => props.productId !== undefined);
 const product = isForProduct.value
-  ? await $getdata("product", { filter: { id: props.productId }, first: true })
+  ? await $getdata("Product", { filter: { id: props.productId }, first: true })
   : undefined;
 const showmodal = ref();
 const imgshow = ref([]);
diff --git a/app/utils/apis.js b/app/utils/apis.js
index ba1494f..1d90115 100644
--- a/app/utils/apis.js
+++ b/app/utils/apis.js
@@ -235,8 +235,7 @@ export default /** @type {const} */ ([
     },
   },
   {
-    name: "product",
-    commit: "product",
+    name: "Product",
     url: "data/Product/",
     url_detail: "data-detail/Product/",
     params: {