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: { computed: {
...mapGetters({ ...mapGetters({
month: 'sm/month' month: 'sm/month',
}) })
} }
} }

View File

@ -1,12 +1,19 @@
<template> <template>
<div v-if="day"> <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"> <v-card-title v-if="day.date" class="subtitle-1 font-weight-bold">
{{ day.name }} den {{ day.date.getDate() }}.{{ {{ day.name }} den {{ day.date.getDate() }}.{{
day.date.getMonth() + 1 day.date.getMonth() + 1
}}.{{ day.date.getFullYear() }} }}.{{ day.date.getFullYear() }}
</v-card-title> </v-card-title>
<v-card-text> <v-card-text>
<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 <v-autocomplete
chips chips
return-object return-object
@ -18,6 +25,11 @@
prepend-inner-icon="group_add" prepend-inner-icon="group_add"
filled filled
color="green" color="green"
@input="searchInput=null"
:search-input.sync="searchInput"
@blur="focused=false"
@focus="focused=true"
> >
<template v-slot:selection="data"> <template v-slot:selection="data">
<v-chip <v-chip
@ -38,6 +50,8 @@
</v-list-item-content> </v-list-item-content>
</template> </template>
</v-autocomplete> </v-autocomplete>
</div>
</v-expand-transition>
</v-card-text> </v-card-text>
</v-card> </v-card>
</div> </div>
@ -51,16 +65,25 @@ export default {
day: Object day: Object
}, },
data() { data() {
return {} return {
searchInput: null,
focused: false
}
}, },
created() { 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: { methods: {
...mapActions({ ...mapActions({
addUser: 'sm/addUser', addUser: 'sm/addUser',
getUser: 'sm/getUser', getUser: 'sm/getUser',
deleteUser: 'sm/deleteUser' deleteUser: 'sm/deleteUser',
setLoading: 'sm/setDayLoading',
setNotLoading: 'sm/setDayNotLoading'
}), }),
// eslint-disable-next-line no-unused-vars // eslint-disable-next-line no-unused-vars
remove(deletedUser) { remove(deletedUser) {
@ -69,7 +92,14 @@ export default {
}) })
const index = this.day.worker.indexOf(obj) const index = this.day.worker.indexOf(obj)
if (index >= 0) this.day.worker.splice(index, 1) 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 => { color: day => {
if (day) { if (day) {
@ -85,11 +115,12 @@ export default {
} else { } else {
return 'grey lighten-4' return 'grey lighten-4'
} }
} },
}, },
computed: { computed: {
...mapGetters({ ...mapGetters({
allUsers: 'sm/allUsers' allUsers: 'sm/allUsers',
disabled: 'sm/disabled'
}), }),
worker() { worker() {
return this.day.worker return this.day.worker
@ -97,22 +128,39 @@ export default {
}, },
watch: { watch: {
worker(newValue, oldValue) { worker(newValue, oldValue) {
if (oldValue !== newValue) { if (oldValue !== newValue && this.focused) {
let addedUser = null let addedUser = null
for (let user in newValue) { for (let user in newValue) {
if (!oldValue.includes(newValue[user])) { if (!oldValue.includes(newValue[user])) {
addedUser = 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 let deletedUser = null
for (let user in oldValue) { for (let user in oldValue) {
if (!newValue.includes(oldValue[user])) { if (!newValue.includes(oldValue[user])) {
deletedUser = 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://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 main = 'https://groeger-clan.duckdns.org:5000/'
const url = { const url = {

View File

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