Solved #15 and #16.

src/components/Schedule.vue

@@ -34,9 +34,15 @@ AddEmployeeModal(
                     :key="dIndex" 
                     :style="dIndex === 6 ? 'border-right : 2px solid' : ''"
                     :class="{'bg-secondary bg-opacity-10' : row.dates[dIndex] === null, 'selected' : isSelected(mIndex, rIndex, eIndex, dIndex)}"
+                    tabindex="0"
                     @click.exact="row.dates[dIndex] !== null ? select(mIndex, rIndex, eIndex, dIndex) : null"
                     @click.ctrl.exact="row.dates[dIndex] !== null ? ctrlSelect(mIndex, rIndex, eIndex, dIndex) : null"
-                    @click.shift.exact="row.dates[dIndex] !== null ? shiftSelect(mIndex, rIndex, eIndex, dIndex) : null"               
+                    @click.shift.exact="row.dates[dIndex] !== null ? shiftSelect(mIndex, rIndex, eIndex, dIndex) : null"
+                    @keydown.esc="onEscape"
+                    @keydown.up.prevent="onUp"
+                    @keydown.down.prevent="onDown"
+                    @keydown.right="onRight"
+                    @keydown.left="onLeft"
                 )
             tr()
                 td().text-end
@@ -59,7 +65,7 @@ AddEmployeeModal(
 
 
 <script setup lang="ts">
-    import { watch, computed, ref } from 'vue'
+    import { watch, computed, ref, onMounted } from 'vue'
     import type { Ref, ComputedRef } from 'vue'
     import { storeToRefs } from 'pinia'
     import { useEmployees } from '../stores/employees'
@@ -185,7 +191,7 @@ AddEmployeeModal(
 
     function getDoubleWeekdays() : string[] {
         let arr = ['Mo.', 'Di.', 'Mi.', 'Do.', 'Fr.', 'Sa.', 'So.']
-        return arr.concat(arr)
+        return [...arr , ...arr]
     }
 
     function addEmployee(param : Employee){
@@ -197,6 +203,7 @@ AddEmployeeModal(
     function isSelected(m : number, r : number, e : number, d : number) : boolean {
         return selected.value.includes(Coordinates.toString(m,r,e,d))
     }
+    
     function removeFromSelected(m : number, r : number, e : number, d : number) : boolean {
         if(selected.value.includes(Coordinates.toString(m,r,e,d))){
             selected.value.splice(selected.value.indexOf(Coordinates.toString(m,r,e,d)),1)
@@ -276,6 +283,52 @@ AddEmployeeModal(
         }
     }
 
+    function onEscape() : void {
+        selected.value = []
+        shiftAnchor.value = undefined
+    }
+
+    function onUp() : void {
+        let anchor = shiftAnchor.value
+        
+        if(anchor !== undefined && anchor.eIndex > 0){
+            let newCoord = new Coordinates(anchor.mIndex, anchor.rIndex, anchor.eIndex - 1, anchor.dIndex)
+            
+            selected.value = [newCoord.toString()]
+            shiftAnchor.value = newCoord
+        }
+    }
+    function onRight() : void {
+        let anchor = shiftAnchor.value
+        
+        if(anchor !== undefined && anchor.dIndex < scheduleData.value[anchor.mIndex][anchor.rIndex].dates.length - 1) {
+            let newCoord = new Coordinates(anchor.mIndex, anchor.rIndex, anchor.eIndex, anchor.dIndex + 1)
+            
+            selected.value = [newCoord.toString()]
+            shiftAnchor.value = newCoord
+        }
+    }
+    function onDown() : void {
+        let anchor = shiftAnchor.value
+        
+        if(anchor !== undefined && anchor.eIndex < scheduleData.value[anchor.mIndex][anchor.rIndex].employees.length - 1) {
+            let newCoord =  new Coordinates(anchor.mIndex, anchor.rIndex, anchor.eIndex + 1, anchor.dIndex)
+            
+            selected.value = [newCoord.toString()]
+            shiftAnchor.value = newCoord   
+        } 
+    }
+    function onLeft() : void {
+        let anchor = shiftAnchor.value
+
+        if(anchor !== undefined && anchor.dIndex > 0 && scheduleData.value[anchor.mIndex][anchor.rIndex].dates[anchor.dIndex - 1] !== null ) {
+            let newCoord = new Coordinates(anchor.mIndex, anchor.rIndex, anchor.eIndex, anchor.dIndex - 1)
+
+            selected.value = [newCoord.toString()]
+            shiftAnchor.value = newCoord
+        }
+    }
+
     /**
      * Watchers 
      */
@@ -314,7 +367,11 @@ AddEmployeeModal(
     }
 
     .selected {
-        border: 2px solid black;
+        /* border: 1px solid var(--bs-body-color) !important; */
+    
+        /* border: var(--bs-primary); */
+        background-color: var(--bs-secondary);
+        opacity: 0.1;
     }
 
 </style>