UI: Refactor Create Wizard Cards in Platform UI and Add Step 4 in CreateWiki.vue

src/components/Cards/CreateWiki.vue

@@ -28,26 +28,37 @@
       :inFlight="inFlight"
       :error="error"
       :dismissable="false"
-      submitButtonText="Create Wiki"
       v-model="stepThree"
       @previous-step="goToStep(2)"
       @submit="createWiki"
     />
+    <step-four-card
+      v-show="step === 4"
+      :title="title"
+      :inFlight="inFlight"
+      :error="error"
+      :dismissable="false"
+      v-model="stepThree"
+      @previous-step="goToStep(3)"
+      @submit="createWiki"
+    />
   </v-form>
 </template>
 
 <script>
 import config from '~/config'
-import StepOneCard from './CreateWikiWizardStepOne.vue'
-import StepTwoCard from './CreateWikiWizardStepTwo.vue'
-import StepThreeCard from './CreateWikiWizardStepThree.vue'
+import SiteDetailsCreateWikiWizardStep from './SiteDetailsCreateWikiWizardStep.vue'
+import AudienceAndPurposeWizardStep from './AudienceAndPurposeWizardStep.vue'
+import TemporalityProfileEditWizardStep from './TemporalityProfileEditWizardStep.vue'
+import TemporalityCreateWikiWizardStep from '@/components/Cards/TemporalityCreateWikiWizardStep.vue'
 
 export default {
   name: 'CreateWiki',
   components: {
-    StepOneCard,
-    StepTwoCard,
-    StepThreeCard
+    StepOneCard: SiteDetailsCreateWikiWizardStep,
+    StepTwoCard: AudienceAndPurposeWizardStep,
+    StepThreeCard: TemporalityProfileEditWizardStep,
+    StepFourCard: TemporalityCreateWikiWizardStep
   },
   props: [
     'title',
@@ -77,6 +88,10 @@ export default {
         temporality: '',
         otherTemporality: ''
       },
+      stepFour: {
+        selectedOption: '',
+        freeTextResponse: ''
+      },
       hasError: false,
       error: [],
       inFlight: false,

src/components/Cards/TemporalityCreateWikiWizardStep.vue

@@ -0,0 +1,135 @@
+<template>
+  <v-card class="elevation-12">
+    <v-toolbar dark color="primary">
+      <v-toolbar-title>{{ title }}</v-toolbar-title>
+      <v-spacer></v-spacer>
+      <v-btn v-if="dismissable" icon @click="$emit('close-dialog')">
+        <v-icon>mdi-close</v-icon>
+      </v-btn>
+    </v-toolbar>
+
+    <v-card-text>
+      <v-form ref="inputForm" v-on:submit.prevent>
+        <h3>How long do you plan to use this Wikibase?</h3>
+
+        <v-radio-group
+          v-model="value.temporality"
+          :error-messages=error
+          :rules="[() => !!value.temporality || 'Please select an option.']"
+        >
+          <v-radio value="permanent" ref="test">
+            <template v-slot:label>
+              I would prefer to keep it on a permanent basis
+            </template>
+          </v-radio>
+          <v-radio value="temporary">
+            <template v-slot:label>
+              It is temporary/disposable. I will no longer need it after it served its purpose
+            </template>
+          </v-radio>
+
+          <v-radio value="other">
+            <template v-slot:label>
+              Other: <v-text-field
+              dense
+              counter="200"
+              class="pl-1 mt-n1 mb-n2"
+              v-model="value.otherTemporality"
+              :rules="
+              [
+                () => value.temporality !== 'other'
+                  || !! value.otherTemporality
+                  || 'Please provide a response.',
+
+                () => value.temporality !== 'other'
+                  || !! (value.otherTemporality && value.otherTemporality.length < 201)
+                  || 'Text must be 200 characters or less.'
+              ]"
+            ></v-text-field>
+            </template>
+          </v-radio>
+          <v-radio value="decide_later">
+            <template v-slot:label>
+              I will decide later
+            </template>
+          </v-radio>
+        </v-radio-group>
+        <h3 class="mt-6">Terms of Use</h3>
+        <div class="body-2">
+          Previously accepted
+          <v-tooltip top>
+            <template v-slot:activator="{ on }">
+              <a
+                target="_blank"
+                href="/terms-of-use"
+                @click.stop
+                v-on="on"
+              >
+                Terms of Use</a>
+            </template>
+            Opens in new window
+          </v-tooltip> still apply.
+        </div>
+      </v-form>
+    </v-card-text>
+    <v-card-actions>
+      <v-btn
+        type="button"
+        :disabled="inFlight"
+        @click="previousStep"
+      >
+        &lt; Previous
+      </v-btn>
+
+      <v-btn
+        type="button"
+        color="primary"
+        :disabled="inFlight"
+        @click="submitWholeForm"
+      >
+        Create Wiki
+      </v-btn>
+    </v-card-actions>
+  </v-card>
+</template>
+
+<script>
+export default {
+  name: 'StepFourCard',
+  props: {
+    title: String,
+    inFlight: Boolean,
+    value: Object,
+    error: Array,
+    dismissable: Boolean
+  },
+  methods: {
+    previousStep () {
+      if (this.value.temporality !== 'other') {
+        this.value.otherTemporality = undefined
+      }
+
+      this.$emit('previous-step')
+    },
+    submitWholeForm () {
+      if (this.value.temporality !== 'other') {
+        this.value.otherTemporality = undefined
+      }
+
+      this.$refs.inputForm.validate()
+      if (this.$refs.inputForm.validate() === true) {
+        this.$emit('submit')
+      }
+    }
+  }
+
+}
+</script>
+
+<style lang="css" scoped>
+.v-card__actions {
+  flex-wrap: wrap;
+  justify-content: flex-end;
+  gap: 8px;
+}
+</style>

src/components/Cards/CreateWikiWizardStepThree.vue → src/components/Cards/TemporalityProfileEditWizardStep.vue

@@ -87,7 +87,7 @@
           :disabled="inFlight"
           @click="submitWholeForm"
         >
-          {{ submitButtonText }}
+          Create Wiki
         </v-btn>
       </v-card-actions>
     </v-card>
@@ -101,8 +101,7 @@ export default {
     inFlight: Boolean,
     value: Object,
     error: Array,
-    dismissable: Boolean,
-    submitButtonText: String
+    dismissable: Boolean
   },
   methods: {
     previousStep () {

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

@@ -78,8 +78,8 @@
 
 <script>
 import Message from '../Features/Message.vue'
-import StepTwoCard from '~/components/Cards/CreateWikiWizardStepTwo'
-import StepThreeCard from '~/components/Cards/CreateWikiWizardStepThree'
+import AudienceAndPurposeWizardStep from '@/components/Cards/AudienceAndPurposeWizardStep.vue'
+import TemporalityProfileEditWizardStep from '@/components/Cards/TemporalityProfileEditWizardStep.vue'
 
 const providedResponses = {
   purpose: {
@@ -104,8 +104,8 @@ export default {
   name: 'Profile',
   components: {
     Message,
-    StepTwoCard,
-    StepThreeCard
+    StepTwoCard: AudienceAndPurposeWizardStep,
+    StepThreeCard: TemporalityProfileEditWizardStep
   },
   props: [
     'wikiId'