Skip to content

Commit 3b61f3a

Browse files
rosalieperrosalieper
committed
UI: Refactor Create Wizard Cards in Platform UI and Add Step 4
Bug: T419207
1 parent 764f28a commit 3b61f3a

6 files changed

Lines changed: 162 additions & 13 deletions

File tree

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

File renamed without changes.

‎src/components/Cards/CreateWiki.vue‎

Lines changed: 22 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -28,26 +28,37 @@
2828
:inFlight="inFlight"
2929
:error="error"
3030
:dismissable="false"
31-
submitButtonText="Create Wiki"
3231
v-model="stepThree"
3332
@previous-step="goToStep(2)"
3433
@submit="createWiki"
3534
/>
35+
<step-four-card
36+
v-show="step === 4"
37+
:title="title"
38+
:inFlight="inFlight"
39+
:error="error"
40+
:dismissable="false"
41+
v-model="stepThree"
42+
@previous-step="goToStep(3)"
43+
@submit="createWiki"
44+
/>
3645
</v-form>
3746
</template>
3847

3948
<script>
4049
import config from '~/config'
41-
import StepOneCard from './CreateWikiWizardStepOne.vue'
42-
import StepTwoCard from './CreateWikiWizardStepTwo.vue'
43-
import StepThreeCard from './CreateWikiWizardStepThree.vue'
50+
import SiteDetailsCreateWikiWizardStep from './SiteDetailsCreateWikiWizardStep.vue'
51+
import AudienceAndPurposeWizardStep from './AudienceAndPurposeWizardStep.vue'
52+
import TemporalityProfileEditWizardStep from './TemporalityProfileEditWizardStep.vue'
53+
import TemporalityCreateWikiWizardStep from "@/components/Cards/TemporalityCreateWikiWizardStep.vue";
4454
4555
export default {
4656
name: 'CreateWiki',
4757
components: {
48-
StepOneCard,
49-
StepTwoCard,
50-
StepThreeCard
58+
StepOneCard: SiteDetailsCreateWikiWizardStep,
59+
StepTwoCard: AudienceAndPurposeWizardStep,
60+
StepThreeCard: TemporalityProfileEditWizardStep,
61+
StepFourCard: TemporalityCreateWikiWizardStep
5162
},
5263
props: [
5364
'title',
@@ -77,6 +88,10 @@ export default {
7788
temporality: '',
7889
otherTemporality: ''
7990
},
91+
stepFour: {
92+
selectedOption: '',
93+
freeTextResponse: ''
94+
},
8095
hasError: false,
8196
error: [],
8297
inFlight: false,

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

File renamed without changes.

‎src/components/Cards/TemporalityCreateWikiWizardStep.vue‎

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

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

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -87,7 +87,7 @@
8787
:disabled="inFlight"
8888
@click="submitWholeForm"
8989
>
90-
{{ submitButtonText }}
90+
Create Wiki
9191
</v-btn>
9292
</v-card-actions>
9393
</v-card>
@@ -102,7 +102,6 @@ export default {
102102
value: Object,
103103
error: Array,
104104
dismissable: Boolean,
105-
submitButtonText: String
106105
},
107106
methods: {
108107
previousStep () {

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

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -78,8 +78,8 @@
7878

7979
<script>
8080
import Message from '../Features/Message.vue'
81-
import StepTwoCard from '~/components/Cards/CreateWikiWizardStepTwo'
82-
import StepThreeCard from '~/components/Cards/CreateWikiWizardStepThree'
81+
import AudienceAndPurposeWizardStep from '@/components/Cards/AudienceAndPurposeWizardStep.vue'
82+
import TemporalityProfileEditWizardStep from '@/components/Cards/TemporalityProfileEditWizardStep.vue'
8383
8484
const providedResponses = {
8585
purpose: {
@@ -104,8 +104,8 @@ export default {
104104
name: 'Profile',
105105
components: {
106106
Message,
107-
StepTwoCard,
108-
StepThreeCard
107+
StepTwoCard: AudienceAndPurposeWizardStep,
108+
StepThreeCard: TemporalityProfileEditWizardStep
109109
},
110110
props: [
111111
'wikiId'

0 commit comments

Comments
 (0)