h-selfdelivery-admin-panel-p/src/app/pages/orders/orders.component.html

<h1>Заказы</h1>

<h2 *ngIf="chooseName; else ClientNull">Выбран: {{chooseName}}</h2>
<ng-template #ClientNull>
  <h2 style="color:red">Выберите клиента</h2>
</ng-template>

<div *ngIf="view; else order_v">
  <p>Время последнего обновления: {{lastOrderUpdateTime | date:'dd.MM.yyyy HH:mm:ss'}}</p>
  <button (click)="getOrders()">Обновить</button>
  <p-table [value]="orders">
    <ng-template pTemplate="header">
      <tr style="position:sticky !important; top: 0">
        <th>ID</th>
        <th>Статус</th>
        <!--<p-columnFilter type="text" field="Статус" display="menu"></p-columnFilter>-->
        <th>ID точки заказа</th>
        <th>Дата создания</th>
        <th>Дата самовывоза</th>
        <th>Внешний ID заказа</th>
        <th>Телефон клиента</th>
        <th>Тип оплаты</th>
      </tr>
      <tr style="position:sticky !important; top: 55px">
        <th><p-columnFilter type="text" field="id" [matchModeOptions]="matchModeOptions" [matchMode]="'custom-contains'"></p-columnFilter></th>
        <th><p-columnFilter type="text" field="status_h" [matchModeOptions]="matchModeOptions" [matchMode]="'custom-contains'"></p-columnFilter></th>
        <th><p-columnFilter type="text" field="address.name" [matchModeOptions]="matchModeOptions" [matchMode]="'custom-contains'"></p-columnFilter></th>
        <th></th>
        <th></th>
        <th><p-columnFilter type="text" field="external_id" [matchModeOptions]="matchModeOptions" [matchMode]="'custom-contains'"></p-columnFilter></th>
        <th><p-columnFilter type="text" field="phone" [matchModeOptions]="matchModeOptions" [matchMode]="'custom-contains'"></p-columnFilter></th>
        <th></th>
      </tr>
    </ng-template>
    <ng-template pTemplate="body" let-order>
      <!--*ngIf="color()" style="color: red" [ngClass]="{ui-button-danger: true}"-->
      <tr (click)="vievOrder(order.id)" #ordtable style="cursor: pointer">
        <td id="order">{{order.id}}</td>
        <td [ngClass]="{'red': order.item_style == 'red','orange': order.item_style == 'orange','green': order.item_style == 'green','grey': order.item_style == 'grey','yellow': order.item_style == 'yellow','blue': order.item_style == 'blue','lilac': order.item_style == 'lilac', 'pink': order.item_style == 'pink'}">{{order.status_h}}</td>
        <td>{{order.address.name}}</td>
        <td>{{order.date_created | date:'HH:mm dd.MM.yyyy'}}</td>
        <td>{{order.due_datetime | date:'HH:mm dd.MM.yyyy'}}</td>
        <td>{{order.external_id}}</td>
        <td>{{order.phone}}</td>
        <td *ngIf="order.payment[0]; else nd">{{order.payment[0].type}}</td>
      </tr>
    </ng-template>
    <ng-template #nd>
      <td>Нет данных</td>
    </ng-template>
  </p-table>
</div>

<ng-template #order_v>
  <div>
    <button (click)="listOrders()">К списку</button>
    <h1>Заказ: {{order[0].id}}</h1>
    <p-table [value]="order">
      <ng-template pTemplate="header">
        <tr>
          <th>Внешний ID заказа</th>
          <th>Дата создания</th>
          <th>ID точки заказа</th>
          <th>Статус</th>
        </tr>
      </ng-template>
      <ng-template pTemplate="body" let-ord>
        <tr>
          <td><input type="text" textarea disabled value="{{ord.external_id}}"></td>
          <td><input textarea disabled type="datetime-local" value="{{ord.date_created}}"></td>
          <td><input textarea disabled type="text" value="{{ord.address.id}}"></td>
          <td>
            <select>
              <option selected>{{ord.status_h}}</option>
              <option>К готовке</option>
              <option>Готовится</option>
              <option>Готово</option>
              <option>Отменен</option>
              <option>Можно забирать</option>
              <option>У курьера</option>
              <option>Доставлен</option>
              <option>Не подтвержден</option>
              <option>Требует согласия</option>
              <option>Требуется оплата</option>
              <option>Оплата просрочена</option>
              <option>Новый</option>
              <option>Выдан</option>
              <option>Нужен возврат</option>
              <option>Напечатан</option>
            </select>
          </td>
        </tr>
      </ng-template>
    </p-table>
    <h2>Состав заказа:</h2>
    <p-table [value]="order[0].products">
      <ng-template pTemplate="header">
        <tr>
          <th>Товар</th>
          <th>Кол-во (факт.)</th>
          <th>Цена</th>
          <th>Кол-во (реал.)</th>
          <th>Стоимость</th>
          <th>Модификаторы</th>
        </tr>
      </ng-template>
      <ng-template pTemplate="body" let-ord>
        <tr>
          <td>{{ord.title}}</td>

          <td>{{ord.requested_quantity}}</td>
          <td>-</td>
          <td>{{ord.stock_quantity}}</td>
          <td>-</td>
          <td>
        <tbody *ngFor="let mod of ord.modifiers">
          <tr>
            {{mod.group}}
          </tr>
          <tr>
            {{mod.title}}
          </tr>
        </tbody>
        </td>
        </tr>
      </ng-template>
    </p-table>

    <p-table>
      <ng-template pTemplate="header">
        <tr>
          <th width="15%">Комментарий:</th>
          <th width="85%" style="font-weight: normal">{{order[0].comment}}</th>
        </tr>
      </ng-template>
    </p-table>

    <h2>Оплата:</h2>
    <p-table [value]="order[0].payment">
      <ng-template pTemplate="header">
        <tr>
          <th width="50%">Сумма оплаты по безналу:</th>
          <th width="50%">Тип оплаты:</th>
        </tr>
      </ng-template>
      <ng-template pTemplate="body" let-pay>
        <tr>
          <td>{{pay.summ}}</td>
          <td>{{pay.type}}</td>
        </tr>
      </ng-template>
    </p-table>

    <h2>Возвраты:</h2>
    <p-table>
      <ng-template pTemplate="header">
        <tr>
          <th width="70%">Сумма по возвратам:</th>
          <th width="30%"></th>
        </tr>
        <tr>
          <th>{{sumRef}}</th>
          <th><button (click)="confirm(order[0].external_id, order[0].payment[0].type, order[0].id)">Отменить</button></th>
          <!--<th><button [disabled]="order[0].payment[0].summ == sumRef || pay == false || this.order[0].payment == []" (click)="confirm(order[0].external_id, order[0].payment[0].payload.id)">Возврат ДС</button></th>-->
          <!--<th><button disabled>Возврат ДС</button></th>-->
        </tr>
      </ng-template>
    </p-table>
  </div>
</ng-template>

<p-toast position="bottom-right" key="br" closable="false"></p-toast>
<p-confirmDialog header="Предупреждение" icon="pi pi-exclamation-triangle" defaultFocus="reject" rejectButtonStyleClass="p-button-outlined" [style]="{width: '30vw'}"></p-confirmDialog>