Skip to content

Commit d3c3e8a

Browse files
rosalieperoutdooracorntarrow
authored
Refactor Create Wizard Cards in Platform UI (#1105)
* Create a new `TemporalityCreateWikiWizardStep` card (based on the existing `StepThreeCard`) for use only in the create wiki wizard. * Rename the existing `StepThreeCard` to `TemporalityCreateWikiWizardStep` for use only when editing the profile. * Move `TemporalityProfileEditWizardStep` to where it is used in `Pages/ManageWiki/cards` as it is no long a component used in multiple parts of the codebase. * Remove the `submitButtonText` abstraction logic from the `TemporalityCreateWikiWizardStep` and `TemporalityProfileEditWizardStep` cards. As they are no longer reused each card can hard code the correct value. * Remove `dissmissable` property from `TemporalityCreateWikiWizardStep`, and the optional close-dialog icon that will never be displayed. * Remove `dissmissable` property from `TemporalityProfileEditWizardStep`, and the `v-if` logic for the close-dialog icon as that will always be displayed. * Remove unused `buttonText` property from `CreateWiki`. Bug: T419207 Co-authored-by: Ollie Hyde <oliver.hyde@wikimedia.de> Co-authored-by: Thomas Arrow <tarrow@users.noreply.github.com>
1 parent 764f28a commit d3c3e8a

7 files changed

Lines changed: 153 additions & 32 deletions

File tree

src/components/Cards/CreateWikiWizardStepTwo.vue renamed to src/components/Cards/AudienceAndPurposeWizardStep.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -115,7 +115,7 @@
115115

116116
<script>
117117
export default {
118-
name: 'StepTwoCard',
118+
name: 'AudienceAndPurposeWizardStep',
119119
props: {
120120
title: String,
121121
inFlight: Boolean,

‎src/components/Cards/CreateWiki.vue‎

Lines changed: 10 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<template>
22
<v-form @submit="createWiki">
3-
<step-one-card
3+
<SiteDetailsCreateWikiWizardStep
44
v-show="step === 1"
55
:title="title"
66
:inFlight="inFlight"
@@ -12,7 +12,7 @@
1212
@next-step="goToStep(2)"
1313
/>
1414

15-
<step-two-card
15+
<AudienceAndPurposeWizardStep
1616
v-show="step === 2"
1717
:title="title"
1818
:inFlight="inFlight"
@@ -22,13 +22,11 @@
2222
@next-step="goToStep(3)"
2323
/>
2424

25-
<step-three-card
25+
<TemporalityCreateWikiWizardStep
2626
v-show="step === 3"
2727
:title="title"
2828
:inFlight="inFlight"
2929
:error="error"
30-
:dismissable="false"
31-
submitButtonText="Create Wiki"
3230
v-model="stepThree"
3331
@previous-step="goToStep(2)"
3432
@submit="createWiki"
@@ -38,20 +36,19 @@
3836

3937
<script>
4038
import config from '~/config'
41-
import StepOneCard from './CreateWikiWizardStepOne.vue'
42-
import StepTwoCard from './CreateWikiWizardStepTwo.vue'
43-
import StepThreeCard from './CreateWikiWizardStepThree.vue'
39+
import SiteDetailsCreateWikiWizardStep from './SiteDetailsCreateWikiWizardStep.vue'
40+
import AudienceAndPurposeWizardStep from './AudienceAndPurposeWizardStep.vue'
41+
import TemporalityCreateWikiWizardStep from './TemporalityCreateWikiWizardStep.vue'
4442
4543
export default {
4644
name: 'CreateWiki',
4745
components: {
48-
StepOneCard,
49-
StepTwoCard,
50-
StepThreeCard
46+
SiteDetailsCreateWikiWizardStep,
47+
AudienceAndPurposeWizardStep,
48+
TemporalityCreateWikiWizardStep
5149
},
5250
props: [
53-
'title',
54-
'buttonText'
51+
'title'
5552
],
5653
computed: {
5754
currentUser: function () {
@@ -90,8 +87,6 @@ export default {
9087
}
9188
},
9289
created () {
93-
// what's this for?
94-
// this.buttonText = this.buttonTexts.next;
9590
this.checkCurrentLogin()
9691
},
9792
updated () {

src/components/Cards/CreateWikiWizardStepOne.vue renamed to src/components/Cards/SiteDetailsCreateWikiWizardStep.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -114,7 +114,7 @@
114114

115115
<script>
116116
export default {
117-
name: 'StepOneCard',
117+
name: 'SiteDetailsCreateWikiWizardStep',
118118
props: {
119119
title: String,
120120
inFlight: Boolean,

‎src/components/Cards/TemporalityCreateWikiWizardStep.vue‎

Lines changed: 130 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,130 @@
1+
<template>
2+
<v-card class="elevation-12">
3+
<v-toolbar dark color="primary">
4+
<v-toolbar-title>{{ title }}</v-toolbar-title>
5+
</v-toolbar>
6+
7+
<v-card-text>
8+
<v-form ref="inputForm" v-on:submit.prevent>
9+
<h3>How long do you plan to use this Wikibase?</h3>
10+
11+
<v-radio-group
12+
v-model="value.temporality"
13+
:error-messages=error
14+
:rules="[() => !!value.temporality || 'Please select an option.']"
15+
>
16+
<v-radio value="permanent" ref="test">
17+
<template v-slot:label>
18+
I would prefer to keep it on a permanent basis
19+
</template>
20+
</v-radio>
21+
<v-radio value="temporary">
22+
<template v-slot:label>
23+
It is temporary/disposable. I will no longer need it after it served its purpose
24+
</template>
25+
</v-radio>
26+
27+
<v-radio value="other">
28+
<template v-slot:label>
29+
Other: <v-text-field
30+
dense
31+
counter="200"
32+
class="pl-1 mt-n1 mb-n2"
33+
v-model="value.otherTemporality"
34+
:rules="
35+
[
36+
() => value.temporality !== 'other'
37+
|| !! value.otherTemporality
38+
|| 'Please provide a response.',
39+
40+
() => value.temporality !== 'other'
41+
|| !! (value.otherTemporality && value.otherTemporality.length < 201)
42+
|| 'Text must be 200 characters or less.'
43+
]"
44+
></v-text-field>
45+
</template>
46+
</v-radio>
47+
<v-radio value="decide_later">
48+
<template v-slot:label>
49+
I will decide later
50+
</template>
51+
</v-radio>
52+
</v-radio-group>
53+
<h3 class="mt-6">Terms of Use</h3>
54+
<div class="body-2">
55+
Previously accepted
56+
<v-tooltip top>
57+
<template v-slot:activator="{ on }">
58+
<a
59+
target="_blank"
60+
href="/terms-of-use"
61+
@click.stop
62+
v-on="on"
63+
>
64+
Terms of Use</a>
65+
</template>
66+
Opens in new window
67+
</v-tooltip> still apply.
68+
</div>
69+
</v-form>
70+
</v-card-text>
71+
<v-card-actions>
72+
<v-btn
73+
type="button"
74+
:disabled="inFlight"
75+
@click="previousStep"
76+
>
77+
&lt; Previous
78+
</v-btn>
79+
80+
<v-btn
81+
type="button"
82+
color="primary"
83+
:disabled="inFlight"
84+
@click="submitWholeForm"
85+
>
86+
Create Wiki
87+
</v-btn>
88+
</v-card-actions>
89+
</v-card>
90+
</template>
91+
92+
<script>
93+
export default {
94+
name: 'TemporalityCreateWikiWizardStep',
95+
props: {
96+
title: String,
97+
inFlight: Boolean,
98+
value: Object,
99+
error: Array
100+
},
101+
methods: {
102+
previousStep () {
103+
if (this.value.temporality !== 'other') {
104+
this.value.otherTemporality = undefined
105+
}
106+
107+
this.$emit('previous-step')
108+
},
109+
submitWholeForm () {
110+
if (this.value.temporality !== 'other') {
111+
this.value.otherTemporality = undefined
112+
}
113+
114+
this.$refs.inputForm.validate()
115+
if (this.$refs.inputForm.validate() === true) {
116+
this.$emit('submit')
117+
}
118+
}
119+
}
120+
121+
}
122+
</script>
123+
124+
<style lang="css" scoped>
125+
.v-card__actions {
126+
flex-wrap: wrap;
127+
justify-content: flex-end;
128+
gap: 8px;
129+
}
130+
</style>

‎src/components/Pages/CreateWiki.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
<v-container class="fill-height" fluid >
44
<v-row align="center" justify="center">
55
<v-col class="card-column">
6-
<CreateWikiCard title="Create a wiki" buttonText="Next >"/>
6+
<CreateWikiCard title="Create a wiki"/>
77
</v-col>
88
</v-row>
99
</v-container>

‎src/components/Pages/ManageWiki/Cards/Profile.vue‎

Lines changed: 6 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
content-class="update-wiki-profile-dialog"
66
v-model="dialog.show"
77
>
8-
<step-two-card
8+
<AudienceAndPurposeWizardStep
99
v-show="dialog.step === 1"
1010
:title="dialog.title"
1111
:inFlight="inFlight"
@@ -14,14 +14,12 @@
1414
@close-dialog="dialog.show = false"
1515
@next-step="goToStep(2)"
1616
/>
17-
<step-three-card
17+
<TemporalityProfileEditWizardStep
1818
v-show="dialog.step === 2"
1919
:title="dialog.title"
2020
:inFlight="inFlight"
2121
:error="dialog.error"
22-
:dismissable="true"
2322
:showTerms="false"
24-
submitButtonText="Set intended use"
2523
v-model="dialog.data.stepTwo"
2624
@close-dialog="dialog.show = false"
2725
@previous-step="goToStep(1)"
@@ -78,8 +76,8 @@
7876

7977
<script>
8078
import Message from '../Features/Message.vue'
81-
import StepTwoCard from '~/components/Cards/CreateWikiWizardStepTwo'
82-
import StepThreeCard from '~/components/Cards/CreateWikiWizardStepThree'
79+
import AudienceAndPurposeWizardStep from '../../../Cards/AudienceAndPurposeWizardStep.vue'
80+
import TemporalityProfileEditWizardStep from './TemporalityProfileEditWizardStep.vue'
8381
8482
const providedResponses = {
8583
purpose: {
@@ -104,8 +102,8 @@ export default {
104102
name: 'Profile',
105103
components: {
106104
Message,
107-
StepTwoCard,
108-
StepThreeCard
105+
AudienceAndPurposeWizardStep,
106+
TemporalityProfileEditWizardStep
109107
},
110108
props: [
111109
'wikiId'

src/components/Cards/CreateWikiWizardStepThree.vue renamed to src/components/Pages/ManageWiki/Cards/TemporalityProfileEditWizardStep.vue

Lines changed: 4 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
<v-toolbar dark color="primary">
44
<v-toolbar-title>{{ title }}</v-toolbar-title>
55
<v-spacer></v-spacer>
6-
<v-btn v-if="dismissable" icon @click="$emit('close-dialog')">
6+
<v-btn icon @click="$emit('close-dialog')">
77
<v-icon>mdi-close</v-icon>
88
</v-btn>
99
</v-toolbar>
@@ -87,22 +87,20 @@
8787
:disabled="inFlight"
8888
@click="submitWholeForm"
8989
>
90-
{{ submitButtonText }}
90+
Set intended use
9191
</v-btn>
9292
</v-card-actions>
9393
</v-card>
9494
</template>
9595

9696
<script>
9797
export default {
98-
name: 'StepThreeCard',
98+
name: 'TemporalityProfileEditWizardStep',
9999
props: {
100100
title: String,
101101
inFlight: Boolean,
102102
value: Object,
103-
error: Array,
104-
dismissable: Boolean,
105-
submitButtonText: String
103+
error: Array
106104
},
107105
methods: {
108106
previousStep () {

0 commit comments

Comments
 (0)