dev #13992

Сделал фильтрацию по дате, локализовал календарь на русский язык и формат
2023-03-30 11:13:35 +04:00 · 2023-03-30 11:13:35 +04:00 · 7f96fa4503
commit 7f96fa4503
parent 1a503b3163
11 changed files with 408 additions and 106 deletions
--- a/angular/src/app/app.constants.ts
+++ b/angular/src/app/app.constants.ts
@ -1,109 +1,144 @@
-import {MainPageCode, OrderStatus, Page, PageCode, PaymentMethod} from "./interface/data";
+import { MatDateFormats } from '@angular/material/core';
+import {
+  IOptionDateFilter,
+  MainPageCode,
+  OrderStatus,
+  Page,
+  PageCode,
+  PaymentMethod,
+} from './interface/data';

 export const PageList: Page[] = [
-    // {
-    //   code: PageCode.Auth,
-    //   name: 'Вход',
-    //   resName: 'auth',
-    //   onSideBar: false,
-    // },
-    {
-      code: PageCode.Orders,
-      name: 'Заказы',
-      resName: 'orders',
-      onSideBar: true,
-    },
+  // {
+  //   code: PageCode.Auth,
+  //   name: 'Вход',
+  //   resName: 'auth',
+  //   onSideBar: false,
+  // },
+  {
+    code: PageCode.Orders,
+    name: 'Заказы',
+    resName: 'orders',
+    onSideBar: true,
+  },
 ];

 export const PageListWithBonus: Page[] = [
-    // {
-    //     code: PageCode.Auth,
-    //     name: 'Вход',
-    //     resName: 'auth',
-    //     onSideBar: false,
-    // },
-    {
-        code: PageCode.BonusProgram,
-        name: 'Ваша карта лояльности',
-        description: '',
-        resName: 'bonus-program',
-        onSideBar: false,
-    },
-    {
-        code: PageCode.Orders,
-        name: 'Ваши чеки',
-        description: '',
-        resName: 'orders',
-        onSideBar: true,
-    },
-    // {
-    //     code: PageCode.UserData,
-    //     name: 'Заполнить анкету',
-    //     description: '',
-    //     resName: 'user-data',
-    //     onSideBar: true
-    // },
-    // {
-    //     code: PageCode.RefSystem,
-    //     name: 'Пригласить друга',
-    //     description: '',
-    //     resName: 'ref-system',
-    //     onSideBar: true,
-    // },
+  // {
+  //     code: PageCode.Auth,
+  //     name: 'Вход',
+  //     resName: 'auth',
+  //     onSideBar: false,
+  // },
+  {
+    code: PageCode.BonusProgram,
+    name: 'Ваша карта лояльности',
+    description: '',
+    resName: 'bonus-program',
+    onSideBar: false,
+  },
+  {
+    code: PageCode.Orders,
+    name: 'Ваши чеки',
+    description: '',
+    resName: 'orders',
+    onSideBar: true,
+  },
+  // {
+  //     code: PageCode.UserData,
+  //     name: 'Заполнить анкету',
+  //     description: '',
+  //     resName: 'user-data',
+  //     onSideBar: true
+  // },
+  // {
+  //     code: PageCode.RefSystem,
+  //     name: 'Пригласить друга',
+  //     description: '',
+  //     resName: 'ref-system',
+  //     onSideBar: true,
+  // },
 ];

 export const PageListMain: Page[] = [
-    {
-        code: MainPageCode.Account,
-        name: 'Аккаунт',
-        resName: 'account',
-        onSideBar: true,
-        icon: 'person'
-    },
-    {
-        code: MainPageCode.Products,
-        name: 'Товары',
-        resName: 'products',
-        onSideBar: true,
-        icon: 'manage_search'
-    },
-    {
-        code: MainPageCode.Cart,
-        name: 'Корзина',
-        resName: 'cart',
-        onSideBar: true,
-        icon: 'shopping_bag'
-    },
-    // {
-    //     code: MainPageCode.Info,
-    //     name: 'О нас',
-    //     resName: 'info',
-    //     onSideBar: true,
-    //     icon: 'info'
-    // },
-]
+  {
+    code: MainPageCode.Account,
+    name: 'Аккаунт',
+    resName: 'account',
+    onSideBar: true,
+    icon: 'person',
+  },
+  {
+    code: MainPageCode.Products,
+    name: 'Товары',
+    resName: 'products',
+    onSideBar: true,
+    icon: 'manage_search',
+  },
+  {
+    code: MainPageCode.Cart,
+    name: 'Корзина',
+    resName: 'cart',
+    onSideBar: true,
+    icon: 'shopping_bag',
+  },
+  // {
+  //     code: MainPageCode.Info,
+  //     name: 'О нас',
+  //     resName: 'info',
+  //     onSideBar: true,
+  //     icon: 'info'
+  // },
+];

 export const orderStatuses: OrderStatus = {
-    'Cancelled': 'Отменен',
-    'InProcessing': 'В обработке',
-    'Unconfirmed': 'Принят',
-    'WaitCooking': 'Принят',
-    'ReadyForCooking': 'Принят',
-    'CookingStarted': 'Готовится',
-    'CookingCompleted': 'Приготовлен',
-    'Waiting': 'В пути',
-    'OnWay': 'В пути',
-    'Delivered': 'Выполнен',
-    'Closed': 'Выполнен',
+  Cancelled: 'Отменен',
+  InProcessing: 'В обработке',
+  Unconfirmed: 'Принят',
+  WaitCooking: 'Принят',
+  ReadyForCooking: 'Принят',
+  CookingStarted: 'Готовится',
+  CookingCompleted: 'Приготовлен',
+  Waiting: 'В пути',
+  OnWay: 'В пути',
+  Delivered: 'Выполнен',
+  Closed: 'Выполнен',
 };

-export const paymentMethods: PaymentMethod[] =  [
-    {
-      type: 'Card',
-      label: 'Безналичный расчет'
-    },
-    {
-      type: 'Cash',
-      label: 'Наличными'
-    }
-  ]
+export const paymentMethods: PaymentMethod[] = [
+  {
+    type: 'Card',
+    label: 'Безналичный расчет',
+  },
+  {
+    type: 'Cash',
+    label: 'Наличными',
+  },
+];
+
+export const dateFilterOptions: IOptionDateFilter[] = [
+  {
+    name: 'Текущий месяц',
+    value: 'currentMonth',
+  },
+  {
+    name: 'Прошлый месяц',
+    value: 'lastMonth',
+  },
+  {
+    name: 'Между',
+    value: 'between',
+  },
+];
+
+export const APP_DATE_FORMATS: MatDateFormats = {
+  parse: {
+    dateInput: { month: 'short', year: 'numeric', day: 'numeric' },
+  },
+  display: {
+    dateInput: 'input',
+    monthYearLabel: { year: 'numeric', month: 'numeric' },
+    dateA11yLabel: { year: 'numeric', month: 'long', day: 'numeric' },
+    monthYearA11yLabel: { year: 'numeric', month: 'long' },
+  },
+};
--- a/angular/src/app/app.module.ts
+++ b/angular/src/app/app.module.ts
@ -74,6 +74,9 @@ import { MatSnackBarModule } from '@angular/material/snack-bar';
 import { SnackBarComponent } from './components/snack-bar/snack-bar.component';
 import {MatDialogModule} from '@angular/material/dialog';
 import { PurchaseInfoComponent } from './components/purchase-info/purchase-info.component';
+import { DateFilterComponent } from './components/date-filter/date-filter.component';
+import {MatDatepickerModule} from '@angular/material/datepicker';
+import {MatNativeDateModule} from '@angular/material/core';

 const routes: Routes = [
  { path: '', redirectTo: 'products', pathMatch: 'full' },
@ -113,6 +116,7 @@ const routes: Routes = [
    TerminalListComponent,
    SnackBarComponent,
    PurchaseInfoComponent,
+    DateFilterComponent,
  ],
  imports: [
    BrowserModule,
@ -162,7 +166,9 @@ const routes: Routes = [
    MatButtonModule,
    MatListModule,
    MatSnackBarModule,
-    MatDialogModule
+    MatDialogModule,
+    MatDatepickerModule,
+    MatNativeDateModule
  ],
  providers: [
    DialogService,
--- a/angular/src/app/components/date-filter/date-filter.component.html
+++ b/angular/src/app/components/date-filter/date-filter.component.html
@ -0,0 +1,43 @@
+<div class="date-filter-container">
+  <form [formGroup]="dateFilterForm" (ngSubmit)="submitFilter()">
+    <mat-form-field appearance="fill">
+      <mat-select formControlName="filterType">
+        <mat-option *ngFor="let option of options" [value]="option.value">{{
+          option.name
+        }}</mat-option>
+      </mat-select>
+      <mat-label>Фильтр</mat-label>
+      <mat-hint>Тип</mat-hint>
+    </mat-form-field>
+    <div
+      *ngIf="currentFilterType === 'between'"
+      class="date-filter-container__date-inputs"
+    >
+      <mat-form-field class="date-range-input-field" appearance="fill">
+        <mat-label>Интервал времени</mat-label>
+        <mat-date-range-input
+          [rangePicker]="campaignTwoPicker"
+          [comparisonStart]="dateFilterForm.value.from"
+          [comparisonEnd]="dateFilterForm.value.to" 
+        >
+          <input matStartDate placeholder="От: " formControlName="from" />
+          <input matEndDate placeholder="До: " formControlName="to" />
+        </mat-date-range-input>
+        <mat-hint>дд.мм.гггг – дд.мм.гггг</mat-hint>
+        <mat-datepicker-toggle
+          matIconSuffix
+          [for]="campaignTwoPicker"
+        ></mat-datepicker-toggle>
+        <mat-date-range-picker #campaignTwoPicker>
+          <mat-date-range-picker-actions>
+            <button mat-button matDateRangePickerCancel>Назад</button>
+            <button mat-raised-button color="primary" matDateRangePickerApply>
+              Подтвердить
+            </button>
+          </mat-date-range-picker-actions>
+        </mat-date-range-picker>
+      </mat-form-field>
+    </div>
+    <button mat-stroked-button class="apply" type="submit">Применить</button>
+  </form>
+</div>
--- a/angular/src/app/components/date-filter/date-filter.component.scss
+++ b/angular/src/app/components/date-filter/date-filter.component.scss
@ -0,0 +1,28 @@
+:host {
+  .date-filter-container {
+    & > form {
+      width: 100%;
+      display: flex;
+      flex-direction: row;
+      gap: 8px;
+    }
+  }
+}
+
+@media screen and (max-width: 1065px) {
+  :host {
+    .date-filter-container {
+      & > form {
+        flex-direction: column;
+      }
+    }
+  }
+
+  .date-range-input-field {
+    width: 100%;
+  }
+}
+
+.apply {
+  height: 51.67px;
+}
--- a/angular/src/app/components/date-filter/date-filter.component.spec.ts
+++ b/angular/src/app/components/date-filter/date-filter.component.spec.ts
@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { DateFilterComponent } from './date-filter.component';
+
+describe('DateFilterComponent', () => {
+  let component: DateFilterComponent;
+  let fixture: ComponentFixture<DateFilterComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ DateFilterComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(DateFilterComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
--- a/angular/src/app/components/date-filter/date-filter.component.ts
+++ b/angular/src/app/components/date-filter/date-filter.component.ts
@ -0,0 +1,70 @@
+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { FormControl, FormGroup, Validators } from '@angular/forms';
+import { DateAdapter, MAT_DATE_FORMATS, MAT_DATE_LOCALE } from '@angular/material/core';
+import { MatSnackBar } from '@angular/material/snack-bar';
+import moment from 'moment';
+import { APP_DATE_FORMATS } from 'src/app/app.constants';
+import { IDateFilter, IOptionDateFilter } from 'src/app/interface/data';
+import { DateAdapterService } from 'src/app/services/date-adapter.service';
+
+@Component({
+  selector: 'app-date-filter[options]',
+  templateUrl: './date-filter.component.html',
+  styleUrls: ['./date-filter.component.scss'],
+  providers: [
+    { provide: DateAdapter, useClass: DateAdapterService },
+    { provide: MAT_DATE_FORMATS, useValue: APP_DATE_FORMATS },
+    { provide: MAT_DATE_LOCALE, useValue: 'ru-RU' }
+  ],
+})
+export class DateFilterComponent implements OnInit {
+  @Input() defaultFilterType!: string;
+  @Output() onSubmitFilter = new EventEmitter<any>();
+  @Input() options!: IOptionDateFilter[];
+
+  public currentFilterType!: string;
+
+  public dateFilterForm = new FormGroup({
+    filterType: new FormControl<string>(''),
+    from: new FormControl<Date | null>(null),
+    to: new FormControl<Date | null>(null),
+  });
+
+  constructor(private _snackBar: MatSnackBar) {}
+
+  ngOnInit(): void {
+    this.currentFilterType = this.defaultFilterType
+      ? this.defaultFilterType
+      : this.options[0].value;
+    const filterType = this.dateFilterForm.get('filterType');
+    filterType?.setValue(this.currentFilterType);
+    filterType?.valueChanges.subscribe({
+      next: (value) => {
+        this.currentFilterType = value ?? '';
+        const fromControl = this.dateFilterForm.get('from')
+        const toControl = this.dateFilterForm.get('to')
+        
+        if (this.currentFilterType === 'between') {
+          this.dateFilterForm.controls.from.addValidators([
+            Validators.required,
+          ]);
+          this.dateFilterForm.controls.to.addValidators([Validators.required]);
+        } else {
+          fromControl?.clearValidators()
+          toControl?.clearValidators()
+        }
+        fromControl?.updateValueAndValidity()
+        toControl?.updateValueAndValidity()
+      },
+    });
+  }
+
+  submitFilter() {
+    if (!this.dateFilterForm.valid) {
+      this._snackBar.open('Заполните все поля!', 'Ок', {
+        duration: 2000,
+      });
+    }
+    this.onSubmitFilter.emit(this.dateFilterForm.value)
+  }
+}
--- a/angular/src/app/interface/data.ts
+++ b/angular/src/app/interface/data.ts
@ -275,3 +275,14 @@ export interface ITerminal {
  label: string;
  id: string;
 }
+
+export interface IOptionDateFilter {
+  name: string;
+  value: string;
+}
+
+export interface IDateFilter {
+  filterType: string;
+  from?: Date;
+  to?: Date;
+}
--- a/angular/src/app/pages/account/orders/orders.component.html
+++ b/angular/src/app/pages/account/orders/orders.component.html
@ -1,3 +1,9 @@
+<app-date-filter
+  [options]="dateFilterOptions"
+  [defaultFilterType]="defaultFilterType"
+  (onSubmitFilter)="dateFilter($event)"
+></app-date-filter>
+
 <div class="orders">
  <!-- <h2>{{ currentPage.name }}</h2> -->
  <table
@ -63,14 +69,25 @@
          class="woocommerce-orders-table__cell woocommerce-orders-table__cell-order-bonuses"
          data-title="Бонусы"
          [ngClass]="{
-            'red-color': purchase.transactionSum ? purchase.transactionSum < 0 : false,
-            'green-color': purchase.transactionSum ? purchase.transactionSum > 0 : false
+            'red-color': purchase.transactionSum
+              ? purchase.transactionSum < 0
+              : false,
+            'green-color': purchase.transactionSum
+              ? purchase.transactionSum > 0
+              : false
          }"
        >
          {{ purchase.transactionSum }}
        </td>
-        <td *ngIf="purchase.more_info" class="woocommerce-orders-table__cell woocommerce-orders-table__cell-order-actions" data-title="Действия">
-          <button mat-stroked-button (click)="showPurchaseInfo(purchase.more_info)" >
+        <td
+          *ngIf="purchase.more_info"
+          class="woocommerce-orders-table__cell woocommerce-orders-table__cell-order-actions"
+          data-title="Действия"
+        >
+          <button
+            mat-stroked-button
+            (click)="showPurchaseInfo(purchase.more_info)"
+          >
            Подробнее
          </button>
        </td>
@ -78,12 +95,15 @@
    </tbody>
  </table>
  <p
-    *ngIf="purchases.length !== purchasesShortArray.length"
+    *ngIf="filteredOfDatePurchases.length !== purchasesShortArray.length && purchasesShortArray.length"
    class="show-more-orders"
    (click)="getMoreOrders()"
  >
    Показать больше
  </p>
+  <p *ngIf="!purchasesShortArray.length && !ordersLoadingStatus" class="show-more-orders">
+    Данные не найдены
+  </p>
  <p-progressSpinner
    *ngIf="ordersLoadingStatus"
    [style]="{ width: '100%' }"
--- a/angular/src/app/pages/account/orders/orders.component.ts
+++ b/angular/src/app/pages/account/orders/orders.component.ts
@ -1,6 +1,6 @@
 import { HttpErrorResponse } from '@angular/common/http';
 import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
-import { Page, Purchase, PurchaseInfo } from 'src/app/interface/data';
+import { IDateFilter, Page, Purchase, PurchaseInfo } from 'src/app/interface/data';
 import * as moment from 'moment-timezone';
 import { lastValueFrom } from 'rxjs';
 import { WpJsonService } from 'src/app/services/wp-json.service';
@ -8,6 +8,7 @@ import { environment } from 'src/environments/environment';
 import { CookiesService } from 'src/app/services/cookies.service';
 import { MatDialog } from '@angular/material/dialog';
 import { PurchaseInfoComponent } from 'src/app/components/purchase-info/purchase-info.component';
+import { dateFilterOptions } from 'src/app/app.constants';

@Component({
  selector: 'app-orders',
@ -24,6 +25,12 @@ export class OrdersComponent implements OnInit {
  public purchases: Purchase[] = [];
  public purchasesShortArray: Purchase[] = [];

+
+  public dateFilterOptions = dateFilterOptions
+  public defaultFilterType = 'currentMonth';
+  private startOfMonth = moment().startOf('month').format('YYYY-MM-DD HH:mm');
+  public filteredOfDatePurchases: Purchase[] = []
+
  constructor(
    private wpJsonService: WpJsonService,
    private cookiesService: CookiesService,
@ -34,6 +41,35 @@ export class OrdersComponent implements OnInit {
    this.getOrders();
  }

+  dateFilter(dateFilter: IDateFilter) {
+    this.lastViewOrder = 3
+    switch (dateFilter.filterType) {
+      case 'between':
+        this.filteredOfDatePurchases = this.purchases.filter((value) => {
+          return moment(value.transactionCreateDate).isBetween(dateFilter.from, moment(dateFilter.to).add(1, 'day'))
+        })
+        break;
+
+      case 'currentMonth':
+        this.filteredOfDatePurchases = this.purchases.filter((value) => {
+          return moment(value.transactionCreateDate).isAfter(this.startOfMonth)
+        })
+        break;
+
+      case 'lastMonth':
+        this.filteredOfDatePurchases = this.purchases.filter((value) => {
+          return moment(value.transactionCreateDate).isBetween(moment(this.startOfMonth).subtract(1, 'month'), this.startOfMonth)
+        })
+        break;
+    
+      default:
+        this.filteredOfDatePurchases = this.purchases
+        break;
+    }
+    this.purchasesShortArray = this.filteredOfDatePurchases.slice(0, this.lastViewOrder);
+
+  }
+
  async getOrders() {
    const token = this.cookiesService.getItem('token');
    if (!token) {
@ -98,13 +134,13 @@ export class OrdersComponent implements OnInit {
        )
      );
    
-    this.purchasesShortArray = this.purchases.slice(0, this.lastViewOrder);
+    this.dateFilter({filterType: this.defaultFilterType})
    this.ordersLoadingStatus = false;
  }

  getMoreOrders() {
    this.lastViewOrder += 4;
-    this.purchasesShortArray = this.purchases.slice(0, this.lastViewOrder);
+    this.purchasesShortArray = this.filteredOfDatePurchases.slice(0, this.lastViewOrder);
  }

  showPurchaseInfo(purchaseInfo: PurchaseInfo) {
--- a/angular/src/app/services/date-adapter.service.ts
+++ b/angular/src/app/services/date-adapter.service.ts
@ -0,0 +1,23 @@
+import { Injectable } from '@angular/core';
+import { NativeDateAdapter } from '@angular/material/core';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class DateAdapterService extends NativeDateAdapter {
+  override format(date: Date, displayFormat: Object): string {
+    if (displayFormat === 'input') {
+      let day: string = date.getDate().toString();
+      day = +day < 10 ? '0' + day : day;
+      let month: string = (date.getMonth() + 1).toString();
+      month = +month < 10 ? '0' + month : month;
+      let year = date.getFullYear();
+      return `${day}.${month}.${year}`;
+    }
+    return date.toLocaleDateString('ru-RU');
+  }
+
+  override getFirstDayOfWeek(): number {
+    return 1;
+  }
+}
--- a/angular/src/styles.scss
+++ b/angular/src/styles.scss
@ -29,6 +29,13 @@ div.cdk-overlay-container {
    z-index: 11200;
 }

+.mat-form-field-type-mat-date-range-input .mat-form-field-infix {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    height: 41.67px;
+}
+
 .mat-snack-bar-container {
    transform: scale(1);
    opacity: 1;