design-system-next 2.7.15 → 2.7.17

package/src/components/calendar/calendar.vue

@@ -0,0 +1,252 @@
+<template>
+  <SprCard :has-content-padding="false">
+    <template #header>
+      <div :class="[getCalendarClasses.borderClasses, getCalendarClasses.headerWrapper]">
+        <div class="spr-flex spr-items-center spr-gap-size-spacing-3xs">
+          <div class="spr-flex">
+            <spr-button variant="tertiary" has-icon @click="prevWeek">
+              <Icon icon="ph:caret-left-fill" class="spr-text-color-success-base" />
+            </spr-button>
+            <spr-button variant="tertiary" has-icon @click="nextWeek">
+              <Icon icon="ph:caret-right-fill" class="spr-text-color-success-base" />
+            </spr-button>
+          </div>
+          <h2 class="spr-heading-xs">{{ weekRangeDisplay }}</h2>
+        </div>
+
+        <spr-button variant="secondary" size="small" @click="goToToday"> Today </spr-button>
+      </div>
+    </template>
+
+    <template #content>
+      <div :class="getCalendarClasses.contentWrapper">
+        <!-- Filters -->
+        <slot name="filter">
+          <div :class="getCalendarClasses.calendarFilter">
+            <spr-input v-model="searchTerm" placeholder="Search Employee">
+              <template #icon>
+                <Icon icon="ph:magnifying-glass" />
+              </template>
+            </spr-input>
+
+            <spr-dropdown
+              id="company-dropdown"
+              v-model="companyDropDown"
+              :menu-list="companyOptions"
+              @update:model-value="(e) => handleFilter('company', e[0])"
+            >
+              <!-- @update:model-value="(e) => (selectedCompany = e[0])" -->
+              <spr-input v-model="selectedCompany" placeholder="Company">
+                <template #icon>
+                  <Icon icon="ph:caret-down" />
+                </template>
+              </spr-input>
+            </spr-dropdown>
+
+            <spr-dropdown
+              id="department-dropdown"
+              v-model="departmentDropDown"
+              :menu-list="departmentOptions"
+              @update:model-value="(e) => handleFilter('department', e[0])"
+            >
+              <spr-input v-model="selectedDepartment" placeholder="Department">
+                <template #icon>
+                  <Icon icon="ph:caret-down" />
+                </template>
+              </spr-input>
+            </spr-dropdown>
+
+            <spr-dropdown
+              id="branch-dropdown"
+              v-model="branchDropDown"
+              :menu-list="branchOptions"
+              @update:model-value="(e) => handleFilter('branch', e[0])"
+            >
+              <spr-input v-model="selectedBranch" placeholder="Branch">
+                <template #icon>
+                  <Icon icon="ph:caret-down" />
+                </template>
+              </spr-input>
+            </spr-dropdown>
+          </div>
+        </slot>
+
+        <div class="spr-table-wrapper">
+          <table :class="getCalendarClasses.calendarTable">
+            <!-- Calendar Header -->
+            <thead>
+              <tr>
+                <th :class="[getCalendarClasses.borderClasses, getCalendarClasses.tableHeaderEmployeeName]">
+                  Employee Name
+                </th>
+                <th
+                  v-for="(date, index) in weekDates"
+                  :key="index"
+                  :class="[getCalendarClasses.borderClasses, getCalendarClasses.tableHeader]"
+                >
+                  <div :class="getCalendarClasses.headerContent">
+                    <div
+                      :class="[
+                        getCalendarClasses.headerDate,
+                        {
+                          'spr-background-color-brand-base spr-text-color-inverted-strong': isToday(date),
+                        },
+                      ]"
+                    >
+                      {{ formatDate(date, 'DD') }}
+                    </div>
+                    <div class="spr-body-sm-regular">
+                      {{ formatDate(date, 'ddd').toUpperCase() }}
+                    </div>
+                  </div>
+                </th>
+              </tr>
+            </thead>
+            <tbody class="spr-h-[100vh] spr-overflow-y-auto">
+              <tr v-for="employee in employees" :key="employee.id">
+                <td
+                  :class="[
+                    getCalendarClasses.borderClasses,
+                    'spr-content-start spr-border-y spr-border-b-0 spr-border-l-0 spr-border-r spr-p-size-spacing-xs',
+                  ]"
+                >
+                  <div class="spr-flex spr-flex-col spr-gap-size-spacing-3xs">
+                    <spr-avatar
+                      :src="employee.avatar"
+                      :initial="employee.name"
+                      size="md"
+                      :variant="employee.avatar ? 'image' : 'initial'"
+                      color="tertiary"
+                    />
+                    <div class="spr-label-xs-regular">{{ employee.name }}</div>
+                    <div class="spr-text-color-supporting spr-label-xs-regular spr-uppercase">
+                      {{ employee.position }}
+                    </div>
+                  </div>
+                  <div class="spr-mt-size-spacing-xs">
+                    <spr-lozenge
+                      :label="`${employee.hoursWorked || 0}/${employee.hoursTarget || 48} HRS`"
+                      tone="neutral"
+                    >
+                      <template #icon>
+                        <Icon icon="ph:clock" />
+                      </template>
+                    </spr-lozenge>
+                  </div>
+                </td>
+                <td
+                  v-for="(date, index) in weekDates"
+                  :key="index"
+                  :class="[
+                    getCalendarClasses.borderClasses,
+                    'spr-content-start spr-space-y-size-spacing-3xs spr-border-x spr-border-b-0 spr-border-t spr-p-size-spacing-sm last:spr-border-r-0',
+                  ]"
+                  @mouseover="handleHover(true, index, employee.id)"
+                  @mouseleave="handleHover(false, index, employee.id)"
+                >
+                  <section
+                    v-if="
+                      employee.schedule[formatDate(date, dateFormat)] &&
+                      employee.schedule[formatDate(date, dateFormat)].length > 0
+                    "
+                    class="spr-flex spr-flex-col spr-justify-start spr-gap-size-spacing-3xs"
+                  >
+                    <div
+                      v-for="(schedule, scheduleIndex) in employee.schedule[formatDate(date, dateFormat)]"
+                      :key="scheduleIndex"
+                    >
+                      <div
+                        v-if="schedule.type === 'restday'"
+                        @click="
+                          onShiftClick({
+                            employeeId: employee.id,
+                            date: formatDate(date, dateFormat),
+                            shift: 'restday',
+                          })
+                        "
+                      >
+                        <spr-calendar-cell type="restday" />
+                      </div>
+                      <div
+                        v-else
+                        @click="
+                          onShiftClick({
+                            employeeId: employee.id,
+                            date: formatDate(date, dateFormat),
+                            shift: schedule,
+                          })
+                        "
+                      >
+                        <spr-calendar-cell
+                          :view-only="false"
+                          :title="`${schedule.startTime} - ${schedule.endTime}`"
+                          :description="schedule.location"
+                          :sub-description="schedule.type"
+                        />
+                      </div>
+                    </div>
+                  </section>
+
+                  <section v-if="showAddShift(index, employee.id)">
+                    <spr-calendar-cell
+                      status="pending"
+                      type="exempt"
+                      :view-only="false"
+                      @on-click="
+                        onShiftClick({ employeeId: employee.id, date: formatDate(date, dateFormat), shift: null })
+                      "
+                    >
+                      <Icon icon="ph:plus" />
+                      <div class="spr-label-xs-medium">Add New Shift</div>
+                    </spr-calendar-cell>
+                  </section>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </template>
+  </SprCard>
+</template>
+
+<script setup lang="ts">
+import { Icon } from '@iconify/vue';
+import SprButton from '@/components/button/button.vue';
+import SprInput from '@/components/input/input.vue';
+import SprAvatar from '@/components/avatar/avatar.vue';
+import SprCard from '@/components/card/card.vue';
+import SprDropdown from '@/components/dropdown/dropdown.vue';
+import SprLozenge from '@/components/lozenge/lozenge.vue';
+import SprCalendarCell from '@/components/calendar-cell/calendar-cell.vue';
+import { calendarPropTypes, calendarEmitTypes } from './calendar';
+
+const props = defineProps(calendarPropTypes);
+import { useCalendar } from './use-calendar';
+const emit = defineEmits(calendarEmitTypes);
+
+const {
+  // State
+  searchTerm,
+  selectedCompany,
+  selectedDepartment,
+  selectedBranch,
+  weekDates,
+  weekRangeDisplay,
+  getCalendarClasses,
+  companyDropDown,
+  departmentDropDown,
+  branchDropDown,
+  dateFormat,
+  // Function
+  formatDate,
+  isToday,
+  prevWeek,
+  nextWeek,
+  goToToday,
+  onShiftClick,
+  handleHover,
+  showAddShift,
+  handleFilter,
+} = useCalendar(props, emit);
+</script>

package/src/components/calendar/use-calendar.ts

@@ -0,0 +1,159 @@
+import { computed, SetupContext, toRefs, ref, watch } from 'vue';
+import dayjs from 'dayjs';
+import classNames from 'classnames';
+import { useVModel } from '@vueuse/core';
+
+import type { CalendarPropTypes, CalendarEmitTypes, SelectedShift } from './calendar';
+
+export const useCalendar = (props: CalendarPropTypes, emit: SetupContext<CalendarEmitTypes>['emit']) => {
+  const { initialDate, companyOptions, departmentOptions, branchOptions } = toRefs(props);
+
+  const state = {
+    dateFormat: ref('YYYY-MM-DD'),
+    companyDropDown: ref([]),
+    departmentDropDown: ref([]),
+    branchDropDown: ref([]),
+    currentDate: ref(dayjs(initialDate.value)),
+    searchTerm: ref<string>(''),
+    selectedCompany: ref<string>(''),
+    selectedDepartment: ref<string>(''),
+    selectedBranch: ref<string>(''),
+    isHover: ref<boolean>(false),
+    hoveredCell: ref<number>(),
+    employeeId: ref<number>(),
+  };
+
+  const searchEmployee = useVModel(props, 'search', emit);
+  const selectedCell = useVModel(props, 'selectedCell', emit);
+  const selectedCompany = useVModel(props, 'selectedCompany', emit);
+  const selectedDepartment = useVModel(props, 'selectedDepartment', emit);
+  const selectedBranch = useVModel(props, 'selectedBranch', emit);
+
+  const startDate = computed(() => state.currentDate.value.startOf('week'));
+
+  const weekDates = computed(() => {
+    return Array.from({ length: 7 }).map((_, index) => startDate.value.add(index, 'day'));
+  });
+
+  const weekRangeDisplay = computed(() => {
+    const weekStart = startDate.value;
+    const weekEnd = startDate.value.add(6, 'day');
+    const format = 'MMM YYYY';
+
+    if (weekStart.format('YYYY') !== weekEnd.format('YYYY')) {
+      return `${weekStart.format(format)} - ${weekEnd.format(format)}`;
+    }
+
+    if (weekStart.format('MMM') !== weekEnd.format('MMM')) {
+      return `${weekStart.format('MMM')} - ${weekEnd.format(format)}`;
+    }
+
+    return `${weekStart.format(format)}`;
+  });
+
+  const formatDate = (date: dayjs.Dayjs, formatStr: string) => date.format(formatStr);
+
+  const isToday = (date: dayjs.Dayjs) => date.isSame(dayjs(), 'day');
+
+  const prevWeek = () => {
+    state.currentDate.value = state.currentDate.value.subtract(1, 'week');
+  };
+
+  const nextWeek = () => {
+    state.currentDate.value = state.currentDate.value.add(1, 'week');
+  };
+
+  const goToToday = () => {
+    state.currentDate.value = dayjs();
+  };
+
+  const onShiftClick = (selected: SelectedShift) => {
+    selectedCell.value = selected;
+  };
+
+  const handleHover = (isHover: boolean, index: number, employeeId: number) => {
+    state.isHover.value = isHover;
+    state.hoveredCell.value = isHover ? index : null;
+    state.employeeId.value = employeeId;
+  };
+
+  const showAddShift = (index: number, employeeId: number) => {
+    return state.hoveredCell.value === index && state.isHover.value && state.employeeId.value === employeeId;
+  };
+
+  const handleFilter = (filter: string, selected: string) => {
+    if (filter === 'company') {
+      const foundCompany = companyOptions.value.find((item) => item.value === selected);
+      state.selectedCompany.value = foundCompany?.text ?? '';
+      selectedCompany.value = selected;
+    }
+
+    if (filter === 'department') {
+      const foundCompany = departmentOptions.value.find((item) => item.value === selected);
+      state.selectedDepartment.value = foundCompany?.text ?? '';
+      selectedDepartment.value = selected;
+    }
+
+    if (filter === 'branch') {
+      const foundCompany = branchOptions.value.find((item) => item.value === selected);
+      state.selectedBranch.value = foundCompany?.text ?? '';
+      selectedBranch.value = selected;
+    }
+  };
+
+  watch(state.searchTerm, (value, oldValue) => {
+    if (value === oldValue) return; // Prevent unnecessary updates
+    searchEmployee.value = value;
+  });
+
+  const getCalendarClasses = computed(() => {
+    const borderClasses = classNames(' spr-border spr-border-color-weak spr-border-solid');
+    const headerWrapper = classNames(
+      'spr-bg-color-weak spr-flex spr-w-full spr-items-center spr-justify-between spr-border-x-0 spr-border-b spr-border-t-0 spr-p-size-spacing-sm',
+    );
+
+    const contentWrapper = classNames('spr-divide-color-weak spr-divide-x-0 spr-divide-y spr-divide-solid');
+    const calendarFilter = classNames('spr-grid spr-grid-cols-4 spr-gap-size-spacing-2xs spr-p-size-spacing-xs');
+    const calendarTable = classNames(
+      'spr-table spr-w-full spr-table-fixed spr-border-collapse spr-border-spacing-0 spr-overflow-hidden spr-rounded-border',
+    );
+    const tableHeaderEmployeeName = classNames(
+      'spr-body-xs-regular-medium spr-border-x spr-border-y spr-p-size-spacing-xs spr-text-left first:spr-border-l-0',
+    );
+    const tableHeader = classNames('spr-border-x-0 spr-border-y spr-border-l spr-p-size-spacing-sm spr-text-center');
+    const headerContent = classNames('spr-flex spr-w-full spr-items-center  spr-gap-size-spacing-3xs');
+    const headerDate = classNames(
+      'spr-font-size-400 spr-line-height-500 spr-letter-spacing-dense spr-flex spr-h-size-spacing-md spr-w-size-spacing-md spr-items-center spr-justify-center spr-rounded-full spr-font-main spr-font-normal',
+    );
+
+    return {
+      borderClasses,
+      headerWrapper,
+      contentWrapper,
+      calendarFilter,
+      calendarTable,
+      tableHeaderEmployeeName,
+      tableHeader,
+      headerContent,
+      headerDate,
+    };
+  });
+
+  return {
+    weekDates,
+    weekRangeDisplay,
+    getCalendarClasses,
+
+    formatDate,
+    isToday,
+    prevWeek,
+    nextWeek,
+    goToToday,
+    onShiftClick,
+    handleHover,
+    showAddShift,
+    handleFilter,
+
+    ...state,
+  };
+};

package/src/components/calendar-cell/calendar-cell.ts

@@ -37,6 +37,10 @@ export const calendarCellPropTypes = {
     type: Boolean,
     default: true,
   },
+  subDescription: {
+    type: String,
+    default: '',
+  },
 };
 
 export type CalendarCellPropTypes = ExtractPropTypes<typeof calendarCellPropTypes>;

package/src/components/calendar-cell/use-calendar-cell.ts

@@ -53,7 +53,7 @@ export const useCalendarCell = (props: CalendarCellPropTypes, emit: SetupContext
   const isError = computed(() => props.status === 'error');
 
   const getShiftLabel = computed((): string => {
-    return shiftLabels[props.type] || props.type;
+    return shiftLabels[props.type] || props.subDescription;
   });
 
   const getCellIcon = computed((): string => {

package/src/components/card/card.ts

@@ -38,6 +38,10 @@ export const cardPropTypes = {
     type: Boolean,
     default: false,
   },
+  hasContentPadding: {
+    type: Boolean,
+    default: true,
+  },
 };
 
 export type CardPropTypes = ExtractPropTypes<typeof cardPropTypes>;

package/src/components/card/use-card.ts

@@ -11,7 +11,7 @@ interface CardClasses {
 }
 
 export const useCard = (props: CardPropTypes, slots: Slots) => {
-  const { title, headerIcon, borderRadiusSize, hasCollapsible, isCollapsibleOpen } = toRefs(props);
+  const { title, headerIcon, borderRadiusSize, hasCollapsible, isCollapsibleOpen, hasContentPadding } = toRefs(props);
 
   const cardClasses: ComputedRef<CardClasses> = computed(() => {
     const baseClasses = classNames(
@@ -40,7 +40,9 @@ export const useCard = (props: CardPropTypes, slots: Slots) => {
       'spr-rounded-t-border-radius-xl': borderRadiusSize.value === 'xl' || !borderRadiusSize.value,
     });
 
-    const contentPaddingSizeClasses = classNames('spr-py-size-spacing-2xs spr-px-size-spacing-xs');
+    const contentPaddingSizeClasses = classNames({
+      'spr-py-size-spacing-2xs spr-px-size-spacing-xs': hasContentPadding.value,
+    });
 
     const footerClasses = classNames(
       `spr-flex spr-items-center spr-border-0 spr-border-t spr-border-solid spr-border-mushroom-200 spr-py-size-spacing-2xs spr-px-size-spacing-xs`,

package/src/components/filter/use-filter.ts

@@ -8,10 +8,12 @@ import { useInfiniteScroll, onClickOutside } from '@vueuse/core';
 
 export const useFilter = (props: FilterPropTypes, emit: SetupContext<FilterEmitTypes>['emit']) => {
   const { options, filterMenu, filterData, loading, filterable, filling, deselected, hasSearchApi } = toRefs(props);
+
   const selectedValue = useVModel(props, 'modelValue', emit);
-  const isFilterOpen = ref<boolean>(false);
   const searchText = useVModel(props, 'search', emit);
   const searchFilterValue = useVModel(props, 'searchFilter', emit);
+
+  const isFilterOpen = ref<boolean>(false);
   const searchValue = ref<string>('');
   const filterMenuSearchvalue = ref<string>('');
   const isAddFilterVisible = ref<boolean>(false);