@fleetbase/fleetops-engine 0.3.1 → 0.3.2

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

@@ -0,0 +1,82 @@
+<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.contact.id}}
+                    <Button @type="default" @icon="id-card" @helpText="View contact details" @onClick={{this.onViewDetails}} />
+                {{/if}}
+            </div>
+            <div class="flex flex-1 justify-end">
+                <div class="mr-2">
+                    <Button @icon={{if this.contact.id "save" "check"}} @type="primary" @text={{if this.contact.id "Save Contact" "Create Contact"}} @onClick={{this.save}} />
+                </div>
+                <Button @type="default" @icon="times" @helpText={{if this.contact.id "Cancel edit contact" "Cancel new contact"}} @onClick={{this.onPressCancel}} />
+            </div>
+        </div>
+        <div class="flex flex-row justify-between w-full">
+            <div class="flex flex-col flex-1 w-3/4">
+                <div class="flex flex-row">
+                    <div class="w-14">
+                        <div class="w-12 h-12 flex items-center justify-start relative hover:bg-gray-100 transition-all rounded-lg overflow-hidden">
+                            <img src={{this.contact.photo_url}} alt={{this.contact.name}} height="48" width="48" class="h-12 w-12 rounded-lg shadow-sm" />
+                            <Attach::Tooltip @class="clean" @animation="scale" @placement="top">
+                                <InputInfo @text={{this.contact.public_id}} />
+                            </Attach::Tooltip>
+                            <div class="absolute inset-0 flex items-center justify-center opacity-0 hover:opacity-100 transition-opacity bg-gray-600 bg-opacity-50 rounded-lg">
+                                <UploadButton @name="photos" @accept="image/*" @onFileAdded={{this.onUploadNewPhoto}} @icon="upload" @hideButtonText={{true}} @labelClass="upload-avatar-label-overlay" class="w-12 btn-reset" />
+                            </div>
+                        </div>
+                    </div>
+                    <div class="flex flex-col">
+                        <h1 class="text-gray-900 dark:text-white text-2xl">
+                            {{#if this.contact.id}}
+                                {{this.contact.name}}
+                            {{else}}
+                                {{#if this.contact.name}}
+                                    {{this.contact.name}}
+                                {{else}}
+                                    <span>New Contact</span>
+                                {{/if}}
+                            {{/if}}
+                        </h1>
+                        <div class="-mt-1">
+                            <div class="flex flex-row items-center">
+                                <span class="text-sm dark:text-blue-400 text-blue-600">{{n-a this.contact.title (smart-humanize this.contact.type)}}</span>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="flex justify-end w-1/4">
+                <Badge @status={{this.contact.public_id}} @type="info" @hideStatusDot={{true}} />
+            </div>
+        </div>
+    </Overlay::Header>
+
+    <Overlay::Body @wrapperClass="new-service-rate-overlay-body px-4 pt-4" @increaseInnerBodyHeightBy={{700}}>
+        <div class="grid grid-cols-1 text-xs dark:text-gray-100">
+            <InputGroup @name="Name">
+                <Input @value={{this.contact.name}} @type="text" class="w-full form-input" placeholder="Name" />
+            </InputGroup>
+            <InputGroup @name="Title">
+                <Input @value={{this.contact.title}} @type="text" class="w-full form-input" placeholder="Title" />
+            </InputGroup>
+            <InputGroup @name="Internal ID">
+                <Input @value={{this.contact.internal_id}} @type="text" class="w-full form-input" placeholder="Internal ID" />
+            </InputGroup>
+            <InputGroup @name="Email">
+                <Input @value={{this.contact.email}} @type="text" class="w-full form-input" placeholder="Email" />
+            </InputGroup>
+            <InputGroup @name="Phone">
+                <PhoneInput @value={{this.contact.phone}} @onInput={{fn (mut this.contact.phone)}} class="form-input w-full" />
+            </InputGroup>
+            <InputGroup @name="Type">
+                <div class="fleetbase-model-select fleetbase-power-select ember-model-select">
+                    <PowerSelect @options={{this.contactTypeOptions}} @selected={{this.contact.type}} @onChange={{fn (mut this.contact.type)}} @placeholder="Select contact type" @triggerClass="form-select form-input" as |type|>
+                        {{smart-humanize type}}
+                    </PowerSelect>
+                </div>
+            </InputGroup>
+        </div>
+    </Overlay::Body>
+</Overlay>

package/addon/components/contact-form-panel.js

@@ -0,0 +1,195 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { inject as service } from '@ember/service';
+import { action } from '@ember/object';
+import contextComponentCallback from '../utils/context-component-callback';
+import applyContextComponentArguments from '../utils/apply-context-component-arguments';
+
+export default class ContactFormPanelComponent extends Component {
+    /**
+     * @service store
+     */
+    @service store;
+
+    /**
+     * @service fetch
+     */
+    @service fetch;
+
+    /**
+     * @service currentUser
+     */
+    @service currentUser;
+
+    /**
+     * @service notifications
+     */
+    @service notifications;
+
+    /**
+     * @service hostRouter
+     */
+    @service hostRouter;
+
+    /**
+     * @service loader
+     */
+    @service loader;
+
+    /**
+     * @service contextPanel
+     */
+    @service contextPanel;
+
+    /**
+     * Overlay context.
+     * @type {any}
+     */
+    @tracked context;
+
+    /**
+     * Indicates whether the component is in a loading state.
+     * @type {boolean}
+     */
+    @tracked isLoading = false;
+
+    /**
+     * All possible contact types.
+     *
+     * @var {String}
+     */
+    @tracked contactTypeOptions = ['contact', 'customer'];
+
+    /**
+     * All possible contact status options.
+     *
+     * @var {String}
+     */
+    @tracked contactStatusOptions = ['pending', 'active', 'do-not-contact', 'prospective', 'archived'];
+
+    /**
+     * Constructs the component and applies initial state.
+     */
+    constructor() {
+        super(...arguments);
+        this.contact = this.args.contact;
+        applyContextComponentArguments(this);
+    }
+
+    /**
+     * Sets the overlay context.
+     *
+     * @action
+     * @param {OverlayContextObject} overlayContext
+     */
+    @action setOverlayContext(overlayContext) {
+        this.context = overlayContext;
+        contextComponentCallback(this, 'onLoad', ...arguments);
+    }
+
+    /**
+     * Saves the contact changes.
+     *
+     * @action
+     * @returns {Promise<any>}
+     */
+    @action save() {
+        const { contact } = this;
+
+        this.loader.showLoader('.next-content-overlay-panel-container', { loadingMessage: 'Saving contact...', preserveTargetPosition: true });
+        this.isLoading = true;
+
+        contextComponentCallback(this, 'onBeforeSave', contact);
+
+        try {
+            return contact
+                .save()
+                .then((contact) => {
+                    this.notifications.success(`contact (${contact.name}) saved successfully.`);
+                    contextComponentCallback(this, 'onAfterSave', contact);
+                })
+                .catch((error) => {
+                    this.notifications.serverError(error);
+                })
+                .finally(() => {
+                    this.loader.removeLoader('.next-content-overlay-panel-container ');
+                    this.isLoading = false;
+                });
+        } catch (error) {
+            this.loader.removeLoader('.next-content-overlay-panel-container ');
+            this.isLoading = false;
+        }
+    }
+
+    /**
+     * Uploads a new photo for the driver.
+     *
+     * @param {File} file
+     * @memberof DriverFormPanelComponent
+     */
+    @action onUploadNewPhoto(file) {
+        this.fetch.uploadFile.perform(
+            file,
+            {
+                path: `uploads/${this.currentUser.companyId}/drivers/${this.contact.id}`,
+                subject_uuid: this.contact.id,
+                subject_type: `contact`,
+                type: `contact_photo`,
+            },
+            (uploadedFile) => {
+                this.contact.setProperties({
+                    photo_uuid: uploadedFile.id,
+                    photo_url: uploadedFile.url,
+                    photo: uploadedFile,
+                });
+            }
+        );
+    }
+
+    /**
+     * View the details of the contact.
+     *
+     * @action
+     */
+    @action onViewDetails() {
+        const isActionOverrided = contextComponentCallback(this, 'onViewDetails', this.contact);
+
+        if (!isActionOverrided) {
+            this.contextPanel.focus(this.contact, 'viewing');
+        }
+    }
+
+    /**
+     * Handles cancel button press.
+     *
+     * @action
+     * @returns {any}
+     */
+    @action onPressCancel() {
+        return contextComponentCallback(this, 'onPressCancel', this.contact);
+    }
+
+    /**
+     * Uploads a file to the server for the contact.
+     *
+     * @param {File} file
+     */
+    uploadContactPhoto(file) {
+        this.fetch.uploadFile.perform(
+            file,
+            {
+                path: `uploads/${this.contact.company_uuid}/contacts/${this.contact.slug}`,
+                subject_uuid: this.contact.id,
+                subject_type: 'contact',
+                type: 'contact_photo',
+            },
+            (uploadedFile) => {
+                this.contact.setProperties({
+                    photo_uuid: uploadedFile.id,
+                    photo_url: uploadedFile.url,
+                    photo: uploadedFile,
+                });
+            }
+        );
+    }
+}

package/addon/components/contact-panel/details.hbs

@@ -0,0 +1,36 @@
+<div class="p-4">
+    <ContentPanel @title="Details" @open={{true}} @pad={{true}} @panelBodyClass="bg-white dark:bg-gray-900">
+        <div class="grid grid-cols-1 gap-2 lg:grid-cols-2 lg:gap-4 text-xs dark:text-gray-100">
+
+            <div class="field-info-container">
+                <div class="field-name">Website URL</div>
+                <div class="field-value">{{n-a @contact.name}}</div>
+            </div>
+
+            <div class="field-info-container">
+                <div class="field-name">Title</div>
+                <div class="field-value">{{n-a @contact.title}}</div>
+            </div>
+
+            <div class="field-info-container">
+                <div class="field-name">Internal ID</div>
+                <div class="field-value">{{n-a @contact.internal_id}}</div>
+            </div>
+
+            <div class="field-info-container">
+                <div class="field-name">Email</div>
+                <div class="field-value">{{n-a @contact.email}}</div>
+            </div>
+
+            <div class="field-info-container">
+                <div class="field-name">Phone</div>
+                <div class="field-value">{{n-a @contact.phone}}</div>
+            </div>
+
+            <div class="field-info-container">
+                <div class="field-name">Type</div>
+                <div class="field-value"><Badge @status={{@contact.type}} /></div>
+            </div>
+        </div>
+    </ContentPanel>
+</div>

package/addon/components/contact-panel/details.js

@@ -0,0 +1,3 @@
+import Component from '@glimmer/component';
+
+export default class ContactPanelDetailsComponent extends Component {}

package/addon/components/contact-panel.hbs

@@ -0,0 +1,52 @@
+<Overlay @onLoad={{this.setOverlayContext}} @position="right" @noBackdrop={{true}} @fullHeight={{true}} @isResizable={{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">
+                <Button @type="default" @icon="pen" @helpText="Edit contact" @onClick={{this.onEdit}} />
+            </div>
+            <div class="flex flex-1 justify-end">
+                <Button @type="default" @icon="times" @helpText={{if this.contact.id "Cancel edit contact" "Cancel new contact"}} @onClick={{this.onPressCancel}} />
+            </div>
+        </div>
+        <div class="flex flex-row justify-between w-full">
+            <div class="flex flex-col flex-1 w-3/4">
+                <div class="flex flex-row">
+                    <div class="w-14 flex items-center justify-start">
+                        <Image src={{this.contact.photo_url}} @fallbackSrc={{config "defaultValues.contactImage"}} alt={{this.contact.name}} height="48" width="48" class="h-12 w-12 rounded-lg shadow-sm" />
+                        <Attach::Tooltip @class="clean" @animation="scale" @placement="top">
+                            <InputInfo @text={{this.contact.public_id}} />
+                        </Attach::Tooltip>
+                    </div>
+                    <div class="flex flex-col">
+                        <h1 class="text-gray-900 dark:text-white text-2xl">{{this.contact.name}}</h1>
+                        <div class="-mt-1">
+                            <div class="flex flex-row items-center">
+                                <span class="text-sm dark:text-blue-400 text-blue-600">{{smart-humanize this.contact.type}}</span>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="flex justify-end w-1/4">
+                <Badge @status={{this.contact.public_id}} @type="info" @hideStatusDot={{true}} />
+            </div>
+        </div>
+    </Overlay::Header>
+    <Overlay::Body class="no-padding" @increaseInnerBodyHeightBy={{1000}}>
+        <div class="section-header-actions w-full overflow-x-scroll lg:overflow-x-auto">
+            <div class="ui-tabs mt-4">
+                <nav>
+                    {{#each this.tabs as |tab|}}
+                        <a href="javascript:;" class="ui-tab {{if (eq this.tab.slug tab.slug) 'active'}}" {{on "click" (fn this.onTabChanged tab.slug)}}>
+                            <FaIcon @icon={{tab.icon}} class="mr-1" />
+                            <span>{{tab.title}}</span>
+                        </a>
+                    {{/each}}
+                </nav>
+            </div>
+        </div>
+        <div class="tab-content tab-{{this.tab.slug}}">
+            {{component this.tab.component contact=this.contact tabOptions=this.tab options=this.tab.componentParams}}
+        </div>
+    </Overlay::Body>
+</Overlay>

package/addon/components/contact-panel.js

@@ -0,0 +1,161 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+import { inject as service } from '@ember/service';
+import { isArray } from '@ember/array';
+import ContactPanelDetailComponent from './contact-panel/details';
+import contextComponentCallback from '../utils/context-component-callback';
+import applyContextComponentArguments from '../utils/apply-context-component-arguments';
+
+export default class ContactPanelComponent extends Component {
+    /**
+     * Service for fetching data.
+     *
+     * @type {Service}
+     */
+    @service fetch;
+
+    /**
+     * Service for managing modals.
+     *
+     * @type {Service}
+     */
+    @service modalsManager;
+
+    /**
+     * Universe service for managing global data and settings.
+     *
+     * @type {Service}
+     */
+    @service universe;
+
+    /**
+     * Ember data store service.
+     *
+     * @type {Service}
+     */
+    @service store;
+
+    /**
+     * Service for managing routing within the host app.
+     *
+     * @type {Service}
+     */
+    @service hostRouter;
+
+    /**
+     * Service for managing the context panel.
+     *
+     * @type {Service}
+     */
+    @service contextPanel;
+
+    /**
+     * The current active tab.
+     *
+     * @type {Object}
+     * @tracked
+     */
+    @tracked tab;
+
+    /**
+     * The contact being displayed or edited.
+     *
+     * @type {contactModel}
+     * @tracked
+     */
+    @tracked contact;
+
+    /**
+     * Returns the array of tabs available for the panel.
+     *
+     * @type {Array}
+     */
+    get tabs() {
+        const registeredTabs = this.universe.getMenuItemsFromRegistry('component:contact-panel');
+        // this.universe._createMenuItem('Tracking', null, { icon: 'satellite-dish', component: contactPanelTrackingComponent }),
+        const defaultTabs = [this.universe._createMenuItem('Details', null, { icon: 'circle-info', component: ContactPanelDetailComponent })];
+
+        if (isArray(registeredTabs)) {
+            return [...defaultTabs, ...registeredTabs];
+        }
+
+        return defaultTabs;
+    }
+
+    /**
+     * Initializes the contact panel component.
+     */
+    constructor() {
+        super(...arguments);
+        this.contact = this.args.contact;
+        this.tab = this.getTabUsingSlug(this.args.tab);
+        applyContextComponentArguments(this);
+    }
+
+    /**
+     * Sets the overlay context.
+     *
+     * @action
+     * @param {OverlayContextObject} overlayContext
+     */
+    @action setOverlayContext(overlayContext) {
+        this.context = overlayContext;
+        contextComponentCallback(this, 'onLoad', ...arguments);
+    }
+
+    /**
+     * Handles changing the active tab.
+     *
+     * @method
+     * @param {String} tab - The new tab to switch to.
+     * @action
+     */
+    @action onTabChanged(tab) {
+        this.tab = this.getTabUsingSlug(tab);
+        contextComponentCallback(this, 'onTabChanged', tab);
+    }
+
+    /**
+     * Handles edit action for the contact.
+     *
+     * @method
+     * @action
+     */
+    @action onEdit() {
+        const isActionOverrided = contextComponentCallback(this, 'onEdit', this.contact);
+
+        if (!isActionOverrided) {
+            this.contextPanel.focus(this.contact, 'editing', {
+                onAfterSave: () => {
+                    this.contextPanel.clear();
+                },
+            });
+        }
+    }
+
+    /**
+     * Handles the cancel action.
+     *
+     * @method
+     * @action
+     * @returns {Boolean} Indicates whether the cancel action was overridden.
+     */
+    @action onPressCancel() {
+        return contextComponentCallback(this, 'onPressCancel', this.contact);
+    }
+
+    /**
+     * Finds and returns a tab based on its slug.
+     *
+     * @param {String} tabSlug - The slug of the tab.
+     * @returns {Object|null} The found tab or null.
+     */
+    getTabUsingSlug(tabSlug) {
+        if (tabSlug) {
+            return this.tabs.find(({ slug }) => slug === tabSlug);
+        }
+
+        return this.tabs[0];
+    }
+}

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

@@ -16,13 +16,18 @@
         <div class="flex flex-row justify-between w-full">
             <div class="flex flex-col flex-1 w-3/4">
                 <div class="flex flex-row">
-                    <div class="w-14 flex items-center justify-start">
-                        <Image src={{this.driver.photo_url}} @fallbackSrc={{config "defaultValues.driverImage"}} alt={{this.driver.name}} height="48" width="48" class="h-12 w-12 rounded-lg shadow-sm" />
-                        <Attach::Tooltip @class="clean" @animation="scale" @placement={{"top"}}>
-                            <InputInfo @text={{this.driver.public_id}} />
-                        </Attach::Tooltip>
+                    <div class="w-14">
+                        <div class="upload-avatar-overlay w-12 h-12 flex items-center justify-start rounded-lg">
+                            <img src={{this.driver.photo_url}} alt={{this.driver.name}} height="48" width="48" class="h-12 w-12 rounded-lg shadow-sm" />
+                            <Attach::Tooltip @class="clean" @animation="scale" @placement="top">
+                                <InputInfo @text="Upload new photo" />
+                            </Attach::Tooltip>
+                            <div class="upload-avatar-button-wrapper rounded-lg">
+                                <UploadButton @name="photos" @accept="image/*" @onFileAdded={{this.onUploadNewPhoto}} @icon="upload" @hideButtonText={{true}} @labelClass="upload-avatar-label-overlay" class="w-12 btn-reset" />
+                            </div>
+                        </div>
                     </div>
-                    <div class="flex flex-col pt-2">
+                    <div class="flex flex-col">
                         <h1 class="text-gray-900 dark:text-white text-2xl">
                             {{#if this.driver.id}}
                                 {{this.driver.name}}
@@ -56,75 +61,54 @@
 
     <Overlay::Body @wrapperClass="new-service-rate-overlay-body px-4 space-y-4 pt-4" @increaseInnerBodyHeightBy={{1000}}>
         <div class="flex-1">
-            <div class="grid grid-cols-1 gap-2 text-xs dark:text-gray-100 mb-4">
-                <div class="input-group">
-                    <label>
-                        Name
-                    </label>
+            <div class="grid grid-cols-1 lg:grid-cols-2 gap-2 text-xs dark:text-gray-100">
+                <InputGroup @name="Name" @wrapperClass="col-span-2">
                     <Input @value={{this.driver.name}} @type="text" class="w-full form-input" placeholder="Name" />
-                </div>
-            </div>
-
-            <div class="grid grid-cols-2 gap-2 text-xs dark:text-gray-100">
-                <div class="input-group">
-                    <label>
-                        Internal ID
-                    </label>
+                </InputGroup>
+                
+                <InputGroup @name="Internal ID">
                     <Input @value={{this.driver.internal_id}} @type="text" class="w-full form-input" placeholder="Internal ID" />
-                </div>
+                </InputGroup>
 
-                <div class="input-group">
-                    <label>
-                        Drivers License
-                    </label>
+                <InputGroup @name="Drivers License">
                     <Input @value={{this.driver.drivers_license_number}} @type="text" class="w-full form-input" placeholder="Drivers License" />
-                </div>
+                </InputGroup>
 
-                <div class="input-group">
-                    <label>
-                        Email
-                    </label>
+                <InputGroup @name="Email">
                     <Input @value={{this.driver.email}} @type="text" class="w-full form-input" placeholder="Email" />
-                </div>
+                </InputGroup>
 
-                <div class="input-group">
-                    <label>
-                        Phone
-                    </label>
+                <InputGroup @name="Phone">
                     <PhoneInput @value={{this.driver.phone}} @onInput={{fn (mut this.driver.phone)}} class="form-input w-full" />
-                </div>
+                </InputGroup>
 
-                <div class="input-group">
-                    <label>
-                        Vendor
-                    </label>
+                <InputGroup @name="Vendor">
                     <ModelSelect @modelName="vendor" @selectedModel={{this.driver.vendor}} @placeholder="Select Vendor" @triggerClass="form-select form-input" @infiniteScroll={{false}} @renderInPlace={{true}} @onChange={{fn (mut this.driver.vendor)}} as |model|>
                         {{model.name}}
                     </ModelSelect>
-                </div>
+                </InputGroup>
 
-                <div class="input-group">
-                    <label>
-                        Vehicle
-                    </label>
+                <InputGroup @name="Vehicle">
                     <ModelSelect @modelName="vehicle" @selectedModel={{this.driver.vehicle}} @placeholder="Select Vehicle" @triggerClass="form-select form-input" @infiniteScroll={{false}} @renderInPlace={{true}} @onChange={{fn (mut this.driver.vehicle)}} as |model|>
                         {{model.display_name}}
                     </ModelSelect>
-                </div>
+                </InputGroup>
 
-                <div class="input-group">
-                    <label>
-                        City
-                    </label>
+                <InputGroup @name="City">
                     <Input @value={{this.driver.city}} @type="text" class="w-full form-input" placeholder="City" />
-                </div>
+                </InputGroup>
 
-                <div class="input-group">
-                    <label>
-                        Country
-                    </label>
+                <InputGroup @name="Country">
                     <CountrySelect class="w-full form-input form-select form-datalist" @value={{this.driver.country}} @onChange={{fn (mut this.driver.country)}} placeholder="Country" />
-                </div>
+                </InputGroup>
+
+                <InputGroup @name="Status">
+                    <div class="fleetbase-model-select fleetbase-power-select ember-model-select">
+                        <PowerSelect @options={{this.driverStatusOptions}} @selected={{this.driver.status}} @onChange={{fn (mut this.driver.status)}} @placeholder="Select driver status" @triggerClass="form-select form-input" as |status|>
+                            {{smart-humanize status}}
+                        </PowerSelect>
+                    </div>
+                </InputGroup>
             </div>
         </div>
     </Overlay::Body>