102 lines
2.4 KiB
Vue
102 lines
2.4 KiB
Vue
<template>
|
|
<div v-if="day">
|
|
<v-card :color="color(day)" max-width="250px" min-width="250px">
|
|
<v-card-title v-if="day.date" class="subtitle-1 font-weight-bold">
|
|
{{ day.name }} den {{ day.date.getDate() }}.{{
|
|
day.date.getMonth() + 1
|
|
}}.{{ day.date.getFullYear() }}
|
|
</v-card-title>
|
|
<v-card-text>
|
|
<v-expand-transition>
|
|
<v-row align="center" justify="center" v-if="day.loading">
|
|
<v-progress-circular indeterminate color="grey" />
|
|
</v-row>
|
|
</v-expand-transition>
|
|
<v-expand-transition>
|
|
<div v-show="!day.loading">
|
|
<v-chip
|
|
style="margin: 3px;"
|
|
v-for="worker in day.worker"
|
|
:key="day.worker.indexOf(worker)"
|
|
>{{ worker.firstname }} {{ worker.lastname }}</v-chip
|
|
>
|
|
</div>
|
|
</v-expand-transition>
|
|
</v-card-text>
|
|
</v-card>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { mapActions, mapGetters } from 'vuex'
|
|
import { mdiAccountPlus } from '@mdi/js'
|
|
export default {
|
|
name: 'Day',
|
|
props: {
|
|
day: Object
|
|
},
|
|
data() {
|
|
return {
|
|
account_add: mdiAccountPlus,
|
|
searchInput: null
|
|
}
|
|
},
|
|
created() {
|
|
this.setLoading(this.day.date)
|
|
this.getUser({
|
|
date: this.day.date.getTime() / 1000,
|
|
startdatetime: this.day.date,
|
|
year: this.day.date.getFullYear(),
|
|
month: this.day.date.getMonth() + 1,
|
|
day: this.day.date.getDate()
|
|
})
|
|
},
|
|
methods: {
|
|
...mapActions({
|
|
getUser: 'jobs/getUser',
|
|
setLoading: 'jobs/setDayLoading',
|
|
setNotLoading: 'jobs/setDayNotLoading'
|
|
}),
|
|
test(event) {
|
|
console.log('blur', event)
|
|
},
|
|
color: day => {
|
|
if (day) {
|
|
if (day.date.getDay() === 0 || day.date.getDay() === 1) {
|
|
return 'grey lighten-4'
|
|
} else {
|
|
if (day.worker.length < 2) {
|
|
return 'yellow'
|
|
} else {
|
|
return 'light-green'
|
|
}
|
|
}
|
|
} else {
|
|
return 'grey lighten-4'
|
|
}
|
|
}
|
|
},
|
|
computed: {
|
|
...mapGetters({
|
|
disabled: 'jobs/disabled'
|
|
})
|
|
},
|
|
watch: {
|
|
day() {
|
|
this.getUser({
|
|
date: this.day.date.getTime() / 1000,
|
|
startdatetime: this.day.date,
|
|
year: this.day.date.getFullYear(),
|
|
month: this.day.date.getMonth() + 1,
|
|
day: this.day.date.getDate()
|
|
})
|
|
},
|
|
worker() {
|
|
return this.day.worker
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped></style>
|