Fix selection on modal, fix a typo

This commit is contained in:
Montana 2018-09-10 12:26:13 -04:00
parent 2bbb859ad8
commit 5b973ab1e4
3 changed files with 106 additions and 74 deletions

View File

@ -7,7 +7,7 @@ from atst.models import Base, types, mixins
class CSPRole(Enum):
NONSENSE_ROLE = "nonesense_role"
NONSENSE_ROLE = "nonsense_role"
class EnvironmentRole(Base, mixins.TimestampsMixin):

View File

@ -0,0 +1,40 @@
import FormMixin from '../../mixins/form'
import textinput from '../text_input'
import Selector from '../selector'
import Modal from '../../mixins/modal'
import toggler from '../toggler'
export default {
name: 'edit-workspace-member',
mixins: [FormMixin, Modal],
components: {
toggler,
Modal,
Selector,
textinput
},
props: {
choices: Array,
initialData: String
},
data: function () {
return { value: this.initialData }
},
methods: {
change: function (e) {
this.value = e.target.value
},
readableName: function (role) {
return role.replace(/[_]/g, " ")
},
},
mounted: function () {
console.log(this.initialData, this.choices)
}
}

View File

@ -52,88 +52,80 @@
{% call Modal(name='rolesModal', dismissable=False) %}
<div class="block-list">
<header class="block-list__header">
<div>
<h2 class="block-list__title">
Environment access for Danny Knight
<div class='subtitle'>Project Name - Environment Name</div>
</h2>
<div class="block-list__description">
<p>An environment role determines the permissions a member of the workspace assumes when using the JEDI Cloud.</p>
<p>A member may have different environment roles across different projects. A member can only have one assigned environment role in a given environment.</p>
</div>
</div>
<h2 class="block-list__title">
Environment access for {{ member.user.full_name }}
<div class='subtitle'>Project Name - Environment Name</div>
</h2>
</header>
<form method="post" action="">
<ul>
<li class='block-list__item block-list__item--selectable'>
<input type='radio' name='radio' id='radio-' />
<label for='radio-'>
<dl>
<dt>Developer</dt>
<dd>Configures cloud-based IaaS and PaaS computing, networking, and storage services.</dd>
</dl>
</label>
</li>
<ul>
<li class='block-list__item block-list__item--selectable'>
<input type='radio' name='radio' id='developer' />
<label for='developer'>
<dl>
<dt>Developer</dt>
<dd>Configures cloud-based IaaS and PaaS computing, networking, and storage services.</dd>
</dl>
</label>
</li>
<li class='block-list__item block-list__item--selectable'>
<input type='radio' name='radio' id='radio-' />
<label for='radio-'>
<dl>
<dt>Database Administrator</dt>
<dd>Configures cloud-based database services.</dd>
</dl>
</label>
</li>
<li class='block-list__item block-list__item--selectable'>
<input type='radio' name='radio' id='database_admin' />
<label for='database_admin'>
<dl>
<dt>Database Administrator</dt>
<dd>Configures cloud-based database services.</dd>
</dl>
</label>
</li>
<li class='block-list__item block-list__item--selectable'>
<input type='radio' name='radio' id='radio-' />
<label for='radio-'>
<dl>
<dt>DevOps</dt>
<dd>Provisions, deprovisions, and deploys cloud-based IaaS and PaaS computing, networking, and storage services, including pre-configured machine images.</dd>
</dl>
</label>
</li>
<li class='block-list__item block-list__item--selectable'>
<input type='radio' name='radio' id='devops' />
<label for='devops'>
<dl>
<dt>DevOps</dt>
<dd>Provisions, deprovisions, and deploys cloud-based IaaS and PaaS computing, networking, and storage services, including pre-configured machine images.</dd>
</dl>
</label>
</li>
<li class='block-list__item block-list__item--selectable'>
<input type='radio' name='radio' id='radio-' />
<label for='radio-'>
<dl>
<dt>Billing Administrator</dt>
<dd>Views cloud resource usage, budget reports, and invoices; tracks budgets, including spend reports, cost planning and projections, and sets limits based on cloud service usage.</dd>
</dl>
</label>
</li>
<li class='block-list__item block-list__item--selectable'>
<input type='radio' name='radio' id='billing_admin' />
<label for='billing_admin'>
<dl>
<dt>Billing Administrator</dt>
<dd>Views cloud resource usage, budget reports, and invoices; Tracks budgets, including spend reports, cost planning and projections, and sets limits based on cloud service usage.</dd>
</dl>
</label>
</li>
<li class='block-list__item block-list__item--selectable'>
<input type='radio' name='radio' id='radio-' />
<label for='radio-'>
<dl>
<dt>Security Administrator</dt>
<dd>Accesses information security and control tools of cloud resources which include viewing cloud resource usage logging, user roles and permissioning history.</dd>
</dl>
</label>
</li>
<li class='block-list__item block-list__item--selectable'>
<input type='radio' name='radio' id='security_admin' />
<label for='security_admin'>
<dl>
<dt>Security Administrator</dt>
<dd>Accesses information security and control tools of cloud resources which include viewing cloud resource usage logging, user roles and permissioning history.</dd>
</dl>
</label>
</li>
<li class='block-list__item block-list__item--selectable'>
<input type='radio' name='radio' id='radio-' />
<label for='radio-'>
<dl>
<dt>Financial Auditor</dt>
<dd>Views cloud resource usage and budget reports.</dd>
</dl>
</label>
</li>
</ul>
<li class='block-list__item block-list__item--selectable'>
<input type='radio' name='radio' id='financial_auditor' />
<label for='financial_auditor'>
<dl>
<dt>Financial Auditor</dt>
<dd>Views cloud resource usage and budget reports.</dd>
</dl>
</label>
</li>
</ul>
<div class='block-list__footer'>
<div class='action-group'>
<a v-on:click="closeModal('rolesModal')" class='action-group__action usa-button'>Select Access Role</a>
<a class='action-group__action icon-link icon-link--danger' v-on:click="closeModal('rolesModal')">No Access</a>
</div>
<div class='block-list__footer'>
<div class='action-group'>
<a v-on:click="closeModal('rolesModal')" class='action-group__action usa-button'>Select Access Role</a>
<a class='action-group__action icon-link icon-link--danger' v-on:click="closeModal('rolesModal')">No Access</a>
</div>
</form>
</div>
</div>