Skip to content

Commit

Permalink
Merge pull request #71 from fleetbase/dev-v0.2.30
Browse files Browse the repository at this point in the history
improved leaflet loading service, fixed helpers, improved overlay cal…
  • Loading branch information
roncodes authored Oct 1, 2024
2 parents f0e91e7 + 560c92e commit bcfa0cd
Show file tree
Hide file tree
Showing 22 changed files with 327 additions and 212 deletions.
19 changes: 12 additions & 7 deletions addon/components/badge.hbs
Original file line number Diff line number Diff line change
@@ -1,16 +1,21 @@
<div class="status-badge {{safe-dasherize (or @type @status)}}-status-badge" ...attributes>
<span class="inline-flex items-center {{unless @roundedFull 'px-2 py-0.5 rounded' 'badge-rounded-full'}} text-xs font-medium leading-4 whitespace-no-wrap {{@spanClass}}">
<svg class="{{unless @hideText '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>
</svg>
<div class="status-badge {{safe-dasherize (or @type @status "info")}}-status-badge {{@wrapperClass}}" ...attributes>
<span
class="status-badge-inner-wrap inline-flex items-center
{{unless @roundedFull 'px-2 py-0.5 rounded' 'badge-rounded-full'}}
text-xs font-medium leading-4 whitespace-no-wrap
{{@spanClass}}"
>
{{#unless (or @hideStatusDot @hideIcon)}}
<FaIcon @icon={{or @icon "circle"}} @size={{or @size "xs"}} @prefix={{or @iconPrefix "fas"}} class="{{@iconClass}} {{unless @hideText 'mr-1.5'}}" />
{{/unless}}
{{#if (has-block)}}
{{yield @status}}
{{else}}
{{#unless @hideText}}
{{#if @disableHumanize}}
{{@status}}
{{or @text @status}}
{{else}}
{{safe-humanize @status}}
{{safe-humanize (or @text @status)}}
{{/if}}
{{/unless}}
{{/if}}
Expand Down
4 changes: 2 additions & 2 deletions addon/components/checkbox.js
Original file line number Diff line number Diff line change
Expand Up @@ -63,9 +63,9 @@ export default class CheckboxComponent extends Component {
* @param {*} { permission = null }
* @memberof ButtonComponent
*/
constructor(owner, { value = false, permission = null, disabled = false, visible = true }) {
constructor(owner, { value = false, checked = null, permission = null, disabled = false, visible = true }) {
super(...arguments);
this.checked = value;
this.checked = checked === null ? value : checked;
this.permissionRequired = permission;
this.visible = visible;
this.disabled = disabled;
Expand Down
16 changes: 8 additions & 8 deletions addon/components/info-block.hbs
Original file line number Diff line number Diff line change
@@ -1,17 +1,17 @@
<div class="ui-input-info-block rounded-md" ...attributes>
<div class="flex">
<div class="flex-shrink-0">
<FaIcon @icon={{or @icon "info-circle"}} />
<div class="ui-input-info-block {{or @type 'info'}} {{or @size "base"}}" ...attributes>
<div class="ui-input-info-block-inner flex {{@innerWrapperClass}}">
<div class="ui-input-info-block-icon-container flex-shrink-0 {{@iconWrapperClass}}">
<FaIcon @icon={{or @icon "info-circle"}} @size={{or @iconSize "md"}} @prefix={{or @iconPrefix "fas"}} class={{@iconClass}} />
</div>
<div class="ml-3 flex-1 md:flex md:justify-between">
<div class="ui-input-info-block-text text-sm subpixel-antialiased {{@blockClass}}">
<div class="ui-input-info-block-yield-container ml-3 flex-1 md:flex md:justify-between {{@blockContainerClass}}">
<div class="ui-input-info-block-text subpixel-antialiased {{@blockClass}}">
{{#if (has-block)}}
{{yield}}
{{else}}
<span class={{@textClass}}>{{@text}}</span>
{{#if @exampleText}}
<div>
<code class="mt-3 break-text subpixel-antialiased text-xs font-mono">{{@exampleText}}</code>
<div class={{@exampleTextWrapperClass}}>
<code class="mt-3 break-text subpixel-antialiased text-xs font-mono {{@exampleTextClass}}">{{@exampleText}}</code>
</div>
{{/if}}
{{/if}}
Expand Down
14 changes: 13 additions & 1 deletion addon/components/layout/header.js
Original file line number Diff line number Diff line change
Expand Up @@ -60,7 +60,11 @@ export default class LayoutHeaderComponent extends Component {
// Prepare menuItems
const menuItems = [
{
text: [this.currentUser.email, this.currentUser.companyName],
text: [
this.currentUser.companyName,
this.currentUser.email,
{ component: 'badge', disableHumanize: true, text: this.currentUser.roleName, status: 'info', hideStatusDot: false, wrapperClass: 'mt-1' },
],
class: 'flex flex-row items-center px-3 rounded-md text-gray-800 text-sm dark:text-gray-300 leading-1',
wrapperClass: 'next-dd-session-user-wrapper',
},
Expand Down Expand Up @@ -193,6 +197,14 @@ export default class LayoutHeaderComponent extends Component {
mergeUserMenuItems(userMenuItems = []) {
// Prepare menu items
const menuItems = [
{
text: [this.currentUser.name, { component: 'badge', disableHumanize: true, text: this.currentUser.roleName, status: 'info', hideStatusDot: false, wrapperClass: 'mt-1' }],
class: 'flex flex-row items-center px-3 rounded-md text-gray-800 text-sm dark:text-gray-300 leading-1',
wrapperClass: 'next-dd-session-user-wrapper',
},
{
seperator: true,
},
{
id: 'view-profile-user-nav-item',
wrapperClass: 'view-profile-user-nav-item',
Expand Down
65 changes: 57 additions & 8 deletions addon/components/layout/header/dropdown/item.hbs
Original file line number Diff line number Diff line change
Expand Up @@ -4,12 +4,49 @@
<FaIcon @icon={{@item.icon}} @size={{or @item.iconSize "sm"}} class={{or @item.iconClass "mr-2"}} />
{{/if}}
<div class="inline-flex flex-col {{@item.inlineClass}}">
{{#if (is-array @item.text)}}
{{#each @item.text as |line|}}
<div class="{{@item.class}}">{{line}}</div>
{{/each}}
{{#if @item.intl}}
{{#if (is-array @item.intl)}}
{{#each @item.intl as |intl|}}
<div class="{{@item.class}}">{{t intl}}</div>
{{/each}}
{{else}}
<div class="{{@item.class}}">{{t @item.intl}}</div>
{{/if}}
{{else}}
<div class="{{@item.class}}">{{@item.text}}</div>
{{#if (is-array @item.text)}}
{{#each @item.text as |line|}}
{{#if (is-object line)}}
<div class="{{@item.class}}">
{{#if line.component}}
{{component
line.component
item=line
text=line.text
label=(or line.label line.text)
status=(or line.status line.text)
type=line.type
onClick=line.onClick
hideStatusDot=line.hideStatusDot
disableHumanize=line.disableHumanize
class=line.class
wrapperClass=line.wrapperClass
spanClass=line.spanClass
textClass=line.textClass
icon=line.icon
iconClass=line.iconClass
iconSize=line.iconSize
}}
{{else}}
<div class="{{line.class}}">{{line.text}}</div>
{{/if}}
</div>
{{else}}
<div class="{{@item.class}}">{{line}}</div>
{{/if}}
{{/each}}
{{else}}
<div class="{{@item.class}}">{{@item.text}}</div>
{{/if}}
{{/if}}
</div>
</div>
Expand All @@ -21,7 +58,11 @@
{{#if @item.icon}}
<FaIcon @icon={{@item.icon}} @size={{or @item.iconSize "sm"}} class={{or @item.iconClass "mr-2"}} />
{{/if}}
<span>{{@item.text}}</span>
{{#if @item.intl}}
<span>{{t @item.intl}}</span>
{{else}}
<span>{{@item.text}}</span>
{{/if}}
</LinkTo>
</div>
{{/if}}
Expand All @@ -38,7 +79,11 @@
{{#if @item.icon}}
<FaIcon @icon={{@item.icon}} @size={{or @item.iconSize "sm"}} class={{or @item.iconClass "mr-2"}} />
{{/if}}
<span>{{@item.text}}</span>
{{#if @item.intl}}
<span>{{t @item.intl}}</span>
{{else}}
<span>{{@item.text}}</span>
{{/if}}
</a>
</div>
{{/if}}
Expand All @@ -49,7 +94,11 @@
{{#if @item.icon}}
<FaIcon @icon={{@item.icon}} @size={{or @item.iconSize "sm"}} class={{or @item.iconClass "mr-2"}} />
{{/if}}
<span>{{@item.text}}</span>
{{#if @item.intl}}
<span>{{t @item.intl}}</span>
{{else}}
<span>{{@item.text}}</span>
{{/if}}
</a>
</div>
{{/if}}
Expand Down
36 changes: 20 additions & 16 deletions addon/components/locale-selector-tray.hbs
Original file line number Diff line number Diff line change
Expand Up @@ -16,23 +16,27 @@
</dd.Trigger>
<dd.Content class="{{@contentClass}} locale-selector-tray-content {{if (media 'isMobile') 'is-mobile'}}">
<div class="next-dd-menu {{@dropdownMenuClass}} {{if dd.isOpen 'is-open'}}">
{{#each-in this.availableLocales as |key country|}}
<div class="px-1">
<a href="javascript:;" class="next-dd-item" {{on "click" (fn this.changeLocale key)}}>
<div class="flex flex-row items-center justify-between w-full">
<div class="flex-1">
<span class="mr-1">{{country.emoji}}</span>
<span>{{country.language}}</span>
</div>
{{#if (eq this.currentLocale key)}}
<div>
<FaIcon @icon="check" class="text-green-400" />
{{#if this.loadAvailableCountries.isRunning}}
<Spinner />
{{else}}
{{#each-in this.availableLocales as |key country|}}
<div class="px-1">
<a href="javascript:;" class="next-dd-item" {{on "click" (fn this.changeLocale key)}}>
<div class="flex flex-row items-center justify-between w-full">
<div class="flex-1">
<span class="mr-1">{{country.emoji}}</span>
<span>{{country.language}}</span>
</div>
{{/if}}
</div>
</a>
</div>
{{/each-in}}
{{#if (eq this.currentLocale key)}}
<div>
<FaIcon @icon="check" class="text-green-400" />
</div>
{{/if}}
</div>
</a>
</div>
{{/each-in}}
{{/if}}
</div>
</dd.Content>
</BasicDropdown>
Expand Down
13 changes: 11 additions & 2 deletions addon/components/locale-selector-tray.js
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import Component from '@glimmer/component';
import { tracked } from '@glimmer/tracking';
import { inject as service } from '@ember/service';
import { action } from '@ember/object';
import { debug } from '@ember/debug';
import { task } from 'ember-concurrency-decorators';
import calculatePosition from 'ember-basic-dropdown/utils/calculate-position';

Expand Down Expand Up @@ -94,8 +95,16 @@ export default class LocaleSelectorTrayComponent extends Component {
* @generator
*/
@task *loadAvailableCountries() {
this.countries = yield this.fetch.get('lookup/countries', { columns: ['name', 'cca2', 'flag', 'emoji', 'languages'] });
this.availableLocales = this._createAvailableLocaleMap();
try {
this.countries = yield this.fetch.get(
'lookup/countries',
{ columns: ['name', 'cca2', 'flag', 'emoji', 'languages'] },
{ fromCache: true, expirationInterval: 1, expirationIntervalUnit: 'week' }
);
this.availableLocales = this._createAvailableLocaleMap();
} catch (error) {
debug(`Locale Error: ${error.message}`);
}
}

/**
Expand Down
10 changes: 10 additions & 0 deletions addon/components/overlay.js
Original file line number Diff line number Diff line change
Expand Up @@ -56,6 +56,16 @@ export default class OverlayComponent extends Component {
@action toggle() {
this.isOpen = !this.isOpen;

if (this.isOpen) {
if (typeof this.args.onOpen === 'function') {
this.args.onOpen(this.context);
}
} else {
if (typeof this.args.onClose === 'function') {
this.args.onClose(this.context);
}
}

if (typeof this.args.onToggle === 'function') {
this.args.onToggle(this.context);
}
Expand Down
2 changes: 1 addition & 1 deletion addon/components/timeline/item.hbs
Original file line number Diff line number Diff line change
@@ -1 +1 @@
<div class="timeline-item {{if this.isActive 'active animate-pulse'}}" ...attributes>{{yield @activity @context}}</div>
<div class="timeline-item {{if this.isActive 'active'}}" ...attributes>{{yield @activity @context}}</div>
2 changes: 1 addition & 1 deletion addon/components/toggle.hbs
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
{{#if this.visible}}
<div class="flex items-center {{@wrapperClass}}" {{did-update this.onChange @isToggled}}>
<div class="flex items-center {{@wrapperClass}}" {{did-update this.onChange @isToggled @disabled}}>
<span
role="checkbox"
tabindex="0"
Expand Down
5 changes: 4 additions & 1 deletion addon/components/toggle.js
Original file line number Diff line number Diff line change
Expand Up @@ -95,7 +95,10 @@ export default class ToggleComponent extends Component {
* @param {Array} [isToggled]
* @memberof ToggleComponent
*/
@action onChange(el, [isToggled]) {
@action onChange(el, [isToggled, disabled = null]) {
this.isToggled = isToggled === true;
if (disabled !== null) {
this.disabled = disabled;
}
}
}
5 changes: 3 additions & 2 deletions addon/helpers/is-not-empty.js
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import { helper } from '@ember/component/helper';
import { isEmpty } from '@ember/utils';

export default helper(function isNotEmpty(positional /*, named*/) {
return positional;
export default helper(function isNotEmpty([subject]) {
return !isEmpty(subject);
});
5 changes: 2 additions & 3 deletions addon/helpers/is-object.js
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
import { helper } from '@ember/component/helper';
import { isArray } from '@ember/array';

export default helper(function isObject([object]) {
return object !== null && typeof object === 'object' && !isArray(object);
export default helper(function isObject([obj]) {
return obj && typeof obj === 'object' && Object.prototype.toString.call(obj) === '[object Object]';
});
34 changes: 34 additions & 0 deletions addon/modifiers/set-max-height.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
import { modifier } from 'ember-modifier';
import numbersOnly from '../utils/numbers-only';

export default modifier(function setMaxHeight(element, [height]) {
if (height === undefined || height === null) {
return;
}

let heightValue = height;
let unit = '';

// Check if height is a string with a unit
if (typeof height === 'string') {
const match = height.match(/^(\d+(?:\.\d+)?)(\D+)?$/);
if (match !== null) {
heightValue = match[1];
unit = match[2] || '';
}
}

// Convert the height value to pixels
if (unit === 'em') {
heightValue *= 16; // 1em = 16px
} else if (unit === 'rem') {
heightValue *= 16; // 1rem = 16px (assuming default font size of 16px)
} else if (unit === 'pt') {
heightValue *= 1.33; // 1pt = 1.33px (assuming 96dpi)
} else if (unit === 'pc') {
heightValue *= 16; // 1pc = 16px (assuming 12pt = 16px)
}

// Set the max height of the element by the value
element.style.maxHeight = `${numbersOnly(heightValue)}px`;
});
Loading

0 comments on commit bcfa0cd

Please sign in to comment.