mirror of
https://bitbucket.org/studiotem/jandl-taskmanager-app.git
synced 2026-10-21 22:39:34 +00:00
[task overview] nacitanie dat z json
This commit is contained in:
Filip Kaluža committed
1 parent
7d36723711
commit
48eae476f0
9 files changed
+392
-13976
No files matched your search
@@ -16,7 +16,7 @@
|
||||
variant="outlined"
|
||||
append-inner-icon="mdi-calendar-blank-outline"
|
||||
></v-text-field>
|
||||
<v-btn class="subheader-icon-button next" variant="outlined"><img :src="require('./_img/icon-next.svg')" alt=""></v-btn>
|
||||
<v-btn class="subheader-icon-button next" variant="outlined" @click="getWeek(new Date())"><img :src="require('./_img/icon-next.svg')" alt=""></v-btn>
|
||||
</div>
|
||||
<v-text-field
|
||||
class="subheader-input"
|
||||
@@ -28,6 +28,8 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { startOfWeek, endOfWeek, addDays } from 'date-fns'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
@@ -37,6 +39,20 @@ export default {
|
||||
selectedEmployee: 'Bar'
|
||||
}
|
||||
},
|
||||
|
||||
created() {
|
||||
this.getWeek(new Date())
|
||||
},
|
||||
|
||||
methods: {
|
||||
getWeek(date) {
|
||||
const firstDay = addDays(startOfWeek(date), 1)
|
||||
const lastDay = addDays(endOfWeek(date), 1)
|
||||
console.log()
|
||||
|
||||
this.$emit('weekChange', {firstDay: firstDay, lastDay: lastDay})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -84,6 +100,10 @@ export default {
|
||||
order: 3
|
||||
|
||||
@media (max-width: 600px)
|
||||
.subheader
|
||||
gap: 15px
|
||||
padding: 20px !important
|
||||
|
||||
.subheader-input
|
||||
max-width: 100% !important
|
||||
min-width: 100%
|
||||
@@ -97,5 +117,6 @@ export default {
|
||||
order: 3
|
||||
margin: 0
|
||||
flex: 1 1 calc( 50% - 5px )
|
||||
height: 40px
|
||||
|
||||
</style>
|
||||
@@ -6,19 +6,19 @@
|
||||
:disable-views="['years', 'year', 'month', 'day']"
|
||||
:time-from="8 * 60"
|
||||
:time-to="24 * 60"
|
||||
:hide-weekends="true"
|
||||
:selected-date="new Date()"
|
||||
:onEventClick="taskClicked"
|
||||
:editable-events="vueCalConfig.editing"
|
||||
:events="events"
|
||||
:events="formatedEvents"
|
||||
:min-event-width="90"
|
||||
:overlaps-per-time-step="true"
|
||||
:time-cell-height="200"
|
||||
:min-cell-width="300"
|
||||
sticky-split-labels
|
||||
@ready="scrollToYesterday"
|
||||
>
|
||||
<template v-slot:weekday-heading="{ heading }">
|
||||
<span class="d-flex align-center">
|
||||
<span class="d-flex align-center" :class="{'yesterday-cell' : (getHeadingDate(heading.date) == 'Včera')}">
|
||||
<img v-if="getHeadingDate(heading.date) == 'Dnes'" :src="require('./_img/home-icon.svg')" class="mr-2">
|
||||
<p>{{ getHeadingDate(heading.date) }}</p>
|
||||
</span>
|
||||
@@ -47,58 +47,16 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// import VueCal from 'vue-cal'
|
||||
// import 'vue-cal/dist/vuecal.css'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
// VueCal,
|
||||
props: {
|
||||
events: {
|
||||
required: true
|
||||
}
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
events: [
|
||||
{
|
||||
start: '2022-11-28 8:00',
|
||||
end: '2022-11-28 13:30',
|
||||
title: 'Running Marathon',
|
||||
content: '<i class="icon material-icons">directions_run</i>',
|
||||
class: 'red',
|
||||
id: 1
|
||||
},
|
||||
{
|
||||
start: '2022-11-28 9:00',
|
||||
end: '2022-11-28 11:00',
|
||||
title: 'Drink water!',
|
||||
content: '<i class="icon material-icons">local_drink</i>',
|
||||
class: 'green',
|
||||
id: 2
|
||||
},
|
||||
{
|
||||
start: '2022-11-28 10:00',
|
||||
end: '2022-11-28 12:00',
|
||||
title: 'Trip to India',
|
||||
content: '<i class="icon material-icons">flight</i>',
|
||||
class: 'blue',
|
||||
id: 3
|
||||
},
|
||||
{
|
||||
start: '2022-11-28 13:30',
|
||||
end: '2022-11-28 16:00',
|
||||
title: 'Trip to India',
|
||||
content: '<i class="icon material-icons">flight</i>',
|
||||
class: 'blue',
|
||||
id: 3
|
||||
},
|
||||
{
|
||||
start: '2022-11-29 11:00',
|
||||
end: '2022-11-29 13:00',
|
||||
title: 'Trip to India',
|
||||
content: '<i class="icon material-icons">flight</i>',
|
||||
class: 'yellow',
|
||||
id: 3
|
||||
}
|
||||
],
|
||||
formatedEvents: [],
|
||||
|
||||
vueCalConfig: {
|
||||
editing: {
|
||||
@@ -109,11 +67,39 @@ export default {
|
||||
create: false
|
||||
}
|
||||
},
|
||||
|
||||
}
|
||||
},
|
||||
|
||||
created() {
|
||||
this.formatData()
|
||||
},
|
||||
|
||||
methods: {
|
||||
|
||||
formatData() {
|
||||
Object.keys(this.events.dates).forEach(date => {
|
||||
console.log(this.events.dates[date])
|
||||
this.formatedEvents.push(...[...this.events.dates[date]])
|
||||
})
|
||||
|
||||
this.formatedEvents.forEach(event => {
|
||||
// console.log(event.id)
|
||||
event.start = new Date(event.starts_at)
|
||||
event.end = new Date(event.ends_at)
|
||||
delete event.starts_at
|
||||
delete event.ends_at
|
||||
})
|
||||
|
||||
// console.log(this.formatedEvents)
|
||||
},
|
||||
|
||||
scrollToYesterday() {
|
||||
if (!document.getElementsByClassName('yesterday-cell')) return
|
||||
const scrollContainer = document.getElementsByClassName('vuecal__scrollable-body')[0]
|
||||
const yesterdayCell = document.getElementsByClassName('yesterday-cell')[0].parentElement.parentElement.parentElement
|
||||
scrollContainer.scrollLeft = yesterdayCell.offsetLeft - scrollContainer.offsetLeft - 20
|
||||
},
|
||||
|
||||
getHeadingDate(value) {
|
||||
const date = new Date(value)
|
||||
|
||||
@@ -136,98 +122,88 @@ export default {
|
||||
</script>
|
||||
|
||||
<style lang="sass" scoped>
|
||||
.calendar-wrapper
|
||||
width: 100%
|
||||
overflow-x: scroll
|
||||
padding-top: 50px
|
||||
|
||||
.vuecal
|
||||
transform: scale(1)
|
||||
box-shadow: none !important
|
||||
|
||||
::v-deep
|
||||
.calendar-wrapper
|
||||
width: 100%
|
||||
padding-top: 50px
|
||||
|
||||
.vuecal__cells
|
||||
-ms-overflow-style: none
|
||||
scrollbar-width: none
|
||||
&:deep()
|
||||
|
||||
&::-webkit-scrollbar
|
||||
display: none
|
||||
.vuecal__cells
|
||||
-ms-overflow-style: none
|
||||
scrollbar-width: none
|
||||
&::-webkit-scrollbar
|
||||
display: none
|
||||
|
||||
.vuecal__body
|
||||
max-height: 100%
|
||||
overflow-y: scroll
|
||||
position: relative !important
|
||||
-ms-overflow-style: none
|
||||
scrollbar-width: none
|
||||
.vuecal__body
|
||||
-ms-overflow-style: none
|
||||
scrollbar-width: none
|
||||
&::-webkit-scrollbar
|
||||
display: none
|
||||
|
||||
&::-webkit-scrollbar
|
||||
display: none
|
||||
.weekday-label
|
||||
justify-content: start !important
|
||||
font-size: 24px
|
||||
font-weight: 700
|
||||
|
||||
.weekday-label
|
||||
justify-content: start !important
|
||||
font-size: 24px
|
||||
font-weight: 700
|
||||
.vuecal__weekdays-headings,
|
||||
.vuecal__cell:before
|
||||
border: none
|
||||
|
||||
.vuecal__weekdays-headings,
|
||||
.vuecal__cell:before
|
||||
border: none
|
||||
.vuecal__cells.week-view
|
||||
border-left: 1px solid rgba(0, 0, 0, .1)
|
||||
padding-left: 20px
|
||||
|
||||
.vuecal__cells.week-view
|
||||
border-left: 1px solid rgba(0, 0, 0, .1)
|
||||
padding-left: 20px
|
||||
|
||||
.vuecal__time-column
|
||||
width: 150px
|
||||
box-shadow: none !important
|
||||
|
||||
.time-column-line
|
||||
width: 40px
|
||||
height: 0
|
||||
border: 1px solid rgba(33, 33, 33, 0.08)
|
||||
margin-left: 10px
|
||||
|
||||
@media (max-width: 450px)
|
||||
.vuecal__time-column
|
||||
width: 70px
|
||||
|
||||
width: 150px
|
||||
box-shadow: none !important
|
||||
|
||||
.time-column-line
|
||||
width: 10px
|
||||
width: 40px
|
||||
height: 0
|
||||
border: 1px solid rgba(33, 33, 33, 0.08)
|
||||
margin-left: 10px
|
||||
|
||||
.vuecal__flex
|
||||
flex-wrap: nowrap !important
|
||||
@media (max-width: 450px)
|
||||
.vuecal__time-column
|
||||
width: 70px
|
||||
|
||||
.vuecal__cell
|
||||
padding: 10px 10px 10px 0px
|
||||
.time-column-line
|
||||
width: 10px
|
||||
|
||||
.vuecal__cell--today
|
||||
// background-color: rgba(0, 0, 0, .02) !important
|
||||
background-color: white
|
||||
.vuecal__flex
|
||||
flex-wrap: nowrap !important
|
||||
|
||||
.vuecal:not(.vuecal--day-view) .vuecal__cell--selected:not(.vuecal__cell--today) ,
|
||||
.vuecal__cell--current:not(.vuecal__cell--today)
|
||||
background-color: white
|
||||
.vuecal__cell
|
||||
padding: 10px 10px 10px 0px
|
||||
|
||||
.vuecal__event
|
||||
border-radius: 16px
|
||||
padding: 20px 10px
|
||||
text-align: left
|
||||
.vuecal:not(.vuecal--day-view) .vuecal__cell--selected:not(.vuecal__cell--today) ,
|
||||
.vuecal__cell--current:not(.vuecal__cell--today),
|
||||
.vuecal__cell--today
|
||||
background-color: white
|
||||
|
||||
.vuecal__event-title
|
||||
.vuecal__event
|
||||
border-radius: 16px
|
||||
padding: 20px 10px
|
||||
text-align: left
|
||||
|
||||
&:hover
|
||||
z-index: 10
|
||||
.vuecal__event-title
|
||||
text-align: left
|
||||
|
||||
&.red
|
||||
background: #FFC9C9 !important
|
||||
&:hover
|
||||
z-index: 10
|
||||
|
||||
&.green
|
||||
background: #E9FFE5 !important
|
||||
&.red
|
||||
background: #FFC9C9 !important
|
||||
|
||||
&.blue
|
||||
background: #DADEF8 !important
|
||||
&.green
|
||||
background: #E9FFE5 !important
|
||||
|
||||
&.yellow
|
||||
background: #F6ECD3 !important
|
||||
&.blue
|
||||
background: #DADEF8 !important
|
||||
|
||||
&.yellow
|
||||
background: #F6ECD3 !important
|
||||
</style>
|
||||
@@ -1,7 +1,18 @@
|
||||
<template>
|
||||
<div>
|
||||
<A-task-filter />
|
||||
<Z-timeline />
|
||||
<A-task-filter @weekChange="getWeekData" />
|
||||
<W-loadable :content="timelineData" class="w-loadable" empty-message="Nepodarilo sa nacitat data!">
|
||||
<Z-timeline :events="timelineData" />
|
||||
</W-loadable>
|
||||
|
||||
<v-snackbar
|
||||
v-model="errorToast"
|
||||
:timeout="2000"
|
||||
color="white"
|
||||
:rounded="true"
|
||||
>
|
||||
Nepodarilo sa nacitat data!
|
||||
</v-snackbar>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -14,5 +25,33 @@ export default {
|
||||
ATaskFilter,
|
||||
ZTimeline,
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
timelineData: null,
|
||||
errorToast: false,
|
||||
dataLoaded: false,
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
async getWeekData(week) {
|
||||
try {
|
||||
this.timelineData = await this.$axios.get_auth_data('v1/overview/tasks')
|
||||
console.log(this.timelineData)
|
||||
} catch(error) {
|
||||
this.timelineData = {}
|
||||
console.error(error)
|
||||
this.errorToast = true
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</script>
|
||||
|
||||
<style lang="sass" scoped>
|
||||
.w-loadable
|
||||
text-align: center
|
||||
padding-top: 20px
|
||||
height: 100%
|
||||
</style>
|
||||
Reference in new issue
Block a user