v0.2.24 - more permission based ux implementations

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}}

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) {

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.
      *

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}}

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
      *

addon/components/content-panel.hbs

@@ -7,7 +7,7 @@
                     {{@panelHeaderClass}}
                     {{if @isLoading 'is-loading'}}"
             >
-                <a href="javascript:;" aria-expanded={{this.isOpen}} class="next-content-panel-header-left {{@panelHeaderLeftClass}}" {{on "click" this.toggle}}>
+                <a href="javascript:;" aria-expanded={{this.isOpen}} class="next-content-panel-header-left {{if this.disabled 'opacity-50'}} {{@panelHeaderLeftClass}}" disabled={{this.disabled}} {{on "click" this.toggle}}>
                     {{#unless @hideCaret}}
                         <span class="icon-container" {{did-insert this.trackIconContainer}}>
                             <FaIcon @icon={{if this.isOpen "caret-down" "caret-right"}} @prefix="fas" />
@@ -49,6 +49,15 @@
                             </div>
                         {{/if}}
                     </div>
+                    {{#if this.doesntHavePermissions}}
+                        <Attach::Tooltip @class="clean" @animation="scale" @placement={{or @tooltipPlacement "right"}}>
+                            <InputInfo @text={{t "common.unauthorized"}} />
+                        </Attach::Tooltip>
+                    {{else if @helpText}}
+                        <Attach::Tooltip @class="clean" @animation="scale" @placement={{or @tooltipPlacement "right"}}>
+                            <InputInfo @text={{@helpText}} @exampleText={{@exampleText}} />
+                        </Attach::Tooltip>
+                    {{/if}}
                 </a>
                 <div class="next-content-panel-header-right {{@panelHeaderRightClass}}">
                     {{#if @titleRightSideComponent}}
@@ -89,24 +98,31 @@
                                 @iconPrefix={{button.iconPrefix}}
                                 @onClick={{button.onClick}}
                                 @wrapperClass={{button.wrapperClass}}
+                                @permission={{button.permission}}
+                                @disabled={{button.disabled}}
                                 class={{button.class}}
                             />
                         {{/each}}
                         {{#if @dropdownButton}}
                             <DropdownButton
+                                class={{@dropdownButtonWrapperClass}}
+                                @defaultClass={{@dropdownButtonDefaultClass}}
                                 @icon={{or @dropdownButtonIcon "ellipsis"}}
                                 @iconPrefix={{@dropdownButtonIconPrefix}}
                                 @text={{@dropdownButtonText}}
                                 @size="xs"
-                                @horizontalPosition="left"
+                                @horizontalPosition={{or @dropdownButtonHorizontalPosition "right"}}
+                                @verticalPosition={{@verticalPosition}}
                                 @calculatePosition={{@dropdownButtonCalculatePosition}}
                                 @renderInPlace={{this.dropdownButtonRenderInPlace}}
+                                @permission={{@dropdownButtonPermission}}
+                                @disabled={{@dropdownButtonDisabled}}
                                 as |dd|
                             >
-                                <div class="next-dd-menu mt-0i" role="menu" aria-orientation="vertical" aria-labelledby="user-menu">
+                                <div class="next-dd-menu mt-0i {{@dropdownMenuWrapperClass}}" role="menu" aria-orientation="vertical" aria-labelledby="user-menu">
                                     {{#if @dropdownButtonMenuLabel}}
-                                        <div class="px-1">
-                                            <div class="text-sm flex flex-row items-center px-3 py-1 rounded-md my-1 text-gray-800 dark:text-gray-300">
+                                        <div class="next-dd-menu-label-container px-1">
+                                            <div class="next-dd-menu-label {{@dropdownButtonMenuLabelClass}}">
                                                 {{@dropdownButtonMenuLabel}}
                                             </div>
                                         </div>

addon/components/content-panel.js

@@ -1,4 +1,5 @@
 import Component from '@glimmer/component';
+import { inject as service } from '@ember/service';
 import { tracked } from '@glimmer/tracking';
 import { action } from '@ember/object';
 
@@ -9,6 +10,8 @@ import { action } from '@ember/object';
  * @extends Component
  */
 export default class ContentPanelComponent extends Component {
+    @service abilities;
+
     /**
      * Indicates whether the content panel is currently open.
      *
@@ -45,15 +48,25 @@ export default class ContentPanelComponent extends Component {
      */
     @tracked iconContainers = [];
 
+    @tracked permissionRequired = null;
+    @tracked disabled = false;
+    @tracked doesntHavePermissions = false;
+
     /**
      * Initializes the content panel component.
      *
      * @constructor
      * @public
      */
-    constructor(owner, { open = false, toggleOnCaretOnly = false, dropdownButtonRenderInPlace = true, onInsert }) {
+    constructor(owner, { open = false, toggleOnCaretOnly = false, dropdownButtonRenderInPlace = true, disabled = false, permission = null, onInsert }) {
         super(...arguments);
 
+        this.disabled = false;
+        this.permissionRequired = permission;
+        this.disabled = disabled;
+        if (!disabled) {
+            this.disabled = this.doesntHavePermissions = permission && this.abilities.cannot(permission);
+        }
         this.isOpen = open === true;
         this.toggleOnCaretOnly = toggleOnCaretOnly === true;
         this.dropdownButtonRenderInPlace = dropdownButtonRenderInPlace === true;

addon/components/coordinates-input.hbs

@@ -1,10 +1,10 @@
 <div class="grid grid-cols-2 gap-2 coordinates-input" ...attributes>
-    <Input class="w-full form-input" @type="text" placeholder="Latitude" aria-label="Latitude" @value={{this.latitude}} />
-    <Input class="w-full form-input" @type="text" placeholder="Longitude" aria-label="Longitude" @value={{this.longitude}} />
+    <Input class="w-full form-input" @type="text" placeholder="Latitude" aria-label="Latitude" @value={{this.latitude}} disabled={{this.disabled}} />
+    <Input class="w-full form-input" @type="text" placeholder="Longitude" aria-label="Longitude" @value={{this.longitude}} disabled={{this.disabled}} />
 </div>
 <div class="my-1">
-    <BasicDropdown ...attributes @verticalPosition="top" @horizontalPosition="left" @onClose={{this.onClose}} @renderInPlace={{or @renderInPlace true}} as |dd|>
-        <dd.Trigger class={{@triggerClass}}>
+    <BasicDropdown ...attributes @verticalPosition="top" @horizontalPosition="left" @onClose={{this.onClose}} @renderInPlace={{or @renderInPlace true}} @disabled={{this.disabled}} as |dd|>
+        <dd.Trigger class="{{@triggerClass}} {{if this.disabled 'disabled'}}" disabled={{this.disabled}}>
             <span class="text-sky-500 hover:text-sky-600">Select from map</span>
         </dd.Trigger>
         <dd.Content class="bg-transparent min-w-500px">
@@ -42,7 +42,7 @@
             </div>
             <div class="flex flex-col">
                 <div class="flex flex-row items-center pb-4">
-                    <Input @type="text" class="form-input mr-2" @value={{this.lookupQuery}} aria-label="Address Search" disabled={{this.isLoading}} placeholder="Enter address" />
+                    <Input @type="text" class="form-input mr-2" @value={{this.lookupQuery}} aria-label="Address Search" disabled={{or this.disabled this.isLoading}} placeholder="Enter address" />
                     <Button @wrapperClass="mr-2" @icon="search-location" @type="primary" @size="sm" @text="Lookup" @onClick={{this.reverseLookup}} @isLoading={{this.isLoading}} />
                     <Button @type="default" @iconPrefix="fas" @icon="times" @size="sm" @text="Done" @onClick={{dd.actions.close}} />
                 </div>

addon/components/coordinates-input.js

@@ -109,6 +109,13 @@ export default class CoordinatesInputComponent extends Component {
      */
     @tracked tileSourceUrl = 'https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png';
 
+    /**
+     * Disable input.
+     *
+     * @memberof CoordinatesInputComponent
+     */
+    @tracked disabled = false;
+
     /**
      * Constructor for CoordinatesInputComponent. Sets initial map coordinates and values.
      * @memberof CoordinatesInputComponent
@@ -120,6 +127,7 @@ export default class CoordinatesInputComponent extends Component {
         this.setInitialValueFromPoint(this.args.value);
         this.zoom = getWithDefault(this.args, 'zoom', 9);
         this.zoomControl = getWithDefault(this.args, 'zoomControl', false);
+        this.disabled = getWithDefault(this.args, 'disabled', false);
 
         if (typeof this.args.onInit === 'function') {
             this.args.onInit(this);

addon/components/full-calendar/draggable.hbs

@@ -1,3 +1,3 @@
-<div class="fleetbase-full-calendar-draggable" data-event={{@eventData}} {{did-insert this.makeDraggable}} ...attributes>
+<div class="fleetbase-full-calendar-draggable {{if this.disabled 'draggable-disabled'}}" data-disabled={{this.disabled}} data-event={{@eventData}} {{did-update this.argsChanged @disabled}} {{did-insert this.makeDraggable}} ...attributes>
     {{yield}}
 </div>