refactor podla review

This commit is contained in:
Filip Kaluža committed 2023-01-12 17:53:35 +01:00
1 parent d46a9151fc
commit c542ea7760
14 files changed
+89 -182

No files matched your search

@@ -38,7 +38,6 @@
"tasks": [
{
"id": 1,
"task_id": 1,
"starts_at": "2023-01-11T08:01:00+00:00",
"ends_at": "2023-01-11T09:00:00+00:00",
"title": "Task DNES",
@@ -49,7 +48,6 @@
{
"id": 2,
"task_id": 2,
"starts_at": "2023-01-12T08:30:00+00:00",
"ends_at": "2023-01-12T09:00:00+00:00",
"title": "Kratky 30min Lorem ipsum dolor sit amet, consectetur adipiscing e",
@@ -60,7 +58,6 @@
{
"id": 3,
"task_id": 3,
"starts_at": "2023-01-12T10:30:00+00:00",
"ends_at": "2023-01-12T10:45:00+00:00",
"title": "Kratky 15min",
@@ -71,7 +68,6 @@
{
"id": 4,
"task_id": 4,
"starts_at": "2023-01-13T08:00:00+00:00",
"ends_at": "2023-01-13T10:00:00+00:00",
"title": "Task 2",
@@ -82,7 +78,6 @@
{
"id": 6,
"task_id": 6,
"starts_at": "2023-01-13T09:00:00+00:00",
"ends_at": "2023-01-13T12:00:00+00:00",
"title": "Task 6",
@@ -93,7 +88,6 @@
{
"id": 7,
"task_id": 7,
"starts_at": "2023-01-13T12:00:00+00:00",
"ends_at": "2023-01-13T16:00:00+00:00",
"title": "Task 7",
@@ -104,7 +98,6 @@
{
"id": 8,
"task_id": 8,
"starts_at": "2023-01-14T07:00:00+00:00",
"ends_at": "2023-01-14T09:00:00+00:00",
"title": "Task 8",
@@ -115,7 +108,6 @@
{
"id": 9,
"task_id": 9,
"starts_at": "2023-01-14T09:00:00+00:00",
"ends_at": "2023-01-14T12:00:00+00:00",
"title": "Task 9",
@@ -126,7 +118,6 @@
{
"id": 10,
"task_id": 10,
"starts_at": "2023-01-14T12:00:00+00:00",
"ends_at": "2023-01-14T13:00:00+00:00",
"title": "Task 10",
+3 -15
View File
@@ -10,7 +10,6 @@
"tasks": [
{
"id": 1,
"task_id": 1,
"starts_at": "2023-01-12T08:01:00+00:00",
"ends_at": "2023-01-12T09:00:00+00:00",
"title": "Task DNES",
@@ -21,7 +20,6 @@
{
"id": 2,
"task_id": 2,
"starts_at": "2023-01-12T08:30:00+00:00",
"ends_at": "2023-01-12T09:00:00+00:00",
"title": "Kratky 30min",
@@ -32,7 +30,6 @@
{
"id": 3,
"task_id": 3,
"starts_at": "2023-01-13T10:30:00+00:00",
"ends_at": "2023-01-13T10:45:00+00:00",
"title": "Kratky 15min",
@@ -51,8 +48,7 @@
"unscheduled_time": 10,
"tasks": [
{
"id": 1,
"task_id": 1,
"id": 4,
"starts_at": "2023-01-12T08:01:00+00:00",
"ends_at": "2023-01-12T09:00:00+00:00",
"title": "Task DNES",
@@ -62,8 +58,7 @@
},
{
"id": 2,
"task_id": 2,
"id": 5,
"starts_at": "2023-01-12T08:30:00+00:00",
"ends_at": "2023-01-12T09:00:00+00:00",
"title": "Kratky 30min",
@@ -73,8 +68,7 @@
},
{
"id": 3,
"task_id": 3,
"id": 6,
"starts_at": "2023-01-12T10:30:00+00:00",
"ends_at": "2023-01-12T10:45:00+00:00",
"title": "Kratky 15min",
@@ -94,7 +88,6 @@
"tasks": [
{
"id": 1,
"task_id": 1,
"starts_at": "2023-01-13T08:01:00+00:00",
"ends_at": "2023-01-13T09:00:00+00:00",
"title": "Task DNES",
@@ -105,7 +98,6 @@
{
"id": 2,
"task_id": 2,
"starts_at": "2023-01-12T08:30:00+00:00",
"ends_at": "2023-01-12T09:00:00+00:00",
"title": "Kratky 30min",
@@ -116,7 +108,6 @@
{
"id": 3,
"task_id": 3,
"starts_at": "2023-01-13T10:30:00+00:00",
"ends_at": "2023-01-13T10:45:00+00:00",
"title": "Kratky 15min",
@@ -136,7 +127,6 @@
"tasks": [
{
"id": 1,
"task_id": 1,
"starts_at": "2023-01-11T08:01:00+00:00",
"ends_at": "2023-01-11T09:00:00+00:00",
"title": "Task DNES",
@@ -147,7 +137,6 @@
{
"id": 2,
"task_id": 2,
"starts_at": "2023-01-11T08:30:00+00:00",
"ends_at": "2023-01-11T09:00:00+00:00",
"title": "Kratky 30min",
@@ -158,7 +147,6 @@
{
"id": 3,
"task_id": 3,
"starts_at": "2023-01-11T10:30:00+00:00",
"ends_at": "2023-01-11T10:45:00+00:00",
"title": "Kratky 15min",
@@ -91,7 +91,6 @@
</template>
<script>
// Kaluza: Cely tento komponent presun do tm@dashboard/_components/z-timeline.vue
import ZCompleteTaskModal from '@/plugins/tm@modal/task/z-complete-task-modal.vue'
import ZDeleteTaskModal from '@/plugins/tm@modal/task/z-delete-task-modal.vue'
import ZSubTaskModal from '@/plugins/tm@modal/sub-task/z-sub-task-modal.vue'
@@ -147,9 +146,7 @@ export default {
methods: {
weekChanged() {
// Kaluza: Skus tieto document.getElementBy... prerobit na this.$el.getElement ...
// Je za tym viacero problemov ktore by to mohlo sposobit, v tejto appke asi ne ale nech si drzime best practices
const scrollContainer = document.getElementsByClassName('vuecal__scrollable-body')[0]
const scrollContainer = this.$el.getElementsByClassName('vuecal__scrollable-body')[0]
scrollContainer.scrollLeft = 0
},
@@ -163,12 +160,12 @@ export default {
},
correctMargins() {
if (!document.getElementsByClassName('vuecal__split-days-headers').length)
if (!this.$el.getElementsByClassName('vuecal__split-days-headers').length)
return
const heightOfDayHeader = document.getElementsByClassName('vuecal__split-days-headers')[0].clientHeight
document.getElementsByClassName('vuecal__time-column')[0].style.marginTop = `${heightOfDayHeader}px`
document.getElementsByClassName('vuecal__cells-body')[0].style.marginTop = `${heightOfDayHeader}px`
const heightOfDayHeader = this.$el.getElementsByClassName('vuecal__split-days-headers')[0].clientHeight
this.$el.getElementsByClassName('vuecal__time-column')[0].style.marginTop = `${heightOfDayHeader}px`
this.$el.getElementsByClassName('vuecal__cells-body')[0].style.marginTop = `${heightOfDayHeader}px`
},
getHeadingDate(value) {
@@ -207,7 +204,7 @@ export default {
},
clickCompleteTask(event) {
if (event.completed) this.$emit('reopenTask', event.id)
if (event.completed) this.completeTask(event.id)
else this.showCompleteModal = {task: event}
},
@@ -3,12 +3,12 @@
<v-select
v-model="selectedEmployee"
class="subheader-input"
:items="employees"
:items="employeesNames"
label="Zamestnanec"
variant="outlined"
></v-select>
<div class="d-flex date-wrapper">
<v-btn class="subheader-icon-button prev" variant="outlined" @click="prevWeek()"><img :src="require('./_img/icon-prev.svg')" alt=""></v-btn>
<v-btn class="subheader-icon-button prev" variant="outlined" @click="prevWeek()"><img :src="require('@/plugins/tm@dashboard/_components/_img/icon-prev.svg')" alt=""></v-btn>
<v-text-field
class="subheader-input disabled"
label="Dátum"
@@ -16,7 +16,7 @@
variant="outlined"
append-inner-icon="mdi-calendar-blank-outline"
></v-text-field>
<v-btn class="subheader-icon-button next" variant="outlined" @click="nextWeek()"><img :src="require('./_img/icon-next.svg')" alt=""></v-btn>
<v-btn class="subheader-icon-button next" variant="outlined" @click="nextWeek()"><img :src="require('@/plugins/tm@dashboard/_components/_img/icon-next.svg')" alt=""></v-btn>
</div>
<v-text-field
class="subheader-input disabled"
@@ -42,32 +42,36 @@ export default {
data() {
return {
// Kaluza: Napojit na BE
employees: ['Foo', 'Bar', 'Fizz', 'Buzz'],
// Kaluza: Toto je preco hardcoded
selectedDate: "13.11.2022 - 17.11.2022",
employees: [],
employeesNames: [],
selectedDate: "",
// Kaluza: Napojit funkcnost
selectedEmployee: 'Bar',
selectedEmployee: '',
date: new Date()
}
},
created() {
// Kaluza: getWeek pouzivas iba v js a nevolas ho z html a je to pomocna funkcia, takze ju nazvi _getWeek
this.getWeek()
},
// Kaluza: Computed ma byt hned za data
computed: {
time() {
return this.unscheduledTime
}
},
created() {
this._getEmployees()
this._getWeek()
},
methods: {
getWeek() {
async _getEmployees() {
this.employees = await this.$axios.get_auth_data('v1/employees')
this.employees.forEach(employee => {
this.employeesNames.push(employee.name)
})
},
_getWeek() {
this.firstDay = subDays(this.date, 1)
this.lastDay = addDays(this.date, 5)
@@ -77,12 +81,12 @@ export default {
prevWeek() {
this.date = subDays(this.date, 7)
this.getWeek()
this._getWeek()
},
nextWeek() {
this.date = addDays(this.date, 7)
this.getWeek()
this._getWeek()
}
}
}
+28 -70
View File
@@ -3,24 +3,14 @@
<A-task-filter :unscheduledTime="unscheduledTime" @weekChange="getWeekData" />
<W-loadable :content="timelineData" class="w-loadable" empty-message="Nepodarilo sa nacitat data!">
<Z-timeline :calData="timelineData" :calConfig="config" :splits="splitDays" @eventMoved="onEventMoved" @completeTask="completeTask" @reopenTask="reopenTask" @deleteTask="deleteTask" />
<Z-timeline :calData="timelineData" :calConfig="config" :splits="splitDays" @eventMoved="onEventMoved" @completeTask="completeTask" @deleteTask="deleteTask" />
</W-loadable>
<!-- Kaluza: Toto vyhodit a pouzit w toast -->
<v-snackbar
v-model="errorToast"
:timeout="2000"
color="red"
:rounded="true"
>
{{ errorToastMessage }}
</v-snackbar>
</div>
</template>
<script>
import ATaskFilter from './_components/a-tasks-filter.vue'
import ZTimeline from './_components/z-timeline.vue'
import ZTimeline from '@/plugins/tm@dashboard/_components/z-timeline.vue'
import { addDays, setHours, setMinutes, setSeconds, differenceInCalendarDays } from 'date-fns'
@@ -33,12 +23,6 @@ export default {
data() {
return {
timelineData: null,
// Kaluza: Vyhodit tieto toast veci
errorToast: false,
errorToastMessage: "Nepodarilo sa nacitat data!",
dataLoaded: false,
splitDays: [],
unscheduledTime: 0,
config: {
@@ -53,19 +37,17 @@ export default {
this.config.date = week.firstDay
try {
this.timelineData = await this.$axios.get_auth_data('v1/overview/tasks')
this.formatData(week.firstDay)
this.generateSplits(week.firstDay)
this.formatTimelineDataToTimelineFormat(week.firstDay)
this.generateDays(week.firstDay)
this.generateNonWorkingHours(week.firstDay)
} catch(error) {
// Kaluza: Ked to davas do w loadable tak nepouzi toast a iba daj this.timeineData = {error} a loadable ho parsne a zobrazi
this.timelineData = {}
} catch (error) {
this.timelineData = {error: error || 'Nepodarilo sa nacitat data!'}
console.error(error)
this.triggerToast("Nepodarilo sa nacitat data!")
// console.log(this.$store.getters['auth/user'])
}
},
// Kaluza: Toto prosimta premenuj lebo neviem vobec co znamena splits
generateSplits(date) {
generateDays(date) {
this.splitDays = []
for (let i = 0; i < 7; i++) {
this.splitDays.push({
@@ -78,8 +60,7 @@ export default {
}
},
// Kaluza: Toto nazvi nejako inak aby bolo viac jasne ze z coho to preformatovava na co
formatData(date) {
formatTimelineDataToTimelineFormat(date) {
// format events
this.timelineData.tasks.forEach(event => {
event.name = this.timelineData.name
@@ -137,56 +118,33 @@ export default {
this.timelineData.tasks.push(...nonWorkingHours)
},
// Kaluza: Vyhodit
triggerToast(message) {
this.errorToastMessage = message
this.errorToast = true
},
// Kaluza: Vyhodit ak sa nepouzije
async onEventMoved(event) {
console.log("drag", event)
// try {
// const newStartDate = addDays(event.event.start, differenceInCalendarDays(this.splitDays.filter((split) => {return split.id == event.newSplit})[0].date, event.event.start))
// const newEndDate = addDays(event.event.end, differenceInCalendarDays( newStartDate, event.event.start))
// await this.$axios.post_auth_data(`v1/overview/tasks/${event.event.id}`, {start: newStartDate, end: newEndDate})
// } catch(error) {
// this.triggerToast("Nepodarilo sa presunut ulohu!")
// this.timelineData.tasks.filter(e => {
// if (e.id == event.event.id) {
// e.start = new Date(event.originalEvent.start)
// e.end = new Date(event.originalEvent.end)
// }
// })
// }
const task = this.timelineData.tasks.find(task => task.id == event.event.id)
try {
const newStartDate = addDays(event.event.start, differenceInCalendarDays(this.splitDays.filter((split) => {return split.id == event.newSplit})[0].date, event.event.start))
const newEndDate = addDays(event.event.end, differenceInCalendarDays( newStartDate, event.event.start))
// await this.$axios.post_auth_data(`v1/overview/tasks/${event.event.id}`, {start: newStartDate, end: newEndDate})
task.start = newStartDate
task.end = newEndDate
task.split = event.newSplit
} catch(error) {
this.$toast.error(error)
task.start = new Date(event.originalEvent.start)
task.end = new Date(event.originalEvent.end)
task.split = event.oldSplit
}
},
completeTask(id) {
// Kaluza: Tu pridaj request na BE, nepouzi filter ale find a sprav to takto
// 1. const task = this.timelineData.tasks.find(task => task.id == id)
// 2. task.completed = true
// 3. V tryCatch zavolaj request na BE
// 4. Ak to spadne do catchu tak daj task.completed = false a pod tym daj this.$toast.error(error)
// A AKO NAD TYM ROZMYSLAM completeTask A reopenTask MOZES SPOJIT DO JEDNEJ A VZDY LEN DAS task.completed = !task.completed
this.timelineData.tasks.filter(task => {
if (task.id == id) {
task.completed = true
}
})
},
reopenTask(id) {
// Kaluza: Toto rovnakym sposobom ako complete task
this.timelineData.tasks.filter(task => {
if (task.id == id) {
task.completed = false
}
})
const task = this.timelineData.tasks.find(task => task.id == id)
task.completed = !task.completed
},
deleteTask(id) {
// Kaluza: Toto rovnako ako complete a reopen
this.timelineData.tasks.splice(this.timelineData.tasks.findIndex(item => item.id === id), 1)
}
}
@@ -3,12 +3,12 @@
<v-select
v-model="selectedEmployee"
class="subheader-input"
:items="employees"
:items="teams"
label="Tím"
variant="outlined"
></v-select>
<div class="d-flex date-wrapper">
<v-btn class="subheader-icon-button prev" variant="outlined" @click="prevDay()"><img :src="require('../../tasks/_components/_img/icon-prev.svg')" alt=""></v-btn>
<v-btn class="subheader-icon-button prev" variant="outlined" @click="prevDay()"><img :src="require('@/plugins/tm@dashboard/_components/_img/icon-prev.svg')" alt=""></v-btn>
<v-text-field
class="subheader-input disabled"
label="Dátum"
@@ -16,7 +16,7 @@
variant="outlined"
append-inner-icon="mdi-calendar-blank-outline"
></v-text-field>
<v-btn class="subheader-icon-button next" variant="outlined" @click="nextDay()"><img :src="require('../../tasks/_components/_img/icon-next.svg')" alt=""></v-btn>
<v-btn class="subheader-icon-button next" variant="outlined" @click="nextDay()"><img :src="require('@/plugins/tm@dashboard/_components/_img/icon-next.svg')" alt=""></v-btn>
</div>
<v-text-field
class="subheader-input disabled"
@@ -43,7 +43,7 @@ export default {
data() {
return {
// Kaluza: Napojit funkcionalitu
employees: ['Foo', 'Bar', 'Fizz', 'Buzz'],
teams: ['Foo', 'Bar', 'Fizz', 'Buzz'],
selectedDate: new Date(),
day: new Date(),
selectedEmployee: 'Bar',
+24 -55
View File
@@ -3,24 +3,14 @@
<A-team-filter :unscheduledTime="unscheduledTime" @dayChanged="getDayData" />
<W-loadable :content="timelineData" class="w-loadable" empty-message="Nepodarilo sa nacitat data!">
<Z-timeline :calData="timelineData" :calConfig="config" :splits="splitDays" @eventMoved="onEventMoved" @completeTask="completeTask" @reopenTask="reopenTask" @deleteTask="deleteTask" />
<Z-timeline :calData="timelineData" :calConfig="config" :splits="splitDays" @eventMoved="onEventMoved" @completeTask="completeTask" @deleteTask="deleteTask" />
</W-loadable>
<!-- Kaluza: vyhodit toto a nahradit za wToast -->
<v-snackbar
v-model="errorToast"
:timeout="2000"
color="red"
:rounded="true"
>
{{ errorToastMessage }}
</v-snackbar>
</div>
</template>
<script>
import ATeamFilter from './_components/a-team-filter.vue'
import ZTimeline from '../tasks/_components/z-timeline.vue'
import ZTimeline from '@/plugins/tm@dashboard/_components/z-timeline.vue'
import { setHours, setMinutes, setSeconds } from 'date-fns'
@@ -51,23 +41,22 @@ export default {
this.config.date = date
try {
this.timelineData = await this.$axios.get_auth_data('v1/overview/teams')
this.generateSplits()
this.formatData()
this.generateEmployees()
this.formatTimelineDataToTimelineFormat()
this.generateNonWorkingHours(date)
} catch(error) {
// Kaluza: Upravit podla feedbacku v tasks.modal
this.timelineData = {}
this.timelineData = {error: error || 'Nepodarilo sa nacitat data!'}
console.error(error)
this.triggerToast("Nepodarilo sa nacitat data!")
}
},
generateSplits() {
generateEmployees() {
this.splitDays = []
for (let i = 0; i < this.timelineData.length; i++) {
this.timelineData[i].splitId = i + 1
this.splitDays.push({
id: i + 1,
employeeId: this.timelineData[i].id,
firstName: this.timelineData[i].name,
name: this.timelineData[i].name + " " + this.timelineData[i].surname,
initials: this.timelineData[i].name.charAt(0).toUpperCase() + this.timelineData[i].surname.charAt(0).toUpperCase(),
@@ -76,8 +65,7 @@ export default {
}
},
// Kaluza: Upravit podla feedbacku v tasks.modal
formatData() {
formatTimelineDataToTimelineFormat() {
this.timelineData.tasks = []
this.unscheduledTime = 0
@@ -132,46 +120,27 @@ export default {
this.timelineData.tasks.push(...nonWorkingHours)
},
// Kaluza: Upravit podla feedbacku v tasks.modal
triggerToast(message) {
this.errorToastMessage = message
this.errorToast = true
},
// Kaluza: Upravit podla feedbacku v tasks.modal
async onEventMoved(event) {
console.log("drag", event)
// try {
// const newStartDate = addDays(event.event.start, differenceInCalendarDays(this.splitDays.filter((split) => {return split.id == event.newSplit})[0].date, event.event.start))
// const newEndDate = addDays(event.event.end, differenceInCalendarDays( newStartDate, event.event.start))
// await this.$axios.post_auth_data(`v1/overview/tasks/${event.event.id}`, {start: newStartDate, end: newEndDate})
// } catch(error) {
// this.triggerToast("Nepodarilo sa presunut ulohu!")
// this.timelineData.tasks.filter(e => {
// if (e.id == event.event.id) {
// e.start = new Date(event.originalEvent.start)
// e.end = new Date(event.originalEvent.end)
// }
// })
// }
const task = this.timelineData.tasks.find(task => task.id == event.event.id)
const newEmployeeId = this.splitDays.find(split => split.id == event.newSplit).employeeId
try {
// await this.$axios.post_auth_data(`v1/overview/tasks/${event.event.id}`, {start: newEmployeeId})
task.split = event.newSplit
task.start = event.event.start
task.end = event.event.end
} catch(error) {
task.split = event.oldSplit
task.start = new Date(event.originalEvent.start)
task.end = new Date(event.originalEvent.end)
this.$toast.error(error)
}
},
// Kaluza: Upravit podla feedbacku v tasks.modal
completeTask(id) {
this.timelineData.tasks.filter(task => {
if (task.id == id) {
task.completed = true
}
})
},
// Kaluza: Upravit podla feedbacku v tasks.modal
reopenTask(id) {
this.timelineData.tasks.filter(task => {
if (task.id == id) {
task.completed = false
}
})
const task = this.timelineData.tasks.find(task => task.id == id)
task.completed = !task.completed
},
deleteTask(id) {
@@ -280,7 +280,7 @@
</td>
<td class="task-action">
<div class="d-flex justify-start">
<img class="pencil-icon" :src="require('@/plugins/tm@dashboard/tasks/_components/_img/checkmark.svg')" alt="checkmark-icon" :style="{opacity: 0.3}">
<img class="pencil-icon" :src="require('@/plugins/tm@dashboard/_components/_img/checkmark.svg')" alt="checkmark-icon" :style="{opacity: 0.3}">
<img class="pencil-icon ml-2" :src="require('@/plugins/tm@overview/_img/pencil-icon.svg')" alt="pencil-icon" :style="{opacity: 0.3}">
<img class="trash-icon" :src="require('@/plugins/tm@overview/_img/trash-icon.svg')" alt="trash-icon" :style="{opacity: 0.3}">
</div>