From 93f1d74a44828f528983af2ffab838d3e31dcabc Mon Sep 17 00:00:00 2001
From: Kittapath <kittapath@frappet.com>
Date: Tue, 30 May 2023 10:06:40 +0700
Subject: [PATCH] =?UTF-8?q?=E0=B9=81=E0=B8=81=E0=B9=89=20call=20api=20erro?=
 =?UTF-8?q?r?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 entrypoint.sh                  |   2 -
 src/components/NotifyError.vue |  79 ++++++
 src/components/TableView.vue   | 457 +++++++++++++++++++++++++++++++++
 src/main.ts                    |   8 +
 4 files changed, 544 insertions(+), 2 deletions(-)
 create mode 100644 src/components/NotifyError.vue
 create mode 100644 src/components/TableView.vue

diff --git a/entrypoint.sh b/entrypoint.sh
index 46f096e..38b8d06 100644
--- a/entrypoint.sh
+++ b/entrypoint.sh
@@ -12,7 +12,5 @@ do
 
 done
 
-
-
 echo "Starting Nginx"
 nginx -g 'daemon off;'
diff --git a/src/components/NotifyError.vue b/src/components/NotifyError.vue
new file mode 100644
index 0000000..64f3069
--- /dev/null
+++ b/src/components/NotifyError.vue
@@ -0,0 +1,79 @@
+<template>
+  <q-dialog :model-value="modal" persistent @update:model-value="updateClose">
+    <q-card class="q-pa-sm">
+      <q-card-section class="row items-center">
+        <div class="q-pr-md">
+          <q-avatar
+            icon="mdi-alert-circle-outline"
+            font-size="25px"
+            size="lg"
+            color="red-1"
+            text-color="red"
+          />
+        </div>
+        <div class="col text-dark">
+          <span class="text-bold text-red">{{ tittle }}</span>
+          <br />
+          <span>{{ detail }}</span>
+        </div>
+      </q-card-section>
+
+      <q-card-actions align="right" class="bg-white text-teal">
+        <q-btn label="ตกลง" color="primary" @click="updateClose" v-close-popup />
+      </q-card-actions>
+    </q-card>
+  </q-dialog>
+</template>
+<script setup lang="ts">
+import { ref, useAttrs } from 'vue'
+
+const props = defineProps({
+  modal: Boolean,
+  tittle: String,
+  detail: String,
+  close: {
+    type: Function,
+    default: () => console.log('not function')
+  }
+})
+
+const emit = defineEmits(['update:modal', 'update:tittle', 'update:detail'])
+
+const updateClose = () => {
+  emit('update:modal', false)
+  emit('update:tittle', '')
+  emit('update:detail', '')
+  props.close()
+}
+</script>
+<style lang="scss">
+.icon-color {
+  color: #4154b3;
+}
+.custom-header-table {
+  max-height: 64vh;
+  .q-table tr:nth-child(odd) td {
+    background: white;
+  }
+  .q-table tr:nth-child(even) td {
+    background: #f6f6f6ae;
+  }
+
+  .q-table thead tr {
+    background: #ecebeb;
+  }
+
+  .q-table thead tr th {
+    position: sticky;
+    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>
diff --git a/src/components/TableView.vue b/src/components/TableView.vue
new file mode 100644
index 0000000..53d363c
--- /dev/null
+++ b/src/components/TableView.vue
@@ -0,0 +1,457 @@
+<template>
+  <div class="q-px-md q-pb-md">
+    <!-- header บน table มี ค้นหา แสดงคอลัมน์ ปุ่มแก้ไข เพิ่ม เผยแพร่ข้อมูล ยกเลิก (status nornmalData false) -->
+    <div class="col-12 row q-py-sm" v-if="nornmalData == false">
+      <q-btn
+        v-if="!editvisible == true && publicNoBtn == false"
+        flat
+        round
+        :disabled="editvisible == true"
+        :color="editvisible == true ? 'grey-7' : 'primary'"
+        @click="edit"
+        icon="mdi-pencil-outline"
+      >
+        <q-tooltip>แก้ไขข้อมูล</q-tooltip>
+      </q-btn>
+      <!-- ยกเลิก แสดงเมื่อ กดปุ่มแก้ไข -->
+      <q-btn
+        v-else
+        flat
+        round
+        :disabled="editvisible == false"
+        :outline="editvisible == false"
+        :color="editvisible == false ? 'grey-7' : 'red'"
+        @click="cancel()"
+        icon="mdi-undo"
+      >
+        <q-tooltip>ยกเลิก</q-tooltip>
+      </q-btn>
+      <!-- <q-separator vertical /> -->
+      <div class="q-px-sm">
+        <q-btn
+          flat
+          round
+          :disabled="editvisible == false"
+          :color="editvisible == false ? 'grey-7' : 'add'"
+          @click="add"
+          icon="mdi-plus"
+        >
+          <q-tooltip>เพิ่มข้อมูล</q-tooltip>
+        </q-btn>
+
+        <!-- บันทึกร่าง แสดงเมื่อ กดปุ่มแก้ไข ข้อมูลมีการเป็นแปลงหรือ ยังไม่เผยแพร่ข้อมูล -->
+        <q-btn
+          flat
+          round
+          :disabled="!(editvisible == true && updateData == true)"
+          :color="!(editvisible == true && updateData == true) ? 'grey-7' : 'public'"
+          @click="checkSave"
+          v-if="saveNoDraft == false"
+          icon="mdi-content-save-outline"
+        >
+          <q-tooltip>บันทึกร่าง</q-tooltip>
+        </q-btn>
+        <!-- ลบบันทึกร่าง แสดงเมื่อ บันทึกร่างแล้ว -->
+        <q-btn
+          flat
+          round
+          :disabled="publicData == true"
+          :color="publicData == true ? 'grey-7' : 'deep-orange'"
+          @click="DeleteModal"
+          icon="mdi-file-remove-outline"
+          v-if="publicNoBtn == false"
+        >
+          <q-tooltip>ลบบันทึกร่าง</q-tooltip>
+        </q-btn>
+      </div>
+
+      <!-- เผยแพร่ -->
+      <q-btn
+        flat
+        round
+        :disabled="!(publicData == false || updateData == true)"
+        :color="!(publicData == false || updateData == true) ? 'grey-7' : 'public'"
+        @click="publishModal"
+        icon="mdi-cloud-upload-outline"
+        v-if="publicNoBtn == false"
+      >
+        <q-tooltip>เผยแพร่</q-tooltip>
+      </q-btn>
+      <div class="items-center" style="display: flex">
+        <div
+          class="row items-center"
+          style="display: flex"
+          v-if="publicData == false && publicNoBtn == false"
+        >
+          <div class="text-public text-body2 text-weight-medium q-px-sm">ข้อมูลยังไม่เผยแพร่</div>
+        </div>
+      </div>
+
+      <q-space />
+      <div class="items-center" style="display: flex">
+        <!-- ข้อความสถานะเผยแพร่ โดยใช้ parameter publicData เป็นตัวกำหนดข้อความ -->
+        <!-- <div class="row items-center" style="display: flex" v-if="publicData == true">
+						<q-icon cener size="20px" name="label_important" class="icon-color" />
+						<div class="text-size">ข้อมูลเผยแพร่แล้ว</div>
+						</div> -->
+        <div
+          class="row items-center"
+          style="display: flex"
+          v-if="publicData == false && publicNoBtn == false"
+        >
+          <!-- <q-icon cener size="20px" name="label_important" color="amber" />
+          <div class="text-grey-7 text-body2 text-weight-medium q-px-sm">
+            ข้อมูลยังไม่เผยแพร่
+          </div> -->
+        </div>
+        <!-- ค้นหาข้อความใน table -->
+        <q-input
+          standout
+          dense
+          :model-value="inputfilter"
+          ref="filterRef"
+          @update:model-value="updateInput"
+          outlined
+          debounce="300"
+          placeholder="ค้นหา"
+          style="max-width: 200px"
+          class="q-ml-sm"
+        >
+          <template v-slot:append>
+            <q-icon v-if="inputfilter == ''" name="search" />
+            <q-icon
+              v-if="inputfilter !== ''"
+              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
+          style="min-width: 150px"
+          class="gt-xs q-ml-sm"
+        />
+      </div>
+    </div>
+    <!-- header บน table มี ค้นหา แสดงคอลัมน์ (status nornmalData true) -->
+    <div class="col-12 row q-py-sm" v-if="nornmalData == true">
+      <q-space />
+      <div class="items-center" style="display: flex">
+        <!-- ค้นหาข้อความใน table -->
+        <q-input
+          standout
+          dense
+          :model-value="inputfilter"
+          ref="filterRef"
+          @update:model-value="updateInput"
+          outlined
+          debounce="300"
+          placeholder="ค้นหา"
+          style="max-width: 200px"
+          class="q-ml-sm"
+        >
+          <template v-slot:append>
+            <q-icon v-if="inputfilter == ''" name="search" />
+            <q-icon
+              v-if="inputfilter !== ''"
+              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
+          style="min-width: 150px"
+          class="gt-xs q-ml-sm"
+        />
+      </div>
+    </div>
+    <q-table
+      ref="table"
+      flat
+      bordered
+      class="custom-header-table"
+      v-bind="attrs"
+      virtual-scroll
+      :virtual-scroll-sticky-size-start="48"
+      dense
+      :pagination-label="paginationLabel"
+      :pagination="initialPagination"
+      :rows-per-page-options="paging == true ? [25, 50, 100, 500] : []"
+    >
+      <!-- :pagination="initialPagination" -->
+      <!-- :rows-per-page-options="[0]" -->
+      <template v-slot:header="props">
+        <q-tr :props="props">
+          <q-th auto-width v-if="boss == true" />
+          <q-th v-for="col in props.cols" :key="col.name" :props="props">
+            <span class="text-weight-medium">{{ col.label }}</span>
+          </q-th>
+          <q-th
+            auto-width
+            v-if="editvisible == true || nextPageVisible == true || history == true"
+          />
+        </q-tr>
+      </template>
+      <!-- สำหรับเรียกใช้ template ตัวข้างนอก -->
+      <template #body="props">
+        <slot v-bind="props" name="columns"></slot>
+      </template>
+    </q-table>
+  </div>
+  <!-- ข้อมูลการเผยแพร่ข้อมูล -->
+  <q-dialog v-model="modalPublish" persistent>
+    <q-card class="q-pa-sm">
+      <q-card-section class="row">
+        <div class="q-pr-md">
+          <q-avatar icon="public" size="lg" font-size="25px" color="blue-1" text-color="public" />
+        </div>
+        <div class="col text-dark">
+          <span class="text-bold">ต้องการเผยแพร่ข้อมูลนี้หรือไม่?</span>
+          <br />
+          <span>ข้อมูลที่กำลังถูกเผยแพร่นี้จะมีผลใช้งานทันที</span>
+        </div>
+      </q-card-section>
+
+      <q-card-actions align="right" class="bg-white text-teal">
+        <q-btn label="ยกเลิก" flat color="grey-8" v-close-popup />
+        <q-btn label="เผยแพร่" color="public" @click="publish()" v-close-popup />
+      </q-card-actions>
+    </q-card>
+  </q-dialog>
+
+  <!-- ข้อมูลการลบเผยแพร่ข้อมูล -->
+  <q-dialog v-model="modalDelete" persistent>
+    <q-card class="q-pa-sm">
+      <q-card-section class="row">
+        <div class="q-pr-md">
+          <q-avatar
+            icon="mdi-file-remove-outline"
+            size="lg"
+            font-size="25px"
+            color="red-1"
+            text-color="deep-orange"
+          />
+        </div>
+        <div class="col text-dark">
+          <span class="text-bold">ต้องการลบข้อมูลบันทึกร่างนี้หรือไม่?</span>
+          <br />
+          <span>ข้อมูลบันทึกร่างที่กำลังถูกลบนี้จะมีผลใช้งานทันที</span>
+        </div>
+      </q-card-section>
+
+      <q-card-actions align="right" class="bg-white text-teal">
+        <q-btn label="ยกเลิก" flat color="grey-8" v-close-popup />
+        <q-btn label="ลบบันทึก" color="red" @click="deleted()" v-close-popup />
+      </q-card-actions>
+    </q-card>
+  </q-dialog>
+</template>
+<script setup lang="ts">
+import { ref, useAttrs } from 'vue'
+
+const attrs = ref<any>(useAttrs())
+const table = ref<any>(null)
+const filterRef = ref<any>(null)
+const modalPublish = ref<boolean>(false)
+const modalDelete = ref<boolean>(false)
+const props = defineProps({
+  inputfilter: String,
+  inputvisible: Array,
+  editvisible: Boolean,
+  boss: {
+    type: Boolean,
+    defualt: false
+  },
+  saveNoDraft: {
+    type: Boolean,
+    defualt: false
+  },
+  history: {
+    type: Boolean,
+    defualt: false
+  },
+  paging: {
+    type: Boolean,
+    defualt: false
+  },
+  nornmalData: {
+    type: Boolean,
+    defualt: false
+  },
+  nextPageVisible: {
+    type: Boolean,
+    defualt: false
+  },
+  publicData: {
+    type: Boolean,
+    defualt: true,
+    required: false
+  },
+  updateData: {
+    type: Boolean,
+    defualt: true,
+    required: false
+  },
+  publicNoBtn: {
+    type: Boolean,
+    defualt: false
+  },
+  add: {
+    type: Function,
+    default: () => console.log('not function')
+  },
+  edit: {
+    type: Function,
+    default: () => console.log('not function')
+  },
+  save: {
+    type: Function,
+    default: () => console.log('not function')
+  },
+  deleted: {
+    type: Function,
+    default: () => console.log('not function')
+  },
+  cancel: {
+    type: Function,
+    default: () => console.log('not function')
+  },
+  publish: {
+    type: Function,
+    default: () => console.log('not function')
+  },
+  validate: {
+    type: Function,
+    default: () => console.log('not function')
+  }
+})
+const initialPagination = ref<any>({
+  //   descending: false,
+  rowsPerPage: props.paging == true ? 25 : 0
+})
+
+const emit = defineEmits(['update:inputfilter', 'update:inputvisible', 'update:editvisible'])
+
+const updateEdit = (value: any) => {
+  emit('update:editvisible', value)
+}
+const updateInput = (value: any) => {
+  emit('update:inputfilter', value)
+}
+const updateVisible = (value: any) => {
+  emit('update:inputvisible', value)
+}
+
+const paginationLabel = (start: string, end: string, total: string) => {
+  if (props.paging == true) return ' ' + start + ' ใน ' + end + ' จากจำนวน ' + total + ' รายการ'
+  else return start + '-' + end + ' ใน ' + total
+}
+
+const checkSave = () => {
+  props.validate()
+  props.save()
+  //   if (myForm.value !== null) {
+  //     myForm.value.validate().then((success) => {
+  //       if (success) {
+  //       }
+  //     });
+  //   }
+}
+
+const publishModal = () => {
+  props.validate()
+  const filter = attrs.value.rows.filter((r: any) => r.name == '')
+
+  if (filter.length == 0 || attrs.value.rows.length == 0) {
+    modalPublish.value = true
+  }
+}
+
+const DeleteModal = () => {
+  modalDelete.value = true
+}
+
+const edit = async () => {
+  updateEdit(!props.editvisible)
+  props.edit()
+}
+
+const add = async () => {
+  //   if (myForm.value !== null) {
+  //     myForm.value.validate();
+  //   }
+  props.validate()
+  props.add()
+  await table.value.lastPage()
+  await table.value.scrollTo(attrs.value.rows.length - 1)
+}
+
+const deleted = async () => {
+  if (props.publicNoBtn === false) {
+    updateEdit(false)
+  }
+  props.deleted()
+}
+
+const resetFilter = () => {
+  // reset ค่าที่ค้นหาเมื่อกดปุ่ม X ในกล่องค้นหา
+  emit('update:inputfilter', '')
+  filterRef.value.focus()
+}
+</script>
+<style lang="scss">
+.icon-color {
+  color: #4154b3;
+}
+.custom-header-table {
+  max-height: 64vh;
+  .q-table tr:nth-child(odd) td {
+    background: white;
+  }
+  .q-table tr:nth-child(even) td {
+    background: #f6f6f6ae;
+  }
+
+  .q-table thead tr {
+    background: #ecebeb;
+  }
+
+  .q-table thead tr th {
+    position: sticky;
+    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>
diff --git a/src/main.ts b/src/main.ts
index 1c6ac0e..27e8ef4 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -36,6 +36,14 @@ app.use(
   //   quasarUserOptions
 )
 
+app.component(
+  'data-table',
+  defineAsyncComponent(() => import('./components/TableView.vue'))
+)
+app.component(
+  'notifyError',
+  defineAsyncComponent(() => import('./components/NotifyError.vue'))
+)
 app.component(
   'datepicker',
   defineAsyncComponent(() => import('@vuepic/vue-datepicker'))