fix folder name 12 evaluate personal

src/modules/12_evaluatePersonal/components/Table.vue

@@ -0,0 +1,229 @@
+<script setup lang="ts">
+import { ref, useAttrs, watch } from "vue";
+
+const table = ref<any>(null);
+const filterRef = ref<any>(null);
+const attrs = ref<any>(useAttrs());
+const paging = ref<boolean>(true);
+
+/** รับ props มาจากหน้าหลัก */
+const props = defineProps({
+  count: Number,
+  pass: Number,
+  notpass: Number,
+  inputfilter: String,
+  name: String,
+  icon: String,
+  inputvisible: Array,
+  editvisible: Boolean,
+  validate: {
+    type: Function,
+    default: () => console.log("not function"),
+  },
+  nornmalData: {
+    type: Boolean,
+    defualt: true,
+  },
+  conclude: {
+    type: Boolean,
+    defualt: false,
+  },
+  page: {
+    type: Number,
+  },
+  pageSize: {
+    type: Number,
+  },
+  maxPage: {
+    type: Number,
+  },
+});
+
+const currentPage = ref<number>(1);
+const filter = ref<string>("");
+const pagination = ref({
+  descending: false,
+  page: props.page,
+  rowsPerPage: props.pageSize,
+});
+
+const emit = defineEmits([
+  "update:inputfilter",
+  "update:inputvisible",
+  "update:editvisible",
+  "update:queryString",
+]);
+
+function updateInput(value: string | number | null) {
+  emit("update:inputfilter", value);
+}
+
+function updateVisible(value: []) {
+  emit("update:inputvisible", value);
+}
+
+function resetFilter() {
+  // reset ค่าที่ค้นหาเมื่อกดปุ่ม X ในกล่องค้นหา
+  emit("update:inputfilter", "");
+  filterRef.value.focus();
+}
+
+function updateRowsPerPage(newPagination: any) {
+  pagination.value = newPagination;
+  currentPage.value = 1;
+}
+
+function filterFn() {
+  updatePaging(1, Number(pagination.value.rowsPerPage), filter.value);
+}
+
+function updatePaging(p: number, pS: number, key: string) {
+  emit("update:queryString", p, pS, key);
+}
+
+watch([() => currentPage.value, () => pagination.value.rowsPerPage], () => {
+  emit(
+    "update:queryString",
+    currentPage.value,
+    Number(pagination.value.rowsPerPage),
+    filter.value
+  );
+});
+</script>
+
+<template>
+  <div class="q-pb-sm row q-col-gutter-sm">
+    <div class="q-gutter-sm" v-if="nornmalData == true">
+      <!-- <q-btn
+        to="/discipline-result/add"
+        size="12px"
+        flat
+        round
+        color="add"
+        icon="mdi-plus"
+      >
+        <q-tooltip>เพิ่มข้อมูล</q-tooltip>
+      </q-btn> -->
+    </div>
+    <q-space />
+    <!-- ค้นหาข้อความใน table -->
+    <q-input
+      standout
+      dense
+      v-model="filter"
+      ref="filterRef"
+      @keydown.enter.prevent="filterFn"
+      outlined
+      placeholder="ค้นหา"
+      style="max-width: 200px"
+      class="col-xs-12 col-sm-3 col-md-2"
+    >
+      <template v-slot:append>
+        <q-icon v-if="filter == ''" name="search" />
+        <q-icon
+          v-if="filter !== ''"
+          name="clear"
+          class="cursor-pointer"
+          @click="resetFilter"
+        />
+      </template>
+    </q-input>
+    <!-- แสดงคอลัมน์ใน table -->
+    <q-select
+      :model-value="inputvisible"
+      @update:model-value="updateVisible"
+      :display-value="$q.lang.table.columns"
+      multiple
+      outlined
+      dense
+      :options="attrs.columns"
+      options-dense
+      option-value="name"
+      map-options
+      emit-value
+      class="col-xs-12 col-sm-3 col-md-2 gt-xs"
+    >
+    </q-select>
+  </div>
+  <d-table
+    ref="table"
+    flat
+    v-bind="attrs"
+    virtual-scroll
+    :virtual-scroll-sticky-size-start="48"
+    dense
+    :rows-per-page-options="[10, 25, 50, 100]"
+    :pagination="pagination"
+    @update:pagination="updateRowsPerPage"
+  >
+    <template v-slot:header="props">
+      <q-tr :props="props">
+        <q-th v-for="col in props.cols" :key="col.name" :props="props">
+          <span class="text-weight-medium" v-html="col.label" />
+        </q-th>
+        <q-th auto-width />
+      </q-tr>
+    </template>
+    <template #body="props">
+      <slot v-bind="props" name="columns"></slot>
+    </template>
+    <template v-slot:pagination="scope">
+      <q-pagination
+        v-model="currentPage"
+        active-color="primary"
+        color="dark"
+        :max="Number(props.maxPage)"
+        size="sm"
+        boundary-links
+        direction-links
+      ></q-pagination>
+    </template>
+  </d-table>
+</template>
+
+<style lang="scss">
+.icon-color {
+  color: #4154b3;
+}
+
+.custom-table2 {
+  max-height: 64vh;
+
+  .q-table tr:nth-child(odd) td {
+    background: white;
+  }
+
+  .q-table tr:nth-child(even) td {
+    background: #f8f8f8;
+  }
+
+  .q-table thead tr {
+    background: #ecebeb;
+  }
+
+  .q-table thead tr th {
+    position: sticky;
+  }
+
+  .q-table td:nth-of-type(2) {
+    z-index: 3 !important;
+  }
+
+  .q-table th:nth-of-type(2),
+  .q-table td:nth-of-type(2) {
+    position: sticky;
+    left: 0;
+    z-index: 1;
+  }
+
+  /* this will be the loading indicator */
+  .q-table thead tr:last-child th {
+    /* height of all previous header rows */
+    top: 48px;
+  }
+
+  .q-table thead tr:first-child th {
+    top: 0;
+  }
+}
+</style>