div.user-table
div.columns.is-multiline
div.column.is-12
a.button.is-primary(v-on:click="createNewRoleMapping()") Add Existing User
div.column.is-12(v-if="newRoleMapping")
div.box
div.columns.is-multiline
div.column
b-field(
label="User Name"
v-bind:type="{ 'is-danger': getAddUserMessage }"
v-bind:message="getAddUserMessage"
)
b-select(
placeholder="e.g. Anne"
v-model="newRoleMapping.username"
v-on:input="option => {checkValidExistingUser(option);\
newRoleMapping.userid = option}"
)
option(v-for="otherUser in otherUsers", v-bind:value="otherUser.id")
| {{ otherUser.username }}
div.column
b-field(label="Role")
b-select(
placeholder="Select a role"
v-model="newRoleMapping.roleid"
)
option(v-for="role in roles", v-bind:value="role.id", v-bind:key="role.id")
| {{ role.name }}
div.column
div.field
label.label
div.field.is-grouped
p.control
b-button(type="is-light", v-on:click="cancelCreate()") Cancel
p.control
b-button(
type="is-primary"
v-on:click="addRoleMapping()"
v-bind:disabled="isDisabled"
) Add User
div.card
b-table(v-bind:data="roleMappings", icon-pack="fas", default-sort="username", striped=true)
template(slot-scope="props")
b-table-column(field="username", label="User Name", sortable="")
| {{ props.row.username }}
b-table-column(field="rolename", label="Role", sortable="")
b-dropdown(aria-role="list")
button.button.is-primary(slot="trigger")
span {{ props.row.rolename }}
b-icon(icon="chevron-down", pack="fas", size="is-small", custom-size="fa-xs")
b-dropdown-item(
v-for="otherRole in getOtherRoles(props.row.role)"
v-bind:key="otherRole.id"
aria-role="listitem"
v-on:click="switchRole(props.row.user, otherRole.id)"
)
| {{ otherRole.name }}
b-table-column(label="Action")
a.button.is-text(v-on:click="removeRoleMapping(props.row.id)")
span.icon.is-small
i.fas.fa-trash
span Delete