152 lines
8.6 KiB
Handlebars
152 lines
8.6 KiB
Handlebars
<div class="page-header">
|
|
<div>
|
|
<h2>{{#if isEdit}}Edit role - {{role.name}}{{else}}Create role{{/if}}</h2>
|
|
<p>{{#if isEdit}}Choose which permissions and users this role receives.{{else}}Define a new role and choose its permissions and users before saving.{{/if}}</p>
|
|
</div>
|
|
</div>
|
|
|
|
<form id="{{formId}}" method="post" action="{{formAction}}" {{{formAttrs}}}>
|
|
<input type="hidden" name="permissions_present" value="1" />
|
|
<input type="hidden" name="users_present" value="1" />
|
|
|
|
<div class="row g-3">
|
|
<div class="col-12 col-xl-4 d-flex flex-column gap-4">
|
|
<div class="card card-outline card-primary admin-form-card">
|
|
<div class="card-header">
|
|
<h3 class="card-title">Role details</h3>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="mb-3">
|
|
<label for="{{#if isEdit}}role-name-edit{{else}}role-name{{/if}}" class="form-label">Role name</label>
|
|
<input id="{{#if isEdit}}role-name-edit{{else}}role-name{{/if}}" name="name" class="form-control" value="{{#if isEdit}}{{role.name}}{{else}}{{formValues.name}}{{/if}}" maxlength="64" data-limit-text-length required />
|
|
</div>
|
|
<div class="mb-0">
|
|
<label for="{{#if isEdit}}role-description-edit{{else}}role-description{{/if}}" class="form-label">Description</label>
|
|
<textarea id="{{#if isEdit}}role-description-edit{{else}}role-description{{/if}}" name="description" class="form-control" rows="5" maxlength="512" data-limit-text-length>{{#if isEdit}}{{role.description}}{{else}}{{formValues.description}}{{/if}}</textarea>
|
|
</div>
|
|
</div>
|
|
<div class="card-footer d-flex justify-content-end flex-wrap">
|
|
<div class="btn-group" role="group" aria-label="Role actions">
|
|
{{{saveActionButtons formId=formId saveUrl=footerSaveUrl cancelUrl=footerCancelUrl deleteUrl=footerDeleteUrl deleteDisabled=footerDeleteDisabled deleteTitle=footerDeleteTitle showDelete=footerShowDelete}}}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card card-outline card-secondary admin-form-card" data-table-search-container data-table-pagination-card>
|
|
<div class="card-header d-flex flex-wrap align-items-center justify-content-between">
|
|
<h3 class="card-title">Users</h3>
|
|
<div class="input-group input-group-sm flex-shrink-1 ms-auto" style="width: min(14rem, 100%);">
|
|
<span class="input-group-text" aria-hidden="true"><i class="bi bi-search"></i></span>
|
|
<input type="search" class="form-control" placeholder="Search users" aria-label="Search users" data-table-search />
|
|
</div>
|
|
</div>
|
|
<div class="card-body table-responsive p-0">
|
|
<div class="px-3 pt-3">
|
|
<p class="text-body-secondary mb-3">Choose the users who should belong to this role.</p>
|
|
</div>
|
|
<table class="table table-striped w-100 mb-0 align-middle" data-table-searchable>
|
|
<thead>
|
|
<tr>
|
|
<th style="width: 1%" scope="col" data-sortable="false">Select</th>
|
|
<th scope="col" data-table-sort-key="user">Username</th>
|
|
<th scope="col" data-table-sort-key="name">Name</th>
|
|
{{!-- <th scope="col" data-table-sort-key="roles">Roles</th> --}}
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{{#if users.length}}
|
|
{{#each users}}
|
|
<tr data-table-search-row>
|
|
<td data-label="Select">
|
|
<input class="form-check-input" type="checkbox" name="user_ids[]" value="{{id}}" {{#if isSelected}}checked{{/if}} />
|
|
</td>
|
|
<td data-label="Username">
|
|
<div class="user-cell">
|
|
<div>{{username}}</div>
|
|
</div>
|
|
</td>
|
|
<td data-label="Name">{{#if name}}{{name}}{{else}}-{{/if}}</td>
|
|
{{!-- <td data-label="Roles" class="text-body-secondary">{{#if roleNames}}{{roleNames}}{{else}}No roles assigned{{/if}}</td> --}}
|
|
</tr>
|
|
{{/each}}
|
|
{{else}}
|
|
<tr data-table-search-empty-default><td colspan="4" class="empty">No users found.</td></tr>
|
|
{{/if}}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
{{> table-pagination pagination=pagination basePath=roleEditBasePath alwaysShow=true}}
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-12 col-xl-8 d-flex flex-column gap-4">
|
|
<div class="card card-outline card-secondary admin-form-card">
|
|
<div class="card-header">
|
|
<h3 class="card-title">Permissions</h3>
|
|
</div>
|
|
<div class="card-body">
|
|
{{#if permissionSections.length}}
|
|
<div class="card card-outline card-secondary overflow-hidden">
|
|
<div class="accordion accordion-flush" id="role-permissions-accordion">
|
|
{{#each permissionSections}}
|
|
<div class="accordion-item overflow-hidden" data-permission-section data-permission-section-id="{{id}}">
|
|
<h2 class="accordion-header" id="permission-section-heading-{{id}}">
|
|
<button class="accordion-button {{#unless @first}}collapsed{{/unless}}" type="button" data-bs-toggle="collapse" data-bs-target="#permission-section-collapse-{{id}}" aria-expanded="{{#if @first}}true{{else}}false{{/if}}" aria-controls="permission-section-collapse-{{id}}">
|
|
<span class="fw-semibold">{{title}}</span>
|
|
</button>
|
|
</h2>
|
|
<div id="permission-section-collapse-{{id}}" class="accordion-collapse collapse {{#if @first}}show{{/if}}" aria-labelledby="permission-section-heading-{{id}}">
|
|
<div class="accordion-body p-0">
|
|
<div class="table-responsive">
|
|
<table class="table table-striped align-middle mb-0 rbac-permissions-table" style="table-layout: fixed; width: 100%;">
|
|
<colgroup>
|
|
<col />
|
|
{{#each actions}}
|
|
<col style="width: 5.5rem;" />
|
|
{{/each}}
|
|
</colgroup>
|
|
<thead class="table-light">
|
|
<tr>
|
|
<th scope="col">Type</th>
|
|
{{#each actions}}
|
|
<th scope="col" class="text-center">{{label}}</th>
|
|
{{/each}}
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{{#each groups}}
|
|
<tr data-permission-row data-permission-row-id="{{id}}">
|
|
<th scope="row" class="align-top">
|
|
<button type="button" class="text-reset border-0 bg-transparent p-0 fw-semibold text-start rbac-row-toggle" style="color: inherit; text-decoration-line: underline; text-decoration-style: dotted; text-underline-offset: 0.2em; cursor: pointer;" data-permission-row-toggle data-permission-row-target="{{id}}">{{title}}</button>
|
|
</th>
|
|
{{#each cells}}
|
|
<td class="text-center">
|
|
{{#if this}}
|
|
<label class="d-inline-flex align-items-center justify-content-center w-100 m-0 p-0">
|
|
<input class="form-check-input m-0" type="checkbox" name="permission_keys[]" value="{{permission_key}}" data-permission-key="{{permission_key}}" {{#if isSelected}}checked{{/if}} />
|
|
<span class="visually-hidden">{{actionLabel}} for {{../title}}</span>
|
|
</label>
|
|
{{else}}
|
|
<span class="d-inline-block w-100 text-center text-body-tertiary">—</span>
|
|
{{/if}}
|
|
</td>
|
|
{{/each}}
|
|
</tr>
|
|
{{/each}}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{{/each}}
|
|
</div>
|
|
</div>
|
|
{{else}}
|
|
<div class="alert alert-warning mb-0">No permissions are available.</div>
|
|
{{/if}}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</form> |