JandL_gitea/jandl-taskmanager-app
1
0 Fork 0
mirror of https://bitbucket.org/studiotem/jandl-taskmanager-app.git synced 2026-10-21 22:39:34 +00:00
Code Issues Packages Projects Releases Wiki Activity

[master-task-modal employees]

Browse Source
This commit is contained in:
romankko2 committed 2022-12-09 17:37:38 +01:00
1 parent dd05c715b5
commit 3096d137d9
168 files changed
+404 -1058
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

app/src/plugins/app/_config/router.ts
+6
View File
@@ -78,6 +78,12 @@ const routes: Array<RouteRecordRaw> = [
name: 'Overview - Teams',
meta: { title: 'Tímy' },
component: () => import('@/plugins/tm@overview/teams/teams.vue')
},
{
path: '/app/dashboard/user',
name: 'Dashboard - User',
meta: { title: 'Váš profil' },
component: () => import('@/plugins/tm@profile/profile/my-profile.vue')
}
]
}
app/src/plugins/app/_layout/app/_components/a-header.vue
+1 -1
View File
@@ -28,7 +28,7 @@
<template v-slot:activator="{ props }">
<v-btn class="menu-dropdown" v-bind="props">
<div class="d-flex justify-between align-center">
<p class="employee-select-avatar d-flex justify-center align-center">
<p class="employee-select-avatar d-flex justify-center align-center" @click.stop="$router.push({name: 'Dashboard - User'})">
{{ user.user.name.charAt(0) + user.user.surname.charAt(0) }}
</p>
app/src/plugins/app/_theme/global.sass
+2 -1
View File
@@ -32,4 +32,5 @@ th
.border-select .v-input__control
border: 1px solid #E5E5E5 !important
input[type="time"]::-webkit-calendar-picker-indicator
display: none
app/src/plugins/lib@auth/_theme/auth.theme.sass
+3
View File
@@ -54,6 +54,9 @@
.error .v-field
border: .5px solid red !important
.error .dp__input
border: .5px solid red !important
.v-input__append
margin: 0 !important
app/src/plugins/tm@_components/z-autocomplete.vue
+1 -1
View File
@@ -21,7 +21,7 @@
</template>
<script>
import errorUtils from '@/plugins/lib@auth/_utils/error.utils'
import errorUtils from '@/plugins/lib@auth/_utils/error.utils'
export default {
emits: ['option-selected'],
app/src/plugins/tm@_components/z-files-upload.vue
+4 -3
View File
@@ -1,5 +1,5 @@
<template>
<div>
<div class="w-100 d-flex align-center">
<input type="file" multiple name="file" id="fileInput" class="hidden-input" accept="*"
@change="onChange" ref="fileUpload"
/>
@@ -8,12 +8,13 @@
<v-icon class="mx-1" icon="mdi-cloud-upload-outline"></v-icon>NAHRAŤ
</v-btn>
<div v-if="files.length">
<div v-if="files.length" class="m-2 d-flex align-center flex-wrap">
<div
v-for="file in files"
:key="file.name"
class="mx-2"
>
<v-chip>
<v-chip class="mt-2">
{{ file.name }}
<v-icon class="mx-1" icon="mdi-paperclip"></v-icon>
<v-icon size="small" icon="mdi-close" @click.stop="remove(files.indexOf(file))"></v-icon>
app/src/plugins/tm@modal/blocker/z-blocker-modal.vue
+30 -2
View File
@@ -16,6 +16,12 @@
@focus="onInputFocus"
class="modal-input"
label="Názov blocker"
: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>
@@ -42,6 +48,7 @@
<Z-autocomplete
:options="employeesOptions"
class="modal-input"
:class="{ error: v$.blocker.employees.$errors.length }"
@option-selected="employeeSelected"
/>
<Datepicker
@@ -49,10 +56,12 @@
v-model="blocker.date"
format="dd.MM.yyyy, HH:mm"
locale="sk"
:class="{ error: v$.blocker.date.$errors.length }"
@focus="onDateFocus"
:validations="v$.blocker.employees"
select-text="Vybrať"
cancel-text="Zrušiť"
placeholder="02.12.2022,10:17 - 18.12.2022,10:17"
placeholder="Trvanie od - do"
range
/>
</v-card-actions>
@@ -66,6 +75,11 @@
<script>
import ZAutocomplete from '@/plugins/tm@_components/z-autocomplete.vue'
import Datepicker from '@vuepic/vue-datepicker'
import useVuelidate from '@vuelidate/core'
import { required } from '@vuelidate/validators'
import errorUtils from '@/plugins/lib@auth/_utils/error.utils'
const atLeastOne = (value) => value.length
export default {
components: {
@@ -89,14 +103,26 @@ export default {
data() {
return {
allEmployees: null,
v$: useVuelidate(),
errorUtils,
blocker: {
name: '',
data: null,
date: null,
employees: []
}
}
},
validations() {
return {
blocker: {
name: { required },
date: { required },
employees: { atLeastOne }
}
}
},
async created() {
if (this.blockerId)
await this._load()
@@ -116,6 +142,8 @@ export default {
},
async save() {
if (!(await this.v$.$validate())) return console.log(this.v$)
try {
if (this.blocker.id)
await this._edit()
app/src/plugins/tm@modal/master-task/z-master-task-modal.vue
+161 -8
View File
@@ -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">
<v-card height="100%" class="d-flex flex-column gg">
<div class="d-flex justify-space-between align-center modal-header">
<h1>Vytvoriť master task</h1>
<v-icon
@@ -17,6 +17,12 @@
class="modal-input"
label="Kód projektu"
variant="solo"
:class="{ error: v$.masterTask.project_code.$errors.length }"
:hint="
v$.masterTask.project_code.$errors
? errorUtils.parseErrors(v$.masterTask.project_code.$errors)
: null
"
></v-text-field>
<v-text-field
@@ -25,6 +31,12 @@
class="modal-input"
label="Názov mastertasku"
variant="solo"
:class="{ error: v$.masterTask.name.$errors.length }"
:hint="
v$.masterTask.name.$errors
? errorUtils.parseErrors(v$.masterTask.name.$errors)
: null
"
></v-text-field>
<Datepicker
@@ -33,6 +45,7 @@
class="modal-input"
format="dd.MM.yyyy, HH:mm"
locale="sk"
:class="{ error: v$.masterTask.deadline.$errors.length }"
select-text="Vybrať"
cancel-text="Zrušiť"
placeholder="Deadline"
@@ -42,21 +55,56 @@
v-model="masterTask.duration"
@focus="onInputFocus"
class="modal-input mt-5"
label="Celkový odhad"
variant="solo"
type="number"
placeholder="h"
:value="totalHours"
disabled
:label="totalHours + ' h'"
></v-text-field>
<v-select
v-model="selectedTeam"
@focus="onInputFocus"
class="modal-input border-select"
:class="{ error: v$.masterTask.team.$errors.length }"
label="Tím"
variant="solo"
:items="teamsOptions"
></v-select>
<v-text-field
v-for="(employee, index) in masterTask.employees"
:key="employee.id"
@focus="onInputFocus"
:class="{ error: masterTask.employees[index].hours < 0 }"
class="modal-input"
:label="`${employee.name} ${employee.surname}`"
variant="solo"
placeholder="h"
v-model="masterTask.employees[index].hours"
type="number"
min="1"
>
<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$.masterTask.employees"
:class="{ error: v$.masterTask.employees.$errors.length }"
class="modal-input"
@option-selected="employeeSelected"
/>
<v-btn class="w-100 mb-5 add-employee-btn" :disabled="!masterTask.team.employees" @click="showAddEmployeeInput = true">
<v-icon class="mx-1" icon="mdi-plus" />Pridať zamestnanca
</v-btn>
<v-textarea
:class="{ error: v$.masterTask.description.$errors.length }"
label="Popis"
class="modal-input"
variant="solo"
@@ -72,13 +120,20 @@
</template>
<script>
import Datepicker from '@vuepic/vue-datepicker'
import ZFilesUpload from '@/plugins/tm@_components/z-files-upload.vue'
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
ZFilesUpload,
ZAutocomplete
},
props: {
@@ -99,18 +154,51 @@ export default {
masterTask: {
project_code: null,
name: null,
deadilne: null,
deadline: null,
duration: null,
team: {},
description: null,
employees: [],
files: []
},
preventInputFocus: false
errorUtils,
v$: useVuelidate(),
preventInputFocus: false,
teams: null,
selectedTeam: '',
showAddEmployeeInput: false,
mrenka: null
}
},
validations() {
return {
masterTask: {
project_code: { required },
name: { required },
team: { required },
deadline: { required },
description: { required },
employees: { atLeastOne }
},
}
},
async created() {
try {
this.teams = await this.$axios.get_auth_data('v1/teams')
// this.masterTask = await this.$axios.get_auth_data(`v1/master-task/${this.masterTaksId}`)
// this.selectedTeam = `${this.masterTask.team.name} - ${this.masterTask.team.id}`)
} catch (error) {
console.log(error)
}
},
methods: {
async save() {
if (!(await this.v$.$validate())) return console.log(this.v$)
try {
if (this.masterTask.id)
await this._update()
@@ -140,6 +228,12 @@ export default {
}
},
employeeSelected(selectedOption) {
const employee = this.masterTask.team.employees.find((empl) => empl.id == selectedOption.key)
this.masterTask.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) {
@@ -160,6 +254,37 @@ export default {
},
computed: {
teamsOptions() {
return this.teams.map(team => `${team.name} - ${team.id}`)
},
totalHours() {
let hours = 0
this.masterTask.employees.forEach(function(employee) {
if(employee.hours > 0) hours += parseFloat(employee.hours)
})
console.log(hours)
return hours ? hours : 0
},
employeesOptions() {
const selectedEmployeesIds = this.masterTask.employees.map(
(employee) => employee.id
)
const employees = this.masterTask.team.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
@@ -169,6 +294,13 @@ export default {
if (!value) this.$emit('close')
}
},
},
watch: {
selectedTeam() {
this.masterTask.team = this.teams.find(team => `${team.name} - ${team.id}` == this.selectedTeam)
console.log(this.masterTask)
}
}
}
</script>
@@ -199,4 +331,25 @@ export default {
.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
.gg
overflow: hidden !important
</style>
app/src/plugins/tm@modal/task/z-delete-task-modal.vue
+2 -1
View File
@@ -37,8 +37,9 @@ export default {
methods: {
async deleteTask() {
try {
await this.$axios.delete(`v1/teams/${this.task.id}`)
await this.$axios.delete(`v1/tasks/${this.task.id}`)
this.show = false
this.$emit('confirmDelete', this.task.id)
} catch (error) {
this.$toast.error(error)
}
app/src/plugins/tm@profile/profile/_components/a-profile-form.vue
View File
Whitespace-only changes.
app/src/plugins/tm@profile/profile/my-profile.vue
+122 -4
View File
@@ -1,5 +1,123 @@
<template>
<div>
</div>
</template>
<W-loadable :content="user ? true : false">
<div v-if="user">
<div class="border-bottom py-5 px-5">
<h1>Všeobecné informácie</h1>
<v-text-field
class="w-75"
variant="solo"
label="Meno"
v-model="user.name"
:class="{ error: v$.user.name.$errors.length }"
:hint="
v$.user.name.$errors
? errorUtils.parseErrors(v$.user.name.$errors)
: null
"
></v-text-field>
<v-text-field
class="w-75"
variant="solo"
label="Priezvisko"
v-model="user.surname"
:class="{ error: v$.user.surname.$errors.length }"
:hint="
v$.user.surname.$errors
? errorUtils.parseErrors(v$.user.surname.$errors)
: null
"
></v-text-field>
</div>
<div class="py-5 px-5 border-bottom">
<h1>Pracovná doba</h1>
<v-text-field
class="w-75"
variant="solo"
label="Začiatok"
v-model="user.work_hours_from"
append-inner-icon="mdi-clock-outline"
type="time"
:class="{ error: v$.user.work_hours_from.$errors.length }"
:hint="
v$.user.work_hours_from.$errors
? errorUtils.parseErrors(v$.user.work_hours_from.$errors)
: null
"
></v-text-field>
<v-text-field
class="w-75"
variant="solo"
label="Koniec"
v-model="user.work_hours_to"
append-inner-icon="mdi-clock-outline"
:class="{ error: v$.user.work_hours_to.$errors.length }"
:hint="
v$.user.work_hours_to.$errors
? errorUtils.parseErrors(v$.user.work_hours_to.$errors)
: null
"
type="time"
></v-text-field>
</div>
<div class="py-5 px-5">
<v-btn class="z-btn" @click="updateUserInfo()">ULOŽIŤ ZMENY</v-btn>
</div>
</div>
</W-loadable>
</template>
<script>
import useVuelidate from '@vuelidate/core'
import { required } from '@vuelidate/validators'
import errorUtils from '@/plugins/lib@auth/_utils/error.utils'
import { mapGetters } from 'vuex'
export default {
data() {
return {
errorUtils,
v$: useVuelidate(),
}
},
computed: {
...mapGetters('auth', ['user']),
},
created() {
// TEMP
this.$store.dispatch('auth/login', {
email: 'xx@asdasd.asd',
password: 'sdfsdfsdf'
})
},
validations() {
return {
user: {
name: { required },
surname: { required },
work_hours_from: { required },
work_hours_to: { required },
},
}
},
methods: {
async updateUserInfo() {
if (!(await this.v$.$validate())) return
try {
await this.$store.dispatch('wAuth/updateUserInfo', this.user)
this.$toast.success('Profil bol úspešne zmenený')
} catch (error) {
this.$toast.error(error.response.data.error)
}
},
},
}
</script>
<style lang="sass" scoped>
.border-bottom
border-bottom: 1px solid #EDEDED
</style>