Merge pull request #736 from citation-file-format/453-refactor-finish

Author: abelsiqueira

cypress/e2e/errors.cy.ts

@@ -15,7 +15,7 @@ describe('On application start', () => {
     // Since the stepper is separate from the screen itself, it doesn't matter which screen we join
     const stepsWithExpectedErrors = ['start', 'authors']
     it('should have errors in start and authors, but not in any other steps', () => {
-        cy.visit('/finish-advanced')
+        cy.visit('/identifiers')
         stepsWithExpectedErrors.forEach((step) => {
             cy.checkThatStepperValidityIs(false, step)
         })
@@ -43,10 +43,9 @@ describe('From a fixed advanced app', () => {
         cy.visit('/authors')
         cy.dataCy('btn-add-author')
             .click()
-        cy.visit('/finish-advanced')
+        cy.visit('/identifiers')
     })
     it('should have no errors', () => {
-        cy.visit('/finish-advanced')
         allStepNames.forEach((step) => {
             cy.checkThatStepperValidityIs(true, step)
             cy.dataCy('ta-cff-preview')

cypress/e2e/navigation.cy.ts

@@ -29,7 +29,7 @@ describe('App navigation', () => {
                 cy.dataCy('btn-previous')
                     .should('be.visible')
             })
-            cy.url().should('include', '/finish-minimum')
+            cy.url().should('include', '/finish')
             cy.dataCy('btn-next')
                 .should('not.be.visible')
             Array.from(basicStepNames).reverse().forEach((step) => {
@@ -44,7 +44,7 @@ describe('App navigation', () => {
                 .should('not.be.visible')
         })
         it('should be navigable through the stepper', () => {
-            ['finish-minimum', ...basicStepNames, ...[...basicStepNames].reverse()].forEach((step) => {
+            ['finish', ...basicStepNames, ...[...basicStepNames].reverse()].forEach((step) => {
                 cy.visit(step === 'start' ? '/authors' : `/${step}`)
                 cy.dataCy(`step-${step}`)
                     .click()
@@ -62,7 +62,7 @@ describe('App navigation', () => {
             cy.visit('/authors')
             cy.dataCy('btn-add-author')
                 .click()
-            cy.visit('/finish-minimum')
+            cy.visit('/finish')
             cy.dataCy('btn-add-more')
                 .click()
         })
@@ -82,7 +82,7 @@ describe('App navigation', () => {
                 cy.dataCy('btn-previous')
                     .should('be.visible')
             })
-            cy.url().should('include', '/finish-advanced')
+            cy.url().should('include', '/finish')
             cy.dataCy('btn-next')
                 .should('not.be.visible')
             Array.from(allStepNames).reverse().forEach((step) => {
@@ -97,7 +97,7 @@ describe('App navigation', () => {
                 .should('not.be.visible')
         })
         it('should be navigable through the stepper', () => {
-            ['finish-advanced', ...allStepNames, ...[...allStepNames].reverse()].forEach((step) => {
+            ['finish', ...allStepNames, ...[...allStepNames].reverse()].forEach((step) => {
                 cy.visit(step === 'start' ? '/authors' : `/${step}`)
                 cy.dataCy(`step-${step}`)
                     .click()
@@ -106,7 +106,7 @@ describe('App navigation', () => {
             })
         })
         describe('if there are no errors', () => {
-            it('should jump from step to finish-advanced when finish is clicked', () => {
+            it('should jump from step to finish when finish is clicked', () => {
                 allStepNames.forEach((step) => {
                     cy.visit(`/${step}`)
                     // The next test is just to make sure the page loaded without using cy.wait
@@ -115,7 +115,7 @@ describe('App navigation', () => {
                         .should('be.visible')
                         .click()
                     cy.url()
-                        .should('contain', '/finish-advanced')
+                        .should('contain', '/finish')
                 })
             })
         })
@@ -153,8 +153,8 @@ describe('App navigation', () => {
                 }
             })
         })
-        it(`should have ${basicStepNames.length + 1} steps, visible previous, hidden next/finish for step finish-minimum`, () => {
-            cy.visit('/finish-minimum')
+        it(`should have ${basicStepNames.length + 1} steps, visible previous, hidden next/finish for step finish`, () => {
+            cy.visit('/finish')
             cy.get('.q-stepper__tab')
                 .should('have.length', basicStepNames.length + 1)
             cy.dataCy('btn-finish')
@@ -164,17 +164,6 @@ describe('App navigation', () => {
             cy.dataCy('btn-previous')
                 .should('be.visible')
         })
-        it(`should have ${advancedStepNames.length + 1} steps, visible previous, hidden next/finish for step finish-advanced`, () => {
-            cy.visit('/finish-advanced')
-            cy.get('.q-stepper__tab')
-                .should('have.length', allStepNames.length + 1)
-            cy.dataCy('btn-finish')
-                .should('not.be.visible')
-            cy.dataCy('btn-next')
-                .should('not.be.visible')
-            cy.dataCy('btn-previous')
-                .should('be.visible')
-        })
     })
 
     describe('On the screen Authors', () => {

cypress/e2e/spec.cy.ts

@@ -74,8 +74,8 @@ describe('Basic usage', () => {
         cy.dataCy('btn-next')
             .click()
 
-        // Finish Minimum screen
-        cy.url().should('include', '/finish-minimum')
+        // Finish screen (minimum version)
+        cy.url().should('include', '/finish')
         cy.dataCy('btn-download')
             .click()
         const downloadsFolder = Cypress.config('downloadsFolder')
@@ -130,8 +130,8 @@ describe('Basic usage', () => {
         cy.dataCy('btn-next')
             .click()
 
-        // Finish Minimum screen
-        cy.url().should('include', '/finish-minimum')
+        // Finish screen (minimum version)
+        cy.url().should('include', '/finish')
         cy.dataCy('btn-add-more')
             .click()
 
@@ -240,8 +240,8 @@ describe('Basic usage', () => {
         cy.dataCy('btn-next')
             .click()
 
-        // Finish Advanced screen
-        cy.url().should('include', '/finish-advanced')
+        // 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>