changes

app/components/SearchBox.vue

@@ -4,9 +4,9 @@
       class="field has-addons"
       :id="docid"
     >
-      <div class="control has-icons-left is-expanded">
+      <div class="control has-icons-left has-icons-right is-expanded">
         <div
-          :class="`dropdown ${pos || ''} ${focused ? 'is-active' : ''}`"
+          :class="['dropdown', pos, { 'is-active': focused }]"
           style="width: 100%"
         >
           <div
@@ -14,16 +14,35 @@
             style="width: 100%"
           >
             <input
+              :class="[
+                'input',
+                {
+                  'is-danger': error,
+                  'has-text-dark': disabled,
+                },
+              ]"
               :disabled="disabled"
-              :class="`input ${error ? 'is-danger' : ''} ${disabled ? 'has-text-dark' : ''}`"
               type="text"
               @focus="setFocus"
               @blur="lostFocus"
               @keyup.enter="pressEnter"
+              @keyup.esc="lostFocus"
               @keyup="beginSearch"
               v-model="value"
               :placeholder="placeholder"
             />
+            <span class="icon is-left">
+              <Icon
+                name="material-symbols:search"
+                :size="22"
+              />
+            </span>
+            <span class="icon is-right">
+              <Icon
+                name="material-symbols:keyboard-arrow-down-rounded"
+                :size="22"
+              />
+            </span>
           </div>
           <div
             class="dropdown-menu"
@@ -36,12 +55,13 @@
               style="min-width: 100%"
             >
               <p
-                class="has-text-warning"
                 v-if="data.length === 0"
+                class="has-text-grey px-2 py-1"
               >
                 {{ isVietnamese ? "Không có giá trị thỏa mãn" : "No matching values" }}
               </p>
               <ScrollBox
+                v-else
                 v-bind="{
                   data: data,
                   name: field,
@@ -50,14 +70,10 @@
                   notick: true,
                 }"
                 @selected="choose"
-                v-else
-              ></ScrollBox>
+              />
             </div>
           </div>
         </div>
-        <span class="icon is-left">
-          <SvgIcon v-bind="{ name: 'magnify.svg', type: 'gray', size: 22 }"></SvgIcon>
-        </span>
       </div>
       <div
         class="control"
@@ -90,12 +106,17 @@
         v-if="addon"
       >
         <button
-          class="button is-primary px-2"
+          class="button is-primary"
           @click="addNew()"
           style="height: 100%"
           type="button"
         >
-          <SvgIcon v-bind="{ name: 'add1.png', type: 'white', size: 24 }"></SvgIcon>
+          <span class="icon">
+            <Icon
+              name="material-symbols:add-2-rounded"
+              :size="22"
+            />
+          </span>
         </button>
       </div>
     </div>

app/components/TopMenu.vue

@@ -126,7 +126,7 @@ import { watch } from "vue";
 const router = useRouter();
 const route = useRoute();
 const emit = defineEmits(["changetab", "langChanged"]);
-const { $find, $filter, $store } = useNuxtApp();
+const { $find, $filter, $store, $snackbar } = useNuxtApp();
 const lang = ref($store.lang);
 const menu = $filter($store.common, { category: "topmenu" });
 // if($store.rights.length>0) {

app/components/common/InputNumber.vue

@@ -1,15 +1,18 @@
 <template>
   <div class="control has-icons-left">
     <input
-      :class="`input ${disabled ? 'has-text-black' : ''}`"
       type="text"
-      :placeholder="placeholder || ''"
       v-model="value"
+      :class="['input', disabled && 'has-text-black']"
+      :placeholder="placeholder || ''"
       @keyup="doCheck"
-      :disabled="disabled || false"
+      :disabled="disabled"
     />
     <span class="icon is-left">
-      <SvgIcon v-bind="{ name: 'calculator.svg', type: 'gray', size: 22 }"></SvgIcon>
+      <Icon
+        name="mdi:calculator"
+        :size="22"
+      />
     </span>
   </div>
 </template>

app/components/datatable/ScrollBox.vue

@@ -1,32 +1,26 @@
 <template>
-  <div
-    class="px-2"
-    :style="`max-height: ${maxheight}; overflow-y: auto;`"
-  >
+  <div :style="`max-height: ${maxheight}; overflow-y: auto;`">
     <div
       v-for="(v, i) in rows"
       :key="i"
-      class="field is-grouped py-1 my-0"
-      :style="{
-        borderBottom: i !== rows.length - 1 && '1px solid red',
-      }"
+      class="field is-grouped my-0"
     >
-      <p
-        class="control is-expanded py-0 fs-14 hyperlink"
+      <button
+        class="button is-white fs-14 font-normal w-full is-justify-content-start py-1.5"
+        type="button"
         @click="doClick(v, i)"
       >
-        {{ $stripHtml(v[name] || v.fullname || v.code || "n/a", 75) }}
+        <span>{{ $stripHtml(v[name] || v.fullname || v.code || "n/a", 75) }}</span>
         <span
-          class="icon has-text-primary"
           v-if="checked[i] && notick !== true"
+          class="icon has-text-primary"
         >
-          <SvgIcon v-bind="{ name: 'tick.svg', type: 'primary', size: 15 }"></SvgIcon>
           <Icon
             name="material-symbols:check-rounded"
-            :size="15"
+            :size="17"
           />
         </span>
-      </p>
+      </button>
       <p
         class="control py-0"
         v-if="show"
@@ -117,10 +111,18 @@ export default {
     getdata() {
       this.currentPage = 1;
       this.array = this.$copy(this.data);
-      if (this.sort !== false) {
-        let f = {};
-        let showtime = this.show ? this.show.time : false;
-        showtime ? (f["create_time"] = "desc") : (f[this.name] = "asc");
+      if (this.sort) {
+        const f = {};
+        if (this.show?.time) {
+          f.create_time = "desc";
+        }
+
+        if (this.sort.startsWith("-")) {
+          f[this.sort.slice(1)] = "desc";
+        } else {
+          f[this.sort] = "asc";
+        }
+
         this.$multiSort(this.array, f);
       }
       this.rows = this.array.slice(0, this.perpage);
@@ -160,3 +162,12 @@ export default {
   },
 };
 </script>
+<style scoped>
+.button.is-ghost {
+  color: var(--bulma-button-text-color);
+}
+.button.is-ghost:hover,
+.button.is-ghost.is-hovered {
+  color: var(--bulma-button-ghost-hover-color);
+}
+</style>