further work on select

src/components/Schedule.vue

@@ -32,9 +32,9 @@ AddEmployeeModal(
                 td(
                     v-for="(date, dIndex) in row.dates" 
                     :key="dIndex" 
-                    :class="{'bg-secondary bg-opacity-10' : row.dates[dIndex] === null, 'selected' : isSelected({mIndex, rIndex, eIndex, dIndex})}"
+                    :class="{'bg-secondary bg-opacity-10' : row.dates[dIndex] === null, 'selected' : isSelected(new Coordinates(mIndex, rIndex, eIndex, dIndex))}"
-                    @click="select({mIndex, rIndex, eIndex, dIndex}, $event)"               
+                    @click="select(new Coordinates(mIndex, rIndex, eIndex, dIndex), $event)"               
-                ) m={{mIndex}}, r={{rIndex}}, e={{eIndex}}, d={{dIndex}}
+                )
             tr()
                 td.text-end
                     button(
@@ -54,10 +54,11 @@ AddEmployeeModal(
     import { toRef, watch, computed, ref, h, render } from 'vue'
     import type { Ref, ComputedRef } from 'vue'
     import { storeToRefs } from 'pinia'
-    import { useEmployees } from '/src/stores/employees.js'
+    import { useEmployees } from '../stores/employees'
     import { addMonths, eachMonthOfInterval, subDays, addDays, format, getISODay, getYear, getMonth, isValid, eachDayOfInterval, getDaysInMonth } from 'date-fns'
     import { de } from 'date-fns/locale'
     import AddEmployeeModal from './AddEmployeeModal.vue'
+    import Coordinates from '../types/coordinates'
 
     /*
     *   Props
@@ -71,7 +72,7 @@ AddEmployeeModal(
             type: Number,
             default: 3,
             required: false,
-            validator(value) {
+            validator(value : number) {
                 return value > 0
             }
         },
@@ -132,6 +133,7 @@ AddEmployeeModal(
     const { employees } = storeToRefs(store)
 
     const selected : Ref<Coordinates[]> = ref([])
+    const shiftAnchor : Ref<Coordinates | undefined> = ref(undefined)
     /**
      * End Refs
      *
@@ -185,11 +187,21 @@ AddEmployeeModal(
     }
 
     function isSelected(c : Coordinates) : boolean {
-        let temp : boolean = selected.value.some(el => {
+        return selected.value.some(el => {
-            return el.mIndex === c.mIndex && el.rIndex === c.rIndex && el.eIndex === c.eIndex && el.dIndex === c.dIndex
+            return el.toString() === c.toString()
+        })
+    }
+    function removeFromSelected(c : Coordinates) : boolean {
+        let i = selected.value.findIndex(e => {
+            return e.toString() === c.toString()
         })
-        return temp
 
+        if (i > -1){
+            selected.value.splice(i, 1)
+            return true
+        }
+
+        return false
     }
 
     /**
@@ -204,15 +216,31 @@ AddEmployeeModal(
 
     function select(coord : Coordinates, e : MouseEvent) {
         if(e.ctrlKey){
-            selected.value.push(coord)
+            if(isSelected(coord)){
+                removeFromSelected(coord)
+                shiftAnchor.value = selected.value[selected.value.length - 1]
+            }
+            else {
+                selected.value.push(coord)
+                shiftAnchor.value = coord
+            }
+        }
+        else if(e.shiftKey && shiftAnchor.value !== undefined &&
+                shiftAnchor.value.mIndex === coord.mIndex && 
+                shiftAnchor.value.rIndex === coord.rIndex
+            ){
+                // TODO: #8 Figure out how to select all cells between anchor and click
+
         }
         else {
             if(selected.value.length > 1 || !isSelected(coord)) {
                 selected.value = []
                 selected.value.push(coord)
+                shiftAnchor.value = coord
             }
             else {
                 selected.value = []
+                shiftAnchor.value = undefined
             }
         }
     }

src/types/schedule-data.d.ts

@@ -16,11 +16,4 @@ type ScheduleRow = {
 
 type ScheduleMonth = [
     ...ScheduleRow[]
-]
+]
-
-type Coordinates = {
-    mIndex : number,
-    rIndex : number,
-    eIndex : number,
-    dIndex : number
-}