feat(timeline): fixed problems with editing of blocker

app/src/plugins/tm@_utils/useEmployeeTimeline.ts

@@ -24,6 +24,7 @@ export function useEmployeeTimeline(
   date: Ref<Date | string | null>,
   currentTimeblock: Ref<Timeblock | null>,
   otherLocalTimeblocks?: Ref<Timeblock[]>,
+  editingBlockerId?: Ref<number | null>,
 ) {
   // Fetch employee's tasks for the selected date
   const {
@@ -105,6 +106,7 @@ export function useEmployeeTimeline(
     const conceptData = unref(conceptTasksData);
     const emp = unref(employee);
     const d = unref(date);
+    const excludeBlockerId = editingBlockerId ? unref(editingBlockerId) : null;
 
     if (!data || !conceptData || !emp || !d) {
       return [];
@@ -138,6 +140,11 @@ export function useEmployeeTimeline(
             'office365_blocker',
           ].includes(subtask.type)
         ) {
+          // Skip the blocker being edited
+          if (excludeBlockerId && subtask.id === excludeBlockerId) {
+            return;
+          }
+
           const blockerDateStr = moment(subtask.start).format('YYYY-MM-DD');
 
           if (blockerDateStr === selectedDateStr) {

app/src/plugins/tm@modal/_components/read-only/z-created-by.vue

@@ -14,7 +14,7 @@
 				<p class="employee-selected-avatar d-flex justify-center align-center">
 					{{ employee ? employee._initials : '?' }}
 				</p>
-				<p class="ml-2">{{ employee ? employee._fullName : $t('Unasigned') }}</p>
+				<p class="ml-2">{{ employee ? employee?._fullName : $t('Unasigned') }}</p>
 			</v-sheet>
 		</v-col>
 	</v-row>

app/src/plugins/tm@modal/_components/read-only/z-team.vue

@@ -17,7 +17,7 @@
 						<p class="employee-selected-avatar d-flex justify-center align-center">
 							{{ employee._initials }}
 						</p>
-						<p class="ml-2">{{ employee._fullName }}</p>
+						<p class="ml-2">{{ employee?._fullName }}</p>
 					</div>
 					<div class="mb-4"></div>
 				</template>
@@ -27,7 +27,7 @@
 					<p class="employee-selected-avatar d-flex justify-center align-center">
 						{{ employee._initials }}
 					</p>
-					<p class="ml-2">{{ employee._fullName }}</p>
+					<p class="ml-2">{{ employee?._fullName }}</p>
 				</div>
 			</v-sheet>
 		</v-col>

app/src/plugins/tm@modal/blocker/z-blocker-modal.vue

@@ -40,11 +40,17 @@
             :match-any="true"
             clearable
             label="Vyhľadať zamestnanca"
-            :items="[...enrichedEmployees]"
+            :items="enrichedEmployees"
             item-title="_fullName"
             item-value="id"
             variant="solo"
             class="modal-input"
+            :error="!selectedEmployee && blocker.employee_id"
+            :hint="
+              !selectedEmployee && blocker.employee_id
+                ? 'Zamestnanec neexistuje'
+                : null
+            "
           />
 
           <!-- Timeblock Component -->
@@ -52,6 +58,7 @@
             ref="employeeTimeblockRef"
             v-model="timeblockData"
             :employee="selectedEmployee"
+            :editing-blocker-id="blocker.id"
             :deletable="false"
             :index="0"
           />
@@ -100,7 +107,13 @@ export default {
       visible: false,
       v$: useVuelidate(),
       errorUtils,
-      blocker: null,
+      blocker: {
+        id: null,
+        name: '',
+        start: null,
+        end: null,
+        employee_id: null,
+      },
       timeblockData: {
         id: null,
         date: new Date(),
@@ -161,13 +174,22 @@ export default {
   methods: {
     async showModal({ blocker }) {
       this.visible = true;
-      this.blocker = null;
+
+      // Reset blocker to initial state
+      this.blocker = {
+        id: null,
+        name: '',
+        start: null,
+        end: null,
+        employee_id: this.user.id,
+      };
+
       this.timeblockData = {
         id: null,
         date: new Date(),
         starts_at_time: null,
         ends_at_time: null,
-        employee_id: null,
+        employee_id: this.user.id,
       };
 
       this.$nextTick(() => {
@@ -188,29 +210,31 @@ export default {
             date: startMoment.toDate(),
             starts_at_time: startMoment.format('HH:mm'),
             ends_at_time: endMoment.format('HH:mm'),
-            employee_id: blocker.employee.id,
+            employee_id: blocker.employee?.id || this.user.id,
           };
 
-          blocker.employee_id = blocker.employee.id;
+          this.blocker = {
-          this.blocker = blocker;
+            id: blocker.id,
+            name: blocker.name || '',
+            start: blocker.start,
+            end: blocker.end,
+            employee_id: blocker.employee?.id || this.user.id,
+          };
         } else {
-          this.blocker = { start: null, employee_id: this.user.id };
+          // Creating new blocker
-
           if (
-            blocker.starts_at_time &&
+            blocker?.starts_at_time &&
-            blocker.datepicker &&
+            blocker?.datepicker &&
-            blocker.employee_id
+            blocker?.employee_id
           ) {
             this.timeblockData = {
               id: null,
               date: blocker.datepicker,
               starts_at_time: blocker.starts_at_time,
-              ends_at_time: blocker.ends_at_time,
+              ends_at_time: blocker.ends_at_time || null,
               employee_id: blocker.employee_id,
             };
             this.blocker.employee_id = blocker.employee_id;
-          } else {
-            this.timeblockData.employee_id = this.user.id;
           }
         }
       } catch (error) {
@@ -250,6 +274,13 @@ export default {
 
     closeModal() {
       this.visible = false;
+      this.blocker = {
+        id: null,
+        name: '',
+        start: null,
+        end: null,
+        employee_id: null,
+      };
       this.timeblockData = {
         id: null,
         date: new Date(),
@@ -262,6 +293,7 @@ export default {
 
     _syncDatesTimes() {
       if (
+        !this.blocker ||
         !this.timeblockData.starts_at_time ||
         !this.timeblockData.ends_at_time ||
         !this.timeblockData.date

app/src/plugins/tm@modal/task/_components/_components/a-task-assigned-by.vue

@@ -14,7 +14,7 @@
 				<p class="employee-selected-avatar d-flex justify-center align-center">
 					{{ employee.name.charAt(0) + employee.surname.charAt(0) }}
 				</p>
-				<p class="ml-2">{{  employee._fullName }}</p>
+				<p class="ml-2">{{  employee?._fullName }}</p>
 			</v-sheet>
 		</v-col>
 	</v-row>

app/src/plugins/tm@modal/task/_components/employees/a-employee-timeblock-header.vue

@@ -4,7 +4,7 @@
       <p>
         Časový blok {{ index + 1 }}
         -
-        {{ employee._fullName }}
+        {{ employee?._fullName }}
       </p>
     </div>
 

app/src/plugins/tm@modal/task/_components/employees/a-employee-timeblock.vue

@@ -73,6 +73,7 @@ interface Props {
   allEmployeeTimeblocks?: TimeblockData[]; // Timeblocks for current employee
   allTimeblocks?: TimeblockData[]; // All timeblocks from all employees
   deletedTimeblockIds?: number[]; // IDs of saved timeblocks that have been deleted
+  editingBlockerId?: number | null; // ID of blocker being edited (to exclude from timeline)
   currentIndex?: number;
   deletable?: boolean;
   index?: number;
@@ -82,6 +83,7 @@ const props = withDefaults(defineProps<Props>(), {
   allEmployeeTimeblocks: () => [],
   allTimeblocks: () => [],
   deletedTimeblockIds: () => [],
+  editingBlockerId: null,
   currentIndex: 0,
   deletable: false,
   index: 0,
@@ -235,6 +237,8 @@ const otherTimeblocksForSameDate = computed(() => {
 });
 
 // Use timeline composable
+const editingBlockerIdRef = computed(() => props.editingBlockerId);
+
 const {
   isLoading,
   timelineTasks,
@@ -248,6 +252,7 @@ const {
   dateRef,
   timeblockRef,
   otherTimeblocksForSameDate,
+  editingBlockerIdRef,
 );
 
 // Force refetch when date changes