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

refactor(task-modals): updated timeblocks to new local dat format

Browse Source
This commit is contained in:
Matej Glasnák committed 2025-10-14 18:42:07 +02:00
1 parent eaf83bf0cc
commit 0035251080
8 files changed
+729 -267
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

app/src/plugins/tm@modal/task/_components/_components/a-task-spent-time.vue
+129 -55
View File
@@ -16,18 +16,34 @@
<v-sheet class="py-3">
<div class="d-flex align-center mb-3">
<v-icon @click="showModal = true" class="add-date cursor-pointer mr-2" icon="mdi-plus" size="medium" />
<v-icon
@click="showModal = true"
class="add-date cursor-pointer mr-2"
icon="mdi-plus"
size="medium"
/>
<p class="task-badge rounded-pill">Pridať záznam</p>
</div>
<template v-if="subtask.timesheets.length">
<div v-for="timesheet in subtask.timesheets" :key="timesheet.id" class="d-flex align-center mb-3">
<v-icon @click.stop="deleteTimesheet(timesheet)" class="circle-border cursor-pointer mr-2" icon="mdi-minus" size="medium" />
<div
v-for="timesheet in subtask.timesheets"
:key="timesheet.id"
class="d-flex align-center mb-3"
>
<v-icon
@click.stop="deleteTimesheet(timesheet)"
class="circle-border cursor-pointer mr-2"
icon="mdi-minus"
size="medium"
/>
<div class="d-flex align-center flex-start width-100">
<p class="task-badge rounded-pill">{{ timesheet.time }}</p>
<!-- <p class="ml-5">{{ timesheet.employee_name }} ({{ moment(timesheet.timestamp).format('D.M.YYYY') }})</p> -->
<p class="ml-5">{{ timesheet.employee_name }} ({{ timesheet.timestamp }})</p>
<p class="ml-5">
{{ timesheet.employee_name }} ({{ timesheet.timestamp }})
</p>
</div>
</div>
</template>
@@ -40,10 +56,27 @@
<div class="d-flex justify-space-between align-center">
<h1>Pridať odpracovaný čas</h1>
<v-icon @click.stop="closeModal()" icon="mdi-close" size="large"></v-icon>
<v-icon
@click.stop="closeModal()"
icon="mdi-close"
size="large"
></v-icon>
</div>
<v-card-actions class="mt-10 d-flex justify-start align-center">
<v-text-field v-model="form.hours" variant="solo" bg-color="white" type="number" :hint="v$.form.hours.$errors ? errorUtils.parseErrors(v$.form.hours.$errors) : null" :class="{ error: v$.form.hours.$errors.length }" class="mb-2" label="Odpracovaný čas" />
<v-text-field
v-model="form.hours"
variant="solo"
bg-color="white"
type="number"
:hint="
v$.form.hours.$errors
? errorUtils.parseErrors(v$.form.hours.$errors)
: null
"
:class="{ error: v$.form.hours.$errors.length }"
class="mb-2"
label="Odpracovaný čas"
/>
</v-card-actions>
<v-btn @click="submit()" class="button primary mt-5">Potvrdiť</v-btn>
</v-card>
@@ -51,26 +84,26 @@
</template>
<script>
import moment from 'moment'
import errorUtils from '@/plugins/lib@auth/_utils/error.utils'
import useVuelidate from '@vuelidate/core'
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 moment from 'moment';
import errorUtils from '@/plugins/lib@auth/_utils/error.utils';
import useVuelidate from '@vuelidate/core';
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';
export default {
mixins: [modalMixin],
props: {
hours: {
type: Number,
required: true
required: true,
},
subtask: {
type: Object,
required: true
}
required: true,
},
},
data() {
@@ -80,88 +113,129 @@ export default {
errorUtils,
showModal: false,
form: {
hours: null
}
}
hours: null,
},
};
},
validations() {
return {
form: {
hours: {required, numeric, minValue: minValue(0.1)}
}
}
hours: { required, numeric, minValue: minValue(0.1) },
},
};
},
computed: {
...mapGetters('auth', ['user'])
...mapGetters('auth', ['user']),
},
methods: {
async submit() {
if (!await this.v$.$validate())
return
if (!(await this.v$.$validate())) return;
const subtask = JSON.parse(JSON.stringify(this.subtask))
const subtask = JSON.parse(JSON.stringify(this.subtask));
subtask.timesheets.push({
id: null,
employee_id: this.user.id,
time: typeof this.form.hours == 'string' ? parseFloat(this.form.hours) : this.form.hours
})
time:
typeof this.form.hours == 'string'
? parseFloat(this.form.hours)
: this.form.hours,
});
if(subtask.deadline) subtask.deadline = tmUtils.formatDateTimeForBackend(this._mergeDeadlineTimeDate())
if (subtask.deadline)
subtask.deadline = tmUtils.formatDateTimeForBackend(
this._mergeDeadlineTimeDate(),
);
this._update(subtask)
this._update(subtask);
},
async deleteTimesheet({ id }) {
const subtask = JSON.parse(JSON.stringify(this.subtask))
subtask.timesheets = subtask.timesheets.filter(timesheet => timesheet.id != id)
if(subtask.deadline) subtask.deadline = tmUtils.formatDateTimeForBackend(this._mergeDeadlineTimeDate())
const subtask = JSON.parse(JSON.stringify(this.subtask));
subtask.timesheets = subtask.timesheets.filter(
(timesheet) => timesheet.id != id,
);
if (subtask.deadline)
subtask.deadline = tmUtils.formatDateTimeForBackend(
this._mergeDeadlineTimeDate(),
);
this._update(subtask)
this._update(subtask);
},
closeModal() {
this.form = {
hours: null
}
hours: null,
};
this.showModal = false
this.$nextTick(() => this.v$.$reset())
this.showModal = false;
this.$nextTick(() => this.v$.$reset());
},
async _update(data) {
try {
data.timesheets = data.timesheets.map((timesheet) => {
delete timesheet.employee_name
return timesheet
})
const { subtask } = await this.$axios.put_auth(`v1/subtasks/${data.id}`, data)
const timesheets = data.timesheets.map((timesheet) => {
delete timesheet.employee_name;
return timesheet;
});
this.closeModal()
this.$events.emit('on-subtask-edited', subtask)
// Convert timeblocks from internal format to BE format
const timeblocks = (data.timeblocks || [])
.filter((timeblock) => {
// Filter timeblocks that have either old format (date) or new format (start)
return timeblock.date || timeblock.start;
})
.map((timeblock) => {
// If already in BE format (has start field), return as is
if (timeblock.start && !timeblock.date) {
return {
id: timeblock.id || null,
start: timeblock.start,
end: timeblock.end,
is_finished: timeblock.is_finished || 0,
};
}
// Convert from internal format to BE format
const dateStr = moment(timeblock.date).format('YYYY-MM-DD');
return {
id: timeblock.id || null,
start: `${dateStr} ${timeblock.starts_at_time}:00`,
end: `${dateStr} ${timeblock.ends_at_time}:00`,
is_finished: timeblock.is_finished || 0,
};
});
const { subtask } = await this.$axios.put_auth(
`v1/subtasks/${data.id}`,
{ ...data, timesheets, timeblocks },
);
this.closeModal();
this.$events.emit('on-subtask-edited', subtask);
} catch (error) {
this.$toast.error(error.message || error)
this.$toast.error(error.message || error);
if (process.env.NODE_ENV === 'development')
console.log('[a-task-spent-time.vue] Error: ', error)
console.log('[a-task-spent-time.vue] Error: ', error);
}
},
_mergeDeadlineTimeDate() {
const date = new Date(this.subtask.deadline)
console.log('a-task-spent-time', this.subtask)
const timeParts = this.subtask._deadline_time.split(':')
const date = new Date(this.subtask.deadline);
console.log('a-task-spent-time', this.subtask);
const timeParts = this.subtask._deadline_time.split(':');
date.setHours(parseInt(timeParts[0]))
date.setMinutes(parseInt(timeParts[1]))
date.setHours(parseInt(timeParts[0]));
date.setMinutes(parseInt(timeParts[1]));
return date
return date;
},
}
}
},
};
</script>
<style lang="sass" scoped>
app/src/plugins/tm@modal/task/_components/_components/a-task-timeblocks.vue
+95 -32
View File
@@ -41,10 +41,8 @@
class="task-badge rounded-pill"
:class="{ 'strike-through': timeblock.is_finished }"
>
{{ tmUtils.formatTimeblockDateTime(timeblock) }} -
{{
timeblock.ends_at_time || tmUtils.formatDateTime(timeblock.end)
}}
{{ formatTimeblockStart(timeblock) }} -
{{ formatTimeblockEnd(timeblock) }}
</p>
<v-icon
v-if="!isOffice365Task"
@@ -212,20 +210,35 @@ export default {
},
methods: {
formatTimeblockStart(timeblock) {
// Handle internal format with date and time fields
if (timeblock.date && timeblock.starts_at_time) {
const dateStr = moment(timeblock.date).format('DD.MM.yyyy');
return `${dateStr}, ${timeblock.starts_at_time}`;
}
// Fallback to backend format
if (timeblock.start) {
return tmUtils.formatDateTime(timeblock.start);
}
return '';
},
formatTimeblockEnd(timeblock) {
// Handle internal format with date and time fields
if (timeblock.date && timeblock.ends_at_time) {
return timeblock.ends_at_time;
}
// Fallback to backend format
if (timeblock.end) {
return tmUtils.formatDateTime(timeblock.end);
}
return '';
},
async submit() {
if (!(await this.v$.$validate())) return;
const subtask = JSON.parse(JSON.stringify(this.subtask));
const splittedStartsAtTime = this.form.starts_at_time.split(':');
const splittedEndsAtTime = this.form.ends_at_time.split(':');
const start = moment(this.form.date)
.hours(parseInt(splittedStartsAtTime[0]))
.minutes(parseInt(splittedStartsAtTime[1]))
.toISOString();
const end = moment(this.form.date)
.hours(parseInt(splittedEndsAtTime[0]))
.minutes(parseInt(splittedEndsAtTime[1]))
.toISOString();
if (!subtask?.timeblocks) {
subtask.timeblocks = [];
@@ -237,11 +250,13 @@ export default {
subtask.is_finished = 0;
}
// Add timeblock in internal format
subtask.timeblocks.push({
end: tmUtils.formatDateTimeForBackend(end),
id: null,
date: this.form.date,
starts_at_time: this.form.starts_at_time,
ends_at_time: this.form.ends_at_time,
is_finished: 0,
start: tmUtils.formatDateTimeForBackend(start),
});
if (subtask.deadline)
@@ -256,6 +271,7 @@ export default {
} else {
if (!subtask.id) {
this.$emit('update-unfinished-subtask', subtask);
this.closeModal();
} else {
this._update(subtask);
}
@@ -264,16 +280,6 @@ export default {
async confirmSubmit() {
const subtask = JSON.parse(JSON.stringify(this.subtask));
const splittedStartsAtTime = this.form.starts_at_time.split(':');
const splittedEndsAtTime = this.form.ends_at_time.split(':');
const start = moment(this.form.date)
.hours(parseInt(splittedStartsAtTime[0]))
.minutes(parseInt(splittedStartsAtTime[1]))
.toISOString();
const end = moment(this.form.date)
.hours(parseInt(splittedEndsAtTime[0]))
.minutes(parseInt(splittedEndsAtTime[1]))
.toISOString();
if (!subtask?.timeblocks) {
subtask.timeblocks = [];
@@ -285,11 +291,13 @@ export default {
subtask.is_finished = 0;
}
// Add timeblock in internal format
subtask.timeblocks.push({
end: tmUtils.formatDateTimeForBackend(end),
id: null,
date: this.form.date,
starts_at_time: this.form.starts_at_time,
ends_at_time: this.form.ends_at_time,
is_finished: 0,
start: tmUtils.formatDateTimeForBackend(start),
});
if (subtask.deadline)
@@ -309,20 +317,48 @@ export default {
async toggleTimeblockIsFinished(originalTimeblock) {
// TODO: Pridat odpracovany cas modal?
console.log('toggleTimeblockIsFinished 5', this.subtask);
const subtask = JSON.parse(JSON.stringify(this.subtask));
const timeblock = JSON.parse(JSON.stringify(originalTimeblock));
timeblock.is_finished = timeblock.is_finished == 1 ? 0 : 1;
try {
// Convert timeblock to backend format before sending
const timeblockForBackend = {
id: timeblock.id,
is_finished: timeblock.is_finished,
};
// If timeblock is in internal format, convert it
if (timeblock.date) {
const dateStr = moment(timeblock.date).format('YYYY-MM-DD');
timeblockForBackend.start = `${dateStr} ${timeblock.starts_at_time}:00`;
timeblockForBackend.end = `${dateStr} ${timeblock.ends_at_time}:00`;
} else {
// Already in backend format
timeblockForBackend.start = timeblock.start;
timeblockForBackend.end = timeblock.end;
}
const { data: newTimeblock } = await this.$axios.put_auth(
`v1/timeblocks/${timeblock.id}`,
timeblock,
timeblockForBackend,
);
// Convert returned timeblock from backend format to internal format
const startMoment = moment(newTimeblock.start, 'YYYY-MM-DD HH:mm:ss');
const endMoment = moment(newTimeblock.end, 'YYYY-MM-DD HH:mm:ss');
const convertedTimeblock = {
id: newTimeblock.id,
date: startMoment.toDate(),
starts_at_time: startMoment.format('HH:mm'),
ends_at_time: endMoment.format('HH:mm'),
is_finished: newTimeblock.is_finished,
};
subtask.timeblocks = subtask.timeblocks.map((originalTimeblock) => {
if (originalTimeblock.id == newTimeblock.id) return newTimeblock;
if (originalTimeblock.id == convertedTimeblock.id)
return convertedTimeblock;
return originalTimeblock;
});
@@ -365,9 +401,36 @@ export default {
return timesheet;
});
// Convert timeblocks from internal format to BE format
const timeblocks = (data.timeblocks || [])
.filter((timeblock) => {
// Filter timeblocks that have either old format (date) or new format (start)
return timeblock.date || timeblock.start;
})
.map((timeblock) => {
// If already in BE format (has start field), return as is
if (timeblock.start && !timeblock.date) {
return {
id: timeblock.id || null,
start: timeblock.start,
end: timeblock.end,
is_finished: timeblock.is_finished || 0,
};
}
// Convert from internal format to BE format
const dateStr = moment(timeblock.date).format('YYYY-MM-DD');
return {
id: timeblock.id || null,
start: `${dateStr} ${timeblock.starts_at_time}:00`,
end: `${dateStr} ${timeblock.ends_at_time}:00`,
is_finished: timeblock.is_finished || 0,
};
});
const { subtask } = await this.$axios.put_auth(
`v1/subtasks/${data.id}`,
{ ...data, timesheets },
{ ...data, timesheets, timeblocks },
);
this.closeModal();
app/src/plugins/tm@modal/task/z-complete-task-modal.vue
+73 -22
View File
@@ -2,23 +2,36 @@
<v-dialog v-model="visible" max-width="750" persistent>
<v-card>
<div class="d-flex justify-space-between align-center">
<h1>Ste si istý, že chcete {{ subtask.is_finished ? 'znovu otvoriť' : 'dokončiť' }} sub task, z mastertasku <b>{{ subtask?.master_task?.name || subtask.master_task }}</b>?</h1>
<h1>
Ste si istý, že chcete
{{ subtask.is_finished ? 'znovu otvoriť' : 'dokončiť' }} sub task, z
mastertasku
<b>{{ subtask?.master_task?.name || subtask.master_task }}</b
>?
</h1>
<v-icon
@click.stop="closeModal()"
icon="mdi-close"
size="large"
></v-icon>
</div>
<v-card-actions class="mt-10 d-flex justify-start align-center mobile-view">
<v-btn class="button primary half" variant="flat" @click="complete()">ÁNO</v-btn>
<v-btn class="button primary half outline" @click.stop="visible = false">ZRUŠIŤ</v-btn>
<v-card-actions
class="mt-10 d-flex justify-start align-center mobile-view"
>
<v-btn class="button primary half" variant="flat" @click="complete()"
>ÁNO</v-btn
>
<v-btn class="button primary half outline" @click.stop="visible = false"
>ZRUŠIŤ</v-btn
>
</v-card-actions>
</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 moment from 'moment';
export default {
mixins: [modalMixin],
@@ -27,37 +40,75 @@ export default {
data() {
return {
visible: false,
subtask: null
}
subtask: null,
};
},
methods: {
async showModal({ subtask }) {
this.subtask = subtask
this.visible = true
this.subtask = subtask;
this.visible = true;
},
async complete() {
try {
const tempSubtask = {...this.subtask, is_finished: this.subtask.is_finished ? 0 : 1, timesheets: this.subtask.timesheets.map((timesheet) => {
delete timesheet.employee_name
return timesheet
})}
const { subtask } = await this.$axios.put_auth(`v1/subtasks/${tempSubtask.id}`, tempSubtask)
const timesheets = this.subtask.timesheets.map((timesheet) => {
delete timesheet.employee_name;
return timesheet;
});
this.visible = false
this.$emit('on-subtask-edited', subtask)
// Convert timeblocks from internal format to BE format
const timeblocks = (this.subtask.timeblocks || [])
.filter((timeblock) => {
// Filter timeblocks that have either old format (date) or new format (start)
return timeblock.date || timeblock.start;
})
.map((timeblock) => {
// If already in BE format (has start field), return as is
if (timeblock.start && !timeblock.date) {
return {
id: timeblock.id || null,
start: timeblock.start,
end: timeblock.end,
is_finished: timeblock.is_finished || 0,
};
}
// Convert from internal format to BE format
const dateStr = moment(timeblock.date).format('YYYY-MM-DD');
return {
id: timeblock.id || null,
start: `${dateStr} ${timeblock.starts_at_time}:00`,
end: `${dateStr} ${timeblock.ends_at_time}:00`,
is_finished: timeblock.is_finished || 0,
};
});
const tempSubtask = {
...this.subtask,
is_finished: this.subtask.is_finished ? 0 : 1,
timesheets,
timeblocks,
};
const { subtask } = await this.$axios.put_auth(
`v1/subtasks/${tempSubtask.id}`,
tempSubtask,
);
this.visible = false;
this.$emit('on-subtask-edited', subtask);
} catch (error) {
this.$toast.error(this.$parseError(error))
this.$toast.error(this.$parseError(error));
if (process.env.NODE_ENV === 'development')
console.log('[z-complete-task-modal.vue] Error: ', error)
console.log('[z-complete-task-modal.vue] Error: ', error);
}
},
closeModal() {
this.visible = false
}
}
}
this.visible = false;
},
},
};
</script>
app/src/plugins/tm@modal/task/z-delete-timeblock-modal.vue
+77 -24
View File
@@ -10,17 +10,37 @@
size="large"
></v-icon>
</div>
<div v-for="(timeblock, index) in subtask.timeblocks" :key="timeblock.id" class="d-flex align-center justify-center mb-3 mt-3">
<p class="task-badge rounded-pill" :class="{'strike-through': timeblock.is_finished}">{{ tmUtils.formatDateTime(timeblock.start) }} - {{ tmUtils.formatDateTime(timeblock.end) }}</p>
<v-icon @click.stop="subtask.id ? deleteTimeblock(timeblock) : deleteTimeblockWithoutId(index)" class="close-icon circle-border cursor-pointer ml-3 text-red" icon="mdi-close" size="medium" />
<div
v-for="(timeblock, index) in subtask.timeblocks"
:key="timeblock.id"
class="d-flex align-center justify-center mb-3 mt-3"
>
<p
class="task-badge rounded-pill"
:class="{ 'strike-through': timeblock.is_finished }"
>
{{ tmUtils.formatDateTime(timeblock.start) }} -
{{ tmUtils.formatDateTime(timeblock.end) }}
</p>
<v-icon
@click.stop="
subtask.id
? deleteTimeblock(timeblock)
: deleteTimeblockWithoutId(index)
"
class="close-icon circle-border cursor-pointer ml-3 text-red"
icon="mdi-close"
size="medium"
/>
</div>
</v-card>
</v-dialog>
</template>
<script>
import modalMixin from '@/plugins/tm@modal/_mixins/modal.mixin'
import tmUtils from '@/plugins/tm@_utils/tm.utils'
import modalMixin from '@/plugins/tm@modal/_mixins/modal.mixin';
import tmUtils from '@/plugins/tm@_utils/tm.utils';
import moment from 'moment';
export default {
mixins: [modalMixin],
@@ -31,52 +51,85 @@ export default {
visible: false,
subtask: null,
isDeleting: false,
tmUtils
}
tmUtils,
};
},
methods: {
async showModal({ subtask }) {
this.subtask = subtask
this.visible = true
this.subtask = subtask;
this.visible = true;
},
closeModal() {
this.visible = false
this.visible = false;
},
async deleteTimeblock({ id }) {
const subtask = JSON.parse(JSON.stringify(this.subtask))
subtask.timeblocks = subtask.timeblocks.filter(timeblock => timeblock.id != id)
if(subtask.deadline) subtask.deadline = tmUtils.formatDateTimeForBackend(subtask.deadline)
const subtask = JSON.parse(JSON.stringify(this.subtask));
subtask.timeblocks = subtask.timeblocks.filter(
(timeblock) => timeblock.id != id,
);
if (subtask.deadline)
subtask.deadline = tmUtils.formatDateTimeForBackend(subtask.deadline);
this._update(subtask)
this._update(subtask);
},
deleteTimeblockWithoutId(i) {
this.$emit('delete-timeblock')
this.$emit('delete-timeblock');
},
async _update(data) {
try {
const timesheets = data.timesheets.map((timesheet) => {
delete timesheet.employee_name
return timesheet
delete timesheet.employee_name;
return timesheet;
});
// Convert timeblocks from internal format to BE format
const timeblocks = (data.timeblocks || [])
.filter((timeblock) => {
// Filter timeblocks that have either old format (date) or new format (start)
return timeblock.date || timeblock.start;
})
.map((timeblock) => {
// If already in BE format (has start field), return as is
if (timeblock.start && !timeblock.date) {
return {
id: timeblock.id || null,
start: timeblock.start,
end: timeblock.end,
is_finished: timeblock.is_finished || 0,
};
}
const { subtask } = await this.$axios.put_auth(`v1/subtasks/${data.id}`, {...data, timesheets})
// Convert from internal format to BE format
const dateStr = moment(timeblock.date).format('YYYY-MM-DD');
return {
id: timeblock.id || null,
start: `${dateStr} ${timeblock.starts_at_time}:00`,
end: `${dateStr} ${timeblock.ends_at_time}:00`,
is_finished: timeblock.is_finished || 0,
};
});
this.closeModal()
this.$events.emit('on-subtask-edited', subtask)
const { subtask } = await this.$axios.put_auth(
`v1/subtasks/${data.id}`,
{ ...data, timesheets, timeblocks },
);
this.closeModal();
this.$events.emit('on-subtask-edited', subtask);
} catch (error) {
this.$toast.error(error.message || error)
this.$toast.error(error.message || error);
if (process.env.NODE_ENV === 'development')
console.log('[z-delete-timeblock-modal.vue] Error: ', error)
console.log('[z-delete-timeblock-modal.vue] Error: ', error);
}
},
}
}
},
};
</script>
<style lang="sass" scoped>
app/src/plugins/tm@modal/task/z-task-add-time-modal.vue
+92 -36
View File
@@ -4,10 +4,27 @@
<div class="d-flex justify-space-between align-center">
<h1>Pridať odpracovaný čas</h1>
<v-icon @click.stop="closeModal()" icon="mdi-close" size="large"></v-icon>
<v-icon
@click.stop="closeModal()"
icon="mdi-close"
size="large"
></v-icon>
</div>
<v-card-actions class="mt-10 d-flex justify-start align-center">
<v-text-field v-model="form.hours" variant="solo" bg-color="white" type="number" :hint="v$.form.hours.$errors ? errorUtils.parseErrors(v$.form.hours.$errors) : null" :class="{ error: v$.form.hours.$errors.length }" class="mb-2" label="Odpracovaný čas" />
<v-text-field
v-model="form.hours"
variant="solo"
bg-color="white"
type="number"
:hint="
v$.form.hours.$errors
? errorUtils.parseErrors(v$.form.hours.$errors)
: null
"
:class="{ error: v$.form.hours.$errors.length }"
class="mb-2"
label="Odpracovaný čas"
/>
</v-card-actions>
<v-btn @click="submit()" class="button primary mt-5">Potvrdiť</v-btn>
</v-card>
@@ -15,11 +32,12 @@
</template>
<script>
import errorUtils from '@/plugins/lib@auth/_utils/error.utils'
import useVuelidate from '@vuelidate/core'
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 errorUtils from '@/plugins/lib@auth/_utils/error.utils';
import useVuelidate from '@vuelidate/core';
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';
export default {
mixins: [modalMixin],
@@ -32,64 +50,102 @@ export default {
visible: false,
subtask: null,
form: {
hours: null
}
}
hours: null,
},
};
},
validations() {
return {
form: {
hours: {required, numeric, minValue: minValue(0.1)}
}
}
hours: { required, numeric, minValue: minValue(0.1) },
},
};
},
methods: {
async showModal({ subtask }) {
this.subtask = subtask
this.visible = true
this.form.hours = null
this.$nextTick(() => this.v$.$reset())
this.subtask = subtask;
this.visible = true;
this.form.hours = null;
this.$nextTick(() => this.v$.$reset());
},
async submit() {
if (!await this.v$.$validate())
return
if (!(await this.v$.$validate())) return;
if (this.subtask.deadline) this.subtask.deadline = tmUtils.formatDateTimeForBackend(this.subtask.deadline)
if (this.subtask.deadline)
this.subtask.deadline = tmUtils.formatDateTimeForBackend(
this.subtask.deadline,
);
this.subtask.timesheets.push({
id: null,
employee_id: this.subtask.employee_id,
time: typeof this.form.hours == 'string' ? parseFloat(this.form.hours) : this.form.hours
time:
typeof this.form.hours == 'string'
? parseFloat(this.form.hours)
: this.form.hours,
});
const timesheets = this.subtask.timesheets.map((timesheet) => {
delete timesheet.employee_name;
return timesheet;
});
// Convert timeblocks from internal format to BE format
const timeblocks = (this.subtask.timeblocks || [])
.filter((timeblock) => {
// Filter timeblocks that have either old format (date) or new format (start)
return timeblock.date || timeblock.start;
})
.map((timeblock) => {
// If already in BE format (has start field), return as is
if (timeblock.start && !timeblock.date) {
return {
id: timeblock.id || null,
start: timeblock.start,
end: timeblock.end,
is_finished: timeblock.is_finished || 0,
};
}
// Convert from internal format to BE format
const dateStr = moment(timeblock.date).format('YYYY-MM-DD');
return {
id: timeblock.id || null,
start: `${dateStr} ${timeblock.starts_at_time}:00`,
end: `${dateStr} ${timeblock.ends_at_time}:00`,
is_finished: timeblock.is_finished || 0,
};
});
const payload = {
...this.subtask,
timesheets: this.subtask.timesheets.map((timesheet) => {
delete timesheet.employee_name
return timesheet
})
}
timesheets,
timeblocks,
};
try {
const { subtask } = await this.$axios.put_auth(`v1/subtasks/${this.subtask.id}`, payload)
const { subtask } = await this.$axios.put_auth(
`v1/subtasks/${this.subtask.id}`,
payload,
);
this.closeModal()
this.$events.emit('on-subtask-edited', subtask)
this.closeModal();
this.$events.emit('on-subtask-edited', subtask);
} catch (error) {
this.$toast.error(error.message || error)
this.$toast.error(error.message || error);
if (process.env.NODE_ENV === 'development')
console.log('[z-task-add-time-modal.vue] Error: ', error)
console.log('[z-task-add-time-modal.vue] Error: ', error);
}
},
closeModal() {
this.visible = false
this.v$.$reset()
}
}
}
this.visible = false;
this.v$.$reset();
},
},
};
</script>
app/src/plugins/tm@modal/task/z-task-modal.vue
+28 -2
View File
@@ -248,7 +248,7 @@
:on-input-focus="onInputFocus"
:on-date-open="onDateOpen"
/>
<div class="end-button w-100">
<div class="end-button w-100" v-if="!subtask.id">
<button @click="addTimeblock">Pridať časový blok</button>
</div>
</div>
@@ -466,10 +466,36 @@ export default {
data.deadline = splittedDeadline[0];
data._deadline_time = splittedDeadline[1];
// Convert BE format timeblocks to internal format
const convertedTimeblocks = [];
if (data.timeblocks && data.timeblocks.length > 0) {
data.timeblocks.forEach((timeblock) => {
// If already in internal format, keep as is
if (timeblock.date) {
convertedTimeblocks.push(timeblock);
return;
}
// Convert from BE format to internal format
if (timeblock.start && timeblock.end) {
const startMoment = moment(timeblock.start, 'YYYY-MM-DD HH:mm:ss');
const endMoment = moment(timeblock.end, 'YYYY-MM-DD HH:mm:ss');
convertedTimeblocks.push({
id: timeblock.id || null,
date: startMoment.toDate(),
starts_at_time: startMoment.format('HH:mm'),
ends_at_time: endMoment.format('HH:mm'),
is_finished: timeblock.is_finished || 0,
});
}
});
}
data.timeblocks = convertedTimeblocks;
this.subtask = this._enrichTask(data);
// TODO: Remove? riesil som neodstranovanie jedineho zanamu v trvani a odpracovanom case
console.log('2', this.subtask);
this.$forceUpdate();
});
app/src/plugins/tm@modal/task/z-unable-to-complete-task-modal.vue
+115 -48
View File
@@ -12,23 +12,48 @@
</div>
<div class="card-content">
<div v-for="(timeblock) in subtask?.timeblocks" :key="timeblock.id" class="d-flex align-center mb-3">
<p class="task-badge rounded-pill" :class="{'strike-through': timeblock.is_finished}">{{ tmUtils.formatDateTime(timeblock.start) }} - {{ tmUtils.formatDateTime(timeblock.end) }}</p>
<v-icon @click.stop="handleFinishTimeblock(timeblock)" class="finish-icon circle-border cursor-pointer ml-2" :class="{'disabled': loadingTimeblocks[timeblock.id] || loadingCloseAll, 'finished': timeblock.is_finished}" icon="mdi-check" size="medium" />
<div
v-for="timeblock in subtask?.timeblocks"
:key="timeblock.id"
class="d-flex align-center mb-3"
>
<p
class="task-badge rounded-pill"
:class="{ 'strike-through': timeblock.is_finished }"
>
{{ tmUtils.formatDateTime(timeblock.start) }} -
{{ tmUtils.formatDateTime(timeblock.end) }}
</p>
<v-icon
@click.stop="handleFinishTimeblock(timeblock)"
class="finish-icon circle-border cursor-pointer ml-2"
:class="{
disabled: loadingTimeblocks[timeblock.id] || loadingCloseAll,
finished: timeblock.is_finished,
}"
icon="mdi-check"
size="medium"
/>
</div>
</div>
<div class="card-actions">
<v-btn @click="closeModal()" class="button secondary">Zrušiť</v-btn>
<v-btn @click="handleFinishAllTimeblocks()" :loading="loadingCloseAll" class="button primary">Uzatvoriť všetky</v-btn>
<v-btn
@click="handleFinishAllTimeblocks()"
:loading="loadingCloseAll"
class="button primary"
>Uzatvoriť všetky</v-btn
>
</div>
</v-card>
</v-dialog>
</template>
<script>
import modalMixin from '@/plugins/tm@modal/_mixins/modal.mixin'
import tmUtils from '@/plugins/tm@_utils/tm.utils'
import modalMixin from '@/plugins/tm@modal/_mixins/modal.mixin';
import tmUtils from '@/plugins/tm@_utils/tm.utils';
import moment from 'moment';
export default {
mixins: [modalMixin],
@@ -37,8 +62,8 @@ export default {
props: {
mode: {
type: String,
default: 'edit' // edit or delete
}
default: 'edit', // edit or delete
},
},
data() {
@@ -47,88 +72,130 @@ export default {
visible: false,
subtask: null,
loadingTimeblocks: {},
loadingCloseAll: false
}
loadingCloseAll: false,
};
},
methods: {
async showModal({ subtask }) {
this.subtask = subtask
this.visible = true
this.subtask = subtask;
this.visible = true;
},
async complete() {
console.log('complete')
console.log('complete');
},
closeModal() {
this.visible = false
this.visible = false;
},
async handleFinishTimeblock(timeblock) {
const subtask = JSON.parse(JSON.stringify(this.subtask))
const subtask = JSON.parse(JSON.stringify(this.subtask));
try {
this.loadingTimeblocks[timeblock.id] = true
await this.$axios.put_auth(`v1/timeblocks/${timeblock.id}`, {...timeblock, is_finished: 1})
timeblock.is_finished = 1
this.loadingTimeblocks[timeblock.id] = true;
await this.$axios.put_auth(`v1/timeblocks/${timeblock.id}`, {
...timeblock,
is_finished: 1,
});
timeblock.is_finished = 1;
const areAllTimeblocksFinished = subtask.timeblocks.every(timeblock => timeblock.is_finished)
const areAllTimeblocksFinished = subtask.timeblocks.every(
(timeblock) => timeblock.is_finished,
);
if (areAllTimeblocksFinished) {
await this._finishSubtask()
this.$store.dispatch('tm/removeOngoingSubtask', this.subtask.id)
await this._finishSubtask();
this.$store.dispatch('tm/removeOngoingSubtask', this.subtask.id);
}
this.$events.emit('on-subtask-edited', subtask)
this.closeModal()
this.$events.emit('on-subtask-edited', subtask);
this.closeModal();
} catch (error) {
this.$toast.error(error.message || error)
this.$toast.error(error.message || error);
if (process.env.NODE_ENV === 'development')
console.log('[a-task-timeblocks.vue] Error: ', error)
console.log('[a-task-timeblocks.vue] Error: ', error);
} finally {
this.loadingTimeblocks[timeblock.id] = false
this.loadingTimeblocks[timeblock.id] = false;
}
},
async handleFinishAllTimeblocks() {
this.loadingCloseAll = true
this.loadingCloseAll = true;
try {
const promises = this.subtask.timeblocks.map(timeblock => {
return this.$axios.put_auth(`v1/timeblocks/${timeblock.id}`, {...timeblock, is_finished: 1})
})
const promises = this.subtask.timeblocks.map((timeblock) => {
return this.$axios.put_auth(`v1/timeblocks/${timeblock.id}`, {
...timeblock,
is_finished: 1,
});
});
await Promise.all(promises)
await Promise.all(promises);
this.subtask.timeblocks = this.subtask.timeblocks.map(timeblock => {
timeblock.is_finished = 1
return timeblock
})
this.subtask.timeblocks = this.subtask.timeblocks.map((timeblock) => {
timeblock.is_finished = 1;
return timeblock;
});
await this._finishSubtask()
await this._finishSubtask();
this.$store.dispatch('tm/removeOngoingSubtask', this.subtask.id)
this.$events.emit('on-subtask-edited', this.subtask)
this.closeModal()
this.$store.dispatch('tm/removeOngoingSubtask', this.subtask.id);
this.$events.emit('on-subtask-edited', this.subtask);
this.closeModal();
} catch (error) {
this.$toast.error(error.message || error)
this.$toast.error(error.message || error);
} finally {
this.loadingCloseAll = false
this.loadingCloseAll = false;
}
},
async _finishSubtask() {
const tempSubtask = {...this.subtask, is_finished: 1, timesheets: this.subtask.timesheets.map((timesheet) => {
delete timesheet.employee_name
return timesheet
})}
const timesheets = this.subtask.timesheets.map((timesheet) => {
delete timesheet.employee_name;
return timesheet;
});
return this.$axios.put_auth(`v1/subtasks/${tempSubtask.id}`, tempSubtask)
}
}
// Convert timeblocks from internal format to BE format
const timeblocks = (this.subtask.timeblocks || [])
.filter((timeblock) => {
// Filter timeblocks that have either old format (date) or new format (start)
return timeblock.date || timeblock.start;
})
.map((timeblock) => {
// If already in BE format (has start field), return as is
if (timeblock.start && !timeblock.date) {
return {
id: timeblock.id || null,
start: timeblock.start,
end: timeblock.end,
is_finished: timeblock.is_finished || 0,
};
}
// Convert from internal format to BE format
const dateStr = moment(timeblock.date).format('YYYY-MM-DD');
return {
id: timeblock.id || null,
start: `${dateStr} ${timeblock.starts_at_time}:00`,
end: `${dateStr} ${timeblock.ends_at_time}:00`,
is_finished: timeblock.is_finished || 0,
};
});
const tempSubtask = {
...this.subtask,
is_finished: 1,
timesheets,
timeblocks,
};
return this.$axios.put_auth(`v1/subtasks/${tempSubtask.id}`, tempSubtask);
},
},
};
</script>
<style lang="scss" scoped>
app/src/plugins/tm@overview/tasks-ongoing/_components/a-ongoing-table.vue
+120 -48
View File
@@ -2,7 +2,9 @@
<v-table>
<thead>
<tr>
<th @click="getSelectedTimeblockDeadline" class="text-left">Kód projektu</th>
<th @click="getSelectedTimeblockDeadline" 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>
@@ -13,13 +15,20 @@
</thead>
<tbody>
<tr class="cursor-pointer" v-for="subtask in subtasks" :key="subtask.id" @click.stop="editTask(subtask, false)">
<tr
class="cursor-pointer"
v-for="subtask in subtasks"
:key="subtask.id"
@click.stop="editTask(subtask, false)"
>
<td>{{ subtask.project_code }}</td>
<td>{{ subtask.title ?? subtask.master_task }}</td>
<td v-if="subtask.deadline">{{ getDeadline(subtask) }}</td>
<v-tooltip text="Deadline z Mastertasku" location="end">
<template v-slot:activator="{ props }">
<td v-if="!subtask.deadline" v-bind="props">{{ getDeadline(subtask) }}*</td>
<td v-if="!subtask.deadline" v-bind="props">
{{ getDeadline(subtask) }}*
</td>
</template>
</v-tooltip>
<td>{{ displayTimeblock(subtask) }}</td>
@@ -28,38 +37,53 @@
<td class="task-action">
<div class="d-flex justify-start align-center">
<img class="pencil-icon mr-3" :class="{'disabled': loadingSubtask[subtask.id]}" :src="checkmarkDouble" @click.stop="handleCompleteTask(subtask)">
<img
class="pencil-icon mr-3"
:class="{ disabled: loadingSubtask[subtask.id] }"
:src="checkmarkDouble"
@click.stop="handleCompleteTask(subtask)"
/>
<template v-if="subtask.type == 'office365'">
<img class="pencil-icon" :src="eye" @click.stop="editTask(subtask, false)">
<img
class="pencil-icon"
:src="eye"
@click.stop="editTask(subtask, false)"
/>
<img class="office-icon" :src="office365" />
</template>
<template v-else>
<img class="pencil-icon" :src="eye" @click.stop="editTask(subtask, false)">
<img class="trash-icon" :src="bin" @click.stop="deleteTask(subtask)" />
<img
class="pencil-icon"
:src="eye"
@click.stop="editTask(subtask, false)"
/>
<img
class="trash-icon"
:src="bin"
@click.stop="deleteTask(subtask)"
/>
</template>
</div>
</td>
</tr>
</tbody>
</v-table>
</template>
<script>
import { bin, eye, office365, checkmarkDouble } from '@/plugins/app/_img'
import { bin, eye, office365, checkmarkDouble } from '@/plugins/app/_img';
import { mapGetters } from 'vuex'
import moment from 'moment'
import { mapGetters } from 'vuex';
import moment from 'moment';
export default {
props: {
subtasks: {
type: Array,
required: true
}
required: true,
},
},
data() {
@@ -68,87 +92,135 @@ export default {
bin,
office365,
checkmarkDouble,
loadingSubtask: {}
}
loadingSubtask: {},
};
},
computed: {
...mapGetters('tm', ['mastertasks'])
...mapGetters('tm', ['mastertasks']),
},
methods: {
editTask(subtask, editMode = false) {
this.$events.emit('show-subtask-modal', {subtask, editMode})
this.$events.emit('show-subtask-modal', { subtask, editMode });
},
async handleCompleteTask(subtask) {
const areAllTimeBlocksFinished = subtask.timeblocks.every(tb => tb.is_finished)
const areAllTimeBlocksFinished = subtask.timeblocks.every(
(tb) => tb.is_finished,
);
if (!areAllTimeBlocksFinished) {
this.$events.emit('show-unable-to-complete-task-modal', { subtask })
this.$events.emit('show-unable-to-complete-task-modal', { subtask });
} else {
await this._finishSubtask(subtask)
await this._finishSubtask(subtask);
}
},
deleteTask(subtask) {
if (subtask.type == 'office365')
return this.$events.emit('show-unable-to-edit-office-task-modal', { mode: 'delete' })
return this.$events.emit('show-unable-to-edit-office-task-modal', {
mode: 'delete',
});
this.$events.emit('show-delete-task-modal', {subtask})
this.$events.emit('show-delete-task-modal', { subtask });
},
getDeadline(subtask) {
if (subtask?.deadline)
return moment(subtask.deadline).format('DD.MM.yyyy')
return moment(subtask.deadline).format('DD.MM.yyyy');
return moment(subtask.master_task_deadline).format('DD.MM.yyyy')
return moment(subtask.master_task_deadline).format('DD.MM.yyyy');
},
getSelectedTimeblockDeadline(timeblocks) {
const currentDate = moment()
const currentDate = moment();
const unfinishedTimeblocks = timeblocks.filter(tb => tb.is_finished === 0)
if (unfinishedTimeblocks.length > 0) return moment(unfinishedTimeblocks[0].end).format('DD.MM.yyyy, HH:mm')
const unfinishedTimeblocks = timeblocks.filter(
(tb) => tb.is_finished === 0,
);
if (unfinishedTimeblocks.length > 0)
return moment(unfinishedTimeblocks[0].end).format('DD.MM.yyyy, HH:mm');
const upcomingTimeblocks = timeblocks
.filter(tb => moment(tb.end).isAfter(currentDate))
.sort((a, b) => moment(a.end).diff(moment(b.end)))
.filter((tb) => moment(tb.end).isAfter(currentDate))
.sort((a, b) => moment(a.end).diff(moment(b.end)));
if (upcomingTimeblocks.length > 0 && upcomingTimeblocks.is_finished === 0) return moment(upcomingTimeblocks[0].end).format('DD.MM.yyyy, HH:mm')
if (upcomingTimeblocks.length > 0 && upcomingTimeblocks.is_finished === 0)
return moment(upcomingTimeblocks[0].end).format('DD.MM.yyyy, HH:mm');
return ''
return '';
},
displayTimeblock(subtask) {
const timeblockDeadline = this.getSelectedTimeblockDeadline(subtask.timeblocks)
const timeblockDeadline = this.getSelectedTimeblockDeadline(
subtask.timeblocks,
);
return timeblockDeadline !== '' ? timeblockDeadline : 'Žiadny termín'
return timeblockDeadline !== '' ? timeblockDeadline : 'Žiadny termín';
},
async _finishSubtask(subtask) {
const tempSubtask = {...subtask, is_finished: 1, timesheets: subtask?.timesheets.map((timesheet) => {
delete timesheet.employee_name
return timesheet
}) || []}
const timesheets =
subtask?.timesheets.map((timesheet) => {
delete timesheet.employee_name;
return timesheet;
}) || [];
// Convert timeblocks from internal format to BE format
const timeblocks = (subtask.timeblocks || [])
.filter((timeblock) => {
// Filter timeblocks that have either old format (date) or new format (start)
return timeblock.date || timeblock.start;
})
.map((timeblock) => {
// If already in BE format (has start field), return as is
if (timeblock.start && !timeblock.date) {
return {
id: timeblock.id || null,
start: timeblock.start,
end: timeblock.end,
is_finished: timeblock.is_finished || 0,
};
}
// Convert from internal format to BE format
const dateStr = moment(timeblock.date).format('YYYY-MM-DD');
return {
id: timeblock.id || null,
start: `${dateStr} ${timeblock.starts_at_time}:00`,
end: `${dateStr} ${timeblock.ends_at_time}:00`,
is_finished: timeblock.is_finished || 0,
};
});
const tempSubtask = {
...subtask,
is_finished: 1,
timesheets,
timeblocks,
};
try {
this.loadingSubtask[subtask.id] = true
await this.$axios.put_auth(`v1/subtasks/${tempSubtask.id}`, tempSubtask)
this.loadingSubtask[subtask.id] = true;
await this.$axios.put_auth(
`v1/subtasks/${tempSubtask.id}`,
tempSubtask,
);
this.$store.dispatch('tm/removeOngoingSubtask', subtask.id)
this.$events.emit('on-subtask-edited', subtask)
this.$store.dispatch('tm/removeOngoingSubtask', subtask.id);
this.$events.emit('on-subtask-edited', subtask);
} catch (error) {
this.$toast.error(error.message || error)
this.$toast.error(error.message || error);
if (process.env.NODE_ENV === 'development')
console.log('[a-ongoing-table.vue] Error: ', error)
console.log('[a-ongoing-table.vue] Error: ', error);
} finally {
this.loadingSubtask[subtask.id] = false
}
}
}
this.loadingSubtask[subtask.id] = false;
}
},
},
};
</script>
<style lang="sass" scoped>