Refactor finish minimum and advance into a single finish screen

Author: abelsiqueira

cypress/e2e/spec.cy.ts

@@ -74,7 +74,7 @@ describe('Basic usage', () => {
         cy.dataCy('btn-next')
             .click()
 
-        // Finish Minimum screen
+        // Finish screen (minimum version)
         cy.url().should('include', '/finish')
         cy.dataCy('btn-download')
             .click()
@@ -130,7 +130,7 @@ describe('Basic usage', () => {
         cy.dataCy('btn-next')
             .click()
 
-        // Finish Minimum screen
+        // Finish screen (minimum version)
         cy.url().should('include', '/finish')
         cy.dataCy('btn-add-more')
             .click()
@@ -240,7 +240,7 @@ describe('Basic usage', () => {
         cy.dataCy('btn-next')
             .click()
 
-        // Finish Advanced screen
+        // Finish screen (advanced version)
         cy.url().should('include', '/finish')
         cy.dataCy('btn-download')
             .click()

src/components/LayoutStepper.vue

@@ -94,7 +94,7 @@ export default defineComponent({
         return {
             isNotFinish: computed(() => {
                 const currentPath = useRoute().path
-                return currentPath !== '/finish-minimum' && currentPath !== '/finish-advanced'
+                return currentPath !== '/finish'
             }),
             isPreviewDrawerEnabled,
             onTogglePreview: () => { isPreviewDrawerEnabled.value = !isPreviewDrawerEnabled.value }

src/components/ScreenFinishAdvanced.vue src/components/ScreenFinish.vuesrc/components/ScreenFinishAdvanced.vue renamed to src/components/ScreenFinish.vue

@@ -13,14 +13,36 @@
     </h1>
 
     <div v-if="isValidCFF">
-        <p class="finish-paragraph">
+        <p
+            v-if="!showAdvanced"
+            class="finish-paragraph"
+        >
+            You now have a minimal CITATION.cff file. Use the buttons below to download your CITATION.cff file, continue adding more properties, or reset the form.
+        </p>
+        <p
+            v-else
+            class="finish-paragraph"
+        >
             Use the buttons below to download your CITATION.cff file, or reset the form to start over.
         </p>
         <p class="finish-paragraph">
             Distribute the CITATION.cff with your project, for instance, by adding it to the root of your GitHub repository.
         </p>
         <div class="row">
             <DownloadButton class="col-4 q-ma-lg" />
+            <q-btn
+                v-if="!showAdvanced"
+                class="col-4 q-ma-lg"
+                color="primary"
+                data-cy="btn-add-more"
+                icon="workspace_premium"
+                label="Add more"
+                no-caps
+                size="xl"
+                to="/identifiers"
+                v-on:click="setupAdvanced"
+                v-bind:class="q.platform.is.mobile ? 'full-width' : ''"
+            />
         </div>
         <div class="row">
             <q-btn
@@ -51,18 +73,17 @@ import { useStepperErrors } from 'src/store/stepper-errors'
 import { useValidation } from 'src/store/validation'
 
 export default defineComponent({
-    name: 'ScreenFinishAdvanced',
+    name: 'ScreenFinish',
     components: {
         DownloadButton
     },
     setup () {
-        const { setStepName, setShowAdvanced } = useApp()
+        const { setStepName, setShowAdvanced, showAdvanced } = useApp()
         const { reset: resetCffData } = useCff()
         const { reset: resetStepperErrorState } = useStepperErrors()
         const { errors } = useValidation()
         const q = useQuasar()
         return {
-            isValidCFF: computed(() => errors.value.length === 0),
             confirmAndReset: () => {
                 q.dialog({
                     title: 'Confirm',
@@ -75,7 +96,14 @@ export default defineComponent({
                     setShowAdvanced(false)
                     await setStepName('start')
                 })
-            }
+            },
+            isValidCFF: computed(() => errors.value.length === 0),
+            q,
+            setupAdvanced: async () => {
+                setShowAdvanced(true)
+                await setStepName('identifiers')
+            },
+            showAdvanced
         }
     }
 })

src/components/ScreenFinishMinimum.vue

@@ -32,23 +32,13 @@
             v-on:click="setStepName('authors')"
         />
 
-        <q-step
-            active-icon="navigate_next"
-            data-cy="step-finish-minimum"
-            name="finish-minimum"
-            title="Finish"
-            v-bind:order="2"
-            v-if="!showAdvanced"
-            v-on:click="setStepName('finish-minimum')"
-        />
-
         <q-step
             data-cy="step-identifiers"
             name="identifiers"
             title="Identifiers"
             v-bind:active-icon="errorStateScreenIdentifiers ? 'warning' : 'edit'"
             v-bind:error="errorStateScreenIdentifiers"
-            v-bind:order="3"
+            v-bind:order="2"
             v-if="showAdvanced"
             v-on:click="setStepName('identifiers')"
         />
@@ -59,7 +49,7 @@
             title="Related resources"
             v-bind:active-icon="errorStateScreenRelatedResources ? 'warning' : 'edit'"
             v-bind:error="errorStateScreenRelatedResources"
-            v-bind:order="4"
+            v-bind:order="3"
             v-if="showAdvanced"
             v-on:click="setStepName('related-resources')"
         />
@@ -68,7 +58,7 @@
             data-cy="step-abstract"
             name="abstract"
             title="Abstract"
-            v-bind:order="5"
+            v-bind:order="4"
             v-if="showAdvanced"
             v-on:click="setStepName('abstract')"
         />
@@ -79,7 +69,7 @@
             title="Keywords"
             v-bind:active-icon="errorStateScreenKeywords ? 'warning' : 'edit'"
             v-bind:error="errorStateScreenKeywords"
-            v-bind:order="6"
+            v-bind:order="5"
             v-if="showAdvanced"
             v-on:click="setStepName('keywords')"
         />
@@ -88,7 +78,7 @@
             data-cy="step-license"
             name="license"
             title="License"
-            v-bind:order="7"
+            v-bind:order="6"
             v-if="showAdvanced"
             v-on:click="setStepName('license')"
         />
@@ -99,19 +89,18 @@
             title="Version specific"
             v-bind:active-icon="errorStateScreenVersionSpecific ? 'warning' : 'edit'"
             v-bind:error="errorStateScreenVersionSpecific"
-            v-bind:order="8"
+            v-bind:order="7"
             v-if="showAdvanced"
             v-on:click="setStepName('version-specific')"
         />
 
         <q-step
             active-icon="navigate_next"
-            data-cy="step-finish-advanced"
-            name="finish-advanced"
+            data-cy="step-finish"
+            name="finish"
             title="Finish"
-            v-bind:order="9"
-            v-if="showAdvanced"
-            v-on:click="setStepName('finish-advanced')"
+            v-bind:order="showAdvanced ? 8 : 2"
+            v-on:click="setStepName('finish')"
         />
     </q-stepper>
 </template>

src/components/Stepper.vue

@@ -22,7 +22,7 @@
             label="Finish"
             no-caps
             v-bind:class="!showAdvanced ? 'hidden' : ''"
-            v-bind:to="showAdvanced === true ? '/finish-advanced' : '/finish-minimum'"
+            to="/finish"
         />
         <q-btn
             color="primary"

src/components/StepperActions.vue

@@ -19,11 +19,6 @@ const routes: RouteRecordRaw[] = [
         component: () => import('src/components/LayoutStepper.vue'),
         children: [{ path: '', component: () => import('src/components/ScreenAuthors.vue') }]
     },
-    {
-        path: '/finish-minimum',
-        component: () => import('src/components/LayoutStepper.vue'),
-        children: [{ path: '', component: () => import('src/components/ScreenFinishMinimum.vue') }]
-    },
     {
         path: '/identifiers',
         component: () => import('src/components/LayoutStepper.vue'),
@@ -55,9 +50,9 @@ const routes: RouteRecordRaw[] = [
         children: [{ path: '', component: () => import('src/components/ScreenVersionSpecific.vue') }]
     },
     {
-        path: '/finish-advanced',
+        path: '/finish',
         component: () => import('src/components/LayoutStepper.vue'),
-        children: [{ path: '', component: () => import('src/components/ScreenFinishAdvanced.vue') }]
+        children: [{ path: '', component: () => import('src/components/ScreenFinish.vue') }]
     },
     {
         path: '/404',