[Projects] Added filters

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

@@ -44,9 +44,10 @@ export default {
 	},
 
 	mounted() {
-		const currentYear = new Date().getFullYear()
+		const currentYear 	= new Date().getFullYear()
+		const monthIndex 	= typeof this.month == 'string' ? parseInt(this.month) - 1 : this.month - 1
 		this.calendarOptions.events = this.events
-		this.$refs.fullCalendar?.getApi().gotoDate(new Date(currentYear, this.month, 1))
+		this.$refs.fullCalendar?.getApi().gotoDate(new Date(currentYear, monthIndex, 1))
 	},
 
 	watch: {

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

@@ -1,18 +1,18 @@
 <template>
 	<v-row class="px-10 py-8 subheader">
-		<v-select v-model="filter.selectedProject" class="subheader-input" :items="[null, ...projects]" item-title="name" item-value="id" label="Projekt" variant="outlined" />
+		<v-select v-model="filter.projectId" class="subheader-input" :items="[null, ...projects]" item-title="name" item-value="id" label="Projekt" variant="outlined" />
 
-		<v-select v-model="filter.selectedTeam" class="subheader-input" :items="[null, ...teams]" label="Tím" variant="outlined" item-title="name" item-value="id" />
+		<v-select v-model="filter.teamId" class="subheader-input" :items="[null, ...teams]" label="Tím" variant="outlined" item-title="name" item-value="id" />
 
-		<v-select v-model="filter.selectedEmployee" class="subheader-input" :items="[null, ...enrichedEmployees]" label="Zamestnanec" variant="outlined" item-title="_fullName" item-value="id" />
+		<v-select v-model="filter.employeeId" class="subheader-input" :items="[null, ...enrichedEmployees]" label="Zamestnanec" variant="outlined" item-title="_fullName" item-value="id" />
 		
-		<v-select v-model="filter.selectedAssignedBy" class="subheader-input" :items="[null, ...enrichedEmployees]" label="Vytvoril" variant="outlined" item-title="_fullName" item-value="id" />
+		<v-select v-model="filter.createdById" class="subheader-input" :items="[null, ...enrichedEmployees]" label="Vytvoril" variant="outlined" item-title="_fullName" item-value="id" />
 
-		<v-select v-model="filter.selectedMonth" class="subheader-input" :items="months" label="Mesiac" variant="outlined" />
+		<v-select v-model="filter.month" class="subheader-input" :items="months" label="Mesiac" variant="outlined" />
 
 		<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>
+			<v-switch v-model="filter.isFinished" color="#6200EE" hide-details></v-switch>
 		</div>
 	</v-row>
 </template>
@@ -26,31 +26,36 @@ 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 }
+				{ title: 'Január', value: '01' },
+				{ title: 'Február', value: '02' },
+				{ title: 'Marec', value: '03' },
+				{ title: 'Apríl', value: '04' },
+				{ title: 'Máj', value: '05' },
+				{ title: 'Jún', value: '06' },
+				{ title: 'Júl', value: '07' },
+				{ title: 'August', value: '08' },
+				{ title: 'September', value: '09' },
+				{ title: 'Október', value: '10' },
+				{ title: 'November', value: '11' },
+				{ title: 'December', value: '12' }
 			],
 
 			filter: {
-				selectedProject: null,
-				selectedTeam: null,
-				selectedEmployee: null,
-				selectedAssignedBy: null,
-				selectedMonth: new Date().getMonth(),
-				showFinishedTasks: false
+				projectId: null,
+				teamId: null,
+				employeeId: null,
+				createdById: null,
+				month: null,
+				isFinished: false
 			}
 		}
 	},
 
+	mounted() {
+		const monthIndex = new Date().getMonth()
+		this.filter.month = monthIndex < 9 ? `0${monthIndex + 1}` : `${monthIndex + 1}`
+	},
+
 	computed: {
 		...mapGetters('tm', [
 			'teams',

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

@@ -1,12 +1,14 @@
 <template>
-	<W-loadable :content="filteredEvents" empty-message="Nepodarilo sa nacitat data!">
-		<A-project-filter @filterChanged="onFilterChanged" />
-		<A-project-calendar :events="filteredEvents" :month="filter.selectedMonth" @open-detail="openMasterTaskModal" />
-	</W-loadable>
+	<div>
+		<A-project-filter v-if="$store.getters['tm/isInitialized']" @filterChanged="onFilterChanged" />
+		
+		<W-loadable :content="filteredProjects" emptyMessage="Nenašli sa žiadne vyhovujúce projekty">
+			<A-project-calendar :events="filteredProjects" :month="filter.month" @open-detail="openMasterTaskModal" />
+		</W-loadable>
+	</div>
 </template>
 
 <script>
-import { mapGetters } from 'vuex'
 import AProjectCalendar from './_components/a-project-calendar.vue'
 import AProjectFilter 	from './_components/a-project-filter.vue'
 
@@ -15,51 +17,20 @@ export default {
 		AProjectCalendar,
 		AProjectFilter
 	},
+	
 	data() {
 		return {
-			selectedProject: null,
-			filter: {
-				selectedMonth: new Date().getMonth()
-			}
+			mastertasks: null,
+			filter: null
 		}
 	},
 
 	computed: {
-		...mapGetters('tm', [
-			'mastertasks'
-		]),
-
-		filteredEvents() {
+		filteredProjects() {
 			if (!this.mastertasks)
 				return null
-
-			if (this.mastertasks.error)
-				return this.mastertasks
-
-			if (!this.mastertasks.length)
-				return []
-
-			// duplicate all tasks
-			let events = this.mastertasks
-
-			// show/hide finished tasks
-			if (!this.filter.showFinishedTasks)
-				events = events.filter(event => !event.is_finished)
-
-			// filter by project_id
-			if(this.filter.selectedProject)
-				events = events.filter(event => event.project_id == this.filter.selectedProject)
-
-			// filter by team_id
-			if (this.filter.selectedTeam)
-				events = events.filter(event => event.team_id == this.filter.selectedTeam)
-
-			// filter by employee_id
-			if (this.filter.selectedEmployee)
-				events = events.filter(event => event.employees.find(employee => employee.id == this.filter.selectedEmployee))
-
-			// format masterTasks to event format for calendar
-			events = events.map(event => {
+			
+			return this.mastertasks.map(event => {
 				return {
 					id: event.id,
 					title: `${event.project_code} - ${event.name}`,
@@ -72,30 +43,35 @@ export default {
 					borderColor: event.color
 				}
 			})
-
-			return events
 		}
 	},
 
-	mounted() {
-		// this.$events.on('on-master-task-deleted', (masterTask) => {
-		// 	this.mastertasks = this.mastertasks.filter(mt => mt.id != masterTask.id)
-		// })
-
-		// this.$events.on('on-master-task-edited', (masterTask) => {
-		// 	this.mastertasks = this.mastertasks.map(mTask => mTask.id == masterTask.id ? masterTask : mTask)
-		// 	this._getData()
-		// })
-	},
-
 	methods: {
-		onFilterChanged(filterValues) {
-			this.filter = filterValues
+		async onFilterChanged(filter) {
+			this.mastertasks = null
+			this.filter = filter
+			const urlQueryObject = {}
+
+			if (filter.employeeId) 	urlQueryObject.employee_id 	= filter.employeeId
+			if (filter.projectId) 	urlQueryObject.project_id 	= filter.projectId
+			if (filter.teamId) 		urlQueryObject.team_id 		= filter.teamId
+			if (filter.createdById) urlQueryObject.created_by 	= filter.createdById
+			if (filter.isFinished)  urlQueryObject.is_finished 	= filter.isFinished ? 1 : 0
+			if (filter.month)  		urlQueryObject.created_at 	= filter.month
+
+			const queryParameters = new URLSearchParams(urlQueryObject).toString()
+
+			try {
+				const { mastertasks } = await this.$axios.get_auth(`v1/mastertasks?${queryParameters}`)
+				this.mastertasks = mastertasks
+			} catch (error) {
+				this.$toast.error('Nepodarilo sa nacitat data!')
+			}
 		},
 
-		openMasterTaskModal(masterTaskId) {
-			const masterTask = this.mastertasks.find(masterTask => masterTask.id == masterTaskId)
-			this.$events.emit('show-master-task-modal', {masterTask, editMode: false})
+		openMasterTaskModal(mastertaskId) {
+			const mastertask = this.mastertasks.find(mastertask => mastertask.id == mastertaskId)
+			this.$events.emit('show-master-task-modal', {mastertask, editMode: false})
 		}
 	}
 }