Improvements to stat widget, fixes to sidebar toggle, and fixes on se…

…lect and model select component
fleetbase · May 14, 2024 · 9982685 · 9982685
1 parent 9899510
commit 9982685
Show file tree

Hide file tree

Showing 7 changed files with 46 additions and 79 deletions.
diff --git a/addon/components/model-select.hbs b/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}}

diff --git a/addon/components/model-select.js b/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:

diff --git a/addon/components/select.hbs b/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)}}

diff --git a/addon/components/select.js b/addon/components/select.js
@@ -1,28 +1,27 @@
 import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
 import { computed, action } from '@ember/object';
+import { isBlank } from '@ember/utils';
 
 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);

diff --git a/addon/components/stat-widget.hbs b/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>
diff --git a/addon/styles/components/sidebar-toggle.css b/addon/styles/components/sidebar-toggle.css
@@ -31,10 +31,12 @@
 .sidebar-toggle-button .cls-1 {
     fill: #fff;
 }
+
 .sidebar-toggle-button .cls-2 {
     fill: none;
     stroke-width: 18px;
 }
+
 .sidebar-toggle-button .cls-2,
 .sidebar-toggle-button .cls-3 {
     stroke: #fff;
@@ -44,3 +46,18 @@
 .sidebar-toggle-button .cls-3 {
     stroke-width: 13px;
 }
+
+body[data-theme="dark"] .sidebar-toggle-button-wrapper > .sidebar-toggle-button > svg > rect.cls-3 {
+    stroke: #111827;
+}
+
+body[data-theme="light"] .sidebar-toggle-button-wrapper > .sidebar-toggle-button > svg,
+body[data-theme="light"] .sidebar-toggle-button-wrapper > .sidebar-toggle-button > svg > rect {
+    fill: #374151;
+}
+
+body[data-theme="light"] .sidebar-toggle-button .cls-1,
+body[data-theme="light"] .sidebar-toggle-button .cls-2,
+body[data-theme="light"] .sidebar-toggle-button .cls-3 {
+    fill: #374151;
+}
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@fleetbase/ember-ui",
-    "version": "0.2.13",
+    "version": "0.2.14",
     "description": "Fleetbase UI provides all the interface components, helpers, services and utilities for building a Fleetbase extension into the Console.",
     "keywords": [
         "fleetbase-ui",