From 1eadf1354af17e13706333cbe444a4f0b3995aa0 Mon Sep 17 00:00:00 2001 From: Axolotle Date: Wed, 29 Jul 2020 14:46:16 +0200 Subject: [PATCH] rework data store and add FETCH_ALL, also reflect changes to views --- app/src/helpers/dataStore.js | 58 ++++++++++++++++++------------- app/src/scss/main.scss | 50 +++++++++++++++++++++++++- app/src/views/user/UserCreate.vue | 7 ++-- app/src/views/user/UserEdit.vue | 6 ++-- app/src/views/user/UserInfo.vue | 6 +--- app/src/views/user/UserList.vue | 42 ---------------------- 6 files changed, 88 insertions(+), 81 deletions(-) diff --git a/app/src/helpers/dataStore.js b/app/src/helpers/dataStore.js index 3964fdc1..ca67f1d5 100644 --- a/app/src/helpers/dataStore.js +++ b/app/src/helpers/dataStore.js @@ -17,12 +17,12 @@ export default { state.users = Object.keys(users).length === 0 ? null : users }, - 'ADD_USER' (state, user) { + 'ADD_USERS' (state, user) { // FIXME will trigger an error if first created user Vue.set(state.users, user.username, user) }, - 'SET_USERS_PARAM' (state, [username, userData]) { + 'SET_USERS_DETAILS' (state, [username, userData]) { Vue.set(state.users_details, username, userData) if (!state.users) return const user = state.users[username] @@ -34,7 +34,7 @@ export default { Vue.set(user, 'fullname', `${userData.firstname} ${userData.lastname}`) }, - 'DEL_USERS_PARAM' (state, username) { + 'DEL_USERS_DETAILS' (state, username) { Vue.delete(state.users_details, username) if (state.users) { Vue.delete(state.users, username) @@ -49,39 +49,47 @@ export default { if (currentState !== undefined && !force) return currentState return api.get(param ? `${uri}/${param}` : uri).then(responseData => { - const data = responseData[uri] ? responseData[uri] : responseData - if (param) { - commit(`SET_${uri.toUpperCase()}_PARAM`, [param, data]) - } else { - commit('SET_' + uri.toUpperCase(), data) - } - return param ? state[storeKey][param] : state[storeKey] + const data = responseData[storeKey] ? responseData[storeKey] : responseData + commit('SET_' + storeKey.toUpperCase(), param ? [param, data] : data) + return data }) }, - 'POST' ({ state, commit }, { uri, data }) { - return api.post(uri, data) + 'FETCH_ALL' ({ state, commit }, queries) { + // TODO do not get if data is already present + return Promise.all(queries.map(({ uri, param, storeKey = uri, force = false }) => { + return api.get(param ? `${uri}/${param}` : uri) + })).then(responsesData => { + return responsesData.map((responseData, i) => { + const storeKey = queries[i].storeKey || queries[i].uri + const param = queries[i].param + const data = responseData[storeKey] ? responseData[storeKey] : responseData + commit('SET_' + storeKey.toUpperCase(), param ? [param, data] : data) + return data + }) + }) + }, + + 'POST' ({ state, commit }, { uri, data, storeKey = uri }) { + return api.post(uri, data).then(responseData => { + console.log(responseData) + const data = responseData[storeKey] ? responseData[storeKey] : responseData + commit('ADD_' + storeKey.toUpperCase(), data) + return data + }) }, 'PUT' ({ state, commit }, { uri, param, data, storeKey = uri }) { return api.put(param ? `${uri}/${param}` : uri, data).then(responseData => { - const data = responseData[uri] ? responseData[uri] : responseData - if (param) { - commit(`SET_${uri.toUpperCase()}_PARAM`, [param, data]) - } else { - commit('SET_' + uri.toUpperCase(), data) - } - return param ? state[storeKey][param] : state[storeKey] + const data = responseData[storeKey] ? responseData[storeKey] : responseData + commit('SET_' + storeKey.toUpperCase(), param ? [param, data] : data) + return data }) }, - 'DELETE' ({ state, commit }, { uri, param, data }) { + 'DELETE' ({ state, commit }, { uri, param, data, storeKey = uri }) { return api.delete(param ? `${uri}/${param}` : uri, data).then(() => { - if (param) { - commit(`DEL_${uri.toUpperCase()}_PARAM`, param) - } else { - commit('DEL_' + uri.toUpperCase()) - } + commit('DEL_' + storeKey.toUpperCase(), param) }) } }, diff --git a/app/src/scss/main.scss b/app/src/scss/main.scss index b6a88715..401d9d3b 100644 --- a/app/src/scss/main.scss +++ b/app/src/scss/main.scss @@ -34,7 +34,7 @@ body { .input-group-append ~ .input-group-append { min-width: 40%; } - + select { border-top-left-radius: 0; border-bottom-left-radius: 0; @@ -63,8 +63,56 @@ body { } } +.card-header h2 { + margin: 0; +} + // Fork-awesome overrides .fa-fw { width: 1.25em !important; } + + +// custom css +.actions { + margin-bottom: 1.5rem; + display: flex; + justify-content: space-between; + + @include media-breakpoint-down(xs) { + .buttons { + flex-direction: column; + justify-content: space-between; + } + } + + @include media-breakpoint-down(sm) { + flex-direction: column-reverse; + margin-bottom: 2rem; + + .buttons { + display: flex; + justify-content: space-between; + + .btn { + margin-bottom: .5rem; + } + } + } + + @include media-breakpoint-up(md) { + .btn-success { + margin-left: .5rem; + } + } + + .input-group { + @include media-breakpoint-up(md) { + width: 25%; + } + @include media-breakpoint-up(lg) { + width: 35%; + } + } +} diff --git a/app/src/views/user/UserCreate.vue b/app/src/views/user/UserCreate.vue index 3ecd58a1..2214448b 100644 --- a/app/src/views/user/UserCreate.vue +++ b/app/src/views/user/UserCreate.vue @@ -173,9 +173,7 @@ export default { this.$store.dispatch( 'POST', { uri: 'users', data } - ).then(responseData => { - // FIXME API doesn't return the same data as '/users' - this.$store.commit('ADD_USER', responseData) + ).then(() => { this.$router.push({ name: 'user-list' }) }).catch(error => { this.server.error = error.message @@ -217,8 +215,7 @@ export default { }, created () { - this.$store.dispatch('FETCH', { uri: 'domains' }) - this.$store.dispatch('FETCH', { uri: 'users' }) + this.$store.dispatch('FETCH_ALL', [{ uri: 'domains' }, { uri: 'users' }]) }, components: { SplittedMailInput diff --git a/app/src/views/user/UserEdit.vue b/app/src/views/user/UserEdit.vue index b83c8e64..761ca871 100644 --- a/app/src/views/user/UserEdit.vue +++ b/app/src/views/user/UserEdit.vue @@ -234,10 +234,10 @@ export default { }, created () { - this.$store.dispatch('FETCH', { uri: 'domains' }) - this.$store.dispatch('FETCH', + this.$store.dispatch('FETCH_ALL', [ + { uri: 'domains' }, { uri: 'users', param: this.name, storeKey: 'users_details' } - ).then(userData => { + ]).then(([domainsData, userData]) => { this.form.firstname = userData.firstname this.form.lastname = userData.lastname this.form.mail = userData.mail diff --git a/app/src/views/user/UserInfo.vue b/app/src/views/user/UserInfo.vue index 567c30fd..b0448e2a 100644 --- a/app/src/views/user/UserInfo.vue +++ b/app/src/views/user/UserInfo.vue @@ -122,7 +122,7 @@ export default { deleteUser () { const data = this.purge ? { purge: '' } : {} this.$store.dispatch('DELETE', - { uri: 'users', data, param: this.name } + { uri: 'users', param: this.name, data, storeKey: 'users_details' } ).then(() => { this.$router.push({ name: 'user-list' }) }) @@ -144,10 +144,6 @@ export default { } } -h2 { - margin: 0; -} - .icon.fa-user { font-size: 10rem; padding-right: 3rem; diff --git a/app/src/views/user/UserList.vue b/app/src/views/user/UserList.vue index 00b763a6..e3d36a47 100644 --- a/app/src/views/user/UserList.vue +++ b/app/src/views/user/UserList.vue @@ -83,48 +83,6 @@ p { margin: 0 } -.actions { - margin-bottom: 1.5rem; - display: flex; - justify-content: space-between; - - @include media-breakpoint-down(xs) { - .buttons { - flex-direction: column; - justify-content: space-between; - } - } - - @include media-breakpoint-down(sm) { - flex-direction: column-reverse; - margin-bottom: 2rem; - - .buttons { - display: flex; - justify-content: space-between; - - .btn { - margin-bottom: .5rem; - } - } - } - - @include media-breakpoint-up(md) { - .btn-success { - margin-left: .5rem; - } - } - - .input-group { - @include media-breakpoint-up(md) { - width: 25%; - } - @include media-breakpoint-up(lg) { - width: 35%; - } - } -} - .skeleton { @each $i, $opacity in 1 .75, 2 .5, 3 .25 { .list-group-item:nth-child(#{$i}) { opacity: $opacity; }