[Review]

app/src/plugins/tm@dashboard/projects/_components/a-project-calendar.vue

@@ -1,96 +1,104 @@
 <template>
-  <div id="calendar" class="mb-12">
-    <FullCalendar ref="fullCalendar" :options="calendarOptions"/>
-    <Z-master-task-modal ref="z-master-task-modal" />
-  </div>
+	<div id="calendar" class="mb-12">
+		<V-full-calendar ref="fullCalendar" :options="calendarOptions" />
+		<Z-master-task-modal ref="z-master-task-modal" />
+	</div>
 </template>
 <script>
-import FullCalendar       from '@fullcalendar/vue3'
-import dayGridPlugin      from '@fullcalendar/daygrid'
-import ZMasterTaskModal   from '@/plugins/tm@modal/master-task/z-master-task-modal.vue'
+import VFullCalendar from '@fullcalendar/vue3'
+import dayGridPlugin from '@fullcalendar/daygrid'
+import ZMasterTaskModal from '@/plugins/tm@modal/master-task/z-master-task-modal.vue'
 
 export default {
-  components: {
-    FullCalendar,
-    ZMasterTaskModal
-  },
-  props: ['events', 'month'],
-  methods: {
-    editTask(masterTask, editMode) {
-      this.$refs['z-master-task-modal'].create(masterTask, editMode)
-    }
-  },  
-  computed: {
-    calendarOptions() {
-      return {
-        plugins: [ dayGridPlugin ],
-        initialView: 'dayGridMonth',
-        headerToolbar: false,
-        locale: 'sk',
-        height: 650,
-        firstDay: 1,
-        dayHeaderClassNames: ['w-day-header'],
-        events: this.events,
-        eventContent: function(eventInfo) {
-          return { html: eventInfo.event.extendedProps.title_html }
-        },
-        eventClick: (info) => {
-          console.log(info.event._def)
-          // alert(JSON.stringify(info.event._def))
-          this.editTask(info.event._def.publicId, false)
-        }
-      }
-    }
-  },
-  watch: {
-    month(selectedMonth) {
-      const currentYear = (new Date()).getFullYear()
-      this.$refs.fullCalendar?.getApi().gotoDate(new Date(currentYear, selectedMonth, 1))
-    }
-  },
-  mounted() {
-    const currentYear = (new Date()).getFullYear()
-    this.calendarOptions.events = this.events
-    this.$refs.fullCalendar?.getApi().gotoDate(new Date(currentYear, this.month, 1))
-  }
+	components: {
+		VFullCalendar,
+		ZMasterTaskModal
+	},
+
+	// Kravarik: Prepisat propy na objektovy zapis
+	props: ['events', 'month'],
+
+	methods: {
+		editTask(masterTask, editMode) {
+			this.$refs['z-master-task-modal'].create(masterTask, editMode)
+		}
+	},
+
+	// Kravarik: Comuted ma byt za data hned
+	computed: {
+		calendarOptions() {
+			return {
+				plugins: [dayGridPlugin],
+				initialView: 'dayGridMonth',
+				headerToolbar: false,
+				locale: 'sk',
+				height: 650,
+				firstDay: 1,
+				dayHeaderClassNames: ['w-day-header'],
+				events: this.events,
+				// Kravarik: Skus toto prepisat na arrow function ako je v eventClick
+				eventContent: function (eventInfo) {
+					return { html: eventInfo.event.extendedProps.title_html }
+				},
+				eventClick: (info) => {
+					this.editTask(info.event._def.publicId, false)
+				}
+			}
+		}
+	},
+
+	// Kravarik: Toto nechat na konci
+	watch: {
+		month(selectedMonth) {
+			const currentYear = new Date().getFullYear()
+			this.$refs.fullCalendar?.getApi().gotoDate(new Date(currentYear, selectedMonth, 1))
+		}
+	},
+
+	// Kravarik: Posunut nad methods
+	mounted() {
+		const currentYear = new Date().getFullYear()
+		this.calendarOptions.events = this.events
+		this.$refs.fullCalendar?.getApi().gotoDate(new Date(currentYear, this.month, 1))
+	}
 }
 </script>
 <style lang="sass" scoped>
 #calendar
-  &:deep(.w-day-header)
-    text-align: left
-    padding-left: 10px
-  &:deep(.fc-daygrid-day-number)
-    color: black
-  &:deep(.fc-col-header-cell-cushion)
-    font-size: 20px
-    font-weight: 500
-    line-height: 45px
-    text-transform: capitalize
-    color: black
-  &:deep(.fc-theme-standard .fc-scrollgrid)
-    border: none
-  &:deep(.fc-event-start)
-    border-top-left-radius: 30px
-    border-bottom-left-radius: 30px
-  &:deep(.fc-event-end)
-    border-top-right-radius: 30px
-    border-bottom-right-radius: 30px
-  &:deep(.fc-event)
-    font-size: 12px
-    padding-left: 10px
-    margin-top: 5px
-    &:after
-      background: unset
-  &:deep(.fc-day-today)
-    background: white
-    a
-      background: #3700B3
-      width: 32px
-      height: 32px
-      color: white
-      text-align: center
-      border-radius: 50%
-      border: 5px solid white
-      line-height: 15px
-</style>
+	&:deep(.w-day-header)
+		text-align: left
+		padding-left: 10px
+	&:deep(.fc-daygrid-day-number)
+		color: black
+	&:deep(.fc-col-header-cell-cushion)
+		font-size: 20px
+		font-weight: 500
+		line-height: 45px
+		text-transform: capitalize
+		color: black
+	&:deep(.fc-theme-standard .fc-scrollgrid)
+		border: none
+	&:deep(.fc-event-start)
+		border-top-left-radius: 30px
+		border-bottom-left-radius: 30px
+	&:deep(.fc-event-end)
+		border-top-right-radius: 30px
+		border-bottom-right-radius: 30px
+	&:deep(.fc-event)
+		font-size: 12px
+		padding-left: 10px
+		margin-top: 5px
+		&:after
+		background: unset
+	&:deep(.fc-day-today)
+		background: white
+		a
+		background: #3700B3
+		width: 32px
+		height: 32px
+		color: white
+		text-align: center
+		border-radius: 50%
+		border: 5px solid white
+		line-height: 15px
+	</style>

app/src/plugins/tm@dashboard/projects/_components/a-project-filter.vue

@@ -1,89 +1,66 @@
 <template>
-  <v-row class="px-10 py-8 subheader">
-    <v-select
-        v-model="filter.selectedProject"
-        class="subheader-input"
-        :items="projects"
-        label="Projekt"
-        variant="outlined"
-    ></v-select>
+	<v-row class="px-10 py-8 subheader">
+		<v-select v-model="filter.selectedProject" class="subheader-input" :items="projects" label="Projekt" variant="outlined"></v-select>
 
-    <v-select
-        v-model="filter.selectedTeam"
-        class="subheader-input"
-        :items="teams"
-        label="Tím"
-        variant="outlined"
-    ></v-select>
+		<v-select v-model="filter.selectedTeam" class="subheader-input" :items="teams" label="Tím" variant="outlined"></v-select>
 
-    <v-select
-        v-model="filter.selectedEmployee"
-        class="subheader-input"
-        :items="employees"
-        label="Zamestnanec"
-        variant="outlined"
-    ></v-select>
+		<v-select v-model="filter.selectedEmployee" class="subheader-input" :items="employees" label="Zamestnanec" variant="outlined"></v-select>
 
-    <v-select
-        v-model="filter.selectedMonth"
-        class="subheader-input"
-        :items="months"
-        label="Mesiac"
-        variant="outlined"
-    ></v-select>
+		<v-select v-model="filter.selectedMonth" class="subheader-input" :items="months" label="Mesiac" variant="outlined"></v-select>
 
-    <div class="subheader-input switch">
-      <p class="switch-label">Zobraziť ukončené</p>
-      <v-switch
-          v-model="filter.showFinishedTasks"
-          color="#6200EE"
-          hide-details
-      ></v-switch>
-    </div>
-  </v-row>
+		<div class="subheader-input switch">
+			<p class="switch-label">Zobraziť ukončené</p>
+			<v-switch v-model="filter.showFinishedTasks" color="#6200EE" hide-details></v-switch>
+		</div>
+	</v-row>
 </template>
 
 <script>
 export default {
-  data() {
-    return {
-      months: [
-        { title: 'Január',       value: 0 },
-        { title: 'Február',      value: 1 },
-        { title: 'Marec',        value: 2 },
-        { title: 'Apríl',        value: 3 },
-        { title: 'Máj',          value: 4 },
-        { title: 'Jún',          value: 5 },
-        { title: 'Júl',          value: 6 },
-        { title: 'August',       value: 7 },
-        { title: 'September',    value: 8 },
-        { title: 'Október',      value: 9 },
-        { title: 'November',     value: 10 },
-        { title: 'December',     value: 11 },
-      ],
-      filter: {
-        selectedProject: null,
-        selectedTeam: null,
-        selectedEmployee: null,
-        selectedMonth: (new Date()).getMonth(),
-        showFinishedTasks: false
-      }
-    }
-  },
-  props: ['projects', 'teams', 'employees'],
-  emits: ['filterChanged'],
-  watch: {
-    filter: {
-      handler() {
-        this.$emit('filterChanged', this.filter)
-      },
-      deep: true
-    }
-  }
+	data() {
+		return {
+			months: [
+				{ title: 'Január', value: 0 },
+				{ title: 'Február', value: 1 },
+				{ title: 'Marec', value: 2 },
+				{ title: 'Apríl', value: 3 },
+				{ title: 'Máj', value: 4 },
+				{ title: 'Jún', value: 5 },
+				{ title: 'Júl', value: 6 },
+				{ title: 'August', value: 7 },
+				{ title: 'September', value: 8 },
+				{ title: 'Október', value: 9 },
+				{ title: 'November', value: 10 },
+				{ title: 'December', value: 11 }
+			],
+			filter: {
+				selectedProject: null,
+				selectedTeam: null,
+				selectedEmployee: null,
+				selectedMonth: new Date().getMonth(),
+				showFinishedTasks: false
+			}
+		}
+	},
+
+	// Kravarik: Props hodit nad data
+	props: ['projects', 'teams', 'employees'],
+
+	// Kravarik: Emits ma byt uplne prve
+	emits: ['filterChanged'],
+
+	watch: {
+		filter: {
+			handler() {
+				this.$emit('filterChanged', this.filter)
+			},
+			deep: true
+		}
+	}
 }
 </script>
 <style lang="sass" scoped>
-// TODO: zjednotit styly ikon v globalnom sass subore
+// Kravarik: TODO zjednotit styly ikon v globalnom sass subore
 // TODO: ↓
 .subheader
   max-width: 100%

app/src/plugins/tm@dashboard/projects/projects.vue

@@ -1,55 +1,61 @@
 <template>
 	<div>
-    <a-project-filter :projects="projects" @filterChanged="onFilterChanged"></a-project-filter>
-    <a-project-calendar :events="filteredEvents" :month="filter.selectedMonth"></a-project-calendar>
-  </div>
+		<!-- Kravarik: Dat velke A -->
+		<a-project-filter :projects="projects" @filterChanged="onFilterChanged"></a-project-filter>
+		<a-project-calendar :events="filteredEvents" :month="filter.selectedMonth"></a-project-calendar>
+	</div>
 </template>
 
 <script>
 import AProjectCalendar from './_components/a-project-calendar.vue'
-import AProjectFilter   from './_components/a-project-filter.vue'
+import AProjectFilter from './_components/a-project-filter.vue'
 
 export default {
-  components: {
-    AProjectCalendar,
-    AProjectFilter
-  },
-  data() {
-    return {
-      filter: {
-        selectedEmployee: null,
-        selectedMonth: (new Date()).getMonth(),
-        selectedProject: null,
-        selectedTeam: null,
-        showFinishedTasks: false
-      },
-      projects: ['Projekt1', 'Projekt2', 'Projekt3', 'Projekt4'],
-      selectedProject: null,
-      events: [],
-      filteredEvents: []
-    }
-  },
-  async created() {
-    const events = await this.$axios.get_auth_data('v1/overview/projects')
-    this.events = events.map(item => ({
-      id: item.id,
-      title: `${item.project_code} - ${item.name}`,
-      title_html: `${item.project_code} - <b>${item.name}</b>`,
-      start: item.starts_at,
-      end: item.deadline,
-      is_finished: item.is_finished,
-      project_code: item.project_code,
-      backgroundColor: item.color,
-      borderColor: item.color
-    }))
-    this.filteredEvents = this.events.filter(item => !item.is_finished)
-  },
-  methods: {
-    // TODO: prepojit filtrovanie na BE
-    onFilterChanged(filterValues) {
-      this.filter = filterValues
-      this.filteredEvents = this.events.filter(item => this.filter.showFinishedTasks || item.is_finished == false)
-    }
-  }
+	components: {
+		AProjectCalendar,
+		AProjectFilter
+	},
+	data() {
+		return {
+			// Kravarik: Toto premenuj na nejaky filterSettings alebo co to je
+			filter: {
+				selectedEmployee: null,
+				selectedMonth: new Date().getMonth(),
+				selectedProject: null,
+				selectedTeam: null,
+				showFinishedTasks: false
+			},
+			// Kravarik: Toto je preco hardcodenute?
+			projects: ['Projekt1', 'Projekt2', 'Projekt3', 'Projekt4'],
+			selectedProject: null,
+			events: [],
+			filteredEvents: []
+		}
+	},
+	async created() {
+		// Kravarik: Toto preco nieje v trycatch?
+		const events = await this.$axios.get_auth_data('v1/overview/projects')
+
+		// Kravarik: Nemusis nahodou z map returnovat? Ci ked {} obalis to () tak nemusis potom?
+		this.events = events.map((item) => ({
+			id: item.id,
+			title: `${item.project_code} - ${item.name}`,
+			title_html: `${item.project_code} - <b>${item.name}</b>`,
+			start: item.starts_at,
+			end: item.deadline,
+			is_finished: item.is_finished,
+			project_code: item.project_code,
+			backgroundColor: item.color,
+			borderColor: item.color
+		}))
+		this.filteredEvents = this.events.filter((item) => !item.is_finished)
+	},
+	methods: {
+		// Kravarik: TODO prepojit filtrovanie na BE
+		onFilterChanged(filterValues) {
+			this.filter = filterValues
+			this.filteredEvents = this.events.filter((item) => this.filter.showFinishedTasks || item.is_finished == false)
+		}
+	}
 }
 </script>

app/src/plugins/tm@dashboard/tasks/_components/a-tasks-filter.vue

@@ -42,17 +42,24 @@ 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",
+
+			// Kaluza: Napojit funkcnost
 			selectedEmployee: 'Bar',
 			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

app/src/plugins/tm@dashboard/tasks/_components/z-timeline.vue

@@ -66,7 +66,7 @@
 						</div>
 					</div>
 
-					<div class="event-footer d-flex">		
+					<div class="event-footer d-flex">
 						<v-btn rounded class="event-footer-button me-2" :class="{'completed': event.completed}" @click="clickCompleteTask(event)"><img :src="require('./_img/checkmark.svg')" alt=""></v-btn>
 						<v-btn rounded class="event-footer-button me-2" @click.stop="editTask(event.id, true)"><img :src="require('./_img/pencil.svg')" alt=""></v-btn>
 						<v-btn rounded class="event-footer-button me-2" @click.stop="this.showDeleteModal = {task: event}"><img :src="require('./_img/bin.svg')" alt=""></v-btn>
@@ -83,12 +83,15 @@
 		</Vue-cal>
 
 		<Z-sub-task-modal ref="z-sub-task-modal" />
+
+		<!-- Kravarik: Prerobit modaly na novy sposob -->
 		<Z-complete-task-modal v-if="showCompleteModal" :visible="showCompleteModal ? true : false" :task="showCompleteModal.task" @completeTask="completeTask" @close="showCompleteModal = null" />
 		<Z-delete-task-modal v-if="showDeleteModal" :visible="showDeleteModal ? true : false" :task="showDeleteModal.task" @deleteTask="deleteTask" @close="showDeleteModal = null" />
 	</div>
 </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'
@@ -142,12 +145,10 @@ export default {
 		}
 	},
 
-	mounted() {
-		// console.log(this.calData.tasks)
-	},
-
 	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]
 			scrollContainer.scrollLeft = 0
 		},
@@ -162,7 +163,9 @@ export default {
 		},
 
 		correctMargins() {
-			if (!document.getElementsByClassName('vuecal__split-days-headers').length) return
+			if (!document.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`
@@ -230,7 +233,7 @@ export default {
 	.calendar-wrapper
 		width: 100%
 		height: 100%
-		// padding: 0 20px 0 0 
+		// padding: 0 20px 0 0
 
 		&:deep()
 			.vuecal__cells

app/src/plugins/tm@dashboard/tasks/tasks.vue

@@ -6,6 +6,7 @@
 			<Z-timeline :calData="timelineData" :calConfig="config" :splits="splitDays" @eventMoved="onEventMoved" @completeTask="completeTask" @reopenTask="reopenTask" @deleteTask="deleteTask" />
 		</W-loadable>
 
+		<!-- Kaluza: Toto vyhodit a pouzit w toast -->
 		<v-snackbar
 			v-model="errorToast"
 			:timeout="2000"
@@ -32,8 +33,11 @@ export default {
 	data() {
 		return {
 			timelineData: null,
+
+			// Kaluza: Vyhodit tieto toast veci
 			errorToast: false,
 			errorToastMessage: "Nepodarilo sa nacitat data!",
+
 			dataLoaded: false,
 			splitDays: [],
 			unscheduledTime: 0,
@@ -53,12 +57,14 @@ export default {
 				this.generateSplits(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 = {}
 				console.error(error)
 				this.triggerToast("Nepodarilo sa nacitat data!")
 			}
 		},
 
+		// Kaluza: Toto prosimta premenuj lebo neviem vobec co znamena splits
 		generateSplits(date) {
 			this.splitDays = []
 			for (let i = 0; i < 7; i++) {
@@ -72,6 +78,7 @@ export default {
 			}
 		},
 
+		// Kaluza: Toto nazvi nejako inak aby bolo viac jasne ze z coho to preformatovava na co
 		formatData(date) {
 			// format events
 			this.timelineData.tasks.forEach(event => {
@@ -130,11 +137,13 @@ 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 {
@@ -153,6 +162,13 @@ export default {
 		},
 
 		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
@@ -161,6 +177,7 @@ export default {
 		},
 
 		reopenTask(id) {
+			// Kaluza: Toto rovnakym sposobom ako complete task
 			this.timelineData.tasks.filter(task => {
 				if (task.id == id) {
 					task.completed = false
@@ -169,6 +186,7 @@ export default {
 		},
 
 		deleteTask(id) {
+			// Kaluza: Toto rovnako ako complete a reopen
 			this.timelineData.tasks.splice(this.timelineData.tasks.findIndex(item => item.id === id), 1)
 		}
 	}

app/src/plugins/tm@dashboard/teams/_components/a-team-filter.vue

@@ -42,6 +42,7 @@ export default {
 
 	data() {
 		return {
+			// Kaluza: Napojit funkcionalitu
 			employees: ['Foo', 'Bar', 'Fizz', 'Buzz'],
 			selectedDate: new Date(),
 			day: new Date(),

app/src/plugins/tm@dashboard/teams/teams.vue

@@ -6,6 +6,7 @@
 			<Z-timeline :calData="timelineData" :calConfig="config" :splits="splitDays" @eventMoved="onEventMoved" @completeTask="completeTask" @reopenTask="reopenTask" @deleteTask="deleteTask" />
 		</W-loadable>
 
+		<!-- Kaluza: vyhodit toto a nahradit za wToast -->
 		<v-snackbar
 			v-model="errorToast"
 			:timeout="2000"
@@ -54,6 +55,7 @@ export default {
 				this.formatData()
 				this.generateNonWorkingHours(date)
 			} catch(error) {
+				// Kaluza: Upravit podla feedbacku v tasks.modal
 				this.timelineData = {}
 				console.error(error)
 				this.triggerToast("Nepodarilo sa nacitat data!")
@@ -74,6 +76,7 @@ export default {
 			}
 		},
 
+		// Kaluza: Upravit podla feedbacku v tasks.modal
 		formatData() {
 			this.timelineData.tasks = []
 			this.unscheduledTime = 0
@@ -129,11 +132,13 @@ 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 {
@@ -151,6 +156,7 @@ export default {
 			// }
 		},
 
+		// Kaluza: Upravit podla feedbacku v tasks.modal
 		completeTask(id) {
 			this.timelineData.tasks.filter(task => {
 				if (task.id == id) {
@@ -159,6 +165,7 @@ export default {
 			})
 		},
 
+		// Kaluza: Upravit podla feedbacku v tasks.modal
 		reopenTask(id) {
 			this.timelineData.tasks.filter(task => {
 				if (task.id == id) {
@@ -166,7 +173,7 @@ export default {
 				}
 			})
 		},
-		
+
 		deleteTask(id) {
 			this.timelineData.tasks.splice(this.timelineData.tasks.findIndex(item => item.id === id), 1)
 		}