fix dependencies placements

.eslintrc.js

@@ -36,6 +36,8 @@ module.exports = {
                     'postcss-mixins',
                     'postcss-conditionals-renewed',
                     'postcss-at-rules-variables',
+                    'broccoli-funnel',
+                    'broccoli-merge-trees',
                     'autoprefixer',
                     'tailwindcss',
                     '@tailwindcss/forms',

addon/components/button.hbs

@@ -31,7 +31,11 @@
         {{/if}}
         {{yield}}
     </button>
-    {{#if @helpText}}
+    {{#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>

addon/components/button.js

@@ -1,17 +1,26 @@
 import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { inject as service } from '@ember/service';
 import { computed, action } from '@ember/object';
 import { not, equal } from '@ember/object/computed';
 
 export default class ButtonComponent extends Component {
+    /**
+     * Inject abilities service.
+     *
+     * @memberof ButtonComponent
+     */
+    @service abilities;
+
     /**
      * Determines if the button should be disabled
      *
      * @var {Boolean}
      */
-    @computed('args.{isLoading,disabled}') get isDisabled() {
+    @computed('args.{disabled,disabledByPermission,isLoading}', 'disabledByPermission') get isDisabled() {
         const { isLoading, disabled } = this.args;
 
-        return disabled || isLoading;
+        return this.disabledByPermission || disabled || isLoading;
     }
 
     /**
@@ -39,6 +48,27 @@ export default class ButtonComponent extends Component {
         return icon && !isLoading;
     }
 
+    /**
+     * If the button is disabled by permissions.
+     *
+     * @memberof ButtonComponent
+     */
+    @tracked disabledByPermission = false;
+
+    /**
+     * Creates an instance of ButtonComponent.
+     * @param {*} owner
+     * @param {*} { permission = null }
+     * @memberof ButtonComponent
+     */
+    constructor(owner, { permission = null, disabled = false }) {
+        super(...arguments);
+        this.permissionRequired = permission;
+        if (!disabled) {
+            this.disabledByPermission = permission && this.abilities.cannot(permission);
+        }
+    }
+
     /**
      * Setup this component
      *

addon/components/content-panel.hbs

@@ -81,7 +81,16 @@
                             </span>
                         {{/if}}
                         {{#each @actionButtons as |button|}}
-                            <Button @type={{button.type}} @text={{button.text}} @icon={{button.icon}} @size={{button.size}} @iconPrefix={{button.iconPrefix}} @onClick={{button.onClick}} @wrapperClass={{button.wrapperClass}} class={{button.class}} />
+                            <Button
+                                @type={{button.type}}
+                                @text={{button.text}}
+                                @icon={{button.icon}}
+                                @size={{button.size}}
+                                @iconPrefix={{button.iconPrefix}}
+                                @onClick={{button.onClick}}
+                                @wrapperClass={{button.wrapperClass}}
+                                class={{button.class}}
+                            />
                         {{/each}}
                         {{#if @dropdownButton}}
                             <DropdownButton

addon/components/country-select.hbs

@@ -9,7 +9,7 @@
         @triggerClass="form-select form-input {{@triggerClass}}"
         @dropdownClass={{or @dropdownClass "ember-model-select__dropdown"}}
         @placeholder={{or @placeholder "Select country..."}}
-        @disabled={{this.isLoading}}
+        @disabled={{or this.disabled this.fetchCountries.isRunning}}
         @allowClear={{@allowClear}}
         ...attributes
         as |country|

addon/components/country-select.js

@@ -3,30 +3,32 @@ import { inject as service } from '@ember/service';
 import { tracked } from '@glimmer/tracking';
 import { action } from '@ember/object';
 import { guidFor } from '@ember/object/internals';
+import { task } from 'ember-concurrency';
 
 export default class CountrySelectComponent extends Component {
     @service fetch;
     @tracked countries = [];
     @tracked selected;
-    @tracked isLoading = true;
+    @tracked disabled = false;
     @tracked value;
     @tracked id = guidFor(this);
 
-    constructor() {
+    constructor(owner, { value = null, disabled = false }) {
         super(...arguments);
+        this.disabled = disabled;
+        this.value = value;
+        this.fetchCountries.perform(value);
+    }
 
-        this.fetch
-            .get('lookup/countries', { columns: ['name', 'cca2', 'flag', 'emoji'] })
-            .then((countries) => {
-                this.countries = countries;
-
-                if (this.args.value) {
-                    this.selected = this.findCountry(this.args.value);
-                }
-            })
-            .finally(() => {
-                this.isLoading = false;
-            });
+    @task *fetchCountries(value = null) {
+        try {
+            this.countries = yield this.fetch.get('lookup/countries', { columns: ['name', 'cca2', 'flag', 'emoji'] });
+            if (value) {
+                this.selected = this.findCountry(value);
+            }
+        } catch (error) {
+            this.countries = [];
+        }
     }
 
     @action changed(value) {

addon/components/dropdown-button.hbs

@@ -10,6 +10,7 @@
     @matchTriggerWidth={{@matchTriggerWidth}}
     @onOpen={{@onOpen}}
     @onClose={{@onClose}}
+    @disabled={{this.disabled}}
     {{did-insert this.onInsert}}
     as |dd|
 >
@@ -25,7 +26,7 @@
                 active=@active
                 size=this.buttonSize
                 isLoading=@isLoading
-                disabled=@disabled
+                disabled=this.disabled
                 textClass=@textClass
                 helpText=@helpText
                 tooltipPlacement=@tooltipPlacement
@@ -42,7 +43,7 @@
                 @active={{@active}}
                 @size={{this.buttonSize}}
                 @isLoading={{@isLoading}}
-                disabled={{@disabled}}
+                disabled={{this.disabled}}
                 {{did-insert this.onButtonInsert}}
                 ...attributes
             >
@@ -52,7 +53,7 @@
                 {{#if @img}}
                     <img src={{@img}} class={{@imgClass}} alt={{or @alt "image"}} />
                 {{/if}}
-                {{#if @helpText}}
+                {{#if (and (not this.doesntHavePermissions) @helpText)}}
                     <Attach::Tooltip @class="clean" @animation="scale" @placement={{or @tooltipPlacement "top"}}>
                         <InputInfo @text={{@helpText}} />
                     </Attach::Tooltip>
@@ -62,6 +63,11 @@
                 </div>
             </Button>
         {{/if}}
+        {{#if this.doesntHavePermissions}}
+            <Attach::Tooltip @class="clean" @animation="scale" @placement={{or @tooltipPlacement "top"}}>
+                <InputInfo @text={{t "common.unauthorized"}} />
+            </Attach::Tooltip>
+        {{/if}}
     </dd.Trigger>
     <dd.Content class={{@contentClass}} @overlay={{@overlay}}>
         {{yield dd}}

addon/components/dropdown-button.js

@@ -1,27 +1,38 @@
 import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
+import { inject as service } from '@ember/service';
 import { action } from '@ember/object';
 
 export default class DropdownButtonComponent extends Component {
+    @service abilities;
     @tracked type = 'default';
     @tracked buttonSize = 'md';
     @tracked buttonComponentArgs = {};
     @tracked _onInsertFired = false;
     @tracked _onTriggerInsertFired = false;
     @tracked _onButtonInsertFired = false;
+    @tracked disabled = false;
+    @tracked permissionRequired = false;
+    @tracked doesntHavePermissions = false;
 
     /**
      * Creates an instance of DropdownButtonComponent.
      * @param {ApplicationInstance} owner
      * @param {Object} { type = 'default', size = 'md', buttonComponentArgs = {}}
      * @memberof DropdownButtonComponent
      */
-    constructor(owner, { type = 'default', size = 'md', buttonComponentArgs = {} }) {
+    constructor(owner, { type = 'default', size = 'md', buttonComponentArgs = {}, permission = null, disabled = false }) {
         super(...arguments);
 
         this.type = type;
         this.buttonSize = size;
         this.buttonComponentArgs = buttonComponentArgs;
+        this.permissionRequired = permission;
+        this.disabled = disabled;
+        // If no permissions disable
+        if (!disabled) {
+            this.disabled = this.doesntHavePermissions = permission && this.abilities.cannot(permission);
+        }
     }
 
     @action onRegisterAPI() {

addon/components/file-upload.hbs

@@ -2,8 +2,8 @@
     (file-queue name=@name onFileAdded=@onFileAdded onFileRemoved=@onFileRemoved onUploadStarted=@onUploadStarted onUploadSucceeded=@onUploadSucceeded onUploadFailed=@onUploadFailed)
     as |queue|
 }}
-    <label class="file-upload {{@labelClass}}">
-        <input type="file" accept={{@accept}} hidden={{or @hidden true}} class={{@inputClass}} {{queue.selectFile}} />
+    <label class="file-upload {{@labelClass}}" disabled={{@disabled}}>
+        <input type="file" accept={{@accept}} hidden={{or @hidden true}} class={{@inputClass}} {{queue.selectFile}} disabled={{@disabled}} ...attributes />
         {{yield queue}}
     </label>
 {{/let}}

addon/components/layout/section/header.hbs

@@ -30,6 +30,7 @@
                     aria-label={{t "common.search-input"}}
                     placeholder={{or @searchPlaceholder (concat (t "common.search") " " (pluralize @title))}}
                     class="w-64 ml-3 form-input form-input-sm {{@searchInputClass}}"
+                    disabled={{@searchDisabled}}
                     {{on "keyup" @onSearch}}
                 />
             {{/if}}

addon/components/layout/sidebar/item.hbs

@@ -1,4 +1,10 @@
-<a href="javascript:;" class="next-nav-item {{if this.active 'active'}} {{if @dropdownButton 'next-nav-item-with-dropdown'}}" {{on "click" this.onClick}} ...attributes>
+<a
+    href="javascript:;"
+    class="next-nav-item {{if this.active 'active'}} {{if @dropdownButton 'next-nav-item-with-dropdown'}}"
+    disabled={{this.disabled}}
+    {{on "click" this.onClick}}
+    ...attributes
+>
     <div class="next-nav-item-icon-container {{@iconWrapperClass}}">
         {{#if @icon}}
             <FaIcon @prefix={{@iconPrefix}} @icon={{@icon}} @size={{or @iconSize "xs"}} class={{@iconClass}} />
@@ -33,6 +39,7 @@
                     @triggerClass="next-nav-item-dropdown-button {{@dropdownButtonTriggerClass}}"
                     @registerAPI={{this.onRegisterAPI}}
                     @onInsert={{this.onDropdownButtonInsert}}
+                    @disabled={{this.disabled}}
                     as |dd|
                 >
                     <div class="next-dd-menu mt-0i" role="menu" aria-orientation="vertical" aria-labelledby="user-menu">
@@ -68,4 +75,13 @@
             {{/if}}
         {{/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>

addon/components/layout/sidebar/item.js

@@ -8,15 +8,25 @@ import isMenuItemActive from '../../../utils/is-menu-item-active';
 export default class LayoutSidebarItemComponent extends Component {
     @service router;
     @service hostRouter;
+    @service abilities;
     @tracked active;
     @tracked dropdownButtonNode;
     @tracked dropdownButtonRenderInPlace = true;
+    @tracked permissionRequired = null;
+    @tracked disabled = false;
+    @tracked doesntHavePermissions = false;
 
-    constructor(owner, { dropdownButtonRenderInPlace = true }) {
+    constructor(owner, { dropdownButtonRenderInPlace = true, permission = null, disabled = false }) {
         super(...arguments);
 
         this.active = this.checkIfActive();
         this.dropdownButtonRenderInPlace = dropdownButtonRenderInPlace;
+        this.permissionRequired = permission;
+        this.disabled = disabled;
+        // If no permissions disable
+        if (!disabled) {
+            this.disabled = this.doesntHavePermissions = permission && this.abilities.cannot(permission);
+        }
 
         const router = this.getRouter();
         router.on('routeDidChange', this.trackActiveFlag);
@@ -51,6 +61,12 @@ export default class LayoutSidebarItemComponent extends Component {
             return;
         }
 
+        const doesntHavePermissions = this.permissionRequired && this.abilities.cannot(this.permissionRequired);
+        if (doesntHavePermissions) {
+            event.preventDefault();
+            return;
+        }
+
         const { url, target, route, model, onClick, options } = this.args;
         const router = this.getRouter();
         const anchor = event.target?.closest('a');

addon/components/table/cell/anchor.hbs

@@ -1,4 +1,4 @@
-<a href="#" {{on "click" this.onClick}} class={{@column.anchorClass}} disabled={{not @value}} ...attributes>
+<a href="#" {{on "click" this.onClick}} class={{@column.anchorClass}} disabled={{and @column.permission (cannot @column.permission)}} ...attributes>
     {{#if @column.anchorIcon}}
         <span class="btn-icon-wrapper" data-icon-prefix={{@column.anchorIconPrefix}}>
             <FaIcon

addon/components/table/cell/driver-name.hbs

@@ -1,7 +1,7 @@
 {{#if this.driver}}
     <div class="relative flex items-center" ...attributes>
         <img src={{this.driver.photo_url}} alt={{this.driver.name}} {{fallback-img-src (config "defaultValues.driverImage")}} class="w-5 h-5 mr-2 rounded-md" />
-        <a href="javascript:;" class="relative block" {{on "click" (fn this.onClick this.driver)}}>
+        <a href="javascript:;" class="relative block" {{on "click" (fn this.onClick this.driver)}} disabled={{and @column.permission (cannot @column.permission)}}>
             <span>{{get-default-value this.driver.name}}</span>
         </a>
         <FaIcon @icon="circle" @size="2xs" class="absolute left-0 top-0 -mt-1 -ml-1 {{if this.driver.online 'text-green-500' 'text-yellow-200'}}" />

addon/components/table/cell/dropdown.hbs

@@ -18,23 +18,8 @@
                 </div>
                 <div class="next-dd-menu-seperator"></div>
             {{/if}}
-            {{#each @column.actions as |action|}}
-                {{#if action.separator}}
-                    <div class="next-dd-menu-seperator"></div>
-                {{else}}
-                    {{#if (is-dd-item-visible @row action.isVisible)}}
-                        <div role="group" class="px-1">
-                            <a href="javascript:;" role="menuitem" class="next-dd-item {{action.class}}" {{on "click" (fn this.onDropdownItemClick action @row dd)}}>
-                                {{#if action.icon}}
-                                    <span class="mr-1">
-                                        <FaIcon class={{action.iconClass}} @icon={{action.icon}} @prefix={{action.iconPrefix}} />
-                                    </span>
-                                {{/if}}
-                                {{action.label}}
-                            </a>
-                        </div>
-                    {{/if}}
-                {{/if}}
+            {{#each @column.actions as |columnAction|}}
+                <Table::Cell::Dropdown::ActionItem @columnAction={{columnAction}} @row={{@row}} @column={{@column}} @dd={{dd}} />
             {{/each}}
         </div>
     </DropdownButton>