Skip to content

M
Meu-Template-Angular-CSR
Commit d3f8c729 authored by tinhbe's avatar tinhbe
Browse files
Options

update JobTitle

parent 6aec78ad
Show whitespace changes
Inline Side-by-side
Showing with 101 additions and 206 deletions
src/app/+admin/layout/feature/ui/layout.component.html
View file @ d3f8c729
...@@ -2,6 +2,9 @@ ...@@ -2,6 +2,9 @@
<nz-sider nzCollapsible [nzTrigger]="null"> <nz-sider nzCollapsible [nzTrigger]="null">
<div class="logo"></div> <div class="logo"></div>
<ul nz-menu nzTheme="dark" nzMode="inline"> <ul nz-menu nzTheme="dark" nzMode="inline">
<li nz-menu-item routerLink="/home">
Trang chủ
</li>
<li nz-menu-item routerLink="/admin/job-management/Job"> <li nz-menu-item routerLink="/admin/job-management/Job">
Danh sách công việc Danh sách công việc
</li> </li>
...@@ -12,7 +15,6 @@ ...@@ -12,7 +15,6 @@
</ul> </ul>
</nz-sider> </nz-sider>
<nz-layout> <nz-layout>
<meu-admin-header role={{role}}></meu-admin-header>
<nz-content> <nz-content>
<router-outlet></router-outlet> <router-outlet></router-outlet>
</nz-content> </nz-content>
......
src/app/+admin/layout/feature/ui/layout.component.ts
View file @ d3f8c729
import { defaultUrlMatcher, RouterLink, RouterModule, RouterOutlet } from '@angular/router'; import { defaultUrlMatcher, Router, RouterLink, RouterModule, RouterOutlet } from '@angular/router';
import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core'; import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
import { NzLayoutModule } from 'ng-zorro-antd/layout'; import { NzLayoutModule } from 'ng-zorro-antd/layout';
...@@ -10,6 +10,7 @@ import { NzBreadCrumbModule } from 'ng-zorro-antd/breadcrumb'; ...@@ -10,6 +10,7 @@ import { NzBreadCrumbModule } from 'ng-zorro-antd/breadcrumb';
import { NzIconModule } from 'ng-zorro-antd/icon'; import { NzIconModule } from 'ng-zorro-antd/icon';
import { NzMenuModule } from 'ng-zorro-antd/menu'; import { NzMenuModule } from 'ng-zorro-antd/menu';
import { NzToolTipModule } from 'ng-zorro-antd/tooltip'; import { NzToolTipModule } from 'ng-zorro-antd/tooltip';
import { AuthService } from '../../../../+login/data-access/Services/Auth.Service';
@Component({ @Component({
selector: 'admin-layout', selector: 'admin-layout',
...@@ -33,12 +34,10 @@ import { NzToolTipModule } from 'ng-zorro-antd/tooltip'; ...@@ -33,12 +34,10 @@ import { NzToolTipModule } from 'ng-zorro-antd/tooltip';
changeDetection: ChangeDetectionStrategy.OnPush, changeDetection: ChangeDetectionStrategy.OnPush,
}) })
export class AdminLayoutComponent implements OnInit { export class AdminLayoutComponent implements OnInit {
role = localStorage.getItem('role'); constructor(private authentication : AuthService) {}
constructor() {}
ngOnInit(): void { ngOnInit(): void {
} }
logout() { logout() {
localStorage.clear(); this.authentication.logout();
window.location.href = '/login';
} }
} }
src/app/+home/component/JobCard/JobCard.component.html
View file @ d3f8c729
<nz-card *ngIf="job" [nzTitle]="job.title" [nzExtra]="extraTemplate"> <nz-card *ngIf="job" [nzTitle]="job.title" [nzExtra]="extraTemplate" [nzBodyStyle]="{'padding': '8px'}">
<p>loại công việc: {{job.type}}</p> <p>loại công việc: {{job.type}}</p>
<p>Công ty: {{job.company}}</p> <p>Công ty: {{job.company}}</p>
<p>Địa chỉ làm việc: {{job.location}}</p> <p>Địa chỉ làm việc: {{job.location}}</p>
</nz-card> </nz-card>
<ng-template #extraTemplate> <ng-template #extraTemplate>
<button class="tw-mr-2" nz-button nzType="primary" nzSize="small"> <a (click)="onShowDetail()">Chi tiết</a>
more
</button>
</ng-template> </ng-template>
<nz-modal [(nzVisible)]="isModalVisible" nzTitle={{job?.title}} nzOkText="Ứng tuyển" nzCancelText="Trở về" (nzOnOk)="onOk()" (nzOnCancel)="onCancel()">
<ng-container *nzModalContent>
<p>
<strong>Chi tiết công việc</strong>
</p>
<p>
<label>Loại công việc</label>
{{ job?.type }}
</p>
<p>
<label>Ngày tạo</label>
{{ job?.created_at| date: 'dd/MM/yyyy' }}
</p>
<p>
<label>Link công ty</label>
{{ job?.company_url }}
</p>
<div>
<strong>Mô tả:</strong>
<div [innerHTML]="job?.description "></div>
</div>
</ng-container>
</nz-modal>
src/app/+home/component/JobCard/JobCard.component.ts
View file @ d3f8c729
...@@ -2,16 +2,28 @@ import { ChangeDetectionStrategy, Component, Input } from "@angular/core"; ...@@ -2,16 +2,28 @@ import { ChangeDetectionStrategy, Component, Input } from "@angular/core";
import { NzCardModule } from "ng-zorro-antd/card"; import { NzCardModule } from "ng-zorro-antd/card";
import { Job } from "../../data-access/model/Job.model"; import { Job } from "../../data-access/model/Job.model";
import { CommonModule } from "@angular/common"; import { CommonModule } from "@angular/common";
import { NzModalModule } from "ng-zorro-antd/modal";
@Component({ @Component({
selector: 'job-card', selector: 'job-card',
templateUrl: './JobCard.component.html', templateUrl: './JobCard.component.html',
imports: [NzCardModule, imports: [NzCardModule,
CommonModule CommonModule,
NzModalModule
], ],
standalone: true, standalone: true,
changeDetection: ChangeDetectionStrategy.OnPush, changeDetection: ChangeDetectionStrategy.OnPush,
}) })
export class JobCardComponent{ export class JobCardComponent {
@Input() job?: Job; @Input() job?: Job;
isModalVisible = false;
onShowDetail() {
this.isModalVisible = true;
}
onOk() {
this.isModalVisible = false
}
onCancel(){
this.isModalVisible = false
}
} }
src/app/+home/component/JobDetail/JobDetail.component.html deleted 100644 → 0
View file @ 6aec78ad
<nz-card style="width:300px;" nzTitle={{job?.title}} [nzExtra]="extraTemplate">
<p>{{job?.type}}</p>
<p>{{job?.company}}</p>
<p>{{job?.location}}</p>
</nz-card>
<ng-template #extraTemplate>
<a>More</a>
</ng-template>
src/app/+home/component/JobDetail/JobDetail.component.ts deleted 100644 → 0
View file @ 6aec78ad
import { ChangeDetectionStrategy, Component, Input } from "@angular/core";
import { NzCardModule } from "ng-zorro-antd/card";
import { JobModel } from "../../data-access/model/Job.model";
@Component({
selector: 'job-detail',
templateUrl: './JobDetail.component.html',
imports: [NzCardModule],
standalone: true,
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class JobDetailComponent {
@Input() job?: JobModel
}
src/app/+home/component/JobListCard/JobListCard.component.html
View file @ d3f8c729
<!-- <nz-card nzTitle="Jobs List" style="width:100%">
<ng-container *ngIf="listOfJob?.length; else noJobsTemplate">
<job-card *ngFor="let job of listOfJob" [job]="job"></job-card>
</ng-container>
<ng-template #noJobsTemplate>
<p>No jobs available</p>
</ng-template>
</nz-card>
<p>{{ listOfJob }}</p> Hiển thị dữ liệu của listOfJob -->
<nz-list nzGrid> <nz-list nzGrid>
<div nz-row [nzGutter]="16"> <div nz-row [nzGutter]="16">
@for (item of listOfJob; track item) { @for (item of listOfJob; track item) {
<div nz-col [nzSpan]="6"> <div nz-col [nzSpan]="6">
<nz-list-item> <nz-list-item>
<job-card [job] = "item">Card content</job-card> <button nz-button class="tw-w-full">
<job-card [job]="item"></job-card>
</button>
</nz-list-item> </nz-list-item>
</div> </div>
} }
......
src/app/+home/component/JobListCard/JobListCard.component.ts
View file @ d3f8c729
...@@ -8,6 +8,7 @@ import { tap } from "rxjs"; ...@@ -8,6 +8,7 @@ import { tap } from "rxjs";
import { CommonModule } from "@angular/common"; import { CommonModule } from "@angular/common";
import { NzListModule } from 'ng-zorro-antd/list'; import { NzListModule } from 'ng-zorro-antd/list';
import { NzCardModule } from "ng-zorro-antd/card"; import { NzCardModule } from "ng-zorro-antd/card";
import { RouterLink } from "@angular/router";
@Component({ @Component({
selector: 'app-home-list-job', selector: 'app-home-list-job',
templateUrl: './JobListCard.component.html', templateUrl: './JobListCard.component.html',
...@@ -18,7 +19,8 @@ import { NzCardModule } from "ng-zorro-antd/card"; ...@@ -18,7 +19,8 @@ import { NzCardModule } from "ng-zorro-antd/card";
JobCardComponent, JobCardComponent,
NzGridModule, NzGridModule,
NzListModule, NzListModule,
NzCardModule NzCardModule,
RouterLink
], ],
standalone: true, standalone: true,
changeDetection: ChangeDetectionStrategy.OnPush, changeDetection: ChangeDetectionStrategy.OnPush,
......
src/app/+home/feature/home.component.html
View file @ d3f8c729
<meu-home-header></meu-home-header> <div class="tw-text-2xl tw-font-bold tw-text-center tw-mt-10">
<app-home-list-job></app-home-list-job> Chào mừng bạn đến với trang chủ của MeU Solution
<meu-home-footer></meu-home-footer> </div>
src/app/+home/feature/home.component.scss
View file @ d3f8c729
.logo {
height: 32px;
background: rgba(255, 255, 255, 0.2);
margin: 16px;
}
.layout {
min-height: 100vh;
}
nz-sider {
overflow: auto;
height: 100%;
position: fixed;
left: 0;
}
.right-layout {
margin-left: 200px;
}
nz-header {
background: #fff;
padding: 0;
}
nz-content {
margin: 24px 16px 0;
overflow: initial;
}
.inner-content {
padding: 24px;
background: #fff;
text-align: center;
}
nz-footer {
text-align: center;
}
src/app/+home/feature/home.component.ts
View file @ d3f8c729
...@@ -5,11 +5,6 @@ import { NzLayoutModule } from 'ng-zorro-antd/layout'; ...@@ -5,11 +5,6 @@ import { NzLayoutModule } from 'ng-zorro-antd/layout';
import { NzBreadCrumbModule } from 'ng-zorro-antd/breadcrumb'; import { NzBreadCrumbModule } from 'ng-zorro-antd/breadcrumb';
import { NzMenuModule } from 'ng-zorro-antd/menu'; import { NzMenuModule } from 'ng-zorro-antd/menu';
import { NzIconModule } from 'ng-zorro-antd/icon'; import { NzIconModule } from 'ng-zorro-antd/icon';
import { HeaderComponent } from '../../+shell/ui/components/header/feature/header.component';
import { FooterComponent } from "../../+shell/ui/components/footer/feature/footer.component";
import { HeaderHomeComponent } from '../layout/feature/Components/header/header.component';
import { FooterHomeComponent } from '../layout/feature/Components/footer/footer.component';
import { JobListCardComponent } from '../component/JobListCard/JobListCard.component';
@Component({ @Component({
...@@ -22,9 +17,6 @@ import { JobListCardComponent } from '../component/JobListCard/JobListCard.compo ...@@ -22,9 +17,6 @@ import { JobListCardComponent } from '../component/JobListCard/JobListCard.compo
NzBreadCrumbModule, NzBreadCrumbModule,
NzMenuModule, NzMenuModule,
NzIconModule, NzIconModule,
HeaderHomeComponent,
FooterHomeComponent,
JobListCardComponent
], ],
templateUrl: './home.component.html', templateUrl: './home.component.html',
styleUrls: ['./home.component.scss'], styleUrls: ['./home.component.scss'],
......
src/app/+home/layout/feature/Components/footer/footer.component.html deleted 100644 → 0
View file @ 6aec78ad
<nz-footer>
<footer class="tw-bg-gray-800 tw-py-8">
<div class="tw-container tw-mx-auto">
<div class="tw-flex tw-justify-between tw-items-center tw-px-4">
<!-- Tên công ty -->
<div class="tw-text-2xl tw-font-bold">MeU Solution</div>
<!-- Liên kết menu -->
<div class="tw-hidden tw-lg:flex">
<ul class="tw-flex tw-space-x-6">
<li><a href="/about" class="tw-text-gray-400 hover:tw-text-white">Giới thiệu</a></li>
<li><a href="/services" class="tw-text-gray-400 hover:tw-text-white">Dịch vụ</a></li>
<li><a href="/contact" class="tw-text-gray-400 hover:tw-text-white">Liên hệ</a></li>
<li><a href="/blog" class="tw-text-gray-400 hover:tw-text-white">Blog</a></li>
</ul>
</div>
<!-- Mạng xã hội -->
<div class="tw-flex tw-space-x-4">
<a href="https://facebook.com" target="_blank" class="tw-text-gray-400 hover:tw-text-white"><i class="fa fa-facebook"></i></a>
<a href="https://twitter.com" target="_blank" class="tw-text-gray-400 hover:tw-text-white"><i class="fa fa-twitter"></i></a>
<a href="https://instagram.com" target="_blank" class="tw-text-gray-400 hover:tw-text-white"><i class="fa fa-instagram"></i></a>
</div>
</div>
<!-- Bản quyền và địa chỉ -->
<div class="tw-border-t tw-border-gray-700 tw-mt-6 tw-pt-6 tw-text-center">
<p class="tw-text-sm">&copy; 2024 Công ty ABC. Tất cả quyền lợi được bảo lưu.</p>
<p class="tw-text-sm">Địa chỉ: 123 Đường ABC, Quận 1, Thành phố Hồ Chí Minh, Việt Nam</p>
</div>
</div>
</footer>
</nz-footer>
src/app/+home/layout/feature/Components/footer/footer.component.ts deleted 100644 → 0
View file @ 6aec78ad
import { CommonModule } from '@angular/common';
import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
import { NzIconModule } from 'ng-zorro-antd/icon';
import { NzLayoutModule } from 'ng-zorro-antd/layout';
@Component({
selector: 'meu-home-footer',
standalone: true,
imports: [CommonModule,
NzLayoutModule,
NzIconModule
],
templateUrl: './footer.component.html',
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class FooterHomeComponent implements OnInit {
ngOnInit(): void {}
}
src/app/+home/layout/feature/Components/header/header.component.html deleted 100644 → 0
View file @ 6aec78ad
<header class="tw-bg-gray-900 tw-py-4">
<div class="tw-container tw-mx-auto tw-flex tw-justify-between tw-items-center tw-px-4">
<div class="tw-text-3xl tw-font-bold">
<a href="/" class="hover:tw-text-gray-400">MeU Solution</a>
</div>
</div>
<nav class="tw-bg-gray-900 tw-py-2">
<div class="tw-container tw-mx-auto">
<ul class="tw-flex tw-space-x-8 tw-justify-center">
<li><a href="/#" class="tw-text-gray-300 hover:tw-text-white">Giới thiệu</a></li>
<li><a href="/#" class="tw-text-gray-300 hover:tw-text-white">Dịch vụ</a></li>
<li><a href="/#" class="tw-text-gray-300 hover:tw-text-white">Liên hệ</a></li>
<li><a href="/#" class="tw-text-gray-300 hover:tw-text-white">Blog</a></li>
</ul>
</div>
</nav>
</header>
src/app/+home/layout/feature/Components/header/header.component.ts deleted 100644 → 0
View file @ 6aec78ad
import { CommonModule } from '@angular/common';
import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
import { NzLayoutModule } from 'ng-zorro-antd/layout';
@Component({
selector: 'meu-home-header',
standalone: true,
imports: [CommonModule,NzLayoutModule],
templateUrl: './header.component.html',
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class HeaderHomeComponent implements OnInit {
ngOnInit(): void {}
}
src/app/+shell/feature/shell.routes.ts
View file @ d3f8c729
...@@ -20,7 +20,14 @@ export const shellRoutes: Routes = [ ...@@ -20,7 +20,14 @@ export const shellRoutes: Routes = [
canActivate: [], canActivate: [],
loadChildren: () => import('../../+home/home.routes'), loadChildren: () => import('../../+home/home.routes'),
}, },
{
path: 'ListJob',
canActivate: [],
loadComponent: () =>
import('../../+home/component/JobListCard/JobListCard.component').then((m) => m.JobListCardComponent),
},
], ],
}, },
{ {
path: 'admin', path: 'admin',
......
src/app/+shell/ui/components/footer/feature/footer.component.html
View file @ d3f8c729
<nz-footer> <nz-footer>
<footer class="tw-bg-gray-900 tw-text-white tw-py-6 tw-text-center"> <footer class="tw-bg-gray-800 tw-py-8">
<div class="tw-container tw-mx-auto"> <div class="tw-container tw-mx-auto">
<p>© 2024 Meu Solution. All rights reserved.</p> <div class="tw-flex tw-justify-between tw-items-center tw-px-4">
<p>Designed by Meu Solution</p> <div class="tw-text-2xl tw-font-bold">MeU Solution</div>
<div class="tw-hidden tw-lg:flex">
<div class="tw-flex tw-justify-center tw-space-x-4 tw-mt-4">
<a href="#about" class="tw-text-white hover:tw-text-blue-500">About Us</a>
<a href="#contact" class="tw-text-white hover:tw-text-blue-500">Contact</a>
<a href="#privacy" class="tw-text-white hover:tw-text-blue-500">Privacy Policy</a>
</div> </div>
<div class="tw-flex tw-space-x-4">
<div class="tw-flex tw-justify-center tw-space-x-4 tw-mt-4"> <a href="https://facebook.com" target="_blank" class="tw-text-gray-400 hover:tw-text-white"><i class="fa fa-facebook"></i></a>
<a href="#" target="_blank" class="tw-text-white hover:tw-text-blue-500"> <a href="https://twitter.com" target="_blank" class="tw-text-gray-400 hover:tw-text-white"><i class="fa fa-twitter"></i></a>
<i nz-icon nzType="facebook" class="tw-text-2xl"></i> <a href="https://instagram.com" target="_blank" class="tw-text-gray-400 hover:tw-text-white"><i class="fa fa-instagram"></i></a>
</a> </div>
<a href="#" target="_blank" class="tw-text-white hover:tw-text-blue-500"> </div>
<i nz-icon nzType="twitter" class="tw-text-2xl"></i> <div class="tw-border-t tw-border-gray-700 tw-mt-6 tw-pt-6 tw-text-center">
</a> <p class="tw-text-sm">&copy; MeU Solution. Tất cả quyền lợi được bảo lưu.</p>
<a href="#" target="_blank" class="tw-text-white hover:tw-text-blue-500"> <p class="tw-text-sm">Địa chỉ: 3 Sông Thao, Tân Bình, Thành phố Hồ Chí Minh, Việt Nam</p>
<i nz-icon nzType="instagram" class="tw-text-2xl"></i>
</a>
</div> </div>
</div> </div>
</footer> </footer>
</nz-footer> </nz-footer>
src/app/+shell/ui/components/header/feature/header.component.html
View file @ d3f8c729
<header class="tw-bg-gray-900 tw-py-4">
<div class="tw-container tw-mx-auto tw-flex tw-justify-between tw-items-center tw-px-4">
<div class="tw-text-3xl tw-font-bold">
<a href="/home" class="hover:tw-text-gray-400">MeU Solution</a>
</div>
</div>
<nav class="tw-bg-gray-900 tw-py-2">
<div class="tw-container tw-mx-auto">
<ul class="tw-flex tw-space-x-8 tw-justify-center">
<li><a href="/home" class="tw-text-gray-300 hover:tw-text-white">Trang chủ</a></li>
<li><a href="/ListJob" class="tw-text-gray-300 hover:tw-text-white">Danh sách công việc</a></li>
<li><a href="/admin" class="tw-text-gray-300 hover:tw-text-white">Admin</a></li>
<li><a (click)="logout()" class="tw-text-gray-300 hover:tw-text-white">Đăng xuất</a></li>
</ul>
</div>
</nav>
</header>
src/app/+shell/ui/components/header/feature/header.component.ts
View file @ d3f8c729
import { CommonModule } from '@angular/common'; import { CommonModule } from '@angular/common';
import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core'; import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
import { NzLayoutModule } from 'ng-zorro-antd/layout'; import { NzLayoutModule } from 'ng-zorro-antd/layout';
import { AuthService } from '../../../../../+login/data-access/Services/Auth.Service';
@Component({ @Component({
selector: 'meu-header', selector: 'meu-header',
standalone: true, standalone: true,
...@@ -10,4 +11,8 @@ import { NzLayoutModule } from 'ng-zorro-antd/layout'; ...@@ -10,4 +11,8 @@ import { NzLayoutModule } from 'ng-zorro-antd/layout';
}) })
export class HeaderComponent implements OnInit { export class HeaderComponent implements OnInit {
ngOnInit(): void {} ngOnInit(): void {}
constructor (private authentication : AuthService) {}
logout() {
this.authentication.logout();
}
} }
src/app/+shell/ui/layout.component.ts
View file @ d3f8c729
...@@ -20,7 +20,6 @@ import { NzLayoutModule } from 'ng-zorro-antd/layout'; ...@@ -20,7 +20,6 @@ import { NzLayoutModule } from 'ng-zorro-antd/layout';
standalone: true, standalone: true,
imports: [ imports: [
RouterModule, RouterModule,
DatePipe,
HeaderComponent, HeaderComponent,
FooterComponent, FooterComponent,
NzButtonModule, NzButtonModule,
......
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