Добавить фильтр на страницу автосервиса

(#138)

app/components/core/table-component.js

@@ -0,0 +1,37 @@
+import Component from '@ember/component';
+import {action, computed, get} from '@ember/object';
+
+export default class extends Component {
+  sortColumn;
+  sortAsc = true;
+
+  @action
+  onHeadClick(column) {
+    if (this.get('sortColumn') === column) {
+      if (this.get('sortAsc')) {
+        this.set('sortAsc', false);
+      } else {
+        this.set('sortColumn', null);
+      }
+    } else {
+      this.set('sortColumn', column);
+      this.set('sortAsc', true);
+    }
+  }
+
+  @computed('data', 'sortColumn', 'sortAsc')
+  get sortedData() {
+    let data = this.get('data');
+    const sortColumn = this.get('sortColumn');
+
+    if (!sortColumn) {
+      return data;
+    }
+
+    data = data.sortBy(`${get(sortColumn, 'path')}`);
+    if (!this.get('sortAsc')) {
+      data = data.reverse();
+    }
+    return data;
+  }
+}

app/controllers/account/company-account.js

@@ -0,0 +1,9 @@
+import Controller from '@ember/controller';
+import {action} from '@ember/object';
+
+export default class extends Controller {
+  @action
+  onCarClick() {
+    this.transitionToRoute('account.subject', this.get('model.sensors.firstObject.controller.object.id'));
+  }
+}

app/routes/account/company-account.js

@@ -4,11 +4,38 @@ export default class extends Route {
   model(params) {
     const companyId = params['company_id'];
 
-    // todo: изменить на gps после того, как на бекенде будет разделение на типы сенсоров
-    const sensors = this.get('store').peekAll('sensor').filterBy('type', 0);
+    const sensors = this.get('store').peekAll('sensor').filterBy('typeName', 'obd');
 
     return {
       company: this.get('store').peekRecord('service-company', companyId),
+      clients: [
+        {
+          status: '7/10',
+          model: 'Mercedes-Benz',
+          ownerName: 'Строганов Юрий Васильевич',
+          ownerPhone: '+7916826782',
+        }, {
+          status: '4/10',
+          model: 'Porshe 777',
+          ownerName: 'Куров Андрей Владимирович',
+          ownerPhone: '+74955553535',
+        }, {
+          status: '10/10',
+          model: 'BMW 7',
+          ownerName: 'Рудаков Игорь Владимирович',
+          ownerPhone: '+7999777777',
+        }, {
+          status: '2/10',
+          model: 'Lada Kalina',
+          ownerName: 'Рязанова Наталия Юрьевна',
+          ownerPhone: '+74957846248',
+        }, {
+          status: '9/10',
+          model: 'Mazda 3',
+          ownerName: 'Тихомирова Елизавета Алексеевна',
+          ownerPhone: '+74957846248',
+        },
+      ],
       sensors,
     };
   }

app/styles/component-styles/core/table-component.scss

@@ -0,0 +1,27 @@
+.table {
+  color: #333;
+  font-size: 16px;
+  line-height: 18px;
+}
+
+.table td, .table th {
+  padding: .75rem;
+  vertical-align: top;
+  border-top: 1px solid #dee2e6;
+  width: 300px;
+}
+
+.table thead th {
+  vertical-align: bottom;
+  border-bottom: 2px solid #dee2e6;
+  cursor: pointer;
+}
+
+.arrow {
+  position: relative;
+  bottom: 1px;
+}
+
+tr.clickable:hover {
+  background-color: #dee2e6;
+}

app/templates/account/company-account.hbs

@@ -2,48 +2,26 @@
   {{page-caption text=model.company.name class="col-12"}}
 </div>
 <div class="row cardStyle block">
-  <!--<h2 class="text-caption text-center">График потребления</h2>-->
-
-  <table class="table text-default">
-    <thead>
-    <tr>
-      <th>ФИО владельца</th>
-      <th>Модель ТС</th>
-      <th>Состояние ТС</th>
-      <th>Телефон владельца</th>
-    </tr>
-    </thead>
-    <tbody>
-    {{#link-to 'account.subject' model.sensors.firstObject.controller.object.id tagName="tr" class="clickable"}}
-      <td>Асриян Эдуард Арменакович</td>
-      <td>Porshe 911</td>
-      <td>Отличное</td>
-      <td>8 (999) 999-99-99</td>
-    {{/link-to}}
-    {{#link-to 'account.subject' model.sensors.firstObject.controller.object.id tagName="tr" class="clickable"}}
-      <td>Асриян Эдуард Арменакович</td>
-      <td>Porshe 911</td>
-      <td>Отличное</td>
-      <td>8 (999) 999-99-99</td>
-    {{/link-to}}
-    {{#link-to 'account.subject' model.sensors.firstObject.controller.object.id tagName="tr" class="clickable"}}
-      <td>Асриян Эдуард Арменакович</td>
-      <td>Porshe 911</td>
-      <td>Отличное</td>
-      <td>8 (999) 999-99-99</td>
-    {{/link-to}}
-    {{#link-to 'account.subject' model.sensors.firstObject.controller.object.id tagName="tr" class="clickable"}}
-      <td>Асриян Эдуард Арменакович</td>
-      <td>Porshe 911</td>
-      <td>Отличное</td>
-      <td>8 (999) 999-99-99</td>
-    {{/link-to}}
-    {{#link-to 'account.subject' model.sensors.firstObject.controller.object.id tagName="tr" class="clickable"}}
-      <td>Асриян Эдуард Арменакович</td>
-      <td>Porshe 911</td>
-      <td>Отличное</td>
-      <td>8 (999) 999-99-99</td>
-    {{/link-to}}
-    </tbody>
-  </table>
+  {{core/table-component
+    data=model.clients
+    columns=(array
+      (hash
+        label=(t "car.owner_name")
+        path="ownerName"
+      )
+      (hash
+        label=(t "car.model")
+        path="model"
+      )
+      (hash
+        label=(t "car.status")
+        path="status"
+      )
+      (hash
+        label=(t "car.owner_phone")
+        path="ownerPhone"
+      )
+    )
+    onRowClick=(action "onCarClick")
+  }}
 </div>

app/templates/components/core/table-component.hbs

@@ -0,0 +1,31 @@
+<table class="table">
+  <thead>
+  <tr>
+    {{#each columns as |column|}}
+      <th onclick={{action onHeadClick column}}>
+        {{column.label}}
+        {{#if (eq sortColumn column)}}
+          {{#if sortAsc}}
+            <span class="text-small text-muted arrow">
+              {{core/icon-component name="up-arrow"}}
+            </span>
+          {{else}}
+            <span class="text-small text-muted arrow">
+              {{core/icon-component name="down-arrow"}}
+            </span>
+          {{/if}}
+        {{/if}}
+      </th>
+    {{/each}}
+  </tr>
+  </thead>
+  <tbody>
+  {{#each sortedData as |row|}}
+    <tr class="{{if attrs.onRowClick "clickable"}}" onclick={{attrs.onRowClick}}>
+      {{#each columns as |column|}}
+        <td>{{get row column.path}}</td>
+      {{/each}}
+    </tr>
+  {{/each}}
+  </tbody>
+</table>