JandL_gitea/jandl-taskmanager-app
1
0 Fork 0
mirror of https://bitbucket.org/studiotem/jandl-taskmanager-app.git synced 2026-10-21 06:20:21 +00:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Matej Glasnák committed 2026-01-07 09:15:52 +01:00
1 parent 54e12a1713
commit 9c32c0d99f
23 files changed
+416 -178
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

app/src/plugins/tm@dashboard/tasks-concepts/_components/a-concepts-table.vue
+3 -6
View File
@@ -2,9 +2,7 @@
<v-table>
<thead>
<tr>
<th class="text-left">
Kód projektu
</th>
<th class="text-left">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
+42 -36
View File
@@ -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%',
modalHeight: '100%',
modalName: '' // Should be set by component
}
modalWidth: undefined, // Should be set by component
modalHeight: undefined, // 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('resize', this.handleWindowResize)
this.initModalSize()
window.addEventListener('keydown', this.handleKeyDown);
window.addEventListener('resize', this.handleWindowResize);
this.initModalSize();
},
beforeUnmount() {
window.removeEventListener('keydown', this.handleKeyDown)
window.removeEventListener('resize', this.handleWindowResize)
window.removeEventListener('keydown', this.handleKeyDown);
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')
return
console.warn('Modal name not set for resize functionality');
return;
}
const size = modalResizeUtils.getModalSize(this.modalName)
this.modalWidth = typeof size.width === 'number' ? `${size.width}px` : size.width
this.modalHeight = typeof size.height === 'number' ? `${size.height}px` : size.height
const size = modalResizeUtils.getModalSize(
this.modalName,
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.modalHeight = '100%'
this.modalWidth = '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)
this.modalWidth = `${constrained.width}px`
this.modalHeight = `${constrained.height}px`
const constrained = modalResizeUtils.constrainSize(width, height);
this.modalWidth = `${constrained.width}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 height = parseFloat(this.modalHeight)
const width = parseFloat(this.modalWidth);
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)
this.initModalSize()
}
}
}
modalResizeUtils.resetSize(this.modalName);
this.initModalSize();
},
},
};
app/src/plugins/tm@modal/_utils/modal-resize.utils.ts
+90 -61
View File
@@ -1,49 +1,69 @@
interface ModalSize {
width: string | number
height: string | number
width: string | number;
height: string | number;
}
interface StoredModalSize {
width: number
height: number
timestamp: number
width: number;
height: number;
timestamp: number;
}
const MOBILE_BREAKPOINT = 768
const DEFAULT_DESKTOP_WIDTH_PERCENT = 80
const DEFAULT_DESKTOP_MAX_WIDTH = 1440
const DEFAULT_DESKTOP_HEIGHT_PERCENT = 90
const MOBILE_BREAKPOINT = 768;
// Size presets
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 calculatedWidth = Math.min(
(viewportWidth * DEFAULT_DESKTOP_WIDTH_PERCENT) / 100,
DEFAULT_DESKTOP_MAX_WIDTH
)
const calculatedHeight = (window.innerHeight * DEFAULT_DESKTOP_HEIGHT_PERCENT) / 100
const preset = SIZE_PRESETS[size];
// For large size, use percentages; for small/medium use fixed px values
if (size === 'large') {
return {
width: calculatedWidth,
height: calculatedHeight
width: preset.width,
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 stored = localStorage.getItem(key)
const key = `modal-size-${modalName}`;
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)
return null
console.error('Error reading stored modal size:', error);
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()
}
localStorage.setItem(key, JSON.stringify(data))
timestamp: Date.now(),
};
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}`
localStorage.removeItem(key)
const key = `modal-size-${modalName}`;
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 this.getDefaultSize()
// Return default size based on preset
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)
return (window.innerWidth * percent) / 100
const percent = parseFloat(size);
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 } {
const minWidth = 400
const minHeight = 300
const maxWidth = window.innerWidth
const maxHeight = window.innerHeight
constrainSize(
width: number,
height: number,
): { width: number; height: number } {
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
+23 -6
View File
@@ -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
+3 -2
View File
@@ -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
+3 -2
View File
@@ -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
+3 -2
View File
@@ -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
+3 -2
View File
@@ -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
+3 -4
View File
@@ -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
+26 -12
View File
@@ -1,15 +1,23 @@
<template>
<v-dialog v-model="visible" :width="modalWidth" :height="modalHeight" persistent :retain-focus="false" >
<v-card style="position: relative">
<v-dialog
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 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'
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,
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
+27 -6
View File
@@ -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
icon="mdi-close"
size="large"
@click.stop="closeModal()"
></v-icon>
<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">
<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
+42 -15
View File
@@ -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
icon="mdi-close"
size="large"
@click.stop="closeModal()"
></v-icon>
<div class="d-flex align-start">
<a-reset-size-button @reset="resetModalSize" />
<a-close-button @close="closeModal()" />
</div>
</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
icon="mdi-close"
size="large"
class="mb-15"
@click.stop="visible = false"
></v-icon>
<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"
@@ -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
+21 -3
View File
@@ -1,6 +1,12 @@
<template>
<v-dialog v-model="visible" max-width="750" persistent :retain-focus="false">
<v-card style="position: relative">
<v-dialog
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
+21 -3
View File
@@ -1,6 +1,12 @@
<template>
<v-dialog v-model="visible" max-width="750" persistent :retain-focus="false">
<v-card style="position: relative">
<v-dialog
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
+21 -3
View File
@@ -1,10 +1,17 @@
<template>
<v-dialog v-model="visible" max-width="750" persistent :retain-focus="false">
<v-card style="position: relative">
<v-dialog
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
+21 -3
View File
@@ -1,12 +1,19 @@
<template>
<v-dialog v-model="visible" max-width="750" persistent :retain-focus="false">
<v-card style="position: relative">
<v-dialog
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
+21 -3
View File
@@ -1,10 +1,17 @@
<template>
<v-dialog v-model="visible" max-width="750" persistent :retain-focus="false">
<v-card style="position: relative">
<v-dialog
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
+21 -3
View File
@@ -1,10 +1,17 @@
<template>
<v-dialog v-model="visible" max-width="750" persistent :retain-focus="false">
<v-card style="position: relative">
<v-dialog
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
+1
View File
@@ -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
+3 -2
View File
@@ -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
+14 -2
View File
@@ -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
+3 -2
View File
@@ -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
+1
View File
@@ -117,6 +117,7 @@ export default {
employeeSelect: null,
team: null,
modalName: 'z-team-modal',
modalSize: 'medium',
};
},