changes

app/components/datatable/ScrollBox.vue

@@ -1,14 +1,97 @@
 <template>
   <div
-    :style="{
-      maxHeight,
-      overflowY: 'auto',
-    }"
+    :style="{ maxHeight, overflowY: 'auto' }"
+    @scroll="handleScroll"
   >
+    <table
+      v-if="inContext"
+      class="table is-bordered is-hoverable is-fullwidth"
+    >
+      <tbody>
+        <tr
+          v-for="(v, i) in rows"
+          :key="i"
+          @click="doClick(v, i)"
+          class="fs-14 is-clickable"
+        >
+          <td>
+            <span>{{ $stripHtml(v[name] || v.fullname || v.code || "n/a", 75) }}</span>
+            <span
+              v-if="checked[i] && notick !== true"
+              class="icon right-3"
+            >
+              <Icon
+                name="material-symbols:check-rounded"
+                :size="17"
+                class="has-text-primary"
+              />
+            </span>
+          </td>
+          <p
+            class="control py-0"
+            v-if="show"
+          >
+            <span
+              class="icon-text has-text-grey mr-2 fs-13"
+              v-if="show.author"
+            >
+              <SvgIcon v-bind="{ name: 'user.svg', type: 'gray', size: 15 }"></SvgIcon>
+              <span>{{ v[show.author] }}</span>
+            </span>
+            <span
+              class="icon-text has-text-grey mr-2 fs-13"
+              v-if="show.view"
+            >
+              <SvgIcon v-bind="{ name: 'view.svg', type: 'gray', size: 15 }"></SvgIcon>
+              <span>{{ v[show.view] }}</span>
+            </span>
+            <span
+              class="fs-13 has-text-grey"
+              v-if="show.time"
+              >{{ $dayjs(v["create_time"]).fromNow(true) }}</span
+            >
+            <span class="tooltip">
+              <a
+                class="icon ml-1"
+                v-if="show.link"
+                @click="doClick(v, i, 'newtab')"
+              >
+                <SvgIcon v-bind="{ name: 'opennew.svg', type: 'gray', size: 15 }"></SvgIcon>
+              </a>
+              <span class="tooltiptext">Mở trong tab mớ</span>
+            </span>
+            <span
+              class="tooltip"
+              v-if="show.rename"
+            >
+              <a
+                class="icon ml-1"
+                @click="$emit('rename', v, i)"
+              >
+                <SvgIcon v-bind="{ name: 'pen1.svg', type: 'gray', size: 15 }"></SvgIcon>
+              </a>
+              <span class="tooltiptext">Đổi tên</span>
+            </span>
+            <span
+              class="tooltip"
+              v-if="show.rename"
+            >
+              <a
+                class="icon has-text-danger ml-1"
+                @click="$emit('remove', v, i)"
+              >
+                <SvgIcon v-bind="{ name: 'bin1.svg', type: 'gray', size: 15 }"></SvgIcon>
+              </a>
+              <span class="tooltiptext">Xóa</span>
+            </span>
+          </p>
+        </tr>
+      </tbody>
+    </table>
     <div
+      v-else
       v-for="(v, i) in rows"
       :key="i"
-      class=""
     >
       <button
         class="button is-white rounded-none fs-14 font-normal w-full is-justify-content-space-between"
@@ -99,6 +182,7 @@ const props = defineProps({
   keyval: String,
   show: Object,
   notick: Boolean,
+  inContext: Boolean,
 });
 
 const emit = defineEmits(["selected"]);