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

This commit is contained in:
StudioTem committed 2023-04-07 10:18:30 +02:00
commit 8b046c3e8b
8 files changed
+220 -86

No files matched your search

@@ -93,7 +93,13 @@ export default {
createBlocker() { createBlocker() {
this.$events.emit('show-blocker-modal', {}) this.$events.emit('show-blocker-modal', {})
} }
} },
watch: {
'$route' (to, from) {
this.search = ''
}
},
} }
</script> </script>
@@ -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>
@@ -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>
@@ -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>
@@ -1,5 +1,5 @@
<template> <template>
<div> <div v-if="Array.isArray(teams) && teams.length">
<h1 class="px-3 py-3">Teams</h1> <h1 class="px-3 py-3">Teams</h1>
<v-table> <v-table>
<tbody> <tbody>
@@ -15,6 +15,10 @@
</tbody> </tbody>
</v-table> </v-table>
</div> </div>
<div v-else class="px-3 py-3">
<h1>Teams</h1>
<p>No teams match the search</p>
</div>
</template> </template>
<script> <script>
@@ -24,6 +28,16 @@ export default {
type: Array, type: Array,
required: true required: true
} }
},
methods: {
editTeam(team) {
this.$events.emit('show-team-modal', {team})
},
deleteTeam(team) {
this.$events.emit('show-delete-team-modal', {team})
}
} }
} }
</script> </script>
+24 -15
View File
@@ -1,44 +1,53 @@
<template> <template>
<form> <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-team v-if="searchResults?.teams" :teams="searchResults.teams" />
<A-search-result-tasks v-if="searchResults?.tasks" :subtasks="searchResults.tasks" />
</form> </form>
</template> </template>
<script> <script>
import { debounce } from 'lodash-es' import { debounce } from 'lodash-es'
import ASearchResultTeam from '@/plugins/lib@search/search/_components/a-search-result-team.vue' 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 { export default {
components: { components: {
ASearchResultTeam, ASearchResultTeam,
ASearchResultTasks ASearchResultSubtasks,
ASearchResultMastertasks
}, },
data() { data() {
return { return {
searchResults: [], searchResults: {},
search: '' search: ''
} }
}, },
created() { created() {
try {
this.searchResults = this.$axios.get_auth_data('v1/search')
} catch (error) {
this.$toast.error(error)
}
this.$events.on('onSearch', (search) => { this.$events.on('onSearch', (search) => {
this.search = search this.search = search
}) })
}, },
watch: {
search(newVal) {
this.updateSearchResults(newVal)
}
},
methods: { methods: {
debounceSearch: debounce(function () { updateSearchResults: debounce(async function (search) {
this.search() try {
}, 300), 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> </script>
@@ -10,7 +10,7 @@
<v-card-actions class="d-flex flex-column modal-content"> <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-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 clearable
label="Vyhľadať zamestnanca" label="Vyhľadať zamestnanca"
:items="[...enrichedEmployees]" :items="[...enrichedEmployees]"
@@ -18,8 +18,10 @@
item-value="id" item-value="id"
variant="solo" variant="solo"
class="modal-input" 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" /> <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" /> <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" />
@@ -33,14 +35,14 @@
</template> </template>
<script> <script>
import Datepicker from "@vuepic/vue-datepicker" import Datepicker from "@vuepic/vue-datepicker"
import useVuelidate from "@vuelidate/core" import useVuelidate from "@vuelidate/core"
import { required } from "@vuelidate/validators" import { required } from "@vuelidate/validators"
import errorUtils from "@/plugins/lib@auth/_utils/error.utils" import errorUtils from "@/plugins/lib@auth/_utils/error.utils"
import VuetifyFixFocusMixin from "@/plugins/tm@modal/_mixins/vuetify-fix-focus" import VuetifyFixFocusMixin from "@/plugins/tm@modal/_mixins/vuetify-fix-focus"
import { mapGetters } from "vuex" import { mapGetters } from "vuex"
import moment from "moment" import moment from "moment"
import ZAutocomplete from '@/plugins/tm@_components/z-autocomplete.vue' // import ZAutocomplete from '@/plugins/tm@_components/z-autocomplete.vue'
export default { export default {
mixins: [VuetifyFixFocusMixin], mixins: [VuetifyFixFocusMixin],
@@ -49,7 +51,7 @@ export default {
components: { components: {
Datepicker, Datepicker,
ZAutocomplete // ZAutocomplete
}, },
data() { data() {
@@ -76,7 +78,7 @@ export default {
name: { required }, name: { required },
start: { required }, start: { required },
end: { required }, end: { required },
employee: { required } // employee: { required }
}, },
starts_at_time: { required }, starts_at_time: { required },
@@ -102,7 +104,8 @@ export default {
this.starts_at_time = moment(blocker.start).format("HH:mm") this.starts_at_time = moment(blocker.start).format("HH:mm")
this.ends_at_time = moment(blocker.end).format("HH:mm") this.ends_at_time = moment(blocker.end).format("HH:mm")
this.datepicker = new Date(blocker.start) this.datepicker = new Date(blocker.start)
blocker.employee_id = blocker.employee.id
//fixnut validacie employee_id
this.blocker = blocker this.blocker = blocker
} else { } else {
this.blocker = { start: null } this.blocker = { start: null }
@@ -116,7 +119,7 @@ export default {
if (!(await this.v$.$validate())) return if (!(await this.v$.$validate())) return
try { try {
this.blocker.employee_id = this.blocker.employee?.id // this.blocker.employee_id = this.blocker.employee?.id
if (this.blocker.id) { if (this.blocker.id) {
const { blocker } = await this.$axios.put_auth(`v1/blockers/${this.blocker.id}`, this.blocker) const { blocker } = await this.$axios.put_auth(`v1/blockers/${this.blocker.id}`, this.blocker)
+6
View File
@@ -0,0 +1,6 @@
{
"name": "jandl-taskmanager-app",
"lockfileVersion": 2,
"requires": true,
"packages": {}
}