refactor list styling and enhance DayRow component for improved time entry management

2025-10-28 18:34:31 +01:00
parent fb63414d69
commit 037790a497
4 changed files with 135 additions and 72 deletions
--- a/frontend/src/assets/main.css
+++ b/frontend/src/assets/main.css
@@ -196,6 +196,7 @@ body {
  height: 200px;
 }

+/*
 .list-header {
  position: sticky;
  top: 0;
@@ -203,7 +204,6 @@ body {
  display: grid;
  padding: 10px;
  background-color: var(--background-body);
-  /* grid-template-columns: repeat(8, 1fr); */
  grid-template-columns: 1fr 1fr 30px [start-enter] 1.5fr 30px 1.5fr[end-exit] 0.5fr 1fr 1fr 2fr 2fr 2fr 2fr;
  grid-template-areas: 'dayOfMonth dayOfWeek gap enter rem-x exit alert holiday sickday worked overtime hours balance';
  text-align: center;
@@ -218,7 +218,6 @@ body {
  display: grid;
  padding: 10px;
  height: 40px;
-  /* grid-template-columns: repeat(8, 1fr); */
  grid-template-columns: 1fr 1fr 30px [start-enter] 1.5fr 30px 1.5fr[end-exit] 0.5fr 1fr 1fr 2fr 2fr 2fr 2fr;
  grid-template-areas: 'dayOfMonth dayOfWeek gap  enter rem-x exit  alert holiday sickday worked overtime hours balance';
  justify-items: center;
@@ -230,6 +229,37 @@ body {
  margin-bottom: 5px;
  font-size: 18px;
 }
+*/
+.list,
+.list-header,
+.list-item {
+  display: grid;
+  grid-template-columns: 1fr 1fr 30px 50px [start-enter] 1fr 30px 1fr[end-exit] 50px 0.5fr 1fr 1fr 2fr 2fr 2fr 2fr;
+  grid-template-areas: 'dayOfMonth dayOfWeek gap left-pag enter rem-x exit right-pag alert holiday sickday worked overtime hours balance';
+  justify-items: center;
+  align-items: center;
+  border-radius: 5px;
+  padding: 10px;
+  margin-bottom: 5px;
+}
+
+/* nagłówek listy */
+.list-header {
+  position: sticky;
+  top: 0;
+  z-index: 10;
+  background-color: var(--background-body);
+  text-align: center;
+  box-shadow: 0 1px 5px 1px rgba(0, 0, 0, 0.1);
+}
+
+/* pojedynczy element listy */
+.list-item {
+  height: 40px;
+  background-color: var(--background-card);
+  font-size: 18px;
+  box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.05);
+}

 .list-grid-dayOfMonth {
  grid-area: dayOfMonth;
@@ -237,6 +267,14 @@ body {
 .list-grid-dayOfWeek {
  grid-area: dayOfWeek;
 }
+.list-grid-left {
+  grid-area: left-pag;
+  justify-self: end;
+}
+.list-grid-right {
+  grid-area: right-pag;
+  justify-self: start;
+}
 .list-grid-enter {
  grid-area: enter;
 }
--- a/frontend/src/components/DayRow.vue
+++ b/frontend/src/components/DayRow.vue
@@ -1,26 +1,52 @@
 <template>
-  <div class="list-item">
+  <div class="list list-item">
    <!-- Day of month -->
    <span class="list-grid-dayOfMonth">{{ day.dayOfMonth }}</span>

    <!-- Day of week -->
    <span class="badge list-grid-dayOfWeek" :class="dayBadge(day)">{{ day.dayOfWeek }}</span>

-    <!-- Edit button -->
-    <div class="enter-exit center" v-if="!entryT && !exitT">
+    <!-- Add button -->
+    <div class="enter-exit center" v-if="day.entryTime.length === 0">
      <button class="button edit-button" @click="addWorkTime">DODAJ</button>
    </div>
+
+    <!-- Remove button -->
    <div class="list-grid-remove center" v-else>
      <button class="button remove-button center" @click="removeWorkTime">
        <svg-icon type="mdi" :path="mdiCloseCircleOutline" :size="32" />
      </button>
    </div>

+    <!-- Left button -->
+    <div class="list-grid-left" v-if="day.entryTime.length > 1">
+      <button class="button remove-button center" @click="prevEntry">
+        <svg-icon type="mdi" :path="mdiArrowLeftDropCircleOutline" :size="32" />
+      </button>
+    </div>
+
    <!-- Entry time -->
-    <TimeStepper class="list-grid-enter" v-if="entryT" v-model:time="entryT" />
+    <TimeStepper
+      class="list-grid-enter"
+      v-if="day.entryTime[currentIndex]"
+      :time="day.entryTime[currentIndex]"
+      @update:time="updateEntryTime(currentIndex, $event)"
+    />

    <!-- Exit time -->
-    <TimeStepper class="list-grid-exit" v-if="exitT" v-model:time="exitT" />
+    <TimeStepper
+      class="list-grid-exit"
+      v-if="day.exitTime[currentIndex]"
+      :time="day.exitTime[currentIndex]"
+      @update:time="updateExitTime(currentIndex, $event)"
+    />
+
+    <!-- Right button -->
+    <div class="list-grid-right" v-if="day.entryTime.length > 1">
+      <button class="button remove-button center" @click="nextEntry">
+        <svg-icon type="mdi" :path="mdiArrowRightDropCircleOutline" :size="32" />
+      </button>
+    </div>

    <!-- Alert -->
    <div class="list-grid-alert red center">
@@ -82,64 +108,57 @@
 <script setup>
 import TimeStepper from './TimeStepper.vue'
 import TimeLabel from './TimeLabel.vue'
-import { computed } from 'vue'
+import { computed, ref } from 'vue'
 import { useAttendanceStore } from '@/stores/attendanceStore'
 import SvgIcon from '@jamescoyle/vue-icon'
-import { mdiAlertCircleOutline, mdiCloseCircleOutline } from '@mdi/js'
+import {
+  mdiAlertCircleOutline,
+  mdiCloseCircleOutline,
+  mdiArrowLeftDropCircleOutline,
+  mdiArrowRightDropCircleOutline,
+} from '@mdi/js'
 import utils from '@/utils/utils.js'

-// const { day } = defineProps({
-//   day: Object,
-// })
-
 const attendanceStore = useAttendanceStore()
 const props = defineProps({ index: Number })

+const currentIndex = ref(0)
+
 const day = computed(() => attendanceStore.days[props.index])
 const isWorkTime = computed(() => Boolean(day.value.workedHours || utils.isValidWorkDay(day.value)))

-const entryT = computed({
-  get() {
-    return day.value.entryTime
-  },
-  set(newVal) {
-    // console.log('entryT newVal: ', newVal, 'typeof:', typeof newVal)
-    if (typeof newVal === 'number' && Number.isNaN(newVal)) {
-      console.log('entryT newVal NaN')
-      return
-    }
-    console.log('neVal: ', newVal)
-    const workTime = utils.calculateWorkedTime(newVal, day.value.exitTime)
-    if (workTime > 0) {
-      day.value.entryTime = newVal
-      attendanceStore.updateDay(day.value)
-    }
-  },
-})
-
-const exitT = computed({
-  get() {
-    return day.value.exitTime
-  },
-  set(newVal) {
-    if (typeof newVal === 'number' && Number.isNaN(newVal)) {
-      console.log('exitT newVal NaN')
-      return
-    }
-
-    console.log('neVal: ', newVal)
-    const workTime = utils.calculateWorkedTime(day.value.entryTime, newVal)
-    if (workTime > 0) {
-      day.value.exitTime = newVal
-      attendanceStore.updateDay(day.value)
-    }
-  },
-})
-
 const updateDay = (currentday) => {
  attendanceStore.updateDay(currentday)
 }

+const updateEntryTime = (index, newTime) => {
+  // Basic validation before updating
+  if (
+    day.value.exitTime[index] &&
+    utils.calculateWorkedTime([newTime], [day.value.exitTime[index]]) < 0
+  ) {
+    // Maybe show an error to the user
+    console.error('Entry time cannot be after exit time.')
+    return
+  }
+  day.value.entryTime[index] = newTime
+  attendanceStore.updateDay(day.value)
+}
+
+const updateExitTime = (index, newTime) => {
+  // Basic validation before updating
+  // console.log('exitTime: [index] %d', index)
+  if (
+    day.value.entryTime[index] &&
+    utils.calculateWorkedTime([day.value.entryTime[index]], [newTime]) < 0
+  ) {
+    console.error('Exit time cannot be before entry time.')
+    return
+  }
+  day.value.exitTime[index] = newTime
+  attendanceStore.updateDay(day.value)
+}
+
 const dayBadge = (currentday) => ({
  satturday: currentday.dayOfWeek === 'So',
  sunday: currentday.dayOfWeek === 'Nd',
@@ -156,16 +175,30 @@ const isfreeDay = (currentday) => ({
 })

 const addWorkTime = () => {
-  console.log('click add')
-  day.value.entryTime = '07:00'
-  day.value.exitTime = '15:15'
+  day.value.entryTime.push('07:00')
+  day.value.exitTime.push('15:15')
+  // No need to call updateDay here, let the user fill the times.
+  // Or maybe call it to reflect a change in workedHours if 00:00-00:00 is 0.
  attendanceStore.updateDay(day.value)
 }
+
 const removeWorkTime = () => {
-  console.log('click remove')
-  day.value.entryTime = ''
-  day.value.exitTime = ''
+  day.value.entryTime.splice(currentIndex.value, 1)
+  day.value.exitTime.splice(currentIndex.value, 1)
  attendanceStore.updateDay(day.value)
+  currentIndex.value = 0
+}
+
+const prevEntry = () => {
+  if (currentIndex.value > 0) {
+    currentIndex.value--
+  }
+}
+
+const nextEntry = () => {
+  if (currentIndex.value < day.value.entryTime.length - 1) {
+    currentIndex.value++
+  }
 }
 </script>

@@ -173,7 +206,6 @@ const removeWorkTime = () => {
 .enter-exit {
  grid-column-start: start-enter;
  grid-column-end: end-exit;
-  /* background-color: blueviolet; */
  width: 100%;
  height: 100%;
 }
@@ -195,16 +227,9 @@ const removeWorkTime = () => {
 }

 .remove-button {
-  /* width: 30px; */
-  /* height: 30px; */
-  /* font-size: 16px; */
-  /* font-weight: 600; */
-  /* padding: auto; */
  color: var(--gray-bar);
  background-color: transparent;
  border: none;
-  /* border-width: 2px; */
-  /* border-radius: 50%; */
  transition:
    color 0.3s ease,
    border-color 0.3s ease,
--- a/frontend/src/stores/attendanceStore.js
+++ b/frontend/src/stores/attendanceStore.js
@@ -23,7 +23,7 @@ export const useAttendanceStore = defineStore('attendanceStore', () => {
  const holidayCount = computed(() => days.value.filter((d) => d.isHolidayLeave)?.length || 0)

  const leaveDayCount = computed(() => {
-    console.log('wywylanie leaveFayCount')
+    // console.log('wywylanie leaveFayCount')
    return (
      workingDays.value -
      days.value.filter(
@@ -54,16 +54,16 @@ export const useAttendanceStore = defineStore('attendanceStore', () => {

    for (let d = 1; d <= daysInMonth.value; d++) {
      const dateStr = `${year.value}-${month.value.toString().padStart(2, '0')}-${d.toString().padStart(2, '0')}`
-      const dayEntries = response.days.filter((day) => day.check_in && day.check_in.startsWith(dateStr))
+      const dayEntries = response.days.filter(
+        (day) => day.check_in && day.check_in.startsWith(dateStr),
+      )

      // Sort entries by check-in time to ensure correct order
      dayEntries.sort((a, b) => new Date(a.check_in) - new Date(b.check_in))

      const entryTimes = dayEntries.map((entry) => utils.extractTimeFromDateString(entry.check_in))
      const exitTimes = dayEntries.map((entry) => utils.extractTimeFromDateString(entry.check_out))
-      const attendance_reason_ids = dayEntries.flatMap(
-        (entry) => entry.attendance_reason_ids || [],
-      )
+      const attendance_reason_ids = dayEntries.flatMap((entry) => entry.attendance_reason_ids || [])

      const isPublicHoliday = response.public_holidays.some((h) => h.date === dateStr)
      const alert = attendance_reason_ids.length > 0
--- a/frontend/src/views/DashboardView.vue
+++ b/frontend/src/views/DashboardView.vue
@@ -31,7 +31,7 @@
      <div class="card-header">
        <h3>Tabela godzin</h3>
      </div>
-      <div class="list-header">
+      <div class="list list-header">
        <span class="list-grid-dayOfMonth">Dzień</span>
        <span class="list-grid-dayOfWeek">Dzień tygodnia</span>
        <span class="list-grid-enter">Wejscie</span>