Add dialog for updating wiki profiles

Author: AndrewKostka

src/backend/api.js

@@ -77,6 +77,7 @@ export const updateLogo = async ({ file, fileName, wikiId }) => {
 export const updateSetting = async (setting, payload) => axios.post(`/wiki/setting/${setting}/update`, { ...payload, setting })
 export const updateSkin = async payload => updateSetting('wgDefaultSkin', payload)
 export const wikiDetails = async payload => (await axios.post('/wiki/details', payload)).data.data
+export const updateProfile = async payload => axios.post('/wiki/profile', payload)
 export const wikiDiscovery = async ({ sort, direction, active, currentPage, resultsPerPage }) => {
   return (await axios.get('/wiki', {
     params: {

src/components/Cards/CreateWiki.vue

@@ -16,6 +16,7 @@
       v-show="step === 2"
       :title="title"
       :inFlight="inFlight"
+      :dismissable="false"
       v-model="stepTwo"
       @previous-step="goToStep(1)"
       @next-step="goToStep(3)"
@@ -26,6 +27,9 @@
       :title="title"
       :inFlight="inFlight"
       :error="error"
+      :dismissable="false"
+      :showTerms="true"
+      submitButtonText="Create Wiki"
       v-model="stepThree"
       @previous-step="goToStep(2)"
       @submit="createWiki"

src/components/Cards/CreateWikiWizardStepThree.vue

@@ -2,6 +2,10 @@
     <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>
@@ -51,11 +55,12 @@
           </v-radio>
         </v-radio-group>
 
-        <h3 class="mt-6">Terms of Use</h3>
+        <h3 v-if="showTerms" class="mt-6">Terms of Use</h3>
         <v-checkbox
           v-model="value.terms"
           :disabled="inFlight"
           :rules="[() => !!value.terms || 'You must accept the Terms of Service.']"
+          v-if="showTerms"
         >
           <template v-slot:label>
             <div>
@@ -94,7 +99,7 @@
           :disabled="inFlight"
           @click="submitWholeForm"
         >
-          Create Wiki
+          {{ submitButtonText }}
         </v-btn>
       </v-card-actions>
     </v-card>
@@ -107,7 +112,10 @@ export default {
     title: String,
     inFlight: Boolean,
     value: Object,
-    error: Array
+    error: Array,
+    dismissable: Boolean,
+    showTerms: Boolean,
+    submitButtonText: String
   },
   methods: {
     previousStep () {

src/components/Cards/CreateWikiWizardStepTwo.vue

@@ -2,6 +2,10 @@
   <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>
@@ -100,7 +104,7 @@
 
     <v-card-actions>
       <v-spacer></v-spacer>
-      <v-btn type="button" :disabled="inFlight" @click="$emit('previous-step')">
+      <v-btn v-if="$listeners['previous-step']" type="button" :disabled="inFlight" @click="$emit('previous-step')">
         &lt; PREVIOUS
       </v-btn>
       <v-btn type="button" color="primary" :disabled="inFlight" @click="nextStep">
@@ -116,7 +120,8 @@ export default {
   props: {
     title: String,
     inFlight: Boolean,
-    value: Object
+    value: Object,
+    dismissable: Boolean
   },
   data () {
     return {

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

@@ -1,5 +1,34 @@
 <template>
   <v-form ref="form">
+    <v-overlay :value="dialog.show">
+      <v-dialog
+        content-class="update-wiki-profile-dialog"
+        v-model="dialog.show"
+      >
+        <step-two-card
+          v-show="dialog.step === 1"
+          :title="dialog.title"
+          :inFlight="inFlight"
+          :dismissable="true"
+          v-model="dialog.data.stepOne"
+          @close-dialog="dialog.show = false"
+          @next-step="goToStep(2)"
+        />
+        <step-three-card
+          v-show="dialog.step === 2"
+          :title="dialog.title"
+          :inFlight="inFlight"
+          :error="dialog.error"
+          :dismissable="true"
+          :showTerms="false"
+          submitButtonText="Set intended use"
+          v-model="dialog.data.stepTwo"
+          @close-dialog="dialog.show = false"
+          @previous-step="goToStep(1)"
+          @submit="updateProfile"
+        />
+      </v-dialog>
+    </v-overlay>
     <v-card>
       <v-card-title class="card-title">
         <span>Intended use</span>
@@ -40,12 +69,17 @@
         <span v-if="updatedAt" class="updated-at">{{ updatedAt }}</span>
       </v-card-text>
       <Message ref="message" />
+      <v-card-actions>
+        <v-btn :disabled="inFlight" @click="showDialog()">Set intended use</v-btn>
+      </v-card-actions>
     </v-card>
   </v-form>
 </template>
 
 <script>
 import Message from '../Features/Message.vue'
+import StepTwoCard from '~/components/Cards/CreateWikiWizardStepTwo'
+import StepThreeCard from '~/components/Cards/CreateWikiWizardStepThree'
 
 const providedResponses = {
   purpose: {
@@ -69,14 +103,36 @@ const providedResponses = {
 export default {
   name: 'Profile',
   components: {
-    Message
+    Message,
+    StepTwoCard,
+    StepThreeCard
   },
   props: [
     'wikiId'
   ],
   data () {
     return {
-      profile: {}
+      inFlight: false,
+      profile: {},
+      dialog: {
+        show: false,
+        title: 'Set intended use',
+        error: [],
+        step: 1,
+        data: {},
+        dataTemplate: {
+          stepOne: {
+            purpose: '',
+            otherPurpose: '',
+            audience: '',
+            otherAudience: ''
+          },
+          stepTwo: {
+            temporality: '',
+            otherTemporality: ''
+          }
+        }
+      }
     }
   },
   computed: {
@@ -106,6 +162,40 @@ export default {
         return providedResponses[question][providedResponse]
       }
       return 'No answer selected.'
+    },
+    showDialog () {
+      this.dialog.step = 1
+      this.dialog.data = JSON.parse(JSON.stringify(this.dialog.dataTemplate))
+      this.dialog.show = true
+    },
+    goToStep (stepNumber) {
+      this.dialog.step = stepNumber
+    },
+    async updateProfile () {
+      this.inFlight = true
+
+      try {
+        const profile = {
+          purpose: this.dialog.data.stepOne.purpose,
+          ...(this.dialog.data.stepOne.otherPurpose && { purpose_other: this.dialog.data.stepOne.otherPurpose }),
+          ...(this.dialog.data.stepOne.audience && { audience: this.dialog.data.stepOne.audience }),
+          ...(this.dialog.data.stepOne.otherAudience && { audience_other: this.dialog.data.stepOne.otherAudience }),
+          temporality: this.dialog.data.stepTwo.temporality,
+          ...(this.dialog.data.stepTwo.otherTemporality && { temporality_other: this.dialog.data.stepTwo.otherTemporality })
+        }
+
+        this.profile = (await this.$store.dispatch('updateProfile', {
+          wiki: this.wikiId, profile: JSON.stringify(profile)
+        })).data.data ?? {}
+
+        this.$refs.message.show('success', 'Intended use has been updated.')
+        this.dialog.show = false
+      } catch (error) {
+        console.log(error)
+        this.$refs.message.show('error', 'Something went wrong with updating your intended use. Please try again.')
+      } finally {
+        this.inFlight = false
+      }
     }
   },
   async created () {
@@ -120,6 +210,15 @@ export default {
 }
 </script>
 
+<style lang="css">
+.update-wiki-profile-dialog {
+  max-width: 356px;
+}
+.update-wiki-profile-dialog.v-dialog > .v-card > .v-card__text {
+  padding: 16px;
+}
+</style>
+
 <style lang="css" scoped>
 .card-title {
   display: flex;

src/store/wikis.js

@@ -197,6 +197,9 @@ const actions = {
   updateSetting ({ commit }, payload) {
     return api.updateSetting(payload.setting, payload)
   },
+  updateProfile ({ commit }, payload) {
+    return api.updateProfile(payload)
+  },
   triggerEntityImport ({ commit }, wikiId) {
     return api.importEntities({ wikiId })
       .then(() => {