Quote List: Display correct colors for quote statuses plus carets (#1…

…7626)
SAP · Jul 18, 2023 · 170e08d · 170e08d
1 parent 6bd5b2b
commit 170e08d
Show file tree

Hide file tree

Showing 8 changed files with 569 additions and 72 deletions.
diff --git a/feature-libs/quote/components/quote-list/quote-list.component.html b/feature-libs/quote/components/quote-list/quote-list.component.html
@@ -5,8 +5,8 @@
     <ng-container
       *ngIf="quotesState.data.quotes.length > 0; else emptyQuoteList"
     >
-      <div class="cx-quote-list-sort top">
-        <label class="cx-quote-list-form-group form-group"
+      <div class="cx-sort top">
+        <label class="cx-form-group form-group"
           ><span class="sortBy-heading">
             {{ 'quote.list.sortBy' | cxTranslate }}
           </span>
@@ -28,87 +28,100 @@
       >
         <thead>
           <tr role="row">
-            <th scope="col" class="col-4">
+            <th role="columnheader">
               {{ 'quote.list.name' | cxTranslate }}
             </th>
-            <th scope="col" class="col-3">
+            <th role="columnheader">
               {{ 'quote.commons.id' | cxTranslate }}
             </th>
-            <th scope="col" class="col-2">
+            <th role="columnheader">
               {{ 'quote.commons.status' | cxTranslate }}
             </th>
-            <th scope="col" class="col-3">
+            <th role="columnheader">
               {{ 'quote.list.updated' | cxTranslate }}
             </th>
+            <th></th>
           </tr>
         </thead>
         <tbody>
-          <tr *ngFor="let quote of quotesState.data.quotes">
-            <td class="cx-quote-list-quote-name">
+          <tr role="row" *ngFor="let quote of quotesState.data.quotes">
+            <td role="cell" class="cx-name">
               <div class="cx-mobile-header">
                 {{ 'quote.list.name' | cxTranslate }}
               </div>
               <a
                 [routerLink]="
                   {
                     cxRoute: 'quoteDetails',
-                    params: { quoteId: quote?.code }
+                    params: { quoteId: quote.code }
                   } | cxUrl
                 "
               >
-                {{ quote?.name }}
+                {{ quote.name }}
               </a>
             </td>
-            <td class="cx-quote-list-quote-code">
+            <td role="cell" class="cx-code">
               <div class="cx-mobile-header">
                 {{ 'quote.commons.id' | cxTranslate }}
               </div>
               <a
                 [routerLink]="
                   {
                     cxRoute: 'quoteDetails',
-                    params: { quoteId: quote?.code }
+                    params: { quoteId: quote.code }
                   } | cxUrl
                 "
               >
-                {{ quote?.code }}
+                {{ quote.code }}
               </a>
             </td>
-            <td class="cx-quote-list-quote-status">
+            <td role="cell" class="cx-status">
               <div class="cx-mobile-header">
                 {{ 'quote.commons.status' | cxTranslate }}
               </div>
               <a
                 [routerLink]="
                   {
                     cxRoute: 'quoteDetails',
-                    params: { quoteId: quote?.code }
+                    params: { quoteId: quote.code }
                   } | cxUrl
                 "
-                [ngClass]="getQuoteStateClass(quote?.state || 'TODO CHHI')"
+                [ngClass]="getQuoteStateClass(quote.state)"
               >
-                {{ 'quote.states.' + quote?.state | cxTranslate }}
+                {{ 'quote.states.' + quote.state | cxTranslate }}
               </a>
             </td>
-            <td class="cx-quote-list-quote-updatedDate">
+            <td role="cell" class="cx-updated-date">
               <div class="cx-mobile-header">
                 {{ 'quote.list.updated' | cxTranslate }}
               </div>
               <a
                 [routerLink]="
                   {
                     cxRoute: 'quoteDetails',
-                    params: { quoteId: quote?.code }
+                    params: { quoteId: quote.code }
                   } | cxUrl
                 "
               >
                 {{ quote?.updatedTime | cxDate: dateFormat }}
               </a>
             </td>
+            <td role="cell" class="cx-nav-caret">
+              <a
+                [routerLink]="
+                  {
+                    cxRoute: 'quoteDetails',
+                    params: { quoteId: quote.code }
+                  } | cxUrl
+                "
+              >
+                <cx-icon [type]="iconTypes.CARET_RIGHT"></cx-icon>
+              </a>
+            </td>
           </tr>
         </tbody>
       </table>
-      <div class="cx-quote-list-sort bottom">
+      <div class="cx-sort bottom">
         <div
           *ngIf="
             quotesState.data.pagination.totalPages &&
@@ -132,7 +145,7 @@
 </ng-template>
 
 <ng-template #emptyQuoteList>
-  <div class="cx-quote-list-empty">
+  <div class="cx-empty">
     {{ 'quote.list.empty' | cxTranslate }}
   </div>
 </ng-template>