#127 order page

retail-managment-system/rms-ui/angular.json

@@ -1,5 +1,8 @@
 {
   "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "cli": {
+    "analytics": false
+  },
   "version": 1,
   "newProjectRoot": "projects",
   "projects": {

retail-managment-system/rms-ui/src/app/domain/order/models/order.ts

@@ -1,12 +1,19 @@
 import { Customers } from "../../customers/models/customers";
+import { Employee } from "../../employee/models/employee";
+import { Installment } from "../../installment/models/installment";
+import { orderItem } from "./orderItem";
+import { paymentEnum } from "./paymentEnum";
 
 export interface Order {
     id: number;
-    version: number
-    orderDate: string;
-    paymentType: number
+    version: number;
+    orderDate: Date;
+    paymentType: paymentEnum;
     paidAmount: number;
-    remainingAmount: number
-    installmentAmount: number
-    customer : Customers
+    remainingAmount: number;
+    installmentAmount?: Installment;
+    customer : Customers;
+    totalPrice:number;
+    orderItems:orderItem;
+    employee:Employee;
 }

retail-managment-system/rms-ui/src/app/domain/order/models/orderItem.ts

@@ -0,0 +1,6 @@
+export interface orderItem {
+  id: number;
+  unitPrice:number;
+  quantity:number;
+  product:any;
+}

retail-managment-system/rms-ui/src/app/domain/order/models/paymentEnum.ts

@@ -0,0 +1,5 @@
+export enum paymentEnum {
+  'CASH'="CASH",
+  'INSTALLMENTS'="INSTALLMENTS"
+
+}

retail-managment-system/rms-ui/src/app/domain/order/order.repository.ts

@@ -0,0 +1,30 @@
+import { ResourceService } from 'src/app/core/services/resource.service';
+import { HttpClient } from '@angular/common/http';
+import { Injectable } from '@angular/core';
+import { Order } from './models/order';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class OrderRepository extends ResourceService<Order> {
+  constructor(httpClient: HttpClient) {
+    super(httpClient);
+  }
+  getResourceUrl(): string {
+    return 'order';
+  }
+  toServerModel(entity: Order): any {
+    console.log(entity);
+    return {
+      id: entity.id,
+      orderDate: entity.orderDate,
+      paidAmount: entity.paidAmount,
+      remainingAmount: entity.remainingAmount,
+      paymentType:entity.paymentType,
+      totalPrice: entity.totalPrice,
+      employee: { id: entity.employee.id },
+      customer: { id: entity.customer.id },
+      orderItems:entity.orderItems
+    };
+  }
+}

retail-managment-system/rms-ui/src/app/domain/product/models/product.ts

@@ -9,4 +9,6 @@ export interface Product {
   cashPrice: number;
   quantity: number;
   productCategoryDto: Category;
+  orderQuantity:number;
+
 }

retail-managment-system/rms-ui/src/app/pages/home-page/home-page.component.html

@@ -2,7 +2,7 @@
   <section>
     <div class="container main-cards pt-5 d-flex flex-wrap">
       <div class="row justify-content-between">
-        <div class="card text-center col-md-3 col-sm-10 mt-5">
+        <div class="card text-center col-md-3 col-sm-10 mt-5" (click)="openOrder()">
           <div class="card-header">
             <mat-icon> attach_money</mat-icon>
           </div>

retail-managment-system/rms-ui/src/app/pages/home-page/home-page.component.ts

@@ -77,6 +77,10 @@ export class HomePageComponent implements OnInit {
     this.router.navigate(['/customers']);
   }
 
+  openOrder(){
+    this.router.navigate(['/order'])
+  }
+
   openInvestors() {
     this.router.navigate(['/investor']);
   }

retail-managment-system/rms-ui/src/app/pages/order/order/order.component.html

@@ -0,0 +1,156 @@
+
+<div class="container">
+  <div class=" text-center mat-typography mt-4">
+    <div>
+      <h3 class="pt-3 mat-headline panel-title fw-bold">
+        {{ "order.our-orders" | translate }}
+      </h3>
+    </div>
+  </div>
+
+  <div class="d-flex flex-lg-row flex-column my-4  shadow-lg fixed-height">
+      <div
+        class="child-height w-100 overflow-scroll data-table bg-white"
+      >
+      <div class=" w-100 col-lg-6">
+        <div class="row mt-2" style=" margin-right:10px; margin-left:10px;">
+          <div class="col-sm-3 mb-3 " *ngFor="let product of orderProducts">
+        <div class="card border shadow-0 mb-3" >
+          <div class="card-header">{{"order.name"|translate}}{{product.name}}</div>
+          <div class="card-body">
+            <h6 class="card-title">{{"order.price"|translate}} {{product.cashPrice}}</h6>
+            <h6 class="card-title">Quantity: {{product.orderQuantity}}</h6>
+
+          </div>
+        </div>
+        </div>
+        </div>
+        </div>
+      </div>
+
+      <div class="col-lg-6 p-3 bg-light">
+        <section>
+          <div>
+            <div class="panel-heading pt-2 ps-1 mb-3 d-flex justify-content-between">
+              <h3 class="panel-title">
+                {{ "order.add" | translate }}
+
+                {{ "order.order" | translate }}
+              </h3>
+
+            </div>
+          </div>
+          <div class="panel-body ">
+            <form [formGroup]="orderForm">
+              <fieldset class="row justify-content-center">
+                <mat-form-field appearance="outline" class="w-100">
+                  <mat-label> {{ "order.order-date" | translate }}</mat-label>
+                  <input
+                    formControlName="orderDate"
+                    type="date"
+                    matInput
+                    placeholder="{{ 'order.order-date' | translate }}"
+                  />
+
+                </mat-form-field>
+                <mat-form-field appearance="outline" class="w-50">
+                  <mat-label>{{ "order.paid-amount" | translate }}</mat-label>
+                  <input
+                    formControlName="paidAmount"
+                    type="number"
+                    min="1"
+                    matInput
+                    placeholder="{{ 'order.paid-amount' | translate }}"
+                    required
+                  />
+                </mat-form-field>
+                <mat-form-field appearance="outline" class="w-50">
+                  <mat-label>{{ "order.remaining-amount" | translate }}</mat-label>
+                  <input
+                    formControlName="remainingAmount"
+                    type="number"
+                    min="1"
+                    matInput
+                    placeholder="{{ 'order.remaining-amount' | translate }}"
+                  />
+                </mat-form-field>
+                <mat-form-field appearance="outline" class="w-100">
+                  <mat-label>{{ "order.payment-type" | translate }}</mat-label>
+                  <mat-select
+                    formControlName="paymentType"
+                    placeholder="{{ 'order.payment-type' | translate }}"
+
+                  >
+                    <mat-option *ngFor="let pay of paymentType" [value]="pay" (click)="showInstallmentField(pay)">
+                      {{pay}}
+
+                    </mat-option>
+                  </mat-select>
+                </mat-form-field>
+
+                <mat-form-field appearance="outline" class="w-100">
+                  <mat-label>{{ "employee.employee" | translate }}</mat-label>
+                  <mat-select
+                    formControlName="employee"
+                    type="text"
+                    matInput
+                    placeholder="{{ 'employee.employee' | translate }}"
+                  >
+                    <mat-option *ngFor="let emp of employees" [value]="emp">
+                      {{ emp.fullName }}
+                    </mat-option>
+                  </mat-select>
+
+                </mat-form-field>
+
+                <mat-form-field appearance="outline" class="w-100">
+                  <mat-label>{{ "customrs.customer" | translate }}</mat-label>
+                  <mat-select
+                    formControlName="customer"
+                    type="text"
+                    matInput
+                    placeholder="{{ 'customrs.customer' | translate }}"
+                  >
+                    <mat-option *ngFor="let cust of customers" [value]="cust">
+                      {{ cust.fullName }}
+                    </mat-option>
+                  </mat-select>
+
+                </mat-form-field>
+
+                <mat-form-field appearance="outline" class="w-100">
+                  <mat-label>{{ "order.total-price" | translate }}</mat-label>
+                  <input
+                    formControlName="totalPrice"
+                    type="number"
+                    min="1"
+                    matInput
+                    placeholder="{{ 'order.total-price' | translate }}"
+                  />
+                </mat-form-field>
+                <mat-form-field appearance="outline" class="w-100" *ngIf="showInstallment" >
+                  <mat-label>{{ "installments.installment" | translate }}</mat-label>
+                  <input
+                    formControlName="installments"
+                    type="text"
+                    matInput
+                    placeholder="{{ 'installments.installment' | translate }}"
+                  />
+                </mat-form-field>
+
+              </fieldset>
+            </form>
+          </div>
+          <div class="actions">
+            <button class=" add btn primary me-3" (click)="addOrder()">
+              {{'order.add'|translate}}
+            </button>
+
+          </div>
+
+        </section>
+      </div>
+  </div>
+</div>
+
+

retail-managment-system/rms-ui/src/app/pages/order/order/order.component.scss

@@ -0,0 +1,12 @@
+.add {
+  background-color: #002d40;
+  color: white;
+  width: 80px;
+  height: 40px;
+}
+.add:hover {
+  background-color: transparent;
+  color: #002d40;
+
+}
+

retail-managment-system/rms-ui/src/app/pages/order/order/order.component.ts

@@ -0,0 +1,114 @@
+import { Component, OnInit } from '@angular/core';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { TranslateService } from '@ngx-translate/core';
+import { CustomersRepository } from 'src/app/domain/customers/customers.repository';
+import { Customers } from 'src/app/domain/customers/models/customers';
+import { EmployeeRepository } from 'src/app/domain/employee/employee.repository';
+import { Employee } from 'src/app/domain/employee/models/employee';
+import { Order } from 'src/app/domain/order/models/order';
+import { orderItem } from 'src/app/domain/order/models/orderItem';
+import { paymentEnum } from 'src/app/domain/order/models/paymentEnum';
+import { OrderRepository } from 'src/app/domain/order/order.repository';
+import { Product } from 'src/app/domain/product/models/product';
+import { SharedService } from 'src/app/shared/service/shared.service';
+@Component({
+  selector: 'app-order',
+  templateUrl: './order.component.html',
+  styleUrls: ['./order.component.scss']
+})
+export class OrderComponent implements OnInit {
+  orderProducts!:Product[];
+  orderForm!:FormGroup;
+  prroducts!:Product[];
+  payment=paymentEnum;
+  paymentType:String[] = [];
+  showInstallment:boolean=false;
+  orderQuantity!:number;
+  orderDto:Order[]=[];
+  orderItem:orderItem[]=[];
+  employees: Employee[] = [];
+  customers:Customers[]=[];
+  constructor(private customersRepository:CustomersRepository ,private employeeRepository:EmployeeRepository,private orderRepository:OrderRepository,private sharedService:SharedService,private build: FormBuilder,private translate: TranslateService) {
+
+  }
+
+  ngOnInit(): void {
+    this.addOrderForm();
+    this.getProduct();
+    this.getPaymentType();
+    this.getOrderQuantity();
+    this.getAllEmployees();
+    this.getAllCustomers();
+
+    }
+
+  getOrderQuantity(){
+    this.orderQuantity = this.sharedService.getQuantity();
+  }
+
+  getPaymentType(){
+    this.paymentType = Object.keys(this.payment);
+  }
+  showInstallmentField(data){
+    if(data=='INSTALLMENTS'){
+      this.showInstallment=true;
+    }
+    else if(data=='CASH'){
+      this.showInstallment=false;
+
+    }
+
+  }
+
+  getProduct(){
+  this.sharedService.getProducts().subscribe(products => {
+    this.orderProducts=products;
+    this.orderProducts.map(product=>{
+      this.orderItem.push({
+        id:product.id,
+        unitPrice:product.cashPrice,
+        quantity:product.orderQuantity,
+        product:product.id
+      });
+    });
+
+    });
+  }
+
+  addOrderForm() {
+    this.orderForm = this.build.group({
+      orderDate: ['',[Validators.required]],
+      paidAmount: ['',[Validators.required]],
+      remainingAmount: ['',[Validators.required]],
+      totalPrice: ['',[Validators.required]],
+      paymentType: ['',[Validators.required]],
+      employee:{
+        id:['']
+      },
+      customer:{
+        id:['']
+      },
+      installments:['']
+    });
+  }
+
+getAllEmployees(): void {
+  this.employeeRepository.getList().subscribe((result) => {
+    this.employees = result.data;
+  });
+}
+
+getAllCustomers(): void {
+  this.customersRepository.getList().subscribe((result:any) => {
+    this.customers = result;
+  });
+}
+  addOrder() {
+    this.orderForm.markAllAsTouched();
+    let orderData = this.orderForm.value;
+    orderData.orderItem = this.orderItem;
+    if (this.orderForm.valid){
+    this.orderRepository.add(orderData).subscribe();
+    }
+  }
+}