Merge branch 'main' of bitbucket.org:studiotem/jandl-taskmanager-app

app/src/plugins/app/_layout/app/_components/a-header.vue

@@ -93,7 +93,13 @@ export default {
 		createBlocker() {
 			this.$events.emit('show-blocker-modal', {})
 		}
+	},
+
+	watch: {
+		'$route' (to, from) {
+			this.search = ''
 		}
+	},
 }
 </script>
 

app/src/plugins/lib@search/search/_components/a-seach-result-task.vue

@@ -1,55 +0,0 @@
-<template>
-	<div>
-		<h1 class="px-3 py-3">Tasks</h1>
-		<v-table>
-			<tbody>
-				<tr v-for="subtask in subtasks" :key="subtask.id">
-					<td>{{ subtask.project_code }}</td>
-					<td>{{ subtask.title }}</td>
-					<td>		
-						<p>{{ subtask.user.name + subtask.user.surname }}</p>				
-						<p class="employee-avatar d-flex justify-center align-center">
-							{{ subtask.user.name.charAt(0) }}
-						</p>
-					</td>
-					<td class="task-action">
-						<div class="d-flex justify-start">
-							<img class="pencil-icon" :src="require('@/plugins/app/_img/icons/checkmark.svg')" alt="checkmark-icon">
-							<img class="pencil-icon" :src="require('@/plugins/app/_img/icons/pencil.svg')" alt="pencil-icon">
-							<img class="trash-icon" :src="require('@/plugins/app/_img/icons/bin.svg')" alt="trash-icon">
-						</div>
-					</td>
-				</tr>
-			</tbody>
-		</v-table>
-	</div>
-</template>
-  
-<script>
-
-export default {
-	props: {
-		subtasks: {
-			type: Array,
-			required: true
-		}
-	},
-}
-</script>
-
-<style lang="sass" scoped>
-v-table, th, td
-	border: thin solid rgba(var(--v-border-color), var(--v-border-opacity))
-
-.employee-avatar
-	background: #6200EE
-	color: #fff
-	border-radius: 50%
-	padding: 13px
-	font-size: 11.5px
-	height: 24px
-	width: 24px
-
-.task-action
-
-</style>

app/src/plugins/lib@search/search/_components/a-search-result-mastertasks.vue

@@ -0,0 +1,61 @@
+<template>
+	<div v-if="Array.isArray(mastertasks) && mastertasks.length">
+		<h1 class="px-3 py-3">Mastertasks</h1>
+		<v-table>
+			<tbody>
+				<tr v-for="mastertask in mastertasks" :key="mastertask.id">
+					<td>{{ mastertask.name }}</td>
+					<td class="task-action">
+						<div class="d-flex justify-start">
+							<img class="pencil-icon" :src="require('@/plugins/app/_img/icons/pencil.svg')" alt="pencil-icon" @click.stop="openEditMasterTaskModal(mastertask)">
+							<img class="trash-icon" :src="require('@/plugins/app/_img/icons/bin.svg')" alt="trash-icon" @click.stop="openDeleteMasterTaskModal(mastertask)">
+						</div>
+					</td>
+				</tr>
+			</tbody>
+		</v-table>
+	</div>
+	<div v-else class="px-3 py-3">
+		<h1>Mastertasks</h1>
+		<p>No mastertasks match the search</p>
+	</div>
+</template>
+  
+<script>
+
+export default {
+	props: {
+		mastertasks: {
+			type: Array,
+			required: true
+		}
+	},
+
+	methods: {
+		openDeleteMasterTaskModal(mastertask) {
+			this.$events.emit('show-delete-master-task-modal', { mastertask })
+		},
+
+		openEditMasterTaskModal(mastertask) {
+			this.$events.emit('show-mastertask-modal', { mastertask, editMode: false })
+		},
+	}
+}
+</script>
+
+<style lang="sass" scoped>
+v-table, th, td
+	border: thin solid rgba(var(--v-border-color), var(--v-border-opacity))
+
+.employee-avatar
+	background: #6200EE
+	color: #fff
+	border-radius: 50%
+	padding: 13px
+	font-size: 11.5px
+	height: 24px
+	width: 24px
+
+.task-action
+
+</style>

app/src/plugins/lib@search/search/_components/a-search-result-subtasks.vue

@@ -0,0 +1,90 @@
+<template>
+	<div v-if="Array.isArray(subtasks) && subtasks.length">
+		<h1 class="px-3 py-3">Tasks</h1>
+		<v-table>
+			<tbody>
+				<tr v-for="subtask in enrichedtasks" :key="subtask.id">
+					<td>{{ subtask.master_task }}</td>
+					<td class="d-flex align-center">
+						<p class="employee-selected-avatar d-flex justify-center align-center">
+							{{ subtask._employeeInitials }}
+						</p>
+						<p class="ml-2">{{ subtask._employeeFullName }}</p>
+					</td>
+					<td class="task-action">
+						<div class="d-flex justify-start">
+							<img v-if="subtask.is_finished" class="pencil-icon is-finished" :src="require('@/plugins/app/_img/icons/checkmark.svg')" alt="checkmark-icon" @click.stop="clickCompleteTask(subtask)">
+							<img v-if="!subtask.is_finished" class="pencil-icon" :src="require('@/plugins/app/_img/icons/checkmark.svg')" alt="checkmark-icon" @click.stop="clickCompleteTask(subtask)">
+							<img class="pencil-icon ml-2" :src="require('@/plugins/app/_img/icons/eye.svg')" alt="pencil-icon" @click.stop="openTaskModal(subtask)">
+							<img class="trash-icon" :src="require('@/plugins/app/_img/icons/bin.svg')" alt="trash-icon" @click.stop="openDeleteTaskModal(subtask)">
+						</div>
+					</td>
+				</tr>
+			</tbody>
+		</v-table>
+	</div>
+	<div v-else class="px-3 py-3">
+		<h1>Subtasks</h1>
+		<p>No subtasks match the search</p>
+	</div>
+</template>
+  
+<script>
+import { mapGetters } from 'vuex'
+
+export default {
+	props: {
+		subtasks: {
+			type: Array,
+			required: true
+		}
+	},
+
+	computed: {
+		...mapGetters('tm', ['enrichedEmployees']),
+
+		enrichedtasks() {
+			return this.subtasks.map(subtask => {
+				const employee = this.enrichedEmployees.find(employee => employee.id == subtask.employee_id)
+
+				return {
+					...subtask,
+					_employeeInitials: employee._initials,
+					_employeeFullName: employee._fullName
+				}
+			})
+		}
+	},
+
+	methods: {
+		openDeleteTaskModal(subtask) {
+			this.$events.emit('show-delete-task-modal', { subtask })
+		},
+
+		openTaskModal(subtask) {
+			this.$events.emit('show-subtask-modal', { subtask, editMode: false })
+		},
+
+		async clickCompleteTask(subtask) {
+			this.$events.emit('show-complete-task-modal', { subtask })
+		}
+	}
+}
+</script>
+
+<style lang="sass" scoped>
+v-table, th, td
+	border: thin solid rgba(var(--v-border-color), var(--v-border-opacity))
+
+.employee-avatar
+	background: #6200EE
+	color: #fff
+	border-radius: 50%
+	padding: 13px
+	font-size: 11.5px
+	height: 24px
+	width: 24px
+
+.task-action
+
+</style>

app/src/plugins/lib@search/search/_components/a-search-result-team.vue

@@ -1,5 +1,5 @@
 <template>
-	<div>
+	<div v-if="Array.isArray(teams) && teams.length">
 		<h1 class="px-3 py-3">Teams</h1>
 		<v-table>
 			<tbody>
@@ -15,6 +15,10 @@
 			</tbody>
 		</v-table>
 	</div>
+	<div v-else class="px-3 py-3">
+		<h1>Teams</h1>
+		<p>No teams match the search</p>
+	</div>
 </template>
   
 <script>
@@ -24,6 +28,16 @@ export default {
 			type: Array,
 			required: true
 		}
+	},
+
+	methods: {
+		editTeam(team) {
+			this.$events.emit('show-team-modal', {team})
+		},
+
+		deleteTeam(team) {
+			this.$events.emit('show-delete-team-modal', {team})
+		}
 	}
 }
 </script>

app/src/plugins/lib@search/search/search.vue

@@ -1,44 +1,53 @@
 <template>
 	<form>
+		<A-search-result-mastertasks v-if="searchResults?.mastertasks" :mastertasks="searchResults.mastertasks"/>
+		<A-search-result-subtasks v-if="searchResults?.subtasks" :subtasks="searchResults.subtasks" />
 		<A-search-result-team v-if="searchResults?.teams" :teams="searchResults.teams" />
-		<A-search-result-tasks v-if="searchResults?.tasks" :subtasks="searchResults.tasks" />
 	</form>
 </template>
 
 <script>
 import { debounce } 				from 'lodash-es'
 import ASearchResultTeam 			from '@/plugins/lib@search/search/_components/a-search-result-team.vue'
-import ASearchResultTasks 	from '@/plugins/lib@search/search/_components/a-seach-result-task.vue'
+import ASearchResultSubtasks 		from '@/plugins/lib@search/search/_components/a-search-result-subtasks.vue'
+import ASearchResultMastertasks 	from '@/plugins/lib@search/search/_components/a-search-result-mastertasks.vue'
 
 export default {
 	components: {
 		ASearchResultTeam,
-		ASearchResultTasks
+		ASearchResultSubtasks,
+		ASearchResultMastertasks
 	},
 
 	data() {
 		return {
-			searchResults: [],
+			searchResults: {},
 			search: ''
 		}
 	},
 
 	created() {
-		try {
-			this.searchResults = this.$axios.get_auth_data('v1/search')
-		} catch (error) {
-			this.$toast.error(error)
-		}
-
 		this.$events.on('onSearch', (search) => {
 			this.search = search
 		})
 	},
 
+	watch: {
+		search(newVal) {
+			this.updateSearchResults(newVal)
+		}
+	},
+	
 	methods: {
-		debounceSearch: debounce(function () {
-			this.search()
-		}, 300),
+		updateSearchResults: debounce(async function (search) {
+			try {
+				const { mastertasks, subtasks, teams} = await this.$axios.get_auth(`v1/search?q=${search}`)
+				this.searchResults = {mastertasks: mastertasks.data, subtasks: subtasks.data, teams: teams.data}
+				console.log(this.searchResults)
+			} catch (error) {
+				this.$toast.error(error)
+			}
+		}, 500)
 	}
 }
 </script>

app/src/plugins/tm@modal/blocker/z-blocker-modal.vue

@@ -10,7 +10,7 @@
 				<v-card-actions class="d-flex flex-column modal-content">
 					<v-text-field @focus="onInputFocus" class="modal-input" label="Názov blockeru" :class="{ error: v$.blocker.name.$errors.length }" :hint="v$.blocker.name.$errors ? errorUtils.parseErrors(v$.blocker.name.$errors) : null" v-model="blocker.name" variant="solo"></v-text-field>
 					
-					<!-- <v-autocomplete
+					<v-autocomplete
 						clearable
 						label="Vyhľadať zamestnanca"
 						:items="[...enrichedEmployees]" 
@@ -18,8 +18,10 @@
 						item-value="id"
 						variant="solo"
 						class="modal-input" 
-					/> -->
-					<Z-autocomplete label="Vyhľadať zamestnanca" :value="blocker?.employee ? `${blocker?.employee?.name} ${blocker?.employee?.surname}` : ''" :options="enrichedEmployees.map(employee => ({key: employee.id, value: employee._fullName}))" :clear-on-submit="false" :class="{ error: v$.blocker.employee.$errors.length }" class="modal-input" @option-selected="onEmployeeSelected" />
+
+						v-model="blocker.employee_id"
+					/>
+					<!-- <Z-autocomplete label="Vyhľadať zamestnanca" :value="blocker?.employee ? `${blocker?.employee?.name} ${blocker?.employee?.surname}` : ''" :options="enrichedEmployees.map(employee => ({key: employee.id, value: employee._fullName}))" :clear-on-submit="false" :class="{ error: v$.blocker.employee.$errors.length }" class="modal-input" @option-selected="onEmployeeSelected" /> -->
 					<Datepicker class="modal-input mb-5" v-model="datepicker" format="dd.MM.yyyy" locale="sk" :class="{ error: v$.datepicker.$errors?.length }" :validations="v$.datepicker" select-text="Vybrať" cancel-text="Zrušiť" placeholder="Dátum" :enable-time-picker="false" ref="datepicker" />
 
 					<v-text-field v-model="starts_at_time" type="time" variant="solo" bg-color="white" :hint="v$.starts_at_time.$errors ? errorUtils.parseErrors(v$.starts_at_time.$errors) : null" :class="{ error: v$.starts_at_time.$errors.length }" class="mb-1 modal-input" label="Začiatok" />
@@ -40,7 +42,7 @@ import errorUtils from "@/plugins/lib@auth/_utils/error.utils"
 import VuetifyFixFocusMixin from "@/plugins/tm@modal/_mixins/vuetify-fix-focus"
 import { mapGetters } 		from "vuex"
 import moment 				from "moment"
-import ZAutocomplete 	from '@/plugins/tm@_components/z-autocomplete.vue'
+// import ZAutocomplete 	from '@/plugins/tm@_components/z-autocomplete.vue'
 
 export default {
 	mixins: [VuetifyFixFocusMixin],
@@ -49,7 +51,7 @@ export default {
 
 	components: {
 		Datepicker,
-		ZAutocomplete
+		// ZAutocomplete
 	},
 
 	data() {
@@ -76,7 +78,7 @@ export default {
 				name: { required },
 				start: { required },
 				end: { required },
-				employee: { required }
+				// employee: { required }
 			},
 
 			starts_at_time: { required },
@@ -102,7 +104,8 @@ export default {
 					this.starts_at_time = moment(blocker.start).format("HH:mm")
 					this.ends_at_time = moment(blocker.end).format("HH:mm")
 					this.datepicker = new Date(blocker.start)
-
+					blocker.employee_id = blocker.employee.id
+					//fixnut validacie employee_id
 					this.blocker = blocker
 				} else {
 					this.blocker = { start: null }
@@ -116,7 +119,7 @@ export default {
 			if (!(await this.v$.$validate())) return
 
 			try {
-				this.blocker.employee_id = this.blocker.employee?.id
+				// this.blocker.employee_id = this.blocker.employee?.id
 
 				if (this.blocker.id) {
 					const { blocker } = await this.$axios.put_auth(`v1/blockers/${this.blocker.id}`, this.blocker)

package-lock.json

@@ -0,0 +1,6 @@
+{
+  "name": "jandl-taskmanager-app",
+  "lockfileVersion": 2,
+  "requires": true,
+  "packages": {}
+}