Skip to content

Commit 4325389

Browse files
jspaaksjspaaks
authored
Merge pull request #149 from citation-file-format/80-intermediate-finish
refactored the router and added intermediate finish page
2 parents 5787358 + 3bfa1e8 commit 4325389

8 files changed

Lines changed: 255 additions & 125 deletions

File tree

‎src/components/Stepper.vue‎

Lines changed: 50 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -7,98 +7,122 @@
77
flat
88
header-nav
99
inactive-icon=""
10-
v-bind:model-value="step"
11-
v-on:update:modelValue="updateStep"
10+
v-bind:model-value="stepName"
1211
vertical
1312
>
1413
<q-step
1514
color="primary"
1615
icon=""
16+
name="start"
1717
title="Start"
18-
v-bind:name="1"
18+
v-bind:order="0"
19+
v-on:click="setStepName('start')"
1920
/>
2021

2122
<q-step
2223
color="primary"
2324
icon=""
25+
name="authors"
2426
title="Authors"
25-
v-bind:name="2"
27+
v-bind:order="1"
28+
v-on:click="setStepName('authors')"
2629
/>
2730

2831
<q-step
2932
color="primary"
3033
icon=""
34+
name="finish-minimum"
35+
title="Finish"
36+
v-bind:order="2"
37+
v-if="!showAdvanced"
38+
v-on:click="setStepName('finish-minimum')"
39+
/>
40+
41+
<q-step
42+
color="primary"
43+
icon=""
44+
name="identifiers"
3145
title="Identifiers"
32-
v-bind:name="3"
46+
v-bind:order="3"
47+
v-if="showAdvanced"
48+
v-on:click="setStepName('identifiers')"
3349
/>
3450

3551
<q-step
3652
color="primary"
3753
icon=""
54+
name="related-resources"
3855
title="Related resources"
39-
v-bind:name="4"
56+
v-bind:order="4"
57+
v-if="showAdvanced"
58+
v-on:click="setStepName('related-resources')"
4059
/>
4160

4261
<q-step
4362
color="primary"
4463
icon=""
64+
name="abstract"
4565
title="Abstract"
46-
v-bind:name="5"
66+
v-bind:order="5"
67+
v-if="showAdvanced"
68+
v-on:click="setStepName('abstract')"
4769
/>
4870

4971
<q-step
5072
color="primary"
5173
icon=""
74+
name="keywords"
5275
title="Keywords"
53-
v-bind:name="6"
76+
v-bind:order="6"
77+
v-if="showAdvanced"
78+
v-on:click="setStepName('keywords')"
5479
/>
5580

5681
<q-step
5782
color="primary"
5883
icon=""
84+
name="license"
5985
title="License"
60-
v-bind:name="7"
86+
v-bind:order="7"
87+
v-if="showAdvanced"
88+
v-on:click="setStepName('license')"
6189
/>
6290

6391
<q-step
6492
color="primary"
6593
icon=""
94+
name="version-specific"
6695
title="Version specific"
67-
v-bind:name="8"
96+
v-bind:order="8"
97+
v-if="showAdvanced"
98+
v-on:click="setStepName('version-specific')"
6899
/>
69100

70101
<q-step
71102
color="primary"
72-
disable
73103
icon=""
104+
name="finish-advanced"
74105
title="Finish"
75-
v-bind:name="100"
76-
>
77-
This step won't show up because it is disabled.
78-
</q-step>
106+
v-bind:order="9"
107+
v-if="showAdvanced"
108+
v-on:click="setStepName('finish-advanced')"
109+
/>
79110
</q-stepper>
80111
</div>
81112
</template>
82113

83114
<script lang="ts">
84115
85-
import { useRouter } from 'vue-router'
86116
import { useApp } from '../store/app'
87117
88118
export default {
89119
setup () {
90-
const { step, setStep } = useApp()
91-
const router = useRouter()
92-
93-
const updateStep = (newStep: number) => {
94-
setStep(newStep)
95-
const targetRoute = `/${step.value}`
96-
return router.push({ path: targetRoute })
97-
}
120+
const { showAdvanced, stepName, setStepName } = useApp()
98121
99122
return {
100-
step,
101-
updateStep
123+
showAdvanced,
124+
stepName,
125+
setStepName
102126
}
103127
}
104128
}

‎src/components/StepperActions.vue‎

Lines changed: 7 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@
66
flat
77
label="Back"
88
no-caps
9+
v-bind:disable="cannotGoBack"
910
v-on:click="navigatePrevious"
1011
/>
1112
</div>
@@ -19,12 +20,13 @@
1920
flat
2021
label="Finish"
2122
no-caps
22-
to="/finish"
23+
v-bind:to="showAdvanced === true ? '/finish-advanced' : '/finish-minimum'"
2324
/>
2425
<q-btn
2526
color="primary"
2627
label="Next"
2728
no-caps
29+
v-bind:disable="cannotGoForward"
2830
v-on:click="navigateNext"
2931
/>
3032
</q-btn-group>
@@ -33,7 +35,6 @@
3335
</template>
3436

3537
<script lang="ts">
36-
import { useRouter } from 'vue-router'
3738
import { useApp } from '../store/app'
3839
3940
import { defineComponent } from 'vue'
@@ -42,22 +43,12 @@ export default defineComponent({
4243
name: 'StepperActions',
4344
4445
setup () {
45-
const { step, incrementStep, decrementStep } = useApp()
46-
const router = useRouter()
47-
48-
const navigateNext = () => {
49-
incrementStep()
50-
const targetRoute = `/${step.value}`
51-
return router.push({ path: targetRoute })
52-
}
53-
54-
const navigatePrevious = () => {
55-
decrementStep()
56-
const targetRoute = `/${step.value}`
57-
return router.push({ path: targetRoute })
58-
}
46+
const { showAdvanced, cannotGoBack, cannotGoForward, navigateNext, navigatePrevious } = useApp()
5947
6048
return {
49+
cannotGoBack,
50+
cannotGoForward,
51+
showAdvanced,
6152
navigateNext,
6253
navigatePrevious
6354
}

src/pages/Finish.vue renamed to src/pages/FinishAdvanced.vue

Lines changed: 20 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -76,15 +76,15 @@
7676
icon="chevron_left"
7777
label="Back to form"
7878
no-caps
79-
v-on:click="$router.go(-1)"
79+
v-on:click="backToForm"
8080
/>
8181
<q-btn
8282
class="q-ml-xl"
8383
color="primary"
8484
icon="edit"
8585
label="Create another"
8686
no-caps
87-
to="/1"
87+
v-on:click="createAnother"
8888
/>
8989
</q-card-actions>
9090
</q-card>
@@ -117,12 +117,29 @@
117117
import { defineComponent } from 'vue'
118118
import Preview from 'components/Preview.vue'
119119
import DownloadButton from 'components/DownloadButton.vue'
120+
import { useApp } from '../store/app'
121+
import { useCff } from '../store/cff'
120122
121123
export default defineComponent({
122-
name: 'Finish',
124+
name: 'FinishAdvanced',
123125
components: {
124126
Preview,
125127
DownloadButton
128+
},
129+
setup () {
130+
const { setStepName, setShowAdvanced } = useApp()
131+
const { reset } = useCff()
132+
133+
return {
134+
createAnother: async () => {
135+
reset()
136+
setShowAdvanced(false)
137+
await setStepName('start')
138+
},
139+
backToForm: async () => {
140+
await setStepName('version-specific')
141+
}
142+
}
126143
}
127144
})
128145
</script>

‎src/pages/FinishMinimum.vue‎

Lines changed: 113 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,113 @@
1+
<template>
2+
<div class="">
3+
<div class="row">
4+
<div class="col-6 q-pa-lg">
5+
<q-card
6+
class="secondary"
7+
flat
8+
>
9+
<q-card-section>
10+
<div class="text-h3">
11+
<q-icon
12+
class="text-h1"
13+
name="check"
14+
/>
15+
Congratulations
16+
</div>
17+
</q-card-section>
18+
19+
<q-card-section>
20+
<p class="text-h5">
21+
Now you have a minimal valid CITATION.cff file.
22+
</p>
23+
</q-card-section>
24+
25+
<q-card-actions
26+
align="center"
27+
class="q-gutter-md"
28+
>
29+
<q-btn
30+
class="q-mr-xl"
31+
color="primary"
32+
icon="chevron_left"
33+
label="Back to form"
34+
no-caps
35+
v-on:click="backToForm"
36+
/>
37+
<q-btn
38+
class="q-ml-xl"
39+
color="primary"
40+
icon="edit"
41+
label="Show advanced"
42+
no-caps
43+
to="/identifiers"
44+
v-on:click="showAdvanced"
45+
/>
46+
</q-card-actions>
47+
</q-card>
48+
</div>
49+
50+
<div class="col-6 q-pa-lg">
51+
<q-card
52+
class="secondary cff-card"
53+
flat
54+
>
55+
<q-card-section>
56+
<Preview />
57+
</q-card-section>
58+
59+
<q-card-actions
60+
align="center"
61+
class="q-gutter-md q-mt-xl"
62+
>
63+
<DownloadButton
64+
class="download-button"
65+
/>
66+
</q-card-actions>
67+
</q-card>
68+
</div>
69+
</div>
70+
</div>
71+
</template>
72+
73+
<script lang="ts">
74+
import { defineComponent } from 'vue'
75+
import { useApp } from '../store/app'
76+
import Preview from 'components/Preview.vue'
77+
import DownloadButton from 'components/DownloadButton.vue'
78+
79+
export default defineComponent({
80+
name: 'FinishMinimum',
81+
components: {
82+
DownloadButton,
83+
Preview
84+
},
85+
setup () {
86+
const { setShowAdvanced, navigatePrevious, setStepName } = useApp()
87+
return {
88+
backToForm: async () => {
89+
await setStepName('authors')
90+
},
91+
setShowAdvanced,
92+
navigatePrevious,
93+
showAdvanced: async () => {
94+
setShowAdvanced(true)
95+
await setStepName('identifiers')
96+
}
97+
}
98+
}
99+
})
100+
</script>
101+
102+
<style scoped>
103+
104+
.col-flex {
105+
flex: 1;
106+
}
107+
.title-field {
108+
margin-right: 120px;
109+
max-width: 700px;
110+
min-width: 300px;
111+
}
112+
113+
</style>

‎src/pages/Landing.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -113,7 +113,7 @@
113113
label="Get started"
114114
no-caps
115115
size="xl"
116-
to="/1"
116+
to="/start"
117117
/>
118118
</div>
119119
</div>

0 commit comments

Comments
 (0)