-
+
-
+ @click="setActiveStep(step.name)">
+
{{$t(headerText(step.name))}}
+
+
+
+
+
-
-
@@ -64,130 +65,31 @@
import VerticalStep from './VerticalStep'
import FirstStep from './FirstStep'
import AttributionDetails from './AttributionDetails'
+import { mapGetters, mapState, mapActions } from 'vuex'
+import DropdownStep from './DropdownStep'
export default {
name: 'VerticalStepper',
components: {
+ DropdownStep,
FirstStep,
VerticalStep,
AttributionDetails
},
- props: ['selected'],
- data: function() {
- return {
- knowLicense: false,
- activeStep: 0,
- currentStep: 'fs',
- stepNames: ['fs', 'dd', 'by', 'nc', 'nd', 'sa', 'cw', 'ad'],
- steps: [
- {
- name: 'fs',
- type: 'first'
- },
- {
- name: 'dd',
- type: 'form'
- },
- {
- name: 'by',
- type: 'licenseAttribute'
- },
- {
- name: 'cw',
- type: 'form'
- },
- {
- name: 'nc',
- type: 'licenseAttribute'
- },
- {
- name: 'nd',
- type: 'licenseAttribute'
- },
- {
- name: 'sa',
- type: 'licenseAttribute'
- },
- {
- name: 'ad',
- type: 'form'
- }
- ]
- }
- },
methods: {
- isEnabled(stepId) {
- if (this.knowLicense) {
- return ['fs', 'dd', 'ad'].indexOf(stepId) > -1
- } else if (this.$props.selected.shortName.includes('BY')) {
- return ['cw', 'dd'].indexOf(stepId) === -1
- } else if (this.$props.selected.shortName.includes('CC0')) {
- // TODO: Probably need to simply make other steps unclickable with tooltips
- return ['fs', 'by', 'cw', 'ad'].indexOf(stepId) > -1
- } return true
- },
- stepStatus(stepId) {
- const stepIdx = this.stepNames.indexOf(stepId)
- const currentStepIdx = this.stepNames.indexOf(this.currentStep)
- // can return current, previous, disabled or inactive
- if (!this.isEnabled(stepId)) {
- return 'disabled'
- } else if (this.currentStep === stepId) {
- return 'current'
- } else {
- return stepIdx < currentStepIdx ? 'previous' : 'inactive'
- }
- },
- isAttributeSelected(stepId) {
- return this.$props.selected.shortName.includes(stepId.toUpperCase())
- },
- handlePrevious() {
- console.log('Current step: ', this.currentStep)
- },
- handleNext() {
- console.log('Current step: ', this.currentStep, this.steps)
- // if you know license -> set current step to dd
- // if cc0 -> set current step to cw
- // if dd/cw/sa(or nd selected) -> ad
- if (this.currentStep === 'fs') {
- this.currentStep = this.knowLicense ? 'dd' : 'by'
- } else if (this.currentStep === 'by') {
- this.currentStep = this.selected.shortName.includes('CC0') ? 'cw' : 'nc'
- } else if (this.currentStep === 'dd' ||
- this.currentStep === 'cw' ||
- this.currentStep === 'sa' ||
- (this.currentStep === 'nd' && this.selected.shortName.includes('ND'))) {
- this.currentStep = 'ad'
- } else {
- console.log('Handling next for ', this.currentStep)
- this.currentStep = this.stepNames[this.stepNames.indexOf(this.currentStep) + 1]
- }
- },
- handleFinish() {
- console.log('FINISHED!')
- this.$emit('openLicenseUse')
- },
- changeStep(clickedIdx) {
- if (this.enabledSteps[clickedIdx].status === 'current') return
- if (clickedIdx > 0) { this.$emit('openLicenseCard', true) }
- this.currentStep = this.enabledSteps[clickedIdx].name
- },
+ ...mapActions(['handleNext', 'handlePrevious', 'setActiveStep']),
headerText(stepId) {
const prefix = `stepper.${stepId}`
return this.status === 'current' ? `${prefix}.question` : `${prefix}.heading`
},
- updateLicense(stepId) {
- this.$emit('toggleLicenseAttr', stepId)
+ isLicenseAttribute(stepId) {
+ return ['BY', 'NC', 'ND', 'SA'].indexOf(stepId) > -1
}
},
computed: {
- enabledSteps() {
- return this.steps.filter((step) => {
- return this.isEnabled(step.name)
- })
- }
+ ...mapGetters(['enabledAndVisibleSteps', 'isStepSelected']),
+ ...mapState(['knowLicense'])
}
-
}
@@ -219,14 +121,16 @@ export default {
.previous .icon {
color: hsl(138, 95%, 33%);
}
-
+ .step-navigation {
+ margin-left: 33px;
+ }
.previous .step-card-content {
padding-top:8px;
padding-bottom: 0;
padding-left: 40px;
}
.card-content.step-card-content {
- padding-left: 48px;
+ padding-left: 40px;
}
.pagination-next {
background-color: #04A635;
From 19769661cdb17242f195b3fe9de8f147d41c0858 Mon Sep 17 00:00:00 2001
From: Olga Bulat
Date: Mon, 10 Feb 2020 23:33:12 +0300
Subject: [PATCH 06/23] Clean up vuex store, show Copyright Waiver if CC0
Signed-off-by: Olga Bulat
---
store/index.js | 13 ++-----------
1 file changed, 2 insertions(+), 11 deletions(-)
diff --git a/store/index.js b/store/index.js
index 5b5d3fa57..06f2a3dde 100644
--- a/store/index.js
+++ b/store/index.js
@@ -170,12 +170,11 @@ export default new Vuex.Store({
state.currentStepId = previousStep
},
updateDisabledSteps(state, stepsToSetDisabled) {
- console.log('Update disabled steps: ', stepsToSetDisabled)
// Set disabled steps in the stepsToSetDisabled array
for (const step of state.steps) {
- if (stepsToSetDisabled.indexOf(step.name) > -1 && !step.enabled) {
+ if (stepsToSetDisabled.indexOf(step.name) > -1 && step.enabled) {
Vue.set(state.steps, step.id, { ...step, enabled: false })
- } else if (stepsToSetDisabled.indexOf(step.name) === -1 && step.enabled) {
+ } else if (stepsToSetDisabled.indexOf(step.name) === -1 && !step.enabled) {
Vue.set(state.steps, step.id, { ...step, enabled: true })
}
}
@@ -215,16 +214,13 @@ export default new Vuex.Store({
const [stepName, isStepSelected] = payload
if (stepName in visibleSetters) {
const visible = visibleSetters[stepName][isStepSelected]
- console.log(visible, visibleSetters[stepName])
if (visible !== undefined) {
- console.log('Will set ', visible.toString(), ' visible')
context.commit('updateVisibleSteps', visible)
}
}
if (stepName in disabledSetters) {
const disabled = disabledSetters[stepName][isStepSelected]
if (disabled !== undefined) {
- console.log('Will set ', disabled, ' disabled because ', stepName, ' is selected? ', isStepSelected)
context.commit('updateDisabledSteps', disabled)
}
}
@@ -236,7 +232,6 @@ export default new Vuex.Store({
context.commit('updateStepStatus', currentStepName)
},
handlePrevious: (context, payload) => {
- console.log('Handle previous: ', payload)
const currentStepName = payload
const isCurrentStepSelected = context.getters.isStepSelected(payload)
context.dispatch('updateDisabledAndVisibleSteps', [currentStepName, isCurrentStepSelected])
@@ -246,10 +241,7 @@ export default new Vuex.Store({
// On radio button click, Step's Selected parameter is toggled and Disabled/Visible
// steps are updated
const [currentStepName, isCurrentStepSelected] = payload
- console.log('Updating selected, current step: ', currentStepName, ', selected: ', isCurrentStepSelected)
- console.log('Steps before toggling: ', context.state.steps[1])
context.commit('toggleSelected', currentStepName)
- console.log('Steps after toggling: ', context.state.steps[1], context.state.currentLicenseAttributes)
context.dispatch('updateDisabledAndVisibleSteps', [currentStepName, !isCurrentStepSelected])
},
setActiveStep: (context, payload) => {
@@ -275,4 +267,3 @@ export default new Vuex.Store({
}
}
})
-// TODO: I'm calculating current Step Name in many places, sending a stepName parameter can be faster
From cb37181d5cd34c3a08b5f147a25a1b4f41d9175b Mon Sep 17 00:00:00 2001
From: Olga Bulat
Date: Mon, 10 Feb 2020 23:33:48 +0300
Subject: [PATCH 07/23] Remove old components
Signed-off-by: Olga Bulat
---
src/components/AttributionDetailsStep.vue | 49 ---
src/components/Chooser.vue | 66 ----
src/components/Stepper.vue | 350 ----------------------
3 files changed, 465 deletions(-)
delete mode 100644 src/components/AttributionDetailsStep.vue
delete mode 100644 src/components/Chooser.vue
delete mode 100644 src/components/Stepper.vue
diff --git a/src/components/AttributionDetailsStep.vue b/src/components/AttributionDetailsStep.vue
deleted file mode 100644
index cab124044..000000000
--- a/src/components/AttributionDetailsStep.vue
+++ /dev/null
@@ -1,49 +0,0 @@
-
-
-
-
-
-
-
diff --git a/src/components/Chooser.vue b/src/components/Chooser.vue
deleted file mode 100644
index 8c2c0c2a6..000000000
--- a/src/components/Chooser.vue
+++ /dev/null
@@ -1,66 +0,0 @@
-
-
-
-
-
diff --git a/src/components/Stepper.vue b/src/components/Stepper.vue
deleted file mode 100644
index 900ef50ee..000000000
--- a/src/components/Stepper.vue
+++ /dev/null
@@ -1,350 +0,0 @@
-
-
-
-
-
-
{{ $t('select-license.instructions') }}
-
-
-
-
-
-
-
-
-
-
-
+
+ {{cardText}}
+
+
+
+
+
-
{{$t('stepper.ad.instructions')}}
+
{{$t('stepper.AD.instructions')}}