This commit is contained in:
Filip Kaluža committed 2023-01-09 16:02:49 +01:00
commit 883668cc5d
11 files changed
+351 -28

No files matched your search

+62
View File
@@ -10,6 +10,9 @@
"dependencies": {
"@capacitor/core": "^4.5.0",
"@capacitor/preferences": "^4.0.2",
"@fullcalendar/core": "^6.0.2",
"@fullcalendar/daygrid": "^6.0.2",
"@fullcalendar/vue3": "^6.0.2",
"@ionic/vue": "^6.3.6",
"@mdi/font": "5.9.55",
"@vuelidate/core": "^2.0.0",
@@ -1850,6 +1853,31 @@
"url": "https://github.com/sponsors/sindresorhus"
}
},
"node_modules/@fullcalendar/core": {
"version": "6.0.2",
"resolved": "https://registry.npmjs.org/@fullcalendar/core/-/core-6.0.2.tgz",
"integrity": "sha512-mpJ+8l2t6b98umrRG2FfDnMqEr0Z+wNT2SjY7H49V3wcj4oe3gwuty8GBYHG/vgxS+DXR/NcEvW1CsMQh4Cr/A==",
"dependencies": {
"preact": "^10.0.5"
}
},
"node_modules/@fullcalendar/daygrid": {
"version": "6.0.2",
"resolved": "https://registry.npmjs.org/@fullcalendar/daygrid/-/daygrid-6.0.2.tgz",
"integrity": "sha512-OoHo+HbKmunq2hy5K6T2390DmSwXIENxHBeKFPlUXHK48xD/zXQI3N1zRlZRd83+Yrq+vDF6l8ObO9PMu2leJw==",
"peerDependencies": {
"@fullcalendar/core": "~6.0.2"
}
},
"node_modules/@fullcalendar/vue3": {
"version": "6.0.2",
"resolved": "https://registry.npmjs.org/@fullcalendar/vue3/-/vue3-6.0.2.tgz",
"integrity": "sha512-TuinDWNm39YYon4kNeO+8xU/bZ0ETzV8tV0eAFxDmArX8icrs1bUzIy3veUI8A11/WAt8ffuu65Hc93TK+SJZQ==",
"peerDependencies": {
"@fullcalendar/core": "~6.0.2",
"vue": "^3.0.11"
}
},
"node_modules/@hapi/hoek": {
"version": "9.3.0",
"resolved": "https://registry.npmjs.org/@hapi/hoek/-/hoek-9.3.0.tgz",
@@ -10353,6 +10381,15 @@
"integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==",
"dev": true
},
"node_modules/preact": {
"version": "10.11.3",
"resolved": "https://registry.npmjs.org/preact/-/preact-10.11.3.tgz",
"integrity": "sha512-eY93IVpod/zG3uMF22Unl8h9KkrcKIRs2EGar8hwLZZDU1lkjph303V9HZBwufh2s736U6VXuhD109LYqPoffg==",
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/preact"
}
},
"node_modules/prelude-ls": {
"version": "1.2.1",
"resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz",
@@ -14980,6 +15017,26 @@
}
}
},
"@fullcalendar/core": {
"version": "6.0.2",
"resolved": "https://registry.npmjs.org/@fullcalendar/core/-/core-6.0.2.tgz",
"integrity": "sha512-mpJ+8l2t6b98umrRG2FfDnMqEr0Z+wNT2SjY7H49V3wcj4oe3gwuty8GBYHG/vgxS+DXR/NcEvW1CsMQh4Cr/A==",
"requires": {
"preact": "^10.0.5"
}
},
"@fullcalendar/daygrid": {
"version": "6.0.2",
"resolved": "https://registry.npmjs.org/@fullcalendar/daygrid/-/daygrid-6.0.2.tgz",
"integrity": "sha512-OoHo+HbKmunq2hy5K6T2390DmSwXIENxHBeKFPlUXHK48xD/zXQI3N1zRlZRd83+Yrq+vDF6l8ObO9PMu2leJw==",
"requires": {}
},
"@fullcalendar/vue3": {
"version": "6.0.2",
"resolved": "https://registry.npmjs.org/@fullcalendar/vue3/-/vue3-6.0.2.tgz",
"integrity": "sha512-TuinDWNm39YYon4kNeO+8xU/bZ0ETzV8tV0eAFxDmArX8icrs1bUzIy3veUI8A11/WAt8ffuu65Hc93TK+SJZQ==",
"requires": {}
},
"@hapi/hoek": {
"version": "9.3.0",
"resolved": "https://registry.npmjs.org/@hapi/hoek/-/hoek-9.3.0.tgz",
@@ -21366,6 +21423,11 @@
"integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==",
"dev": true
},
"preact": {
"version": "10.11.3",
"resolved": "https://registry.npmjs.org/preact/-/preact-10.11.3.tgz",
"integrity": "sha512-eY93IVpod/zG3uMF22Unl8h9KkrcKIRs2EGar8hwLZZDU1lkjph303V9HZBwufh2s736U6VXuhD109LYqPoffg=="
},
"prelude-ls": {
"version": "1.2.1",
"resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz",
+3
View File
@@ -10,6 +10,9 @@
"dependencies": {
"@capacitor/core": "^4.5.0",
"@capacitor/preferences": "^4.0.2",
"@fullcalendar/core": "^6.0.2",
"@fullcalendar/daygrid": "^6.0.2",
"@fullcalendar/vue3": "^6.0.2",
"@ionic/vue": "^6.3.6",
"@mdi/font": "5.9.55",
"@vuelidate/core": "^2.0.0",
+23 -19
View File
@@ -3,37 +3,41 @@
{
"id": 1,
"name": "Master task 1",
"starts_at": "2022-05-10T00:00:00+00:00",
"deadline": "2022-05-10T00:00:00+00:00",
"is_finished": false,
"project_code": "CO-2201"
"starts_at": "2023-01-01",
"deadline": "2023-01-09",
"is_finished": true,
"project_code": "CO-2201",
"color": "#BB86FC"
},
{
"id": 1,
"name": "Master task 1",
"starts_at": "2022-05-10T00:00:00+00:00",
"deadline": "2022-11-10T00:00:00+00:00",
"id": 2,
"name": "Master task 2",
"starts_at": "2023-01-02",
"deadline": "2023-01-05",
"is_finished": false,
"project_code": "CO-2201"
"project_code": "CO-2201",
"color": "#FF7B5E"
},
{
"id": 1,
"name": "Master task 1",
"starts_at": "2022-05-10T00:00:00+00:00",
"deadline": "2022-15-10T00:00:00+00:00",
"id": 3,
"name": "Master task 3",
"starts_at": "2023-01-12",
"deadline": "2023-01-15",
"is_finished": false,
"project_code": "CO-2201"
"project_code": "CO-2201",
"color": "#011995"
},
{
"id": 1,
"name": "Master task 1",
"starts_at": "2022-05-10T00:00:00+00:00",
"deadline": "2022-20-10T00:00:00+00:00",
"id": 4,
"name": "Master task 4",
"starts_at": "2023-01-12",
"deadline": "2023-02-12",
"is_finished": false,
"project_code": "CO-2201"
"project_code": "CO-2201",
"color": "#BABE00"
}
],
"status": 200
+12 -1
View File
@@ -84,7 +84,18 @@ const routes: Array<RouteRecordRaw> = [
name: 'Dashboard - User',
meta: { title: 'Váš profil' },
component: () => import('@/plugins/tm@profile/profile/my-profile.vue')
}
},
// {
// path: '/app/search/:searchText',
// redirect: to => {
// return { path: '/app/search', query: { q: to.params.searchText } }
// },
// },
// {
// path: '/app/search',
// name: 'Search',
// component: () => import('@/plugins/lib@search/search/search.vue')
// }
]
}
]
@@ -0,0 +1,4 @@
<template>
<div>
</div>
</template>
@@ -0,0 +1,68 @@
<template>
<div id="calendar" class="mb-12">
<FullCalendar ref="fullCalendar" :options="calendarOptions" />
</div>
</template>
<script>
import FullCalendar from '@fullcalendar/vue3'
import dayGridPlugin from '@fullcalendar/daygrid'
export default {
components: {
FullCalendar
},
props: ['events', 'month'],
computed: {
calendarOptions() {
return {
plugins: [ dayGridPlugin ],
initialView: 'dayGridMonth',
headerToolbar: false,
locale: 'sk',
height: 650,
firstDay: 1,
dayHeaderClassNames: ['w-day-header'],
events: this.events
}
}
},
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))
}
}
</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-title)
font-size: 12px
padding-left: 10px
&:deep(.fc-event)
margin-top: 5px
</style>
@@ -0,0 +1,130 @@
<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-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.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>
</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
}
}
}
</script>
<style lang="sass" scoped>
// TODO: zjednotit styly ikon v hlobalnom sass subore
// TODO: ↓
.subheader
max-width: 100%
margin: 0
border-bottom: 1px solid rgba(33, 33, 33, 0.08)
gap: 25px
flex-wrap: wrap
position: sticky
top: 0
z-index: 9999
background: white
.subheader-input
max-width: 250px !important
min-width: 250px
&:deep(.v-input__details)
display: none
&:deep(.v-selection-control)
height: 35px
&.disabled
pointer-events: none !important
@media (max-width: 600px)
.subheader
gap: 15px
padding: 20px !important
.subheader-input
max-width: 100% !important
min-width: 100%
// TODO: ↑
.subheader-input.switch
max-width: 100px !important
min-width: 100px !important
.subheader-input
&:deep(.v-selection-control--dirty .v-switch__track)
background: rgba(187, 134, 252, 0.38) !important
.switch-label
font-size: 12px
color: rgba(0, 0, 0, 0.6)
</style>
@@ -1,9 +1,54 @@
<template>
<div></div>
<div>
<a-project-filter :projects="projects" @filterChanged="onFilterChanged"></a-project-filter>
<a-project-calendar :events="filteredEvents" :month="filter.selectedMonth"></a-project-calendar>
</div>
</template>
<script>
export default {
import AProjectCalendar from './_components/a-project-calendar.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}`,
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)
}
}
}
</script>
Whitespace-only changes.
@@ -62,14 +62,11 @@ export default {
border-bottom: 1px solid rgba(33, 33, 33, 0.08)
gap: 25px
flex-wrap: wrap
position: sticky
top: 0
z-index: 9999
background: white
flex: 0 0 auto
.subheader-input
max-width: 250px !important
min-width: 250px
height: 56px
&:deep(.v-input__details)
display: none
@@ -37,7 +37,6 @@ export default {
try {
this.unscheduledTasks = await this.$axios.get_auth_data('v1/overview/unscheduled-tasks')
this.filterUnscheduledTasks()
console.log(this.unscheduledTasks)
} catch (error) {
this.unscheduledTasks = error
this.$toast.error(error)