Update Vuex and Stepper data handling

Set ND and NC steps as reversed, so that selecting 'No' actually sets the state as selected (due to change in question wording from negative to positive).
Remove unnecessary getters from Vuex.
Show CopyrightWaiverStep if CC0 is selected from Dropdown.
Make only previous step headings clickable, so that user doesn't skip steps.
Unify handling of selection/deselection for different types of steps.

Signed-off-by: Olga Bulat <obulat@gmail.com>

Author: obulat

src/App.vue

@@ -12,7 +12,7 @@
                 </div>
             </div>
             <div class="columns">
-            <Stepper v-model="currentStepId" />
+            <Stepper />
             <div class="column" >
                 <div class="fixed-right-column">
                 <SelectedLicenseCard

src/components/AttributionDetailsStep.vue

@@ -40,7 +40,7 @@ export default {
         ...mapMutations(['setCreatorName', 'setCreatorProfileUrl', 'setWorkTitle', 'setWorkUrl'])
     },
     computed: {
-        ...mapState({ attributionDetails: state => state.attributionDetails }),
+        ...mapState(['attributionDetails']),
         creatorName: {
             get() { return this.attributionDetails.creatorName },
             set(newVal) {

src/components/CopyrightWaiverStep.vue

@@ -1,19 +1,60 @@
 <template>
     <div>
-        <b-checkbox>
-            {{$t('stepper.CW.copyright-waive-agreement')}}
-        </b-checkbox>
-        <textarea :value="this.$t('cc0-waiver.text')" :class="'waiver-textarea'" />
-        <b-checkbox>
-            {{$t("stepper.CW.copyright-waive-confirmation")}}
-        </b-checkbox>
+        <div class="step-description vocab-body body-normal"
+             v-if="this.status==='previous'">
+            <p class="vocab-body body-normal">{{$t('stepper.CW.selected')}}</p>
+        </div>
+        <div class="step-actions" v-else-if="this.status==='current'">
+            <b-checkbox v-model="copyrightWaiverAgreed">
+                {{$t('stepper.CW.copyright-waive-agreement')}}
+            </b-checkbox>
+            <textarea :value="this.$t('cc0-waiver.text')" :class="'waiver-textarea'" />
+            <b-checkbox v-model="copyrightWaiverConfirmed">
+                {{$t("stepper.CW.copyright-waive-confirmation")}}
+            </b-checkbox>
+        </div>
     </div>
 </template>
 
 <script>
 export default {
     name: 'CopyrightWaiverStep',
-    props: ['value']
+    props: {
+        stepId: Number,
+        stepName: String,
+        selected: Boolean,
+        status: String
+    },
+    data() {
+        return {
+            agreed: false,
+            confirmed: false
+        }
+    },
+    computed: {
+        copyrightWaiverAgreed: {
+            get() {
+                return this.agreed
+            },
+            set() {
+                this.agreed = !this.agreed
+                if (this.agreed && this.confirmed) {
+                    this.$emit('change', this.$props.stepName, this.$props.stepId, true)
+                }
+            }
+        },
+        copyrightWaiverConfirmed: {
+            get() {
+                return this.confirmed
+            },
+            set() {
+                this.confirmed = !this.confirmed
+                if (this.agreed && this.confirmed) {
+                    this.$emit('change', this.$props.stepName, this.$props.stepId, true)
+                }
+            }
+        }
+    }
 }
 </script>
 

src/components/DropdownStep.vue

@@ -4,7 +4,7 @@
             {{cardText}}
         </div>
         <div class="step-actions" v-else-if="this.status==='current'">
-            <LicenseDropdown />
+            <LicenseDropdown @input="updateSelected" />
         </div>
     </div>
 
@@ -17,7 +17,13 @@ export default {
     name: 'DropdownStep',
     components: { LicenseDropdown },
     props: {
-        status: String
+        status: String,
+        stepId: Number
+    },
+    methods: {
+        updateSelected() {
+            this.$emit('input', 'DD', this.$props.stepId, true)
+        }
     },
     computed: {
         ...mapGetters(['fullName']),

src/components/FirstStep.vue

@@ -41,7 +41,7 @@ export default {
                 }
             },
             set(newVal) {
-                this.$emit('change', newVal === 'yes')
+                this.$emit('change', 'FS', 0, newVal === 'yes')
             }
         },
         yesText() {

src/components/LicenseDropdown.vue

@@ -36,6 +36,7 @@ export default {
     methods: {
         setCurrentLicense(currentLicense) {
             this.$store.commit('updateAttributesFromShort', currentLicense)
+            this.$emit('input')
             if (process.env.NODE_ENV === 'production') {
                 this.$ga.event({
                     eventCategory: 'LicenseDropdown',

src/components/Step.vue

@@ -1,6 +1,7 @@
 <template>
     <div>
-        <div class="step-description vocab-body body-normal" v-if="this.status==='previous'">
+        <div class="step-description vocab-body body-normal"
+             v-if="this.status==='previous'||this.showDisabledDue">
             <p class="vocab-body body-normal">{{$t(cardText)}}</p>
         </div>
         <div class="step-actions" v-else-if="this.status==='current'">
@@ -29,13 +30,23 @@ export default {
         selected: Boolean,
         stepId: Number,
         status: String,
-        reversed: Boolean
+        reversed: Boolean,
+        enabled: Boolean,
+        disabledDue: String
     },
     computed: {
+        showDisabledDue() {
+            return !this.$props.enabled && this.$props.disabledDue !== undefined
+        },
         qualifier() {
             return this.reversed ? !this.selected : this.selected
         },
         cardText() {
+            if (this.$props.enabled === false) {
+                return this.$props.disabledDue === 'ND'
+                    ? 'stepper.disabled-text-ND'
+                    : 'stepper.disabled-text'
+            }
             const prefix = `stepper.${this.$props.stepName}.${this.qualifier ? '' : 'not-'}`
             return `${prefix}selected`
         },