@fleetbase/fleetops-engine 0.6.18 → 0.6.19

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

@@ -1,215 +0,0 @@
-<Overlay
-    @onLoad={{this.setOverlayContext}}
-    @onOpen={{this.onOpen}}
-    @onClose={{this.onClose}}
-    @onToggle={{this.onToggle}}
-    @position="right"
-    @noBackdrop={{true}}
-    @fullHeight={{true}}
-    @isResizeble={{or this.isResizable @isResizable}}
-    @width={{or this.width @width "570px"}}
->
-    <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.customer.id}}
-                    <Button
-                        @type="default"
-                        @icon="id-card"
-                        @helpText={{t "fleet-ops.component.customer-form-panel.view-customer-button"}}
-                        @onClick={{this.onViewDetails}}
-                        @permission="fleet-ops view contact"
-                    />
-                {{/if}}
-            </div>
-            <div class="flex flex-1 justify-end">
-                <div class="mr-2">
-                    <Button
-                        @icon={{if this.customer.id "save" "check"}}
-                        @type="primary"
-                        @text={{if this.customer.id (t "fleet-ops.component.customer-form-panel.save-customer") (t "fleet-ops.component.customer-form-panel.create-customer")}}
-                        @onClick={{perform this.save}}
-                        @isLoading={{this.save.isRunning}}
-                        @permission={{this.savePermission}}
-                    />
-                </div>
-                <Button
-                    @type="default"
-                    @icon="times"
-                    @helpText={{if this.customer.id (t "fleet-ops.component.customer-form-panel.cancel-edit-button") (t "fleet-ops.component.customer-form-panel.cancel-new-button")}}
-                    @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="upload-avatar-overlay w-12 h-12 flex items-center justify-start rounded-lg">
-                            <img src={{this.customer.photo_url}} alt={{this.customer.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.customer.public_id}} />
-                            </Attach::Tooltip>
-                            <div class="upload-avatar-button-wrapper rounded-lg">
-                                <UploadButton
-                                    @name={{t "fleet-ops.common.photos"}}
-                                    @accept="image/*"
-                                    @onFileAdded={{this.onUploadNewPhoto}}
-                                    @icon="upload"
-                                    @hideButtonText={{true}}
-                                    @labelClass="upload-avatar-label-overlay"
-                                    @permission={{this.savePermission}}
-                                    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.customer.id}}
-                                {{this.customer.name}}
-                            {{else}}
-                                {{#if this.customer.name}}
-                                    {{this.customer.name}}
-                                {{else}}
-                                    <span>{{t "fleet-ops.component.customer-form-panel.new-customer"}}</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.customer.email (smart-humanize this.customer.type)}}</span>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-            {{#if this.customer.public_id}}
-                <div class="flex justify-end w-1/4">
-                    <Badge @status={{this.customer.public_id}} @type="info" @hideStatusDot={{true}} />
-                </div>
-            {{/if}}
-        </div>
-    </Overlay::Header>
-
-    <Overlay::Body @wrapperClass="new-service-rate-overlay-body px-4 pt-4 space-y-4">
-        {{#let (cannot this.savePermission) as |unauthorized|}}
-            <ContentPanel
-                @title={{t "fleet-ops.component.customer-form-panel.user-account"}}
-                @open={{true}}
-                @pad={{true}}
-                @panelBodyClass="bg-white dark:bg-gray-800"
-                @actionButtons={{this.userAccountActionButtons}}
-            >
-                <div class="mb-4">
-                    <InputGroup @name={{t "fleet-ops.component.customer-form-panel.user-account"}} @helpText={{t "fleet-ops.component.customer-form-panel.user-account-help-text"}}>
-                        <ModelSelect
-                            @modelName="user"
-                            @selectedModel={{this.customer.user}}
-                            @placeholder={{t "fleet-ops.component.customer-form-panel.select-user"}}
-                            @query={{hash doesnt_have_contact=true}}
-                            @triggerClass="form-select form-input"
-                            @infiniteScroll={{false}}
-                            @renderInPlace={{true}}
-                            @onChange={{fn (mut this.customer.user)}}
-                            @permission="fleet-ops update-user-for customer"
-                            as |model|
-                        >
-                            <div class="flex flex-row">
-                                <div class="mr-2 w-6">
-                                    <Image src={{model.avatar_url}} @fallbackSrc={{config "defaultValues.userImage"}} alt={{this.user.name}} class="w-6 h-6 rounded-md" />
-                                </div>
-                                <div class="flex flex-col">
-                                    <div class="font-semibold">{{model.name}}</div>
-                                    <div class="text-xs flex flex-row items-center leading-4">
-                                        <FaIcon @icon="envelope" @size="sm" class="mr-1 opacity-75" />
-                                        <span>{{n-a model.email}}</span>
-                                    </div>
-                                    <div class="text-xs flex flex-row items-center leading-4">
-                                        <FaIcon @icon="phone" @size="sm" class="mr-1 opacity-75" />
-                                        <span>{{n-a model.phone}}</span>
-                                    </div>
-                                </div>
-                            </div>
-                        </ModelSelect>
-                    </InputGroup>
-                </div>
-                {{#if this.customer.user}}
-                    <div class="grid grid-cols-1 lg:grid-cols-2 gap-4 text-xs dark:text-gray-100">
-                        <InputGroup @name={{t "fleet-ops.common.name"}} @wrapperClass="col-span-2 mb-0i">
-                            <Input @value={{this.customer.user.name}} @type="text" class="w-full form-input" placeholder={{t "fleet-ops.common.name"}} disabled={{true}} />
-                        </InputGroup>
-
-                        <InputGroup @name={{t "fleet-ops.common.email"}} @wrapperClass="mb-0i">
-                            <Input @value={{this.customer.user.email}} @type="text" class="w-full form-input" placeholder={{t "fleet-ops.common.email"}} disabled={{true}} />
-                        </InputGroup>
-
-                        <InputGroup @name={{t "fleet-ops.common.phone"}} @wrapperClass="mb-0i">
-                            <PhoneInput @value={{this.customer.user.phone}} @onInput={{fn (mut this.customer.phone)}} class="form-input w-full" disabled={{true}} />
-                        </InputGroup>
-                    </div>
-                {{/if}}
-            </ContentPanel>
-
-            <ContentPanel @title={{t "fleet-ops.component.customer-form-panel.customer-details"}} @open={{true}} @pad={{true}} @panelBodyClass="bg-white dark:bg-gray-800">
-                <div class="grid grid-cols-2 gap-4 text-xs dark:text-gray-100 no-input-group-padding">
-                    <InputGroup @name={{t "fleet-ops.common.name"}}>
-                        <Input @value={{this.customer.name}} @type="text" class="w-full form-input" placeholder={{t "fleet-ops.common.name"}} disabled={{unauthorized}} />
-                    </InputGroup>
-                    <InputGroup @name={{t "fleet-ops.common.title"}}>
-                        <Input @value={{this.customer.title}} @type="text" class="w-full form-input" placeholder={{t "fleet-ops.common.title"}} disabled={{unauthorized}} />
-                    </InputGroup>
-                    <InputGroup @name={{t "fleet-ops.common.email"}}>
-                        <Input @value={{this.customer.email}} @type="text" class="w-full form-input" placeholder={{t "fleet-ops.common.email"}} disabled={{unauthorized}} />
-                    </InputGroup>
-                    <InputGroup @name={{t "fleet-ops.common.phone"}}>
-                        <PhoneInput @value={{this.customer.phone}} @onInput={{fn (mut this.customer.phone)}} class="form-input w-full" disabled={{unauthorized}} />
-                    </InputGroup>
-                    <InputGroup @name={{t "fleet-ops.common.internal-id"}}>
-                        <Input @value={{this.customer.internal_id}} @type="text" class="w-full form-input" placeholder={{t "fleet-ops.common.internal-id"}} disabled={{unauthorized}} />
-                    </InputGroup>
-                    <InputGroup @wrapperClass="col-span-2">
-                        <div class="flex items-center justify-between">
-                            <label>
-                                {{t "fleet-ops.common.address"}}
-                            </label>
-                            <div class="mb-1.5 flex flex-row">
-                                <Button
-                                    @type="default"
-                                    @size="xs"
-                                    @icon="edit"
-                                    @text={{if this.customer.has_place (t "fleet-ops.component.customer-form-panel.edit") (t "fleet-ops.component.customer-form-panel.new-address")}}
-                                    @onClick={{this.editAddress}}
-                                    @disabled={{unauthorized}}
-                                />
-                            </div>
-                        </div>
-                        <ModelSelect
-                            @modelName="place"
-                            @selectedModel={{this.customer.place}}
-                            @placeholder={{t "fleet-ops.component.customer-form-panel.select-address"}}
-                            @triggerClass="form-select form-input"
-                            @infiniteScroll={{false}}
-                            @renderInPlace={{true}}
-                            @onChange={{this.selectContactAddress}}
-                            @disabled={{unauthorized}}
-                            as |model|
-                        >
-                            <div class="flex items-center flex-row justify-between">
-                                <div class="truncate flex-1">{{n-a model.address}}</div>
-                                <Badge @hideStatusDot={{true}} @status="info">{{model.public_id}}</Badge>
-                            </div>
-                        </ModelSelect>
-                    </InputGroup>
-                    <RegistryYield @registry="fleet-ops:component:customer-form-panel:details" as |RegistryComponent|>
-                        <RegistryComponent @customer={{this.customer}} @controller={{this.controller}} @permission={{this.savePermission}} />
-                    </RegistryYield>
-                </div>
-            </ContentPanel>
-            <RegistryYield @registry="fleet-ops:component:customer-form-panel" as |RegistryComponent|>
-                <RegistryComponent @customer={{this.customer}} @controller={{this.controller}} @permission={{this.savePermission}} />
-            </RegistryYield>
-        {{/let}}
-        <Spacer @height="300px" />
-    </Overlay::Body>
-</Overlay>

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

@@ -1,219 +0,0 @@
-import Component from '@glimmer/component';
-import { tracked } from '@glimmer/tracking';
-import { inject as service } from '@ember/service';
-import { action } from '@ember/object';
-import { task } from 'ember-concurrency';
-import contextComponentCallback from '@fleetbase/ember-core/utils/context-component-callback';
-import applyContextComponentArguments from '@fleetbase/ember-core/utils/apply-context-component-arguments';
-
-export default class CustomerFormPanelComponent extends Component {
-    @service store;
-    @service intl;
-    @service fetch;
-    @service currentUser;
-    @service notifications;
-    @service hostRouter;
-    @service contextPanel;
-    @service modalsManager;
-    @service universe;
-
-    /**
-     * Overlay context.
-     * @type {any}
-     */
-    @tracked context;
-
-    /**
-     * Permission needed to update or create record.
-     *
-     * @memberof CustomerFormPanelComponent
-     */
-    @tracked savePermission;
-
-    /**
-     * The current controller if any.
-     *
-     * @memberof CustomerFormPanelComponent
-     */
-    @tracked controller;
-
-    /**
-     * Action to create a new user quickly
-     *
-     * @memberof CustomerFormPanelComponent
-     */
-    userAccountActionButtons = [
-        {
-            text: 'Create new user',
-            icon: 'user-plus',
-            size: 'xs',
-            permission: 'iam create user',
-            onClick: () => {
-                const user = this.store.createRecord('user', {
-                    status: 'pending',
-                    type: 'user',
-                });
-
-                this.modalsManager.show('modals/user-form', {
-                    title: 'Create a new user',
-                    user,
-                    formPermission: 'iam create user',
-                    uploadNewPhoto: (file) => {
-                        this.fetch.uploadFile.perform(
-                            file,
-                            {
-                                path: `uploads/${this.currentUser.companyId}/users/${user.slug}`,
-                                key_uuid: user.id,
-                                key_type: 'user',
-                                type: 'user_photo',
-                            },
-                            (uploadedFile) => {
-                                user.setProperties({
-                                    avatar_uuid: uploadedFile.id,
-                                    avatar_url: uploadedFile.url,
-                                    avatar: uploadedFile,
-                                });
-                            }
-                        );
-                    },
-                    confirm: async (modal) => {
-                        modal.startLoading();
-
-                        try {
-                            await user.save();
-                            this.notifications.success('New user created successfully!');
-                            modal.done();
-                        } catch (error) {
-                            this.notifications.serverError(error);
-                            modal.stopLoading();
-                        }
-                    },
-                });
-            },
-        },
-    ];
-
-    /**
-     * Constructs the component and applies initial state.
-     */
-    constructor(owner, { customer = null, controller }) {
-        super(...arguments);
-        this.customer = customer;
-        this.controller = controller;
-        this.savePermission = customer && customer.isNew ? 'fleet-ops create customer' : 'fleet-ops update customer';
-        applyContextComponentArguments(this);
-    }
-
-    /**
-     * Sets the overlay context.
-     *
-     * @action
-     * @param {OverlayContextObject} overlayContext
-     */
-    @action setOverlayContext(overlayContext) {
-        this.context = overlayContext;
-        contextComponentCallback(this, 'onLoad', ...arguments);
-    }
-
-    /**
-     * Task to save customer.
-     *
-     * @return {void}
-     * @memberof ContactFormPanelComponent
-     */
-    @task *save() {
-        contextComponentCallback(this, 'onBeforeSave', this.customer);
-
-        try {
-            this.customer = yield this.customer.save();
-        } catch (error) {
-            this.notifications.serverError(error);
-            return;
-        }
-
-        this.notifications.success(this.intl.t('fleet-ops.component.customer-form-panel.success-message', { customerName: this.customer.name }));
-        contextComponentCallback(this, 'onAfterSave', this.customer);
-    }
-
-    /**
-     * 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}/contacts/${this.customer.id}`,
-                subject_uuid: this.customer.id,
-                subject_type: 'fleet-ops:contact',
-                type: 'contact_photo',
-            },
-            (uploadedFile) => {
-                this.customer.setProperties({
-                    photo_uuid: uploadedFile.id,
-                    photo_url: uploadedFile.url,
-                    photo: uploadedFile,
-                });
-            }
-        );
-    }
-
-    /**
-     * View the details of the customer.
-     *
-     * @action
-     */
-    @action onViewDetails() {
-        const isActionOverrided = contextComponentCallback(this, 'onViewDetails', this.customer);
-
-        if (!isActionOverrided) {
-            this.contextPanel.focus(this.customer, 'viewing');
-        }
-    }
-
-    /**
-     * Edit customer's primary address.
-     *
-     * @return {void}
-     * @memberof ContactFormPanelComponent
-     */
-    @action async editAddress() {
-        let place;
-
-        if (this.customer.has_place) {
-            place = await this.customer.place;
-        } else {
-            place = this.store.createRecord('place');
-        }
-
-        return this.contextPanel.focus(place, 'editing', {
-            onAfterSave: (place) => {
-                this.selectVendorAddress(place);
-                this.contextPanel.clear();
-            },
-        });
-    }
-
-    /**
-     * Select and set the customer's primary address.
-     *
-     * @param {PlaceModel} place
-     * @memberof ContactFormPanelComponent
-     */
-    @action selectContactAddress(place) {
-        this.customer.place = place;
-        this.customer.place_uuid = place.id;
-    }
-
-    /**
-     * Handles cancel button press.
-     *
-     * @action
-     * @returns {any}
-     */
-    @action onPressCancel() {
-        return contextComponentCallback(this, 'onPressCancel', this.customer);
-    }
-}

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

@@ -1,52 +0,0 @@
-<div class="p-4">
-    <div class="flex-1 space-y-4">
-        <ContentPanel @title={{t "fleet-ops.component.customer-panel.user-account"}} @open={{true}} @pad={{true}} @panelBodyClass="bg-white dark:bg-gray-900">
-            <div class="grid grid-cols-2 gap-4 text-xs dark:text-gray-100">
-                <div class="field-info-container md:col-span-3">
-                    <div class="field-name">{{t "fleet-ops.common.name"}}</div>
-                    <div class="field-value">{{n-a @customer.name}}</div>
-                </div>
-                <div class="field-info-container space-y-2">
-                    <div class="field-name">{{t "fleet-ops.common.email"}}</div>
-                    <ClickToCopy @value={{@customer.email}} class="field-value">{{n-a @customer.email}}</ClickToCopy>
-                </div>
-                <div class="field-info-container space-y-2">
-                    <div class="field-name">{{t "fleet-ops.common.phone"}}</div>
-                    <ClickToCopy @value={{@customer.phone}} class="field-value">{{n-a @customer.phone}}</ClickToCopy>
-                </div>
-            </div>
-        </ContentPanel>
-        <ContentPanel @title={{t "fleet-ops.common.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 space-y-2">
-                    <div class="field-name">{{t "fleet-ops.common.name"}}</div>
-                    <div class="field-value">{{n-a @customer.name}}</div>
-                </div>
-                <div class="field-info-container space-y-2">
-                    <div class="field-name">{{t "fleet-ops.common.title"}}</div>
-                    <div class="field-value">{{n-a @customer.title}}</div>
-                </div>
-                <div class="field-info-container space-y-2">
-                    <div class="field-name">{{t "fleet-ops.common.email"}}</div>
-                    <ClickToCopy @value={{@customer.email}} class="field-value">{{n-a @customer.email}}</ClickToCopy>
-                </div>
-                <div class="field-info-container space-y-2">
-                    <div class="field-name">{{t "fleet-ops.common.email"}}</div>
-                    <ClickToCopy @value={{@customer.phone}} class="field-value">{{n-a @customer.phone}}</ClickToCopy>
-                </div>
-                <div class="field-info-container space-y-2">
-                    <div class="field-name">{{t "fleet-ops.common.internal-id"}}</div>
-                    <div class="field-value">{{n-a @customer.internal_id}}</div>
-                </div>
-                <div class="field-info-container space-y-2">
-                    <div class="field-name">{{t "fleet-ops.common.type"}}</div>
-                    <div class="field-value"><Badge @status="info" @hideStatusDot={{true}}>{{smart-humanize @customer.type}}</Badge></div>
-                </div>
-                <div class="field-info-container col-span-2">
-                    <div class="field-name">{{t "fleet-ops.common.address"}}</div>
-                    <div class="field-value">{{n-a @customer.address}}</div>
-                </div>
-            </div>
-        </ContentPanel>
-    </div>
-</div>

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

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

package/addon/components/customer-panel.hbs

@@ -1,95 +0,0 @@
-<Overlay
-    @onLoad={{this.setOverlayContext}}
-    @onOpen={{this.onOpen}}
-    @onClose={{this.onClose}}
-    @onToggle={{this.onToggle}}
-    @position="right"
-    @noBackdrop={{true}}
-    @fullHeight={{true}}
-    @isResizable={{or this.isResizable @isResizable}}
-    @width={{or this.width @width "570px"}}
->
-    <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={{t "fleet-ops.component.contact-panel.edit-button"}} @onClick={{this.onEdit}} @permission="fleet-ops update contact" />
-            </div>
-            <div class="flex flex-1 justify-end space-x-2">
-                <div>
-                    <DropdownButton @icon="ellipsis-h" @size="sm" @iconSize="md" as |dd|>
-                        <div class="next-dd-menu mt-1 mx-0" aria-labelledby="user-menu">
-                            <div class="px-1 py-0.5">
-                                <a
-                                    href="javascript:;"
-                                    class="next-dd-item truncate"
-                                    disabled={{cannot "fleet-ops reset-credentials-for customer"}}
-                                    {{on "click" (dropdown-fn dd this.resetCredentials)}}
-                                >
-                                    <div class="w-6"><FaIcon @icon="unlock" @size="sm" /></div>
-                                    <div>Reset customer credentials</div>
-                                </a>
-                            </div>
-                        </div>
-                    </DropdownButton>
-                </div>
-                <div>
-                    <div class="flex">
-                        <Button
-                            @type="default"
-                            @icon="times"
-                            @helpText={{if this.customer.id (t "fleet-ops.component.contact-panel.cancel-edit-button") (t "fleet-ops.component.contact-panel.cancel-new-button")}}
-                            @onClick={{this.onPressCancel}}
-                        />
-                    </div>
-                </div>
-            </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.customer.photo_url}}
-                            @fallbackSrc={{config "defaultValues.contactImage"}}
-                            alt={{this.customer.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.customer.public_id}} />
-                        </Attach::Tooltip>
-                    </div>
-                    <div class="flex flex-col">
-                        <h1 class="text-gray-900 dark:text-white text-2xl">{{this.customer.name}}</h1>
-                        <div class="-mt-1">
-                            <div class="flex flex-row items-center">
-                                <span class="text-sm dark:text-blue-400 text-blue-600">{{this.customer.email}}</span>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-            <div class="flex justify-end w-1/4">
-                <Badge @status={{this.customer.public_id}} @type="info" @hideStatusDot={{true}} />
-            </div>
-        </div>
-    </Overlay::Header>
-    <Overlay::Body class="no-padding">
-        <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 customer=this.customer tabOptions=this.tab options=this.tab.componentParams}}
-        </div>
-    </Overlay::Body>
-</Overlay>