This is an automated email from the ASF dual-hosted git repository.
weizhou pushed a commit to branch 4.18
in repository https://gitbox.apache.org/repos/asf/cloudstack.git
The following commit(s) were added to refs/heads/4.18 by this push:
new 2e1c2821a82 UI: Add central project store and watch functionality
(#7900)
2e1c2821a82 is described below
commit 2e1c2821a8234530bebfc288177753d010c4bcb0
Author: Charles Queiroz <[email protected]>
AuthorDate: Thu Aug 24 09:13:47 2023 +0100
UI: Add central project store and watch functionality (#7900)
Added a new getter 'allProjects' and mutation 'RELOAD_ALL_PROJECTS' to
centralize the tracking of available projects in the state.
This eliminates direct manipulation of the Project list in separate
components and improves data consistency across the application.
A watcher in ProjectMenu.vue has been implemented to handle changes to the
'allProjects' getter.
The 'RELOAD_ALL_PROJECTS' mutation was also added where necessary to ensure
projects list is updated in the state whenever changes occur.
---
ui/src/components/header/ProjectMenu.vue | 14 ++++++++++++--
ui/src/store/getters.js | 3 ++-
ui/src/store/modules/app.js | 13 +++++++++++--
ui/src/views/AutogenView.vue | 4 +++-
4 files changed, 28 insertions(+), 6 deletions(-)
diff --git a/ui/src/components/header/ProjectMenu.vue
b/ui/src/components/header/ProjectMenu.vue
index 95a12ffeb1d..9182303c765 100644
--- a/ui/src/components/header/ProjectMenu.vue
+++ b/ui/src/components/header/ProjectMenu.vue
@@ -102,9 +102,8 @@ export default {
getNextPage()
}
}).finally(() => {
- this.projects = _.orderBy(projects, ['displaytext'], ['asc'])
- this.projects.unshift({ name: this.$t('label.default.view') })
this.loading = false
+ this.$store.commit('RELOAD_ALL_PROJECTS', projects)
})
}
getNextPage()
@@ -125,6 +124,17 @@ export default {
filterProject (input, option) {
return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
}
+ },
+ mounted () {
+ this.$store.watch(
+ (state, getters) => getters.allProjects,
+ (newValue, oldValue) => {
+ if (oldValue !== newValue && newValue !== undefined) {
+ this.projects = _.orderBy(newValue, ['displaytext'], ['asc'])
+ this.projects.unshift({ name: this.$t('label.default.view') })
+ }
+ }
+ )
}
}
</script>
diff --git a/ui/src/store/getters.js b/ui/src/store/getters.js
index f6a6dab8ad2..0273fd02b19 100644
--- a/ui/src/store/getters.js
+++ b/ui/src/store/getters.js
@@ -47,7 +47,8 @@ const getters = {
twoFaEnabled: state => state.user.twoFaEnabled,
twoFaProvider: state => state.user.twoFaProvider,
twoFaIssuer: state => state.user.twoFaIssuer,
- loginFlag: state => state.user.loginFlag
+ loginFlag: state => state.user.loginFlag,
+ allProjects: (state) => state.app.allProjects
}
export default getters
diff --git a/ui/src/store/modules/app.js b/ui/src/store/modules/app.js
index 8ed27f88b4c..806e11b2adb 100644
--- a/ui/src/store/modules/app.js
+++ b/ui/src/store/modules/app.js
@@ -30,7 +30,8 @@ import {
USE_BROWSER_TIMEZONE,
SERVER_MANAGER,
VUE_VERSION,
- CUSTOM_COLUMNS
+ CUSTOM_COLUMNS,
+ RELOAD_ALL_PROJECTS
} from '@/store/mutation-types'
const app = {
@@ -50,7 +51,8 @@ const app = {
metrics: false,
listAllProjects: false,
server: '',
- vueVersion: ''
+ vueVersion: '',
+ allProjects: []
},
mutations: {
SET_SIDEBAR_TYPE: (state, type) => {
@@ -121,6 +123,10 @@ const app = {
SET_CUSTOM_COLUMNS: (state, customColumns) => {
vueProps.$localStorage.set(CUSTOM_COLUMNS, customColumns)
state.customColumns = customColumns
+ },
+ RELOAD_ALL_PROJECTS: (state, allProjects = []) => {
+ vueProps.$localStorage.set(RELOAD_ALL_PROJECTS, allProjects)
+ state.allProjects = allProjects
}
},
actions: {
@@ -177,6 +183,9 @@ const app = {
},
SetCustomColumns ({ commit }, bool) {
commit('SET_CUSTOM_COLUMNS', bool)
+ },
+ ReloadAllProjects ({ commit, allProjects }) {
+ commit('RELOAD_ALL_PROJECTS', allProjects)
}
}
}
diff --git a/ui/src/views/AutogenView.vue b/ui/src/views/AutogenView.vue
index c8e931b6be0..4bc0c43616f 100644
--- a/ui/src/views/AutogenView.vue
+++ b/ui/src/views/AutogenView.vue
@@ -693,8 +693,10 @@ export default {
}
api('listProjects', { id: projectId, listall: true, details: 'min'
}).then(json => {
if (!json || !json.listprojectsresponse ||
!json.listprojectsresponse.project) return
+ const projects = json.listprojectsresponse.project
const project = json.listprojectsresponse.project[0]
this.$store.dispatch('SetProject', project)
+ this.$store.commit('RELOAD_ALL_PROJECTS', projects)
this.$store.dispatch('ToggleTheme', project.id === undefined ? 'light'
: 'dark')
this.$message.success(`${this.$t('message.switch.to')}
"${project.name}"`)
const query = Object.assign({}, this.$route.query)
@@ -937,6 +939,7 @@ export default {
}
if (this.apiName === 'listProjects' && this.items.length > 0) {
+ this.$store.commit('RELOAD_ALL_PROJECTS', this.items)
this.columns.map(col => {
if (col.title === 'Account') {
col.title = this.$t('label.project.owner')
@@ -1808,7 +1811,6 @@ export default {
this.rules[field.name].push(rule)
break
default:
- console.log('hererere')
rule.required = field.required
rule.message = this.$t('message.error.required.input')
this.rules[field.name].push(rule)
