admin-equirment.component.html 20.5 KB
Newer Older
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22
<div class="content">
    <div class="row">
        <div class="col-sm-12">
            <div class="card">
                <div class="card-body">
                    <div>
                        <h4 class="nav justify-content-center ">รายการ</h4>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <ul ngbNav #nav="ngbNav" class="nav-tabs">
        <li ngbNavItem>
            <a ngbNavLink>การจอง</a>
            <ng-template ngbNavContent>
                <div class="row">
                    <div class="col-sm-12">
                        <div class="">
                            <div class="card-body">

                                <button class="btn btn-lg btn-outline-primary"
23
                                    (click)="openRoomDetail(contentroom)">เพิ่มรายการ</button>
24 25

                                <div class="row">
26 27
                                    <div class="col-sm-3"
                                        *ngFor="let item of listRoomModel|slice: (pageListRoom-1) * pageSizeListRoom :(pageListRoom-1) * pageSizeListRoom + pageSizeListRoom ;let i = index">
28 29 30 31 32 33 34 35 36 37 38 39 40 41
                                        <div class="card" style="
                                        padding: 10px;">
                                            <div class="card-body">
                                                <img style="height: 200px;
                                                width: 200px;" [src]="item.rPic" class="nav justify-content-center"
                                                    alt="...">
                                                <br>
                                                <p class="text-left">ชื่อ : {{item.rName}}</p>
                                                <p class="text-left">รายละเอียด : {{item.rDesc}}</p>
                                            </div>

                                            <div class="text-center">
                                                <div class="d-grid gap-2 a-md-flex justify-content-md-end ">
                                                    <button class="btn btn-sm btn-outline-primary"
42 43
                                                        (click)="Ropen(editroom,((pageListRoom-1) * pageSizeListRoom)+i)">แก้ไข</button>
                                                    <button class="btn btn-sm btn-danger" type="button.dispose"
44
                                                        (click)="openDelete(deleteRoomPopup,item)">ลบ</button>
45 46 47 48 49 50 51 52
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="d-flex justify-content-between p-2">
53 54 55 56
                                <ngb-pagination [collectionSize]="collectionSizeListRoom" [(page)]="pageListRoom"
                                    [pageSize]="pageSizeListRoom">
                                    <ng-template ngbPaginationPrevious>Previous</ng-template>
                                    <ng-template ngbPaginationNext>Next</ng-template>
57 58
                                </ngb-pagination>

59 60
                                <select class="custom-select" style="width: auto" [(ngModel)]="pageSizeListRoom"
                                    (ngModelChange)="pageListRoom=1">
61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80
                                    <option [ngValue]="10">10 items per page</option>
                                    <option [ngValue]="50">50 items per page</option>
                                    <option [ngValue]="100">100 items per page</option>
                                </select>
                            </div>
                        </div>
                    </div>
                </div>
            </ng-template>
        </li>


        <li ngbNavItem>
            <a ngbNavLink>การเบิก</a>
            <ng-template ngbNavContent>
                <div class="row">
                    <div class="col-sm-12">
                        <div class="">
                            <div class="card-body">
                                <button class="btn btn-lg btn-outline-primary"
81
                                    (click)="openItemDetail(contentequirment)">เพิ่มรายการ</button>
82 83

                                <div class="row">
84 85
                                    <div class="col-sm-3"
                                        *ngFor="let item of listEquirmentModel|slice: (page-1) * pageSize :(page-1) * pageSize + pageSize ;let i = index">
86 87 88 89 90 91 92 93 94 95 96 97 98 99 100
                                        <div class="card" style="
                                        padding: 10px;">
                                            <div class="card-body">
                                                <img style="height: 200px;
                                                width: 200px;" [src]="item.eqPic" class="nav justify-content-center"
                                                    alt="...">
                                                <br>
                                                <p class="text-left">ชื่อ : {{item.eqName}}</p>
                                                <p class="text-left">รายละเอียด : {{item.eqDesc}}</p>
                                                <p class="text-left">ประเภท : {{item.eqType}}</p>
                                            </div>

                                            <div class="text-center">
                                                <div class="d-grid gap-2 a-md-flex justify-content-md-end">
                                                    <button class="btn btn-sm btn-outline-primary"
101 102
                                                        (click)="Eopen(editLend,((page-1) * pageSize)+i)">แก้ไข</button>
                                                    <button class="btn btn-sm btn-danger"
103
                                                        (click)="openDeleteEquirment(deleteEquirPopup,item)">ลบ</button>
104 105 106 107 108 109 110 111
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="d-flex justify-content-between p-2">
112 113 114
                                <ngb-pagination [collectionSize]="collectionSize" [(page)]="page" [pageSize]="pageSize">
                                    <ng-template ngbPaginationPrevious>Previous</ng-template>
                                    <ng-template ngbPaginationNext>Next</ng-template>
115 116 117
                                </ngb-pagination>

                                <select class="custom-select" style="width: auto" [(ngModel)]="pageSize"
118
                                    (ngModelChange)="page=1">
119 120 121 122 123 124 125 126 127 128 129 130 131 132 133
                                    <option [ngValue]="10">10 items per page</option>
                                    <option [ngValue]="50">50 items per page</option>
                                    <option [ngValue]="100">100 items per page</option>
                                </select>
                            </div>

                        </div>
                    </div>
                </div>
            </ng-template>
        </li>
    </ul>
    <div [ngbNavOutlet]="nav"></div>
</div>

134
<ng-template #contentequirment let-modal>
135 136
    <div class=" col-md-12" style="padding: 0; ">
        <div class="card" style="margin: 0; ">
137
            <div class=" card-header">
138 139 140
                <h5 class=" title">Add Equirment</h5>
            </div>
            <div class=" card-body">
141
                <form [formGroup]="myFormEquir" class="needs-validation">
142 143 144 145
                    <div class=" row">
                        <div class=" col-md-12">
                            <div class=" form-group">
                                <label> ชื่อ </label>
146 147 148
                                <input class=" form-control" placeholder="" type="text"
                                    [(ngModel)]="modelEquirment.eqName" value="" formControlName="eqName" />
                                <div style="color: red;" *ngIf="myFormEquir.controls.eqName.status=='INVALID'">
149
                                    กรุณากรอกชื่อ</div>
150 151 152 153 154 155
                            </div>
                        </div>
                    </div>
                    <div class=" row">
                        <div class=" col-md-6 mb-2">
                            <div class=" form-group">
156
                                <label> หมวดหมู่ </label>
157
                                <br>
158
                                <select class="form-select" aria-label="Default select example"
159 160 161 162
                                    [(ngModel)]="modelEquirment.eqType" formControlName="eqType">
                                    <option selected>เลือกหมวดหมู่</option>
                                    <option value="4">IT</option>
                                    <option value="5">Company</option>
163
                                </select>
164
                                <div style="color: red;" *ngIf="myFormEquir.controls.eqType.status=='INVALID'">
165
                                    กรุณากรอกหมวดหมู่.</div>
166 167 168 169 170 171 172 173
                            </div>
                        </div>
                    </div>
                    <div class=" row">
                        <div class=" col-md-12">
                            <div class=" form-group">
                                <label> รายละเอียด</label>
                                <textarea class="form-control" id="exampleFormControlTextarea1" rows="3"
174 175 176
                                    placeholder="......" [(ngModel)]="modelEquirment.eqDesc"
                                    formControlName="eqDesc"></textarea>
                                <div style="color: red;" *ngIf="myFormEquir.controls.eqDesc.status=='INVALID'">
177
                                    กรุณากรอกรายละเอียด.</div>
178 179 180 181
                            </div>
                        </div>
                    </div>
                    <label for="exampleFormControlFile">แนบไฟล์รูปภาพ</label>
182
                    <input type="file" class="form-control-file" id="exampleFormControlFile" >
183 184
                </form>
            </div>
185

186
            <div class=" card-footer">
187
                <button class=" btn btn-fill btn-danger" [disabled]="myFormEquir.invalid" type="submit" (click)="saveEquirment()">Save</button>
188 189
                <button class=" btn btn-fill btn-danger" type="cancel"
                    (click)="modal.dismiss('Cross click')">Cancel</button>
190 191 192 193 194
            </div>
        </div>
    </div>
</ng-template>

195
<ng-template #contentroom let-modal>
196 197
    <div class=" col-md-12" style="padding: 0; ">
        <div class="card" style="margin: 0; ">
198
            <div class=" card-header">
199
                <h5 class=" title">เพิ่มรายการ</h5>
200 201
            </div>
            <div class=" card-body">
202
                <form [formGroup]="myFormRoom" class="needs-validation">
203 204 205 206
                    <div class=" row">
                        <div class=" col-md-12">
                            <div class=" form-group">
                                <label> ชื่อ </label>
207
                                <input class=" form-control" placeholder="" type="text" [(ngModel)]="modelRoom.rName" formControlName="rName">
208 209
                                <div style="color: red;" *ngIf="myFormRoom.controls.rName.status=='INVALID'">
                                    กรุณากรอกชื่อ.</div>
210 211 212 213 214 215
                            </div>
                        </div>
                    </div>
                    <div class=" row">
                        <div class=" col-md-6 mb-2">
                            <div class=" form-group">
216
                                <label> ประเภท </label>
217
                                <br>
218
                                <select class="form-select" aria-label="Default select example"
219 220 221
                                    [(ngModel)]="modelRoom.rType" formControlName="rType">
                                    <option value="1">ห้อง</option>
                                    <option value="2">รถ</option>
222
                                </select>
223 224
                                <div style="color: red;" *ngIf="myFormRoom.controls.rType.status=='INVALID'">
                                    กรุณากรอกประเภท</div>
225 226 227 228 229 230 231
                            </div>
                        </div>
                    </div>
                    <div class=" row">
                        <div class=" col-md-12">
                            <div class=" form-group">
                                <label> รายละเอียด</label>
232
                                <textarea class="form-control" id="exampleFormControlTextarea1" rows="3"
233 234 235
                                    placeholder="......" [(ngModel)]="modelRoom.rDesc"
                                    formControlName="rDesc"></textarea>
                                <div style="color: red;" *ngIf="myFormRoom.controls.rDesc.status=='INVALID'">
Chanachai committed
236
                                    กรุณากรอกรายละเอียด</div>
237 238 239 240
                            </div>
                        </div>
                    </div>
                    <label for="exampleFormControlFile">แนบไฟล์รูปภาพ</label>
241
                    <input type="file" class="form-control-file" id="exampleFormControlFile">
242 243 244
                </form>
            </div>
            <div class=" card-footer">
245
                <button class=" btn btn-fill btn-danger" [disabled]="myFormRoom.invalid" type="submit" (click)="saveRoom()">Save</button>
246 247
                <button class=" btn btn-fill btn-danger" type="cancel"
                    (click)="modal.dismiss('Cross click')">Cancel</button>
248 249 250 251 252
            </div>
        </div>
    </div>
</ng-template>

253
<ng-template #editroom let-modal>
254 255
    <div class=" col-md-12" style="padding: 0; ">
        <div class="card" style="margin: 0; ">
256 257 258 259
            <div class=" card-header">
                <h5 class=" title">แก้ไขข้อมูล</h5>
            </div>
            <div class=" card-body">
260
                <form [formGroup]="myFormRoom" class="needs-validation">
261 262
                    <div class=" row">
                        <div class=" col-md-12">
263
                            <label>ชื่อ</label>
264 265 266
                            <input class=" form-control" type="text" [(ngModel)]="listRoomModelEdit.rName"
                                formControlName="rName">
                            <div style="color: red;" *ngIf="myFormRoom.controls.rName.status=='INVALID'">
Chanachai committed
267
                                กรุณากรอกชื่อ</div>
268 269
                        </div>
                        <div class=" col-md-12">
270
                            <label>ประเภท</label>
271 272 273
                            <input class=" form-control" type="text" [(ngModel)]="listRoomModelEdit.rType"
                                formControlName="rType">
                            <div style="color: red;" *ngIf="myFormRoom.controls.rType.status=='INVALID'">
Chanachai committed
274
                                กรุณากรอกประเภท.</div>
275 276
                        </div>
                        <div class=" col-md-12">
277
                            <label>รายละเอียด</label>
278 279 280
                            <input class=" form-control" type="text" [(ngModel)]="listRoomModelEdit.rDesc"
                                formControlName="rDesc">
                            <div style="color: red;" *ngIf="myFormRoom.controls.rDesc.status=='INVALID'">
Chanachai committed
281
                                กรุณากรอกรายละเอียด.</div>
282 283
                        </div>
                    </div>
284
                </form>
285
            </div>
286

287
            <div class=" card-footer">
288 289 290
                <button class=" btn btn-fill btn-danger" type="update"
                    (click)="updateRoomProfile();modal.dismiss()">Save</button>
                <button class=" btn btn-fill btn-danger" type="cancel" (click)="modal.dismiss()">Cancel</button>
291 292 293 294 295
            </div>
        </div>
    </div>
</ng-template>

296
<ng-template #editLend let-modal>
297 298
    <div class=" col-md-12" style="padding: 0; ">
        <div class="card" style="margin: 0; ">
299 300 301 302
            <div class=" card-header">
                <h5 class=" title">แก้ไขข้อมูล</h5>
            </div>
            <div class=" card-body">
303
                <form [formGroup]="myFormEquir" class="needs-validation">
304 305
                    <div class=" row">
                        <div class=" col-md-12">
306
                            <label>ชื่ออุปกรณ์</label>
307 308
                            <input class=" form-control" type="text" [(ngModel)]="listEquirmentModelEdit.eqName"
                                formControlName="eqName">
309
                            <div style="color: red;" *ngIf="myFormEquir.controls.eqName.status=='INVALID'">
Chanachai committed
310
                                กรุณากรอกชื่ออุปกรณ์</div>
311 312
                        </div>
                        <div class=" col-md-12">
313
                            <label>ประเภทอุปกรณ์</label>
314 315
                            <input class=" form-control" type="text" [(ngModel)]="listEquirmentModelEdit.eqType"
                                formControlName="eqType">
316
                            <div style="color: red;" *ngIf="myFormEquir.controls.eqType.status=='INVALID'">
Chanachai committed
317
                                กรุณากรอกประเภทอุปกรณ์</div>
318 319
                        </div>
                        <div class=" col-md-12">
320
                            <label>รายละเอียดอุปกรณ์</label>
321 322
                            <input class=" form-control" type="text" [(ngModel)]="listEquirmentModelEdit.eqDesc"
                                formControlName="eqDesc">
323
                            <div style="color: red;" *ngIf="myFormEquir.controls.eqDesc.status=='INVALID'">
Chanachai committed
324
                                กรุณากรอกรายละเอียดอุปกรณ์</div>
325 326 327 328 329
                        </div>
                    </div>
                </form>
            </div>
            <div class=" card-footer">
330 331 332
                <button class=" btn btn-fill btn-danger" type="update"
                    (click)="updateItemProfile();modal.dismiss()">Save</button>
                <button class=" btn btn-fill btn-danger" type="cancel" (click)="modal.dismiss()">Cancel</button>
333 334 335
            </div>
        </div>
    </div>
336 337
</ng-template>

338
<ng-template #deleteRoomPopup let-modal>
339 340 341 342 343 344 345 346 347
    <div class=" col-md-12" style="padding: 0; ">
        <div class="card" style="margin: 0; ">
            <div class=" card-header">
                <h5 class=" title">ลบข้อมูล</h5>
            </div>
            <div class="card-body">
                <h4 class="text">คุณต้องการลบข้อมูลจริงหรือไม่</h4>
            </div>
            <div class=" card-footer">
348 349
                <button class=" btn btn-fill btn-danger" type="submit" (click)="deleteRoomProfile()">ยืนยัน</button>
                <button class=" btn btn-fill btn-danger" type="cancel" (click)="modal.dismiss()">ยกเลิก</button>
350 351 352
            </div>
        </div>
    </div>
353 354 355 356 357 358 359 360 361 362 363 364 365 366 367 368 369
</ng-template>

<ng-template #deleteEquirPopup let-modal>
    <div class=" col-md-12" style="padding: 0; ">
        <div class="card" style="margin: 0; ">
            <div class=" card-header">
                <h5 class=" title">ลบข้อมูล</h5>
            </div>
            <div class="card-body">
                <h4 class="text">คุณต้องการลบข้อมูลจริงหรือไม่</h4>
            </div>
            <div class=" card-footer">
                <button class=" btn btn-fill btn-danger" type="submit" (click)="deleteEquirProfile()">ยืนยัน</button>
                <button class=" btn btn-fill btn-danger" type="cancel" (click)="modal.dismiss()">ยกเลิก</button>
            </div>
        </div>
    </div>
370
</ng-template>