Up ใหม่

src/app/models/items.model.ts

+interface RoomModel {
+    rid: number;
+    rname: string;
+    rdesc: string;
+    rpic: string;
+}
+
+interface EquirmentModel {
+    id: number;
+    name: string;
+    desc: string;
+    type?: CategoryModel;
+    pic: string;
+}
+
+interface CategoryModel {
+    id: number;
+    name: string;
+}
+
+interface Country {
+    id?: number;
+    catagory: string;
+    type: string;
+    detail: string;
+    name: string;
+    sdate: string;
+    edate: string;
+    status: string;
+    quantity: string;
+}
\ No newline at end of file

src/app/models/transection.model.ts

+interface TransectionRoom{
+    id: number ;
+    employeeId : string ;
+    remark : string ;
+    room : RoomModel;
+}
\ No newline at end of file

src/app/pages/lend-page/lend-page.component.html

+<div class="content">
+    <div class="row">
+        <div class="col-sm-12">
+            <div class="card">
+                <div class="card-body">
+                    <table class="table table-striped">
+                        <thead>
+                            <tr>
+                                <th scope="col">#</th>
+                                <th scope="col">Catagory</th>
+                                <th scope="col">Type</th>
+                                <th scope="col">Detail</th>
+                                <th scope="col">Name</th>
+                                <th scope="col">Start-Date</th>
+                                <th scope="col">End-Date</th>
+                                <th scope="col">Quantity</th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            <tr *ngFor="let country of countries">
+                                <th scope="row">{{ country.id }}</th>
+                                <td>{{ country.catagory }}</td>
+                                <td>{{ country.type }}</td>
+                                <td>{{ country.detail }}</td>
+                                <td>{{ country.name }}</td>
+                                <td>{{ country.sdate | date:'dd-MM-yyyy' }}</td>
+                                <td>{{ country.edate | date:'dd-MM-yyyy' }}</td>
+                                <td>
+                                    <button class="btn btn-primary btn-sm" (click)="_increamentQTY(item.productId._id,1)">+</button>
+                                    {{ country.quantity }}
+                                    <button class="btn btn-primary btn-sm">-</button>
+                                  </td>
+                            </tr>
+                        </tbody>
+                    </table>
+                    <div class="text-center">
+                        <div class="d-grid gap-2 a-md-flex justify-content-md-end ">
+                            <button class="btn btn-sm btn-primary" type="button">ยืม</button>
+                            <button class="btn btn-sm btn-primary" type="button">ยกเลิก</button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
\ No newline at end of file

src/app/pages/lend-page/lend-page.component.ts

+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-lend-page',
+  templateUrl: './lend-page.component.html',
+  styleUrls: ['./lend-page.component.scss']
+})
+export class LendPageComponent implements OnInit {
+
+  countries: Country[] = [
+    {
+
+      catagory: 'string',
+      type: 'string',
+      detail: 'Moniter',
+      name: 'a',
+      sdate: '2021-11-25',
+      edate: '2021-11-25',
+      status: 'waiting',
+      quantity : '1',
+    },
+    {
+
+      catagory: 'string',
+      type: 'string',
+      detail: 'Mouse',
+      name: 'b',
+      sdate: '2021-11-25',
+      edate: '2021-11-25',
+      status: 'waiting',
+      quantity : '1',
+    }
+  ];
+  collectionSize = this.countries.length;
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}