Skip to content

M
myhr-portal
Commit 347471bd by pantakan konthang
Options

สร้าง category-manage และ template-manage

parent 889a506d
Showing with 693 additions and 2 deletions
src/app/apps/apps.module.ts
......@@ -75,7 +75,8 @@ import { ViewInvoiceComponent } from './invoice/view-invoice/view-invoice.compon
import { EditInvoiceComponent } from './invoice/edit-invoice/edit-invoice.component';
import { ListTemplateImportComponent } from './users/list-template-import/list-template-import.component';
import { ListTemplateExportComponent } from './users/list-template-export/list-template-export.component';
import { PortalCategoryManageComponent } from './portal-category-manage/portal-category-manage.component';
import { PortalTemplateManageComponent } from './portal-template-manage/portal-template-manage.component';
@NgModule({
......@@ -128,7 +129,9 @@ import { ListTemplateExportComponent } from './users/list-template-export/list-t
JobDetailComponent,
JobApplyComponent,
ListTemplateImportComponent,
ListTemplateExportComponent
ListTemplateExportComponent,
PortalCategoryManageComponent,
PortalTemplateManageComponent
],
providers: [
ContactService,
......
src/app/apps/apps.routing.ts
......@@ -30,6 +30,8 @@ import { JobDetailComponent } from "./jobs/job-detail/job-detail.component";
import { JobApplyComponent } from "./jobs/job-apply/job-apply.component";
import { ListTemplateImportComponent } from "./users/list-template-import/list-template-import.component";
import { ListTemplateExportComponent } from "./users/list-template-export/list-template-export.component";
import { PortalCategoryManageComponent } from "./portal-category-manage/portal-category-manage.component";
import { PortalTemplateManageComponent } from "./portal-template-manage/portal-template-manage.component";
export const AppsRoutes: Routes = [
{
......@@ -153,6 +155,26 @@ export const AppsRoutes: Routes = [
},
},
{
path: "portal-category-manage",
component: PortalCategoryManageComponent,
data: {
title: "Category Manage",
urls: [
{ title: "Category Manage" },
],
},
},
{
path: "portal-template-manage",
component: PortalTemplateManageComponent,
data: {
title: "Template Manage",
urls: [
{ title: "Template Manage" },
],
},
},
{
path: "import-template",
component: ListTemplateImportComponent,
data: {
......
src/app/apps/contact/contact.component.html
......@@ -58,6 +58,7 @@
</div>
</div>
</div>
<!-- Modal -->
<ng-template #addContactModal let-modal>
<div class="modal-header">
......
src/app/apps/portal-category-manage/portal-category-manage.component.html 0 → 100644
<div class="row">
<div class="col-12">
<div class="card card-body">
<h4 class="card-title">Category Manage</h4>
<div class="d-flex mb-3 mt-3">
<input type="text" class="form-control w-25" placeholder="Search" [(ngModel)]='searchTerm'>
<button class="btn btn-primary ml-auto" (click)="openModal(editTemplateModal)">Add File Type Category</button>
</div>
</div>
</div>
</div>
<div class="row justify-content-center">
<div class="col-md-4" *ngFor="let c of testdata">
<div class="card">
<div class="card-body text-center">
<img src="{{ c.img }}" class="rounded-circle border p-1" width="100">
<!-- ชื่อประเภทไฟล์ -->
<h3 class="card-title mt-3 mb-0">{{c.name}}</h3>
<div class="mt-1 pt-1">
<h4 class="card-title mt-3 mb-0">{{c.details}}</h4>
<br />
</div>
<div class="mt-3">
<a href="/apps/portal-template-manage">
<button class="btn btn-info">View</button>
</a>
<button class="btn btn-warning">Edit</button>
<button class="btn btn-danger">Delete</button>
<!-- <button class="btn btn-light">Follow</button> -->
</div>
</div>
</div>
</div>
</div>
<!-- Add File -->
<ng-template #editTemplateModal let-modal>
<div class="modal-header">
<h5 class="modal-title" id="edittemplateLabel">Add File Type Category</h5>
<button type="button" class="close" (click)="closeBtnClick()" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<form [formGroup]="edittemplate" (ngSubmit)="onSubmit()">
<div class="form-group row">
<label for="name" class="col-sm-4 col-form-label">ชื่อประเภทไฟล์</label>
<div class="col-sm-8">
<input type="text" class="form-control" formControlName="Name" id="name" (blur)=logValidationErrors(edittemplate)>
</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"></textarea>
</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="modal-footer">
<button type="button" class="btn btn-secondary" (click)="closeBtnClick()">Close</button>
<button type="submit" class="btn btn-primary" >Save</button>
</div>
</form>
</div>
</ng-template>
src/app/apps/portal-category-manage/portal-category-manage.component.spec.ts 0 → 100644
/* tslint:disable:no-unused-variable */
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { By } from '@angular/platform-browser';
import { DebugElement } from '@angular/core';
import { PortalCategoryManageComponent } from './portal-category-manage.component';
describe('PortalCategoryManageComponent', () => {
let component: PortalCategoryManageComponent;
let fixture: ComponentFixture<PortalCategoryManageComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ PortalCategoryManageComponent ]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(PortalCategoryManageComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
src/app/apps/portal-category-manage/portal-category-manage.component.ts 0 → 100644
import { Component, OnInit } from "@angular/core";
import { NgbModal } from "@ng-bootstrap/ng-bootstrap";
import { FormBuilder, FormGroup, Validators } from "@angular/forms";
import { DatePipe } from "@angular/common";
// export interface Testdata {
// img: String;
// name: String;
// details: String;
// }
@Component({
selector: "app-portal-category-manage",
templateUrl: "./portal-category-manage.component.html",
styleUrls: ["./portal-category-manage.component.scss"],
})
export class PortalCategoryManageComponent implements OnInit {
constructor(
private fb: FormBuilder,
private modalService: NgbModal,
private datePipe: DatePipe
) {}
get searchTerm(): string {
return this._searchTerm;
}
set searchTerm(val: string) {
this._searchTerm = val;
}
page = 1;
pageSize = 7;
testdata: {
img: String;
name: String;
details: String;
}[] = [];
config: any;
editUser: FormGroup | null = null;
joiningDate: string | null = null;
_searchTerm = "";
ValidationMessage = [
{
Name: { required: "Name is required." },
},
{
Position: { required: "Position is required." },
},
{
Email: { required: "Email is required." },
},
{
Mobile: { required: "Mobile is required." },
},
{
DateOfJoining: { required: "DOJ is required." },
},
{
Salary: { required: "Salary is required." },
},
{
Projects: { required: "Project is required." },
},
];
formsErrors = [];
ngOnInit() {
this.editUser = this.fb.group({
id: [""],
Name: ["", Validators.required],
Position: ["", Validators.required],
Email: ["", Validators.required],
Mobile: ["", Validators.required],
DateOfJoining: ["", Validators.required],
Salary: ["", Validators.required],
Projects: ["", Validators.required],
});
this.testdata = [
{
img: "assets/images/phototest/excel.jpg",
name: "ประเภทไฟล์: Excel",
details: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
},
{
img: "assets/images/phototest/mail.jpg",
name: "ประเภทไฟล์: Mail Merge",
details: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
},
{
img: "assets/images/phototest/resume.jpg",
name: "ประเภทไฟล์: Resume",
details: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
},
];
}
logValidationErrors(group: FormGroup) {
// Object.keys(group.controls).forEach((key: string) => {
// const ac = group.get(key);
// this.formsErrors[key] = '';
// if (ac && !ac.valid && (ac.touched || ac.dirty)) {
// const message = this.ValidationMessage[key];
// for (const errorKey in ac.errors) {
// if (errorKey) {
// this.formsErrors[key] += message[errorKey] + ' ';
// }
// }
// }
// if (ac instanceof FormGroup) {
// this.logValidationErrors(ac)
// }
// })
}
openModal(targetModal: NgbModal) {
this.modalService.open(targetModal, {
centered: true,
backdrop: "static",
});
}
closeBtnClick() {
this.modalService.dismissAll();
this.ngOnInit();
}
}
src/app/apps/portal-template-manage/portal-template-manage.component.html 0 → 100644
<div class="row">
<div class="col-12">
<div class="card card-body">
<h4 class="card-title">Template Manage (แยกแต่ละประเภทของไฟล์)</h4>
<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">
<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>
</div>
<div class="table-responsive table-bordered">
<table class="table table-striped mb-0 no-wrap v-middle">
<thead>
<tr>
<th class="text-center" scope="col">#</th>
<th scope="col">Name</th>
<th scope="col">Description</th>
<th scope="col">Upload Date</th>
<th scope="col">Status</th>
<th scope="col">Type</th>
<th scope="col">File</th>
<th scope="col">Action</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let template of filterArray | slice: (page-1) * pageSize : (page-1) * pageSize + pageSize">
<td class="text-center">
{{template.id}}
</td>
<td>{{ template.Name }}</td>
<!-- <td>
<div class="d-flex align-items-center">
<img class="rounded-circle" [src]='template.imagePath' height=" 50px" width="50px">
<div class="ml-3">
<p class="font-medium mb-0">{{ template.Name }}</p>
<small>{{template.Position}}</small>
</div>
</div>
</td> -->
<td>{{ template.Email }}</td>
<td>{{ template.DateOfJoining |date :'fullDate' }}</td>
<td>{{ template.Mobile }}</td>
<td>{{ template.Salary }}</td>
<td><a style="color: blue;">{{ template.imagePath }}</a></td>
<td>
<a href="javascript: void(0);" (click)="openModal(editTemplateModal, template)" class="link mr-2"
placement="top" ngbTooltip="Edit">
<i-feather name="edit-2" class="feather-sm"></i-feather>
</a>
<a href="javascript: void(0);" class="link" (click)="deletetemplate(template.id)" placement="top"
ngbTooltip="Delete">
<i-feather name="trash-2" class="feather-sm"></i-feather>
</a>
</td>
</tr>
</tbody>
</table>
</div>
<div class="d-flex justify-content-center mt-5">
<ngb-pagination [(page)]="page" [pageSize]="pageSize" [collectionSize]="templateList.length"></ngb-pagination>
</div>
</div>
</div>
</div>
<ng-template #editTemplateModal let-modal>
<div class="modal-header">
<h5 class="modal-title" id="edittemplateLabel">Edit template</h5>
<button type="button" class="close" (click)="closeBtnClick()" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<form [formGroup]="edittemplate" (ngSubmit)="onSubmit()">
<div class="form-group row">
<label for="name" class="col-sm-4 col-form-label">ชื่อ</label>
<div class="col-sm-8">
<input type="text" class="form-control" formControlName="Name" id="name" (blur)=logValidationErrors(edittemplate)>
<span class="help-block" *ngIf="formsErrors.Name">
{{formsErrors.Name}}
</span>
</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">
<label for="position" class="col-sm-4 col-form-label">รายละเอียด</label>
<div class="col-sm-8">
<textarea class="form-control"></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="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>
<div class="col-sm-8">
<input type="email" class="form-control" formControlName="Email" id="email"
(blur)=logValidationErrors(edittemplate)>
<span class="help-block" *ngIf="formsErrors.Email">
{{formsErrors.Email}}
</span>
</div>
</div>
<div class="form-group row">
<label for="mobile" class="col-sm-4 col-form-label">Mobile</label>
<div class="col-sm-8">
<input type="text" class="form-control" formControlName="Mobile" id="mobile"
(blur)=logValidationErrors(edittemplate)>
<span class="help-block" *ngIf="formsErrors.Mobile">
{{formsErrors.Mobile}}
</span>
</div>
</div>
<div class="form-group row">
<label for="doj" class="col-sm-4 col-form-label">Date Of Joining</label>
<div class="col-sm-8">
<input type="date" class="form-control" formControlName="DateOfJoining" [(ngModel)]="joiningDate" id="doj"
(blur)=logValidationErrors(edittemplate)>
<span class="help-block" *ngIf="formsErrors.DateOfJoining">
{{formsErrors.DateOfJoining}}
</span>
</div>
</div>
<div class="form-group row">
<label for="salary" class="col-sm-4 col-form-label">Salary</label>
<div class="col-sm-8">
<input type="number" class="form-control" formControlName="Salary" id="salary"
(blur)=logValidationErrors(edittemplate)>
<span class="help-block" *ngIf="formsErrors.Salary">
{{formsErrors.Salary}}
</span>
</div>
</div>
<div class="form-group row">
<label for="projects" class="col-sm-4 col-form-label">Projects</label>
<div class="col-sm-8">
<input type="number" class="form-control" formControlName="Projects" id="projects"
(blur)=logValidationErrors(edittemplate)>
<span class="help-block" *ngIf="formsErrors.Projects">
{{formsErrors.Projects}}
</span>
</div>
</div> -->
<div class="modal-footer">
<button type="button" class="btn btn-secondary" (click)="closeBtnClick()">Close</button>
<button type="submit" class="btn btn-primary" [disabled]="edittemplate.invalid">Save</button>
</div>
</form>
</div>
</ng-template>
\ No newline at end of file
src/app/apps/portal-template-manage/portal-template-manage.component.spec.ts 0 → 100644
/* tslint:disable:no-unused-variable */
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { By } from '@angular/platform-browser';
import { DebugElement } from '@angular/core';
import { PortalTemplateManageComponent } from './portal-template-manage.component';
describe('PortalTemplateManageComponent', () => {
let component: PortalTemplateManageComponent;
let fixture: ComponentFixture<PortalTemplateManageComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ PortalTemplateManageComponent ]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(PortalTemplateManageComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
src/app/apps/portal-template-manage/portal-template-manage.component.ts 0 → 100644
import { Component, OnInit } from '@angular/core';
import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { DatePipe } from '@angular/common';
import { UserService } from '../users/userService.service';
import { User } from '../users/user';
@Component({
selector: 'app-portal-template-manage',
templateUrl: './portal-template-manage.component.html',
styleUrls: ['./portal-template-manage.component.scss']
})
export class PortalTemplateManageComponent implements OnInit {
// constructor() { }
// ngOnInit() {
// }
constructor(private userService: UserService, private fb: FormBuilder, private modalService: NgbModal, private datePipe: DatePipe) {
this.filterArray = this.templateList;
}
get searchTerm(): string {
return this._searchTerm;
}
set searchTerm(val: string) {
this._searchTerm = val;
this.filterArray = this.filter(val);
}
page = 1;
pageSize = 7;
templateList: User[] = this.userService.getUser();
config: any;
editUser: FormGroup | null = null;
userDetail: User | null = null;
filterArray: User[] | null = null;
joiningDate: string | null = null;
_searchTerm = '';
ValidationMessage =
[
{
Name: { required: 'Name is required.' }
}, {
Position: { required: 'Position is required.' }
}, {
Email: { required: 'Email is required.' }
},
{
Mobile: { required: 'Mobile is required.' }
},
{
DateOfJoining: { required: 'DOJ is required.' }
},
{
Salary: { required: 'Salary is required.' }
},
{
Projects: { required: 'Project is required.' }
},
];
formsErrors = [];
ngOnInit() {
this.editUser = this.fb.group({
id: [''],
Name: ['', Validators.required],
Position: ['', Validators.required],
Email: ['', Validators.required],
Mobile: ['', Validators.required],
DateOfJoining: ['', Validators.required],
Salary: ['', Validators.required],
Projects: ['', Validators.required],
});
}
filter(v: string) {
return this.templateList.filter(x => x.Name.toLowerCase().
indexOf(v.toLowerCase()) !== -1 || x.Email.toLowerCase().indexOf(v.toLowerCase()) !== -1);
}
deleteUser(id: number): void {
if (this.filterArray) {
this.filterArray = this.filterArray.filter(user => user.id !== id);
}
}
logValidationErrors(group: FormGroup) {
// Object.keys(group.controls).forEach((key: string) => {
// const ac = group.get(key);
// this.formsErrors[key] = '';
// if (ac && !ac.valid && (ac.touched || ac.dirty)) {
// const message = this.ValidationMessage[key];
// for (const errorKey in ac.errors) {
// if (errorKey) {
// this.formsErrors[key] += message[errorKey] + ' ';
// }
// }
// }
// if (ac instanceof FormGroup) {
// this.logValidationErrors(ac)
// }
// })
}
openModal(targetModal: NgbModal, user: User | null) {
this.modalService.open(targetModal, {
centered: true,
backdrop: 'static'
});
if (user != null) {
if (user.DateOfJoining) {
this.joiningDate = this.datePipe.
transform(new Date(user.DateOfJoining), 'yyyy-MM-dd');
}
this.userDetail = user;
this.editUser?.patchValue({
Name: user.Name,
Position: user.Position,
Email: user.Email,
Mobile: user.Mobile,
DateOfJoining: user.DateOfJoining,
Salary: user.Salary,
Projects: user.Projects,
});
}
}
onSubmit() {
if (this.userDetail != null) {
const index = this.userService.getUser().indexOf(this.userDetail);
if (this.editUser != null) {
this.userDetail.Name = this.editUser.get('Name')?.value;
this.userDetail.Position = this.editUser.get('Position')?.value;
this.userDetail.Email = this.editUser.get('Email')?.value;
this.userDetail.Mobile = this.editUser.get('Mobile')?.value;
this.userDetail.DateOfJoining = this.editUser.get('DateOfJoining')?.value;
this.userDetail.Salary = this.editUser.get('Salary')?.value;
this.userDetail.Projects = this.editUser.get('Projects')?.value;
}
this.userService.getUser()[index] = this.userDetail;
} else {
this.userDetail = new User();
this.userDetail.id = Math.max.apply(Math, this.userService.getUser().map(function (o) { return o.id; })) + 1;
this.userDetail.Name = this.editUser?.get('Name')?.value;
this.userDetail.Position = this.editUser?.get('Position')?.value;
this.userDetail.Email = this.editUser?.get('Email')?.value;
this.userDetail.Mobile = this.editUser?.get('Mobile')?.value;
this.userDetail.DateOfJoining = new Date();
this.userDetail.Salary = this.editUser?.get('Salary')?.value;
this.userDetail.Projects = this.editUser?.get('Projects')?.value;
this.userDetail.imagePath = 'assets/images/users/7.jpg';
this.filterArray?.push(this.userDetail);
}
this.modalService.dismissAll();
this.userDetail = null;
this.joiningDate = '';
this.ngOnInit();
}
closeBtnClick() {
this.modalService.dismissAll();
this.ngOnInit();
}
}
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