overhaul dropdown-dependent states
This commit is contained in:
parent
95a63a8816
commit
2e4bea09a6
|
@ -8,14 +8,24 @@ export default {
|
|||
name: 'GkeMachineTypeDropdown',
|
||||
mixins: [gkeDropdownMixin],
|
||||
computed: {
|
||||
...mapState(['projectHasBillingEnabled', 'selectedZone', 'selectedMachineType']),
|
||||
...mapState([
|
||||
'isValidatingProjectBilling',
|
||||
'projectHasBillingEnabled',
|
||||
'selectedZone',
|
||||
'selectedMachineType',
|
||||
]),
|
||||
...mapState({ items: 'machineTypes' }),
|
||||
...mapGetters(['hasZone', 'hasMachineType']),
|
||||
allDropdownsSelected() {
|
||||
return this.projectHasBillingEnabled && this.hasZone && this.hasMachineType;
|
||||
},
|
||||
isDisabled() {
|
||||
return !this.projectHasBillingEnabled || !this.selectedZone;
|
||||
return (
|
||||
this.isLoading ||
|
||||
this.isValidatingProjectBilling ||
|
||||
!this.projectHasBillingEnabled ||
|
||||
!this.hasZone
|
||||
);
|
||||
},
|
||||
toggleText() {
|
||||
if (this.isLoading) {
|
||||
|
@ -45,11 +55,15 @@ export default {
|
|||
},
|
||||
watch: {
|
||||
selectedZone() {
|
||||
this.hasErrors = false;
|
||||
|
||||
if (this.hasZone) {
|
||||
this.isLoading = true;
|
||||
|
||||
this.fetchMachineTypes()
|
||||
.then(this.fetchSuccessHandler)
|
||||
.catch(this.fetchFailureHandler);
|
||||
}
|
||||
},
|
||||
selectedMachineType() {
|
||||
this.enableSubmit();
|
||||
|
|
|
@ -14,20 +14,17 @@ export default {
|
|||
required: true,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isValidatingProjectBilling: false,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapState(['selectedProject', 'projectHasBillingEnabled']),
|
||||
...mapState(['selectedProject', 'isValidatingProjectBilling', 'projectHasBillingEnabled']),
|
||||
...mapState({ items: 'projects' }),
|
||||
...mapGetters(['hasProject']),
|
||||
hasOneProject() {
|
||||
return this.items && this.items.length === 1;
|
||||
},
|
||||
isDisabled() {
|
||||
return this.items && this.items.length < 2;
|
||||
return (
|
||||
this.isLoading || this.isValidatingProjectBilling || (this.items && this.items.length < 2)
|
||||
);
|
||||
},
|
||||
toggleText() {
|
||||
if (this.isValidatingProjectBilling) {
|
||||
|
@ -103,17 +100,12 @@ export default {
|
|||
},
|
||||
watch: {
|
||||
selectedProject() {
|
||||
this.isLoading = true;
|
||||
this.isValidatingProjectBilling = true;
|
||||
this.setIsValidatingProjectBilling(true);
|
||||
|
||||
this.validateProjectBilling()
|
||||
.then(this.validateProjectBillingSuccessHandler)
|
||||
.catch(this.validateProjectBillingFailureHandler);
|
||||
},
|
||||
projectHasBillingEnabled(billingEnabled) {
|
||||
this.hasErrors = !billingEnabled;
|
||||
this.isValidatingProjectBilling = false;
|
||||
},
|
||||
},
|
||||
created() {
|
||||
this.isLoading = true;
|
||||
|
@ -123,7 +115,7 @@ export default {
|
|||
.catch(this.fetchFailureHandler);
|
||||
},
|
||||
methods: {
|
||||
...mapActions(['fetchProjects', 'validateProjectBilling']),
|
||||
...mapActions(['fetchProjects', 'setIsValidatingProjectBilling', 'validateProjectBilling']),
|
||||
...mapActions({ setItem: 'setProject' }),
|
||||
fetchSuccessHandler() {
|
||||
if (this.defaultValue) {
|
||||
|
@ -140,10 +132,9 @@ export default {
|
|||
this.hasErrors = false;
|
||||
},
|
||||
validateProjectBillingSuccessHandler() {
|
||||
this.isLoading = false;
|
||||
this.hasErrors = !this.projectHasBillingEnabled;
|
||||
},
|
||||
validateProjectBillingFailureHandler(resp) {
|
||||
this.isLoading = false;
|
||||
this.hasErrors = true;
|
||||
|
||||
this.gapiError = resp.result ? resp.result.error.message : resp;
|
||||
|
|
|
@ -8,10 +8,16 @@ export default {
|
|||
name: 'GkeZoneDropdown',
|
||||
mixins: [gkeDropdownMixin],
|
||||
computed: {
|
||||
...mapState(['selectedProject', 'selectedZone', 'projects', 'projectHasBillingEnabled']),
|
||||
...mapState([
|
||||
'selectedProject',
|
||||
'selectedZone',
|
||||
'projects',
|
||||
'isValidatingProjectBilling',
|
||||
'projectHasBillingEnabled',
|
||||
]),
|
||||
...mapState({ items: 'zones' }),
|
||||
isDisabled() {
|
||||
return !this.projectHasBillingEnabled;
|
||||
return this.isLoading || this.isValidatingProjectBilling || !this.projectHasBillingEnabled;
|
||||
},
|
||||
toggleText() {
|
||||
if (this.isLoading) {
|
||||
|
@ -34,13 +40,16 @@ export default {
|
|||
},
|
||||
},
|
||||
watch: {
|
||||
projectHasBillingEnabled(billingEnabled) {
|
||||
if (!billingEnabled) return false;
|
||||
isValidatingProjectBilling(isValidating) {
|
||||
this.hasErrors = false;
|
||||
|
||||
if (!isValidating && this.projectHasBillingEnabled) {
|
||||
this.isLoading = true;
|
||||
|
||||
return this.fetchZones()
|
||||
this.fetchZones()
|
||||
.then(this.fetchSuccessHandler)
|
||||
.catch(this.fetchFailureHandler);
|
||||
}
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
|
|
|
@ -31,6 +31,10 @@ export const setMachineType = ({ commit }, selectedMachineType) => {
|
|||
commit(types.SET_MACHINE_TYPE, selectedMachineType);
|
||||
};
|
||||
|
||||
export const setIsValidatingProjectBilling = ({ commit }, isValidatingProjectBilling) => {
|
||||
commit(types.SET_IS_VALIDATING_PROJECT_BILLING, isValidatingProjectBilling);
|
||||
};
|
||||
|
||||
export const fetchProjects = ({ commit }) =>
|
||||
gapiResourceListRequest({
|
||||
resource: gapi.client.cloudresourcemanager.projects,
|
||||
|
@ -40,20 +44,25 @@ export const fetchProjects = ({ commit }) =>
|
|||
payloadKey: 'projects',
|
||||
});
|
||||
|
||||
export const validateProjectBilling = ({ commit, state }) =>
|
||||
export const validateProjectBilling = ({ dispatch, commit, state }) =>
|
||||
new Promise((resolve, reject) => {
|
||||
const request = gapi.client.cloudbilling.projects.getBillingInfo({
|
||||
name: `projects/${state.selectedProject.projectId}`,
|
||||
});
|
||||
|
||||
commit(types.SET_ZONE, '');
|
||||
commit(types.SET_MACHINE_TYPE, '');
|
||||
|
||||
return request.then(
|
||||
resp => {
|
||||
const { billingEnabled } = resp.result;
|
||||
|
||||
commit(types.SET_PROJECT_BILLING_STATUS, !!billingEnabled);
|
||||
dispatch('setIsValidatingProjectBilling', false);
|
||||
resolve();
|
||||
},
|
||||
resp => {
|
||||
dispatch('setIsValidatingProjectBilling', false);
|
||||
reject(resp);
|
||||
},
|
||||
);
|
||||
|
|
|
@ -1,5 +1,6 @@
|
|||
export const SET_PROJECT = 'SET_PROJECT';
|
||||
export const SET_PROJECT_BILLING_STATUS = 'SET_PROJECT_BILLING_STATUS';
|
||||
export const SET_IS_VALIDATING_PROJECT_BILLING = 'SET_IS_VALIDATING_PROJECT_BILLING';
|
||||
export const SET_ZONE = 'SET_ZONE';
|
||||
export const SET_MACHINE_TYPE = 'SET_MACHINE_TYPE';
|
||||
export const SET_PROJECTS = 'SET_PROJECTS';
|
||||
|
|
|
@ -4,6 +4,9 @@ export default {
|
|||
[types.SET_PROJECT](state, selectedProject) {
|
||||
Object.assign(state, { selectedProject });
|
||||
},
|
||||
[types.SET_IS_VALIDATING_PROJECT_BILLING](state, isValidatingProjectBilling) {
|
||||
Object.assign(state, { isValidatingProjectBilling });
|
||||
},
|
||||
[types.SET_PROJECT_BILLING_STATUS](state, projectHasBillingEnabled) {
|
||||
Object.assign(state, { projectHasBillingEnabled });
|
||||
},
|
||||
|
|
|
@ -5,6 +5,7 @@ export default () => ({
|
|||
},
|
||||
selectedZone: '',
|
||||
selectedMachineType: '',
|
||||
isValidatingProjectBilling: null,
|
||||
projectHasBillingEnabled: null,
|
||||
projects: [],
|
||||
zones: [],
|
||||
|
|
Loading…
Reference in New Issue