From 237072a47e3d1cd0207b5f0771dc8ee058c009e0 Mon Sep 17 00:00:00 2001
From: "Ronald A. Richardson" <me@ron.dev>
Date: Sat, 17 Aug 2024 22:19:28 +0800
Subject: [PATCH] improvements to permission picker component

---
 addon/components/permission-picker.hbs |  9 +++++-
 addon/components/permission-picker.js  | 41 ++++++++++++++++++++++++--
 2 files changed, 46 insertions(+), 4 deletions(-)

diff --git a/addon/components/permission-picker.hbs b/addon/components/permission-picker.hbs
index 8e5a8e9..b0c9d73 100644
--- a/addon/components/permission-picker.hbs
+++ b/addon/components/permission-picker.hbs
@@ -17,6 +17,9 @@
                     </div>
                 {{/if}}
             </div>
+            <div>
+                <a href="javascript:;" class="ml-2 text-xs text-blue-500 hover:opacity-50" {{on "click" this.toggleSelected}}>Toggle Selected</a>
+            </div>
         </div>
         <div class="text-sm dark:text-gray-100">
             {{t "iam.components.permission-picker.selected"}}
@@ -43,7 +46,11 @@
                 </div>
             {{/unless}}
             {{#each this.permissions as |permission|}}
-                <div class="grid grid-cols-12 text-xs py-2 px-3 text-gray-800 border-b border-gray-200 dark:border-gray-900 dark:text-gray-100 {{if @disabled 'opacity-50'}}">
+                <div
+                    class="grid grid-cols-12 text-xs py-2 px-3 text-gray-800 border-b border-gray-200 dark:border-gray-900 dark:text-gray-100
+                        {{if @disabled 'opacity-50'}}
+                        {{if (and this.showSelectedOnly (not permission.selected)) 'hidden'}}"
+                >
                     <div class="flex items-center">
                         <Checkbox @value={{permission.selected}} @onToggle={{fn this.selectPermission permission}} @disabled={{@disabled}} />
                     </div>
diff --git a/addon/components/permission-picker.js b/addon/components/permission-picker.js
index 3e398ad..cf55ec0 100644
--- a/addon/components/permission-picker.js
+++ b/addon/components/permission-picker.js
@@ -72,6 +72,13 @@ export default class PermissionPickerComponent extends Component {
      */
     @tracked isPermissionsLoaded = false;
 
+    /**
+     * Only show selected permissions.
+     *
+     * @memberof PermissionPickerComponent
+     */
+    @tracked showSelectedOnly = false;
+
     /**
      * The ID of each permission loaded.
      *
@@ -86,14 +93,33 @@ export default class PermissionPickerComponent extends Component {
      * Creates an instance of PermissionPickerComponent.
      * @memberof PermissionPickerComponent
      */
-    constructor() {
+    constructor(owner, { selected = [], guard = 'sanctum' }) {
         super(...arguments);
 
-        this.selected = isArray(this.args.selected) ? this.args.selected : [];
-        this.guard = this.args.guard ?? 'sanctum';
+        this.selected = this.getDefaultSelected(selected);
+        this.guard = guard ?? 'sanctum';
         this.queryPermissions();
     }
 
+    /**
+     * Get the default selected.
+     *
+     * @param {Array} [selected=[]]
+     * @return {Array}
+     * @memberof PermissionPickerComponent
+     */
+    getDefaultSelected(selected = []) {
+        if (typeof selected.toArray === 'function') {
+            return selected.toArray();
+        }
+
+        if (isArray(selected)) {
+            return selected;
+        }
+
+        return [];
+    }
+
     /**
      * Selects all permissions.
      *
@@ -183,6 +209,15 @@ export default class PermissionPickerComponent extends Component {
         });
     }
 
+    /**
+     * Toggles to only show selected or all.
+     *
+     * @memberof PermissionPickerComponent
+     */
+    @action toggleSelected() {
+        this.showSelectedOnly = !this.showSelectedOnly;
+    }
+
     /**
      * Task initiates the search for permissions
      *