implemented more permission controls on components

fleetbase · Aug 26, 2024 · 4ab7f34 · 4ab7f34
1 parent 27d3e51
commit 4ab7f34
Show file tree

Hide file tree

Showing 16 changed files with 407 additions and 152 deletions.
diff --git a/addon/components/array-input.hbs b/addon/components/array-input.hbs
@@ -1,8 +1,16 @@
-<div class="array-input" ...attributes>
+<div class="array-input {{if this.disabled 'disabled'}}" ...attributes>
     <div class="flex items-center justify-between {{@headerClass}}">
         <div class={{@yieldWrapperClass}}>{{yield this.data}}</div>
         <div class="flex justify-end items-center mb-4">
-            <Button @type={{@addButtonType}} @text={{or @addButtonText "Add"}} @icon={{or @addIcon "plus"}} @iconPrefix={{or @addIconPrefix "fas"}} @onClick={{this.addData}} />
+            <Button
+                @type={{@addButtonType}}
+                @text={{or @addButtonText "Add"}}
+                @icon={{or @addIcon "plus"}}
+                @iconPrefix={{or @addIconPrefix "fas"}}
+                @onClick={{this.addData}}
+                @disabled={{this.disabled}}
+                @permission={{@permission}}
+            />
         </div>
     </div>
     <div class="bg-white border border-gray-200 rounded shadow-sm dark:bg-gray-800 dark:border-gray-900 text-xs">
@@ -14,13 +22,19 @@
                         @value={{datum}}
                         aria-label="Data Input"
                         placeholder={{@placeholder}}
+                        disabled={{this.disabled}}
+                        class="form-input w-full flex-1 border-none shadow-none rounded-none pr-24"
                         {{on "change" (fn this.onChange index)}}
                         {{on "paste" (fn this.onPaste index)}}
-                        class="form-input w-full flex-1 border-none shadow-none rounded-none pr-24"
                         {{on "keyup" (fn this.inputDatum index)}}
                     />
                     <div class="absolute right-0 py-2.5 px-4">
-                        <button type="button" class="rounded-none border-none bg-transparent shadow-none outline-none text-red-500" {{on "click" (fn this.removeData index)}}>Remove</button>
+                        <button
+                            type="button"
+                            class="rounded-none border-none bg-transparent shadow-none outline-none text-red-500"
+                            disabled={{this.disabled}}
+                            {{on "click" (fn this.removeData index)}}
+                        >Remove</button>
                     </div>
                 </div>
             {{/each}}

diff --git a/addon/components/array-input.js b/addon/components/array-input.js
@@ -4,11 +4,13 @@ import { action } from '@ember/object';
 
 export default class ArrayInputComponent extends Component {
     @tracked data = [];
+    @tracked disabled = false;
 
-    constructor() {
+    constructor(owner, { data = [], disabled = false }) {
         super(...arguments);
 
-        this.data = this.args.data ?? [];
+        this.data = data;
+        this.disabled = disabled;
     }
 
     @action onChange(index, event) {

diff --git a/addon/components/button.js b/addon/components/button.js
@@ -48,6 +48,13 @@ export default class ButtonComponent extends Component {
         return icon && !isLoading;
     }
 
+    /**
+     * The permission required.
+     *
+     * @memberof ButtonComponent
+     */
+    @tracked permissionRequired;
+
     /**
      * If the button is disabled by permissions.
      *

diff --git a/addon/components/checkbox.hbs b/addon/components/checkbox.hbs
@@ -1,32 +1,40 @@
-<div class="relative flex items-{{or @alignItems 'start'}} {{if @disabled 'disabled opacity-75'}}" ...attributes>
-    <div class="flex items-center h-4">
-        <Input
-            @type="checkbox"
-            id={{this.id}}
-            data-value={{@value}}
-            @checked={{@value}}
-            data-checked={{@value}}
-            disabled={{@disabled}}
-            class="fleetbase-checkbox form-checkbox {{this.colorClass}} {{@inputClass}}"
-            {{on "change" this.toggle}}
-        />
-        {{#if @helpText}}
-            <Attach::Tooltip @class="clean" @animation="scale" @placement={{or @tooltipPlacement "top"}}>
-                <InputInfo @text={{@helpText}} @exampleText={{@exampleText}} />
-            </Attach::Tooltip>
-        {{/if}}
-    </div>
-    {{#if (has-block)}}
-        <div class="ml-2 text-sm leading-5">
-            <label for={{this.id}} aria-disabled={{@disabled}} class="font-medium text-gray-700 dark:text-gray-100 {{@labelClass}}">
-                {{yield}}
-            </label>
-        </div>
-    {{else if @label}}
-        <div class="ml-2 text-sm leading-5">
-            <label for={{this.id}} aria-disabled={{@disabled}} class="font-medium text-gray-700 dark:text-gray-100 {{@labelClass}}">
-                {{@label}}
-            </label>
+{{#if this.visible}}
+    <div class="relative flex items-{{or @alignItems 'start'}} {{if @disabled 'disabled opacity-75'}} {{@wrapperClass}}">
+        <div class="flex items-center h-4">
+            <Input
+                @type="checkbox"
+                @checked={{this.checked}}
+                id={{this.id}}
+                data-value={{this.checked}}
+                data-checked={{this.checked}}
+                disabled={{this.disabled}}
+                class="fleetbase-checkbox form-checkbox {{this.colorClass}} {{@inputClass}}"
+                {{on "change" this.toggle}}
+                ...attributes
+            />
+            {{#if (has-block)}}
+                <div class="ml-2 text-sm leading-5">
+                    <label for={{this.id}} aria-disabled={{@disabled}} class="mb-0i font-medium text-gray-700 dark:text-gray-100 {{@labelClass}}">
+                        {{yield}}
+                    </label>
+                </div>
+            {{else if @label}}
+                <div class="ml-2 text-sm leading-5">
+                    <label for={{this.id}} aria-disabled={{@disabled}} class="mb-0i font-medium text-gray-700 dark:text-gray-100 {{@labelClass}}">
+                        {{@label}}
+                    </label>
+                </div>
+            {{/if}}
+            {{#if this.disabledByPermission}}
+                <Attach::Tooltip @class="clean" @animation="scale" @placement={{or @tooltipPlacement "top"}}>
+                    <InputInfo @text={{t "common.unauthorized"}} />
+                </Attach::Tooltip>
+            {{else if @helpText}}
+                <Attach::Tooltip @class="clean" @animation="scale" @placement={{or @tooltipPlacement "top"}}>
+                    <InputInfo @text={{@helpText}} @exampleText={{@exampleText}} />
+                </Attach::Tooltip>
+            {{/if}}
         </div>
-    {{/if}}
-</div>
+
+    </div>
+{{/if}}
diff --git a/addon/components/checkbox.js b/addon/components/checkbox.js
@@ -1,9 +1,12 @@
 import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
 import { computed, action } from '@ember/object';
+import { inject as service } from '@ember/service';
 import { guidFor } from '@ember/object/internals';
 
 export default class CheckboxComponent extends Component {
+    @service abilities;
+
     /**
      * Generates a unique ID for this checkbox instance
      *
@@ -33,6 +36,44 @@ export default class CheckboxComponent extends Component {
      */
     @tracked colorClass = 'text-sky-500';
 
+    /**
+     * The permission required.
+     *
+     * @memberof CheckboxComponent
+     */
+    @tracked permissionRequired;
+
+    /**
+     * If the button is disabled by permissions.
+     *
+     * @memberof CheckboxComponent
+     */
+    @tracked disabledByPermission = false;
+
+    /**
+     * Determines the visibility of the button
+     *
+     * @memberof CheckboxComponent
+     */
+    @tracked visible = true;
+
+    /**
+     * Creates an instance of ButtonComponent.
+     * @param {*} owner
+     * @param {*} { permission = null }
+     * @memberof ButtonComponent
+     */
+    constructor(owner, { value = false, permission = null, disabled = false, visible = true }) {
+        super(...arguments);
+        this.checked = value;
+        this.permissionRequired = permission;
+        this.visible = visible;
+        this.disabled = disabled;
+        if (!disabled) {
+            this.disabled = this.disabledByPermission = permission && this.abilities.cannot(permission);
+        }
+    }
+
     /**
      * Toggles the checkbox and sends up an action
      *

diff --git a/addon/components/layout/header.hbs b/addon/components/layout/header.hbs
@@ -8,7 +8,7 @@
         {{/if}}
         {{#unless (media "isMobile")}}
             <div role="menu" class="next-catalog-menu-items flex mr-4">
-                {{#each @menuItems as |menuItem|}}
+                {{#each this.menuItems as |menuItem|}}
                     <LinkToExternal
                         @route={{menuItem.route}}
                         id={{concat (dasherize menuItem.route) "-header-button"}}
@@ -43,25 +43,25 @@
                 <ChatTray />
             </div>
             <div class="flex-1 flex items-center pr-1">
-                <Layout::Header::Dropdown @items={{this.organizationNavigationItems}} @onAction={{@onAction}} class="flex-shrink-0" @triggerClass="flex-shrink-0" as |dd|>
+                <Layout::Header::Dropdown @items={{this.organizationMenuItems}} @onAction={{@onAction}} class="flex-shrink-0" @triggerClass="flex-shrink-0" as |dd|>
                     <div class="next-org-button-trigger flex-shrink-0 {{if dd.isOpen 'is-open'}}">
                         <div class="org-badge">
-                            {{first-char @user.company_name}}
+                            {{first-char this.currentUser.companyName}}
                         </div>
-                        <div class="text-sm w-10 md:w-14 lg:w-10/12 truncate flex-shrink-0 text-gray-800 dark:text-white">{{@user.company_name}}</div>
+                        <div class="text-sm w-10 md:w-14 lg:w-10/12 truncate flex-shrink-0 text-gray-800 dark:text-white">{{this.currentUser.companyName}}</div>
                     </div>
                 </Layout::Header::Dropdown>
             </div>
             <div class="flex-1 flex items-center justify-end">
-                <Layout::Header::Dropdown @items={{this.userNavigationItems}} @onAction={{@onAction}} class="flex-shrink-0" @triggerClass="flex-shrink-0" as |dd|>
+                <Layout::Header::Dropdown @items={{this.userMenuItems}} @onAction={{@onAction}} class="flex-shrink-0" @triggerClass="flex-shrink-0" as |dd|>
                     <div class="next-user-button-trigger flex-shrink-0 {{if dd.isOpen 'is-open'}}">
                         <Image
                             class="rounded-full h-5 w-5 shadow-sm flex-shrink-0"
                             height="20"
                             width="20"
-                            src={{@user.avatar_url}}
+                            src={{this.currentUser.avatarUrl}}
                             @fallbackSrc="https://s3.ap-southeast-1.amazonaws.com/flb-assets/static/no-avatar.png"
-                            alt={{@user.name}}
+                            alt={{this.currentUser.name}}
                         />
                     </div>
                 </Layout::Header::Dropdown>