changes

app/assets/styles/main.scss

@@ -25,3 +25,40 @@
     }
   }
 }
+
+// Tooltip Styles
+.tooltiptext {
+  visibility: hidden;
+  opacity: 0;
+  background-color: var(--bulma-primary-95);
+  color: var(--bulma-primary-bold);
+  border-radius: 6px;
+  position: absolute;
+  margin-left: 0px;
+  z-index: 999;
+  bottom: 110%;
+  transition: opacity 0.3s;
+  padding: 6px 9px;
+  font-size: 13px;
+  pointer-events: none;
+  box-shadow: 2px 2px 1px rgba(0, 0, 0, 0.1);
+}
+
+.to-left {
+  right: 30px;
+}
+
+@mixin tooltipshow() {
+  visibility: visible;
+  opacity: 1;
+  position: absolute;
+  min-width: 300px;
+  z-index: 999;
+}
+
+.control:hover .tooltiptext {
+  @include tooltipshow();
+}
+.control:hover .tooltiptext .to-left {
+  @include tooltipshow();
+}

app/assets/styles/overrides-components.scss

@@ -10,6 +10,11 @@
   --bulma-hr-background-color: var(--bulma-grey-90);
 }
 
+.title,
+.subtitle {
+  --bulma-subtitle-weight: var(--bulma-weight-semibold);
+}
+
 .textarea,
 .input {
   box-shadow: none;
@@ -30,6 +35,22 @@
 .modal-card-head {
   --bulma-shadow: 0 0.125em 0 0 hsla(var(--bulma-shadow-h), var(--bulma-shadow-s), var(--bulma-shadow-l), 0.1);
 }
+
+.label {
+  color: inherit;
+}
+
+.control {
+  --bulma-input-icon-color: var(--bulma-text-60);
+}
+
+.control,
+.input,
+.select,
+.textarea {
+  --bulma-input-placeholder-color: hsla(var(--bulma-text-h), var(--bulma-text-s), var(--bulma-text-strong-l), 0.5);
+}
+
 // might break lots of stuff
 // .skeleton-block:not(:last-child), .media:not(:last-child), .level:not(:last-child), .fixed-grid:not(:last-child), .grid:not(:last-child), .tabs:not(:last-child), .pagination:not(:last-child), .message:not(:last-child), .card:not(:last-child), .breadcrumb:not(:last-child), .field:not(:last-child), .file:not(:last-child), .title:not(:last-child), .subtitle:not(:last-child), .tags:not(:last-child), .table:not(:last-child), .table-container:not(:last-child), .progress:not(:last-child), .notification:not(:last-child), .content:not(:last-child), .buttons:not(:last-child), .box:not(:last-child), .block:not(:last-child) {
 //   margin-bottom: inherit;

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>

app/pages/index.vue

@@ -57,6 +57,10 @@
   </ClientOnly>
 </template>
 <script setup>
+useHead({
+  link: [{ rel: "icon", type: "image/x-icon", href: "/favicon.svg" }],
+});
+
 const { $createMeta, $store, $copy, $id } = useNuxtApp();
 const componentMap = {};
 const componentKey = ref();