feat(modal): enhance modal functionality with resizing support and improved layout

app/src/plugins/tm@dashboard/tasks-concepts/_components/a-concepts-table.vue

@@ -2,9 +2,7 @@
   <v-table>
     <thead>
       <tr>
-        <th class="text-left">
+        <th class="text-left">Kód projektu</th>
-          Kód projektu
-        </th>
         <th class="text-left">Názov</th>
         <th class="text-left">Deadline</th>
         <th class="text-left">Najbližší neuzavretý</th>
@@ -36,7 +34,7 @@
         <td>{{ (subtask.duration - subtask.spent_time).toFixed(2) }} h</td>
 
         <td class="task-action">
-          <div class="d-flex justify-start align-center">
+          <div class="d-flex justify-start align-center" style="gap: 10px">
             <template v-if="subtask.type == 'office365'">
               <img
                 class="pencil-icon"
@@ -58,7 +56,7 @@
                 @click.stop="editTask(subtask, false)"
               />
               <img
-                class="trash-icon"
+                class="trash-icon ml-0"
                 :src="bin"
                 @click.stop="deleteTask(subtask)"
               />
@@ -176,4 +174,3 @@ tbody
 	tr:hover
 		background: rgba(0,0,0,.1)
 </style>
-

app/src/plugins/tm@modal/_mixins/modal.mixin.ts

@@ -1,38 +1,39 @@
-import modalResizeUtils from '@/plugins/tm@modal/_utils/modal-resize.utils'
+import modalResizeUtils from '@/plugins/tm@modal/_utils/modal-resize.utils';
 
 export default {
   data() {
     return {
-			modalWidth: '100%',
+      modalWidth: undefined, // Should be set by component
-			modalHeight: '100%',
+      modalHeight: undefined, // Should be set by component
-			modalName: '' // Should be set by component
+      modalName: '', // Should be set by component
-		}
+      modalSize: 'medium' as 'small' | 'medium' | 'large', // Size preset: small, medium, or large
+    };
   },
 
   computed: {
     modalWidthPx() {
-			return this.modalWidth
+      return this.modalWidth;
     },
     modalHeightPx() {
-			return this.modalHeight
+      return this.modalHeight;
-		}
+    },
   },
 
   mounted() {
-		window.addEventListener('keydown', this.handleKeyDown)
+    window.addEventListener('keydown', this.handleKeyDown);
-		window.addEventListener('resize', this.handleWindowResize)
+    window.addEventListener('resize', this.handleWindowResize);
-		this.initModalSize()
+    this.initModalSize();
   },
 
   beforeUnmount() {
-		window.removeEventListener('keydown', this.handleKeyDown)
+    window.removeEventListener('keydown', this.handleKeyDown);
-		window.removeEventListener('resize', this.handleWindowResize)
+    window.removeEventListener('resize', this.handleWindowResize);
   },
 
   methods: {
     handleKeyDown(event) {
       // if (event.keyCode === 27) this.closeModal()
-			if (event.keyCode === 27) this.visible = false
+      if (event.keyCode === 27) this.visible = false;
     },
 
     /**
@@ -40,13 +41,18 @@ export default {
      */
     initModalSize() {
       if (!this.modalName) {
-				console.warn('Modal name not set for resize functionality')
+        console.warn('Modal name not set for resize functionality');
-				return
+        return;
       }
 
-			const size = modalResizeUtils.getModalSize(this.modalName)
+      const size = modalResizeUtils.getModalSize(
-			this.modalWidth = typeof size.width === 'number' ? `${size.width}px` : size.width
+        this.modalName,
-			this.modalHeight = typeof size.height === 'number' ? `${size.height}px` : size.height
+        this.modalSize,
+      );
+      this.modalWidth =
+        typeof size.width === 'number' ? `${size.width}px` : size.width;
+      this.modalHeight =
+        typeof size.height === 'number' ? `${size.height}px` : size.height;
     },
 
     /**
@@ -54,11 +60,11 @@ export default {
      */
     handleWindowResize() {
       if (modalResizeUtils.isMobile()) {
-				this.modalWidth = '100%'
+        this.modalWidth = '100%';
-				this.modalHeight = '100%'
+        this.modalHeight = '100%';
       } else {
         // Reload stored or default size on desktop
-				this.initModalSize()
+        this.initModalSize();
       }
     },
 
@@ -67,12 +73,12 @@ export default {
      */
     handleModalResize({ width, height }) {
       if (modalResizeUtils.isMobile()) {
-				return // Don't resize on mobile
+        return; // Don't resize on mobile
       }
 
-			const constrained = modalResizeUtils.constrainSize(width, height)
+      const constrained = modalResizeUtils.constrainSize(width, height);
-			this.modalWidth = `${constrained.width}px`
+      this.modalWidth = `${constrained.width}px`;
-			this.modalHeight = `${constrained.height}px`
+      this.modalHeight = `${constrained.height}px`;
     },
 
     /**
@@ -80,15 +86,15 @@ export default {
      */
     handleResizeEnd() {
       if (!this.modalName || modalResizeUtils.isMobile()) {
-				return
+        return;
       }
 
       // Parse current dimensions
-			const width = parseFloat(this.modalWidth)
+      const width = parseFloat(this.modalWidth);
-			const height = parseFloat(this.modalHeight)
+      const height = parseFloat(this.modalHeight);
 
       if (!isNaN(width) && !isNaN(height)) {
-				modalResizeUtils.saveSize(this.modalName, width, height)
+        modalResizeUtils.saveSize(this.modalName, width, height);
       }
     },
 
@@ -97,11 +103,11 @@ export default {
      */
     resetModalSize() {
       if (!this.modalName) {
-				return
+        return;
       }
 
-			modalResizeUtils.resetSize(this.modalName)
+      modalResizeUtils.resetSize(this.modalName);
-			this.initModalSize()
+      this.initModalSize();
-		}
+    },
-	}
+  },
-}
+};

app/src/plugins/tm@modal/_utils/modal-resize.utils.ts

@@ -1,49 +1,69 @@
 interface ModalSize {
-	width: string | number
+  width: string | number;
-	height: string | number
+  height: string | number;
 }
 
 interface StoredModalSize {
-	width: number
+  width: number;
-	height: number
+  height: number;
-	timestamp: number
+  timestamp: number;
 }
 
-const MOBILE_BREAKPOINT = 768
+const MOBILE_BREAKPOINT = 768;
-const DEFAULT_DESKTOP_WIDTH_PERCENT = 80
+
-const DEFAULT_DESKTOP_MAX_WIDTH = 1440
+// Size presets
-const DEFAULT_DESKTOP_HEIGHT_PERCENT = 90
+const SIZE_PRESETS = {
+  small: {
+    width: 600,
+    height: 'fit-content',
+    maxWidth: 600,
+  },
+  medium: {
+    width: 900,
+    height: 'fit-content',
+    maxWidth: 900,
+  },
+  large: {
+    width: '75%',
+    height: '90%',
+    maxWidth: '85%',
+  },
+};
 
 export default {
   /**
    * Check if the current viewport is mobile
    */
   isMobile(): boolean {
-		return window.innerWidth <= MOBILE_BREAKPOINT
+    return window.innerWidth <= MOBILE_BREAKPOINT;
   },
 
   /**
-	 * Get default modal size based on viewport
+   * Get default modal size based on viewport and size preset
    */
-	getDefaultSize(): ModalSize {
+  getDefaultSize(size: 'small' | 'medium' | 'large' = 'medium'): ModalSize {
     if (this.isMobile()) {
       return {
         width: '100%',
-				height: '100%'
+        height: '100%',
-			}
+      };
     }
 
-		const viewportWidth = window.innerWidth
+    const preset = SIZE_PRESETS[size];
-		const calculatedWidth = Math.min(
-			(viewportWidth * DEFAULT_DESKTOP_WIDTH_PERCENT) / 100,
-			DEFAULT_DESKTOP_MAX_WIDTH
-		)
-		const calculatedHeight = (window.innerHeight * DEFAULT_DESKTOP_HEIGHT_PERCENT) / 100
 
+    // For large size, use percentages; for small/medium use fixed px values
+    if (size === 'large') {
       return {
-			width: calculatedWidth,
+        width: preset.width,
-			height: calculatedHeight
+        height: preset.height,
+      };
     }
+
+    // For small and medium, return the px values directly
+    return {
+      width: preset.width,
+      height: preset.height,
+    };
   },
 
   /**
@@ -51,27 +71,31 @@ export default {
    */
   getStoredSize(modalName: string): ModalSize | null {
     try {
-			const key = `modal-size-${modalName}`
+      const key = `modal-size-${modalName}`;
-			const stored = localStorage.getItem(key)
+      const stored = localStorage.getItem(key);
 
       if (!stored) {
-				return null
+        return null;
       }
 
-			const parsed: StoredModalSize = JSON.parse(stored)
+      const parsed: StoredModalSize = JSON.parse(stored);
 
       // Return stored size if it exists and is valid
-			if (parsed && typeof parsed.width === 'number' && typeof parsed.height === 'number') {
+      if (
+        parsed &&
+        typeof parsed.width === 'number' &&
+        typeof parsed.height === 'number'
+      ) {
         return {
           width: parsed.width,
-					height: parsed.height
+          height: parsed.height,
-				}
+        };
       }
 
-			return null
+      return null;
     } catch (error) {
-			console.error('Error reading stored modal size:', error)
+      console.error('Error reading stored modal size:', error);
-			return null
+      return null;
     }
   },
 
@@ -80,15 +104,15 @@ export default {
    */
   saveSize(modalName: string, width: number, height: number): void {
     try {
-			const key = `modal-size-${modalName}`
+      const key = `modal-size-${modalName}`;
       const data: StoredModalSize = {
         width,
         height,
-				timestamp: Date.now()
+        timestamp: Date.now(),
-			}
+      };
-			localStorage.setItem(key, JSON.stringify(data))
+      localStorage.setItem(key, JSON.stringify(data));
     } catch (error) {
-			console.error('Error saving modal size:', error)
+      console.error('Error saving modal size:', error);
     }
   },
 
@@ -97,33 +121,36 @@ export default {
    */
   resetSize(modalName: string): void {
     try {
-			const key = `modal-size-${modalName}`
+      const key = `modal-size-${modalName}`;
-			localStorage.removeItem(key)
+      localStorage.removeItem(key);
     } catch (error) {
-			console.error('Error resetting modal size:', error)
+      console.error('Error resetting modal size:', error);
     }
   },
 
   /**
    * Get modal size (stored or default)
    */
-	getModalSize(modalName: string): ModalSize {
+  getModalSize(
+    modalName: string,
+    size: 'small' | 'medium' | 'large' = 'medium',
+  ): ModalSize {
     // On mobile, always return 100%
     if (this.isMobile()) {
       return {
         width: '100%',
-				height: '100%'
+        height: '100%',
-			}
+      };
     }
 
     // Check for stored size
-		const storedSize = this.getStoredSize(modalName)
+    const storedSize = this.getStoredSize(modalName);
     if (storedSize) {
-			return storedSize
+      return storedSize;
     }
 
-		// Return default size
+    // Return default size based on preset
-		return this.getDefaultSize()
+    return this.getDefaultSize(size);
   },
 
   /**
@@ -131,32 +158,34 @@ export default {
    */
   normalizeSize(size: string | number): number {
     if (typeof size === 'number') {
-			return size
+      return size;
     }
 
     // If it's a percentage, calculate pixel value
     if (size.includes('%')) {
-			const percent = parseFloat(size)
+      const percent = parseFloat(size);
-			return (window.innerWidth * percent) / 100
+      return (window.innerWidth * percent) / 100;
     }
 
     // If it's already pixels, parse it
-		return parseFloat(size)
+    return parseFloat(size);
   },
 
   /**
    * Constrain size within reasonable bounds
    */
-	constrainSize(width: number, height: number): { width: number; height: number } {
+  constrainSize(
-		const minWidth = 400
+    width: number,
-		const minHeight = 300
+    height: number,
-		const maxWidth = window.innerWidth
+  ): { width: number; height: number } {
-		const maxHeight = window.innerHeight
+    const minWidth = 400;
+    const minHeight = 300;
+    const maxWidth = window.innerWidth;
+    const maxHeight = window.innerHeight;
 
     return {
       width: Math.max(minWidth, Math.min(width, maxWidth)),
-			height: Math.max(minHeight, Math.min(height, maxHeight))
+      height: Math.max(minHeight, Math.min(height, maxHeight)),
-		}
+    };
-	}
+  },
-}
+};
-

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

@@ -7,14 +7,17 @@
     :retain-focus="false"
   >
     <W-loadable :content="blocker" class="h-100">
-      <v-card height="100%" class="d-flex flex-column">
+      <v-card
+        style="position: relative; height: 100%"
+        class="d-flex flex-column"
+      >
         <div class="d-flex justify-space-between align-center modal-header">
           <h1>{{ blocker.id ? 'Upraviť' : 'Vytvoriť' }} blocker</h1>
-          <v-icon
+
-            icon="mdi-close"
+          <div class="d-flex align-center">
-            size="large"
+            <a-reset-size-button @reset="resetModalSize" />
-            @click.stop="closeModal()"
+            <a-close-button @close="closeModal()" />
-          ></v-icon>
+          </div>
         </div>
 
         <v-card-actions class="d-flex flex-column modal-content">
@@ -92,6 +95,12 @@
         <v-btn class="button primary" @click="save()">{{
           blocker.id ? 'UPRAVIŤ' : 'VYTVORIŤ'
         }}</v-btn>
+        <a-resize-handle
+          :current-width="modalWidthPx"
+          :current-height="modalHeightPx"
+          @resize="handleModalResize"
+          @resize-end="handleResizeEnd"
+        />
       </v-card>
     </W-loadable>
   </v-dialog>
@@ -106,11 +115,17 @@ import { mapGetters } from 'vuex';
 import moment from 'moment';
 import AutocompleteMixin from '@/plugins/tm@_mixins/autocomplete.mixin';
 import modalMixin from '@/plugins/tm@modal/_mixins/modal.mixin';
+import AResizeHandle from '@/plugins/tm@modal/_components/a-resize-handle.vue';
+import AResetSizeButton from '@/plugins/tm@modal/_components/a-reset-size-button.vue';
+import ACloseButton from '@/plugins/tm@modal/_components/a-close-button.vue';
 
 export default {
   components: {
     ZDatepicker,
     // ZAutocomplete
+    AResizeHandle,
+    AResetSizeButton,
+    ACloseButton,
   },
   mixins: [AutocompleteMixin, modalMixin],
 
@@ -126,6 +141,8 @@ export default {
       starts_at_time: null,
       ends_at_time: null,
       employee: null,
+      modalName: 'z-blocker-modal',
+      modalSize: 'large',
     };
   },
 

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

@@ -6,14 +6,14 @@
     persistent
     :retain-focus="false"
   >
-    <v-card style="position: relative">
+    <v-card style="position: relative; height: 100%">
       <div class="d-flex justify-space-between align-center">
         <h1>
           Ste si istý, že chcete zmazať <b>{{ blocker.name }}</b
           >?
         </h1>
 
-        <div class="d-flex align-center">
+        <div class="d-flex align-start">
           <a-reset-size-button @reset="resetModalSize" />
           <a-close-button class="mb-15" @close="closeModal()" />
         </div>
@@ -63,6 +63,7 @@ export default {
       blocker: null,
       isDeleting: false,
       modalName: 'z-delete-blocker-modal',
+      modalSize: 'small',
     };
   },
 

app/src/plugins/tm@modal/master-task/z-complete-master-task-modal.vue

@@ -6,7 +6,7 @@
     persistent
     :retain-focus="false"
   >
-    <v-card style="position: relative">
+    <v-card style="position: relative; height: 100%">
       <div class="d-flex justify-space-between align-center">
         <h1>
           Ste si istý, že chcete
@@ -14,7 +14,7 @@
           <b>{{ mastertask?.name }}</b
           >?
         </h1>
-        <div class="d-flex align-center">
+        <div class="d-flex align-start">
           <a-reset-size-button @reset="resetModalSize" />
           <a-close-button @close="() => (visible = false)" />
         </div>
@@ -59,6 +59,7 @@ export default {
       visible: false,
       mastertask: null,
       modalName: 'z-complete-master-task-modal',
+      modalSize: 'small',
     };
   },
 

app/src/plugins/tm@modal/master-task/z-delete-master-task-modal.vue

@@ -6,14 +6,14 @@
     persistent
     :retain-focus="false"
   >
-    <v-card style="position: relative">
+    <v-card style="position: relative; height: 100%">
       <div class="d-flex justify-space-between align-center">
         <h1>
           Ste si istý, že chcete zmazať <b>{{ mastertask.name }}</b
           >?
         </h1>
 
-        <div class="d-flex align-center">
+        <div class="d-flex align-start">
           <a-reset-size-button @reset="resetModalSize" />
           <a-close-button class="mb-15" @close="closeModal()" />
         </div>
@@ -63,6 +63,7 @@ export default {
       mastertask: null,
       isDeleting: false,
       modalName: 'z-delete-master-task-modal',
+      modalSize: 'small',
     };
   },
 

app/src/plugins/tm@modal/master-task/z-delete-team-member-modal.vue

@@ -6,10 +6,10 @@
     persistent
     :retain-focus="false"
   >
-    <v-card style="position: relative">
+    <v-card style="position: relative; height: 100%">
       <div class="d-flex justify-space-between align-center">
         <h1 class="text-h5">Chcete túto osobu odstrániť z tímu?</h1>
-        <div class="d-flex align-center">
+        <div class="d-flex align-start">
           <a-reset-size-button @reset="resetModalSize" />
           <a-close-button @close="closeModal()" />
         </div>
@@ -58,6 +58,7 @@ export default {
       member: null,
       team: null,
       modalName: 'z-delete-team-member-modal',
+      modalSize: 'small',
     };
   },
 

app/src/plugins/tm@modal/master-task/z-master-task-modal.vue

@@ -9,9 +9,8 @@
     <W-loadable :content="mastertask" class="h-100">
       <v-card
         v-if="editMode"
-        height="100%"
+        style="position: relative; height: 100%"
         class="d-flex flex-column scrolling"
-        style="position: relative"
       >
         <div class="d-flex justify-space-between align-center modal-header">
           <h1>
@@ -249,9 +248,8 @@
 
       <v-card
         v-else
-        height="100%"
+        style="position: relative; height: 100%"
         class="d-flex flex-column scrolling"
-        style="position: relative"
       >
         <div class="d-flex justify-space-between align-center">
           <p>{{ mastertask.project_code }}</p>
@@ -378,6 +376,7 @@ export default {
       date: null,
       projectCodeSearch: null,
       modalName: 'z-master-task-modal',
+      modalSize: 'large',
     };
   },
 

app/src/plugins/tm@modal/task-cell/z-show-menu-modal.vue

@@ -1,15 +1,23 @@
 <template>
-	<v-dialog v-model="visible" :width="modalWidth" :height="modalHeight" persistent :retain-focus="false" >
+  <v-dialog
-		<v-card style="position: relative">
+    v-model="visible"
+    :width="modalWidth"
+    :height="modalHeight"
+    persistent
+    :retain-focus="false"
+  >
+    <v-card style="position: relative; height: 100%">
       <div class="d-flex justify-space-between align-center">
         <h1>Vytvoriť</h1>
-				<div class="d-flex align-center">
+        <div class="d-flex align-start">
           <a-reset-size-button @reset="resetModalSize" />
           <a-close-button @close="closeModal()" />
         </div>
       </div>
 
-			<v-card-actions class="mt-10 d-flex justify-start align-center mobile-view">
+      <v-card-actions
+        class="mt-10 d-flex justify-start align-center mobile-view"
+      >
         <v-btn class="button primary half outline" @click.stop="createTask()"
           >SUB TASK</v-btn
         >
@@ -17,22 +25,27 @@
           >BLOCKER</v-btn
         >
       </v-card-actions>
-			<a-resize-handle :current-width="modalWidthPx" :current-height="modalHeightPx" @resize="handleModalResize" @resize-end="handleResizeEnd" />
+      <a-resize-handle
+        :current-width="modalWidthPx"
+        :current-height="modalHeightPx"
+        @resize="handleModalResize"
+        @resize-end="handleResizeEnd"
+      />
     </v-card>
   </v-dialog>
 </template>
 
 <script>
-import modalMixin from '@/plugins/tm@modal/_mixins/modal.mixin'
+import modalMixin from '@/plugins/tm@modal/_mixins/modal.mixin';
-import AResizeHandle from '@/plugins/tm@modal/_components/a-resize-handle.vue'
+import AResizeHandle from '@/plugins/tm@modal/_components/a-resize-handle.vue';
-import AResetSizeButton from '@/plugins/tm@modal/_components/a-reset-size-button.vue'
+import AResetSizeButton from '@/plugins/tm@modal/_components/a-reset-size-button.vue';
-import ACloseButton from '@/plugins/tm@modal/_components/a-close-button.vue'
+import ACloseButton from '@/plugins/tm@modal/_components/a-close-button.vue';
 
 export default {
-
   components: {
     AResizeHandle,
-		AResetSizeButton, ACloseButton,
+    AResetSizeButton,
+    ACloseButton,
   },
   mixins: [modalMixin],
   props: {
@@ -48,7 +61,8 @@ export default {
       visible: false,
       localData: null,
       modalName: 'z-show-menu-modal',
-		}
+      modalSize: 'small',
+    };
   },
 
   mounted() {

app/src/plugins/tm@modal/task/_components/_components/a-task-spent-time.vue

@@ -51,16 +51,21 @@
     </v-col>
   </v-row>
 
-  <v-dialog v-model="showModal" width="750" persistent :retain-focus="false">
+  <v-dialog
+    v-model="showModal"
+    :width="modalWidth"
+    :height="modalHeight"
+    persistent
+    :retain-focus="false"
+  >
     <v-card>
       <div class="d-flex justify-space-between align-center">
         <h1>Pridať odpracovaný čas</h1>
 
-        <v-icon
+        <div class="d-flex align-start">
-          icon="mdi-close"
+          <a-reset-size-button @reset="resetModalSize" />
-          size="large"
+          <a-close-button @close="closeModal()" />
-          @click.stop="closeModal()"
+        </div>
-        ></v-icon>
       </div>
       <v-card-actions class="mt-10 d-flex justify-start align-center">
         <v-text-field
@@ -79,6 +84,12 @@
         />
       </v-card-actions>
       <v-btn class="button primary mt-5" @click="submit()">Potvrdiť</v-btn>
+      <a-resize-handle
+        :current-width="modalWidthPx"
+        :current-height="modalHeightPx"
+        @resize="handleModalResize"
+        @resize-end="handleResizeEnd"
+      />
     </v-card>
   </v-dialog>
 </template>
@@ -91,8 +102,16 @@ import { required, numeric, minValue } from '@vuelidate/validators';
 import tmUtils from '@/plugins/tm@_utils/tm.utils';
 import { mapGetters } from 'vuex';
 import modalMixin from '@/plugins/tm@modal/_mixins/modal.mixin';
+import AResizeHandle from '@/plugins/tm@modal/_components/a-resize-handle.vue';
+import AResetSizeButton from '@/plugins/tm@modal/_components/a-reset-size-button.vue';
+import ACloseButton from '@/plugins/tm@modal/_components/a-close-button.vue';
 
 export default {
+  components: {
+    AResizeHandle,
+    AResetSizeButton,
+    ACloseButton,
+  },
   mixins: [modalMixin],
   props: {
     hours: {
@@ -115,6 +134,8 @@ export default {
       form: {
         hours: null,
       },
+      modalName: 'a-task-spent-time-modal',
+      modalSize: 'medium',
     };
   },
 

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

@@ -86,18 +86,21 @@
 
   <v-dialog
     v-model="showModal"
-    max-width="900"
+    :width="modalWidth"
+    :height="modalHeight"
     persistent
     :retain-focus="false"
   >
-    <v-card class="add-timeblock-modal">
+    <v-card
+      style="position: relative; height: 100%"
+      class="add-timeblock-modal"
+    >
       <div class="d-flex justify-space-between align-center pa-4">
         <h1>Pridať dátum</h1>
-        <v-icon
+        <div class="d-flex align-start">
-          icon="mdi-close"
+          <a-reset-size-button @reset="resetModalSize" />
-          size="large"
+          <a-close-button @close="closeModal()" />
-          @click.stop="closeModal()"
+        </div>
-        ></v-icon>
       </div>
 
       <v-card-text class="pa-4">
@@ -116,9 +119,21 @@
           Potvrdiť
         </v-btn>
       </v-card-actions>
+      <a-resize-handle
+        :current-width="modalWidthPx"
+        :current-height="modalHeightPx"
+        @resize="handleModalResize"
+        @resize-end="handleResizeEnd"
+      />
     </v-card>
   </v-dialog>
-  <v-dialog v-model="visible" max-width="750" persistent :retain-focus="false">
+  <v-dialog
+    v-model="visible"
+    :width="modalWidth"
+    :height="modalHeight"
+    persistent
+    :retain-focus="false"
+  >
     <v-card>
       <div class="d-flex justify-space-between align-center">
         <h1 class="text-red">
@@ -126,12 +141,10 @@
           <b class="text-black">z mastertasku {{ subtask?.project_code }} ?</b>
         </h1>
 
-        <v-icon
+        <div class="d-flex align-start">
-          icon="mdi-close"
+          <a-reset-size-button @reset="resetModalSize" />
-          size="large"
+          <a-close-button @close="closeModal()" />
-          class="mb-15"
+        </div>
-          @click.stop="visible = false"
-        ></v-icon>
       </div>
       <v-card-actions
         class="mt-10 d-flex justify-start align-center mobile-view"
@@ -142,10 +155,16 @@
           @click.stop="confirmSubmit()"
           >ÁNO</v-btn
         >
-        <v-btn class="button primary half outline" @click.stop="visible = false"
+        <v-btn class="button primary half outline" @click.stop="closeModal()"
           >ZRUŠIŤ</v-btn
         >
       </v-card-actions>
+      <a-resize-handle
+        :current-width="modalWidthPx"
+        :current-height="modalHeightPx"
+        @resize="handleModalResize"
+        @resize-end="handleResizeEnd"
+      />
     </v-card>
   </v-dialog>
 </template>
@@ -163,11 +182,17 @@ import {
   getCollisionSegments,
   calculateTimeblockDuration,
 } from '@/plugins/tm@_utils/timeblock.utils';
+import AResetSizeButton from '@/plugins/tm@modal/_components/a-reset-size-button.vue';
+import ACloseButton from '@/plugins/tm@modal/_components/a-close-button.vue';
+import AResizeHandle from '@/plugins/tm@modal/_components/a-resize-handle.vue';
 
 export default {
   components: {
     AEmployeeTimeblock,
     // AEmployeeTimeblockTimeline,
+    AResetSizeButton,
+    ACloseButton,
+    AResizeHandle,
   },
   mixins: [modalMixin],
 
@@ -204,6 +229,8 @@ export default {
       HOUR_WIDTH_MOBILE: 50,
       // Existing timeblocks timeline data
       existingTimeblocksData: {}, // { [index]: { tasks: [], loading: false } }
+      modalName: 'a-task-timeblocks-modal',
+      modalSize: 'medium',
     };
   },
 

app/src/plugins/tm@modal/task/z-complete-task-modal.vue

@@ -1,6 +1,12 @@
 <template>
-  <v-dialog v-model="visible" max-width="750" persistent :retain-focus="false">
+  <v-dialog
-    <v-card style="position: relative">
+    v-model="visible"
+    :width="modalWidth"
+    :height="modalHeight"
+    persistent
+    :retain-focus="false"
+  >
+    <v-card style="position: relative; height: 100%">
       <div class="d-flex justify-space-between align-center">
         <h1>
           Ste si istý, že chcete
@@ -9,7 +15,8 @@
           <b>{{ subtask?.master_task?.name || subtask.master_task }}</b
           >?
         </h1>
-        <div class="d-flex align-center">
+        <div class="d-flex align-start">
+          <a-reset-size-button @reset="resetModalSize" />
           <a-close-button @close="closeModal()" />
         </div>
       </div>
@@ -23,6 +30,12 @@
           >ZRUŠIŤ</v-btn
         >
       </v-card-actions>
+      <a-resize-handle
+        :current-width="modalWidthPx"
+        :current-height="modalHeightPx"
+        @resize="handleModalResize"
+        @resize-end="handleResizeEnd"
+      />
     </v-card>
   </v-dialog>
 </template>
@@ -30,10 +43,14 @@
 <script>
 import modalMixin from '@/plugins/tm@modal/_mixins/modal.mixin';
 import moment from 'moment';
+import AResizeHandle from '@/plugins/tm@modal/_components/a-resize-handle.vue';
+import AResetSizeButton from '@/plugins/tm@modal/_components/a-reset-size-button.vue';
 import ACloseButton from '@/plugins/tm@modal/_components/a-close-button.vue';
 
 export default {
   components: {
+    AResizeHandle,
+    AResetSizeButton,
     ACloseButton,
   },
   mixins: [modalMixin],
@@ -44,6 +61,7 @@ export default {
       visible: false,
       subtask: null,
       modalName: 'z-complete-task-modal',
+      modalSize: 'small',
     };
   },
 

app/src/plugins/tm@modal/task/z-delete-task-modal.vue

@@ -1,6 +1,12 @@
 <template>
-  <v-dialog v-model="visible" max-width="750" persistent :retain-focus="false">
+  <v-dialog
-    <v-card style="position: relative">
+    v-model="visible"
+    :width="modalWidth"
+    :height="modalHeight"
+    persistent
+    :retain-focus="false"
+  >
+    <v-card style="position: relative; height: 100%">
       <div class="d-flex justify-space-between align-center">
         <h1>
           Ste si istý, že chcete zmazať sub task z mastertasku
@@ -8,7 +14,8 @@
           >?
         </h1>
 
-        <div class="d-flex align-center">
+        <div class="d-flex align-start">
+          <a-reset-size-button @reset="resetModalSize" />
           <a-close-button class="mb-15" @close="closeModal()" />
         </div>
       </div>
@@ -26,16 +33,26 @@
           >ZRUŠIŤ</v-btn
         >
       </v-card-actions>
+      <a-resize-handle
+        :current-width="modalWidthPx"
+        :current-height="modalHeightPx"
+        @resize="handleModalResize"
+        @resize-end="handleResizeEnd"
+      />
     </v-card>
   </v-dialog>
 </template>
 
 <script>
 import modalMixin from '@/plugins/tm@modal/_mixins/modal.mixin';
+import AResizeHandle from '@/plugins/tm@modal/_components/a-resize-handle.vue';
+import AResetSizeButton from '@/plugins/tm@modal/_components/a-reset-size-button.vue';
 import ACloseButton from '@/plugins/tm@modal/_components/a-close-button.vue';
 
 export default {
   components: {
+    AResizeHandle,
+    AResetSizeButton,
     ACloseButton,
   },
   mixins: [modalMixin],
@@ -47,6 +64,7 @@ export default {
       subtask: null,
       isDeleting: false,
       modalName: 'z-delete-task-modal',
+      modalSize: 'small',
     };
   },
 

app/src/plugins/tm@modal/task/z-delete-timeblock-modal.vue

@@ -1,10 +1,17 @@
 <template>
-  <v-dialog v-model="visible" max-width="750" persistent :retain-focus="false">
+  <v-dialog
-    <v-card style="position: relative">
+    v-model="visible"
+    :width="modalWidth"
+    :height="modalHeight"
+    persistent
+    :retain-focus="false"
+  >
+    <v-card style="position: relative; height: 100%">
       <div class="d-flex justify-space-between align-center">
         <h4 class="mt-3">Vyberte časový úsek, ktorý chcete odstrániť</h4>
 
-        <div class="d-flex align-center">
+        <div class="d-flex align-start">
+          <a-reset-size-button @reset="resetModalSize" />
           <a-close-button @close="closeModal()" />
         </div>
       </div>
@@ -31,6 +38,12 @@
           "
         />
       </div>
+      <a-resize-handle
+        :current-width="modalWidthPx"
+        :current-height="modalHeightPx"
+        @resize="handleModalResize"
+        @resize-end="handleResizeEnd"
+      />
     </v-card>
   </v-dialog>
 </template>
@@ -39,10 +52,14 @@
 import modalMixin from '@/plugins/tm@modal/_mixins/modal.mixin';
 import tmUtils from '@/plugins/tm@_utils/tm.utils';
 import moment from 'moment';
+import AResizeHandle from '@/plugins/tm@modal/_components/a-resize-handle.vue';
+import AResetSizeButton from '@/plugins/tm@modal/_components/a-reset-size-button.vue';
 import ACloseButton from '@/plugins/tm@modal/_components/a-close-button.vue';
 
 export default {
   components: {
+    AResizeHandle,
+    AResetSizeButton,
     ACloseButton,
   },
   mixins: [modalMixin],
@@ -55,6 +72,7 @@ export default {
       isDeleting: false,
       tmUtils,
       modalName: 'z-delete-timeblock-modal',
+      modalSize: 'medium',
     };
   },
 

app/src/plugins/tm@modal/task/z-remove-employee-modal.vue

@@ -1,12 +1,19 @@
 <template>
-  <v-dialog v-model="visible" max-width="750" persistent :retain-focus="false">
+  <v-dialog
-    <v-card style="position: relative">
+    v-model="visible"
+    :width="modalWidth"
+    :height="modalHeight"
+    persistent
+    :retain-focus="false"
+  >
+    <v-card style="position: relative; height: 100%">
       <div class="d-flex justify-space-between align-center">
         <h1>
           Naozaj chcete odstrániť tohto zamestnanca a všetky jeho timeblocks?
         </h1>
 
-        <div class="d-flex align-center">
+        <div class="d-flex align-start">
+          <a-reset-size-button @reset="resetModalSize" />
           <a-close-button class="mb-15" @close="closeModal()" />
         </div>
       </div>
@@ -20,16 +27,26 @@
           >ZRUŠIŤ</v-btn
         >
       </v-card-actions>
+      <a-resize-handle
+        :current-width="modalWidthPx"
+        :current-height="modalHeightPx"
+        @resize="handleModalResize"
+        @resize-end="handleResizeEnd"
+      />
     </v-card>
   </v-dialog>
 </template>
 
 <script>
 import modalMixin from '@/plugins/tm@modal/_mixins/modal.mixin';
+import AResizeHandle from '@/plugins/tm@modal/_components/a-resize-handle.vue';
+import AResetSizeButton from '@/plugins/tm@modal/_components/a-reset-size-button.vue';
 import ACloseButton from '@/plugins/tm@modal/_components/a-close-button.vue';
 
 export default {
   components: {
+    AResizeHandle,
+    AResetSizeButton,
     ACloseButton,
   },
   mixins: [modalMixin],
@@ -39,6 +56,7 @@ export default {
     return {
       visible: false,
       modalName: 'z-remove-employee-modal',
+      modalSize: 'small',
     };
   },
 

app/src/plugins/tm@modal/task/z-remove-timeblock-modal.vue

@@ -1,10 +1,17 @@
 <template>
-  <v-dialog v-model="visible" max-width="750" persistent :retain-focus="false">
+  <v-dialog
-    <v-card style="position: relative">
+    v-model="visible"
+    :width="modalWidth"
+    :height="modalHeight"
+    persistent
+    :retain-focus="false"
+  >
+    <v-card style="position: relative; height: 100%">
       <div class="d-flex justify-space-between align-center">
         <h1>Naozaj chcete odstrániť tento timeblock?</h1>
 
-        <div class="d-flex align-center">
+        <div class="d-flex align-start">
+          <a-reset-size-button @reset="resetModalSize" />
           <a-close-button class="mb-15" @close="closeModal()" />
         </div>
       </div>
@@ -18,16 +25,26 @@
           >ZRUŠIŤ</v-btn
         >
       </v-card-actions>
+      <a-resize-handle
+        :current-width="modalWidthPx"
+        :current-height="modalHeightPx"
+        @resize="handleModalResize"
+        @resize-end="handleResizeEnd"
+      />
     </v-card>
   </v-dialog>
 </template>
 
 <script>
 import modalMixin from '@/plugins/tm@modal/_mixins/modal.mixin';
+import AResizeHandle from '@/plugins/tm@modal/_components/a-resize-handle.vue';
+import AResetSizeButton from '@/plugins/tm@modal/_components/a-reset-size-button.vue';
 import ACloseButton from '@/plugins/tm@modal/_components/a-close-button.vue';
 
 export default {
   components: {
+    AResizeHandle,
+    AResetSizeButton,
     ACloseButton,
   },
   mixins: [modalMixin],
@@ -36,6 +53,7 @@ export default {
     return {
       visible: false,
       modalName: 'z-remove-timeblock-modal',
+      modalSize: 'small',
       onConfirmCallback: null,
     };
   },

app/src/plugins/tm@modal/task/z-task-add-time-modal.vue

@@ -1,10 +1,17 @@
 <template>
-  <v-dialog v-model="visible" max-width="750" persistent :retain-focus="false">
+  <v-dialog
-    <v-card style="position: relative">
+    v-model="visible"
+    :width="modalWidth"
+    :height="modalHeight"
+    persistent
+    :retain-focus="false"
+  >
+    <v-card style="position: relative; height: 100%">
       <div class="d-flex justify-space-between align-center">
         <h1>Pridať odpracovaný čas</h1>
 
-        <div class="d-flex align-center">
+        <div class="d-flex align-start">
+          <a-reset-size-button @reset="resetModalSize" />
           <a-close-button @close="closeModal()" />
         </div>
       </div>
@@ -25,6 +32,12 @@
         />
       </v-card-actions>
       <v-btn class="button primary mt-5" @click="submit()">Potvrdiť</v-btn>
+      <a-resize-handle
+        :current-width="modalWidthPx"
+        :current-height="modalHeightPx"
+        @resize="handleModalResize"
+        @resize-end="handleResizeEnd"
+      />
     </v-card>
   </v-dialog>
 </template>
@@ -36,10 +49,14 @@ import { required, numeric, minValue } from '@vuelidate/validators';
 import modalMixin from '@/plugins/tm@modal/_mixins/modal.mixin';
 import tmUtils from '@/plugins/tm@_utils/tm.utils';
 import moment from 'moment';
+import AResizeHandle from '@/plugins/tm@modal/_components/a-resize-handle.vue';
+import AResetSizeButton from '@/plugins/tm@modal/_components/a-reset-size-button.vue';
 import ACloseButton from '@/plugins/tm@modal/_components/a-close-button.vue';
 
 export default {
   components: {
+    AResizeHandle,
+    AResetSizeButton,
     ACloseButton,
   },
   mixins: [modalMixin],
@@ -55,6 +72,7 @@ export default {
         hours: null,
       },
       modalName: 'z-task-add-time-modal',
+      modalSize: 'medium',
     };
   },
 

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

@@ -322,6 +322,7 @@ export default {
       deletedTimeblockIds: [], // Track IDs of saved timeblocks that have been deleted
       wasFormValidationTriggered: false,
       modalName: 'z-task-modal',
+      modalSize: 'large',
       employeeRefs: [],
       pendingRemoveEmployeeId: undefined,
       pendingRemoveEmployeeIndex: undefined,

app/src/plugins/tm@modal/task/z-unable-to-complete-task-modal.vue

@@ -6,11 +6,11 @@
     persistent
     :retain-focus="false"
   >
-    <v-card style="position: relative">
+    <v-card style="position: relative; height: 100%">
       <div class="d-flex justify-space-between align-center">
         <h1>Sub Task má nedokončené úlohy</h1>
 
-        <div class="d-flex align-center">
+        <div class="d-flex align-start">
           <a-reset-size-button @reset="resetModalSize" />
           <a-close-button @close="closeModal()" />
         </div>
@@ -94,6 +94,7 @@ export default {
       loadingTimeblocks: {},
       loadingCloseAll: false,
       modalName: 'z-unable-to-complete-task-modal',
+      modalSize: 'medium',
     };
   },
 

app/src/plugins/tm@modal/task/z-unable-to-edit-office-task-modal.vue

@@ -6,7 +6,7 @@
     persistent
     :retain-focus="false"
   >
-    <v-card style="position: relative">
+    <v-card style="position: relative; height: 100%">
       <div class="d-flex justify-space-between align-center">
         <h1 v-if="mode === 'edit'">
           Sub Task zosynchronizovaný z Office365 sa nedá upravovat. Upravte ho
@@ -17,20 +17,31 @@
           svojom kalendári a pockajte na zosynchronizovanie s Task Managerom
         </h1>
 
-        <div class="d-flex align-center">
+        <div class="d-flex align-start">
+          <a-reset-size-button @reset="resetModalSize" />
           <a-close-button @close="closeModal()" />
         </div>
       </div>
+      <a-resize-handle
+        :current-width="modalWidthPx"
+        :current-height="modalHeightPx"
+        @resize="handleModalResize"
+        @resize-end="handleResizeEnd"
+      />
     </v-card>
   </v-dialog>
 </template>
 
 <script>
 import modalMixin from '@/plugins/tm@modal/_mixins/modal.mixin';
+import AResizeHandle from '@/plugins/tm@modal/_components/a-resize-handle.vue';
+import AResetSizeButton from '@/plugins/tm@modal/_components/a-reset-size-button.vue';
 import ACloseButton from '@/plugins/tm@modal/_components/a-close-button.vue';
 
 export default {
   components: {
+    AResizeHandle,
+    AResetSizeButton,
     ACloseButton,
   },
 
@@ -49,6 +60,7 @@ export default {
       visible: false,
       subtask: null,
       modalName: 'z-unable-to-edit-office-task-modal',
+      modalSize: 'small',
     };
   },
 

app/src/plugins/tm@modal/team/z-delete-team-modal.vue

@@ -6,13 +6,13 @@
     persistent
     :retain-focus="false"
   >
-    <v-card style="position: relative">
+    <v-card style="position: relative; height: 100%">
       <div class="d-flex justify-space-between align-center">
         <h1>
           Ste si istý, že chcete zmazať tím <b>{{ team.name }}</b
           >?
         </h1>
-        <div class="d-flex align-center">
+        <div class="d-flex align-start">
           <a-reset-size-button @reset="resetModalSize" />
           <a-close-button @close="closeModal()" />
         </div>
@@ -63,6 +63,7 @@ export default {
       team: null,
       isDeleting: false,
       modalName: 'z-delete-team-modal',
+      modalSize: 'small',
     };
   },
 

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

@@ -117,6 +117,7 @@ export default {
       employeeSelect: null,
       team: null,
       modalName: 'z-team-modal',
+      modalSize: 'medium',
     };
   },