@fleetbase/fleetops-engine 0.6.64 → 0.6.65

package/addon/components/trailer/details/maintenance-history.hbs

@@ -0,0 +1,47 @@
+<div class="trailer-details-maintenance-history p-4">
+    <div class="flex flex-row items-center justify-end mb-3">
+        <Button @icon="plus" @text={{t "trailer.actions.log-maintenance"}} @size="xs" @type="primary" @onClick={{this.logMaintenance}} @permission="fleet-ops create maintenance" />
+    </div>
+
+    {{#if this.loadMaintenanceHistory.isRunning}}
+        <div class="flex items-center justify-center py-10">
+            <Spinner />
+        </div>
+    {{else if this.maintenanceHistory.length}}
+        <div class="overflow-x-auto">
+            <table class="min-w-full text-xs">
+                <thead>
+                    <tr class="border-b border-gray-200 dark:border-gray-700">
+                        <th class="text-left py-2 pr-4 font-semibold text-gray-500 uppercase tracking-wide">{{t "trailer.maintenance.summary"}}</th>
+                        <th class="text-left py-2 pr-4 font-semibold text-gray-500 uppercase tracking-wide">{{t "common.type"}}</th>
+                        <th class="text-left py-2 pr-4 font-semibold text-gray-500 uppercase tracking-wide">{{t "trailer.maintenance.odometer"}}</th>
+                        <th class="text-left py-2 pr-4 font-semibold text-gray-500 uppercase tracking-wide">{{t "trailer.maintenance.total-cost"}}</th>
+                        <th class="text-left py-2 pr-4 font-semibold text-gray-500 uppercase tracking-wide">{{t "trailer.maintenance.date"}}</th>
+                        <th class="py-2"></th>
+                    </tr>
+                </thead>
+                <tbody>
+                    {{#each this.maintenanceHistory as |record|}}
+                        <tr class="border-b border-gray-100 dark:border-gray-800 hover:bg-gray-50 dark:hover:bg-gray-800">
+                            <td class="py-2 pr-4 font-medium">{{record.summary}}</td>
+                            <td class="py-2 pr-4 text-gray-500">{{n-a (smart-humanize record.type)}}</td>
+                            <td class="py-2 pr-4 text-gray-500">{{n-a record.odometer_reading}} {{record.odometer_unit}}</td>
+                            <td class="py-2 pr-4">{{#if record.total_cost}}{{format-currency record.total_cost record.currency}}{{else}}-{{/if}}</td>
+                            <td class="py-2 pr-4 text-gray-500">{{n-a (format-date-fns record.completed_at "dd MMM yyyy")}}</td>
+                            <td class="py-2 text-right">
+                                <Button @icon="eye" @size="xs" @helpText={{t "common.view"}} @onClick={{fn this.maintenanceActions.transition.view record}} />
+                            </td>
+                        </tr>
+                    {{/each}}
+                </tbody>
+            </table>
+        </div>
+    {{else}}
+        <div class="flex flex-col items-center justify-center py-10 text-gray-400 dark:text-gray-600">
+            <FaIcon @icon="wrench" @size="2x" class="mb-3" />
+            <p class="text-sm font-semibold text-gray-600 dark:text-gray-300">{{t "trailer.empty.maintenance"}}</p>
+            <p class="text-xs">{{t "trailer.empty.maintenance-description"}}</p>
+            <Button @text={{t "trailer.actions.log-maintenance"}} @icon="plus" @size="xs" @type="primary" class="mt-3" @onClick={{this.logMaintenance}} @permission="fleet-ops create maintenance" />
+        </div>
+    {{/if}}
+</div>

package/addon/components/trailer/details/maintenance-history.js

@@ -0,0 +1,40 @@
+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';
+
+export default class TrailerDetailsMaintenanceHistoryComponent extends Component {
+    @service maintenanceActions;
+    @service notifications;
+    @service store;
+    @service trailerActions;
+    @tracked maintenanceHistory = [];
+
+    get trailer() {
+        return this.args.resource;
+    }
+
+    constructor() {
+        super(...arguments);
+        this.loadMaintenanceHistory.perform();
+    }
+
+    @task *loadMaintenanceHistory() {
+        try {
+            const records = yield this.store.query('maintenance', {
+                maintainable_uuid: this.trailer.id,
+                maintainable_type: 'trailer',
+                sort: '-created_at',
+            });
+
+            this.maintenanceHistory = Array.from(records ?? []);
+        } catch (error) {
+            this.notifications.serverError(error);
+        }
+    }
+
+    @action logMaintenance() {
+        return this.trailerActions.logMaintenance(this.trailer, {}, { refresh: false, callback: () => this.loadMaintenanceHistory.perform() });
+    }
+}

package/addon/components/trailer/details/schedules.hbs

@@ -0,0 +1,45 @@
+<div class="trailer-details-schedules p-4">
+    <div class="flex flex-row items-center justify-end mb-3">
+        <Button @icon="plus" @text={{t "trailer.actions.schedule-maintenance"}} @size="xs" @type="primary" @onClick={{this.createSchedule}} @permission="fleet-ops create maintenance-schedule" />
+    </div>
+
+    {{#if this.loadSchedules.isRunning}}
+        <div class="flex items-center justify-center py-10">
+            <Spinner />
+        </div>
+    {{else if this.schedules.length}}
+        <div class="overflow-x-auto">
+            <table class="min-w-full text-xs">
+                <thead>
+                    <tr class="border-b border-gray-200 dark:border-gray-700">
+                        <th class="text-left py-2 pr-4 font-semibold text-gray-500 uppercase tracking-wide">{{t "common.name"}}</th>
+                        <th class="text-left py-2 pr-4 font-semibold text-gray-500 uppercase tracking-wide">{{t "trailer.maintenance.interval"}}</th>
+                        <th class="text-left py-2 pr-4 font-semibold text-gray-500 uppercase tracking-wide">{{t "trailer.maintenance.next-due"}}</th>
+                        <th class="text-left py-2 pr-4 font-semibold text-gray-500 uppercase tracking-wide">{{t "common.status"}}</th>
+                        <th class="py-2"></th>
+                    </tr>
+                </thead>
+                <tbody>
+                    {{#each this.schedules as |schedule|}}
+                        <tr class="border-b border-gray-100 dark:border-gray-800 hover:bg-gray-50 dark:hover:bg-gray-800">
+                            <td class="py-2 pr-4 font-medium">{{schedule.name}}</td>
+                            <td class="py-2 pr-4 text-gray-500">{{schedule.interval_value}} {{schedule.interval_unit}}</td>
+                            <td class="py-2 pr-4 text-gray-500">{{n-a (format-date-fns schedule.next_due_date "dd MMM yyyy")}}</td>
+                            <td class="py-2 pr-4"><Badge @status={{schedule.status}} /></td>
+                            <td class="py-2 text-right">
+                                <Button @icon="eye" @size="xs" @helpText={{t "common.view"}} @onClick={{fn this.maintenanceScheduleActions.transition.view schedule}} />
+                            </td>
+                        </tr>
+                    {{/each}}
+                </tbody>
+            </table>
+        </div>
+    {{else}}
+        <div class="flex flex-col items-center justify-center py-10 text-gray-400 dark:text-gray-600">
+            <FaIcon @icon="calendar-check" @size="2x" class="mb-3" />
+            <p class="text-sm font-semibold text-gray-600 dark:text-gray-300">{{t "trailer.empty.schedules"}}</p>
+            <p class="text-xs">{{t "trailer.empty.schedules-description"}}</p>
+            <Button @text={{t "trailer.actions.schedule-maintenance"}} @icon="plus" @size="xs" @type="primary" class="mt-3" @onClick={{this.createSchedule}} @permission="fleet-ops create maintenance-schedule" />
+        </div>
+    {{/if}}
+</div>

package/addon/components/trailer/details/schedules.js

@@ -0,0 +1,40 @@
+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';
+
+export default class TrailerDetailsSchedulesComponent extends Component {
+    @service maintenanceScheduleActions;
+    @service notifications;
+    @service store;
+    @service trailerActions;
+    @tracked schedules = [];
+
+    get trailer() {
+        return this.args.resource;
+    }
+
+    constructor() {
+        super(...arguments);
+        this.loadSchedules.perform();
+    }
+
+    @task *loadSchedules() {
+        try {
+            const schedules = yield this.store.query('maintenance-schedule', {
+                subject_uuid: this.trailer.id,
+                subject_type: 'fleet-ops:trailer',
+                sort: '-created_at',
+            });
+
+            this.schedules = Array.from(schedules ?? []);
+        } catch (error) {
+            this.notifications.serverError(error);
+        }
+    }
+
+    @action createSchedule() {
+        return this.trailerActions.scheduleMaintenance(this.trailer, {}, { refresh: false, callback: () => this.loadSchedules.perform() });
+    }
+}

package/addon/components/trailer/details/work-orders.hbs

@@ -0,0 +1,47 @@
+<div class="trailer-details-work-orders p-4">
+    <div class="flex flex-row items-center justify-end mb-3">
+        <Button @icon="plus" @text={{t "trailer.actions.create-work-order"}} @size="xs" @type="primary" @onClick={{this.createWorkOrder}} @permission="fleet-ops create work-order" />
+    </div>
+
+    {{#if this.loadWorkOrders.isRunning}}
+        <div class="flex items-center justify-center py-10">
+            <Spinner />
+        </div>
+    {{else if this.workOrders.length}}
+        <div class="overflow-x-auto">
+            <table class="min-w-full text-xs">
+                <thead>
+                    <tr class="border-b border-gray-200 dark:border-gray-700">
+                        <th class="text-left py-2 pr-4 font-semibold text-gray-500 uppercase tracking-wide">{{t "trailer.maintenance.code"}}</th>
+                        <th class="text-left py-2 pr-4 font-semibold text-gray-500 uppercase tracking-wide">{{t "trailer.maintenance.subject"}}</th>
+                        <th class="text-left py-2 pr-4 font-semibold text-gray-500 uppercase tracking-wide">{{t "trailer.maintenance.priority"}}</th>
+                        <th class="text-left py-2 pr-4 font-semibold text-gray-500 uppercase tracking-wide">{{t "common.status"}}</th>
+                        <th class="text-left py-2 pr-4 font-semibold text-gray-500 uppercase tracking-wide">{{t "trailer.maintenance.due"}}</th>
+                        <th class="py-2"></th>
+                    </tr>
+                </thead>
+                <tbody>
+                    {{#each this.workOrders as |workOrder|}}
+                        <tr class="border-b border-gray-100 dark:border-gray-800 hover:bg-gray-50 dark:hover:bg-gray-800">
+                            <td class="py-2 pr-4 font-mono uppercase">{{workOrder.code}}</td>
+                            <td class="py-2 pr-4 font-medium">{{workOrder.subject}}</td>
+                            <td class="py-2 pr-4 text-gray-500">{{n-a (smart-humanize workOrder.priority)}}</td>
+                            <td class="py-2 pr-4"><Badge @status={{workOrder.status}} /></td>
+                            <td class="py-2 pr-4 text-gray-500">{{n-a (format-date-fns workOrder.due_at "dd MMM yyyy")}}</td>
+                            <td class="py-2 text-right">
+                                <Button @icon="eye" @size="xs" @helpText={{t "common.view"}} @onClick={{fn this.workOrderActions.transition.view workOrder}} />
+                            </td>
+                        </tr>
+                    {{/each}}
+                </tbody>
+            </table>
+        </div>
+    {{else}}
+        <div class="flex flex-col items-center justify-center py-10 text-gray-400 dark:text-gray-600">
+            <FaIcon @icon="clipboard-list" @size="2x" class="mb-3" />
+            <p class="text-sm font-semibold text-gray-600 dark:text-gray-300">{{t "trailer.empty.work-orders"}}</p>
+            <p class="text-xs">{{t "trailer.empty.work-orders-description"}}</p>
+            <Button @text={{t "trailer.actions.create-work-order"}} @icon="plus" @size="xs" @type="primary" class="mt-3" @onClick={{this.createWorkOrder}} @permission="fleet-ops create work-order" />
+        </div>
+    {{/if}}
+</div>

package/addon/components/trailer/details/work-orders.js

@@ -0,0 +1,40 @@
+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';
+
+export default class TrailerDetailsWorkOrdersComponent extends Component {
+    @service workOrderActions;
+    @service notifications;
+    @service store;
+    @service trailerActions;
+    @tracked workOrders = [];
+
+    get trailer() {
+        return this.args.resource;
+    }
+
+    constructor() {
+        super(...arguments);
+        this.loadWorkOrders.perform();
+    }
+
+    @task *loadWorkOrders() {
+        try {
+            const workOrders = yield this.store.query('work-order', {
+                target_uuid: this.trailer.id,
+                target_type: 'trailer',
+                sort: '-created_at',
+            });
+
+            this.workOrders = Array.from(workOrders ?? []);
+        } catch (error) {
+            this.notifications.serverError(error);
+        }
+    }
+
+    @action createWorkOrder() {
+        return this.trailerActions.createWorkOrder(this.trailer, {}, { refresh: false, callback: () => this.loadWorkOrders.perform() });
+    }
+}