добавила функционал возврата оплаты, сделала обновление страницы при нажатии на текущий пункт меню, сделала прокрутку в таблицах с зафиксированной шапкой

src/app/components/menu/menu.component.ts

@@ -40,6 +40,9 @@ export class MenuComponent implements OnInit {
     }
 
     redirect(path: string) {
-        this.router.navigate([path]);
+/*      this.router.navigate([path]);*/
+      this.router.routeReuseStrategy.shouldReuseRoute = () => false;
+      this.router.onSameUrlNavigation = 'reload';
+      this.router.navigate([path]);
     }
 }

src/app/interface/data.ts

@@ -38,10 +38,16 @@ export interface Address {
 }
 
 export interface Payment {
+  payload: Payload;
   summ: number;
   type: string;
 }
 
+export interface Payload {
+  id: string;
+  status: string
+}
+
 export interface Order {
   address: Address;
   comment: string;
@@ -92,3 +98,14 @@ export interface Notification {
   new_fin: boolean;
   due: boolean;
 }
+
+export interface ref {
+  amount: number | undefined;
+  status: string;
+}
+
+export interface Refund {
+  admin_return: ref;
+  difference_return: ref;
+  full_return: ref;
+}

src/app/pages/areas/areas.component.html

@@ -9,22 +9,18 @@
   <button (click)="createArea()">Добавить</button>
   <p-table [value]="areas">
     <ng-template pTemplate="header">
-      <tr>
+      <tr   style="position:sticky !important; top: 0">
-        <th>ID</th>
+        <th style="width:35%">ID</th>
-        <th>Наименование зоны</th>
+        <th style="width:35%">Наименование зоны</th>
         <th></th>
         <th></th>
-        <th style="width:10%"></th>
-        <th style="width:10%"></th>
       </tr>
     </ng-template>
     <ng-template pTemplate="body" let-areas>
       <!--*ngIf="color()" style="color: red" [ngClass]="{ui-button-danger: true}"-->
       <tr>
-        <td>{{areas.id}}</td>
+        <td style="width:35%">{{areas.id}}</td>
-        <td>{{areas.name}}</td>
+        <td style="width:35%">{{areas.name}}</td>
-        <td></td>
-        <td></td>
         <td><button (click)="updateArea1(areas.id, areas.name)">Изменить</button></td>
         <td><button (click)="deleteArea(areas.id)">Удалить</button></td>
       </tr>

src/app/pages/areas/areas.component.scss

@@ -0,0 +1,5 @@
+tr {
+  display: table;
+  width: calc(100% - 5px);
+  table-layout: fixed;
+}

src/app/pages/areas/areas.component.ts

@@ -38,6 +38,12 @@ export class AreasComponent implements OnInit {
         next: (result) => {
           let data = result.result;
           this.areas = data;
+          document.getElementsByTagName('thead')[0].style.display = 'table';
+          document.getElementsByTagName('thead')[0].style.width = '100%';
+          document.getElementsByTagName('thead')[0].style.tableLayout = 'fixed';
+          document.getElementsByTagName('tbody')[0].style.display = 'block';
+          document.getElementsByTagName('tbody')[0].style.maxHeight = 'calc(100vh - 290px)';
+          document.getElementsByTagName('tbody')[0].style.overflowY = 'scroll';
         },
         error: (err) => {
           console.log('ERROR: ', err)

src/app/pages/clients/clients.component.html

@@ -9,19 +9,19 @@
     <button (click)="createCient()">Добавить</button>
     <p-table [value]="clients">
       <ng-template pTemplate="header">
-        <tr>
+        <tr   style="position:sticky !important; top: 0">
-          <th>ID</th>
+          <th style="width:30%">ID</th>
-          <th>Наименование организации</th>
+          <th style="width:30%">Наименование организации</th>
-          <th style="width:10%"></th>
+          <th></th>
-          <th style="width:10%"></th>
+          <th></th>
-          <th style="width:10%"></th>
+          <th></th>
         </tr>
       </ng-template>
       <ng-template pTemplate="body" let-client>
         <!--*ngIf="color()" style="color: red" [ngClass]="{ui-button-danger: true}"-->
         <tr>
-          <td>{{client.id}}</td>
+          <td style="width:30%">{{client.id}}</td>
-          <td>{{client.name}}</td>
+          <td style="width:30%">{{client.name}}</td>
           <td><button [disabled]="choose == client.id" (click)="(chooseClient(client.id, client.name))">{{ choose == client.id ? 'Выбран' : 'Выбрать' }}</button></td>
           <td><button (click)="changeClient1(client.id, client.name)">Изменить</button></td>
           <td><button (click)="deleteClient(client.id)">Удалить</button></td>

src/app/pages/clients/clients.component.scss

@@ -0,0 +1,5 @@
+tr {
+  display: table;
+  width: calc(100% - 5px);
+  table-layout: fixed;
+}

src/app/pages/clients/clients.component.ts

@@ -41,6 +41,12 @@ export class ClientsComponent implements OnInit {
           next: (result) => {
             let data = result.result;
             this.clients = data;
+            document.getElementsByTagName('thead')[0].style.display = 'table';
+            document.getElementsByTagName('thead')[0].style.width = '100%';
+            document.getElementsByTagName('thead')[0].style.tableLayout = 'fixed';
+            document.getElementsByTagName('tbody')[0].style.display = 'block';
+            document.getElementsByTagName('tbody')[0].style.maxHeight = 'calc(100vh - 290px)';
+            document.getElementsByTagName('tbody')[0].style.overflowY = 'scroll';
           },
           error: (err) => {
             console.log('ERROR: ', err)

src/app/pages/divisions/divisions.component.html

@@ -9,22 +9,18 @@
   <button (click)="createDivision()">Добавить</button>
   <p-table [value]="divisions">
     <ng-template pTemplate="header">
-      <tr>
+      <tr   style="position:sticky !important; top: 0">
-        <th>ID</th>
+        <th style="width:35%">ID</th>
-        <th>Наименование подразделения</th>
+        <th style="width:35%">Наименование подразделения</th>
         <th></th>
         <th></th>
-        <th style="width:10%"></th>
-        <th style="width:10%"></th>
       </tr>
     </ng-template>
     <ng-template pTemplate="body" let-Division>
       <!--*ngIf="color()" style="color: red" [ngClass]="{ui-button-danger: true}"-->
       <tr>
-        <td>{{Division.id}}</td>
+        <td  style="width:35%">{{Division.id}}</td>
-        <td>{{Division.name}}</td>
+        <td  style="width:35%">{{Division.name}}</td>
-        <td></td>
-        <td></td>
         <td><button (click)="changeDivision1(Division.id, Division.name)">Изменить</button></td>
         <td><button (click)="deleteDivision(Division.id)">Удалить</button></td>
       </tr>

src/app/pages/divisions/divisions.component.scss

@@ -0,0 +1,5 @@
+tr {
+  display: table;
+  width: calc(100% - 5px);
+  table-layout: fixed;
+}

src/app/pages/divisions/divisions.component.ts

@@ -38,6 +38,12 @@ export class DivisionsComponent implements OnInit {
         next: (result) => {
           let data = result.result;
           this.divisions = data;
+          document.getElementsByTagName('thead')[0].style.display = 'table';
+          document.getElementsByTagName('thead')[0].style.width = '100%';
+          document.getElementsByTagName('thead')[0].style.tableLayout = 'fixed';
+          document.getElementsByTagName('tbody')[0].style.display = 'block';
+          document.getElementsByTagName('tbody')[0].style.maxHeight = 'calc(100vh - 290px)';
+          document.getElementsByTagName('tbody')[0].style.overflowY = 'scroll';
         },
         error: (err) => {
           console.log('ERROR: ', err)

src/app/pages/orders/orders.component.html

@@ -5,48 +5,12 @@
   <h2 style="color:red">Выберите клиента</h2>
 </ng-template>
 
-<style>
-  .red {
-    color: red !important;
-    background-color: pink;
-  }
-
-  .orange {
-    color: darkorange !important;
-    background-color: wheat;
-  }
-
-  .green {
-    color: green !important;
-    background-color: lightgreen;
-  }
-
-  .grey {
-    color: grey !important;
-    background-color: lightgray;
-  }
-
-  .yellow {
-    color: darkgoldenrod !important;
-    background-color: lightgoldenrodyellow;
-  }
-
-  .blue {
-    color: blue !important;
-    background-color: lightblue;
-  }
-
-  .lilac {
-    color: #8b00ff !important;
-    background-color: #ebc4eb;
-  }
-</style>
 <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>
+      <tr   style="position:sticky !important; top: 0">
         <th>ID</th>
         <th>Статус</th>
         <!--<p-columnFilter type="text" field="Статус" display="menu"></p-columnFilter>-->
@@ -57,22 +21,9 @@
         <th>Телефон клиента</th>
         <th>Тип оплаты</th>
       </tr>
-      <tr>
+      <tr   style="position:sticky !important; top: 55px">
         <th></th>
         <th><p-columnFilter type="text" field="status_h"></p-columnFilter></th>
-        <!--<p-columnFilter field="statuses" matchMode="in" [showMenu]="false">
-          <ng-template pTemplate="filter" let-value let-filter="filterCallback">
-            <p-multiSelect [ngModel]="value" [options]="statuses" placeholder="Any"
-                           (onChange)="filter($event.value)">
-              <ng-template let-option pTemplate="item">
-                <div class="p-multiselect-representative-option">
-                  <span class="p-ml-1">{{option}}</span>
-                </div>
-              </ng-template>
-            </p-multiSelect>
-          </ng-template>
-        </p-columnFilter>-->
-
         <th><p-columnFilter type="text" field="address.name"></p-columnFilter></th>
         <th></th>
         <th></th>
@@ -154,21 +105,12 @@
       </ng-template>
       <ng-template pTemplate="body" let-ord>
         <tr>
-          <!--<td>
-            <button type="button" pButton pRipple [pRowToggler]="rowData"></button>
-          </td>-->
           <td>{{ord.title}}</td>
 
           <td>{{ord.requested_quantity}}</td>
           <td>-</td>
           <td>{{ord.stock_quantity}}</td>
           <td>-</td>
-
-
-
-          <!--<p-table [value]="ord.modifiers">
-          <ng-template pTemplate="body" let-mod>-->
-
           <td>
         <tbody *ngFor="let mod of ord.modifiers">
           <tr>
@@ -187,8 +129,8 @@
     <p-table [value]="order[0].payment">
       <ng-template pTemplate="header">
         <tr>
-          <th>Сумма к оплате по безналу:</th>
+          <th width="70%">Сумма оплаты по безналу:</th>
-          <th>Тип оплаты:</th>
+          <th width="30%">Тип оплаты:</th>
         </tr>
       </ng-template>
       <ng-template pTemplate="body" let-pay>
@@ -198,6 +140,20 @@
         </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 [disabled]="order[0].payment[0].summ == sumRef" (click)="doAdminRefund(order[0].external_id, order[0].payment[0].payload.id)">Возврат ДС</button></th>
+        </tr>
+      </ng-template>
+    </p-table>
   </div>
 </ng-template>
 

src/app/pages/orders/orders.component.scss

@@ -1,3 +1,50 @@
-.Red {
+button:disabled {
-    color: red;
+  background-color: grey !important;
+  opacity: 50%;
+  cursor: default;
+}
+.red {
+  color: red !important;
+  background-color: pink;
+}
+
+.orange {
+  color: darkorange !important;
+  background-color: wheat;
+}
+
+.green {
+  color: green !important;
+  background-color: lightgreen;
+}
+
+.grey {
+  color: grey !important;
+  background-color: lightgray;
+}
+
+.yellow {
+  color: darkgoldenrod !important;
+  background-color: lightgoldenrodyellow;
+}
+
+.blue {
+  color: blue !important;
+  background-color: lightblue;
+}
+
+.lilac {
+  color: #8b00ff !important;
+  background-color: #ebc4eb;
+}
+
+p-table {
+  height: auto;
+  overflow: scroll
+}
+
+tr {
+  display: table;
+  width: calc(100% - 5px);
+  table-layout: fixed;
 }

src/app/pages/orders/orders.component.ts

@@ -2,7 +2,7 @@ import { Component, OnInit, Renderer2, ElementRef, Input } from "@angular/core";
 import { TableModule } from 'primeng/table';
 import { JsonrpcService, RpcService } from "src/app/services/jsonrpc.service";
 import { MessageService } from "primeng/api";
-import { Order, Products, Delivery_address, Notification } from "src/app/interface/data";
+import { Order, Products, Delivery_address, Notification, Refund } from "src/app/interface/data";
 import { ClientsComponent } from "../clients/clients.component";
 /*import { SwPush, NewsletterService } from '@angular/service-worker*/
 
@@ -26,6 +26,11 @@ export class OrdersComponent implements OnInit {
   public map_due = new Map();
   public myAudioP = new Audio();
   public myAudioA = new Audio();
+  public refund!: Refund;
+  public sumRef: number = 0;
+  public sumRef0: any = 0;
+  public sumRef1: any = 0;
+  public sumRef2: any = 0;
 
 
   public statuses = [
@@ -108,6 +113,13 @@ export class OrdersComponent implements OnInit {
 
 
             this.lastOrderUpdateTime = Date().toString();
+
+            document.getElementsByTagName('thead')[0].style.display = 'table';
+            document.getElementsByTagName('thead')[0].style.width = '100%';
+            document.getElementsByTagName('thead')[0].style.tableLayout = 'fixed';
+            document.getElementsByTagName('tbody')[0].style.display = 'block';
+            document.getElementsByTagName('tbody')[0].style.maxHeight = 'calc(100vh - 290px)';
+            document.getElementsByTagName('tbody')[0].style.overflowY = 'scroll';
           },
           error: (err) => {
             console.log('ERROR: ', err)
@@ -167,9 +179,75 @@ notif2() {
         }
       }
     );
-    this.view = false
+    this.view = false;
+    setTimeout(() => this.getOrderRefunds(this.order[0].external_id), 400);
   }
 
+
+  async getOrderRefunds(id: any) {
+
+    await this.jsonRpcService.rpc2({
+      method: 'getOrderRefunds',
+      params: { "external_id": id }
+    }, RpcService.authService, false)
+      .subscribe({
+        next: (result) => {
+          let data = result.result
+          this.refund =data
+
+          if (this.refund.admin_return.status == 'COMPLETED') {
+            this.sumRef0 = this.refund.admin_return.amount
+
+          } else this.sumRef0 = 0;
+
+          if (this.refund.difference_return.status == 'COMPLETED') {
+            this.sumRef1 = this.refund.difference_return.amount
+
+          } else this.sumRef1 = 0;
+
+          if (this.refund.full_return.status == 'COMPLETED') {
+            this.sumRef2 = this.refund.full_return.amount
+
+          } else this.sumRef2 = 0
+          this.sumRef = this.sumRef0 + this.sumRef1 + this.sumRef2
+        },
+        error: (err) => {
+          console.log('ERROR: ', err)
+          this.messageService.add({
+            severity: 'error',
+            summary: 'Произошла ошибка!',
+          })
+        }
+      }
+    );
+
+
+  }
+
+  async doAdminRefund(id: any, qr_id: any) {
+
+    await this.jsonRpcService.rpc2({
+      method: 'doAdminRefund',
+      params: { "external_id": id, "qr_id": qr_id }
+    }, RpcService.authService, false)
+      .subscribe({
+        next: (result) => {
+          let data = result.result
+          console.log(data)
+        },
+        error: (err) => {
+          console.log('ERROR: ', err)
+          this.messageService.add({
+            severity: 'error',
+            summary: 'Произошла ошибка!',
+          })
+        }
+      }
+      );
+    console.log(id, qr_id)
+  }
+
+
   listOrders() {
     this.view = true;
     this.getOrders();

src/app/pages/terminals/terminals.component.html

@@ -1,42 +1,41 @@
-<h1>Терминалы</h1>
+<div>
+  <h1>Терминалы</h1>
 
-<style>
-  span {
-    padding: 0 5px !important;
-  }
-</style>
-
-<h2 *ngIf="chooseName; else ClientNull">Выбран: {{chooseName}}</h2>
-<ng-template #ClientNull>
-  <h2 style="color:red">Выберите клиента</h2>
-</ng-template>
 
+  <h2 *ngIf="chooseName; else ClientNull">Выбран: {{chooseName}}</h2>
+  <ng-template #ClientNull>
+    <h2 style="color:red">Выберите клиента</h2>
+  </ng-template>
+</div>
 <div *ngIf="new_ter;else new_Terminal">
   <button (click)="registerTerminal()">Добавить</button>
+
   <p-table [value]="terminals">
-      <ng-template pTemplate="header">
+
+    <ng-template pTemplate="header">
         <tr>
-          <th>ID</th>
+          <th style="width: 16%">ID</th>
-          <th>Наименование терминала</th>
+          <th style="width: 16%">Наименование терминала</th>
-          <th style="width:20%">ID точки заказа</th>
+          <th style="width: 16%">Адрес точки заказа</th>
-          <th>Список ID цехов готовки</th>
+          <th style="width: 16%">Список ID цехов готовки</th>
-          <th>Статус подключения</th>
+          <th style="width: 16%">Статус подключения</th>
-          <th style="width: 10%"></th>
+          <th></th>
-          <th style="width: 10%"></th>
+          <th></th>
         </tr>
-      </ng-template>
+    </ng-template>
-      <ng-template pTemplate="body" let-terminals>
+
-          <!--*ngIf="color()" style="color: red" [ngClass]="{ui-button-danger: true}"-->
+    <ng-template pTemplate="body" let-terminals>
-          <tr>
+      <tr>
-            <td>{{terminals.id}}</td>
+        <td style="width: 16%" class="customer-badge status-unqualified">{{terminals.id}}</td>
-            <td>{{terminals.public_id}}</td>
+        <td style="width: 16%">{{terminals.public_id}}</td>
-            <td>{{terminals.division_id}}</td>
+        <td style="width: 16%">{{terminals.division_id}}</td>
-            <td>{{terminals.area_types}}</td>
+        <td style="width: 16%">{{terminals.area_types}}</td>
-            <td></td>
+        <td style="width: 16%"></td>
-            <td><button (click)="updateTerminal1(terminals.id, terminals.public_id, terminals.division_id, terminals.area_types)">Изменить</button></td>
+        <td><button (click)="updateTerminal1(terminals.id, terminals.public_id, terminals.division_id, terminals.area_types)">Изменить</button></td>
-            <td><button (click)="deleteTerminal(terminals.id)">Удалить</button></td>
+        <td><button (click)="deleteTerminal(terminals.id)">Удалить</button></td>
-          </tr>
+      </tr>
-      </ng-template>
+    </ng-template>
+
   </p-table>
 </div>
 

src/app/pages/terminals/terminals.component.scss

@@ -0,0 +1,9 @@
+span {
+  padding: 0 5px !important;
+}
+
+tr {
+  display: table;
+  width: calc(100% - 5px);
+  table-layout: fixed;
+}

src/app/pages/terminals/terminals.component.ts

@@ -45,6 +45,12 @@ export class TerminalsComponent implements OnInit {
         next: (result) => {
           let data = result.result;
           this.terminals = data;
+          document.getElementsByTagName('thead')[0].style.display = 'table';
+          document.getElementsByTagName('thead')[0].style.width = '100%';
+          document.getElementsByTagName('thead')[0].style.tableLayout = 'fixed';
+          document.getElementsByTagName('tbody')[0].style.display = 'block';
+          document.getElementsByTagName('tbody')[0].style.maxHeight = 'calc(100vh - 290px)';
+          document.getElementsByTagName('tbody')[0].style.overflowY = 'scroll';
         },
         error: (err) => {
           console.log('ERROR: ', err)
@@ -55,6 +61,7 @@ export class TerminalsComponent implements OnInit {
         }
       });
     this.chooseName = this.jsonRpcService.ClientChooseName;
+
   }
 
   async getAreas() {