mirror of
https://bitbucket.org/studiotem/jandl-taskmanager-app.git
synced 2026-10-21 14:29:34 +00:00
feat(modal): enhance modal functionality with resizing support and improved layout
This commit is contained in:
Matej Glasnák committed
1 parent
54e12a1713
commit
9c32c0d99f
23 files changed
+569
-331
No files matched your search
@@ -1,107 +1,113 @@
|
||||
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
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
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
|
||||
},
|
||||
modalHeightPx() {
|
||||
return this.modalHeight
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
modalWidthPx() {
|
||||
return this.modalWidth;
|
||||
},
|
||||
modalHeightPx() {
|
||||
return this.modalHeight;
|
||||
},
|
||||
},
|
||||
|
||||
mounted() {
|
||||
window.addEventListener('keydown', this.handleKeyDown)
|
||||
window.addEventListener('resize', this.handleWindowResize)
|
||||
this.initModalSize()
|
||||
},
|
||||
mounted() {
|
||||
window.addEventListener('keydown', this.handleKeyDown);
|
||||
window.addEventListener('resize', this.handleWindowResize);
|
||||
this.initModalSize();
|
||||
},
|
||||
|
||||
beforeUnmount() {
|
||||
window.removeEventListener('keydown', this.handleKeyDown)
|
||||
window.removeEventListener('resize', this.handleWindowResize)
|
||||
},
|
||||
beforeUnmount() {
|
||||
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
|
||||
},
|
||||
methods: {
|
||||
handleKeyDown(event) {
|
||||
// if (event.keyCode === 27) this.closeModal()
|
||||
if (event.keyCode === 27) this.visible = false;
|
||||
},
|
||||
|
||||
/**
|
||||
* Initialize modal size from localStorage or defaults
|
||||
*/
|
||||
initModalSize() {
|
||||
if (!this.modalName) {
|
||||
console.warn('Modal name not set for resize functionality')
|
||||
return
|
||||
}
|
||||
/**
|
||||
* Initialize modal size from localStorage or defaults
|
||||
*/
|
||||
initModalSize() {
|
||||
if (!this.modalName) {
|
||||
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;
|
||||
},
|
||||
|
||||
/**
|
||||
* Handle window resize - adjust modal if on mobile
|
||||
*/
|
||||
handleWindowResize() {
|
||||
if (modalResizeUtils.isMobile()) {
|
||||
this.modalWidth = '100%'
|
||||
this.modalHeight = '100%'
|
||||
} else {
|
||||
// Reload stored or default size on desktop
|
||||
this.initModalSize()
|
||||
}
|
||||
},
|
||||
/**
|
||||
* Handle window resize - adjust modal if on mobile
|
||||
*/
|
||||
handleWindowResize() {
|
||||
if (modalResizeUtils.isMobile()) {
|
||||
this.modalWidth = '100%';
|
||||
this.modalHeight = '100%';
|
||||
} else {
|
||||
// Reload stored or default size on desktop
|
||||
this.initModalSize();
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Handle modal resize from resize handle
|
||||
*/
|
||||
handleModalResize({ width, height }) {
|
||||
if (modalResizeUtils.isMobile()) {
|
||||
return // Don't resize on mobile
|
||||
}
|
||||
/**
|
||||
* Handle modal resize from resize handle
|
||||
*/
|
||||
handleModalResize({ width, height }) {
|
||||
if (modalResizeUtils.isMobile()) {
|
||||
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`;
|
||||
},
|
||||
|
||||
/**
|
||||
* Handle resize end - save to localStorage
|
||||
*/
|
||||
handleResizeEnd() {
|
||||
if (!this.modalName || modalResizeUtils.isMobile()) {
|
||||
return
|
||||
}
|
||||
/**
|
||||
* Handle resize end - save to localStorage
|
||||
*/
|
||||
handleResizeEnd() {
|
||||
if (!this.modalName || modalResizeUtils.isMobile()) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Parse current dimensions
|
||||
const width = parseFloat(this.modalWidth)
|
||||
const height = parseFloat(this.modalHeight)
|
||||
// Parse current dimensions
|
||||
const width = parseFloat(this.modalWidth);
|
||||
const height = parseFloat(this.modalHeight);
|
||||
|
||||
if (!isNaN(width) && !isNaN(height)) {
|
||||
modalResizeUtils.saveSize(this.modalName, width, height)
|
||||
}
|
||||
},
|
||||
if (!isNaN(width) && !isNaN(height)) {
|
||||
modalResizeUtils.saveSize(this.modalName, width, height);
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Reset modal size to defaults
|
||||
*/
|
||||
resetModalSize() {
|
||||
if (!this.modalName) {
|
||||
return
|
||||
}
|
||||
/**
|
||||
* Reset modal size to defaults
|
||||
*/
|
||||
resetModalSize() {
|
||||
if (!this.modalName) {
|
||||
return;
|
||||
}
|
||||
|
||||
modalResizeUtils.resetSize(this.modalName)
|
||||
this.initModalSize()
|
||||
}
|
||||
}
|
||||
}
|
||||
modalResizeUtils.resetSize(this.modalName);
|
||||
this.initModalSize();
|
||||
},
|
||||
},
|
||||
};
|
||||
@@ -1,162 +1,191 @@
|
||||
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
|
||||
},
|
||||
/**
|
||||
* Check if the current viewport is mobile
|
||||
*/
|
||||
isMobile(): boolean {
|
||||
return window.innerWidth <= MOBILE_BREAKPOINT;
|
||||
},
|
||||
|
||||
/**
|
||||
* Get default modal size based on viewport
|
||||
*/
|
||||
getDefaultSize(): ModalSize {
|
||||
if (this.isMobile()) {
|
||||
return {
|
||||
width: '100%',
|
||||
height: '100%'
|
||||
}
|
||||
}
|
||||
/**
|
||||
* Get default modal size based on viewport and size preset
|
||||
*/
|
||||
getDefaultSize(size: 'small' | 'medium' | 'large' = 'medium'): ModalSize {
|
||||
if (this.isMobile()) {
|
||||
return {
|
||||
width: '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];
|
||||
|
||||
return {
|
||||
width: calculatedWidth,
|
||||
height: calculatedHeight
|
||||
}
|
||||
},
|
||||
// For large size, use percentages; for small/medium use fixed px values
|
||||
if (size === 'large') {
|
||||
return {
|
||||
width: preset.width,
|
||||
height: preset.height,
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* Get stored modal size from localStorage
|
||||
*/
|
||||
getStoredSize(modalName: string): ModalSize | null {
|
||||
try {
|
||||
const key = `modal-size-${modalName}`
|
||||
const stored = localStorage.getItem(key)
|
||||
// For small and medium, return the px values directly
|
||||
return {
|
||||
width: preset.width,
|
||||
height: preset.height,
|
||||
};
|
||||
},
|
||||
|
||||
if (!stored) {
|
||||
return null
|
||||
}
|
||||
/**
|
||||
* Get stored modal size from localStorage
|
||||
*/
|
||||
getStoredSize(modalName: string): ModalSize | null {
|
||||
try {
|
||||
const key = `modal-size-${modalName}`;
|
||||
const stored = localStorage.getItem(key);
|
||||
|
||||
const parsed: StoredModalSize = JSON.parse(stored)
|
||||
if (!stored) {
|
||||
return null;
|
||||
}
|
||||
|
||||
// Return stored size if it exists and is valid
|
||||
if (parsed && typeof parsed.width === 'number' && typeof parsed.height === 'number') {
|
||||
return {
|
||||
width: parsed.width,
|
||||
height: parsed.height
|
||||
}
|
||||
}
|
||||
const parsed: StoredModalSize = JSON.parse(stored);
|
||||
|
||||
return null
|
||||
} catch (error) {
|
||||
console.error('Error reading stored modal size:', error)
|
||||
return null
|
||||
}
|
||||
},
|
||||
// Return stored size if it exists and is valid
|
||||
if (
|
||||
parsed &&
|
||||
typeof parsed.width === 'number' &&
|
||||
typeof parsed.height === 'number'
|
||||
) {
|
||||
return {
|
||||
width: parsed.width,
|
||||
height: parsed.height,
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* Save modal size to localStorage
|
||||
*/
|
||||
saveSize(modalName: string, width: number, height: number): void {
|
||||
try {
|
||||
const key = `modal-size-${modalName}`
|
||||
const data: StoredModalSize = {
|
||||
width,
|
||||
height,
|
||||
timestamp: Date.now()
|
||||
}
|
||||
localStorage.setItem(key, JSON.stringify(data))
|
||||
} catch (error) {
|
||||
console.error('Error saving modal size:', error)
|
||||
}
|
||||
},
|
||||
return null;
|
||||
} catch (error) {
|
||||
console.error('Error reading stored modal size:', error);
|
||||
return null;
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Reset modal size (clear from localStorage)
|
||||
*/
|
||||
resetSize(modalName: string): void {
|
||||
try {
|
||||
const key = `modal-size-${modalName}`
|
||||
localStorage.removeItem(key)
|
||||
} catch (error) {
|
||||
console.error('Error resetting modal size:', error)
|
||||
}
|
||||
},
|
||||
/**
|
||||
* Save modal size to localStorage
|
||||
*/
|
||||
saveSize(modalName: string, width: number, height: number): void {
|
||||
try {
|
||||
const key = `modal-size-${modalName}`;
|
||||
const data: StoredModalSize = {
|
||||
width,
|
||||
height,
|
||||
timestamp: Date.now(),
|
||||
};
|
||||
localStorage.setItem(key, JSON.stringify(data));
|
||||
} catch (error) {
|
||||
console.error('Error saving modal size:', error);
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Get modal size (stored or default)
|
||||
*/
|
||||
getModalSize(modalName: string): ModalSize {
|
||||
// On mobile, always return 100%
|
||||
if (this.isMobile()) {
|
||||
return {
|
||||
width: '100%',
|
||||
height: '100%'
|
||||
}
|
||||
}
|
||||
/**
|
||||
* Reset modal size (clear from localStorage)
|
||||
*/
|
||||
resetSize(modalName: string): void {
|
||||
try {
|
||||
const key = `modal-size-${modalName}`;
|
||||
localStorage.removeItem(key);
|
||||
} catch (error) {
|
||||
console.error('Error resetting modal size:', error);
|
||||
}
|
||||
},
|
||||
|
||||
// Check for stored size
|
||||
const storedSize = this.getStoredSize(modalName)
|
||||
if (storedSize) {
|
||||
return storedSize
|
||||
}
|
||||
/**
|
||||
* Get modal size (stored or default)
|
||||
*/
|
||||
getModalSize(
|
||||
modalName: string,
|
||||
size: 'small' | 'medium' | 'large' = 'medium',
|
||||
): ModalSize {
|
||||
// On mobile, always return 100%
|
||||
if (this.isMobile()) {
|
||||
return {
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
};
|
||||
}
|
||||
|
||||
// Return default size
|
||||
return this.getDefaultSize()
|
||||
},
|
||||
// Check for stored size
|
||||
const storedSize = this.getStoredSize(modalName);
|
||||
if (storedSize) {
|
||||
return storedSize;
|
||||
}
|
||||
|
||||
/**
|
||||
* Convert size to pixels if percentage, otherwise return as is
|
||||
*/
|
||||
normalizeSize(size: string | number): number {
|
||||
if (typeof size === 'number') {
|
||||
return size
|
||||
}
|
||||
// Return default size based on preset
|
||||
return this.getDefaultSize(size);
|
||||
},
|
||||
|
||||
// If it's a percentage, calculate pixel value
|
||||
if (size.includes('%')) {
|
||||
const percent = parseFloat(size)
|
||||
return (window.innerWidth * percent) / 100
|
||||
}
|
||||
/**
|
||||
* Convert size to pixels if percentage, otherwise return as is
|
||||
*/
|
||||
normalizeSize(size: string | number): number {
|
||||
if (typeof size === 'number') {
|
||||
return size;
|
||||
}
|
||||
|
||||
// If it's already pixels, parse it
|
||||
return parseFloat(size)
|
||||
},
|
||||
// If it's a percentage, calculate pixel value
|
||||
if (size.includes('%')) {
|
||||
const percent = parseFloat(size);
|
||||
return (window.innerWidth * percent) / 100;
|
||||
}
|
||||
|
||||
/**
|
||||
* 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
|
||||
// If it's already pixels, parse it
|
||||
return parseFloat(size);
|
||||
},
|
||||
|
||||
return {
|
||||
width: Math.max(minWidth, Math.min(width, maxWidth)),
|
||||
height: Math.max(minHeight, Math.min(height, maxHeight))
|
||||
}
|
||||
}
|
||||
}
|
||||
/**
|
||||
* 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;
|
||||
|
||||
return {
|
||||
width: Math.max(minWidth, Math.min(width, maxWidth)),
|
||||
height: Math.max(minHeight, Math.min(height, maxHeight)),
|
||||
};
|
||||
},
|
||||
};
|
||||
@@ -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',
|
||||
};
|
||||
},
|
||||
|
||||
|
||||
@@ -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',
|
||||
};
|
||||
},
|
||||
|
||||
|
||||
@@ -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',
|
||||
};
|
||||
},
|
||||
|
||||
|
||||
@@ -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',
|
||||
};
|
||||
},
|
||||
|
||||
|
||||
@@ -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',
|
||||
};
|
||||
},
|
||||
|
||||
|
||||
@@ -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',
|
||||
};
|
||||
},
|
||||
|
||||
|
||||
@@ -1,39 +1,52 @@
|
||||
<template>
|
||||
<v-dialog v-model="visible" :width="modalWidth" :height="modalHeight" persistent :retain-focus="false" >
|
||||
<v-card style="position: relative">
|
||||
<div class="d-flex justify-space-between align-center">
|
||||
<h1>Vytvoriť</h1>
|
||||
<div class="d-flex align-center">
|
||||
<a-reset-size-button @reset="resetModalSize" />
|
||||
<a-close-button @close="closeModal()" />
|
||||
</div>
|
||||
</div>
|
||||
<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-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-btn class="button primary half outline" @click.stop="createTask()"
|
||||
>SUB TASK</v-btn
|
||||
>
|
||||
<v-btn class="button primary half outline" @click.stop="createBlocker()"
|
||||
>BLOCKER</v-btn
|
||||
>
|
||||
</v-card-actions>
|
||||
<a-resize-handle :current-width="modalWidthPx" :current-height="modalHeightPx" @resize="handleModalResize" @resize-end="handleResizeEnd" />
|
||||
</v-card>
|
||||
</v-dialog>
|
||||
<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
|
||||
>
|
||||
<v-btn class="button primary half outline" @click.stop="createBlocker()"
|
||||
>BLOCKER</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'
|
||||
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,
|
||||
},
|
||||
components: {
|
||||
AResizeHandle,
|
||||
AResetSizeButton,
|
||||
ACloseButton,
|
||||
},
|
||||
mixins: [modalMixin],
|
||||
props: {
|
||||
data: {
|
||||
@@ -43,13 +56,14 @@ export default {
|
||||
},
|
||||
emits: ['update', 'data'],
|
||||
|
||||
data() {
|
||||
return {
|
||||
visible: false,
|
||||
localData: null,
|
||||
modalName: 'z-show-menu-modal',
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
visible: false,
|
||||
localData: null,
|
||||
modalName: 'z-show-menu-modal',
|
||||
modalSize: 'small',
|
||||
};
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.$events.on('blocker-created', () => {
|
||||
|
||||
@@ -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',
|
||||
};
|
||||
},
|
||||
|
||||
|
||||
@@ -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',
|
||||
};
|
||||
},
|
||||
|
||||
|
||||
@@ -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',
|
||||
};
|
||||
},
|
||||
|
||||
|
||||
@@ -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',
|
||||
};
|
||||
},
|
||||
|
||||
|
||||
@@ -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',
|
||||
};
|
||||
},
|
||||
|
||||
|
||||
@@ -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',
|
||||
};
|
||||
},
|
||||
|
||||
|
||||
@@ -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,
|
||||
};
|
||||
},
|
||||
|
||||
@@ -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',
|
||||
};
|
||||
},
|
||||
|
||||
|
||||
@@ -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,
|
||||
|
||||
@@ -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',
|
||||
};
|
||||
},
|
||||
|
||||
|
||||
@@ -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',
|
||||
};
|
||||
},
|
||||
|
||||
|
||||
@@ -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',
|
||||
};
|
||||
},
|
||||
|
||||
|
||||
@@ -117,6 +117,7 @@ export default {
|
||||
employeeSelect: null,
|
||||
team: null,
|
||||
modalName: 'z-team-modal',
|
||||
modalSize: 'medium',
|
||||
};
|
||||
},
|
||||
|
||||
|
||||
Reference in new issue
Block a user