calandar ui

src/modules/11_discipline/components/2_InvestigateFacts/MainPage.vue

@@ -7,7 +7,7 @@ import { useCounterMixin } from "@/stores/mixin";
 
 import config from "@/app.config";
 import http from "@/plugins/http";
-
+import CalandarDialog from "@/modules/11_discipline/components/2_InvestigateFacts/CalandarDialog.vue";
 import { useInvestigateFactStore } from "@/modules/11_discipline/store/InvestigateFactStore";
 const dataInvestigate = useInvestigateFactStore();
 const mixin = useCounterMixin();
@@ -29,7 +29,8 @@ const currentPage = ref<number>(1);
 const maxPage = ref<number>(1);
 const page = ref<number>(1);
 const rowsPerPage = ref<number>(10);
-
+const calendarModal = ref<boolean>(false);
+const calendarModalclose = () =>(calendarModal.value = !calendarModal.value)
 /**
  *pagination ของตาราง
  */
@@ -94,6 +95,10 @@ async function editPage(id: string) {
   router.push(`/discipline/investigatefacts/${id}`);
 }
 
+function calendarOpen() {
+  calendarModal.value = true;
+}
+
 /**เมื่อเริ่มโหลดหน้า
  * ส่งข้อมูลจำลองไปยัง store
  */
@@ -108,18 +113,20 @@ onMounted(async () => {
   <q-card flat bordered class="col-12 q-mt-sm q-pa-md">
     <div class="row col-12 q-col-gutter-sm q-mb-sm">
       <div>
-        <!-- <q-btn
-          for="#addInvestigatefacts"
-          @click="clickAdd()"
+        <q-btn
+          name="calendar"
+          round
           size="12px"
           flat
-          round
-          color="add"
-          icon="mdi-plus"
+          icon="mdi-calendar-month"
+          class="q-mr-sm"
+          color="primary"
+          @click="calendarOpen"
         >
-          <q-tooltip>เพิ่มรายการสืบสวนข้อเท็จจริง</q-tooltip>
-        </q-btn> -->
+          <q-tooltip>ปฏิทิน</q-tooltip>
+        </q-btn>
       </div>
+
       <q-space />
 
       <q-input
@@ -230,4 +237,9 @@ onMounted(async () => {
       </d-table>
     </div>
   </q-card>
+
+  <CalandarDialog 
+  :modal="calendarModal"
+  :close="calendarModalclose"
+  />
 </template>