GH-37 added filtering to order history list

DivanteLtd · Apr 14, 2020 · a1c6cc1 · a1c6cc1
1 parent 72a728a
commit a1c6cc1
Show file tree

Hide file tree

Showing 4 changed files with 66 additions and 1 deletion.
diff --git a/src/app/features/dvnt-account/dvnt-account.module.ts b/src/app/features/dvnt-account/dvnt-account.module.ts
@@ -4,7 +4,7 @@ import { CommonModule } from '@angular/common';
 import { RouterModule } from '@angular/router';
 import { ConfigModule, I18nModule, UrlModule } from '@spartacus/core';
 import { NgSelectModule } from '@ng-select/ng-select';
-import { SpinnerModule } from '@spartacus/storefront';
+import { SpinnerModule, ListNavigationModule } from '@spartacus/storefront';
 
 import {
   accountCmsConfig,
@@ -39,6 +39,7 @@ import { DvntSharedModule } from '../dvnt-shared/dvnt-shared.module';
     UrlModule,
     SpinnerModule,
     RouterModule,
+    ListNavigationModule,
     NgSelectModule,
     DvntSharedModule,
     ConfigModule.withConfigFactory(cmsStructureConfig),

diff --git a/...s/dvnt-account/dvnt-consent-management/dvnt-consent-form/dvnt-consent-form.component.scss b/...s/dvnt-account/dvnt-consent-management/dvnt-consent-form/dvnt-consent-form.component.scss
@@ -1,6 +1,13 @@
+@import 'media';
+
 .consent-form {
+  padding-left: 0px;
   text-align: justify;
 
+  @include tablet-and-up {
+    padding-left: 1.25rem;
+  }
+
   .consent-main-text {
     font-weight: bold;
   }

diff --git a/src/app/features/dvnt-account/dvnt-order-history/dvnt-order-history.component.html b/src/app/features/dvnt-account/dvnt-order-history/dvnt-order-history.component.html
@@ -3,6 +3,24 @@
     <ng-container
       *ngIf="history?.orders?.length > 0; else emptyOrderHistoryList"
     >
+      <h2 class="order-history-header">
+        {{ 'orderHistory.orderHistory' | cxTranslate }}
+      </h2>
+
+      <div class="form-group sort-dropdown">
+        <span class="font-roboto sort-by-label">
+          {{ 'productList.sortBy' | cxTranslate }}:
+        </span>
+        <cx-sorting
+          (sortListEvent)="changeSortCode($event)"
+          [selectedOption]="history.pagination.sort"
+          [sortLabels]="getSortLabels() | async"
+          [sortOptions]="history.sorts"
+          placeholder="{{ 'orderHistory.sortByMostRecent' | cxTranslate }}"
+        >
+        </cx-sorting>
+      </div>
+
       <div class="order-history-list-content">
         <div class="order-history-row order-history-row-header">
           <div class="single-column">

diff --git a/src/app/features/dvnt-account/dvnt-order-history/dvnt-order-history.component.scss b/src/app/features/dvnt-account/dvnt-order-history/dvnt-order-history.component.scss
@@ -1,10 +1,42 @@
 @import 'media';
+@import 'mixins';
 
 .order-history-list-container {
   display: flex;
   flex-direction: column;
   width: 100%;
 
+  .order-history-header {
+    font-size: calculateRem(24px);
+    margin-bottom: 30px;
+  }
+
+  .sort-dropdown {
+    margin-bottom: 10px;
+    max-width: 180px;
+    width: auto;
+
+    @include tablet-and-up {
+      margin-bottom: 30px;
+    }
+
+    .sort-by-label {
+      color: var(--ssf-gray-primary) !important;
+      font-family: var(--ssf-secondary-font-family);
+      font-size: calculateRem(12px);
+      font-weight: 300;
+
+      @include tablet-and-up {
+        font-size: var(--ssf-font-size-mobile);
+      }
+
+      .sort-by-label {
+        margin-left: auto;
+        margin-right: 0;
+      }
+    }
+  }
+
   .order-history-list-content {
     display: flex;
     flex-direction: column;
@@ -57,9 +89,16 @@
     }
 
     .order-history-row-header {
+      background: rgb(241, 242, 243);
       border-bottom: 1px solid var(--cx-border-color);
       margin-bottom: 0px;
       padding-bottom: 12px;
+      padding: 5px;
+
+      @include laptop-and-up {
+        background: transparent;
+        padding: 0px;
+      }
     }
   }
 }