Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
Expand Up @@ -115,7 +115,7 @@

<script>
export default {
name: 'StepTwoCard',
name: 'AudienceAndPurposeWizardStep',
props: {
title: String,
inFlight: Boolean,
Expand Down
89 changes: 46 additions & 43 deletions src/components/Cards/CreateWiki.vue
Original file line number Diff line number Diff line change
@@ -1,57 +1,61 @@
<template>
<v-form @submit="createWiki">
<step-one-card
v-show="step === 1"
<SiteDetailsCreateWikiWizardStep
v-show="step === Steps.SITE_DETAILS"
:title="title"
:inFlight="inFlight"
v-model="stepOne"
v-model="siteDetails"
:error="error"
:SUBDOMAIN_SUFFIX="SUBDOMAIN_SUFFIX"
:CNAME_RECORD="CNAME_RECORD"
:errorMessages="errorMessages"
@next-step="goToStep(2)"
@next-step="goToStep(Steps.AUDIENCE_AND_PURPOSE)"
/>

<step-two-card
v-show="step === 2"
<AudienceAndPurposeWizardStep
v-show="step === Steps.AUDIENCE_AND_PURPOSE"
:title="title"
:inFlight="inFlight"
:dismissable="false"
v-model="stepTwo"
@previous-step="goToStep(1)"
@next-step="goToStep(3)"
v-model="audienceAndPurpose"
@previous-step="goToStep(Steps.SITE_DETAILS)"
@next-step="goToStep(Steps.TEMPORALITY)"
/>

<step-three-card
v-show="step === 3"
<TemporalityCreateWikiWizardStep
v-show="step === Steps.TEMPORALITY"
:title="title"
:inFlight="inFlight"
:error="error"
:dismissable="false"
submitButtonText="Create Wiki"
v-model="stepThree"
@previous-step="goToStep(2)"
v-model="temporality"
@previous-step="goToStep(Steps.AUDIENCE_AND_PURPOSE)"
@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 TemporalityCreateWikiWizardStep from './TemporalityCreateWikiWizardStep.vue'

const Steps = Object.freeze({
SITE_DETAILS: 'SiteDetails',
AUDIENCE_AND_PURPOSE: 'AudienceAndPurpose',
TEMPORALITY: 'Temporality'
});

export default {
name: 'CreateWiki',
components: {
StepOneCard,
StepTwoCard,
StepThreeCard
SiteDetailsCreateWikiWizardStep,
AudienceAndPurposeWizardStep,
TemporalityCreateWikiWizardStep
},
props: [
'title',
'buttonText'
'title'
],
computed: {
currentUser: function () {
Expand All @@ -60,20 +64,20 @@ export default {
},
data () {
return {
stepOne: {
siteDetails: {
sitename: '',
domainRadioChoice: 'sub',
subdomain: '',
domain: '',
username: ''
},
stepTwo: {
audienceAndPurpose: {
purpose: '',
otherPurpose: '',
audience: '',
otherAudience: ''
},
stepThree: {
temporality: {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

what do you think of adding the word "step" to this names, so that we do not have to reference it with temporality.temporality.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nice idea I think I like that too. I think specifically this is looking at R135 below

temporality: '',
otherTemporality: ''
},
Expand All @@ -86,20 +90,19 @@ export default {
domainTaken: 'The domain has already been taken.',
domainFormat: 'The subdomain must be at least five characters long and may contain only lowercase Latin letters (a-z), digits (0-9) and hyphens (-).'
},
step: 1
Steps,
step: Steps.SITE_DETAILS
}
},
created () {
// what's this for?
// this.buttonText = this.buttonTexts.next;
this.checkCurrentLogin()
},
updated () {
this.checkCurrentLogin()
},
methods: {
goToStep (stepNumber) {
this.step = stepNumber
goToStep (stepName) {
this.step = stepName
},
createWiki (evt) {
if (evt) {
Expand All @@ -117,28 +120,28 @@ export default {

// Figure out the actual domain to submit to the api!
let domainToSubmit = ''
if (this.stepOne.domainRadioChoice === 'sub') {
domainToSubmit = this.stepOne.subdomain + this.SUBDOMAIN_SUFFIX
if (this.siteDetails.domainRadioChoice === 'sub') {
domainToSubmit = this.siteDetails.subdomain + this.SUBDOMAIN_SUFFIX
}
if (this.stepOne.domainRadioChoice === 'own') {
domainToSubmit = this.stepOne.domain
if (this.siteDetails.domainRadioChoice === 'own') {
domainToSubmit = this.siteDetails.domain
}

const profileJSObject = {
purpose: this.stepTwo.purpose,
...(this.stepTwo.otherPurpose && { purpose_other: this.stepTwo.otherPurpose }),
...(this.stepTwo.audience && { audience: this.stepTwo.audience }),
...(this.stepTwo.otherAudience && { audience_other: this.stepTwo.otherAudience }),
temporality: this.stepThree.temporality,
...(this.stepThree.otherTemporality && { temporality_other: this.stepThree.otherTemporality })
purpose: this.audienceAndPurpose.purpose,
...(this.audienceAndPurpose.otherPurpose && { purpose_other: this.audienceAndPurpose.otherPurpose }),
...(this.audienceAndPurpose.audience && { audience: this.audienceAndPurpose.audience }),
...(this.audienceAndPurpose.otherAudience && { audience_other: this.audienceAndPurpose.otherAudience }),
temporality: this.temporality.temporality,
...(this.temporality.otherTemporality && { temporality_other: this.temporality.otherTemporality })
}
const profileJsonString = JSON.stringify(profileJSObject)

this.$api.createWiki(
{
domain: domainToSubmit,
sitename: this.stepOne.sitename,
username: this.stepOne.username,
sitename: this.siteDetails.sitename,
username: this.siteDetails.username,
profile: profileJsonString
}
)
Expand All @@ -155,7 +158,7 @@ export default {
// Probably we want to go back to the first step that has an error in this case.
this.error = []
// all these errors are shown on the first step.
this.goToStep(1)
this.goToStep(Steps.SITE_DETAILS)
if (errors.sitename) {
this.hasError = true
this.error.sitename = errors.sitename[0]
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -114,7 +114,7 @@

<script>
export default {
name: 'StepOneCard',
name: 'SiteDetailsCreateWikiWizardStep',
props: {
title: String,
inFlight: Boolean,
Expand Down
130 changes: 130 additions & 0 deletions src/components/Cards/TemporalityCreateWikiWizardStep.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,130 @@
<template>
<v-card class="elevation-12">
<v-toolbar dark color="primary">
<v-toolbar-title>{{ title }}</v-toolbar-title>
</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: 'TemporalityCreateWikiWizardStep',
props: {
title: String,
inFlight: Boolean,
value: Object,
error: Array
},
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>
2 changes: 1 addition & 1 deletion src/components/Pages/CreateWiki.vue
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
<v-container class="fill-height" fluid >
<v-row align="center" justify="center">
<v-col class="card-column">
<CreateWikiCard title="Create a wiki" buttonText="Next >"/>
<CreateWikiCard title="Create a wiki"/>
</v-col>
</v-row>
</v-container>
Expand Down
14 changes: 6 additions & 8 deletions src/components/Pages/ManageWiki/Cards/Profile.vue
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
content-class="update-wiki-profile-dialog"
v-model="dialog.show"
>
<step-two-card
<AudienceAndPurposeWizardStep
v-show="dialog.step === 1"
:title="dialog.title"
:inFlight="inFlight"
Expand All @@ -14,14 +14,12 @@
@close-dialog="dialog.show = false"
@next-step="goToStep(2)"
/>
<step-three-card
<TemporalityProfileEditWizardStep
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)"
Expand Down Expand Up @@ -78,8 +76,8 @@

<script>
import Message from '../Features/Message.vue'
import StepTwoCard from '~/components/Cards/CreateWikiWizardStepTwo'
import StepThreeCard from '~/components/Cards/CreateWikiWizardStepThree'
import AudienceAndPurposeWizardStep from '../../../Cards/AudienceAndPurposeWizardStep.vue'
import TemporalityProfileEditWizardStep from './TemporalityProfileEditWizardStep.vue'

const providedResponses = {
purpose: {
Expand All @@ -104,8 +102,8 @@ export default {
name: 'Profile',
components: {
Message,
StepTwoCard,
StepThreeCard
AudienceAndPurposeWizardStep,
TemporalityProfileEditWizardStep
},
props: [
'wikiId'
Expand Down
Loading
Loading