mirror of
https://bitbucket.org/studiotem/jandl-taskmanager-app.git
synced 2026-10-21 14:29:34 +00:00
[Review]
This commit is contained in:
Matej Glasnák committed
1 parent
79f563a82d
commit
d46a9151fc
27 files changed
+279
-339
No files matched your search
@@ -1,96 +1,104 @@
|
||||
<template>
|
||||
<div id="calendar" class="mb-12">
|
||||
<FullCalendar ref="fullCalendar" :options="calendarOptions"/>
|
||||
<Z-master-task-modal ref="z-master-task-modal" />
|
||||
</div>
|
||||
<div id="calendar" class="mb-12">
|
||||
<V-full-calendar ref="fullCalendar" :options="calendarOptions" />
|
||||
<Z-master-task-modal ref="z-master-task-modal" />
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import FullCalendar from '@fullcalendar/vue3'
|
||||
import dayGridPlugin from '@fullcalendar/daygrid'
|
||||
import ZMasterTaskModal from '@/plugins/tm@modal/master-task/z-master-task-modal.vue'
|
||||
import VFullCalendar from '@fullcalendar/vue3'
|
||||
import dayGridPlugin from '@fullcalendar/daygrid'
|
||||
import ZMasterTaskModal from '@/plugins/tm@modal/master-task/z-master-task-modal.vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
FullCalendar,
|
||||
ZMasterTaskModal
|
||||
},
|
||||
props: ['events', 'month'],
|
||||
methods: {
|
||||
editTask(masterTask, editMode) {
|
||||
this.$refs['z-master-task-modal'].create(masterTask, editMode)
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
calendarOptions() {
|
||||
return {
|
||||
plugins: [ dayGridPlugin ],
|
||||
initialView: 'dayGridMonth',
|
||||
headerToolbar: false,
|
||||
locale: 'sk',
|
||||
height: 650,
|
||||
firstDay: 1,
|
||||
dayHeaderClassNames: ['w-day-header'],
|
||||
events: this.events,
|
||||
eventContent: function(eventInfo) {
|
||||
return { html: eventInfo.event.extendedProps.title_html }
|
||||
},
|
||||
eventClick: (info) => {
|
||||
console.log(info.event._def)
|
||||
// alert(JSON.stringify(info.event._def))
|
||||
this.editTask(info.event._def.publicId, false)
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
month(selectedMonth) {
|
||||
const currentYear = (new Date()).getFullYear()
|
||||
this.$refs.fullCalendar?.getApi().gotoDate(new Date(currentYear, selectedMonth, 1))
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
const currentYear = (new Date()).getFullYear()
|
||||
this.calendarOptions.events = this.events
|
||||
this.$refs.fullCalendar?.getApi().gotoDate(new Date(currentYear, this.month, 1))
|
||||
}
|
||||
components: {
|
||||
VFullCalendar,
|
||||
ZMasterTaskModal
|
||||
},
|
||||
|
||||
// Kravarik: Prepisat propy na objektovy zapis
|
||||
props: ['events', 'month'],
|
||||
|
||||
methods: {
|
||||
editTask(masterTask, editMode) {
|
||||
this.$refs['z-master-task-modal'].create(masterTask, editMode)
|
||||
}
|
||||
},
|
||||
|
||||
// Kravarik: Comuted ma byt za data hned
|
||||
computed: {
|
||||
calendarOptions() {
|
||||
return {
|
||||
plugins: [dayGridPlugin],
|
||||
initialView: 'dayGridMonth',
|
||||
headerToolbar: false,
|
||||
locale: 'sk',
|
||||
height: 650,
|
||||
firstDay: 1,
|
||||
dayHeaderClassNames: ['w-day-header'],
|
||||
events: this.events,
|
||||
// Kravarik: Skus toto prepisat na arrow function ako je v eventClick
|
||||
eventContent: function (eventInfo) {
|
||||
return { html: eventInfo.event.extendedProps.title_html }
|
||||
},
|
||||
eventClick: (info) => {
|
||||
this.editTask(info.event._def.publicId, false)
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
// Kravarik: Toto nechat na konci
|
||||
watch: {
|
||||
month(selectedMonth) {
|
||||
const currentYear = new Date().getFullYear()
|
||||
this.$refs.fullCalendar?.getApi().gotoDate(new Date(currentYear, selectedMonth, 1))
|
||||
}
|
||||
},
|
||||
|
||||
// Kravarik: Posunut nad methods
|
||||
mounted() {
|
||||
const currentYear = new Date().getFullYear()
|
||||
this.calendarOptions.events = this.events
|
||||
this.$refs.fullCalendar?.getApi().gotoDate(new Date(currentYear, this.month, 1))
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="sass" scoped>
|
||||
#calendar
|
||||
&:deep(.w-day-header)
|
||||
text-align: left
|
||||
padding-left: 10px
|
||||
&:deep(.fc-daygrid-day-number)
|
||||
color: black
|
||||
&:deep(.fc-col-header-cell-cushion)
|
||||
font-size: 20px
|
||||
font-weight: 500
|
||||
line-height: 45px
|
||||
text-transform: capitalize
|
||||
color: black
|
||||
&:deep(.fc-theme-standard .fc-scrollgrid)
|
||||
border: none
|
||||
&:deep(.fc-event-start)
|
||||
border-top-left-radius: 30px
|
||||
border-bottom-left-radius: 30px
|
||||
&:deep(.fc-event-end)
|
||||
border-top-right-radius: 30px
|
||||
border-bottom-right-radius: 30px
|
||||
&:deep(.fc-event)
|
||||
font-size: 12px
|
||||
padding-left: 10px
|
||||
margin-top: 5px
|
||||
&:after
|
||||
background: unset
|
||||
&:deep(.fc-day-today)
|
||||
background: white
|
||||
a
|
||||
background: #3700B3
|
||||
width: 32px
|
||||
height: 32px
|
||||
color: white
|
||||
text-align: center
|
||||
border-radius: 50%
|
||||
border: 5px solid white
|
||||
line-height: 15px
|
||||
</style>
|
||||
&:deep(.w-day-header)
|
||||
text-align: left
|
||||
padding-left: 10px
|
||||
&:deep(.fc-daygrid-day-number)
|
||||
color: black
|
||||
&:deep(.fc-col-header-cell-cushion)
|
||||
font-size: 20px
|
||||
font-weight: 500
|
||||
line-height: 45px
|
||||
text-transform: capitalize
|
||||
color: black
|
||||
&:deep(.fc-theme-standard .fc-scrollgrid)
|
||||
border: none
|
||||
&:deep(.fc-event-start)
|
||||
border-top-left-radius: 30px
|
||||
border-bottom-left-radius: 30px
|
||||
&:deep(.fc-event-end)
|
||||
border-top-right-radius: 30px
|
||||
border-bottom-right-radius: 30px
|
||||
&:deep(.fc-event)
|
||||
font-size: 12px
|
||||
padding-left: 10px
|
||||
margin-top: 5px
|
||||
&:after
|
||||
background: unset
|
||||
&:deep(.fc-day-today)
|
||||
background: white
|
||||
a
|
||||
background: #3700B3
|
||||
width: 32px
|
||||
height: 32px
|
||||
color: white
|
||||
text-align: center
|
||||
border-radius: 50%
|
||||
border: 5px solid white
|
||||
line-height: 15px
|
||||
</style>
|
||||
@@ -1,89 +1,66 @@
|
||||
<template>
|
||||
<v-row class="px-10 py-8 subheader">
|
||||
<v-select
|
||||
v-model="filter.selectedProject"
|
||||
class="subheader-input"
|
||||
:items="projects"
|
||||
label="Projekt"
|
||||
variant="outlined"
|
||||
></v-select>
|
||||
<v-row class="px-10 py-8 subheader">
|
||||
<v-select v-model="filter.selectedProject" class="subheader-input" :items="projects" label="Projekt" variant="outlined"></v-select>
|
||||
|
||||
<v-select
|
||||
v-model="filter.selectedTeam"
|
||||
class="subheader-input"
|
||||
:items="teams"
|
||||
label="Tím"
|
||||
variant="outlined"
|
||||
></v-select>
|
||||
<v-select v-model="filter.selectedTeam" class="subheader-input" :items="teams" label="Tím" variant="outlined"></v-select>
|
||||
|
||||
<v-select
|
||||
v-model="filter.selectedEmployee"
|
||||
class="subheader-input"
|
||||
:items="employees"
|
||||
label="Zamestnanec"
|
||||
variant="outlined"
|
||||
></v-select>
|
||||
<v-select v-model="filter.selectedEmployee" class="subheader-input" :items="employees" label="Zamestnanec" variant="outlined"></v-select>
|
||||
|
||||
<v-select
|
||||
v-model="filter.selectedMonth"
|
||||
class="subheader-input"
|
||||
:items="months"
|
||||
label="Mesiac"
|
||||
variant="outlined"
|
||||
></v-select>
|
||||
<v-select v-model="filter.selectedMonth" class="subheader-input" :items="months" label="Mesiac" variant="outlined"></v-select>
|
||||
|
||||
<div class="subheader-input switch">
|
||||
<p class="switch-label">Zobraziť ukončené</p>
|
||||
<v-switch
|
||||
v-model="filter.showFinishedTasks"
|
||||
color="#6200EE"
|
||||
hide-details
|
||||
></v-switch>
|
||||
</div>
|
||||
</v-row>
|
||||
<div class="subheader-input switch">
|
||||
<p class="switch-label">Zobraziť ukončené</p>
|
||||
<v-switch v-model="filter.showFinishedTasks" color="#6200EE" hide-details></v-switch>
|
||||
</div>
|
||||
</v-row>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
months: [
|
||||
{ title: 'Január', value: 0 },
|
||||
{ title: 'Február', value: 1 },
|
||||
{ title: 'Marec', value: 2 },
|
||||
{ title: 'Apríl', value: 3 },
|
||||
{ title: 'Máj', value: 4 },
|
||||
{ title: 'Jún', value: 5 },
|
||||
{ title: 'Júl', value: 6 },
|
||||
{ title: 'August', value: 7 },
|
||||
{ title: 'September', value: 8 },
|
||||
{ title: 'Október', value: 9 },
|
||||
{ title: 'November', value: 10 },
|
||||
{ title: 'December', value: 11 },
|
||||
],
|
||||
filter: {
|
||||
selectedProject: null,
|
||||
selectedTeam: null,
|
||||
selectedEmployee: null,
|
||||
selectedMonth: (new Date()).getMonth(),
|
||||
showFinishedTasks: false
|
||||
}
|
||||
}
|
||||
},
|
||||
props: ['projects', 'teams', 'employees'],
|
||||
emits: ['filterChanged'],
|
||||
watch: {
|
||||
filter: {
|
||||
handler() {
|
||||
this.$emit('filterChanged', this.filter)
|
||||
},
|
||||
deep: true
|
||||
}
|
||||
}
|
||||
data() {
|
||||
return {
|
||||
months: [
|
||||
{ title: 'Január', value: 0 },
|
||||
{ title: 'Február', value: 1 },
|
||||
{ title: 'Marec', value: 2 },
|
||||
{ title: 'Apríl', value: 3 },
|
||||
{ title: 'Máj', value: 4 },
|
||||
{ title: 'Jún', value: 5 },
|
||||
{ title: 'Júl', value: 6 },
|
||||
{ title: 'August', value: 7 },
|
||||
{ title: 'September', value: 8 },
|
||||
{ title: 'Október', value: 9 },
|
||||
{ title: 'November', value: 10 },
|
||||
{ title: 'December', value: 11 }
|
||||
],
|
||||
filter: {
|
||||
selectedProject: null,
|
||||
selectedTeam: null,
|
||||
selectedEmployee: null,
|
||||
selectedMonth: new Date().getMonth(),
|
||||
showFinishedTasks: false
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
// Kravarik: Props hodit nad data
|
||||
props: ['projects', 'teams', 'employees'],
|
||||
|
||||
// Kravarik: Emits ma byt uplne prve
|
||||
emits: ['filterChanged'],
|
||||
|
||||
watch: {
|
||||
filter: {
|
||||
handler() {
|
||||
this.$emit('filterChanged', this.filter)
|
||||
},
|
||||
deep: true
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="sass" scoped>
|
||||
// TODO: zjednotit styly ikon v globalnom sass subore
|
||||
// Kravarik: TODO zjednotit styly ikon v globalnom sass subore
|
||||
// TODO: ↓
|
||||
.subheader
|
||||
max-width: 100%
|
||||
|
||||
@@ -1,55 +1,61 @@
|
||||
<template>
|
||||
<div>
|
||||
<a-project-filter :projects="projects" @filterChanged="onFilterChanged"></a-project-filter>
|
||||
<a-project-calendar :events="filteredEvents" :month="filter.selectedMonth"></a-project-calendar>
|
||||
</div>
|
||||
<!-- Kravarik: Dat velke A -->
|
||||
<a-project-filter :projects="projects" @filterChanged="onFilterChanged"></a-project-filter>
|
||||
<a-project-calendar :events="filteredEvents" :month="filter.selectedMonth"></a-project-calendar>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import AProjectCalendar from './_components/a-project-calendar.vue'
|
||||
import AProjectFilter from './_components/a-project-filter.vue'
|
||||
import AProjectFilter from './_components/a-project-filter.vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
AProjectCalendar,
|
||||
AProjectFilter
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
filter: {
|
||||
selectedEmployee: null,
|
||||
selectedMonth: (new Date()).getMonth(),
|
||||
selectedProject: null,
|
||||
selectedTeam: null,
|
||||
showFinishedTasks: false
|
||||
},
|
||||
projects: ['Projekt1', 'Projekt2', 'Projekt3', 'Projekt4'],
|
||||
selectedProject: null,
|
||||
events: [],
|
||||
filteredEvents: []
|
||||
}
|
||||
},
|
||||
async created() {
|
||||
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)
|
||||
},
|
||||
methods: {
|
||||
// TODO: prepojit filtrovanie na BE
|
||||
onFilterChanged(filterValues) {
|
||||
this.filter = filterValues
|
||||
this.filteredEvents = this.events.filter(item => this.filter.showFinishedTasks || item.is_finished == false)
|
||||
}
|
||||
}
|
||||
components: {
|
||||
AProjectCalendar,
|
||||
AProjectFilter
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// Kravarik: Toto premenuj na nejaky filterSettings alebo co to je
|
||||
filter: {
|
||||
selectedEmployee: null,
|
||||
selectedMonth: new Date().getMonth(),
|
||||
selectedProject: null,
|
||||
selectedTeam: null,
|
||||
showFinishedTasks: false
|
||||
},
|
||||
// Kravarik: Toto je preco hardcodenute?
|
||||
projects: ['Projekt1', 'Projekt2', 'Projekt3', 'Projekt4'],
|
||||
selectedProject: null,
|
||||
events: [],
|
||||
filteredEvents: []
|
||||
}
|
||||
},
|
||||
async created() {
|
||||
// Kravarik: Toto preco nieje v trycatch?
|
||||
const events = await this.$axios.get_auth_data('v1/overview/projects')
|
||||
|
||||
// Kravarik: Nemusis nahodou z map returnovat? Ci ked {} obalis to () tak nemusis potom?
|
||||
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)
|
||||
},
|
||||
methods: {
|
||||
// Kravarik: TODO prepojit filtrovanie na BE
|
||||
onFilterChanged(filterValues) {
|
||||
this.filter = filterValues
|
||||
this.filteredEvents = this.events.filter((item) => this.filter.showFinishedTasks || item.is_finished == false)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
Reference in new issue
Block a user