mirror of
https://bitbucket.org/studiotem/jandl-taskmanager-app.git
synced 2026-10-21 14:29:34 +00:00
refactor(task-modals): updated timeblocks to new local dat format
This commit is contained in:
Matej Glasnák committed
1 parent
eaf83bf0cc
commit
0035251080
8 files changed
+1059
-597
No files matched your search
@@ -1,159 +1,226 @@
|
||||
<template>
|
||||
<v-dialog v-model="visible" max-width="750" persistent>
|
||||
<v-card>
|
||||
<div class="d-flex justify-space-between align-center">
|
||||
<h1>Sub Task má nedokončené úlohy</h1>
|
||||
<v-dialog v-model="visible" max-width="750" persistent>
|
||||
<v-card>
|
||||
<div class="d-flex justify-space-between align-center">
|
||||
<h1>Sub Task má nedokončené úlohy</h1>
|
||||
|
||||
<v-icon
|
||||
@click.stop="closeModal()"
|
||||
icon="mdi-close"
|
||||
size="large"
|
||||
></v-icon>
|
||||
</div>
|
||||
<v-icon
|
||||
@click.stop="closeModal()"
|
||||
icon="mdi-close"
|
||||
size="large"
|
||||
></v-icon>
|
||||
</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>
|
||||
</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>
|
||||
</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>
|
||||
</div>
|
||||
</v-card>
|
||||
</v-dialog>
|
||||
<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
|
||||
>
|
||||
</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 ],
|
||||
emits: ['close', 'on-subtask-edited'],
|
||||
mixins: [modalMixin],
|
||||
emits: ['close', 'on-subtask-edited'],
|
||||
|
||||
props: {
|
||||
mode: {
|
||||
type: String,
|
||||
default: 'edit' // edit or delete
|
||||
}
|
||||
},
|
||||
props: {
|
||||
mode: {
|
||||
type: String,
|
||||
default: 'edit', // edit or delete
|
||||
},
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
tmUtils,
|
||||
visible: false,
|
||||
subtask: null,
|
||||
loadingTimeblocks: {},
|
||||
loadingCloseAll: false
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
tmUtils,
|
||||
visible: false,
|
||||
subtask: null,
|
||||
loadingTimeblocks: {},
|
||||
loadingCloseAll: false,
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
async showModal({ subtask }) {
|
||||
this.subtask = subtask
|
||||
this.visible = true
|
||||
},
|
||||
methods: {
|
||||
async showModal({ subtask }) {
|
||||
this.subtask = subtask;
|
||||
this.visible = true;
|
||||
},
|
||||
|
||||
async complete() {
|
||||
console.log('complete')
|
||||
},
|
||||
async complete() {
|
||||
console.log('complete');
|
||||
},
|
||||
|
||||
closeModal() {
|
||||
this.visible = false
|
||||
},
|
||||
closeModal() {
|
||||
this.visible = false;
|
||||
},
|
||||
|
||||
async handleFinishTimeblock(timeblock) {
|
||||
const subtask = JSON.parse(JSON.stringify(this.subtask))
|
||||
async handleFinishTimeblock(timeblock) {
|
||||
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
|
||||
try {
|
||||
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)
|
||||
}
|
||||
if (areAllTimeblocksFinished) {
|
||||
await this._finishSubtask();
|
||||
this.$store.dispatch('tm/removeOngoingSubtask', this.subtask.id);
|
||||
}
|
||||
|
||||
this.$events.emit('on-subtask-edited', subtask)
|
||||
this.closeModal()
|
||||
} catch (error) {
|
||||
this.$toast.error(error.message || error)
|
||||
this.$events.emit('on-subtask-edited', subtask);
|
||||
this.closeModal();
|
||||
} catch (error) {
|
||||
this.$toast.error(error.message || error);
|
||||
|
||||
if (process.env.NODE_ENV === 'development')
|
||||
console.log('[a-task-timeblocks.vue] Error: ', error)
|
||||
} finally {
|
||||
this.loadingTimeblocks[timeblock.id] = false
|
||||
}
|
||||
},
|
||||
if (process.env.NODE_ENV === 'development')
|
||||
console.log('[a-task-timeblocks.vue] Error: ', error);
|
||||
} finally {
|
||||
this.loadingTimeblocks[timeblock.id] = false;
|
||||
}
|
||||
},
|
||||
|
||||
async handleFinishAllTimeblocks() {
|
||||
this.loadingCloseAll = true
|
||||
async handleFinishAllTimeblocks() {
|
||||
this.loadingCloseAll = true;
|
||||
|
||||
try {
|
||||
const promises = this.subtask.timeblocks.map(timeblock => {
|
||||
return this.$axios.put_auth(`v1/timeblocks/${timeblock.id}`, {...timeblock, is_finished: 1})
|
||||
})
|
||||
try {
|
||||
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()
|
||||
} catch (error) {
|
||||
this.$toast.error(error.message || error)
|
||||
} finally {
|
||||
this.loadingCloseAll = false
|
||||
}
|
||||
},
|
||||
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);
|
||||
} finally {
|
||||
this.loadingCloseAll = false;
|
||||
}
|
||||
},
|
||||
|
||||
async _finishSubtask() {
|
||||
const tempSubtask = {...this.subtask, is_finished: 1, timesheets: this.subtask.timesheets.map((timesheet) => {
|
||||
delete timesheet.employee_name
|
||||
return timesheet
|
||||
})}
|
||||
async _finishSubtask() {
|
||||
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>
|
||||
.card-content {
|
||||
margin-top: 20px;
|
||||
padding: 20px;
|
||||
margin-top: 20px;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.card-actions {
|
||||
width: 100%;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 10px;
|
||||
width: 100%;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.finish-icon {
|
||||
cursor: pointer;
|
||||
cursor: pointer;
|
||||
|
||||
&.disabled {
|
||||
opacity: 0.5;
|
||||
pointer-events: none;
|
||||
}
|
||||
&.disabled {
|
||||
opacity: 0.5;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
&.finished {
|
||||
background: #06dece;
|
||||
}
|
||||
&.finished {
|
||||
background: #06dece;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
Reference in new issue
Block a user