added loading and fix bug thät sm delete user when switch months

This commit is contained in:
Tim Gröger 2020-01-23 11:11:26 +01:00
parent d6896d29b2
commit db524355b5
4 changed files with 148 additions and 55 deletions

View File

@ -91,7 +91,7 @@ export default {
},
computed: {
...mapGetters({
month: 'sm/month'
month: 'sm/month',
})
}
}

View File

@ -1,43 +1,57 @@
<template>
<div v-if="day">
<v-card :color="color(day)" max-width="300px" min-width="300px">
<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-autocomplete
chips
return-object
multiple
v-model="day.worker"
:items="allUsers"
item-text="fullName"
label="Dienste"
prepend-inner-icon="group_add"
filled
color="green"
>
<template v-slot:selection="data">
<v-chip
v-bind="data.attrs"
:input-value="data.selected"
close
@click="data.select"
@click:close="remove(data.item)"
<v-expand-transition>
<v-row align="center" justify="center" v-if="day.loading">
<v-progress-circular indeterminate color="black" />
</v-row>
</v-expand-transition>
<v-expand-transition>
<div v-show="!day.loading">
<v-autocomplete
chips
return-object
multiple
v-model="day.worker"
:items="allUsers"
item-text="fullName"
label="Dienste"
prepend-inner-icon="group_add"
filled
color="green"
@input="searchInput=null"
:search-input.sync="searchInput"
@blur="focused=false"
@focus="focused=true"
>
{{ data.item.firstname }} {{ data.item.lastname }}
</v-chip>
</template>
<template v-slot:item="data">
<v-list-item-content>
<v-list-item-title>
{{ data.item.firstname }} {{ data.item.lastname }}
</v-list-item-title>
</v-list-item-content>
</template>
</v-autocomplete>
<template v-slot:selection="data">
<v-chip
v-bind="data.attrs"
:input-value="data.selected"
close
@click="data.select"
@click:close="remove(data.item)"
>
{{ data.item.firstname }} {{ data.item.lastname }}
</v-chip>
</template>
<template v-slot:item="data">
<v-list-item-content>
<v-list-item-title>
{{ data.item.firstname }} {{ data.item.lastname }}
</v-list-item-title>
</v-list-item-content>
</template>
</v-autocomplete>
</div>
</v-expand-transition>
</v-card-text>
</v-card>
</div>
@ -51,16 +65,25 @@ export default {
day: Object
},
data() {
return {}
return {
searchInput: null,
focused: false
}
},
created() {
this.getUser({date: this.day.date.getTime()/1000})
this.setLoading(this.day.date)
this.getUser({
date: this.day.date.getTime() / 1000,
startdatetime: this.day.date
})
},
methods: {
...mapActions({
addUser: 'sm/addUser',
getUser: 'sm/getUser',
deleteUser: 'sm/deleteUser'
deleteUser: 'sm/deleteUser',
setLoading: 'sm/setDayLoading',
setNotLoading: 'sm/setDayNotLoading'
}),
// eslint-disable-next-line no-unused-vars
remove(deletedUser) {
@ -69,7 +92,14 @@ export default {
})
const index = this.day.worker.indexOf(obj)
if (index >= 0) this.day.worker.splice(index, 1)
this.deleteUser({startdatetime: this.day.date, date: this.day.date.getTime()/1000, user: deletedUser})
this.deleteUser({
startdatetime: this.day.date,
date: this.day.date.getTime() / 1000,
user: deletedUser
})
},
test(event) {
console.log('blur', event)
},
color: day => {
if (day) {
@ -85,11 +115,12 @@ export default {
} else {
return 'grey lighten-4'
}
}
},
},
computed: {
...mapGetters({
allUsers: 'sm/allUsers'
allUsers: 'sm/allUsers',
disabled: 'sm/disabled'
}),
worker() {
return this.day.worker
@ -97,22 +128,39 @@ export default {
},
watch: {
worker(newValue, oldValue) {
if (oldValue !== newValue) {
if (oldValue !== newValue && this.focused) {
let addedUser = null
for (let user in newValue) {
if (!oldValue.includes(newValue[user])) {
addedUser = newValue[user]
this.addUser({date: this.day.date.getTime()/1000, user: addedUser})
this.addUser({
date: this.day.date.getTime() / 1000,
user: addedUser
})
}
}
let deletedUser = null
for (let user in oldValue) {
if (!newValue.includes(oldValue[user])) {
deletedUser = oldValue[user]
this.deleteUser({startdatetime: this.day.date, date: this.day.date.getTime()/1000, user: deletedUser})
console.log("deleteUser", deletedUser, this.day.date)
this.deleteUser({
startdatetime: this.day.date,
date: this.day.date.getTime() / 1000,
user: deletedUser
})
}
}
}
},
day() {
this.getUser({
date: this.day.date.getTime() / 1000,
startdatetime: this.day.date
})
},
focused(newVal, oldValue) {
console.log(newVal, oldValue)
}
}
}

View File

@ -1,5 +1,6 @@
//const main = 'https://192.168.5.128:5000/'
const main = 'https://localhost:5000/'
//const main = 'https://localhost:5000/'
const main = 'http://192.168.5.118:5000/'
//const main = 'https://groeger-clan.duckdns.org:5000/'
const url = {

View File

@ -3,7 +3,8 @@ import url from '@/plugins/routes'
const state = {
month: [],
allUsers: []
allUsers: [],
disabled: false
}
const mutations = {
@ -45,7 +46,8 @@ const mutations = {
id: currentDate.getDay(),
date: currentDate,
name: 'Montag',
worker: []
worker: [],
loading: false
}
break
case 2:
@ -53,7 +55,8 @@ const mutations = {
id: currentDate.getDay(),
date: currentDate,
name: 'Dienstag',
worker: []
worker: [],
loading: false
}
break
case 3:
@ -66,7 +69,8 @@ const mutations = {
id: currentDate.getDay(),
date: currentDate,
name: 'Mittwoch',
worker: []
worker: [],
loading: false
}
}
break
@ -75,7 +79,8 @@ const mutations = {
id: currentDate.getDay(),
date: currentDate,
name: 'Donnerstag',
worker: []
worker: [],
loading: false
}
break
case 5:
@ -83,7 +88,8 @@ const mutations = {
id: currentDate.getDay(),
date: currentDate,
name: 'Freitag',
worker: []
worker: [],
loading: false
}
break
case 6:
@ -91,7 +97,8 @@ const mutations = {
id: currentDate.getDay(),
date: currentDate,
name: 'Samstag',
worker: []
worker: [],
loading: false
}
break
case 0:
@ -99,7 +106,8 @@ const mutations = {
id: currentDate.getDay(),
date: currentDate,
name: 'Sontag',
worker: []
worker: [],
loading: false
}
break
}
@ -146,7 +154,7 @@ const mutations = {
for (let day in state.month[week].days) {
if (state.month[week].days[day].date - date === 0) {
let worker = state.month[week].days[day].worker.find(a => {
return a.username === user.username
return a.username === user.username
})
if (!worker && data.com === 'add') {
state.month[week].days[day].worker.push({
@ -159,11 +167,24 @@ const mutations = {
}
}
}
},
setDayLoading: (state, { date, getters }) => {
let day = getters.getDay(date)
day.loading = true
},
setDayNotLoading: (state, { date, getters }) => {
let day = getters.getDay(date)
day.loading = false
},
setDisabled: (state, data) => {
state.disabled = data
}
}
const actions = {
createMonth({ commit }, date) {
commit('setDisabled', true)
commit('createMonth', date)
commit('setDisabled', false)
},
async getAllUsers({ commit, rootState, dispatch }) {
try {
@ -188,14 +209,14 @@ const actions = {
headers: { Token: rootState.login.user.accessToken }
}
)
console.log(response.data)
commit('updateMonth', {...response.data[0], com: 'add'})
commit('updateMonth', { ...response.data[0], com: 'add' })
} catch (e) {
if (e.response)
if (e.response.status === 401) dispatch('logout', null, { root: true })
}
},
async getUser({ commit, rootState, dispatch }, data) {
async getUser({ commit, rootState, dispatch, getters }, data) {
commit('setDayLoading', { date: data.startdatetime, getters })
try {
const response = await axios.post(
url.vorstand.sm.getUser,
@ -205,6 +226,7 @@ const actions = {
for (let item = 0; item < response.data.length; item++) {
commit('updateMonth', { ...response.data[item], com: 'add' })
}
commit('setDayNotLoading', { date: data.startdatetime, getters })
} catch (e) {
if (e.response)
if (e.response.status === 401) dispatch('logout', null, { root: true })
@ -219,11 +241,17 @@ const actions = {
{ ...data },
{ headers: { Token: rootState.login.user.accessToken } }
)
commit('updateMonth', {...data, com: 'delete'})
commit('updateMonth', { ...data, com: 'delete' })
} catch (e) {
if (e.response)
if (e.response.status === 401) dispatch('logout', null, { root: true })
}
},
setDayLoading({ commit, getters }, date) {
commit('setDayLoading', {date, getters})
},
setDayNotLoading({commit, getters}, date) {
commit('setDayNotLoading', {date, getters})
}
}
const getters = {
@ -232,6 +260,22 @@ const getters = {
},
allUsers: state => {
return state.allUsers
},
getDayLoading: (state, getters) => date => {
let day = getters.getDay(date)
return day.loading
},
getDay: state => date => {
for (let week = 0; week < state.month.length; week++) {
for (let day in state.month[week].days) {
if (state.month[week].days[day].date - date === 0) {
return state.month[week].days[day]
}
}
}
},
disabled: state => {
return state.disabled
}
}