เพิ่มข้อมูลหลัก [ข้อมูลปฏิทินวันหยุด,ข้อมูลเครื่องราชอิสริยาภรณ์]

src/modules/01_metadataNew/views/calendar.vue

@@ -1,7 +1,108 @@
+<script setup lang="ts">
+import { ref, onMounted } from "vue";
+import { useQuasar } from "quasar";
+import http from "@/plugins/http";
+import config from "@/app.config";
+
+import type { DataSumCalendarObject } from "@/modules/01_metadataNew/interface/index/Calendar";
+
+import calendarComponent from "@/modules/01_metadataNew/components/calendar/calendarMain.vue";
+
+import { useCounterMixin } from "@/stores/mixin";
+
+const mixin = useCounterMixin();
+const $q = useQuasar();
+
+const { showLoader, hideLoader, messageError, genColor15 } = mixin;
+
+const listsSumCalendar = ref<DataSumCalendarObject[]>([]);
+const year = ref<number>(new Date().getFullYear());
+
+/** function เรียกข้อมูลสรุปวันหยุด */
+async function fetchDataSummaryCalendar() {
+  showLoader();
+  await http
+    .get(config.API.summaryHolidayHistoryYear(year.value))
+    .then((res) => {
+      let data = res.data.result;
+      listsSumCalendar.value = [];
+      data.map((e: DataSumCalendarObject) => {
+        listsSumCalendar.value.push({
+          id: e.id,
+          monthFull: e.monthFull,
+          count: e.count,
+          color: genColor15(e.id),
+        });
+      });
+    })
+    .catch(async (e) => {
+      // await defaultListsSumCalendar;
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+onMounted(async () => {
+  await fetchDataSummaryCalendar();
+});
+</script>
 <template>
-  ข้อมูลปฏิทินวันหยุด
+  <div class="toptitle text-dark col-12 row items-center">
+    ข้อมูลปฏิทินวันหยุด
+  </div>
+  <div class="row col-12 q-col-gutter-sm">
+    <div class="col-3">
+      <q-card bordered style="height: 100%">
+        <div class="text-grey-9 items-center q-pa-md">
+          <div class="row no-wrap items-center">
+            <div class="text-dark text-weight-medium q-pb-sm q-px-xs">
+              สรุปวันหยุดในแต่ละเดือนประจำปี
+              <span class="text-weight-bold text-primary q-pl-sm">
+                {{ year + 543 }}</span
+              >
+            </div>
+            <q-space />
+          </div>
+          <div class="col-12 row">
+            <div
+              class="col-xs-4 col-md-6 row q-pa-xs"
+              v-for="(list, index) in listsSumCalendar"
+              :key="index"
+            >
+              <q-card bordered class="col-12">
+                <div
+                  class="col-12 text-subtitle2 row q-px-sm items-center q-px-sm"
+                >
+                  <span :class="'text-weight-medium text-' + `${list.color}`">{{
+                    list.monthFull
+                  }}</span>
+                  <q-space />
+                  <q-badge
+                    color="white"
+                    :class="
+                      'text-weight-bold text-subtitle1 text-' + `${list.color}`
+                    "
+                    :label="list.count"
+                    rounded
+                  />
+                </div>
+              </q-card>
+            </div>
+          </div>
+        </div>
+      </q-card>
+    </div>
+    <div class="col-9">
+      <q-card bordered class="q-pa-md">
+        <calendarComponent
+          v-model:dateYear="year"
+          :fetchDataSummaryCalendar="fetchDataSummaryCalendar"
+        />
+      </q-card>
+    </div>
+  </div>
 </template>
 
-<script setup lang="ts"></script>
-
 <style scoped></style>

src/modules/01_metadataNew/views/insignia.vue

@@ -1,7 +1,12 @@
+<script setup lang="ts">
+import InsigniaType from "@/modules/01_metadataNew/components/insignia/InsigniaType.vue";
+</script>
 <template>
-  ข้อมูลเครื่องราชอิสริยาภรณ์
+  <div class="toptitle text-dark col-12 row items-center">
+    ข้อมูลเครื่องราชอิสริยาภรณ์
+  </div>
+
+  <q-card flat bordered> <InsigniaType /> </q-card>
 </template>
 
-<script setup lang="ts"></script>
-
-<style scoped></style>
+<style scoped></style>