<div class="row"> <div class="col-12"> <div class="card card-body"> <h4 class="card-title">รายการวิทเจ็ท</h4> <div class="d-flex mb-3 mt-3"> <input type="text" class="form-control w-25" placeholder="ค้นหา" [(ngModel)]="search" > <button class="btn btn-primary ml-auto" (click)="openModal(editTemplateModal)">เพิ่มวิทเจ็ท</button> </div> <div class="table-responsive"> <table class="table table-striped mb-0 no-wrap v-middle "> <thead class="bg-info text-white"> <tr> <th class="text-center" scope="col">#</th> <th scope="col">รูปภาพ</th> <!-- <th scope="col">รหัสเอกสาร</th> --> <th scope="col">ชื่อ</th> <th scope="col">รายละเอียด</th> <th scope="col" class="text-center">ลิงค์</th> <th scope="col" class="text-center">สถานะ</th> <th scope="col"></th> </tr> </thead> <tbody> <tr *ngFor="let data of filterListDoc() | slice: (page-1) * pageSize : (page-1) * pageSize + pageSize ; let i = index"> <td class="text-center">{{i+1}}</td> <td><img width="100" class="border p-1" src="{{data.getImage()}}" (click)="openEmployeeModal(data.getImage())"></td> <!-- <td >{{data.id}}</td> --> <td>{{ data.thName }}</td> <td>{{ data.thDesc }}</td> <td class="text-center"><i class="fas fa-link pointer" (click)="openLink(data.link1)" ></i></td> <td class="text-center"> <span class="fa-stack rt_anim" *ngIf="data.status == '0'" ngbTooltip="รออนุมัติ" container="body" tooltipClass="myhrcolor-1"> <i class="fa fa-circle fa-stack-2x text-info"></i> <i class=" fas fa-hourglass-half fa-stack-1x fa-inverse"></i> </span> <span class="fa-stack rt_anim" *ngIf="data.status == '1'" ngbTooltip="เปิดใช้งาน" container="body" tooltipClass="myhrcolor-2"> <i class="fa fa-circle fa-stack-2x text-success"></i> <i class=" fas fa-check fa-stack-1x fa-inverse"></i> </span> <span class="fa-stack rt_anim" *ngIf="data.status == '2'" ngbTooltip="ไม่อนุมัติ" container="body" tooltipClass="myhrcolor-3"> <i class="fa fa-circle fa-stack-2x text-danger"></i> <i class="fas fa-times fa-stack-1x fa-inverse" style="font-size: 1.25em;"></i> </span> </td> <td> <button type="button" [disabled]="data.status != 0" class="btn btn-circle btn-primary rounded-circle btn-sm mr-2" (click)="openModal(editTemplateModal,data)" placement="top" ngbTooltip="แก้ไข"> <i class="fas fa-edit"></i> </button> <button type="button" class="btn btn-circle btn-danger rounded-circle btn-sm mr-2" (click)="deleteFile(data)" placement="top" ngbTooltip="ลบ"> <i class="fas fa-trash-alt"></i> </button> </td> </tr> </tbody> </table> </div> <div class="d-flex justify-content-end py-2"> <select class="custom-select m-r-5" style="width: auto" [(ngModel)]="pageSize" (ngModelChange)="page"> <option [ngValue]="10">รายการต่อหน้า: 10</option> <option [ngValue]="50">รายการต่อหน้า: 50</option> <option [ngValue]="100">รายการต่อหน้า: 100</option> </select> <ngb-pagination [(page)]="page" [pageSize]="pageSize" [collectionSize]="listDoc.length" [maxSize]="3" [rotate]="true"> <ng-template ngbPaginationPrevious>ก่อนหน้า</ng-template> <ng-template ngbPaginationNext>ถัดไป</ng-template> </ngb-pagination> </div> </div> </div> </div> <ng-template #editTemplateModal let-modal> <div class="modal-header"> <h5 class="modal-title" id="edittemplateLabel">{{checkEdit?"แก้ไขวิทเจ็ท":"เพิ่มวิทเจ็ท"}}</h5> <button type="button" class="close" (click)="closeBtnClick()" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> <div class="form-group row"> <label for="nameth" class="col-sm-4 col-form-label">ชื่อ (ไทย)</label> <div class="col-sm-8"> <input type="text" class="form-control" id="nameth" [(ngModel)]="modelDoc.thName"> </div> </div> <div class="form-group row"> <label for="nameeng" class="col-sm-4 col-form-label">ชื่อ (อังกฤษ)</label> <div class="col-sm-8"> <input type="text" class="form-control" id="nameeng" [(ngModel)]="modelDoc.engName"> </div> </div> <div class="form-group row"> <label for="position" class="col-sm-4 col-form-label">รายละเอียด (ไทย)</label> <div class="col-sm-8"> <textarea class="form-control" [(ngModel)]="modelDoc.thDesc"></textarea> </div> </div> <div class="form-group row"> <label for="position" class="col-sm-4 col-form-label">รายละเอียด (อังกฤษ)</label> <div class="col-sm-8"> <textarea class="form-control" [(ngModel)]="modelDoc.engDesc"></textarea> </div> </div> <div class="form-group row"> <label for="position" class="col-sm-4 col-form-label">ภาษาที่รองรับ</label> <div class="col-sm-8"> <select class="custom-select" [(ngModel)]="modelDoc.langSupport"> <option value="THA">ไทย</option> <option value="ENG">English</option> </select> <!-- <input type="text" class="form-control" id="nameeng" [(ngModel)]="modelDoc.langSupport"> --> </div> </div> <div class="form-group row"> <label for="name" class="col-sm-4 col-form-label">รูปภาพตัวอย่าง</label> <div class="col-sm-8"> <input type="file" class="form-control" (change)="onUploadImage($event)"> <div class="msg-detail">ไฟล์ที่อนุญาต:*.jpeg, *.jpg, *.png</div> </div> </div> <div class="form-group row"> <label for="name" class="col-sm-4 col-form-label">Link ตัวอย่าง</label> <div class="col-sm-8"> <input type="text" class="form-control" id="nameeng" [(ngModel)]="modelDoc.link1"> </div> </div> <div class="form-group row"> <label for="name" class="col-sm-4 col-form-label">แท็ก</label> <div class="col-sm-8"> <tag-input [theme]="'bootstrap'" [(ngModel)]='modelDoc.tags' placeholder="+แท็ก" [onlyFromAutocomplete]="true" secondaryPlaceholder="กดปุ่ม Enter เพื่อเพิ่มแท็กใหม่" [addOnBlur]="true" [clearOnBlur]="true"> <tag-input-dropdown [autocompleteItems]="listTag" [showDropdownIfEmpty]="true"> </tag-input-dropdown> </tag-input> </div> </div> <div class="form-group row"> <label for="position" class="col-sm-4 col-form-label">กลุ่ม</label> <div class="col-sm-8"> <select class="custom-select" [(ngModel)]="modelDoc.group.groupId" (change)="selectGroup()"> <option *ngFor="let item of listGroup" [ngValue]="item.groupId">{{item.thName}}</option> </select> </div> </div> <div class="form-group row"> <label for="position" class="col-sm-4 col-form-label">หมายเหตุ</label> <div class="col-sm-8"> <textarea class="form-control"[(ngModel)]="modelDoc.remark"></textarea> </div> </div> <div class="modal-footer "> <button type="submit" class="btn btn-info" (click)="onSumit()" [disabled]="!modelDoc.thName||!modelDoc.engName">บันทึก</button> <button type="button" class="btn btn-danger" (click)="closeBtnClick()">ปิด</button> </div> </div> </ng-template>