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

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"
-            size="large"
-            @click.stop="closeModal()"
-          ></v-icon>
+
+          <div class="d-flex align-center">
+            <a-reset-size-button @reset="resetModalSize" />
+            <a-close-button @close="closeModal()" />
+          </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',
     };
   },