common_Prj/jsjs.js

<form [formGroup]="form">
    <div class="wrapper">
        <div fxLayout="row wrap">
            <div fxFlex="100">
                <div fxLayout="row-reverse" style="place-content:flex-start" fxLayout.xs="column">
                    <div fxFlex="50">
                        <mat-form-field style="width: 100%; color: black;">
                            <input type="text" placeholder="خدمات" matInput [formControl]="serviceCtrl"
                                   [matAutocomplete]="auto">
                            <mat-autocomplete #auto="matAutocomplete">
                                <mat-option *ngFor="let service of filterService"
                                            (click)="request.addServiceById(service.id)"
                                >
                                    {{service.name}}
                                </mat-option>
                            </mat-autocomplete>
                        </mat-form-field>
                    </div>
                    <div fxFlex="50">
                        <mat-form-field style="width: 100%;color: black">
                            <input type="text" placeholder="محصولات" matInput [formControl]="prodctCtrl"
                                   [matAutocomplete]="auto1">
                            <mat-autocomplete #auto1="matAutocomplete">
                                <mat-option *ngFor="let product of filterProduct"
                                            (click)="request.addProductById(product.id)"
                                >
                                    {{product.name}}
                                </mat-option>
                            </mat-autocomplete>
                        </mat-form-field>
                    </div>
                </div>
                
                <div class="wrapper">
                    <div fxLayout="row wrap">
                        <div fxFlex="100">
                            <div fxLayout="row-reverse" style="place-content:flex-start" fxLayout.xs="column">
                                <div fxFlex="50">
                                    <!--<div fxflex="row" fxflex="50">-->
                                    <div fxFlex="column">
                                        <div fxflex="row">
                                            <mat-card>

                                                <mat-list>
                                                    <mat-list-item matLine
                                                                   *ngFor=" let pivotService of request.pivotServices;let  index = index">

                      <span>
                          <a (click)="request.removeServiceById(pivotService.id)">
                                  <img src="../../../../../assets/images/delete.png" alt="delete"
                                       height="18px" width="18px"
                                  >
                    </a>
                          {{pivotService.num * pivotService.price}}
                      </span>
                                                        <span>
                           <button class="buttonMinus" (click)="minusService(pivotService , valueInput.value)"
                                   mat-icon-button>
                      <mat-icon class="iconbutton" aria-label="کاستن">remove</mat-icon>
                    </button>
                    <input matInput #valueInput
                           [value]="pivotService.num" style="text-align: center">
                    <button class="buttonPlus" (click)="plusService(pivotService , valueInput.value)" mat-icon-button>
                    </button>
                    </span>

                                                        <span>
                        {{pivotService.name}}
                    </span>

                                                    </mat-list-item>
                                                </mat-list>

                                            </mat-card>
                                        </div>
                                    </div>
                                    <!--</div>-->
                                </div>

                                <div fxFlex="50">
                                    <div fxFlex="column">
                                        <div fxflex="row">
                                            <mat-card>
                                                <mat-list>
                                                    <mat-list-item matLine
                                                                   *ngFor=" let pivotProduct  of request.pivotProducts;let  index = index">

                    <span>
                              <a (click)="request.removeProductById(pivotProduct .id)">
                      <img src="../../../../../assets/images/delete.png" alt="delete"
                           height="18px" width="18px"
                      >
                    </a>
                        <!--{{pivotProduct.num}} , {{ pivotProduct.price}}-->
                        {{pivotProduct.num * pivotProduct.price}}
                    </span>
                                                        <span>
                                  <button class="buttonMinus" (click)="minusProduct(pivotProduct  , valueInput.value)"
                                          mat-icon-button>
                      <mat-icon class="iconbutton" aria-label="کاستن">remove</mat-icon>
                    </button>
                    <input matInput #valueInput style="text-align: center"
                           [value]="pivotProduct .num">
                    <button class="buttonPlus" (click)="plusProduct(pivotProduct  , valueInput.value)"
                            mat-icon-button>
                      <mat-icon class="iconbutton" aria-label="افزودن">add</mat-icon>
                    </button>
                    </span>


                                                        <span>
                          {{pivotProduct.name}}
                    </span>

                                                    </mat-list-item>
                                                </mat-list>

                                            </mat-card>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>