sub-task-modal

app/public/mock/v1/master-tasks.GET.json

@@ -0,0 +1,112 @@
+{
+	"data": [
+		{
+			"id": 1,
+			"name": "Master task 1",
+			"description": "Toto je master task cislo 1",
+			"duration": 130000,
+			"time_worked": 0,
+			"is_finished": false,
+			"starts_at": "2022-05-10T00:00:00+00:00",
+			"deadline": "2022-11-10T00:00:00+00:00",
+			"project_code": "CO-2201",
+			"team_id": 1,
+			"employees": [
+				{
+					"id": 1,
+					"duration": 1300000,
+					"name": "Viliam",
+					"surname": "Sedivy"
+				},
+	
+				{
+					"id": 4,
+					"duration": 1000000,
+					"name": "Pavel",
+					"surname": "Gajdos"
+				},
+	
+				{
+					"id": 5,
+					"duration": 3100000,
+					"name": "Francesca",
+					"surname": "Spinelli"
+				}
+			],
+			"files": []
+	
+		},
+		{
+			"id": 2,
+			"name": "Master task cislo 2",
+			"description": "Toto je master task cislo 2",
+			"duration": 100000,
+			"time_worked": 0,
+			"is_finished": false,
+			"starts_at": "2022-03-10T00:00:00+00:00",
+			"deadline": "2022-11-10T00:00:00+00:00",
+			"project_code": "CO-2202",
+			"team_id": 1,
+			"employees": [
+				{
+					"id": 2,
+					"duration": 1300000,
+					"name": "Simona",
+					"surname": "Tremkova"
+				},
+	
+				{
+					"id": 3,
+					"duration": 1000000,
+					"name": "Matej",
+					"surname": "Macho"
+				}
+			],
+			"files": []
+	
+		},
+		{
+			"id": 3,
+			"name": "Master task cislo 3",
+			"description": "Toto je master task cislo 3",
+			"duration": 9500000,
+			"time_worked": 0,
+			"is_finished": false,
+			"starts_at": "2022-05-10T00:00:00+00:00",
+			"deadline": "2022-11-10T00:00:00+00:00",
+			"project_code": "CO-2203",
+			"team_id": 1,
+			"employees": [
+				{
+					"id": 1,
+					"duration": 1300000,
+					"name": "Rastislav",
+					"surname": "Kuttner"
+				},
+	
+				{
+					"id": 6,
+					"duration": 1000000,
+					"name": "Lenka",
+					"surname": "Nemeckova"
+				},
+	
+				{
+					"id": 7,
+					"duration": 3100000,
+					"name": "Peter",
+					"surname": "Bucan"
+				},
+				{
+					"id": 9,
+					"duration": 3200000,
+					"name": "Viliam",
+					"surname": "Sedivy"
+				}
+			],
+			"files": []
+	
+		}
+	],
+	"status": 200
+}

app/src/plugins/app/_config/main.ts

@@ -48,6 +48,7 @@ const options: Options = {
 			'POST v1/auth/post': true,
 
 			'GET v1/master-tasks/(id)': true,
+			'GET v1/master-tasks': true,
 			'POST v1/master-tasks/(id)': true,
 			'DELETE v1/master-tasks/(id)': true,
 			'POST v1/master-tasks': true,

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

@@ -18,7 +18,7 @@
 
 					<v-list>
 						<v-list-item class="cursor-pointer hover-background" @click="createMasterTaskDialog = true">MASTER TASK</v-list-item>
-						<v-list-item class="cursor-pointer hover-background" :disabled="true">SUB TASK</v-list-item>
+						<v-list-item class="cursor-pointer hover-background" @click="createSubTaskDialog = true">SUB TASK</v-list-item>
 						<v-list-item class="cursor-pointer hover-background" @click="createTeamDialog = true">TÍM</v-list-item>
 						<v-list-item class="cursor-pointer hover-background" @click="createBlockerDialog = true">BLOCKER</v-list-item>
 					</v-list>
@@ -51,6 +51,7 @@
 		</div>
 
 		<Z-master-task-modal 	:visible="createMasterTaskDialog ? true : false" 	@close="createMasterTaskDialog = false"/>
+		<Z-sub-task-modal 		:visible="createSubTaskDialog ? true : false" 		@close="createSubTaskDialog = false"/>
 		<Z-blocker-modal 		:visible="createBlockerDialog ? true : false" 		@close="createBlockerDialog = false" />
 		<Z-team-modal 			:visible="createTeamDialog ? true : false" 			@close="createTeamDialog = false" />
 	</v-app-bar>
@@ -60,12 +61,14 @@
 import ZTeamModal 		from '@/plugins/tm@modal/team/z-team-modal.vue'
 import ZBlockerModal 	from  '@/plugins/tm@modal/blocker/z-blocker-modal.vue'
 import ZMasterTaskModal from '@/plugins/tm@modal/master-task/z-master-task-modal.vue'
+import ZSubTaskModal	from '@/plugins/tm@modal/sub-task/z-sub-task-modal.vue'
 
 export default {
 	components: {
 		ZTeamModal,
 		ZBlockerModal,
-		ZMasterTaskModal
+		ZMasterTaskModal,
+		ZSubTaskModal
 	},
 
 	data() {
@@ -73,7 +76,8 @@ export default {
 			user: null,
 			createTeamDialog: false,
 			createBlockerDialog: false,
-			createMasterTaskDialog: false
+			createMasterTaskDialog: false,
+			createSubTaskDialog: false
 		}
 	},
 

app/src/plugins/tm@modal/master-task/z-master-task-modal.vue

@@ -1,6 +1,6 @@
 <template>
 	<v-dialog v-model="show" max-width="650" max-height="90%" height="700px">
-		<v-card height="100%" class="d-flex flex-column gg">
+		<v-card height="100%" class="d-flex flex-column scrolling">
 			<div class="d-flex justify-space-between align-center modal-header">
 				<h1>Vytvoriť master task</h1>
 				<v-icon
@@ -66,7 +66,6 @@
 					v-model="selectedTeam"
 					@focus="onInputFocus"
 					class="modal-input border-select"
-					:class="{ error: v$.masterTask.team.$errors.length }"
 					label="Tím"
 					variant="solo"
 					:items="teamsOptions"
@@ -167,8 +166,7 @@ export default {
 			teams: null,
 			employees: null,
 			selectedTeam: '',
-			showAddEmployeeInput: false,
+			showAddEmployeeInput: false
-			mrenka: null
 		}
 	},
 
@@ -352,6 +350,6 @@ export default {
 	border: 1px solid #E0E0E0
 	border-radius: 4px
 	height: 50px
-.gg
+.scrolling
 	overflow: hidden !important
 </style>

app/src/plugins/tm@modal/sub-task/z-sub-task-modal.vue

@@ -0,0 +1,318 @@
+<template>
+	<v-dialog v-model="show" max-width="650" max-height="90%" height="700px">
+		<v-card height="100%" class="d-flex flex-column scrolling">
+			<div class="d-flex justify-space-between align-center modal-header">
+				<h1>Vytvoriť subtask</h1>
+				<v-icon
+					@click.stop="show = false"
+					icon="mdi-close"
+					size="large"
+				></v-icon>
+			</div>
+
+			<v-card-actions class="d-flex flex-column modal-content">
+				<v-text-field
+					v-model="subTask.project_code"
+					@focus="onInputFocus"
+					class="modal-input"
+					label="Kód projektu"
+					variant="solo"
+					disabled
+				></v-text-field>
+
+				<v-select
+					v-model="selectedTeam"
+					@focus="onInputFocus"
+					class="modal-input border-select"
+					label="MasterTask"
+					variant="solo"
+					:items="teamsOptions"
+				></v-select>
+
+				<p v-if="subTask.team.employees" class="d-flex justify-start align-center w-100 mb-3">Priradení zamestnanci</p>
+
+				<v-text-field
+					v-for="(employee, index) in subTask.employees"
+					:key="employee.id"
+					@focus="onInputFocus"
+					class="modal-input"
+					:value="`${employee.name} ${employee.surname}`"
+					variant="solo"
+					v-model="subTask.employees[index].name"
+					disabled
+				>
+					<p class="employee-select-avatar d-flex justify-center align-center">
+						{{ employee.name.charAt(0) + employee.surname.charAt(0) }}
+					</p>
+				</v-text-field>
+
+				<Z-autocomplete
+					v-if="showAddEmployeeInput"
+					:options="employeesOptions"
+					:validations="v$.subTask.employees"
+					:class="{ error: v$.subTask.employees.$errors.length }"
+					class="modal-input"
+					@option-selected="employeeSelected"
+				/>
+
+				<v-btn class="w-100 mb-5 add-employee-btn" :disabled="!subTask.team.employees" @click="showAddEmployeeInput = true">
+					<v-icon class="mx-1" icon="mdi-plus" />Pridať zamestnanca
+				</v-btn>
+
+				<Datepicker
+					class="modal-input mb-5"
+					v-model="subTask.date"
+					format="dd.MM.yyyy, HH:mm"
+					locale="sk"
+					:class="{ error: v$.subTask.date.$errors.length }"
+					@focus="onDateFocus"
+					:validations="v$.subTask.date"
+					select-text="Vybrať"
+					cancel-text="Zrušiť"
+					placeholder="Trvanie od - do"
+					:start-time="startTime"
+					range
+				/>
+
+				<v-text-field
+					v-model="subTask.duration"
+					@focus="onInputFocus"
+					class="modal-input"
+					variant="solo"
+					type="number"
+					label="Časový odhad"
+					append-inner-icon="mdi-clock-outline"
+				></v-text-field>
+
+				<v-textarea
+					:class="{ error: v$.subTask.description.$errors.length }"
+					label="Popis"
+					class="modal-input"
+					variant="solo"
+					v-model="subTask.description"
+				></v-textarea>
+
+				<Z-files-upload @files-uploaded="filesUploaded"/>
+			</v-card-actions>
+
+			<v-btn class="z-btn" @click="save()">VYTVORIŤ</v-btn>
+		</v-card>
+	</v-dialog>
+</template>
+
+<script>
+import Datepicker 		from '@vuepic/vue-datepicker'
+import ZFilesUpload 	from '@/plugins/tm@_components/z-files-upload.vue'
+import useVuelidate 	from '@vuelidate/core'
+import { required } 	from '@vuelidate/validators'
+import errorUtils 		from '@/plugins/lib@auth/_utils/error.utils'
+import ZAutocomplete 	from '@/plugins/tm@_components/z-autocomplete.vue'
+
+const atLeastOne = (value) => value.length
+
+export default {
+	components: {
+		Datepicker,
+		ZFilesUpload,
+		ZAutocomplete
+	},
+
+	props: {
+		visible: {
+			type: Boolean,
+			required: true
+		},
+
+		subTaskId: {
+			type: Number || null,
+			required: false,
+			default: null
+		}
+	},
+
+	data() {
+		return {
+			subTask: {
+				project_code: null,
+				duration: null,
+				date: null,
+				team: {},
+				description: null,
+				employees: [],
+				files: []
+			},
+			errorUtils,
+			v$: useVuelidate(),
+			preventInputFocus: false,
+			teams: null,
+			employees: null,
+			selectedTeam: '',
+			selectedMasterTaskCode: '',
+			showAddEmployeeInput: false,
+			masterTasks: null
+		}
+	},
+
+	validations() {
+		return {
+			subTask: {
+				project_code: { required },
+				duration: { required },
+				date: { required },
+				team: { required },
+				description: { required },
+				employees: { atLeastOne }
+			},
+		}
+	},
+
+	async created() {
+		try {
+			this.masterTasks = await this.$axios.get_auth_data('v1/master-tasks')
+			this.employees 	= await this.$axios.get_auth_data('v1/employees')
+		} catch (error) {
+			console.log(error)
+		}
+	},
+
+	methods: {
+		async save() {
+			if (!(await this.v$.$validate())) return console.log(this.v$)
+
+			try {
+				if (this.subTask.id)
+					await this._update()
+				else
+					await this._create()
+
+				this.$router.push({ name: 'Dashboard - Tasks' })
+				this.show = false
+			} catch (error) {
+				console.log(error)
+			}
+		},
+
+		async _create() {
+			try {
+				await this.$axios.post_auth('v1/master-tasks')
+			} catch (error) {
+				this.$toast.error(error)
+			}
+		},
+
+		async _update() {
+			try {
+				await this.$axios.post_auth(`v1/master-tasks/${this.subTask.id}`)
+			} catch (error) {
+				this.$toast.error(error)
+			}
+		},
+
+		employeeSelected(selectedOption) {
+			const employee = this.employees.find((empl) => empl.id == selectedOption.key)
+			this.subTask.employees.push(employee)
+			this.showAddEmployeeInput = false
+		},
+
+		// Vuetify input was automatically focus after date input was clicked. This will prevent this unwanted behavior
+		onDateFocus($event) {
+			if ($event == undefined) {
+				this.preventInputFocus = true
+			}
+		},
+
+		onInputFocus($event) {
+			if (this.preventInputFocus) {
+				$event.target.blur()
+				this.preventInputFocus = false
+			}
+		},
+
+		filesUploaded(files) {
+			this.subTask.files = files
+		}
+	},
+
+	computed: {
+		teamsOptions() {
+			return this.masterTasks.map(masterTask => `${masterTask.name} - ${masterTask.id}`)
+		},
+
+		employeesOptions() {
+			const selectedEmployeesIds = this.subTask.employees.map(
+				(employee) => employee.id
+			)
+			const employees = this.employees.filter(
+				(employee) => !selectedEmployeesIds.includes(employee.id)
+			) || []
+
+			return employees.map((employee) => {
+				return {
+					key: employee.id,
+					value: `${employee.name} ${employee.surname}`,
+				}
+			})
+		},
+
+		show: {
+			get() {
+				return this.visible
+			},
+
+			set(value) {
+				if (!value) this.$emit('close')
+			}
+		},
+	},
+
+	watch: {
+		selectedTeam() {
+			this.subTask.team 			= this.masterTasks.find(masterTask => `${masterTask.name} - ${masterTask.id}` == this.selectedTeam)
+			this.subTask.employees 		= this.subTask.team.employees
+			this.subTask.project_code	= this.masterTasks.filter(x => `${x.name} - ${x.id}` == this.selectedTeam)[0].project_code
+		}
+	}
+}
+</script>
+
+<style lang="sass" scoped>
+.modal-input
+	width: 100% !important
+	flex: 0 0 auto
+.modal-header
+	flex: 0 0 auto
+
+.modal-content
+	flex: 1 1 100%
+	margin: 10px 0
+	overflow-y: scroll
+
+.z-btn
+	height: 50px
+	width: 100%
+	flex: 0 0 auto
+
+.employee-position
+	position: relative
+
+.employee-select-avatar
+	background: #6200EE
+	color: #fff
+	border-radius: 50%
+	padding: 13px
+	font-size: 11.5px
+	height: 24px
+	width: 24px
+	position: absolute
+	top: 50%
+	right: 0
+	transform: translate(-50%, -50%)
+
+.add-employee-btn
+	color: #6200EE
+	border: 1px solid #E0E0E0
+	border-radius: 4px
+	height: 50px
+.scrolling
+	overflow: hidden !important
+</style>