pk/atst
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Use Vue to get label class dynamically

Browse Source
This commit is contained in:
Montana 2018-09-20 09:45:49 -04:00
parent b973d3cf45
commit a1cf4335ce
2 changed files with 6 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
js/components/forms/edit_workspace_member.js
View File

@ -24,6 +24,7 @@ export default {
data: function () { data: function () {
return { return {
value: this.initialData, value: this.initialData,
label_class: this.initialData,
} }
}, },
@ -31,7 +32,10 @@ export default {
change: function (e) { change: function (e) {
this.value = e.target.value this.value = e.target.value
}, },
readableName: function (role) { displayName: function (role) {
this.label_class = role === "no_access" ?
"label" : "label label--success"
return role.replace(/[_]/g, " ") return role.replace(/[_]/g, " ")
}, },
cancel: function (current_role, selected_role) { cancel: function (current_role, selected_role) {

7
templates/workspaces/members/edit.html
View File

@ -65,11 +65,6 @@
{% for env in project.environments %} {% for env in project.environments %}
{% set role = EnvironmentRole.get(member.user_id, env.id).role or 'no_access' %} {% set role = EnvironmentRole.get(member.user_id, env.id).role or 'no_access' %}
{% set label_class = 'label' %}
{% if role != 'no_access' %}
{% set label_class = 'label label--success' %}
{% endif %}
<li class='block-list__item'> <li class='block-list__item'>
<edit-workspace-member inline-template initial-data='{{ role }}' v-bind:choices='{{ form.environment_role.choices | tojson }}'> <edit-workspace-member inline-template initial-data='{{ role }}' v-bind:choices='{{ form.environment_role.choices | tojson }}'>
@ -81,7 +76,7 @@
<div class='project-list-item__environment__actions'> <div class='project-list-item__environment__actions'>
<div>{{ form.data["environment_role"] }}</div> <div>{{ form.data["environment_role"] }}</div>
<span class="{{ label_class }}" v-html:on=readableName(value)></span> <span v-bind:class="label_class" v-html:on=displayName(value)></span>
<button v-on:click="openModal('{{ env.name }}RolesModal')" type="button" class="icon-link">set role</button> <button v-on:click="openModal('{{ env.name }}RolesModal')" type="button" class="icon-link">set role</button>
{% call Modal(name=env.name + 'RolesModal', dismissable=False) %} {% call Modal(name=env.name + 'RolesModal', dismissable=False) %}
<div class='block-list'> <div class='block-list'>