Merge pull request #51 from fleetbase/dev-v0.2.14

dev-v0.2.14

addon/components/chat-window.js

@@ -50,15 +50,15 @@ export default class ChatWindowComponent extends Component {
         this.sender = this.getSenderFromParticipants(channel);
         // if not participant close window
         if (!this.sender) {
-            later(
+            return later(
                 this,
                 () => {
                     this.chat.closeChannel(channel);
                 },
                 300
             );
-            return;
         }
+
         this.listenChatChannel(channel);
         this.loadAvailableUsers.perform();
         this.chat.on('chat.closed', this.handleChatClosed.bind(this));
@@ -140,6 +140,7 @@ export default class ChatWindowComponent extends Component {
         yield this.chat.sendMessage(this.channel, this.sender, this.pendingMessageContent, attachments);
         this.pendingMessageContent = '';
         this.pendingAttachmentFiles = [];
+        this.handleChatFeedScroll();
     }
 
     @action handleKeyPress(event) {
@@ -233,7 +234,7 @@ export default class ChatWindowComponent extends Component {
                 () => {
                     this.channelFeedContainerElement.scrollTop = this.channelFeedContainerElement.scrollHeight;
                 },
-                800
+                300
             );
         }
     }

addon/components/layout/section/footer.hbs

@@ -1,3 +1,6 @@
 <div class="next-view-section-footer" {{vertical-offset-by "bottom" offset=@verticalOffset elements=@verticalOffsetElements}} ...attributes>
+    {{#if @footerComponent}}
+        {{component @footerComponent}}
+    {{/if}}
     {{yield}}
 </div>

addon/components/layout/section/header.hbs

@@ -1,28 +1,36 @@
 <div id="next-view-section-subheader" class="next-view-section-subheader {{if @hideActions 'actions-hidden'}}" ...attributes>
-    <div id="next-view-section-subheader-left" class="next-view-section-subheader-left {{@leftSubheaderClass}}">
-        <div class="flex flex-row items-center">
-            {{#if @badge}}
-                <span class="mr-2 {{@badgeContainerClass}}">
-                    <Badge @status={{@badge}} @hideStatusDot={{@hideStatusDot}} class={{@badgeClass}} @disableHumanize={{@disableBadgeHumanize}} />
-                </span>
-            {{/if}}
-            {{#if @icon}}
-                <FaIcon @icon={{@icon}} @size={{@iconSize}} @prefix={{@iconPrefix}} class="{{@iconClass}} mr-2" />
-            {{/if}}
-            <h2 id="next-view-section-subheader-title" class="next-view-section-subheader-title {{@titleClass}}">{{@title}}</h2>
-            {{#if @subtitle}}
-                <div class={{@subtitleClass}}>
-                    {{@subtitle}}
+    {{#if @headerComponent}}
+        {{component @headerComponent}}
+    {{else}}
+        <div id="next-view-section-subheader-left" class="next-view-section-subheader-left {{@leftSubheaderClass}}">
+            {{#if @headerTitleComponent}}
+                {{component @headerTitleComponent}}
+            {{else}}
+                <div class="flex flex-row items-center">
+                    {{#if @badge}}
+                        <span class="mr-2 {{@badgeContainerClass}}">
+                            <Badge @status={{@badge}} @hideStatusDot={{@hideStatusDot}} class={{@badgeClass}} @disableHumanize={{@disableBadgeHumanize}} />
+                        </span>
+                    {{/if}}
+                    {{#if @icon}}
+                        <FaIcon @icon={{@icon}} @size={{@iconSize}} @prefix={{@iconPrefix}} class="{{@iconClass}} mr-2" />
+                    {{/if}}
+                    <h2 id="next-view-section-subheader-title" class="next-view-section-subheader-title {{@titleClass}}">{{@title}}</h2>
+                    {{#if @subtitle}}
+                        <div class={{@subtitleClass}}>
+                            {{@subtitle}}
+                        </div>
+                    {{/if}}
                 </div>
             {{/if}}
+            {{#if @onSearch}}
+                <Input @type="text" @value={{@searchQuery}} 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}}" {{on "keyup" @onSearch}} />
+            {{/if}}
         </div>
-        {{#if @onSearch}}
-            <Input @type="text" @value={{@searchQuery}} 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}}" {{on "keyup" @onSearch}} />
-        {{/if}}
-    </div>
-    {{#unless @hideActions}}
-        <div id="next-view-section-subheader-actions" class="next-view-section-subheader-actions {{@actionsWrapperClass}}">
-            {{yield}}
-        </div>
-    {{/unless}}
+        {{#unless @hideActions}}
+            <div id="next-view-section-subheader-actions" class="next-view-section-subheader-actions {{@actionsWrapperClass}}">
+                {{yield}}
+            </div>
+        {{/unless}}
+    {{/if}}
 </div>

addon/components/model-select.hbs

@@ -1,62 +1,5 @@
-<div class="fleetbase-model-select fleetbase-power-select ember-model-select">
-    <PowerSelect
-        @afterOptionsComponent={{@afterOptionsComponent}}
-        @allowClear={{@allowClear}}
-        @animationEnabled={{@animationEnabled}}
-        @ariaDescribedBy={{@ariaDescribedBy}}
-        @ariaInvalid={{@ariaInvalid}}
-        @ariaLabel={{@ariaLabel}}
-        @ariaLabelledBy={{@ariaLabelledBy}}
-        @beforeOptionsComponent={{@beforeOptionsComponent}}
-        @buildSelection={{@buildSelection}}
-        @calculatePosition={{@calculatePosition}}
-        @closeOnSelect={{@closeOnSelect}}
-        @defaultHighlighted={{@defaultHighlighted}}
-        @destination={{@destination}}
-        @disabled={{@disabled}}
-        @dropdownClass={{or @dropdownClass "ember-model-select__dropdown"}}
-        @extra={{@extra}}
-        @groupComponent={{@groupComponent}}
-        @highlightOnHover={{@highlightOnHover}}
-        @horizontalPosition={{@horizontalPosition}}
-        @initiallyOpened={{@initiallyOpened}}
-        @loadingMessage={{@loadingMessage}}
-        @eventType={{@eventType}}
-        @matcher={{@matcher}}
-        @matchTriggerWidth={{@matchTriggerWidth}}
-        @noMatchesMessage={{@noMatchesMessage}}
-        @onBlur={{@onBlur}}
-        @onChange={{this.change}}
-        @onClose={{this.onClose}}
-        @onFocus={{@onFocus}}
-        @onInput={{this.onInput}}
-        @onKeydown={{@onKeydown}}
-        @onOpen={{this.onOpen}}
-        @options={{this._options}}
-        @optionsComponent={{component this.optionsComponent infiniteScroll=this.infiniteScroll infiniteModel=this.model withCreate=this.withCreate}}
-        @placeholder={{@placeholder}}
-        @placeholderComponent={{@placeholderComponent}}
-        @preventScroll={{@preventScroll}}
-        @renderInPlace={{@renderInPlace}}
-        @scrollTo={{@scrollTo}}
-        @search={{perform this.searchModels}}
-        @searchEnabled={{get-default-value @searchEnabled true}}
-        @searchField={{@searchField}}
-        @searchMessage={{@searchMessage}}
-        @searchPlaceholder={{@searchPlaceholder}}
-        @selected={{this.selectedModel}}
-        @selectedItemComponent={{@selectedItemComponent}}
-        @tabindex={{@tabindex}}
-        @triggerClass={{@triggerClass}}
-        @triggerComponent={{@triggerComponent}}
-        @triggerId={{@triggerId}}
-        @triggerRole={{@triggerRole}}
-        @typeAheadMatcher={{@typeAheadMatcher}}
-        @verticalPosition={{@verticalPosition}}
-        @withCreate={{@withCreate}}
-        ...attributes
-        as |model|
-    >
+<div class="fleetbase-model-select fleetbase-power-select ember-model-select" {{did-update this.selectedModelChanged @selectedModel}}>
+    <PowerSelect @afterOptionsComponent={{@afterOptionsComponent}} @allowClear={{@allowClear}} @animationEnabled={{@animationEnabled}} @ariaDescribedBy={{@ariaDescribedBy}} @ariaInvalid={{@ariaInvalid}} @ariaLabel={{@ariaLabel}} @ariaLabelledBy={{@ariaLabelledBy}} @beforeOptionsComponent={{@beforeOptionsComponent}} @buildSelection={{@buildSelection}} @calculatePosition={{@calculatePosition}} @closeOnSelect={{@closeOnSelect}} @defaultHighlighted={{@defaultHighlighted}} @destination={{@destination}} @disabled={{@disabled}} @dropdownClass={{or @dropdownClass "ember-model-select__dropdown"}} @extra={{@extra}} @groupComponent={{@groupComponent}} @highlightOnHover={{@highlightOnHover}} @horizontalPosition={{@horizontalPosition}} @initiallyOpened={{@initiallyOpened}} @loadingMessage={{@loadingMessage}} @eventType={{@eventType}} @matcher={{@matcher}} @matchTriggerWidth={{@matchTriggerWidth}} @noMatchesMessage={{@noMatchesMessage}} @onBlur={{@onBlur}} @onChange={{this.change}} @onClose={{this.onClose}} @onFocus={{@onFocus}} @onInput={{this.onInput}} @onKeydown={{@onKeydown}} @onOpen={{this.onOpen}} @options={{this._options}} @optionsComponent={{component this.optionsComponent infiniteScroll=this.infiniteScroll infiniteModel=this.model withCreate=this.withCreate}} @placeholder={{@placeholder}} @placeholderComponent={{@placeholderComponent}} @preventScroll={{@preventScroll}} @renderInPlace={{@renderInPlace}} @scrollTo={{@scrollTo}} @search={{perform this.searchModels}} @searchEnabled={{get-default-value @searchEnabled true}} @searchField={{@searchField}} @searchMessage={{@searchMessage}} @searchPlaceholder={{@searchPlaceholder}} @selected={{this.selectedModel}} @selectedItemComponent={{@selectedItemComponent}} @tabindex={{@tabindex}} @triggerClass={{@triggerClass}} @triggerComponent={{@triggerComponent}} @triggerId={{@triggerId}} @triggerRole={{@triggerRole}} @typeAheadMatcher={{@typeAheadMatcher}} @verticalPosition={{@verticalPosition}} @withCreate={{@withCreate}} ...attributes as |model|>
         {{#if (has-block)}}
             {{yield model}}
         {{else}}

addon/components/model-select.js

@@ -146,6 +146,10 @@ export default class ModelSelectComponent extends Component {
         this.selectedModel = selectedModel;
     }
 
+    @action selectedModelChanged(el, [selectedModel]) {
+        this.selectedModel = selectedModel;
+    }
+
     @dropTask({ withTestWaiter: true }) findRecord = function* (modelName, id) {
         // this wrapper task is requried to avoid the following error upon fast changes
         // of selectedModel:

addon/components/phone-input.hbs

@@ -1 +1 @@
-<Input @type="tel" @value={{@value}} {{did-insert this.setupIntlTelInput}} {{on "keyup" this.onInput}} ...attributes />
+<Input @type="tel" @value={{@value}} {{did-insert this.setupIntlTelInput}} class="phone-input" {{on "keyup" this.onInput}} ...attributes />

addon/components/phone-input.js

@@ -10,20 +10,31 @@ export default class PhoneInputComponent extends Component {
 
     @action setupIntlTelInput(element) {
         this.iti = intlTelInput(element, {
-            customContainer: `w-full ${this.args.wrapperClass ?? ''}`,
+            containerClass: `w-full ${this.args.wrapperClass ?? ''}`,
             initialCountry: 'auto',
-            geoIpLookup: (success) => {
-                this.fetch.get('lookup/whois').then((response) => {
-                    success(response.country_code);
-                });
+            separateDialCode: true,
+            formatAsYouType: true,
+            geoIpLookup: (success, failure) => {
+                this.fetch
+                    .get('lookup/whois')
+                    .then((response) => {
+                        success(response.country_code);
+                    })
+                    .catch(failure);
             },
             utilsScript: '/assets/libphonenumber/utils.js',
         });
+
+        if (typeof this.args.onInit === 'function') {
+            this.args.onInit(this.iti);
+        }
+
+        element.addEventListener('countrychange', this.args.onCountryChange);
     }
 
     @action onInput() {
         const { onInput } = this.args;
-        const number = this.iti.getNumber();
+        const number = this.iti.getNumber(intlTelInput.utils.numberFormat.E164);
 
         if (typeof onInput === 'function') {
             onInput(number, ...arguments);

addon/components/select.hbs

@@ -1,10 +1,10 @@
-<select ...attributes class="form-select {{if this.hasPlaceholder 'has--placeholder' 'has--selection'}}" {{on "change" this.select}}>
-    {{#if @placeholder}}
+<select ...attributes class="form-select {{if this.value 'has--selection' 'has--placeholder'}}" {{on "change" this.select}} {{did-update this.changed @value @placeholder}}>
+    {{#if this.placeholder}}
         <option selected disabled>
-            {{@placeholder}}
+            {{this.placeholder}}
         </option>
     {{/if}}
-    
+
     {{#if (has-block)}}
         {{#if @fetched}}
             {{#if (is-object @options)}}

addon/components/select.js

@@ -1,28 +1,26 @@
 import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
-import { computed, action } from '@ember/object';
+import { action } from '@ember/object';
 
 export default class SelectComponent extends Component {
-    @tracked selected;
+    @tracked value;
+    @tracked placeholder;
 
-    @computed('selected', 'args.value') get value() {
-        if (this.selected) {
-            return this.selected;
-        }
-
-        return this.args.value;
+    constructor(owner, { value, placeholder }) {
+        super(...arguments);
+        this.value = value;
+        this.placeholder = placeholder;
     }
 
-    @computed('value', 'args.placeholder') get hasPlaceholder() {
-        return !this.value && this.args.placeholder;
+    @action changed(el, [value, placeholder]) {
+        this.value = value;
+        this.placeholder = placeholder;
     }
 
     @action select(event) {
-        const {
-            target: { value },
-        } = event;
+        const { value } = event.target;
 
-        this.selected = value;
+        this.value = value;
 
         if (typeof this.args.onSelect === 'function') {
             this.args.onSelect(value);

addon/components/stat-widget.hbs

@@ -1,4 +1,8 @@
 <div class="bg-gray-100 dark:bg-gray-700 rounded-lg shadow-sm p-4 flex flex-col items-center justify-center text-center" ...attributes>
-    <h3 class="text-black dark:text-gray-100 text-lg mb-1 {{@titleClass}}">{{@title}}</h3>
-    <h2 class="text-gray-800 dark:text-white text-3xl font-bold {{@valueClass}}">{{@value}}</h2>
+    {{#if @isLoading}}
+        <Spinner @loadingMessage={{@loadingMessage}} @loadingMessageClass={{@loadingMessageClass}} @wrapperClass={{@loadingWrapperClass}} />
+    {{else}}
+        <h3 class="text-black dark:text-gray-100 text-lg mb-1 {{@titleClass}}">{{@title}}</h3>
+        <h2 class="text-gray-800 dark:text-white text-3xl font-bold {{@valueClass}}">{{@value}}</h2>
+    {{/if}}
 </div>

addon/components/toggle.hbs

@@ -1,4 +1,4 @@
-<div class="flex items-center {{@wrapperClass}}">
+<div class="flex items-center {{@wrapperClass}}" {{did-update this.onChange @isToggled}}>
     <span role="checkbox" tabindex="0" aria-checked="false" class="relative inline-flex items-center justify-center flex-shrink-0 w-10 h-5 cursor-pointer group focus:outline-none {{if @disabled 'opacity-50'}}" ...attributes {{on "click" (fn this.toggle this.isToggled)}}>
         <span aria-hidden="true" class="{{if this.isToggled this.activeColorClass " bg-gray-200"}} absolute h-4 w-9 mx-auto
             rounded-full transition-colors ease-in-out duration-200"></span>

addon/components/toggle.js

@@ -33,14 +33,11 @@ export default class ToggleComponent extends Component {
      *
      * @memberof ToggleComponent
      */
-    constructor() {
+    constructor(owner, { isToggled, activeColor }) {
         super(...arguments);
 
-        this.isToggled = this.args.isToggled === true;
-
-        if (typeof this.args.activeColor === 'string' && this.args.activeColor.length) {
-            this.activeColor = this.args.activeColor;
-        }
+        this.isToggled = isToggled === true;
+        this.activeColor = typeof activeColor === 'string' ? activeColor : 'green';
     }
 
     /**
@@ -50,7 +47,6 @@ export default class ToggleComponent extends Component {
      */
     @action toggle(isToggled) {
         const { disabled, onToggle } = this.args;
-
         if (disabled) {
             return;
         }
@@ -61,4 +57,15 @@ export default class ToggleComponent extends Component {
             onToggle(this.isToggled);
         }
     }
+
+    /**
+     * Handle toggle argument change.
+     *
+     * @param {HTMLElement} el
+     * @param {Array} [isToggled]
+     * @memberof ToggleComponent
+     */
+    @action onChange(el, [isToggled]) {
+        this.isToggled = isToggled === true;
+    }
 }

addon/styles/components/badge.css

@@ -56,6 +56,7 @@
 }
 
 .status-badge[class*='5'] > span,
+.status-badge.high-status-badge > span,
 .status-badge.rejected-status-badge > span,
 .status-badge.critical-status-badge > span,
 .status-badge.disabled-status-badge > span,
@@ -66,6 +67,7 @@
 }
 
 .status-badge[class*='5'] > span svg,
+.status-badge.high-status-badge > span svg,
 .status-badge.rejected-status-badge > span svg,
 .status-badge.critical-status-badge > span svg,
 .status-badge.urgent-status-badge > span svg,

addon/styles/components/basic-dropdown.css

@@ -4,6 +4,12 @@
     padding-left: 0.5rem;
 }
 
+.ember-basic-dropdown-trigger[aria-disabled='true'],
+.ember-power-select-trigger[aria-disabled='true'] {
+    opacity: 0.5;
+    cursor: not-allowed;
+}
+
 .ember-power-select-multiple-option {
     margin: 0 0 0 3px;
     line-height: 1.45;