Skip to content

M
myhr-portal
Commit 889a506d by Ooh-Ao
Options

export

parent da09ad77
Showing with 100 additions and 136 deletions
src/app/apps/users/list-template-export/list-template-export.component.html
<div class="row"> <div class="row">
<div class="col-12"> <div class="col-12">
<div class="card card-body"> <div class="card card-body">
<h4 class="card-title">Employee Table</h4> <h4 class="card-title">Template List</h4>
<h5 class="card-subtitle">Here is the employee list you can add, edit or delet the emplyee</h5>
<div class="d-flex mb-3 mt-3"> <div class="d-flex mb-3 mt-3">
<input type="text" class="form-control w-25" placeholder="Search by Name or Email" [(ngModel)]='searchTerm'> <input type="text" class="form-control w-25" placeholder="Search" [(ngModel)]='searchTerm'>
<button class="btn btn-primary ml-auto" (click)="openModal(editUserModal, null)">Add User</button> <!-- <button class="btn btn-primary ml-auto" (click)="openModal(editTemplateModal, null)">Add template</button> -->
</div> </div>
<div class="table-responsive table-bordered"> <div class="table-responsive table-bordered">
<table class="table table-striped mb-0 no-wrap v-middle"> <table class="table table-striped mb-0 no-wrap v-middle">
...@@ -13,45 +12,41 @@ ...@@ -13,45 +12,41 @@
<tr> <tr>
<th class="text-center" scope="col">#</th> <th class="text-center" scope="col">#</th>
<th scope="col">Name</th> <th scope="col">Name</th>
<th scope="col">Email</th> <th scope="col">Description</th>
<th scope="col">Mobile</th> <th scope="col">Upload Date</th>
<th scope="col">Date of Joining</th> <th scope="col">Status</th>
<th scope="col">Salary</th> <th scope="col">Type</th>
<th scope="col">Projects</th> <th scope="col">File</th>
<th scope="col">Action</th> <th scope="col">Action</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr *ngFor="let user of filterArray | slice: (page-1) * pageSize : (page-1) * pageSize + pageSize"> <tr *ngFor="let template of filterArray | slice: (page-1) * pageSize : (page-1) * pageSize + pageSize">
<td class="text-center"> <td class="text-center">
{{user.id}} {{template.id}}
</td> </td>
<td>{{ template.Name }}</td>
<td> <!-- <td>
<div class="d-flex align-items-center"> <div class="d-flex align-items-center">
<img class="rounded-circle" [src]='user.imagePath' height=" 50px" width="50px"> <img class="rounded-circle" [src]='template.imagePath' height=" 50px" width="50px">
<div class="ml-3"> <div class="ml-3">
<p class="font-medium mb-0">{{ user.Name }}</p> <p class="font-medium mb-0">{{ template.Name }}</p>
<small>{{user.Position}}</small> <small>{{template.Position}}</small>
</div> </div>
</div> </div>
</td> </td> -->
<td>{{ user.Email }}</td> <td>{{ template.Email }}</td>
<td>{{ user.Mobile }}</td> <td>{{ template.DateOfJoining |date :'fullDate' }}</td>
<td>{{ user.DateOfJoining |date :'fullDate' }}</td> <td>{{ template.Mobile }}</td>
<td>{{ user.Salary }}</td> <td>{{ template.Salary }}</td>
<td>{{ user.Projects }}</td> <td><a style="color: blue;">{{ template.imagePath }}</a></td>
<td> <td>
<a href="javascript: void(0);" (click)="openModal(editUserModal, user)" class="link mr-2" <a href="javascript: void(0);" (click)="openModal(editTemplateModal, template)" class="link mr-2"
placement="top" ngbTooltip="Edit"> placement="top" ngbTooltip="Download">
<i-feather name="edit-2" class="feather-sm"></i-feather> <i-feather name="download" class="feather-sm"></i-feather>
</a>
<a href="javascript: void(0);" class="link" (click)="deleteUser(user.id)" placement="top"
ngbTooltip="Delete">
<i-feather name="trash-2" class="feather-sm"></i-feather>
</a> </a>
</td> </td>
</tr> </tr>
...@@ -59,18 +54,18 @@ ...@@ -59,18 +54,18 @@
</table> </table>
</div> </div>
<div class="d-flex justify-content-center mt-5"> <div class="d-flex justify-content-center mt-5">
<ngb-pagination [(page)]="page" [pageSize]="pageSize" [collectionSize]="userList.length"></ngb-pagination> <ngb-pagination [(page)]="page" [pageSize]="pageSize" [collectionSize]="templateList.length"></ngb-pagination>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<ng-template #editUserModal let-modal> <ng-template #editTemplateModal let-modal>
<div class="modal-header"> <div class="modal-header">
<h5 class="modal-title" id="editUserLabel">Edit User</h5> <h5 class="modal-title" id="edittemplateLabel">Edit template</h5>
<button type="button" class="close" (click)="closeBtnClick()" aria-label="Close"> <button type="button" class="close" (click)="closeBtnClick()" aria-label="Close">
<span aria-hidden="true">&times;</span> <span aria-hidden="true">&times;</span>
...@@ -80,35 +75,59 @@ ...@@ -80,35 +75,59 @@
<div class="modal-body"> <div class="modal-body">
<form [formGroup]="editUser" (ngSubmit)="onSubmit()"> <form [formGroup]="edittemplate" (ngSubmit)="onSubmit()">
<div class="form-group row"> <div class="form-group row">
<label for="name" class="col-sm-4 col-form-label">Name</label> <label for="name" class="col-sm-4 col-form-label">ชื่อ</label>
<div class="col-sm-8"> <div class="col-sm-8">
<input type="text" class="form-control" formControlName="Name" id="name" (blur)=logValidationErrors(editUser)> <input type="text" class="form-control" formControlName="Name" id="name" (blur)=logValidationErrors(edittemplate)>
<span class="help-block" *ngIf="formsErrors.Name"> <span class="help-block" *ngIf="formsErrors.Name">
{{formsErrors.Name}} {{formsErrors.Name}}
</span> </span>
</div> </div>
</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">
</div>
</div>
<div class="form-group row"> <div class="form-group row">
<label for="position" class="col-sm-4 col-form-label">Position</label> <label for="position" class="col-sm-4 col-form-label">รายละเอียด</label>
<div class="col-sm-8"> <div class="col-sm-8">
<input type="text" class="form-control" formControlName="Position" id="position" <textarea class="form-control"></textarea>
(blur)=logValidationErrors(editUser)>
<span class="help-block" *ngIf="formsErrors.Position">
{{formsErrors.Position}}
</span>
</div> </div>
</div> </div>
<div class="form-group row"> <div class="form-group row">
<label for="position" class="col-sm-4 col-form-label">ประเภท</label>
<div class="col-sm-8">
<select class="form-control">
<option>Excel</option>
<option>Mail Merge</option>
<option>Resume</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">
<select class="form-control">
<option>เปิดใช้งาน</option>
<option>ปิดการใช้งาน</option>
</select>
</div>
</div>
<!-- <div class="form-group row">
<label for="email" class="col-sm-4 col-form-label">Email</label> <label for="email" class="col-sm-4 col-form-label">Email</label>
<div class="col-sm-8"> <div class="col-sm-8">
<input type="email" class="form-control" formControlName="Email" id="email" <input type="email" class="form-control" formControlName="Email" id="email"
(blur)=logValidationErrors(editUser)> (blur)=logValidationErrors(edittemplate)>
<span class="help-block" *ngIf="formsErrors.Email"> <span class="help-block" *ngIf="formsErrors.Email">
{{formsErrors.Email}} {{formsErrors.Email}}
</span> </span>
...@@ -119,7 +138,7 @@ ...@@ -119,7 +138,7 @@
<label for="mobile" class="col-sm-4 col-form-label">Mobile</label> <label for="mobile" class="col-sm-4 col-form-label">Mobile</label>
<div class="col-sm-8"> <div class="col-sm-8">
<input type="text" class="form-control" formControlName="Mobile" id="mobile" <input type="text" class="form-control" formControlName="Mobile" id="mobile"
(blur)=logValidationErrors(editUser)> (blur)=logValidationErrors(edittemplate)>
<span class="help-block" *ngIf="formsErrors.Mobile"> <span class="help-block" *ngIf="formsErrors.Mobile">
{{formsErrors.Mobile}} {{formsErrors.Mobile}}
</span> </span>
...@@ -130,7 +149,7 @@ ...@@ -130,7 +149,7 @@
<label for="doj" class="col-sm-4 col-form-label">Date Of Joining</label> <label for="doj" class="col-sm-4 col-form-label">Date Of Joining</label>
<div class="col-sm-8"> <div class="col-sm-8">
<input type="date" class="form-control" formControlName="DateOfJoining" [(ngModel)]="joiningDate" id="doj" <input type="date" class="form-control" formControlName="DateOfJoining" [(ngModel)]="joiningDate" id="doj"
(blur)=logValidationErrors(editUser)> (blur)=logValidationErrors(edittemplate)>
<span class="help-block" *ngIf="formsErrors.DateOfJoining"> <span class="help-block" *ngIf="formsErrors.DateOfJoining">
{{formsErrors.DateOfJoining}} {{formsErrors.DateOfJoining}}
</span> </span>
...@@ -141,7 +160,7 @@ ...@@ -141,7 +160,7 @@
<label for="salary" class="col-sm-4 col-form-label">Salary</label> <label for="salary" class="col-sm-4 col-form-label">Salary</label>
<div class="col-sm-8"> <div class="col-sm-8">
<input type="number" class="form-control" formControlName="Salary" id="salary" <input type="number" class="form-control" formControlName="Salary" id="salary"
(blur)=logValidationErrors(editUser)> (blur)=logValidationErrors(edittemplate)>
<span class="help-block" *ngIf="formsErrors.Salary"> <span class="help-block" *ngIf="formsErrors.Salary">
{{formsErrors.Salary}} {{formsErrors.Salary}}
</span> </span>
...@@ -152,12 +171,12 @@ ...@@ -152,12 +171,12 @@
<label for="projects" class="col-sm-4 col-form-label">Projects</label> <label for="projects" class="col-sm-4 col-form-label">Projects</label>
<div class="col-sm-8"> <div class="col-sm-8">
<input type="number" class="form-control" formControlName="Projects" id="projects" <input type="number" class="form-control" formControlName="Projects" id="projects"
(blur)=logValidationErrors(editUser)> (blur)=logValidationErrors(edittemplate)>
<span class="help-block" *ngIf="formsErrors.Projects"> <span class="help-block" *ngIf="formsErrors.Projects">
{{formsErrors.Projects}} {{formsErrors.Projects}}
</span> </span>
</div> </div>
</div> </div> -->
...@@ -166,7 +185,7 @@ ...@@ -166,7 +185,7 @@
<div class="modal-footer"> <div class="modal-footer">
<button type="button" class="btn btn-secondary" (click)="closeBtnClick()">Close</button> <button type="button" class="btn btn-secondary" (click)="closeBtnClick()">Close</button>
<button type="submit" class="btn btn-primary" [disabled]="editUser.invalid">Save</button> <button type="submit" class="btn btn-primary" [disabled]="edittemplate.invalid">Save</button>
</div> </div>
......
src/app/apps/users/list-template-export/list-template-export.component.ts
...@@ -13,7 +13,7 @@ import { User } from '../user'; ...@@ -13,7 +13,7 @@ import { User } from '../user';
export class ListTemplateExportComponent implements OnInit { export class ListTemplateExportComponent implements OnInit {
constructor(private userService: UserService, private fb: FormBuilder, private modalService: NgbModal, private datePipe: DatePipe) { constructor(private userService: UserService, private fb: FormBuilder, private modalService: NgbModal, private datePipe: DatePipe) {
this.filterArray = this.userList; this.filterArray = this.templateList;
} }
get searchTerm(): string { get searchTerm(): string {
return this._searchTerm; return this._searchTerm;
...@@ -26,7 +26,7 @@ export class ListTemplateExportComponent implements OnInit { ...@@ -26,7 +26,7 @@ export class ListTemplateExportComponent implements OnInit {
pageSize = 7; pageSize = 7;
userList: User[] = this.userService.getUser(); templateList: User[] = this.userService.getUser();
config: any; config: any;
editUser: FormGroup | null = null; editUser: FormGroup | null = null;
userDetail: User | null = null; userDetail: User | null = null;
...@@ -78,7 +78,7 @@ export class ListTemplateExportComponent implements OnInit { ...@@ -78,7 +78,7 @@ export class ListTemplateExportComponent implements OnInit {
} }
filter(v: string) { filter(v: string) {
return this.userList.filter(x => x.Name.toLowerCase(). return this.templateList.filter(x => x.Name.toLowerCase().
indexOf(v.toLowerCase()) !== -1 || x.Email.toLowerCase().indexOf(v.toLowerCase()) !== -1); indexOf(v.toLowerCase()) !== -1 || x.Email.toLowerCase().indexOf(v.toLowerCase()) !== -1);
} }
......
src/app/apps/users/list-template-import/list-template-import.component.html
...@@ -4,7 +4,7 @@ ...@@ -4,7 +4,7 @@
<h4 class="card-title">Template</h4> <h4 class="card-title">Template</h4>
<h5 class="card-subtitle">Here is the template list you can add, edit or delet the template</h5> <h5 class="card-subtitle">Here is the template list you can add, edit or delet the template</h5>
<div class="d-flex mb-3 mt-3"> <div class="d-flex mb-3 mt-3">
<input type="text" class="form-control w-25" placeholder="Search by Name or Email" [(ngModel)]='searchTerm'> <input type="text" class="form-control w-25" placeholder="Search" [(ngModel)]='searchTerm'>
<button class="btn btn-primary ml-auto" (click)="openModal(editTemplateModal, null)">Add template</button> <button class="btn btn-primary ml-auto" (click)="openModal(editTemplateModal, null)">Add template</button>
</div> </div>
<div class="table-responsive table-bordered"> <div class="table-responsive table-bordered">
...@@ -27,8 +27,8 @@ ...@@ -27,8 +27,8 @@
<td class="text-center"> <td class="text-center">
{{template.id}} {{template.id}}
</td> </td>
<td>{{ template.Name }}</td>
<td> <!-- <td>
<div class="d-flex align-items-center"> <div class="d-flex align-items-center">
<img class="rounded-circle" [src]='template.imagePath' height=" 50px" width="50px"> <img class="rounded-circle" [src]='template.imagePath' height=" 50px" width="50px">
<div class="ml-3"> <div class="ml-3">
...@@ -36,14 +36,14 @@ ...@@ -36,14 +36,14 @@
<small>{{template.Position}}</small> <small>{{template.Position}}</small>
</div> </div>
</div> </div>
</td> </td> -->
<td>{{ template.Email }}</td> <td>{{ template.Email }}</td>
<td>{{ template.Mobile }}</td>
<td>{{ template.DateOfJoining |date :'fullDate' }}</td> <td>{{ template.DateOfJoining |date :'fullDate' }}</td>
<td>{{ template.Mobile }}</td>
<td>{{ template.Salary }}</td> <td>{{ template.Salary }}</td>
<td>{{ template.Projects }}</td> <td><a style="color: blue;">{{ template.imagePath }}</a></td>
<td> <td>
<a href="javascript: void(0);" (click)="openModal(editTemplateModal, template)" class="link mr-2" <a href="javascript: void(0);" (click)="openModal(editTemplateModal, template)" class="link mr-2"
placement="top" ngbTooltip="Edit"> placement="top" ngbTooltip="Edit">
......
src/app/apps/users/user-data.ts
...@@ -3,101 +3,46 @@ import { User } from './user'; ...@@ -3,101 +3,46 @@ import { User } from './user';
export const users: User[] = [ export const users: User[] = [
{ {
id: 1, id: 1,
Name: 'Johnathan Deo', Name: 'Template Excel ข้อมูลพนักงาน',
Position: 'Seo Expert', Position: 'Seo Expert',
Email: 'r@gmail.com', Email: 'แสดงรายชื่อพนักงานทั้งหมด',
Mobile: 9786838, Mobile: 'เปิดใช้งาน',
DateOfJoining: new Date('01-2-2020'), DateOfJoining: new Date('01-2-2020'),
Salary: 12000, Salary: 'Excel',
Projects: 10, Projects: 10,
imagePath: 'assets/images/users/2.jpg' imagePath: '111.xlxs'
}, },
{ {
id: 2, id: 2,
Name: 'Mark Zukerburg', Name: 'หนังสือรับรองเงินเดือน Word',
Position: 'Web Developer', Position: 'Web Developer',
Email: 'mark@gmail.com', Email: 'เอกสารใบรับรองเงินเดือน',
Mobile: 8786838, Mobile: 'เปิดใช้งาน',
DateOfJoining: new Date('04-2-2020'), DateOfJoining: new Date('04-2-2020'),
Salary: 12000, Salary: 'Mail Merge',
Projects: 10, Projects: 10,
imagePath: 'assets/images/users/3.jpg' imagePath: '111.doc'
}, },
{ {
id: 3, id: 3,
Name: 'Sam smith', Name: 'Resume',
Position: 'Web Designer', Position: 'Web Designer',
Email: 'sam@gmail.com', Email: 'ตัวอย่าง Resume',
Mobile: 7788838, Mobile: 'เปิดใช้งาน',
DateOfJoining: new Date('02-2-2020'), DateOfJoining: new Date('02-2-2020'),
Salary: 12000, Salary: 'Resume',
Projects: 10, Projects: 10,
imagePath: 'assets/images/users/4.jpg' imagePath: '111.pdf'
}, },
{ {
id: 4, id: 4,
Name: 'John Deo', Name: 'Template Excel เวลาการทำงาน',
Position: 'Tester', Position: 'Tester',
Email: 'john@gmail.com', Email: 'ข้อมูลเวลาการทำงาน',
Mobile: 8786838, Mobile: 'เปิดใช้งาน',
DateOfJoining: new Date('03-2-2020'), DateOfJoining: new Date('03-2-2020'),
Salary: 12000, Salary: 'Excel',
Projects: 11, Projects: 11,
imagePath: 'assets/images/users/5.jpg' imagePath: '111.xlxs'
}, },
{
id: 5,
Name: 'Genilia',
Position: 'Actor',
Email: 'genilia@gmail.com',
Mobile: 8786838,
DateOfJoining: new Date('05-2-2020'),
Salary: 12000,
Projects: 19,
imagePath: 'assets/images/users/6.jpg'
},
{
id: 6,
Name: 'Jack Sparrow',
Position: 'Content Writer',
Email: 'jac@gmail.com',
Mobile: 8786838,
DateOfJoining: new Date('05-21-2020'),
Salary: 12000,
Projects: 5,
imagePath: 'assets/images/users/7.jpg'
},
{
id: 7,
Name: 'Tom Cruise',
Position: 'Actor',
Email: 'tom@gmail.com',
Mobile: 8786838,
DateOfJoining: new Date('02-15-2019'),
Salary: 12000,
Projects: 9,
imagePath: 'assets/images/users/3.jpg'
},
{
id: 8,
Name: 'Hary Porter',
Position: 'Actor',
Email: 'hary@gmail.com',
Mobile: 8786838,
DateOfJoining: new Date('07-3-2019'),
Salary: 12000,
Projects: 7,
imagePath: 'assets/images/users/6.jpg'
},
{
id: 9,
Name: 'Kristen Ronaldo',
Position: 'Player',
Email: 'kristen@gmail.com',
Mobile: 8786838,
DateOfJoining: new Date('01-15-2019'),
Salary: 12000,
Projects: 1,
imagePath: 'assets/images/users/5.jpg'
}
]; ];
src/app/apps/users/user.ts
...@@ -3,9 +3,9 @@ export class User { ...@@ -3,9 +3,9 @@ export class User {
public Name = ''; public Name = '';
public Position = ''; public Position = '';
public Email = ''; public Email = '';
public Mobile = 0; public Mobile = '';
public DateOfJoining: Date | null = null; public DateOfJoining: Date | null = null;
public Salary = 0; public Salary = '';
public Projects = 0; public Projects = 0;
public imagePath = ''; public imagePath = '';
} }
src/app/shared/vertical-sidebar/vertical-sidebar.component.html
...@@ -32,12 +32,12 @@ ...@@ -32,12 +32,12 @@
</div> </div>
</div> </div>
</li> </li>
<li class="p-15 m-t-10"> <!-- <li class="p-15 m-t-10">
<a href="javascript:void(0)" class="btn btn-block create-btn text-white no-block d-flex align-items-center"> <a href="javascript:void(0)" class="btn btn-block create-btn text-white no-block d-flex align-items-center">
<i class="fa fa-plus-square"></i> <i class="fa fa-plus-square"></i>
<span class="hide-menu m-l-5">Create New</span> <span class="hide-menu m-l-5">Create New</span>
</a> </a>
</li> </li> -->
<!-- First level menu --> <!-- First level menu -->
<li class="sidebar-item" [class.active]="showMenu === sidebarnavItem.title" <li class="sidebar-item" [class.active]="showMenu === sidebarnavItem.title"
*ngFor="let sidebarnavItem of sidebarnavItems" *ngFor="let sidebarnavItem of sidebarnavItems"
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment