Use object for selector component

This commit is contained in:
richard-dds 2018-08-31 13:58:25 -04:00
parent c78aac2dea
commit b1326a7c75
3 changed files with 31 additions and 17 deletions

View File

@ -106,27 +106,37 @@ COMPLETION_DATE_RANGES = [
WORKSPACE_ROLES = [ WORKSPACE_ROLES = [
( (
"owner", "owner",
"Workspace Owner", {
"Can add, edit, deactivate access to all projects, environments, and members. Can view budget reports. Can start and edit JEDI Cloud requests.", "name": "Workspace Owner",
"description": "Can add, edit, deactivate access to all projects, environments, and members. Can view budget reports. Can start and edit JEDI Cloud requests.",
},
), ),
( (
"admin", "admin",
"Administrator", {
"Can add and edit projects, environments, members, but cannot deactivate. Cannot view budget reports or JEDI Cloud requests.", "name": "Administrator",
"description": "Can add and edit projects, environments, members, but cannot deactivate. Cannot view budget reports or JEDI Cloud requests.",
},
), ),
( (
"developer", "developer",
"Developer", {
"Can view only the projects and environments they are granted access to. Can also view members associated with each environment.", "name": "Developer",
"description": "Can view only the projects and environments they are granted access to. Can also view members associated with each environment.",
},
), ),
( (
"billing_auditor", "billing_auditor",
"Billing Auditor", {
"Can view only the projects and environments they are granted access to. Can also view budgets and reports associated with the workspace.", "name": "Billing Auditor",
"description": "Can view only the projects and environments they are granted access to. Can also view budgets and reports associated with the workspace.",
},
), ),
( (
"security_auditor", "security_auditor",
"Security Auditor", {
"Can view only the projects and environments they are granted access to. Can also view activity logs.", "name": "Security Auditor",
"description": "Can view only the projects and environments they are granted access to. Can also view activity logs.",
},
), ),
] ]

View File

@ -26,17 +26,21 @@ export default {
computed: { computed: {
label: function () { label: function () {
return this.value if (this.value) {
? this.choices.find((choice) => { const selectedChoice = this.choices.find((choice) => {
return this.value === choice[0] return this.value === choice[0]
})[1] })[1]
: this.defaultLabel return selectedChoice.name
} else {
return this.defaultLabel
}
} }
}, },
methods: { methods: {
change: function (e) { change: function (e) {
this.value = e.target.value this.value = e.target.value
console.log(this.value)
this.showError = false this.showError = false
setTimeout(() => this.$refs.popover.hide(), 300) setTimeout(() => this.$refs.popover.hide(), 300)
} }

View File

@ -44,13 +44,13 @@
v-bind:checked='value === choice[0]' v-bind:checked='value === choice[0]'
v-on:change='change'/> v-on:change='change'/>
<label v-bind:for="'{{ field.name }}_' + choice[0]"> <label v-bind:for="'{{ field.name }}_' + choice[0]">
<template v-if='choices[2]'> <template v-if='choice[1].description'>
<dl> <dl>
<dt v-html='choice[1]'></dt> <dt v-html='choice[1].name'></dt>
<dd v-html='choice[2]'></dd> <dd v-html='choice[1].description'></dd>
</dl> </dl>
</template> </template>
<span v-else v-html='choice[1]'> <span v-else v-html='choice[1].name'>
</label> </label>
</template> </template>
</li> </li>