@eeplatform/nuxt-layer-common 1.2.11 → 1.3.0

package/components/CalendarYear.vue

@@ -0,0 +1,295 @@
+<template>
+  <div class="year-view" :style="{ height: calendarHeight }">
+    <div class="year-grid">
+      <div
+        v-for="month in yearMonths"
+        :key="month.month"
+        class="mini-month"
+        @click="onMonthClick(month)"
+      >
+        <div class="mini-month-header">
+          {{ month.name }}
+        </div>
+        <div class="mini-month-grid">
+          <!-- Weekday headers for mini calendar -->
+          <div class="mini-weekday-header">
+            <div
+              v-for="day in ['S', 'M', 'T', 'W', 'T', 'F', 'S']"
+              :key="day"
+              class="mini-weekday"
+            >
+              {{ day }}
+            </div>
+          </div>
+          <!-- Calendar weeks -->
+          <div
+            v-for="(week, weekIndex) in month.weeks"
+            :key="weekIndex"
+            class="mini-week"
+          >
+            <div
+              v-for="(day, dayIndex) in week"
+              :key="dayIndex"
+              class="mini-day"
+              :class="{
+                'has-events': day.hasEvents,
+                today: day.isToday,
+                'other-month': day.isOtherMonth,
+                'current-month': !day.isOtherMonth && day.dayNumber,
+              }"
+            >
+              {{ day.dayNumber }}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed } from "vue";
+
+const props = defineProps({
+  current: {
+    type: Date,
+    required: true,
+  },
+  events: {
+    type: Array,
+    default: () => [],
+  },
+  calendarHeight: {
+    type: String,
+    default: "calc(100vh - 100px)",
+  },
+});
+
+const emit = defineEmits(["monthClick"]);
+
+// Helper functions for event calculations
+const isSameDay = (date1, date2) => {
+  return date1.toDateString() === date2.toDateString();
+};
+
+const isDateInRange = (date, startDate, endDate) => {
+  const checkDate = new Date(date);
+  checkDate.setHours(0, 0, 0, 0);
+  const start = new Date(startDate);
+  start.setHours(0, 0, 0, 0);
+  const end = new Date(endDate);
+  end.setHours(0, 0, 0, 0);
+
+  return checkDate >= start && checkDate <= end;
+};
+
+const getEventsForDate = (date) => {
+  return props.events.filter((event) =>
+    isDateInRange(date, event.startDate, event.endDate)
+  );
+};
+
+// Year view computed properties
+const yearMonths = computed(() => {
+  const months = [];
+  const year = props.current.getFullYear();
+
+  for (let month = 0; month < 12; month++) {
+    const monthData = {
+      month,
+      name: new Date(year, month, 1).toLocaleDateString("en-US", {
+        month: "long",
+      }),
+      weeks: [],
+    };
+
+    const firstDay = new Date(year, month, 1).getDay();
+    const daysInMonth = new Date(year, month + 1, 0).getDate();
+    const prevMonth = month === 0 ? 11 : month - 1;
+    const prevYear = month === 0 ? year - 1 : year;
+    const prevMonthDays = new Date(prevYear, prevMonth + 1, 0).getDate();
+
+    let week = [];
+
+    // Add days from previous month to fill the beginning of the first week
+    for (let i = firstDay - 1; i >= 0; i--) {
+      week.push({
+        dayNumber: prevMonthDays - i,
+        date: new Date(prevYear, prevMonth, prevMonthDays - i),
+        isToday: false,
+        hasEvents: false,
+        isOtherMonth: true,
+      });
+    }
+
+    // Add days of the current month
+    for (let day = 1; day <= daysInMonth; day++) {
+      const date = new Date(year, month, day);
+      const eventsForDate = getEventsForDate(date);
+
+      week.push({
+        dayNumber: day,
+        date: date,
+        isToday: isSameDay(date, new Date()),
+        hasEvents: eventsForDate.length > 0,
+        isOtherMonth: false,
+      });
+
+      if (week.length === 7) {
+        monthData.weeks.push(week);
+        week = [];
+      }
+    }
+
+    // Add days from next month to complete the last week
+    let nextMonthDay = 1;
+    while (week.length < 7) {
+      const nextMonth = month === 11 ? 0 : month + 1;
+      const nextYear = month === 11 ? year + 1 : year;
+
+      week.push({
+        dayNumber: nextMonthDay,
+        date: new Date(nextYear, nextMonth, nextMonthDay),
+        isToday: false,
+        hasEvents: false,
+        isOtherMonth: true,
+      });
+      nextMonthDay++;
+    }
+
+    if (week.length > 0) {
+      monthData.weeks.push(week);
+    }
+
+    months.push(monthData);
+  }
+
+  return months;
+});
+
+// Handle month click in year view
+const onMonthClick = (monthData) => {
+  emit("monthClick", monthData);
+};
+</script>
+
+<style scoped>
+/* Year View Styles */
+.year-view {
+  padding: 20px;
+  overflow-y: auto;
+}
+
+.year-grid {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 20px;
+  width: 100%;
+}
+
+.mini-month {
+  border: 1px solid #e0e0e0;
+  border-radius: 8px;
+  overflow: hidden;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  background: white;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+}
+
+.mini-month:hover {
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+  transform: translateY(-1px);
+}
+
+.mini-month-header {
+  background-color: #1976d2;
+  color: white;
+  padding: 12px;
+  text-align: center;
+  font-weight: 600;
+  font-size: 1rem;
+}
+
+.mini-month-grid {
+  padding: 12px;
+}
+
+.mini-weekday-header {
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+  gap: 2px;
+  margin-bottom: 4px;
+}
+
+.mini-weekday {
+  text-align: center;
+  font-size: 0.7rem;
+  font-weight: 600;
+  color: #666;
+  padding: 4px 0;
+}
+
+.mini-week {
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+  gap: 2px;
+  margin-bottom: 2px;
+}
+
+.mini-day {
+  aspect-ratio: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 0.8rem;
+  border-radius: 4px;
+  cursor: pointer;
+  transition: all 0.15s ease;
+  min-height: 24px;
+}
+
+.mini-day:hover {
+  background-color: #e3f2fd;
+}
+
+.mini-day.current-month {
+  color: #333;
+  font-weight: 500;
+}
+
+.mini-day.has-events {
+  background-color: #e3f2fd;
+  color: #1976d2;
+  font-weight: 600;
+  position: relative;
+}
+
+.mini-day.has-events::after {
+  content: "";
+  position: absolute;
+  bottom: 2px;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 4px;
+  height: 4px;
+  background-color: #1976d2;
+  border-radius: 50%;
+}
+
+.mini-day.today {
+  background-color: #1976d2;
+  color: white;
+  font-weight: 700;
+  box-shadow: 0 2px 4px rgba(25, 118, 210, 0.3);
+}
+
+.mini-day.today.has-events::after {
+  background-color: white;
+}
+
+.mini-day.other-month {
+  color: #ccc;
+  font-weight: 400;
+}
+</style>

package/components/OfficeForm.vue

@@ -0,0 +1,194 @@
+<template>
+  <v-card width="100%">
+    <v-toolbar>
+      <v-row no-gutters class="fill-height px-6" align="center">
+        <span class="font-weight-bold text-h5">
+          {{ props.title }}
+        </span>
+      </v-row>
+    </v-toolbar>
+    <v-card-text style="max-height: 100vh; overflow-y: auto">
+      <v-form v-model="validForm" :disabled="disable">
+        <v-row no-gutters>
+          <v-col cols="12" class="mt-2">
+            <v-row no-gutters>
+              <InputLabel class="text-capitalize" title="Type" required />
+              <v-col cols="12">
+                <v-autocomplete
+                  v-model="office.type"
+                  density="comfortable"
+                  :rules="[requiredRule]"
+                  :items="officeTypes"
+                ></v-autocomplete>
+              </v-col>
+            </v-row>
+          </v-col>
+
+          <v-col cols="12" class="mt-2">
+            <v-row no-gutters>
+              <InputLabel class="text-capitalize" title="Code" required />
+              <v-col cols="12">
+                <v-text-field
+                  v-model="office.code"
+                  density="comfortable"
+                  :rules="[requiredRule]"
+                ></v-text-field>
+              </v-col>
+            </v-row>
+          </v-col>
+
+          <v-col cols="12" class="mt-2">
+            <v-row no-gutters>
+              <InputLabel class="text-capitalize" title="Name" required />
+              <v-col cols="12">
+                <v-text-field
+                  v-model="office.name"
+                  density="comfortable"
+                  :rules="[requiredRule]"
+                ></v-text-field>
+              </v-col>
+            </v-row>
+          </v-col>
+
+          <v-col v-if="hasParent" cols="12" class="mt-2">
+            <v-row no-gutters>
+              <InputLabel class="text-capitalize" title="Parent" required />
+              <v-col cols="12">
+                <v-autocomplete
+                  v-model="office.parent"
+                  density="comfortable"
+                  :rules="[requiredRule]"
+                ></v-autocomplete>
+              </v-col>
+            </v-row>
+          </v-col>
+
+          <v-col cols="12" class="mt-2">
+            <v-checkbox v-model="createMore" density="comfortable" hide-details>
+              <template #label>
+                <span class="text-subtitle-2 font-weight-bold">
+                  Create more
+                </span>
+              </template>
+            </v-checkbox>
+          </v-col>
+
+          <v-col cols="12" class="my-2">
+            <v-row no-gutters>
+              <v-col cols="12" class="text-center">
+                <span
+                  class="text-none text-subtitle-2 font-weight-medium text-error"
+                >
+                  {{ message }}
+                </span>
+              </v-col>
+            </v-row>
+          </v-col>
+        </v-row>
+      </v-form>
+    </v-card-text>
+
+    <v-toolbar density="compact">
+      <v-row no-gutters>
+        <v-col cols="6">
+          <v-btn
+            tile
+            block
+            variant="text"
+            class="text-none"
+            size="48"
+            @click="cancel"
+          >
+            Cancel
+          </v-btn>
+        </v-col>
+
+        <v-col cols="6">
+          <v-btn
+            tile
+            block
+            variant="flat"
+            color="black"
+            class="text-none"
+            size="48"
+            :disabled="!validForm"
+            @click="submit"
+          >
+            Submit
+          </v-btn>
+        </v-col>
+      </v-row>
+    </v-toolbar>
+  </v-card>
+</template>
+
+<script setup lang="ts">
+const props = defineProps({
+  title: {
+    type: String,
+    default: "Office Form",
+  },
+});
+
+const emit = defineEmits(["cancel", "success", "success:create-more"]);
+
+const validForm = ref(false);
+
+const office = ref({
+  type: "",
+  code: "",
+  parent: "",
+  name: "",
+  path: "",
+  status: "active",
+});
+
+watchEffect(() => {
+  if (office.value.code) {
+    office.value.path = office.value.code.toUpperCase();
+  }
+});
+
+const officeTypes = ["office", "section", "unit"];
+
+const hasParent = computed(() => {
+  return ["section", "unit"].includes(office.value.type);
+});
+
+const createMore = ref(false);
+const disable = ref(false);
+
+const { requiredRule } = useUtils();
+
+const message = ref("");
+const type = defineModel("type", {
+  type: String,
+  default: "",
+});
+
+const { add } = useOffice();
+
+async function submit() {
+  disable.value = true;
+  try {
+    await add(office.value);
+    if (createMore.value) {
+      message.value = "";
+      emit("success:create-more");
+      return;
+    }
+
+    emit("success");
+  } catch (error: any) {
+    message.value = error.response._data.message;
+  } finally {
+    disable.value = false;
+  }
+}
+
+function cancel() {
+  createMore.value = false;
+  message.value = "";
+  emit("cancel");
+}
+</script>

package/components/OfficeMain.vue

@@ -0,0 +1,126 @@
+<template>
+  <v-row no-gutters>
+    <v-col cols="12" class="mb-2">
+      <v-row no-gutters>
+        <v-btn
+          class="text-none mr-2"
+          rounded="pill"
+          variant="tonal"
+          @click="dialogCreate = true"
+          size="large"
+        >
+          Add
+        </v-btn>
+      </v-row>
+    </v-col>
+
+    <v-col cols="12">
+      <v-card width="100%" variant="outlined" border="thin" rounded="lg">
+        <v-toolbar density="compact" color="grey-lighten-4">
+          <template #prepend>
+            <v-btn fab icon density="comfortable" @click="">
+              <v-icon>mdi-refresh</v-icon>
+            </v-btn>
+          </template>
+
+          <template #append>
+            <v-row no-gutters justify="end" align="center">
+              <span class="mr-2 text-caption text-fontgray">
+                {{ pageRange }}
+              </span>
+              <local-pagination
+                v-model="page"
+                :length="pages"
+                @update:value=""
+              />
+            </v-row>
+          </template>
+        </v-toolbar>
+
+        <v-data-table
+          :headers="headers"
+          :items="items"
+          item-value="_id"
+          items-per-page="20"
+          fixed-header
+          hide-default-footer
+          @click:row="tableRowClickHandler"
+          style="max-height: calc(100vh - (200px))"
+        >
+        </v-data-table>
+      </v-card>
+    </v-col>
+
+    <!-- dialog -->
+    <v-dialog v-model="dialogCreate" persistent width="450">
+      <OfficeForm
+        title="Add"
+        @cancel="dialogCreate = false"
+        @success="successHandler()"
+      />
+    </v-dialog>
+  </v-row>
+</template>
+
+<script setup lang="ts">
+definePageMeta({
+  middleware: ["01-auth", "org"],
+  secured: true,
+});
+
+const headers = [
+  {
+    title: "Code",
+    value: "code",
+    width: "120px",
+  },
+  {
+    title: "Name",
+    value: "name",
+  },
+  {
+    title: "Type",
+    value: "type",
+    width: "120px",
+  },
+  {
+    title: "Status",
+    value: "status",
+    width: "120px",
+  },
+];
+
+const page = ref(1);
+const pages = ref(0);
+const pageRange = ref("-- - -- of --");
+
+const items = ref<Array<Record<string, any>>>([]);
+
+const { getAll } = useOffice();
+
+const { data: getItems, refresh: refreshOfficeItems } = useLazyAsyncData(
+  "get-offices-" + page.value,
+  () => getAll(),
+  {
+    watch: [page],
+    immediate: true,
+  }
+);
+
+watchEffect(() => {
+  if (getItems.value) {
+    items.value = getItems.value.items;
+    pages.value = getItems.value.pages;
+    pageRange.value = getItems.value.pageRange;
+  }
+});
+
+function tableRowClickHandler(_: any, data: any) {}
+
+const dialogCreate = ref(false);
+
+function successHandler() {
+  dialogCreate.value = false;
+  refreshOfficeItems();
+}
+</script>