Добавила диалог подтверждения на удаление элементов и на отмену заказа

src/app/app.component.scss

@@ -1,3 +1,4 @@
 .main-container {
     height: 100%;
+    z-index: auto !important;
 }

src/app/app.module.ts

@@ -24,6 +24,8 @@ import { ExitComponentComponent } from './components/exit-component/exit-compone
 import { TableModule } from 'primeng/table';
 import { ScrollPanelModule } from 'primeng/scrollpanel';
 import { ToastModule } from 'primeng/toast';
+import { ConfirmDialogModule } from 'primeng/confirmdialog';
+import { ConfirmationService } from 'primeng/api';
 
 
 
@@ -62,11 +64,12 @@ const routes = [
     ReactiveFormsModule,
     ToastModule,
     MessagesModule,
+    ConfirmDialogModule,
     TableModule,
     ScrollPanelModule,
     RouterModule.forRoot(routes)
   ],
-  providers: [MessageService, {provide: APP_BASE_HREF, useValue: '/'}],
+  providers: [MessageService, { provide: APP_BASE_HREF, useValue: '/' }, ConfirmationService],
   bootstrap: [AppComponent]
 })
 export class AppModule { }

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

@@ -9,7 +9,7 @@
   <button (click)="createArea()">Добавить</button>
   <p-table [value]="areas">
     <ng-template pTemplate="header">
-      <tr   style="position:sticky !important; top: 0">
+      <tr style="position:sticky !important; top: 0">
         <th style="width:35%">ID</th>
         <th style="width:35%">Наименование зоны</th>
         <th></th>
@@ -22,7 +22,7 @@
         <td style="width:35%">{{areas.id}}</td>
         <td style="width:35%">{{areas.name}}</td>
         <td><button (click)="updateArea1(areas.id, areas.name)">Изменить</button></td>
-        <td><button (click)="deleteArea(areas.id)">Удалить</button></td>
+        <td><button (click)="confirm(areas.id)">Удалить</button></td>
       </tr>
     </ng-template>
   </p-table>
@@ -45,3 +45,6 @@
     <button (click)="updateArea()">Сохранить</button>
   </ng-template>
 </ng-template>
+
+<p-confirmDialog header="Предупреждение" icon="pi pi-exclamation-triangle" defaultFocus="reject" rejectButtonStyleClass="p-button-outlined"></p-confirmDialog>
+

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

@@ -2,6 +2,7 @@ import { Component, OnInit } from "@angular/core";
 import { JsonrpcService, RpcService } from "src/app/services/jsonrpc.service";
 import { MessageService } from "primeng/api";
 import { Areas } from "src/app/interface/data";
+import { ConfirmationService } from 'primeng/api';
 
 
 @Component({
@@ -18,7 +19,8 @@ export class AreasComponent implements OnInit {
 
   constructor(
     private jsonRpcService: JsonrpcService,
-    private messageService: MessageService
+    private messageService: MessageService,
+    private confirmationService: ConfirmationService
   ) { }
 
   ngOnInit(): void {
@@ -87,7 +89,7 @@ export class AreasComponent implements OnInit {
       });
     this.new_ar = true;
     this.jsonRpcService.changeId = "";
-    this.getAreas();
+    setTimeout(() => this.getAreas(), 100);
   }
 
   deleteArea(id: any) {
@@ -146,4 +148,13 @@ export class AreasComponent implements OnInit {
 
   }
 
+  confirm(id: any) {
+    this.confirmationService.confirm({
+      message: 'Вы действительно хотите удалить элемент?',
+      accept: () => {
+        this.deleteArea(id)
+      }
+    });
+  }
+
 }

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

@@ -5,45 +5,48 @@
   <h2 style="color:red">Выберите клиента</h2>
 </ng-template>
 
-  <div *ngIf="new_cl;else new_client">
+<div *ngIf="new_cl;else new_client">
-    <button (click)="createCient()">Добавить</button>
+  <button (click)="createCient()">Добавить</button>
-    <p-table [value]="clients">
+  <p-table [value]="clients">
-      <ng-template pTemplate="header">
+    <ng-template pTemplate="header">
-        <tr   style="position:sticky !important; top: 0">
+      <tr style="position:sticky !important; top: 0">
-          <th style="width:30%">ID</th>
+        <th style="width:30%">ID</th>
-          <th style="width:30%">Наименование организации</th>
+        <th style="width:30%">Наименование организации</th>
-          <th></th>
+        <th></th>
-          <th></th>
+        <th></th>
-          <th></th>
+        <th></th>
-        </tr>
+      </tr>
-      </ng-template>
-      <ng-template pTemplate="body" let-client>
-        <!--*ngIf="color()" style="color: red" [ngClass]="{ui-button-danger: true}"-->
-        <tr>
-          <td style="width:30%">{{client.id}}</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>
-        </tr>
-      </ng-template>
-    </p-table>
-  </div>
-
-  <ng-template #new_client>
-    <button (click)="getClients()">К списку</button>
-    <p-table>
-      <ng-template pTemplate="header">
-        <tr>
-          <th>Введите наименование организации:</th>
-          <th><input type="text" style="width: 400px; height: 30px; font-size:20px"></th>
-        </tr>
-      </ng-template>
-    </p-table>
-    <div *ngIf="create; else change">
-      <button (click)="createClient2()">Создать</button>
-    </div>
-    <ng-template #change>
-      <button (click)="changeClient()">Сохранить</button>
     </ng-template>
+    <ng-template pTemplate="body" let-client>
+      <!--*ngIf="color()" style="color: red" [ngClass]="{ui-button-danger: true}"-->
+      <tr>
+        <td style="width:30%">{{client.id}}</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)="confirm(client.id)">Удалить</button></td>
+      </tr>
+    </ng-template>
+  </p-table>
+</div>
+
+<ng-template #new_client>
+  <button (click)="getClients()">К списку</button>
+  <p-table>
+    <ng-template pTemplate="header">
+      <tr>
+        <th>Введите наименование организации:</th>
+        <th><input type="text" style="width: 400px; height: 30px; font-size:20px"></th>
+      </tr>
+    </ng-template>
+  </p-table>
+  <div *ngIf="create; else change">
+    <button (click)="createClient2()">Создать</button>
+  </div>
+  <ng-template #change>
+    <button (click)="changeClient()">Сохранить</button>
   </ng-template>
+</ng-template>
+
+<p-confirmDialog header="Предупреждение" icon="pi pi-exclamation-triangle" defaultFocus="reject" rejectButtonStyleClass="p-button-outlined"></p-confirmDialog>
+

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

@@ -2,6 +2,7 @@ import { Component, OnInit } from "@angular/core";
 import { JsonrpcService, RpcService } from "src/app/services/jsonrpc.service";
 import { MessageService } from "primeng/api";
 import { Client } from "src/app/interface/data";
+import { ConfirmationService } from 'primeng/api';
 
 
 
@@ -21,7 +22,8 @@ export class ClientsComponent implements OnInit {
 
     constructor(
       private jsonRpcService: JsonrpcService,
-      private messageService: MessageService
+      private messageService: MessageService,
+      private confirmationService: ConfirmationService
     ) { }
 
   ngOnInit(): void {
@@ -116,13 +118,10 @@ export class ClientsComponent implements OnInit {
   }
 
   chooseClient(id: any, name: any) {
-    this.myAudio.src = "../../../assets/myAudio.mp3"
     this.jsonRpcService.ClientChooseName = name;
     this.jsonRpcService.ClientChoose = id;
     this.choose = this.jsonRpcService.ClientChoose;
     this.chooseName = this.jsonRpcService.ClientChooseName;
-    //this.myAudio.load();
-    //this.myAudio.play();
   }
 
   createCient() {
@@ -155,4 +154,13 @@ export class ClientsComponent implements OnInit {
     
   }
 
+  confirm(id: any) {
+    this.confirmationService.confirm({
+      message: 'Вы действительно хотите удалить элемент?',
+      accept: () => {
+        this.deleteClient(id)
+      }
+    });
+  }
+
 }

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

@@ -22,7 +22,7 @@
         <td  style="width:35%">{{Division.id}}</td>
         <td  style="width:35%">{{Division.name}}</td>
         <td><button (click)="changeDivision1(Division.id, Division.name)">Изменить</button></td>
-        <td><button (click)="deleteDivision(Division.id)">Удалить</button></td>
+        <td><button (click)="confirm(Division.id)">Удалить</button></td>
       </tr>
     </ng-template>
   </p-table>
@@ -45,3 +45,7 @@
     <button (click)="changeDivision()">Сохранить</button>
   </ng-template>
 </ng-template>
+
+<p-confirmDialog header="Предупреждение" icon="pi pi-exclamation-triangle" defaultFocus="reject" rejectButtonStyleClass="p-button-outlined"></p-confirmDialog>
+
+

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

@@ -2,6 +2,7 @@ import { Component, OnInit } from "@angular/core";
 import { JsonrpcService, RpcService } from "src/app/services/jsonrpc.service";
 import { MessageService } from "primeng/api";
 import { Divisions } from "src/app/interface/data";
+import { ConfirmationService } from 'primeng/api';
 
 
 @Component({
@@ -15,10 +16,12 @@ export class DivisionsComponent implements OnInit {
   public choose = this.jsonRpcService.ClientChoose;
   public create = false;
   public chooseName!: string;
+  public ind: boolean = false;
 
   constructor(
     private jsonRpcService: JsonrpcService,
-    private messageService: MessageService
+    private messageService: MessageService,
+    private confirmationService: ConfirmationService
   ) { }
 
   ngOnInit(): void {
@@ -87,7 +90,7 @@ export class DivisionsComponent implements OnInit {
       });
     this.new_div = true;
     this.jsonRpcService.changeId = "";
-    this.getDivisions();
+    setTimeout(() => this.getDivisions(), 100);
   }
 
   deleteDivision(id: any) {
@@ -153,4 +156,13 @@ export class DivisionsComponent implements OnInit {
 
   }
 
+  confirm(id: any) {
+    this.confirmationService.confirm({
+      message: 'Вы действительно хотите удалить элемент?',
+      accept: () => {
+        this.deleteDivision(id)
+      }
+    });
+  }
+
 }

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

@@ -10,7 +10,7 @@
   <button (click)="getOrders()">Обновить</button>
   <p-table [value]="orders">
     <ng-template pTemplate="header">
-      <tr   style="position:sticky !important; top: 0">
+      <tr style="position:sticky !important; top: 0">
         <th>ID</th>
         <th>Статус</th>
         <!--<p-columnFilter type="text" field="Статус" display="menu"></p-columnFilter>-->
@@ -21,7 +21,7 @@
         <th>Телефон клиента</th>
         <th>Тип оплаты</th>
       </tr>
-      <tr   style="position:sticky !important; top: 55px">
+      <tr style="position:sticky !important; top: 55px">
         <th></th>
         <th><p-columnFilter type="text" field="status_h"></p-columnFilter></th>
         <th><p-columnFilter type="text" field="address.name"></p-columnFilter></th>
@@ -45,9 +45,9 @@
         <td *ngIf="order.payment[0]; else nd">{{order.payment[0].type}}</td>
       </tr>
     </ng-template>
-<ng-template #nd>
+    <ng-template #nd>
-  <td>Нет данных</td>
+      <td>Нет данных</td>
-</ng-template>
+    </ng-template>
   </p-table>
 </div>
 
@@ -150,7 +150,7 @@
         </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>-->
+          <!--<th><button [disabled]="order[0].payment[0].summ == sumRef" (click)="confirm(order[0].external_id, order[0].payment[0].payload.id)">Возврат ДС</button></th>-->
           <th><button disabled>Возврат ДС</button></th>
         </tr>
       </ng-template>
@@ -159,6 +159,8 @@
 </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"></p-confirmDialog>
+
 
 
 

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

@@ -5,6 +5,7 @@ import { MessageService } from "primeng/api";
 import { Order, Products, Delivery_address, Notification, Refund } from "src/app/interface/data";
 import { ClientsComponent } from "../clients/clients.component";
 import { ToastModule } from 'primeng/toast';
+import { ConfirmationService } from 'primeng/api';
 /*import { SwPush, NewsletterService } from '@angular/service-worker*/
 
 
@@ -57,6 +58,7 @@ export class OrdersComponent implements OnInit {
       private jsonRpcService: JsonrpcService,
       private messageService: MessageService,
       private clientsComponent: ClientsComponent,
+      private confirmationService: ConfirmationService
     ) {
     }
 
@@ -291,4 +293,13 @@ notif2() {
       };
     }
   }
+
+  confirm(id: any, qr_id: any) {
+    this.confirmationService.confirm({
+      message: 'Вы действительно хотите отменить заказ?',
+      accept: () => {
+        this.doAdminRefund(id, qr_id)
+      }
+    });
+  }
 }

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

@@ -1,7 +1,6 @@
 <div>
   <h1>Терминалы</h1>
 
-
   <h2 *ngIf="chooseName; else ClientNull">Выбран: {{chooseName}}</h2>
   <ng-template #ClientNull>
     <h2 style="color:red">Выберите клиента</h2>
@@ -12,16 +11,16 @@
 
   <p-table [value]="terminals">
 
-    <ng-template pTemplate="header">
+    <ng-template pTemplate="header" class="head">
-        <tr>
+      <tr>
-          <th style="width: 16%">ID</th>
+        <th style="width: 16%">ID</th>
-          <th style="width: 16%">Наименование терминала</th>
+        <th style="width: 16%">Наименование терминала</th>
-          <th style="width: 16%">Адрес точки заказа</th>
+        <th style="width: 16%">Адрес точки заказа</th>
-          <th style="width: 16%">Список ID цехов готовки</th>
+        <th style="width: 16%">Список ID цехов готовки</th>
-          <th style="width: 16%">Статус подключения</th>
+        <th style="width: 16%">Статус подключения</th>
-          <th></th>
+        <th></th>
-          <th></th>
+        <th></th>
-        </tr>
+      </tr>
     </ng-template>
 
     <ng-template pTemplate="body" let-terminals>
@@ -32,7 +31,7 @@
         <td style="width: 16%">{{terminals.area_types}}</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)="deleteTerminal(terminals.id)">Удалить</button></td>
+        <td><button (click)="confirm(terminals.id)">Удалить</button></td>
       </tr>
     </ng-template>
 
@@ -74,3 +73,6 @@
     <button (click)="updateTerminal()">Сохранить</button>
   </ng-template>
 </ng-template>
+
+<p-confirmDialog header="Предупреждение" icon="pi pi-exclamation-triangle" defaultFocus="reject" rejectButtonStyleClass="p-button-outlined"></p-confirmDialog>
+

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

@@ -3,6 +3,7 @@ import { JsonrpcService, RpcService } from "src/app/services/jsonrpc.service";
 import { MessageService } from "primeng/api";
 import { Terminals, Areas } from "src/app/interface/data";
 import { ScrollPanelModule } from 'primeng/scrollpanel';
+import { ConfirmationService } from 'primeng/api';
 
 
 @Component({
@@ -23,6 +24,7 @@ export class TerminalsComponent implements OnInit {
   constructor(
     private jsonRpcService: JsonrpcService,
     private messageService: MessageService,
+    private confirmationService: ConfirmationService
 
     //readonly swPush: SwPush,
     //private newsletterService: NewsletterService
@@ -131,7 +133,7 @@ export class TerminalsComponent implements OnInit {
       });
     this.new_ter = true;
     this.jsonRpcService.changeId = "";
-    this.getTerminals();
+    setTimeout(() => this.getTerminals(), 100);
   }
 
   deleteTerminal(id: any) {
@@ -190,4 +192,13 @@ export class TerminalsComponent implements OnInit {
 
   }
 
+  confirm(id: any) {
+    this.confirmationService.confirm({
+      message: 'Вы действительно хотите удалить элемент?',
+      accept: () => {
+        this.deleteTerminal(id)
+      }
+    });
+  }
+
 }

src/styles.scss

@@ -52,4 +52,8 @@ h1 {
   cursor: pointer;
 }
 
+.mat-sidenav {
+  z-index: auto !important;
+}
+