From e3717cd02be02cd8f6bc81b5f78ee112a6fa87d3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Johnny=20Marie=CC=81thoz?= <Johnny.Mariethoz@rero.ch>
Date: Thu, 9 Jan 2025 10:29:41 +0100
Subject: [PATCH] primeng: admin permissions
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-by: Johnny Mariéthoz <Johnny.Mariethoz@rero.ch>
Co-Authored-by: Bertrand Zuchuat <bertrand.zuchuat@rero.ch>
---
 .../permission-detail-view.component.html     | 37 ++++++-----
 .../permission-detail-view.component.scss     | 64 ++++++++-----------
 .../permission-detail-view.component.ts       |  3 +-
 projects/admin/src/app/scss/styles.scss       |  1 +
 4 files changed, 51 insertions(+), 54 deletions(-)

diff --git a/projects/admin/src/app/record/detail-view/permission-detail-view/permission-detail-view.component.html b/projects/admin/src/app/record/detail-view/permission-detail-view/permission-detail-view.component.html
index f6fddbc1a..bced85277 100644
--- a/projects/admin/src/app/record/detail-view/permission-detail-view/permission-detail-view.component.html
+++ b/projects/admin/src/app/record/detail-view/permission-detail-view/permission-detail-view.component.html
@@ -16,20 +16,28 @@
   along with this program.  If not, see <http://www.gnu.org/licenses/>.
 -->
 @if (globalPermissions) {
-  <div class="container">
     <h1 translate>Permissions matrix</h1>
-      <div class="my-3">
-        <label for="filter" translate>Filter permission list</label>
-        <input id="filter" class="form-control" #search (keyup)="filterPermissions(search.value)" />
-        <small class="form-text text-muted" translate>Enter a part of the permission name to filter the list.</small>
-      </div>
+    <div class="flex flex-column gap-2">
+      <label for="filter" translate>Filter permission list</label>
+      <input
+          pInputText
+          id="filter"
+          aria-describedby="filter-help"
+          #search
+          (keyup)="filterPermissions(search.value)"
+      />
+      <small id="filter-help" class="text-color-secondary" translate>
+        Enter a part of the permission name to filter the list.
+      </small>
+    </div>
+
       @if (filteredPermissionNames.length >0) {
-        <table class="table table-header-rotated table-striped">
+        <table>
           <thead>
             <tr>
-              <th class="vertical-header">&nbsp;</th>
+              <th>&nbsp;</th>
               @for (role of roles; track role) {
-                <th class="vertical-header" [ngClass]="'type-'+role.type.replace('_', '-')">
+                <th [ngClass]="'type-'+role.type.replace('_', '-')">
                   <span>{{ role.name | translate }}</span>
                 </th>
               }
@@ -38,16 +46,16 @@ <h1 translate>Permissions matrix</h1>
           <tbody>
             @for (permissionName of filteredPermissionNames; track permissionName) {
               <tr>
-                <td class="permission">{{ permissionName }}</td>
+                <td>{{ permissionName }}</td>
                 @for (role of roles; track role) {
-                  <td class="access text-center" [ngClass]="'type-'+role.type.replace('_', '-')">
+                  <td [ngClass]="'type-'+role.type.replace('_', '-')">
                     <span title="{{ role.name | translate }}">
                       <i
                         class="fa fa-square"
                         [ngClass]="{
                           'text-success': true === globalPermissions[role.name].actions[permissionName],
-                          'text-danger': false === globalPermissions[role.name].actions[permissionName],
-                          'text-secondary': null === globalPermissions[role.name].actions[permissionName]
+                          'text-error': false === globalPermissions[role.name].actions[permissionName],
+                          'text-color-secondary': null === globalPermissions[role.name].actions[permissionName]
                         }">
                       </i>
                     </span>
@@ -58,7 +66,6 @@ <h1 translate>Permissions matrix</h1>
           </tbody>
         </table>
       } @else {
-        <h4 class="text-center text-uppercase font-weight-bold mt-4" translate>No Result</h4>
+        <p class="mt-3" translate>No result</p>
       }
-  </div>
 }
diff --git a/projects/admin/src/app/record/detail-view/permission-detail-view/permission-detail-view.component.scss b/projects/admin/src/app/record/detail-view/permission-detail-view/permission-detail-view.component.scss
index 1aaa90df9..35bde503e 100644
--- a/projects/admin/src/app/record/detail-view/permission-detail-view/permission-detail-view.component.scss
+++ b/projects/admin/src/app/record/detail-view/permission-detail-view/permission-detail-view.component.scss
@@ -16,42 +16,32 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-@import 'node_modules/bootstrap/scss/_functions';
-@import 'node_modules/bootstrap/scss/_variables';
-
-table {
-  position: relative;
-
-  tr td:nth-child(2),
-  td.type-system-role + td.type-role {
-    border-left: $border-width*2 solid $border-color;
-  }
-  th.type-system-role {
-    background-color: #f4f4f4;
-  }
-
-  th {
-    position: sticky;
-    top: 0;
-    background: $white;
-  }
-
-  .vertical-header {
-    text-align: left;
-  }
-
-  .vertical-header span {
-    writing-mode: vertical-rl;
-    transform: rotate(180deg);
-    text-align: left;
-    max-height: 200px;
-  }
-
-  .permission {
-    width: 200px;
-  }
-
-  .access {
-    width: 30px;
+admin-permission-detail-view {
+  table {
+    @extend .relative, .w-full, .mt-3;
+    border-spacing: 0;
+    thead tr {
+      @extend .bg-white, .sticky, .top-0, .vertical-align-bottom;
+      th span {
+        @extend .text-left, .max-h-13rem, .text-sm, .p-2;
+        writing-mode: vertical-rl;
+        transform: rotate(180deg);
+      }
+      th.type-system-role {
+        @extend .surface-100;
+      }
+    }
+    tbody {
+      tr:nth-of-type(odd) {
+        @extend .surface-100;
+      }
+      td {
+        @extend .p-3, .w-13rem, .text-center, .w-2rem;
+      }
+      td:nth-child(2),
+      td.type-system-role + td.type-role {
+        @extend .surface-border, .border-left-2;
+      }
+    }
   }
 }
diff --git a/projects/admin/src/app/record/detail-view/permission-detail-view/permission-detail-view.component.ts b/projects/admin/src/app/record/detail-view/permission-detail-view/permission-detail-view.component.ts
index f42fa9557..d5404121c 100644
--- a/projects/admin/src/app/record/detail-view/permission-detail-view/permission-detail-view.component.ts
+++ b/projects/admin/src/app/record/detail-view/permission-detail-view/permission-detail-view.component.ts
@@ -20,8 +20,7 @@ import { IRolePermission, PermissionApiService } from '../../../api/permission-a
 
 @Component({
   selector: 'admin-permission-detail-view',
-  templateUrl: './permission-detail-view.component.html',
-  styleUrls: ['./permission-detail-view.component.scss'],
+  templateUrl: './permission-detail-view.component.html'
 })
 export class PermissionDetailViewComponent implements OnInit {
 
diff --git a/projects/admin/src/app/scss/styles.scss b/projects/admin/src/app/scss/styles.scss
index 7e9388cc9..8f8fc6298 100644
--- a/projects/admin/src/app/scss/styles.scss
+++ b/projects/admin/src/app/scss/styles.scss
@@ -39,6 +39,7 @@
   @import '../menu/menu-app/menu-app.component.scss';
   @import '../record/detail-view/document-detail-view/holding/holding.component.scss';
   @import '../record/detail-view/entities-detail-view/remote/entities-remote-detail-view.component.scss';
+  @import '../record/detail-view/permission-detail-view/permission-detail-view.component.scss';
 }
 
 @layer rero-ils-ui {