Add list การแจ้ง

src/app/models/contact.model.ts

+export class Contact {
+    id: number;
+    ctName: string;
+    ctDesc: string;
+    ctTab: string;
+    ctHead: string;
+    ctStatus: number;
+    sDate: string;
+    constructor(init?: Contact){
+        Object.assign(this, init);
+        this.id = 1;
+        this.ctName = '';
+        this.ctDesc = '';
+        this.ctTab = '';
+        this.ctHead = '';
+        this.ctStatus = 0;
+        this.sDate = '';
+    }
+}
\ No newline at end of file

src/app/models/equirment.model.ts

-import { CategoryModel } from "./itemDetail.model";
-
 export class Equirment {
     eqId: number;
     eqName: string;
@@ -32,11 +30,3 @@ export class SearchEquirmentModel {
         this.eTime = '';
     }
 }
-
-interface EquirmentModel {
-    id: number;
-    name: string;
-    desc: string;
-    type?: CategoryModel;
-    pic: string;
-  }
\ No newline at end of file

src/app/models/itemDetail.model.ts

@@ -49,8 +49,3 @@ export class SearchItemDetailModel {
     }
 }
 
-export class CategoryModel {
-    id: number;
-    name: string;
-}
-

src/app/pages/contact-admin/contact-admin.component.html

 <div class="content">
+    <div class="card">
+        <div class="card-body">
+            <div class="row">
+                <div class="col-4 md-1">
+                    <label>ชื่อผู้แจ้ง Bug:</label>
+                    <input input class=" form-control" placeholder="" type="text" />
+                </div>
+                <div class="col-4 md-1">
+                    <label for="typeahead-focus">หัวข้อการแจ้ง Bug:</label>
+                    <input input class=" form-control" placeholder="" type="text" />
+                </div>
+                <div class="col-4 md-1">
+                    <label for="typeahead-focus">หน้าต่างที่ต้องการแจ้ง Bug:</label>
+                    <input id="typeahead-focus" type="text" class="form-control" [(ngModel)]="model"
+                        [ngbTypeahead]="search" (focus)="focus$.next($any($event).target.value)"
+                        (click)="click$.next($any($event).target.value)" #instance="ngbTypeahead" />
+                </div>
+            </div>
+            <div class=" row">
+                <div class=" col-md-12">
+                    <div class=" form-group">
+                        <label> หมายเหตุ </label>
+                        <textarea class="form-control" id="exampleFormControlTextarea1" rows="3"
+                            placeholder="......"></textarea>
+                    </div>
+                </div>
+            </div>
+            <div class="card-footer">
+                <div class="d-grid gap-2 d-md-flex justify-content-md-center">
+                    <button type="button" class="btn btn-primary btn-sm ">บันทึก</button>
+                    <button type="button" class="btn btn-primary btn-sm ">ยกเลิก</button>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div class="card">
+        <div class="row text-center">
+            <div class="col-sm-12">
+                <div class="card-body">
+                    <table class="table table-striped">
+                        <thead>
+                            <tr>
+                                <th scope="col">#</th>
+                                <th scope="col">ชื่อหัวข้อ</th>
+                                <th scope="col">หน้าต่างที่มี Bug</th>
+                                <th scope="col">ชื่อผู้แจ้ง</th>
+                                <th scope="col">วันที่แจ้ง</th>
+                                <th scope="col">สถานะ</th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            <tr *ngFor="let item of listContact">
+                                <th scope="row">{{ item.id }}</th>
+                                <td>{{ item.ctHead }}</td>
+                                <td>{{ item.ctTab }}</td>
+                                <td>{{ item.ctName }}</td>
+                                <td>{{ item.sDate | date : 'dd/MM/yyyy' }}</td>
+                                <td *ngIf="item.ctStatus==0">รอดำเนินการ</td>
+                                <td *ngIf="item.ctStatus==1">สำเร็จแล้ว</td>
+                                <td *ngIf="item.ctStatus==2">ยกเลิก</td>
+                                <div class="col-auto align-self-sm-center">
+                                    <button type="button" class="btn btn-info btn-sm btn-circle "
+                                        style="line-height: 0px" (click)="openRoomDetail(Room,item)"><i
+                                            class="fa fa-search"></i> </button>
+                                </div>
+                            </tr>
+                        </tbody>
+                    </table>
+                </div>
+            </div>
+        </div>
+    </div>
+
 
 </div>
\ No newline at end of file

src/app/pages/contact-admin/contact-admin.component.ts

-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, ViewChild } from '@angular/core';
+import { NgbTypeahead } from '@ng-bootstrap/ng-bootstrap';
+import { debounceTime, distinctUntilChanged, filter, map, merge, Observable, OperatorFunction } from 'rxjs';
+import { Subject } from 'rxjs/internal/Subject';
+import { Contact } from 'src/app/models/contact.model';
+import { ContactService } from 'src/app/service/contact.service';
+
+const pages = ['หน้าหลัก','รายการอุปกรณ์','รายการจอง-เบิกทั้งหมด'];
 
 @Component({
   selector: 'app-contact-admin',
@@ -6,10 +13,29 @@ import { Component, OnInit } from '@angular/core';
   styleUrls: ['./contact-admin.component.scss']
 })
 export class ContactAdminComponent implements OnInit {
+  model: any;
+
+  listContact: Contact[] = [];
+
+  @ViewChild('instance', {static: true}) instance: NgbTypeahead;
+  focus$ = new Subject<string>();
+  click$ = new Subject<string>();
 
-  constructor() { }
+  constructor(private ContactService : ContactService) { }
 
   ngOnInit(): void {
+    this.listContact = this.ContactService.getListContact();
+  }
+
+  search: OperatorFunction<string, readonly string[]> = (text$: Observable<string>) => {
+    const debouncedText$ = text$.pipe(debounceTime(200), distinctUntilChanged());
+    const clicksWithClosedPopup$ = this.click$.pipe(filter(() => !this.instance.isPopupOpen()));
+    const inputFocus$ = this.focus$;
+
+    return merge(debouncedText$, inputFocus$, clicksWithClosedPopup$).pipe(
+      map(term => (term === '' ? pages
+        : pages.filter(v => v.toLowerCase().indexOf(term.toLowerCase()) > -1)).slice(0, 10))
+    );
   }
 
 }

src/app/service/contact.service.ts

+import { Injectable } from '@angular/core';
+import { Contact } from "../models/contact.model"; 
+
+@Injectable({ providedIn: 'root' })
+export class ContactService {
+    listContact: Contact[] = [
+        {
+            id : 1,
+            ctName : 'เกม',
+            ctDesc : 'กดจองแล้ว รายการจองไม่ขึ้น',
+            ctTab: 'รายการอุปกรณ์',
+            ctHead : 'กดจองไม่ได้',
+            ctStatus: 0,
+            sDate: '2021/12/17'
+        },
+    ]
+
+    getListContact() {
+        return this.listContact;
+    }
+}
+