more patches and styling updates

addon/components/badge.hbs

@@ -1,4 +1,4 @@
-<div class="status-badge {{safe-dasherize (or @status @type)}}-status-badge" ...attributes>
+<div class="status-badge {{safe-dasherize (or @type @status)}}-status-badge" ...attributes>
     <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium leading-4 whitespace-no-wrap {{@spanClass}}">
         <svg class="mr-1.5 h-2 w-2 {{if @hideStatusDot "hidden"}}" fill="currentColor" viewBox="0 0 8 8">
             <circle cx="4" cy="4" r="3"></circle>

addon/components/fetch-select.hbs

@@ -1,5 +1,5 @@
 <div class="fleetbase-model-select fleetbase-power-select ember-model-select {{@wrapperClass}}">
-    <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.onChange}} @onClose={{this.onClose}} @onFocus={{@onFocus}} @onInput={{this.onInput}} @onKeydown={{@onKeydown}} @onOpen={{this.onOpen}} @options={{this.options}} @optionsComponent={{component this.optionsComponent}} @placeholder={{@placeholder}} @placeholderComponent={{@placeholderComponent}} @preventScroll={{@preventScroll}} @renderInPlace={{@renderInPlace}} @scrollTo={{@scrollTo}} @search={{perform this.searchOptions}} @searchEnabled={{get-default-value @searchEnabled true}} @searchField={{@searchField}} @searchMessage={{@searchMessage}} @searchPlaceholder={{@searchPlaceholder}} @selected={{this.selected}} @selectedItemComponent={{@selectedItemComponent}} @tabindex={{@tabindex}} @triggerClass="form-select form-input {{@triggerClass}}" @triggerComponent={{@triggerComponent}} @triggerId={{@triggerId}} @triggerRole={{@triggerRole}} @typeAheadMatcher={{@typeAheadMatcher}} @verticalPosition={{@verticalPosition}} @withCreate={{@withCreate}} ...attributes as |option|>
+    <PowerSelect @registerAPI={{this.registerAPI}} @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.onChange}} @onClose={{this.onClose}} @onFocus={{@onFocus}} @onInput={{this.onInput}} @onKeydown={{@onKeydown}} @onOpen={{this.onOpen}} @options={{this.options}} @optionsComponent={{component this.optionsComponent}} @placeholder={{@placeholder}} @placeholderComponent={{@placeholderComponent}} @preventScroll={{@preventScroll}} @renderInPlace={{@renderInPlace}} @scrollTo={{@scrollTo}} @search={{perform this.searchOptions}} @searchEnabled={{get-default-value @searchEnabled true}} @searchField={{@searchField}} @searchMessage={{@searchMessage}} @searchPlaceholder={{@searchPlaceholder}} @selected={{this.selected}} @selectedItemComponent={{@selectedItemComponent}} @tabindex={{@tabindex}} @triggerClass="form-select form-input {{@triggerClass}}" @triggerComponent={{@triggerComponent}} @triggerId={{@triggerId}} @triggerRole={{@triggerRole}} @typeAheadMatcher={{@typeAheadMatcher}} @verticalPosition={{@verticalPosition}} @withCreate={{@withCreate}} ...attributes as |option|>
         {{#if (has-block)}}
             {{yield option}}
         {{else}}

addon/components/fetch-select.js

@@ -41,6 +41,12 @@ export default class FetchSelectComponent extends Component {
      */
     @tracked selected;
 
+    /**
+     * The power select API.
+     * @type {Object}
+     */
+    @tracked api;
+
     /**
      * The duration to debounce the search input, in milliseconds.
      * @type {number}
@@ -141,13 +147,22 @@ export default class FetchSelectComponent extends Component {
                 }
 
                 if (foundSelected) {
-                    this.selected = foundSelected;
+                    this.select(foundSelected);
                 } else {
-                    this.selected = selected;
+                    this.select(selected);
                 }
             });
         } else {
-            this.selected = selected;
+            this.select(selected);
+        }
+    }
+
+    select(option) {
+        this.selected = option;
+
+        // set via api
+        if (this.api && this.api.actions && typeof this.api.actions.select === 'function') {
+            this.api.actions.select(option);
         }
     }
 
@@ -229,4 +244,17 @@ export default class FetchSelectComponent extends Component {
             onClose(...arguments);
         }
     }
+
+    /**
+     * Register the power select API
+     *
+     * @memberof FetchSelectComponent
+     */
+    @action registerAPI(api) {
+        this.api = api;
+
+        if (typeof this.args.registerAPI === 'function') {
+            this.args.registerAPI(...arguments);
+        }
+    }
 }

addon/styles/components/badge.css

@@ -44,6 +44,7 @@
 }
 
 .status-badge[class*='5'] > span,
+.status-badge.critical-status-badge > span,
 .status-badge.disabled-status-badge > span,
 .status-badge.inactive-status-badge > span,
 .status-badge.failed-status-badge > span,
@@ -52,13 +53,24 @@
 }
 
 .status-badge[class*='5'] > span svg,
+.status-badge.urgent-status-badge > span svg,
+.status-badge.high-status-badge > span svg,
 .status-badge.disabled-status-badge > span svg,
 .status-badge.failed-status-badge > span svg,
 .status-badge.canceled-status-badge > span svg {
     @apply text-red-400;
 }
 
+.status-badge.low-status-badge > span svg {
+    @apply text-blue-400;
+}
+
+.status-badge.medium-status-badge > span svg {
+    @apply text-orange-400;
+}
+
 .status-badge[class*='4'] > span,
+.status-badge.scheduled-maintenance-badge > span,
 .status-badge.test-status-badge > span,
 .status-badge.warning-status-badge > span,
 .status-badge.preparing-status-badge > span,
@@ -88,6 +100,7 @@
     @apply text-gray-700;
 }
 
+.status-badge.operational-suggestion-status-badge > span,
 .status-badge.dispatched-status-badge > span,
 .status-badge.assigned-status-badge > span {
     @apply text-indigo-800 bg-indigo-100;

addon/styles/layout/utilities.css

@@ -704,7 +704,15 @@ body[data-theme='dark'] .contenteditable-placeholder:empty:before {
     border-bottom-width: 0px !important;
 }
 
-label.upload-avatar-label-overlay,
-.upload-avatar-label-overlay {
+.upload-avatar-overlay {
+    @apply relative hover:bg-gray-100 transition-all overflow-hidden;
+}
+
+.upload-avatar-overlay .upload-avatar-button-wrapper {
+    @apply absolute inset-0 flex items-center justify-center opacity-0 hover:opacity-100 transition-opacity bg-gray-600 bg-opacity-50;
+}
+
+.upload-avatar-overlay label.upload-avatar-label-overlay,
+.upload-avatar-overlay .upload-avatar-label-overlay {
     padding-left: 2rem;
-}
+}