dev #12906

src/app/app.component.ts

@@ -12,7 +12,7 @@ import { CookiesService } from './services/cookies.service';
   providers: [DialogService],
 })
 export class AppComponent implements OnInit {
-  public opened: boolean = false;
+  public opened: boolean = true;
   public isAuth!: boolean;
   private messageComponent!: ComponentRef<Toast>;
   title = 'selfdelivery-admin-panel';

src/app/app.module.ts

@@ -26,8 +26,9 @@ import { ScrollPanelModule } from 'primeng/scrollpanel';
 import { ToastModule } from 'primeng/toast';
 import { ConfirmDialogModule } from 'primeng/confirmdialog';
 import { ConfirmationService } from 'primeng/api';
-
-
+import { DropdownModule } from 'primeng/dropdown';
+import { ChipsModule } from 'primeng/chips';
+import { ButtonModule } from 'primeng/button';
 
 const routes = [
   { path: 'clients', component: ClientsComponent },
@@ -67,6 +68,9 @@ const routes = [
     ConfirmDialogModule,
     TableModule,
     ScrollPanelModule,
+    DropdownModule,
+    ChipsModule,
+    ButtonModule,
     RouterModule.forRoot(routes)
   ],
   providers: [MessageService, { provide: APP_BASE_HREF, useValue: '/' }, ConfirmationService],

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

@@ -16,7 +16,7 @@
         <th style="width: 16%">ID</th>
         <th style="width: 16%">ID кассы ККМ</th>
         <th style="width: 16%">ID точки заказа</th>
-        <th style="width: 16%">Список ID цехов готовки</th>
+        <th style="width: 16%">ID зон доставок</th>
         <th style="width: 16%">Статус подключения</th>
         <th></th>
         <th></th>
@@ -56,22 +56,41 @@
         <th><input type="text" style="width: 400px; height: 30px; font-size:20px"></th>
       </tr>
       <tr>
-        <th>Введите ID точки заказа:</th>
-        <th><input type="text" style="width: 400px; height: 30px; font-size:20px"></th>
-      </tr>
-      <!--<tr>
-        <th>Введите ID цехов готовки:</th>
-
+        <th>Выберите точку заказа:</th>
         <th>
-      <tbody *ngFor="let area of areas">
-        <tr>
-          <input type="checkbox" value="{{area.selected}}" id="ar" [(ngModel)]="area.selected">
-          <span>Цех: {{area.name}}</span>
-        </tr>
-      </tbody>-->
-      <!--</th>-->
+          <p-dropdown autoWidth="false" [options]="divisions" optionLabel="name" [(ngModel)]="selectedDivision"></p-dropdown>
+          
+        </th>
+      </tr>
+      <tr>
+        <th>Введите ID зон доставок:</th>
+        <th>
+          
+          <ul class="selectedAreasList" style="width: 400px; font-size:16px">
+            <p-dropdown autoWidth="false" [options]="areas" optionLabel="name" (onChange)="addAreaToSelected($event)"></p-dropdown>
+            <li *ngFor="let area of selectedAreas">
+              <span>{{area.name}}</span>
+              <button style="font-weight: bold" (click)="removeAreaFromSelected(area.id)">✖</button>
+              <!-- <p-button (click)="removeAreaFromSelected(area.id)" icon="pi pi-times-circle"></p-button> -->
+            </li>
+          </ul>
+          <!-- <p-chips [(ngModel)]="selectedAreas" [allowDuplicate]="false" inputId="chipInputField">
+            <ng-template let-item pTemplate="item">
+              {{item.name}} <i class="fa fa-close"></i>
+            </ng-template>
+          </p-chips> -->
+        </th>
 
-      <!--</tr>-->
+        <!-- <th>
+          <tbody *ngFor="let area of areas">
+            <tr>
+              <input type="checkbox" value="{{area.selected}}" id="ar" [(ngModel)]="area.selected">
+              <span>Цех: {{area.name}}</span>
+            </tr>
+          </tbody>
+        </th> -->
+
+      </tr> 
     </ng-template>
   </p-table>
   <div *ngIf="create; else change">

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

@@ -7,3 +7,42 @@ tr {
   width: calc(100% - 5px);
   table-layout: fixed;
 }
+
+#chipInputField {
+  display: none;
+}
+
+ul.selectedAreasList {
+  padding: 0;
+  list-style-type: none;
+  display: inline-flex;
+  flex-wrap: wrap;
+  overflow-wrap: normal;
+
+  li {
+    margin-left: 4px;
+    margin-top: 2px;
+    padding: 0 6px;
+    width: fit-content;
+    background-color: gray;
+    text-align: center;
+    color: white;
+    outline: none;  
+    border: none;
+    border-radius: 4px;
+    display: flex;
+    align-items: center;
+    button {
+      width: fit-content;
+      padding: 0;
+    }
+  }
+  .ui-dropdown {
+    width: 200px; 
+    height: 30px !important; 
+    font-size:20px;
+    .p-dropdown {
+      height: 30px !important; 
+    }
+  }
+}

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

@@ -1,7 +1,7 @@
 import { Component, OnInit } from "@angular/core";
 import { JsonrpcService, RpcService } from "src/app/services/jsonrpc.service";
 import { MessageService } from "primeng/api";
-import { Terminals, Areas } from "src/app/interface/data";
+import { Terminals, Areas, Divisions } from "src/app/interface/data";
 import { ScrollPanelModule } from 'primeng/scrollpanel';
 import { ConfirmationService, FilterService, FilterMatchMode, SelectItem } from 'primeng/api';
 
@@ -18,7 +18,9 @@ export class TerminalsComponent implements OnInit {
   public create = false;
   public chooseName!: string;
   public areas: Areas[] = [];
-  public chooseArea: Array<string> = [];
+  public divisions: Divisions[] = [];
+  public selectedAreas: Areas[] = [];
+  public selectedDivision?: Divisions;
   public matchModeOptions!: SelectItem[];
 
 
@@ -34,6 +36,8 @@ export class TerminalsComponent implements OnInit {
 
   ngOnInit(): void {
     if (this.choose) { this.getTerminals() };
+    this.getAreas();
+    this.getDivisions();
 
     const customFilterName = "custom-contains";
     this.filterService.register(customFilterName, (value: any, filter: any): boolean => {
@@ -90,8 +94,8 @@ export class TerminalsComponent implements OnInit {
 
   }
 
-  async getAreas() {
-    await this.jsonRpcService.rpc2({
+  getAreas() {
+    this.jsonRpcService.rpc2({
       method: 'getAreas',
       params: {
         "client_id": this.choose
@@ -112,38 +116,82 @@ export class TerminalsComponent implements OnInit {
       });
   }
 
-  updateTerminal1(id: any, public_id: any, division_id: any, area_types: any) {
+  getDivisions() {
+    this.jsonRpcService.rpc2({
+      method: 'getDivisions',
+      params: {
+        "client_id": this.choose
+      }
+    }, RpcService.authService, false)
+      .subscribe({
+        next: (result) => {
+          let data = result.result;
+          this.divisions = data;
+        },
+        error: (err) => {
+          console.log('ERROR: ', err)
+          this.messageService.add({
+            severity: 'error',
+            summary: 'Произошла ошибка!',
+          })
+        }
+      });
+  }
+
+  async updateTerminal1(id: any, public_id: any, division_id: any, area_types: any[]) {
+    this.reset();
     this.new_ter = false;
     setTimeout(() => document.getElementsByTagName("input")[0].value = public_id, 100);
     setTimeout(() => document.getElementsByTagName("input")[1].value = division_id, 100);
     this.jsonRpcService.changeId = id;
-    this.getAreas()
-    for (let i = 0; i < this.areas.length; i++) {
-      if (this.areas[i].name == area_types) {
-        this.areas[i].selected = true
+
+    area_types.forEach(area_type => {
+      const area = this.areas.find(area => area.id == area_type);
+      if (area) {
+        this.selectedAreas.push(area);
       }
+    });
+
+    this.selectedDivision = this.divisions.find(divivsion => divivsion.id == division_id);
+  }
+
+  addAreaToSelected(event: any) {
+    const index = this.selectedAreas.findIndex(area => area.id == event.value.id);
+    if (index == -1) {
+      this.selectedAreas.push(event.value);
     }
   }
 
+  removeAreaFromSelected(areaId: string) {
+    const index = this.selectedAreas.findIndex(area => area.id == areaId);
+    if (index > -1) {
+      this.selectedAreas.splice(index, 1);
+    }
+  }
+
+  reset() {
+    this.selectedAreas = [];
+    this.selectedDivision = undefined;
+  }
+
   updateTerminal() {
-    this.chooseArea = [];
+    // this.chooseArea = [];
     let address = document.getElementsByTagName("input")[1].value
-/*    let areas = document.getElementsByTagName("input")[1].value*/
+    // let areas = document.getElementsByTagName("input")[1].value
     let public_id = document.getElementsByTagName("input")[0].value
     for (let i = 0; i < this.areas.length; i++) {
       
       if (this.areas[i].selected == true) {
-        this.chooseArea.push(this.areas[i].name)
+        // this.chooseArea.push(this.areas[i].name)
       }
     }
-
     this.jsonRpcService.rpc2({
       method: 'updateTerminal',
       params: {
         "client_id": this.choose,
         "terminal_id": this.jsonRpcService.changeId,
-        "address": address,
-        "areas": [1,2,3],
+        "address": this.selectedDivision?.id,
+        "areas": this.selectedAreas.map(area => area.id),
         "public_id": public_id
       }
     }, RpcService.authService, false)
@@ -191,21 +239,20 @@ export class TerminalsComponent implements OnInit {
 
 
   registerTerminal() {
+    this.reset();
     this.new_ter = false;
     this.create = true;
-    this.getAreas()
   }
 
   registerTerminal2() {
-    let public_id = document.getElementsByTagName("input")[0].value
-    let address = document.getElementsByTagName("input")[1].value
+    let public_id = document.getElementsByTagName("input")[0].value;
     this.jsonRpcService.rpc2({
       method: 'createTerminal',
       params: {
         "client_id": this.jsonRpcService.ClientChoose,
         "public_id": public_id,
-        "address": address,
-        "areas": [1,2,3]
+        "address": this.selectedDivision?.id,
+        "areas": this.selectedAreas.map(area => area.id),
       }
     }, RpcService.authService, false)
       .subscribe({