Skip to content

Commit 07c944e

Browse files
obulatobulat
committed
Fix vuex bugs after removing default license state
Signed-off-by: Olga Bulat <obulat@gmail.com>
1 parent 1992565 commit 07c944e

File tree

7 files changed

+75
-64
lines changed

7 files changed

+75
-64
lines changed

‎src/App.vue‎

Lines changed: 9 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -46,13 +46,11 @@ export default {
4646
},
4747
data() {
4848
return {
49-
currentStepId: 0
49+
currentStepId: 0,
50+
showLicense: false
5051
}
5152
},
5253
computed: {
53-
showLicense() {
54-
return this.currentStepId > 0
55-
},
5654
showLicenseUse() {
5755
return this.currentStepId === 7
5856
}
@@ -62,8 +60,14 @@ export default {
6260
if (process.env.NODE_ENV === 'production') {
6361
this.$ga.page('/')
6462
}
63+
this.$store.subscribe((mutation, state) => {
64+
if (mutation.type === 'updateAttributesFromShort' || mutation.type === 'setSelected') {
65+
this.showLicense = true
66+
}
67+
})
6568
}
66-
}</script>
69+
}
70+
</script>
6771
<style lang="scss">
6872
// Import Bulma's core
6973
@import "~bulma/sass/utilities/_all";

‎src/components/FirstStep.vue‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,7 @@ export default {
2525
name: 'FirstStep',
2626
props: {
2727
selected: Boolean,
28+
stepId: Number,
2829
status: String
2930
},
3031
computed: {

‎src/components/SelectedLicenseDropdown.vue‎

Lines changed: 17 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
11
<template>
22
<div class="license-dropdown">
3-
<b-field :label="this.$t('license-dropdown-label')">
4-
<b-select v-model="currentLicense">
3+
<b-field>
4+
<b-select :placeholder="this.$t('license-dropdown-placeholder')" @input="setCurrentLicense"
5+
:value="this.shortName">
56
<option
67
v-for="license in this.licenseList"
78
:value="license"
@@ -28,26 +29,24 @@ export default {
2829
'CC BY-NC 4.0',
2930
'CC BY-NC-SA 4.0',
3031
'CC BY-NC-ND 4.0'
31-
]
32+
],
33+
currentLicense: undefined
3234
}
3335
},
34-
computed: {
35-
...mapGetters(['shortName', 'fullName']),
36-
currentLicense: {
37-
get() {
38-
return this.shortName
39-
},
40-
set(currentLicense) {
41-
this.$store.commit('updateAttributesFromShort', currentLicense)
42-
if (process.env.NODE_ENV === 'production') {
43-
this.$ga.event({
44-
eventCategory: 'LicenseDropdown',
45-
eventAction: 'licenseSelected',
46-
eventLabel: currentLicense
47-
})
48-
}
36+
methods: {
37+
setCurrentLicense(currentLicense) {
38+
this.$store.commit('updateAttributesFromShort', currentLicense)
39+
if (process.env.NODE_ENV === 'production') {
40+
this.$ga.event({
41+
eventCategory: 'LicenseDropdown',
42+
eventAction: 'licenseSelected',
43+
eventLabel: currentLicense
44+
})
4945
}
5046
}
47+
},
48+
computed: {
49+
...mapGetters(['shortName', 'fullName'])
5150
}
5251
5352
}

‎src/components/Step.vue‎

Lines changed: 6 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -28,36 +28,30 @@
2828

2929
<script>
3030
31-
import { mapState } from 'vuex'
32-
3331
export default {
3432
name: 'Step',
3533
props: {
3634
stepName: String,
35+
selected: Boolean,
36+
stepId: Number,
3737
status: String
3838
},
39-
methods: {
40-
selected() {
41-
return this.attributes(this.$props.stepName)
42-
}
43-
},
4439
computed: {
45-
...mapState({ attributes: state => state.currentLicenseAttributes }),
4640
cardText() {
4741
const prefix = `stepper.${this.$props.stepName}.${this.selected ? '' : 'not-'}`
4842
return `${prefix}selected`
4943
},
5044
radio: {
5145
get() {
52-
const selected = this.attributes[this.$props.stepName]
53-
if (selected === undefined) {
46+
if (this.$props.selected === undefined) {
5447
return undefined
5548
} else {
56-
return selected ? 'yes' : 'no'
49+
return this.$props.selected ? 'yes' : 'no'
5750
}
5851
},
5952
set(newVal) {
60-
this.$store.commit('toggleSelected', this.$props.stepName)
53+
const isSelected = newVal === 'yes'
54+
this.$emit('change', this.$props.stepName, this.$props.stepId, isSelected)
6155
}
6256
},
6357
tPrefix() {

‎src/components/Stepper.vue‎

Lines changed: 31 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -70,10 +70,10 @@
7070
import Step from './Step'
7171
import FirstStep from './FirstStep'
7272
import AttributionDetails from './AttributionDetails'
73+
import CopyrightWaiverStep from './CopyrightWaiverStep'
7374
import DropdownStep from './DropdownStep'
7475
import { disabledSetters, visibleSetters } from '../utils/license-utilities'
7576
import { mapGetters } from 'vuex'
76-
import CopyrightWaiverStep from './CopyrightWaiverStep'
7777
7878
export default {
7979
name: 'Stepper',
@@ -108,45 +108,53 @@ export default {
108108
}
109109
},
110110
methods: {
111-
headerText(stepId) {
111+
headerText(stepId, stepStatus) {
112112
const prefix = `stepper.${stepId}`
113-
return this.status === 'current' ? `${prefix}.question` : `${prefix}.heading`
113+
if (stepId === 'AD' || stepId === 'CW') {
114+
return prefix + '.heading'
115+
}
116+
return stepStatus === 'current' ? `${prefix}.question` : `${prefix}.heading`
114117
},
115-
nextButtonDisabled(stepId) {
116-
if (this.steps[stepId].selected === undefined) {
117-
return 'disabled'
118+
nextButtonDisabled: function(stepId) {
119+
// Disable 'Next' button if on one of the first 4 steps
120+
if (stepId <= 4) {
121+
return this.steps[stepId].selected === undefined
122+
? 'disabled'
123+
: ''
118124
} else {
125+
if (stepId === 6 && this.$store.state.currentLicenseAttributes.BY === undefined) {
126+
return 'disabled'
127+
}
119128
return ''
120129
}
121130
},
122-
changeFirstStep() {
123-
this.$set(this.steps, 0, { ...this.steps[0], selected: !this.steps[0].selected })
131+
changeFirstStep(isSelected) {
132+
this.$set(this.steps, 0, { ...this.steps[0], selected: isSelected })
133+
},
134+
changeStepSelected(stepName, stepId, isSelected) {
135+
this.$set(this.steps, stepId, { ...this.steps[stepId], selected: isSelected })
136+
this.$store.commit('setSelected', { stepName, isSelected })
137+
console.log('Step selected changed, ', this.steps)
124138
},
125139
isLicenseAttribute(stepId) {
126140
return ['BY', 'NC', 'ND', 'SA'].indexOf(stepId) > -1
127141
},
128-
handleNext() {
129-
if (this.steps[this.currentStepId].selected === undefined) return
130-
const currentStepName = this.steps[this.currentStepId].name
131-
const stepSelected = this.currentStepId === 0
132-
? this.steps[0].selected
133-
: this.isAttrSelected(currentStepName)
142+
handleNext(stepName) {
143+
const stepSelected = this.steps[this.currentStepId].selected
144+
if (stepSelected === undefined && this.currentStepId <= 4) return
134145
// update steps enabled and visible properties
135146
// set the next enabled and visible step as current, and stepName as previous
136-
this.updateDisabledAndVisibleSteps(currentStepName,
137-
stepSelected)
147+
this.updateDisabledAndVisibleSteps(stepName, stepSelected)
138148
const nextStep = this.steps.slice(this.currentStepId + 1).find(step => step.visible && step.enabled).id
139149
this.$set(this.steps, nextStep, { ...this.steps[nextStep], status: 'current' })
140150
this.$set(this.steps, this.currentStepId, { ...this.steps[this.currentStepId], status: 'previous' })
141151
this.currentStepId = nextStep
142152
},
143-
handlePrevious() {
144-
const currentStepName = this.steps[this.currentStepId].name
145-
const stepSelected = this.currentStepId === 0
146-
? this.steps[0].selected
147-
: this.isAttrSelected(currentStepName)
148-
this.updateDisabledAndVisibleSteps(currentStepName,
149-
stepSelected)
153+
handlePrevious(stepName) {
154+
const stepSelected = this.steps[this.currentStepId].selected
155+
console.log('Handling previous: ', this.steps[this.currentStepId], stepSelected)
156+
if (stepSelected === undefined && this.currentStepId <= 4) return
157+
this.updateDisabledAndVisibleSteps(stepName, stepSelected)
150158
let previousStep = this.currentStepId
151159
for (let i = this.currentStepId - 1; i >= 0; i--) {
152160
const thisStep = this.steps[i]

‎src/store/index.js‎

Lines changed: 10 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -12,10 +12,12 @@ export default new Vuex.Store({
1212
creatorProfileUrl: '',
1313
workTitle: '',
1414
workUrl: ''
15-
},
16-
currentStepId: 0
15+
}
1716
},
1817
getters: {
18+
isLicenseSelected: state => {
19+
return state.currentLicenseAttributes.BY !== undefined
20+
},
1921
shortName: state => {
2022
return attrToShort(state.currentLicenseAttributes)
2123
},
@@ -33,21 +35,23 @@ export default new Vuex.Store({
3335
}
3436
},
3537
mutations: {
36-
toggleSelected(state, stepName) {
37-
// Called when a radio button is clicked, either FirstStep or Step
38+
setSelected(state, { stepName, isSelected }) {
39+
// When a Radio button is selected, either knowLicense or
40+
// currentLicenseAttribute 'selected' attribute is updated
3841
if (['BY', 'NC', 'ND', 'SA'].indexOf(stepName) > -1) {
3942
state.currentLicenseAttributes = {
4043
...state.currentLicenseAttributes,
41-
[stepName]: !state.currentLicenseAttributes[stepName]
44+
[stepName]: isSelected
4245
}
43-
} else {
46+
} else if (stepName === 'FS') {
4447
state.knowLicense = !state.knowLicense
4548
}
4649
},
4750
updateAttributesFromShort(state, shortName) {
4851
if (shortName.includes('CC0')) {
4952
state.currentLicenseAttributes = { ...CC0Attributes }
5053
} else {
54+
state.currentLicenseAttributes.BY = true
5155
state.currentLicenseAttributes.NC = !!shortName.includes('NC')
5256
state.currentLicenseAttributes.ND = !!shortName.includes('ND')
5357
state.currentLicenseAttributes.SA = !!shortName.includes('SA')

‎src/utils/license-utilities.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,7 @@ function shortToAttr(shortLicenseName) {
3737
}
3838

3939
function attrToShort(attr) {
40+
if (attr.BY === undefined) return undefined
4041
if (!attr.BY) { return 'CC0 1.0' }
4142
let base = 'CC BY'
4243
if (attr.NC) { base += '-NC' }

0 commit comments

Comments
 (0)