Slu/order list (#217)

sluFicodes · SHENGXING LU · web-flow · commit 832f025e5d9e · 2026-03-11T12:20:48.000+01:00
* order item action shown in front

* filter by order item action

---------

Co-authored-by: SHENGXING LU &lt;slu@SHENGXINGs-MacBook-Air.local&gt;
diff --git a/src/app/pages/product-orders/sections/order-info/order-info.component.html b/src/app/pages/product-orders/sections/order-info/order-info.component.html
@@ -30,6 +30,51 @@
 <!-- FILTERS -->
 <div class="w-full h-fit mb-4 flex flex-col">
     <div class="flex w-full flex-col items-center lg:flex-row justify-between">
+        <div class="p-8 w-full">
+            <div class="flex flex-row mb-1">
+                <fa-icon [icon]="faSwatchbook" class="fa-base text-primary-100 align-middle mr-2"></fa-icon>
+                <h2 class="text-base dark:text-white font-bold">{{ 'PRODUCT_ORDERS._filter_action' | translate }}</h2>
+            </div>
+            <button id="dropdownActionButton" data-dropdown-toggle="dropdownAction" (click)="$event.stopPropagation();"
+                    class="text-black border border-primary-100sa dark:text-white w-full justify-between bg-white dark:bg-secondary-200 hover:bg-gray-100 dark:hover:bg-secondary-300 focus:ring-2 focus:outline-none focus:ring-primary-100 font-medium rounded-lg text-sm p-2.5 text-center inline-flex items-center"
+                    type="button">
+                @if(actionFilters.length > 0){
+                    {{actionFilters.join(', ')}}
+                } @else {
+                    {{ 'PRODUCT_ORDERS._filter_action' | translate }}
+                }
+                <svg class="w-4 h-4 ml-2" aria-hidden="true" fill="none" stroke="currentColor" viewBox="0 0 24 24"
+                    xmlns="http://www.w3.org/2000/svg">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
+                </svg>
+            </button>
+
+            <div id="dropdownAction" class="z-20 hidden w-fit md:w-1/5 p-3 bg-white rounded-lg border dark:bg-secondary-200">
+                <ul class="space-y-2 text-sm" aria-labelledby="dropdownActionButton">
+                    <li class="flex items-center">
+                        <input id="actionAdd" type="checkbox" [checked]="actionFilters.includes('add')" (change)="onActionFilterChange('add')"
+                        class="w-4 h-4 bg-gray-100 checked:bg-primary-100 dark:checked:bg-primary-100 border-gray-300 rounded focus:ring-primary-100 dark:focus:ring-primary-100 dark:ring-offset-gray-700 focus:ring-2 dark:bg-gray-600 dark:border-gray-500" />
+                        <label for="actionAdd" class="ml-2 text-sm font-medium text-gray-900 dark:text-gray-100">
+                            {{ 'PRODUCT_ORDERS._action_add' | translate }}
+                        </label>
+                    </li>
+                    <li class="flex items-center">
+                        <input id="actionModify" type="checkbox" [checked]="actionFilters.includes('modify')" (change)="onActionFilterChange('modify')"
+                        class="w-4 h-4 bg-gray-100 checked:bg-primary-100 dark:checked:bg-primary-100 border-gray-300 rounded focus:ring-primary-100 dark:focus:ring-primary-100 dark:ring-offset-gray-700 focus:ring-2 dark:bg-gray-600 dark:border-gray-500" />
+                        <label for="actionModify" class="ml-2 text-sm font-medium text-gray-900 dark:text-gray-100">
+                            {{ 'PRODUCT_ORDERS._action_modify' | translate }}
+                        </label>
+                    </li>
+                    <li class="flex items-center">
+                        <input id="actionDelete" type="checkbox" [checked]="actionFilters.includes('delete')" (change)="onActionFilterChange('delete')"
+                        class="w-4 h-4 bg-gray-100 checked:bg-primary-100 dark:checked:bg-primary-100 border-gray-300 rounded focus:ring-primary-100 dark:focus:ring-primary-100 dark:ring-offset-gray-700 focus:ring-2 dark:bg-gray-600 dark:border-gray-500" />
+                        <label for="actionDelete" class="ml-2 text-sm font-medium text-gray-900 dark:text-gray-100">
+                            {{ 'PRODUCT_ORDERS._action_delete' | translate }}
+                        </label>
+                    </li>
+                </ul>
+            </div>
+        </div>
         <div class="p-8 w-full">
             <div class="flex flex-row mb-1">
                 <fa-icon [icon]="faSwatchbook" class="fa-base text-primary-100 align-middle mr-2"></fa-icon>
@@ -38,7 +83,11 @@ <h2 class="text-base dark:text-white font-bold">{{ 'PRODUCT_ORDERS._filter_state
             <button id="dropdownStateButton" data-dropdown-toggle="dropdown" (click)="$event.stopPropagation();"
                     class="text-black border border-primary-100sa dark:text-white w-full justify-between bg-white dark:bg-secondary-200 hover:bg-gray-100 dark:hover:bg-secondary-300 focus:ring-2 focus:outline-none focus:ring-primary-100 font-medium rounded-lg text-sm p-2.5 text-center inline-flex items-center"
                     type="button">
-                {{ 'PRODUCT_ORDERS._filter_state' | translate }}
+                @if(filters.length > 0){
+                    {{filters.join(', ')}}
+                } @else {
+                    {{ 'PRODUCT_ORDERS._filter_state' | translate }}
+                }
                 <svg class="w-4 h-4 ml-2" aria-hidden="true" fill="none" stroke="currentColor" viewBox="0 0 24 24"
                     xmlns="http://www.w3.org/2000/svg">
                     <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
@@ -354,6 +403,9 @@ <h3 class="text-base dark:text-gray-200">
                                         <th scope="col" class="px-6 py-3 text-center align-middle">
                                           {{ 'PRODUCT_ORDERS._state' | translate }}
                                         </th>
+                                        <th scope="col" class="px-6 py-3 text-center align-middle">
+                                          {{ 'PRODUCT_ORDERS._items_action' | translate }}
+                                        </th>
                                         <th scope="col" class="px-6 py-3 text-center align-middle">
                                           {{ 'PRODUCT_ORDERS._actions' | translate }}
                                         </th>
@@ -410,6 +462,15 @@ <h3 class="text-base dark:text-gray-200">
                                               <span class="bg-amber-500 dark:bg-amber-900 text-amber-900 dark:text-amber-100 text-xs font-medium me-2 px-2.5 py-0.5 rounded border border-amber-950">Unchecked</span>
                                             }
                                           </td>
+                                          <td class="px-6 py-4 text-center align-middle">
+                                            @if(item.productOrderItem.action === 'add'){
+                                              <span class="bg-blue-100 dark:bg-secondary-100 text-blue-600 text-xs font-medium me-2 px-2.5 py-0.5 rounded border border-blue-400 w-fit">{{item.productOrderItem.action}}</span>
+                                            } @else if(item.productOrderItem.action ===  'delete') {
+                                              <span class="bg-blue-100 dark:bg-secondary-100 text-red-500 text-xs font-medium me-2 px-2.5 py-0.5 rounded border border-red-500 w-fit">{{item.productOrderItem.action}}</span>
+                                            } @else if(item.productOrderItem.action === 'modify') {
+                                              <span class="bg-blue-100 dark:bg-secondary-100 text-yellow-500 text-xs font-medium me-2 px-2.5 py-0.5 rounded border border-yellow-500">{{item.productOrderItem.action}}</span>
+                                            }
+                                          </td>
                                           <td class="px-6 py-4 text-center align-middle flex justify-center">
                                             @if (!hasProcurementAutomaticTerm(item)) {
                                               @if (!item.productOrderItem.state && role == sellerRole) {
diff --git a/src/app/pages/product-orders/sections/order-info/order-info.component.ts b/src/app/pages/product-orders/sections/order-info/order-info.component.ts
@@ -52,6 +52,7 @@ export class OrderInfoComponent implements OnInit, AfterViewInit, OnDestroy {
   page: number=0;
   ORDER_LIMIT: number = environment.ORDER_LIMIT;
   filters: any[]=[];
+  actionFilters: string[] = [];
   check_custom:boolean=false;
 
   buyerRole: string = environment.BUYER_ROLE;
@@ -316,7 +317,8 @@ export class OrderInfoComponent implements OnInit, AfterViewInit, OnDestroy {
       "filters": this.filters,
       "partyId": this.partyId,
       "orders": this.orders,
-      "role": this.role
+      "role": this.role,
+      "actionFilters": this.actionFilters
     }
 
     this.paginationService.getItemsPaginated(this.page, this.ORDER_LIMIT, next, this.orders,this.nextOrders, options,
@@ -363,6 +365,16 @@ export class OrderInfoComponent implements OnInit, AfterViewInit, OnDestroy {
     this.getOrders(false);
   }
 
+  onActionFilterChange(action:string){
+    const index = this.actionFilters.findIndex(item => item === action);
+    if (index !== -1) {
+      this.actionFilters.splice(index, 1);
+    } else {
+      this.actionFilters.push(action)
+    }
+    this.getOrders(false);
+  }
+
   isFilterSelected(filter:any){
     const index = this.filters.findIndex(item => item === filter);
     if (index !== -1) {
diff --git a/src/app/services/pagination.service.ts b/src/app/services/pagination.service.ts
@@ -61,6 +61,9 @@ export class PaginationService {
       if("role" in options){
         params.push(options.role)
       }
+      if("actionFilters" in options){
+        params.push(options.actionFilters)
+      }
 
       if(next == false){
         items=[];
@@ -546,10 +549,10 @@ export class PaginationService {
     }
   }*/
 
-  async getOrders(page: number, filters: Category[], partyId: any, orders: any[], role: any): Promise<any[]> {
+  async getOrders(page: number, filters: Category[], partyId: any, orders: any[], role: any, actionFilters: string[] = []): Promise<any[]> {
     try {
       // Get Orders
-      orders = await this.orderService.getProductOrders(partyId, page, filters, role);
+      orders = await this.orderService.getProductOrders(partyId, page, filters, role, actionFilters);
       console.log('getOrders', orders);
       // Obtener todas las cuentas de facturación en paralelo
       const billingAccounts = await Promise.all(orders.map(order => this.accountService.getBillingAccountById(order.billingAccount.id)));
diff --git a/src/app/services/product-order-service.service.ts b/src/app/services/product-order-service.service.ts
@@ -24,7 +24,7 @@ export class ProductOrderService {
     return this.http.post<any>(url, prod, { observe: 'response' });
   }
 
-  getProductOrders(partyId:any,page:any,filters:any[],role:any){
+  getProductOrders(partyId:any,page:any,filters:any[],role:any,actionFilters:string[]=[]){
     console.log('getProductOrders');
     let url = `${ProductOrderService.BASE_URL}${ProductOrderService.API_ORDERING}/productOrder?limit=${ProductOrderService.ORDER_LIMIT}&offset=${page}&relatedParty.id=${partyId}&relatedParty.role=${role}`;
 
@@ -40,6 +40,9 @@ export class ProductOrderService {
       }
       url=url+'&state='+status;
     }
+    if(actionFilters.length>0){
+      url=url+'&productOrderItem.action='+actionFilters.join(',');
+    }
     return lastValueFrom(this.http.get<any[]>(url));
   }
 
diff --git a/src/assets/i18n/en.json b/src/assets/i18n/en.json
@@ -1260,6 +1260,11 @@
         "_as_provider": "As Provider",
         "_date": "Date",
         "_actions": "Actions",
+        "_items_action": "Items Action",
+        "_filter_action": "Filter by action",
+        "_action_add": "Add",
+        "_action_modify": "Modify",
+        "_action_delete": "Delete",
         "_order_details": "Order details:",
         "_customer_info": "Customer Info:",
         "_name": "Name",
diff --git a/src/assets/i18n/es.json b/src/assets/i18n/es.json
@@ -1259,6 +1259,11 @@
         "_as_provider": "As Provider",
         "_date": "Date",
         "_actions": "Actions",
+        "_items_action": "Items Action",
+        "_filter_action": "Filter by action",
+        "_action_add": "Add",
+        "_action_modify": "Modify",
+        "_action_delete": "Delete",
         "_order_details": "Order details:",
         "_customer_info": "Customer Info:",
         "_name": "Name",

Original file line number	Diff line number	Diff line change
`@@ -24,7 +24,7 @@ export class ProductOrderService {`
`24`	`24`	`return this.http.post<any>(url, prod, { observe: 'response' });`
`25`	`25`	`}`
`26`	`26`
`27`		`- getProductOrders(partyId:any,page:any,filters:any[],role:any){`
	`27`	`+ getProductOrders(partyId:any,page:any,filters:any[],role:any,actionFilters:string[]=[]){`
`28`	`28`	`console.log('getProductOrders');`
`29`	`29`	let url = `${ProductOrderService.BASE_URL}${ProductOrderService.API_ORDERING}/productOrder?limit=${ProductOrderService.ORDER_LIMIT}&offset=${page}&relatedParty.id=${partyId}&relatedParty.role=${role}`;
`30`	`30`
`@@ -40,6 +40,9 @@ export class ProductOrderService {`
`40`	`40`	`}`
`41`	`41`	`url=url+'&state='+status;`
`42`	`42`	`}`
	`43`	`+ if(actionFilters.length>0){`
	`44`	`+ url=url+'&productOrderItem.action='+actionFilters.join(',');`
	`45`	`+ }`
`43`	`46`	`return lastValueFrom(this.http.get<any[]>(url));`
`44`	`47`	`}`
`45`	`48`