Format with prettier orders and order detail

apps/angular/projects/ordering/src/pages/orders/order-detail/order-detail.component.html

@@ -1,66 +1,78 @@
-<abp-modal [visible]='visible' (visibleChange)='visibleChange.emit($event)' [options]='modalOption'>
+<abp-modal [visible]="visible" (visibleChange)="visibleChange.emit($event)" [options]="modalOption">
   <ng-template #abpHeader>
-    <h3>{{"OrderingService::ModalTitle" }}</h3>
+    <h3>{{ 'OrderingService::ModalTitle' }}</h3>
   </ng-template>
 
   <ng-template #abpBody>
+    <div *ngIf="order">
+      <div class="container">
+        <lib-order-detail-item label="OrderingService::DisplayName:OrderNo"
+          >#{{ order.orderNo }}</lib-order-detail-item
+        >
+        <lib-order-detail-item label="OrderingService::DisplayName:OrderStatus">{{
+          order.orderStatus
+        }}</lib-order-detail-item>
+        <lib-order-detail-item label="OrderingService::DisplayName:BuyerName">{{
+          order.buyer.name
+        }}</lib-order-detail-item>
+        <lib-order-detail-item label="OrderingService::DisplayName:BuyerEmail">{{
+          order.buyer.email
+        }}</lib-order-detail-item>
 
-    <div *ngIf='order'>
-      <div class='container'>
-        <lib-order-detail-item label="OrderingService::DisplayName:OrderNo">#{{order.orderNo}}</lib-order-detail-item>
-        <lib-order-detail-item label="OrderingService::DisplayName:OrderStatus">{{order.orderStatus}}</lib-order-detail-item>
-        <lib-order-detail-item label="OrderingService::DisplayName:BuyerName">{{order.buyer.name}}</lib-order-detail-item>
-        <lib-order-detail-item label="OrderingService::DisplayName:BuyerEmail">{{order.buyer.email}}</lib-order-detail-item>
-
-        <lib-order-detail-item  label="OrderingService::DisplayName:Address">
-        <span *ngIf='order.address as address'>
-          {{address.description}} <br />
-          {{address.street}}  <br />
-          {{address.zipCode}} <br />
-          {{address.city}} / {{address.country}} <br />
-        </span>
+        <lib-order-detail-item label="OrderingService::DisplayName:Address">
+          <span *ngIf="order.address as address">
+            {{ address.description }} <br />
+            {{ address.street }} <br />
+            {{ address.zipCode }} <br />
+            {{ address.city }} / {{ address.country }} <br />
+          </span>
         </lib-order-detail-item>
-        <lib-order-detail-item label="OrderingService::DisplayName:PaymentMethod">{{order.paymentMethod}}</lib-order-detail-item>
-        <lib-order-detail-item label="OrderingService::DisplayName:Total">{{order.orderTotal | currency}}</lib-order-detail-item>
+        <lib-order-detail-item label="OrderingService::DisplayName:PaymentMethod">{{
+          order.paymentMethod
+        }}</lib-order-detail-item>
+        <lib-order-detail-item label="OrderingService::DisplayName:Total">{{
+          order.orderTotal | currency
+        }}</lib-order-detail-item>
       </div>
-      <br><br><br>
+      <br /><br /><br />
 
-      <ngx-datatable [rows]='(order.items)' default>
+      <ngx-datatable [rows]="order.items" default>
         <!-- TODO: localize column headers -->
-        <ngx-datatable-column [name]="'OrderingService::DisplayName:ProductId'"  prop='productId'></ngx-datatable-column>
-        <ngx-datatable-column [name]="'OrderingService::DisplayName:PictureUrl'" prop='pictureUrl'>
-          <ng-template let-value='value' ngx-datatable-cell-template>
-            <img [src]="mediaServerUrl + '/product-images/' + value" width='80' alt='' />
+        <ngx-datatable-column
+          [name]="'OrderingService::DisplayName:ProductId'"
+          prop="productId"
+        ></ngx-datatable-column>
+        <ngx-datatable-column [name]="'OrderingService::DisplayName:PictureUrl'" prop="pictureUrl">
+          <ng-template let-value="value" ngx-datatable-cell-template>
+            <img [src]="mediaServerUrl + '/product-images/' + value" width="80" alt="" />
           </ng-template>
-
         </ngx-datatable-column>
-        <ngx-datatable-column [name]="'OrderingService::DisplayName:ProductName'" prop='productName'></ngx-datatable-column>
-        <ngx-datatable-column [name]="'OrderingService::DisplayName:UnitPrice'" prop='unitPrice'>
-          <ng-template let-value='value' ngx-datatable-cell-template>
-            {{value | currency }}
+        <ngx-datatable-column
+          [name]="'OrderingService::DisplayName:ProductName'"
+          prop="productName"
+        ></ngx-datatable-column>
+        <ngx-datatable-column [name]="'OrderingService::DisplayName:UnitPrice'" prop="unitPrice">
+          <ng-template let-value="value" ngx-datatable-cell-template>
+            {{ value | currency }}
           </ng-template>
         </ngx-datatable-column>
-        <ngx-datatable-column [name]="'OrderingService::DisplayName:Units'" prop='units'></ngx-datatable-column>
-        <ngx-datatable-column  [name]="'OrderingService::DisplayName:Discount'" prop='discount'>
-          <ng-template let-value='value' ngx-datatable-cell-template>
-            {{value }} %
-          </ng-template>
+        <ngx-datatable-column
+          [name]="'OrderingService::DisplayName:Units'"
+          prop="units"
+        ></ngx-datatable-column>
+        <ngx-datatable-column [name]="'OrderingService::DisplayName:Discount'" prop="discount">
+          <ng-template let-value="value" ngx-datatable-cell-template> {{ value }} % </ng-template>
         </ngx-datatable-column>
         <ngx-datatable-column [name]="'OrderingService::DisplayName:TotalPrice'">
-          <ng-template let-row='row' ngx-datatable-cell-template>
-            {{(row.units * row.unitPrice) | currency }}
+          <ng-template let-row="row" ngx-datatable-cell-template>
+            {{ row.units * row.unitPrice | currency }}
           </ng-template>
         </ngx-datatable-column>
       </ngx-datatable>
-
-
     </div>
   </ng-template>
 
-
   <ng-template #abpFooter>
-    <button type='button' class='btn btn-secondary' abpClose>{{
-      'AbpUi::Close'
-      }}</button>
+    <button type="button" class="btn btn-secondary" abpClose>{{ 'AbpUi::Close' }}</button>
   </ng-template>
 </abp-modal>

apps/angular/projects/ordering/src/pages/orders/orders.component.html

@@ -1,18 +1,15 @@
-
-
 <div class="card">
   <div class="card-header">
     <div class="row">
       <div class="col col-md-6">
         <h5 class="card-title">{{ 'AbpOrdering::Orders' | abpLocalization }}</h5>
       </div>
-
     </div>
   </div>
   <div class="card-body">
     <ngx-datatable [rows]="items" [count]="count" [list]="list" default>
       <!-- TODO: localize column headers -->
-      <ngx-datatable-column name="" [sortable]='false' prop="id" >
+      <ngx-datatable-column name="" [sortable]="false" prop="id">
         <ng-template let-row="row" ngx-datatable-cell-template>
           <div ngbDropdown container="body" class="d-inline-block">
             <button
@@ -26,51 +23,65 @@
             <div ngbDropdownMenu>
               <button
                 class="dropdown-item"
-                (click)='openModal(row)'
-                *abpPermission='permissions.detail'
+                (click)="openModal(row)"
+                *abpPermission="permissions.detail"
               >
                 {{ 'AbpUi::Detail' | abpLocalization }}
               </button>
               <button
                 class="dropdown-item"
-                (click)='setAsShipped(row)'
-                *abpPermission='permissions.setAsShipped'
+                (click)="setAsShipped(row)"
+                *abpPermission="permissions.setAsShipped"
               >
                 {{ 'OrderingService::Permission:Orders.SetAsShipped' | abpLocalization }}
               </button>
               <!-- Todo: Add permissions -->
               <button
-              class="dropdown-item"
-              *abpPermission='permissions.setAsCancelled'
-              (click)='setAsCancelled(row)'
-            >
-              {{ 'OrderingService::Permission:Orders.SetAsCancelled' | abpLocalization }}
-            </button>
+                class="dropdown-item"
+                *abpPermission="permissions.setAsCancelled"
+                (click)="setAsCancelled(row)"
+              >
+                {{ 'OrderingService::Permission:Orders.SetAsCancelled' | abpLocalization }}
+              </button>
             </div>
           </div>
         </ng-template>
       </ngx-datatable-column>
-      <ngx-datatable-column [name]="'OrderingService::DisplayName:OrderNo' | abpLocalization" prop="orderNo"></ngx-datatable-column>
-      <ngx-datatable-column [name]="'OrderingService::DisplayName:OrderDate' | abpLocalization" prop="orderDate" >
+      <ngx-datatable-column
+        [name]="'OrderingService::DisplayName:OrderNo' | abpLocalization"
+        prop="orderNo"
+      ></ngx-datatable-column>
+      <ngx-datatable-column
+        [name]="'OrderingService::DisplayName:OrderDate' | abpLocalization"
+        prop="orderDate"
+      >
         <ng-template let-value="value" ngx-datatable-cell-template>
-          <span>{{ value | date }}</span >
+          <span>{{ value | date }}</span>
         </ng-template>
       </ngx-datatable-column>
-      <ngx-datatable-column [name]="'OrderingService::DisplayName:OrderTotal' | abpLocalization" prop="orderTotal" >
+      <ngx-datatable-column
+        [name]="'OrderingService::DisplayName:OrderTotal' | abpLocalization"
+        prop="orderTotal"
+      >
         <ng-template let-value="value" ngx-datatable-cell-template>
-          <span>{{ value  | currency  }}</span >
+          <span>{{ value | currency }}</span>
         </ng-template>
       </ngx-datatable-column>
-      <ngx-datatable-column [name]="'OrderingService::DisplayName:OrderStatus' | abpLocalization" prop="orderStatus">
+      <ngx-datatable-column
+        [name]="'OrderingService::DisplayName:OrderStatus' | abpLocalization"
+        prop="orderStatus"
+      >
         <ng-template let-value="value" ngx-datatable-cell-template>
-             {{ "OrderingService::Enum:OrderStatus:" + value | abpLocalization }}
+          {{ 'OrderingService::Enum:OrderStatus:' + value | abpLocalization }}
         </ng-template>
       </ngx-datatable-column>
     </ngx-datatable>
   </div>
 </div>
 
-
-  <lib-order-detail  [visible]='isModalVisible' (visibleChange)='closeModal($event)'  [order]='selectedOrder' >
-  </lib-order-detail>
-
+<lib-order-detail
+  [visible]="isModalVisible"
+  (visibleChange)="closeModal($event)"
+  [order]="selectedOrder"
+>
+</lib-order-detail>