[Projects] Added filters

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})
 		}
 	}
 }