@fleetbase/fleetops-engine 0.2.9 → 0.3.0

package/addon/components/map-container/toolbar/zones-panel.js

@@ -2,30 +2,82 @@ import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
 import { inject as service } from '@ember/service';
 import { action } from '@ember/object';
-import { alias } from '@ember/object/computed';
+import { classify } from '@ember/string';
 import { calculateInPlacePosition } from 'ember-basic-dropdown/utils/calculate-position';
 
+/**
+ * @class MapContainerToolbarZonesPanelComponent
+ * @extends {Component}
+ * @memberof @fleetbase/fleetops-engine
+ */
 export default class MapContainerToolbarZonesPanelComponent extends Component {
+    /**
+     * Ember Data store service.
+     * @type {Service}
+     * @memberof MapContainerToolbarZonesPanelComponent
+     */
     @service store;
-    @service modalsManager;
-    @service notifications;
-    @service crud;
+
+    /**
+     * Service areas service.
+     * @type {Service}
+     * @memberof MapContainerToolbarZonesPanelComponent
+     */
     @service serviceAreas;
+
+    /**
+     * Application cache service.
+     * @type {Service}
+     * @memberof MapContainerToolbarZonesPanelComponent
+     */
     @service appCache;
 
+    /**
+     * Indicates if the component is in a loading state.
+     * @type {boolean}
+     * @memberof MapContainerToolbarZonesPanelComponent
+     */
     @tracked isLoading = false;
+
+    /**
+     * Holds the records for service areas.
+     * @type {Array}
+     * @memberof MapContainerToolbarZonesPanelComponent
+     */
     @tracked serviceAreaRecords = [];
-    @tracked editableLayers = [];
-    @tracked serviceAreaTypes = ['neighborhood', 'city', 'region', 'state', 'province', 'country', 'continent'];
-    @alias('args.map') leafletMap;
-    @alias('args.map.liveMap.activeServiceArea') activeServiceArea;
-    @alias('args.map.liveMap.activeFeatureGroup') activeFeatureGroup;
 
-    @action setupZonesPanel() {
+    /**
+     * Reference to the map instance.
+     * @type {L.Map}
+     * @memberof MapContainerToolbarZonesPanelComponent
+     */
+    @tracked map;
+
+    /**
+     * Reference to the live map component instance.
+     * @type {LiveMapComponent}
+     * @memberof MapContainerToolbarZonesPanelComponent
+     */
+    @tracked liveMap;
+
+    /**
+     * Class constructor.
+     * @memberof MapContainerToolbarZonesPanelComponent
+     */
+    constructor() {
+        super(...arguments);
+        this.map = this.args.map;
+        this.liveMap = this.args.liveMap;
         this.fetchServiceAreas();
-        this.serviceAreas.setMapInstance(this.leafletMap);
+        this.serviceAreas.setMapInstance(this.args.map);
     }
 
+    /**
+     * Calculate position for dropdown.
+     * @param {Element} trigger The triggering element
+     * @returns {Object} Position style object
+     * @memberof MapContainerToolbarZonesPanelComponent
+     */
     @action calculatePosition(trigger) {
         const position = calculateInPlacePosition(...arguments);
         const rect = trigger.getBoundingClientRect();
@@ -36,64 +88,41 @@ export default class MapContainerToolbarZonesPanelComponent extends Component {
         return position;
     }
 
-    @action onAction(actionName, dd, ...params) {
-        if (typeof dd?.actions?.close === 'function') {
-            dd.actions.close();
-        }
-
-        if (typeof this[actionName] === 'function') {
-            this[actionName](...params);
-        }
-
-        if (typeof this.args[actionName] === 'function') {
-            this.args[actionName](...params);
-        }
-
-        if (typeof this.args[`on${actionName?.toUpperCase()}`] === 'function') {
-            this.args[`on${actionName?.toUpperCase()}`](...params);
-        }
-    }
-
-    @action serviceAreaAction(actionName, dropdown, ...params) {
-        const { dd } = this.args;
-
-        if (typeof dd?.actions?.close === 'function') {
-            dd.actions.close();
-        }
-
-        if (typeof dropdown?.actions?.close === 'function') {
-            dropdown.actions.close();
-        }
-
-        if (typeof this.serviceAreas[actionName] === 'function') {
-            this.serviceAreas[actionName](...params);
-        }
-    }
-
-    @action liveMapAction(actionName, dropdown, ...params) {
-        const { dd } = this.args;
-
-        if (typeof dd?.actions?.close === 'function') {
-            dd.actions.close();
-        }
-
-        if (typeof dropdown?.actions?.close === 'function') {
-            dropdown.actions.close();
-        }
-
-        if (typeof this.leafletMap?.liveMap[actionName] === 'function') {
-            this.leafletMap?.liveMap[actionName](...params);
-        }
+    /**
+     * Generic callback trigger function.
+     * @param {string} callbackFn Callback function name
+     * @param {...any} params Parameters for the callback function
+     * @memberof MapContainerToolbarZonesPanelComponent
+     */
+    @action triggerCallback(callbackFn, ...params) {
+        const tryInvoke = (context, fnName) => {
+            if (context && typeof context[fnName] === 'function') {
+                context[fnName](...params);
+            }
+        };
+
+        tryInvoke(this, callbackFn);
+        tryInvoke(this.args, callbackFn);
+        tryInvoke(this.liveMap, callbackFn);
+        tryInvoke(this.serviceAreas, callbackFn);
+
+        // Additional check for event callback function in args
+        const eventCallbackFn = `on${classify(callbackFn)}`;
+        tryInvoke(this.args, eventCallbackFn);
     }
 
-    @action fetchServiceAreas() {
+    /**
+     * Fetch service areas and update state.
+     * @memberof MapContainerToolbarZonesPanelComponent
+     */
+    fetchServiceAreas() {
         this.isLoading = true;
 
         if (this.appCache.has('serviceAreas')) {
             this.serviceAreaRecords = this.appCache.getEmberData('serviceAreas', 'service-area');
         }
 
-        this.store
+        return this.store
             .query('service-area', { with: ['zones'] })
             .then((serviceAreaRecords) => {
                 this.serviceAreaRecords = serviceAreaRecords;

package/addon/components/map-container/toolbar.hbs

@@ -44,14 +44,19 @@
                 </Attach::Tooltip>
             </dd.Trigger>
             <dd.Content>
-                <MapContainer::Toolbar::ZonesPanel @dd={{dd}} @map={{@map}} @onPressCreateServiceArea={{@onPressCreateServiceArea}} />
+                <MapContainer::Toolbar::ZonesPanel @dd={{dd}} @liveMap={{@liveMap}} @map={{@map}} @onPressCreateServiceArea={{@onPressCreateServiceArea}} />
+            </dd.Content>
+        </BasicDropdown>
+        <BasicDropdown @horizontalPosition="right" @calculatePosition={{this.calculatePosition}} @renderInPlace={{true}} as |dd|>
+            <dd.Trigger class="toolbar-button">
+                <FaIcon @icon="eye" />
+                <Attach::Tooltip @class="clean" @animation="scale" @placement="right">
+                    <InputInfo @text="Visibility Controls" @iconClass="hidden" class="{{if dd.isOpen 'hidden'}} py-1 px-2 bg-gray-900 -mt-1" />
+                </Attach::Tooltip>
+            </dd.Trigger>
+            <dd.Content>
+                <MapContainer::Toolbar::VisibilityControlPanel @dd={{dd}} @liveMap={{@liveMap}} @map={{@map}} />
             </dd.Content>
         </BasicDropdown>
-        <button type="button" class="toolbar-button relative" {{on "click" (fn this.onAction "onPressDisplayPlaces")}}>
-            <FaIcon @icon="city" />
-            <Attach::Tooltip @class="clean" @animation="scale" @placement="right">
-                <InputInfo @text="Toggle Places" @iconClass="hidden" class="py-1 px-2 bg-gray-900 -mt-1" />
-            </Attach::Tooltip>
-        </button>
     </div>
 </MapContainer::ToolbarContainer>

package/addon/components/modals/vehicle-form.hbs

@@ -12,42 +12,42 @@
                             <label>
                                 Internal ID
                             </label>
-                            <Input @value={{@options.vehicle.internal_id}}  @type="text" class="w-full form-input" placeholder="Internal ID" />
+                            <Input @value={{@options.vehicle.internal_id}} @type="text" class="w-full form-input" placeholder="Internal ID" />
                         </div>
 
                         <div class="input-group mb-2">
                             <label>
                                 Plate Number
                             </label>
-                            <Input @value={{@options.vehicle.plate_number}}  @type="text" class="w-full form-input" placeholder="Plate Number" />
+                            <Input @value={{@options.vehicle.plate_number}} @type="text" class="w-full form-input" placeholder="Plate Number" />
                         </div>
 
                         <div class="input-group mb-2">
                             <label>
                                 VIN Number
                             </label>
-                            <Input @value={{@options.vehicle.vin}}  @type="text" class="w-full form-input" placeholder="VIN Number" />
+                            <Input @value={{@options.vehicle.vin}} @type="text" class="w-full form-input" placeholder="VIN Number" />
                         </div>
 
                         <div class="input-group mb-2">
                             <label>
                                 Make
                             </label>
-                            <Input @value={{@options.vehicle.make}}  @type="text" class="w-full form-input" placeholder="Vehicle Make" />
+                            <Input @value={{@options.vehicle.make}} @type="text" class="w-full form-input" placeholder="Vehicle Make" />
                         </div>
 
                         <div class="input-group mb-2">
                             <label>
                                 Model
                             </label>
-                            <Input @value={{@options.vehicle.model}}  @type="text" class="w-full form-input" placeholder="Vehicle Model" />
+                            <Input @value={{@options.vehicle.model}} @type="text" class="w-full form-input" placeholder="Vehicle Model" />
                         </div>
 
                         <div class="input-group mb-2">
                             <label>
                                 Year
                             </label>
-                            <Input @value={{@options.vehicle.year}}  @type="text" class="w-full form-input" placeholder="Vehicle Year" />
+                            <Input @value={{@options.vehicle.year}} @type="text" class="w-full form-input" placeholder="Vehicle Year" />
                         </div>
 
                         <div class="input-group mb-2">
@@ -65,8 +65,8 @@
                     <div class="grid grid-cols-1 gap-4 lg:grid-cols-2 lg:gap-2">
                         <div class="input-group mb-2">
                             <InputLabel @labelText="Select map avatar" @helpText="Select an avatar to be used for rendering on maps when using geolocation tracking features." />
-                            <FetchSelect class="w-60" @placeholder="Select avatar" @path="vehicles/avatars" @value={{@options.vehicle.avatar_url}} @onSelect={{fn (mut @options.vehicle.avatar_url)}} as |option key|>
-                                {{titleize (humanize key)}}
+                            <FetchSelect @wrapperClass="w-60" @placeholder="Select avatar" @endpoint="vehicles/avatars" @selected={{this.vehicle.avatar_url}} @optionValue="value" @onChange={{fn (mut this.vehicle.avatar_url)}} as |option|>
+                                {{titleize (humanize option.key)}}
                             </FetchSelect>
                         </div>
                         <div>
@@ -81,77 +81,77 @@
                             <label>
                                 0 To 100 kph
                             </label>
-                            <Input @value={{@options.vehicle.model_0_to_100_kph}}  @type="text" class="w-full form-input" placeholder="0 To 100 kph" />
+                            <Input @value={{@options.vehicle.model_0_to_100_kph}} @type="text" class="w-full form-input" placeholder="0 To 100 kph" />
                         </div>
 
                         <div class="input-group mb-2">
                             <label>
                                 Body
                             </label>
-                            <Input @value={{@options.vehicle.model_body}}  @type="text" class="w-full form-input" placeholder="Vehicle Body Type" />
+                            <Input @value={{@options.vehicle.model_body}} @type="text" class="w-full form-input" placeholder="Vehicle Body Type" />
                         </div>
 
                         <div class="input-group mb-2">
                             <label>
                                 Doors
                             </label>
-                            <Input @value={{@options.vehicle.model_doors}}  @type="text" class="w-full form-input" placeholder="Number of Doors" />
+                            <Input @value={{@options.vehicle.model_doors}} @type="text" class="w-full form-input" placeholder="Number of Doors" />
                         </div>
 
                         <div class="input-group mb-2">
                             <label>
                                 Drive
                             </label>
-                            <Input @value={{@options.vehicle.model_drive}}  @type="text" class="w-full form-input" placeholder="Vehicle Drive Type" />
+                            <Input @value={{@options.vehicle.model_drive}} @type="text" class="w-full form-input" placeholder="Vehicle Drive Type" />
                         </div>
 
                         <div class="input-group mb-2">
                             <label>
                                 Length (mm)
                             </label>
-                            <Input @value={{@options.vehicle.model_length_mm}}  @type="text" class="w-full form-input" placeholder="Vehicle Length (mm)" />
+                            <Input @value={{@options.vehicle.model_length_mm}} @type="text" class="w-full form-input" placeholder="Vehicle Length (mm)" />
                         </div>
 
                         <div class="input-group mb-2">
                             <label>
                                 Seats
                             </label>
-                            <Input @value={{@options.vehicle.model_seats}}  @type="text" class="w-full form-input" placeholder="Number of Seats" />
+                            <Input @value={{@options.vehicle.model_seats}} @type="text" class="w-full form-input" placeholder="Number of Seats" />
                         </div>
 
                         <div class="input-group mb-2">
                             <label>
                                 Top Speed (kph)
                             </label>
-                            <Input @value={{@options.vehicle.model_top_speed_kph}}  @type="text" class="w-full form-input" placeholder="Vehicle Top Speed (kph)" />
+                            <Input @value={{@options.vehicle.model_top_speed_kph}} @type="text" class="w-full form-input" placeholder="Vehicle Top Speed (kph)" />
                         </div>
 
                         <div class="input-group mb-2">
                             <label>
                                 Transmission Type
                             </label>
-                            <Input @value={{@options.vehicle.model_transmission_type}}  @type="text" class="w-full form-input" placeholder=" Vehicle Transmission Type" />
+                            <Input @value={{@options.vehicle.model_transmission_type}} @type="text" class="w-full form-input" placeholder=" Vehicle Transmission Type" />
                         </div>
 
                         <div class="input-group mb-2">
                             <label>
                                 Weight (kg)
                             </label>
-                            <Input @value={{@options.vehicle.model_weight_kg}}  @type="text" class="w-full form-input" placeholder="Vehicle Weight (kg)" />
+                            <Input @value={{@options.vehicle.model_weight_kg}} @type="text" class="w-full form-input" placeholder="Vehicle Weight (kg)" />
                         </div>
 
                         <div class="input-group mb-2">
                             <label>
                                 Wheelbase (mm)
                             </label>
-                            <Input @value={{@options.vehicle.model_wheelbase_mm}}  @type="text" class="w-full form-input" placeholder="Vehicle Wheelbase Length (mm)" />
+                            <Input @value={{@options.vehicle.model_wheelbase_mm}} @type="text" class="w-full form-input" placeholder="Vehicle Wheelbase Length (mm)" />
                         </div>
 
                         <div class="input-group mb-2">
                             <label>
                                 Width (mm)
                             </label>
-                            <Input @value={{@options.vehicle.model_width_mm}}  @type="text" class="w-full form-input" placeholder="Vehicle Width (mm)" />
+                            <Input @value={{@options.vehicle.model_width_mm}} @type="text" class="w-full form-input" placeholder="Vehicle Width (mm)" />
                         </div>
                     </div>
                 </ContentPanel>
@@ -162,77 +162,77 @@
                             <label>
                                 Engine Bore (mm)
                             </label>
-                            <Input @value={{@options.vehicle.model_engine_bore_mm}}  @type="text" class="w-full form-input" placeholder="Engine Bore (mm)" />
+                            <Input @value={{@options.vehicle.model_engine_bore_mm}} @type="text" class="w-full form-input" placeholder="Engine Bore (mm)" />
                         </div>
 
                         <div class="input-group mb-2">
                             <label>
                                 CC
                             </label>
-                            <Input @value={{@options.vehicle.model_engine_cc}}  @type="text" class="w-full form-input" placeholder="Engine CC" />
+                            <Input @value={{@options.vehicle.model_engine_cc}} @type="text" class="w-full form-input" placeholder="Engine CC" />
                         </div>
 
                         <div class="input-group mb-2">
                             <label>
                                 Compression
                             </label>
-                            <Input @value={{@options.vehicle.model_engine_compression}}  @type="text" class="w-full form-input" placeholder=" Engine Compression" />
+                            <Input @value={{@options.vehicle.model_engine_compression}} @type="text" class="w-full form-input" placeholder=" Engine Compression" />
                         </div>
 
                         <div class="input-group mb-2">
                             <label>
                                 Cylinders
                             </label>
-                            <Input @value={{@options.vehicle.model_engine_cyl}}  @type="text" class="w-full form-input" placeholder="Number of Cylinders" />
+                            <Input @value={{@options.vehicle.model_engine_cyl}} @type="text" class="w-full form-input" placeholder="Number of Cylinders" />
                         </div>
 
                         <div class="input-group mb-2">
                             <label>
                                 Position
                             </label>
-                            <Input @value={{@options.vehicle.model_engine_position}}  @type="text" class="w-full form-input" placeholder="Engine Position" />
+                            <Input @value={{@options.vehicle.model_engine_position}} @type="text" class="w-full form-input" placeholder="Engine Position" />
                         </div>
 
                         <div class="input-group mb-2">
                             <label>
                                 Power (ps)
                             </label>
-                            <Input @value={{@options.vehicle.model_engine_power_ps}}  @type="text" class="w-full form-input" placeholder="Engine Power (ps)" />
+                            <Input @value={{@options.vehicle.model_engine_power_ps}} @type="text" class="w-full form-input" placeholder="Engine Power (ps)" />
                         </div>
 
                         <div class="input-group mb-2">
                             <label>
                                 Power (rpm)
                             </label>
-                            <Input @value={{@options.vehicle.model_engine_power_rpm}}  @type="text" class="w-full form-input" placeholder="Engine Power (rpm)" />
+                            <Input @value={{@options.vehicle.model_engine_power_rpm}} @type="text" class="w-full form-input" placeholder="Engine Power (rpm)" />
                         </div>
 
                         <div class="input-group mb-2">
                             <label>
                                 Stroke (mm)
                             </label>
-                            <Input @value={{@options.vehicle.model_engine_stroke_mm}}  @type="text" class="w-full form-input" placeholder="Stroke Length (mm)" />
+                            <Input @value={{@options.vehicle.model_engine_stroke_mm}} @type="text" class="w-full form-input" placeholder="Stroke Length (mm)" />
                         </div>
 
                         <div class="input-group mb-2">
                             <label>
                                 Torque (nm)
                             </label>
-                            <Input @value={{@options.vehicle.model_engine_torque_nm}}  @type="text" class="w-full form-input" placeholder="Engine Torque (nm)" />
+                            <Input @value={{@options.vehicle.model_engine_torque_nm}} @type="text" class="w-full form-input" placeholder="Engine Torque (nm)" />
                         </div>
 
                         <div class="input-group mb-2">
                             <label>
                                 Torque (rpm)
                             </label>
-                            <Input @value={{@options.vehicle.model_engine_torque_rpm}}  @type="text" class="w-full form-input" placeholder="Engine Torque (rpm)" />
+                            <Input @value={{@options.vehicle.model_engine_torque_rpm}} @type="text" class="w-full form-input" placeholder="Engine Torque (rpm)" />
                         </div>
 
                         <div class="input-group mb-2">
                             <label>
                                 Valves per Cylinder
                             </label>
-                            <Input @value={{@options.vehicle.model_engine_valves_per_cyl}}  @type="text" class="w-full form-input" placeholder="Valves per Cylinder" />
+                            <Input @value={{@options.vehicle.model_engine_valves_per_cyl}} @type="text" class="w-full form-input" placeholder="Valves per Cylinder" />
                         </div>
                     </div>
                 </ContentPanel>
@@ -243,35 +243,35 @@
                             <label>
                                 Fuel
                             </label>
-                            <Input @value={{@options.vehicle.model_engine_fuel}}  @type="text" class="w-full form-input" placeholder="Fuel Type" />
+                            <Input @value={{@options.vehicle.model_engine_fuel}} @type="text" class="w-full form-input" placeholder="Fuel Type" />
                         </div>
 
                         <div class="input-group mb-2">
                             <label>
                                 Fuel Cap (L)
                             </label>
-                            <Input @value={{@options.vehicle.model_fuel_cap_l}}  @type="text" class="w-full form-input" placeholder="Fuel Cap Volume (L)" />
+                            <Input @value={{@options.vehicle.model_fuel_cap_l}} @type="text" class="w-full form-input" placeholder="Fuel Cap Volume (L)" />
                         </div>
 
                         <div class="input-group mb-2">
                             <label>
                                 Liters Per km City
                             </label>
-                            <Input @value={{@options.vehicle.model_lkm_city}}  @type="text" class="w-full form-input" placeholder="Liters Per km City" />
+                            <Input @value={{@options.vehicle.model_lkm_city}} @type="text" class="w-full form-input" placeholder="Liters Per km City" />
                         </div>
 
                         <div class="input-group mb-2">
                             <label>
                                 Liters Per km Highway
                             </label>
-                            <Input @value={{@options.vehicle.model_lkm_hwy}}  @type="text" class="w-full form-input" placeholder="Liters Per km Highway" />
+                            <Input @value={{@options.vehicle.model_lkm_hwy}} @type="text" class="w-full form-input" placeholder="Liters Per km Highway" />
                         </div>
 
                         <div class="input-group mb-2">
                             <label>
                                 Liters Per km Mixed
                             </label>
-                            <Input @value={{@options.vehicle.model_lkm_mixed}}  @type="text" class="w-full form-input" placeholder="Liters Per km Mixed" />
+                            <Input @value={{@options.vehicle.model_lkm_mixed}} @type="text" class="w-full form-input" placeholder="Liters Per km Mixed" />
                         </div>
                     </div>
                 </ContentPanel>

package/addon/components/vehicle-form-panel.hbs

@@ -1,16 +1,16 @@
-<Overlay @position="right" @noBackdrop={{true}} @fullHeight={{true}} @isResizeble={{or this.isResizable @isResizable}} @width={{or this.width @width "600px"}}>
+<Overlay @onLoad={{this.setOverlayContext}} @position="right" @noBackdrop={{true}} @fullHeight={{true}} @isResizeble={{or this.isResizable @isResizable}} @width={{or this.width @width "600px"}}>
     <Overlay::Header @hideLeftSection={{true}} @actionsWrapperClass="flex-1 flex-col py-3" class="h-auto-i min-h-[127px]">
         <div class="flex flex-row items-center justify-between w-full mb-4">
             <div class="flex flex-1 space-x-2">
                 {{#if this.vehicle.id}}
-                    <Button @type="default" @icon="car" @helpText="View vehicle details" @onClick={{this.viewDetails}} />
+                    <Button @type="default" @icon="car" @helpText="View vehicle details" @onClick={{this.onViewDetails}} @disabled={{this.isLoading}} />
                 {{/if}}
             </div>
             <div class="flex flex-1 justify-end">
                 <div class="mr-2">
-                    <Button @icon={{if this.vehicle.id "save" "check"}} @type="primary" @text={{if this.vehicle.id "Save Vehicle" "Create Vehicle"}} @onClick={{this.save}} />
+                    <Button @icon={{if this.vehicle.id "save" "check"}} @type="primary" @text={{if this.vehicle.id "Save Vehicle" "Create Vehicle"}} @onClick={{this.save}} @isLoading={{this.isLoading}} />
                 </div>
-                <Button @type="default" @icon="times" @helpText={{if this.vehicle.id "Cancel edit vehicle" "Cancel new vehicle"}} @onClick={{@onPressCancel}} />
+                <Button @type="default" @icon="times" @helpText={{if this.vehicle.id "Cancel edit vehicle" "Cancel new vehicle"}} @onClick={{this.onPressCancel}} @disabled={{this.isLoading}} />
             </div>
         </div>
         <div class="flex flex-row justify-between w-full">
@@ -116,9 +116,8 @@
                 <div class="grid grid-cols-1 gap-4 lg:grid-cols-2 lg:gap-2">
                     <div class="input-group mb-2">
                         <InputLabel @labelText="Select map avatar" @helpText="Select an avatar to be used for rendering on maps when using geolocation tracking features." />
-                        <FetchSelect class="w-60" @placeholder="Select avatar" @path="vehicles/avatars" @value={{this.vehicle.avatar_url}} @onSelect={{fn (mut
-                                this.vehicle.avatar_url)}} as |option key|>
-                            {{titleize (humanize key)}}
+                        <FetchSelect @wrapperClass="w-60" @placeholder="Select avatar" @endpoint="vehicles/avatars" @selected={{this.vehicle.avatar_url}} @optionValue="value" @onChange={{fn (mut this.vehicle.avatar_url)}} as |option|>
+                            {{titleize (humanize option.key)}}
                         </FetchSelect>
                     </div>
                     <div>