@fleetbase/fleetops-engine 0.6.49 → 0.6.51

package/addon/components/customer/orders.hbs

@@ -121,6 +121,7 @@
                                                         <Button @helpText="View Label" @icon="print" @onClick={{this.viewOrderLabel}} />
                                                         <Button @helpText="View Route" @icon="route" @onClick={{this.locateOrderRoute}} />
                                                         <Button @helpText="Locate Driver" @icon="truck" @onClick={{this.locateDriver}} @disabled={{not order.has_driver_assigned}} />
+                                                        <Button @helpText="Cancel Order" @icon="ban" @onClick={{this.cancelOrder}} @disabled={{or order.isCompleted order.isCanceled}} />
                                                     </div>
                                                 </div>
                                             </div>
@@ -161,6 +162,53 @@
                                                 </div>
                                             </div>
                                             <div class="customer-order-details-seperator"></div>
+                                            <div>
+                                                <div class="mb-2 ml-1">
+                                                    <h1 class="font-bold text-sm">Delivery Options:</h1>
+                                                </div>
+                                                <div class="grid grid-cols-1 lg:grid-cols-2 gap-2">
+                                                    <InputGroup @name="Scheduled At" @type="datetime-local" @value={{this.scheduledAt}} />
+                                                    <div class="flex items-end">
+                                                        <Button @type="primary" @icon="calendar" @text="Reschedule" @onClick={{this.rescheduleOrder}} @disabled={{or order.isCompleted order.isCanceled}} />
+                                                    </div>
+                                                    <InputGroup @name="Access Notes">
+                                                        <Input
+                                                            @value={{this.deliveryInstructions.access_notes}}
+                                                            class="form-input w-full"
+                                                            placeholder="Gate code, loading dock, reception notes"
+                                                            {{on "input" (fn this.updateDeliveryInstruction "access_notes")}}
+                                                        />
+                                                    </InputGroup>
+                                                    <InputGroup @name="Safe Place">
+                                                        <Input
+                                                            @value={{this.deliveryInstructions.safe_place}}
+                                                            class="form-input w-full"
+                                                            placeholder="Leave-at-door or safe-place instructions"
+                                                            {{on "input" (fn this.updateDeliveryInstruction "safe_place")}}
+                                                        />
+                                                    </InputGroup>
+                                                    <InputGroup @name="Contact Phone">
+                                                        <Input
+                                                            @value={{this.deliveryInstructions.contact_phone}}
+                                                            class="form-input w-full"
+                                                            placeholder="Delivery contact phone"
+                                                            {{on "input" (fn this.updateDeliveryInstruction "contact_phone")}}
+                                                        />
+                                                    </InputGroup>
+                                                    <InputGroup @name="Special Handling">
+                                                        <Input
+                                                            @value={{this.deliveryInstructions.special_handling}}
+                                                            class="form-input w-full"
+                                                            placeholder="Fragile, temperature, access, or handling notes"
+                                                            {{on "input" (fn this.updateDeliveryInstruction "special_handling")}}
+                                                        />
+                                                    </InputGroup>
+                                                </div>
+                                                <div class="mt-2">
+                                                    <Button @icon="save" @text="Save Delivery Instructions" @onClick={{this.saveDeliveryInstructions}} @disabled={{or order.isCompleted order.isCanceled}} />
+                                                </div>
+                                            </div>
+                                            <div class="customer-order-details-seperator"></div>
                                             <div>
                                                 <div class="mb-2 ml-1">
                                                     <h1 class="font-bold text-sm">Items:</h1>
@@ -274,7 +322,7 @@
                                                                     {{#each order.purchase_rate.service_quote.items as |item|}}
                                                                         <tr>
                                                                             <td>
-                                                                                <span class="font-semibold">{{smart-humanize item.details}}</span>
+                                                                                <span class="font-semibold">{{item.details}}</span>
                                                                             </td>
                                                                             <td>
                                                                                 <div class="flex flex-row items-center justify-end">{{format-currency
@@ -320,4 +368,4 @@
         </div>
         <div id="customer-portal-content-wormhole"></div>
     {{/let}}
-</div>
+</div>

package/addon/components/customer/orders.js

@@ -39,6 +39,8 @@ export default class CustomerOrdersComponent extends Component {
     @tracked route;
     @tracked query;
     @tracked tileSourceUrl = 'https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png';
+    @tracked scheduledAt;
+    @tracked deliveryInstructions = {};
 
     get modalsManager() {
         const owner = getOwner(this);
@@ -71,7 +73,7 @@ export default class CustomerOrdersComponent extends Component {
         this.query = query;
 
         try {
-            this.orders = yield this.store.query('order', { customer: this.customerSession.get('id'), ...params, query });
+            this.orders = yield this.store.query('order', { customer: this.customerAccountId, customer_type: this.customerTypeParam, ...params, query });
             this.orders = this.orders.toArray().filter((_) => !_.isNew);
             this.restoreSelectedOrder();
         } catch (error) {
@@ -87,7 +89,7 @@ export default class CustomerOrdersComponent extends Component {
         yield timeout(300);
 
         try {
-            this.orders = yield this.store.query('order', { query, with_tracker_data: true });
+            this.orders = yield this.store.query('order', { query, customer: this.customerAccountId, customer_type: this.customerTypeParam, with_tracker_data: true });
         } catch (error) {
             this.notifications.serverError(error);
         }
@@ -97,9 +99,9 @@ export default class CustomerOrdersComponent extends Component {
         this.unselectOrder();
         this.newOrder = this.store.createRecord('order', {
             type: 'transport',
-            customer_uuid: this.customerSession.get('id'),
-            customer_type: 'fleet-ops:contact',
-            customer: this.customerSession.getCustomer(),
+            customer_uuid: this.customerAccountId,
+            customer_type: this.customerTypeParam,
+            customer: this.customerSession.getAccount(),
             meta: [],
         });
         this.urlSearchParams.addParamToCurrentUrl('creating', 1);
@@ -135,6 +137,8 @@ export default class CustomerOrdersComponent extends Component {
 
     @action viewOrder(order, options = { resetOrderRoute: false }) {
         this.selectedOrder = order;
+        this.scheduledAt = order.scheduled_at;
+        this.deliveryInstructions = order.meta?.customer_portal?.delivery_instructions ?? {};
         // start loading order tracking activity
         order.loadTrackingActivity();
         this.urlSearchParams.addParamToCurrentUrl('order', order.public_id);
@@ -340,11 +344,69 @@ export default class CustomerOrdersComponent extends Component {
         }
     }
 
+    @action async cancelOrder() {
+        if (!this.selectedOrder) {
+            return;
+        }
+
+        try {
+            const response = await this.fetch.post(`customer-portal/orders/${this.selectedOrder.public_id}/cancel`, {}, { namespace: 'fleet-ops/int/v1' });
+            this.selectedOrder.set('status', response.order?.status ?? 'canceled');
+            this.notifications.success('Order canceled.');
+        } catch (error) {
+            this.notifications.serverError(error);
+        }
+    }
+
+    @action async rescheduleOrder() {
+        if (!this.selectedOrder || !this.scheduledAt) {
+            return;
+        }
+
+        try {
+            const response = await this.fetch.post(
+                `customer-portal/orders/${this.selectedOrder.public_id}/reschedule`,
+                { scheduled_at: this.scheduledAt },
+                { namespace: 'fleet-ops/int/v1' }
+            );
+            this.selectedOrder.set('scheduled_at', response.order?.scheduled_at ?? this.scheduledAt);
+            this.notifications.success('Order rescheduled.');
+        } catch (error) {
+            this.notifications.serverError(error);
+        }
+    }
+
+    @action updateDeliveryInstruction(key, event) {
+        this.deliveryInstructions = { ...this.deliveryInstructions, [key]: event.target.value };
+    }
+
+    @action async saveDeliveryInstructions() {
+        if (!this.selectedOrder) {
+            return;
+        }
+
+        try {
+            await this.fetch.post(`customer-portal/orders/${this.selectedOrder.public_id}/delivery-instructions`, this.deliveryInstructions, { namespace: 'fleet-ops/int/v1' });
+            this.notifications.success('Delivery instructions saved.');
+        } catch (error) {
+            this.notifications.serverError(error);
+        }
+    }
+
     isCreatingOrder() {
         const isCreating = this.urlSearchParams.get('creating');
         return isCreating === '1' || isCreating === 1;
     }
 
+    get customerAccountId() {
+        return this.customerSession.get('uuid') || this.customerSession.get('id');
+    }
+
+    get customerTypeParam() {
+        const customerType = this.customerSession.get('customer_type', 'contact');
+        return customerType === 'vendor' ? 'fleet-ops:vendor' : 'fleet-ops:contact';
+    }
+
     cannotRouteWaypoints(waypoints = []) {
         return !this.map || !isArray(waypoints) || waypoints.length < 2;
     }

package/addon/components/display-place.hbs

@@ -31,7 +31,7 @@
                             <div class="next-dd-menu-seperator"></div>
                             {{#each-in @waypointActions as |actionId action|}}
                                 <div class="px-1">
-                                    <a href="javascript:;" class="next-dd-item" disabled={{cannot "fleet-ops view order"}} {{on "click" (dropdown-fn dd action.fn this.place)}}>
+                                    <a href="javascript:;" class="next-dd-item" disabled={{cannot "fleet-ops view order"}} {{on "click" (dropdown-fn dd action.fn (or @waypointActionContext this.place))}}>
                                         {{action.label}}
                                     </a>
                                 </div>
@@ -65,4 +65,4 @@
             {{/if}}
         </address>
     {{/if}}
-</div>
+</div>

package/addon/components/driver/form.hbs

@@ -6,7 +6,7 @@
                     @modelName="user"
                     @selectedModel={{@resource.user}}
                     @placeholder={{t "driver.fields.select-user"}}
-                    @query={{hash doesnt_have_driver=true}}
+                    @query={{hash doesnt_have_driver=true can_be_driver=true}}
                     @triggerClass="form-select form-input"
                     @infiniteScroll={{false}}
                     @renderInPlace={{true}}

package/addon/components/home/getting-started-guidance.hbs

@@ -0,0 +1,113 @@
+{{#unless this.isComplete}}
+    <section class="fleet-ops-home-guidance px-4 pt-4 lg:px-6 {{@class}}" ...attributes>
+        <div class="fleet-ops-home-guidance-grid">
+            <div class="fleet-ops-get-started rounded-md border border-gray-200 bg-white shadow-md dark:border-gray-700 dark:bg-gray-800">
+                <div class="flex items-center justify-between border-b border-gray-200 px-3 py-2 dark:border-gray-700">
+                    <div class="min-w-0">
+                        <div class="truncate text-sm font-bold text-gray-900 dark:text-gray-100">{{t "widget.get-started.title"}}</div>
+                        <div class="truncate text-[11px] text-gray-500 dark:text-gray-400">{{t "widget.get-started.subtitle"}}</div>
+                    </div>
+                    <button type="button" class="text-gray-400 hover:text-gray-600 dark:hover:text-gray-200" {{on "click" this.refresh}} title={{t "widget.refresh"}}>
+                        <FaIcon @icon="rotate" class={{if this.gettingStarted.load.isRunning "animate-spin"}} />
+                    </button>
+                </div>
+
+                <div class="fleet-ops-get-started-content grid grid-cols-1 gap-3 p-3">
+                    <div class="flex min-h-0 flex-col gap-2">
+                        {{#if this.gettingStarted.load.isRunning}}
+                            <div class="flex flex-1 items-center justify-center"><Spinner /></div>
+                        {{else if this.gettingStarted.error}}
+                            <div class="flex flex-1 items-center justify-center text-xs text-red-500">{{this.gettingStarted.error}}</div>
+                        {{else}}
+                            <div class="mb-1 flex items-center justify-between">
+                                <span class="text-[11px] font-semibold text-gray-600 dark:text-gray-300">
+                                    {{this.progress.completed}}/{{this.progress.total}}
+                                    {{t "widget.get-started.completed"}}
+                                </span>
+                                <span class="text-[11px] font-semibold text-blue-600 dark:text-blue-300">{{this.progress.percent}}%</span>
+                            </div>
+                            <div class="h-1.5 overflow-hidden rounded-full bg-gray-100 dark:bg-gray-700">
+                                <div class="h-full rounded-full bg-blue-600 transition-all" style={{html-safe (concat "width:" this.progress.percent "%")}}></div>
+                            </div>
+
+                            <div class="mt-1 flex min-h-0 flex-1 flex-col gap-1.5">
+                                {{#each this.steps as |step index|}}
+                                    <button
+                                        type="button"
+                                        class="fleet-ops-get-started-step flex min-h-[58px] w-full items-center gap-2 rounded-md border p-2 text-left transition
+                                            {{if step.completed 'border-gray-200 bg-gray-50 dark:border-gray-700 dark:bg-gray-800/70'}}
+                                            {{if (this.isActiveStep step) 'border-blue-500 bg-blue-50 shadow-sm dark:border-blue-400 dark:bg-blue-950/30'}}
+                                            {{if (this.isInactiveStep step) 'border-gray-200 bg-white hover:border-gray-300 dark:border-gray-700 dark:bg-gray-800 dark:hover:border-gray-600'}}"
+                                        {{on "click" (fn this.startStep step)}}
+                                    >
+                                        <div
+                                            class="flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-full
+                                                {{if
+                                                    step.completed
+                                                    'bg-green-100 text-green-600 dark:bg-green-900/40 dark:text-green-300'
+                                                    'bg-blue-100 text-blue-600 dark:bg-blue-900/40 dark:text-blue-300'
+                                                }}"
+                                        >
+                                            {{#if step.completed}}
+                                                <FaIcon @icon="check" />
+                                            {{else}}
+                                                <FaIcon @icon={{step.icon}} />
+                                            {{/if}}
+                                        </div>
+                                        <div class="min-w-0 flex-1">
+                                            <div class="flex items-center gap-1.5">
+                                                <span class="text-[12px] font-bold text-gray-900 dark:text-gray-100">{{add index 1}}. {{step.title}}</span>
+                                                <span class="hidden text-[10px] text-gray-400 sm:inline"><FaIcon @icon="clock" /> {{step.estimate}}</span>
+                                            </div>
+                                            <div class="truncate text-[11px] text-gray-500 dark:text-gray-400">{{step.description}}</div>
+                                        </div>
+                                        <span class="rounded-full px-2 py-0.5 text-[10px] font-bold {{this.statusClass step}}">{{this.statusText step}}</span>
+                                    </button>
+                                {{/each}}
+                            </div>
+                        {{/if}}
+                    </div>
+                </div>
+            </div>
+
+            <div class="fleet-ops-recommended-features rounded-md border border-gray-200 bg-white shadow-md dark:border-gray-700 dark:bg-gray-800">
+                <div class="border-b border-gray-200 px-3 py-2 dark:border-gray-700">
+                    <div class="truncate text-sm font-bold text-gray-900 dark:text-gray-100">{{t "widget.recommended-features.title"}}</div>
+                    <div class="truncate text-[11px] text-gray-500 dark:text-gray-400">{{t "widget.recommended-features.subtitle"}}</div>
+                </div>
+
+                <div class="p-3">
+                    {{#if this.gettingStarted.load.isRunning}}
+                        <div class="fleet-ops-recommended-features-loading flex items-center justify-center"><Spinner /></div>
+                    {{else if this.gettingStarted.error}}
+                        <div class="fleet-ops-recommended-features-loading flex items-center justify-center text-xs text-red-500">{{this.gettingStarted.error}}</div>
+                    {{else}}
+                        <div class="grid gap-2 sm:grid-cols-2">
+                            {{#each this.recommendations as |feature|}}
+                                <button
+                                    type="button"
+                                    class="fleet-ops-recommended-feature
+                                        {{this.accentClass feature}}
+                                        group flex min-h-[92px] items-start gap-3 rounded-md border border-gray-200 bg-gray-50 p-3 text-left transition hover:border-gray-300 hover:bg-white hover:shadow-sm dark:border-gray-700 dark:bg-gray-800 dark:hover:border-gray-600 dark:hover:bg-gray-700"
+                                    {{on "click" (fn this.openFeature feature)}}
+                                >
+                                    <div class="fleet-ops-recommended-feature-icon flex h-9 w-9 flex-shrink-0 items-center justify-center rounded-md">
+                                        <FaIcon @icon={{feature.icon}} />
+                                    </div>
+                                    <div class="flex min-h-0 flex-1 flex-col">
+                                        <div class="truncate text-[12px] font-bold text-gray-900 dark:text-gray-100">{{feature.title}}</div>
+                                        <p class="mt-1 line-clamp-2 flex-1 text-[11px] leading-4 text-gray-500 dark:text-gray-400">{{feature.description}}</p>
+                                        <div class="mt-2 flex items-center gap-1 text-[11px] font-bold text-blue-600 dark:text-blue-300">
+                                            <span>{{t "widget.recommended-features.learn-more"}}</span>
+                                            <FaIcon @icon="arrow-right" class="transition group-hover:translate-x-0.5" />
+                                        </div>
+                                    </div>
+                                </button>
+                            {{/each}}
+                        </div>
+                    {{/if}}
+                </div>
+            </div>
+        </div>
+    </section>
+{{/unless}}

package/addon/components/home/getting-started-guidance.js

@@ -0,0 +1,107 @@
+import Component from '@glimmer/component';
+import { action } from '@ember/object';
+import { inject as service } from '@ember/service';
+
+const ACCENT_CLASS = {
+    blue: 'feature-accent-blue',
+    green: 'feature-accent-green',
+    amber: 'feature-accent-amber',
+    purple: 'feature-accent-purple',
+};
+
+export default class HomeGettingStartedGuidanceComponent extends Component {
+    @service gettingStarted;
+    @service router;
+    @service docsPanel;
+
+    constructor() {
+        super(...arguments);
+        this.gettingStarted.load.perform();
+    }
+
+    get steps() {
+        return this.gettingStarted.steps;
+    }
+
+    get recommendations() {
+        return this.gettingStarted.recommendations.slice(0, 4);
+    }
+
+    get progress() {
+        return this.gettingStarted.progress;
+    }
+
+    get nextStep() {
+        return this.gettingStarted.nextStep;
+    }
+
+    get isComplete() {
+        return this.gettingStarted.isCompleted;
+    }
+
+    @action
+    isActiveStep(step) {
+        return this.nextStep?.key === step.key && !step.completed;
+    }
+
+    @action
+    isInactiveStep(step) {
+        return !step.completed && !this.isActiveStep(step);
+    }
+
+    @action
+    statusText(step) {
+        if (step.completed) {
+            return 'Done';
+        }
+
+        return this.isActiveStep(step) ? 'Next' : 'Not started';
+    }
+
+    @action
+    statusClass(step) {
+        if (step.completed) {
+            return 'bg-green-100 text-green-700 dark:bg-green-900/40 dark:text-green-300';
+        }
+
+        if (this.isActiveStep(step)) {
+            return 'bg-blue-100 text-blue-700 dark:bg-blue-900/40 dark:text-blue-300';
+        }
+
+        return 'bg-gray-100 text-gray-500 dark:bg-gray-700 dark:text-gray-300';
+    }
+
+    @action
+    accentClass(feature) {
+        return ACCENT_CLASS[feature.accent] ?? ACCENT_CLASS.blue;
+    }
+
+    @action
+    startStep(step) {
+        if (step?.route) {
+            return this.router.transitionTo(step.route);
+        }
+
+        if (step?.docs_url) {
+            return this.openDocs(step.docs_url, step.title, 'fleet-ops-getting-started-guidance');
+        }
+    }
+
+    @action
+    openFeature(feature) {
+        return this.openDocs(feature.docs_url, feature.title, 'fleet-ops-recommended-features-guidance');
+    }
+
+    openDocs(url, title, source) {
+        if (this.docsPanel?.open) {
+            return this.docsPanel.open(url, { title, source });
+        }
+
+        return window.open(url, '_docs');
+    }
+
+    @action
+    refresh() {
+        this.gettingStarted.load.perform();
+    }
+}

package/addon/components/issue/details/comments.hbs

@@ -0,0 +1,3 @@
+<ContentPanel @title="Correspondence" @open={{true}} @wrapperClass="bordered-top">
+    <CommentThread @subject={{@resource}} @subjectType="fleet-ops:issue" />
+</ContentPanel>

package/addon/components/issue/details/comments.js

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

package/addon/components/issue/details/correspondence.hbs

@@ -0,0 +1,9 @@
+<div class="issue-detail-comment-thread" {{did-insert this.loadComments}} {{did-update this.loadComments this.issueId}}>
+    <CommentThread
+        @subject={{@resource}}
+        @subjectType="Fleetbase\FleetOps\Models\Issue"
+        @comments={{this.comments}}
+        @onReloadComments={{this.reloadCommentsForIssue}}
+        @onPublishComment={{this.publishComment}}
+    />
+</div>

package/addon/components/issue/details/correspondence.js

@@ -0,0 +1,83 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { inject as service } from '@ember/service';
+import { action } from '@ember/object';
+
+const ISSUE_SUBJECT_TYPE = 'Fleetbase\\FleetOps\\Models\\Issue';
+const UUID_PATTERN = /^[0-9a-f]{8}-[0-9a-f]{4}-[1-5][0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12}$/i;
+
+export default class IssueDetailsCorrespondenceComponent extends Component {
+    @service store;
+    @service notifications;
+
+    @tracked comments = [];
+
+    get resource() {
+        return this.args.resource;
+    }
+
+    get issueId() {
+        return this.resource?.id || this.resource?.public_id || this.resource?.uuid;
+    }
+
+    get subjectUuid() {
+        if (this.resource?.uuid) {
+            return this.resource.uuid;
+        }
+
+        if (UUID_PATTERN.test(this.resource?.id ?? '')) {
+            return this.resource.id;
+        }
+
+        return null;
+    }
+
+    get subjectPublicId() {
+        return this.resource?.public_id || this.resource?.id || this.resource?.uuid;
+    }
+
+    @action loadComments() {
+        this.reloadCommentsForIssue();
+    }
+
+    @action async reloadCommentsForIssue() {
+        const query = {
+            withoutParent: 1,
+            sort: '-created_at',
+            subject_type: ISSUE_SUBJECT_TYPE,
+        };
+
+        if (this.subjectUuid) {
+            query.subject_uuid = this.subjectUuid;
+        } else {
+            query.subject = this.subjectPublicId;
+        }
+
+        const comments = await this.store.query('comment', query);
+        this.comments = comments;
+
+        return comments;
+    }
+
+    @action async publishComment(content) {
+        const subjectUuid = this.subjectUuid;
+        if (!subjectUuid) {
+            const error = new Error('Unable to publish comment because the issue UUID is missing.');
+            this.notifications.error(error.message);
+            throw error;
+        }
+
+        const comment = this.store.createRecord('comment', {
+            content,
+            subject_uuid: subjectUuid,
+            subject_type: ISSUE_SUBJECT_TYPE,
+        });
+
+        try {
+            await comment.save();
+        } catch (error) {
+            this.notifications.serverError(error);
+            throw error;
+        }
+    }
+}

package/addon/components/issue/details/documents.hbs

@@ -0,0 +1,69 @@
+<div class="issue-detail-documents">
+    <div class="issue-detail-documents-header">
+        <div class="issue-detail-documents-title">
+            <FaIcon @icon="paperclip" />
+            <span>Attachments</span>
+        </div>
+    </div>
+
+    {{#if this.queueFile.isRunning}}
+        <div class="issue-detail-dropzone is-loading">
+            <Spinner @loadingMessage="Uploading..." />
+        </div>
+    {{else}}
+        {{#let (file-queue name="issue-files" onFileAdded=(perform this.queueFile) accept=(join "," this.acceptedFileTypes)) as |queue|}}
+            <FileDropzone @queue={{queue}} class="issue-detail-dropzone file-dropzone" @disabled={{cannot-write @resource}} as |dropzone|>
+                {{#if dropzone.active}}
+                    {{#if dropzone.valid}}
+                        Drop files to attach them to this issue.
+                    {{else}}
+                        This file type is not supported.
+                    {{/if}}
+                {{else if queue.files.length}}
+                    <div class="issue-detail-dropzone-ready">
+                        <FaIcon @icon="folder-open" />
+                        <span>{{pluralize queue.files.length "file"}} ready for upload</span>
+                    </div>
+                    <div class="issue-detail-dropzone-progress">{{queue.progress}}%</div>
+                {{else}}
+                    <div class="issue-detail-dropzone-empty">
+                        <FaIcon @icon="folder-open" />
+                        <span>Drop documents or images here</span>
+                        <FileUpload
+                            @name="issue-files"
+                            @for="issue-files"
+                            @accept={{join "," this.acceptedFileTypes}}
+                            @multiple={{true}}
+                            @onFileAdded={{perform this.queueFile}}
+                            @disabled={{cannot-write @resource}}
+                        >
+                            <a tabindex={{0}} class="btn btn-sm btn-default">select files</a>
+                        </FileUpload>
+                    </div>
+                {{/if}}
+            </FileDropzone>
+        {{/let}}
+    {{/if}}
+
+    {{#if this.uploadQueue}}
+        <div class="issue-detail-upload-queue mt-4">
+            {{#each this.uploadQueue as |file|}}
+                <div class="issue-detail-upload-row">
+                    <span>{{truncate-filename file.name 40}}</span>
+                    <div class="flex flex-row items-center">
+                        <Spinner class="mr-1" />
+                        <strong>{{round file.progress}}%</strong>
+                    </div>
+                </div>
+            {{/each}}
+        </div>
+    {{/if}}
+
+    {{#if this.files.length}}
+        <div class="issue-detail-file-grid mt-4">
+            {{#each this.files as |file|}}
+                <File @file={{file}} @onDownload={{this.downloadFile}} @onDelete={{perform this.removeFile}} />
+            {{/each}}
+        </div>
+    {{/if}}
+</div>