[Projects overview] Added filter logics and prepared for BE

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

@@ -1,8 +1,8 @@
 <template>
 	<div>
-		<W-loadable :content="events" empty-message="Nepodarilo sa nacitat data!">
-			<A-project-filter :projects="projects" @filterChanged="onFilterChanged" />
-			<A-project-calendar :events="filteredEvents" :month="filterSettings.selectedMonth" />
+		<W-loadable :content="masterTasks" empty-message="Nepodarilo sa nacitat data!">
+			<A-project-filter :projects="projects" :teams="teams" :employees="employees" @filterChanged="onFilterChanged" />
+			<A-project-calendar :events="filteredEvents" :month="filter.selectedMonth" @open-detail="openMasterTaskModal" />
 		</W-loadable>
 	</div>
 </template>
@@ -10,6 +10,7 @@
 <script>
 import AProjectCalendar from './_components/a-project-calendar.vue'
 import AProjectFilter 	from './_components/a-project-filter.vue'
+import moment from 'moment'
 
 export default {
 	components: {
@@ -18,47 +19,96 @@ export default {
 	},
 	data() {
 		return {
-			filterSettings: {
-				selectedEmployee: null,
-				selectedMonth: new Date().getMonth(),
-				selectedProject: null,
-				selectedTeam: null,
-				showFinishedTasks: false
-			},
 			// Kravarik: Toto je preco hardcodenute?
 			projects: ['Projekt1', 'Projekt2', 'Projekt3', 'Projekt4'],
+			masterTasks: null,
+			teams: null,
+			employees: null,
 			selectedProject: null,
-			events: [],
-			filteredEvents: []
+			filter: {
+				selectedMonth: new Date().getMonth()
+			}
 		}
 	},
+
+	computed: {
+		filteredEvents() {
+			if (!this.masterTasks || this.masterTasks.error)
+				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 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 => {
+				const color = this._stringToHexColor(`${event.project_code}${event.name}`)
+
+				return {
+					id: event.id,
+					title: `${event.project_code} - ${event.name}`,
+					title_html: `${event.project_code} - <b>${event.name}</b>`,
+					start: new Date(event.starts_at),
+					end: new Date(event.deadline),
+					is_finished: event.is_finished,
+					project_code: event.project_code,
+					backgroundColor: `${color}CC`,
+					borderColor: color
+				}
+			})
+
+			return events
+		}
+	},
+
 	created() {
 		this._getData()
 	},
+
 	methods: {
 		async _getData() {
 			try {
-				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)
+				this.teams 			= await this.$axios.get_auth_data('v1/teams')
+				this.employees 		= await this.$axios.get_auth_data('v1/employees')
+				this.masterTasks 	= await this.$axios.get_auth_data('v1/master-tasks')
 			} catch (error) {
-				this.$toast.error(error)
+				this.masterTasks = {error}
 			}
 		},
 
 		onFilterChanged(filterValues) {
 			this.filter = filterValues
-			this.filteredEvents = this.events.filter((item) => this.filter.showFinishedTasks || item.is_finished == false)
+		},
+
+		openMasterTaskModal(masterTaskId) {
+			const masterTask = this.masterTasks.find(masterTask => masterTask.id == masterTaskId)
+			this.$events.emit('show-master-task-modal', {masterTask, editMode: false})
+		},
+
+		_stringToHexColor(string) {
+			let hash = 0;
+
+			for (let i = 0; i < string.length; i++) {
+				hash = string.charCodeAt(i) + ((hash << 5) - hash);
+			}
+
+			let color = '#';
+			for (let i = 0; i < 3; i++) {
+				let value = (hash >> (i * 8)) & 0xFF;
+				color += ('00' + value.toString(16)).substr(-2);
+			}
+			return color;
 		}
 	}
 }