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>
        <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>
        <th><p-columnFilter field="type" matchMode="in" display="menu" [showMatchModes]="false" [showOperator]="false" [showAddButton]="false">
          <ng-template pTemplate="filter" let-value let-filter="filterCallback">
            <p-multiSelect [ngModel]="value" [options]="keysFromObject(orderTypes)" placeholder="Тип заказа"
              (onChange)="filter($event.value)" [label]="orderTypes[leadToTypeOrderType(value)]" [displaySelectedLabel]="false">
              <ng-template let-option pTemplate="item">
                <div class="p-multiselect-representative-option">
                  <span class="p-ml-1">{{orderTypes[leadToTypeOrderType(option)]}}</span>
                </div>
              </ng-template>
            </p-multiSelect>
          </ng-template>
        </p-columnFilter></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>
        <td>{{orderTypes[leadToTypeOrderType(order.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>
          <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 [(ngModel)]="selectedStatus">
              <option>{{ord.status_h}}</option>
              <option>К готовке</option>
              <option>Готовится</option>
              <option>Готово</option>
              <option>Новый</option>
              <option>Выдан</option>
              <option>Напечатан чек</option>
              <option>Отменен</option>
            </select>
            <button (click)="saveStatus(ord.id)" [disabled]="!selectedStatus.length">Сохранить</button>
          </td>
          <td>{{orderTypes[leadToTypeOrderType(ord.type)]}}</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>Сумма оплаты</th>
          <th>Тип оплаты</th>
          <th *ngIf="order[0].payment[0]?.type?.toUpperCase() !== 'CASH'">Статус оплаты</th>
          <!-- <th *ngIf="['PAID', 'NOTIFIED', 'INTERNAL_ERROR', 'PROCESSING'].includes(order[0].payment[0]?.payload?.status || '') && order[0].payment[0]?.type !== 'CASH'">Отмена заказа</th> -->
          <th>Отмена заказа</th>
        </tr>
      </ng-template>
      <ng-template pTemplate="body" let-pay>
        <tr>
          <td>{{pay.summ}}</td>
          <td>{{pay.type | paymentType}}</td>
          <td *ngIf="pay?.type?.toUpperCase() !== 'CASH'">{{pay?.payload?.status | paymentStatus}}</td>
          <!-- <td *ngIf="['PAID', 'NOTIFIED', 'INTERNAL_ERROR', 'PROCESSING'].includes(order[0].payment[0]?.payload?.status || '') && order[0].payment[0]?.type !== 'CASH'"> -->
          <td>
            <button (click)="cancelOrder(pay.payload?.id)" style="width: auto;">
              {{pay?.type?.toUpperCase() == 'SBP'? 'Отменить и вернуть ДС' : 'Отменить'}}
            </button>
          </td>
        </tr>
      </ng-template>
    </p-table>

    <div *ngIf="paymentRefunds.length">
      <h2>Список возвратов:</h2>
      <p-table [value]="paymentRefunds">
        <ng-template pTemplate="header">
          <tr>
            <th>Сумма</th>
            <th>Статус</th>
          </tr>
        </ng-template>
        <ng-template pTemplate="body" let-paymentRefund>
          <tr>
            <td>{{paymentRefund.amount}}</td>
            <td>{{paymentRefund.status}}</td>
          </tr>
        </ng-template>
      </p-table>
    </div>

  </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>