Job family Matrix

src/app/components/dashboard/dashboard-routing.module.ts

@@ -62,6 +62,7 @@ import { JobDescriptionEmpComponent } from '../job-description-emp/job-descripti
 import { CompetencyMappingComponent } from '../competency-mapping/competency-mapping.component';
 import { Widget1Component } from '../widget1/widget1.component';
 import { JobFamilyMappingComponent } from '../job-family-mapping/job-family-mapping.component';
+import { JobFamilyMatrixComponent } from '../job-family-matrix/job-family-matrix.component';
 
 
 
@@ -139,6 +140,7 @@ const routes: Routes = [
       { path: "ess/job-description-emp", title: 'รายละเอียดของงาน', component: JobDescriptionEmpComponent },
       { path: "ess/competency-mapping", title: 'รายละเอียดของงาน', component: CompetencyMappingComponent },
       { path: "ess/job-family-mapping", title: 'รายละเอียดกลุ่มงานตามวิชาชีพ', component: JobFamilyMappingComponent },
+      { path: "ess/job-family-matrix", title: 'รายละเอียดกลุ่มงานตามวิชาชีพ', component: JobFamilyMatrixComponent },
     ]
   }
 ];

src/app/components/dashboard/dashboard.module.ts

@@ -215,6 +215,7 @@ import { JobFamilyComponent } from '../company-components/job-description/job-fa
 import { JobGradeComponent } from '../company-components/job-description/job-grade/job-grade.component';
 import { JobGradeGroupComponent } from '../company-components/job-description/job-grade-group/job-grade-group.component';
 import { JobFamilyMappingComponent } from '../job-family-mapping/job-family-mapping.component';
+import { JobFamilyMatrixComponent } from '../job-family-matrix/job-family-matrix.component';
 
 export const MY_DATE_FORMATS = {
   parse: {
@@ -369,7 +370,8 @@ export class CustomDateAdapter extends NativeDateAdapter {
     JobFamilyComponent,
     JobGradeComponent,
     JobGradeGroupComponent,
-    JobFamilyMappingComponent
+    JobFamilyMappingComponent,
+    JobFamilyMatrixComponent
   ], imports: [
     TranslateModule,
     CommonModule,

src/app/components/job-family-mapping/job-family-mapping.component.html

@@ -6,7 +6,7 @@
             </div>
         </div>
     </div>
-    <div class="menu-box">
+    <div class="menu-box w-full">
         <div class="col-12 row p-2">
             <ng-container *ngFor="let item of items; let i = index">
                 <div class="col-3 box-menu">
@@ -34,6 +34,8 @@
         </div>
     </div>
     <div class="col-12 row col-center w-full" style="padding-top: 2rem;">
-        <button class="link-btn" style="height: 80px;">JOB FAMILY MATRIX</button>
+        <a routerLink="/ess/job-family-matrix">
+            <button class="link-btn" style="height: 80px;">JOB FAMILY MATRIX</button>
+        </a>
     </div>
 </div>
\ No newline at end of file

src/app/components/job-family-matrix/job-family-matrix.component.html

+<div class="row m-2">
+    <div class="col-12 row w-full">
+        <div class="col-12">
+            <div class="row-center col-center" style="padding-bottom: 2rem;">
+                <div class="text-title text-blue">Job family Matrix</div>
+            </div>
+        </div>
+    </div>
+    <div class="menu-box w-full">
+        <div class="p-2">
+            <div class="p-2rem">
+                <div class="col-12 row col-center">
+                    <div class="table-bg-b row p-2 relative  table-border table-border-l table-border-t"
+                        style="width: 150px;border-radius: 30px 0 0 0">
+                        <span class="absolute  col-center line"></span>
+                        <span class="col-12 col-end mb-4 mt-1">Job Family</span>
+                        <span class="col-12 mt-4 mb-1">Job Grade</span>
+                    </div>
+                    <div class="table-bg-b  p-2 table-border table-border-t !text-center" style="width: 150px;align-content:center"
+                        *ngFor="let item of [1,2,3,4,5,6,7]; let l = last"
+                        [ngStyle]="{'border-radius': l?'0 30px 0 0':''}" [class.table-border-r]="l">
+                        <span class="break-text">test head {{item}}</span>
+                    </div>
+                </div>
+                <div class="col-12 row col-center"
+                    *ngFor="let item of ['asdasdasdsadsadsadsadsad','sad',3,4,5,6,7]; let i = index;let l = last;let o = odd">
+                    <div class="p-2 table-border table-border-l " style="width: 150px;align-content:center"
+                        style="width: 150px;" [ngStyle]="{'border-radius': l?'0 0 0 30px':''}"
+                        [class.table-border-b]="l" [class.sub-table-bg-b]="o" (mouseenter)="hoveredCode = i"
+                        (mouseleave)="hoveredCode = null" [ngClass]="{ 'sub-table-bg-b-hover': i === hoveredCode }">
+                        <span class="break-text">{{item}}</span>
+                    </div>
+                    <div class="p-2 table-border" style="width: 150px;align-content:start" style="width: 150px;"
+                        *ngFor="let item2 of [
+                            'ddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd',2,3,4,5,6,7];let l2 = last"
+                        [ngStyle]="{'border-radius': l&&l2?'0 0 30px 0':''}" [class.table-border-b]="l"
+                        [class.table-border-r]="l2" [class.sub-table-bg-b]="o" (mouseenter)="hoveredCode = i"
+                        (mouseleave)="hoveredCode = null" [ngClass]="{ 'sub-table-bg-b-hover':  i === hoveredCode }">
+                        <span class="break-text"> {{item2}}</span>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
\ No newline at end of file

src/app/components/job-family-matrix/job-family-matrix.component.scss

+/* ===== base variables ===== */
+$size-card : 150px; // ( ≥1280px จะขยายเป็น 170 )
+$col-hero : 280px; // ความกว้างคอลัมน์ซ้าย
+$gap-main : 2.5rem;
+$radius-main : 28px;
+$radius-sub : 20px;
+$dur : .35s;
+$easing : cubic-bezier(.4, 0, .2, 1);
+$shadow-base : 0 14px 30px -12px rgba(0, 0, 0, .18);
+$shadow-deep : 0 20px 42px -16px rgba(0, 0, 0, .24);
+
+.table-border {
+  border: black 1px solid;
+}
+
+.table-border-l {
+  border-left: black 2px solid;
+}
+
+.table-border-t {
+  border-top: black 2px solid;
+}
+
+.table-border-r {
+  border-right: black 2px solid;
+}
+
+.table-border-b {
+  border-bottom: black 2px solid;
+}
+
+.link-btn {
+  @apply bg-blue-600 hover:bg-blue-700 text-white font-semibold rounded-full px-10 py-2 transition;
+
+  transition: transform $dur $easing,
+    box-shadow $dur $easing;
+
+  &:hover {
+    transform: translateY(-6px);
+    box-shadow: $shadow-deep;
+  }
+}
+
+.row {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.col {
+  flex: 1;
+}
+
+@for $i from 1 through 12 {
+  $width: (
+    $i / 12) * 100%;
+
+  .col-#{$i} {
+    flex: 0 0 $width;
+    max-width: $width;
+  }
+}
+
+.col-start {
+  display: flex;
+  justify-content: start;
+}
+
+.col-center {
+  display: flex;
+  justify-content: center;
+}
+
+.col-end {
+  display: flex;
+  justify-content: end;
+}
+
+.row-top {
+  display: flex;
+  align-items: start;
+  align-content: start;
+}
+
+.row-center {
+  display: flex;
+  align-items: center;
+  align-content: center;
+}
+
+.row-space-between {
+  display: flex;
+  align-items: space-between;
+  align-content: space-between;
+}
+
+.relative {
+  position: relative;
+}
+
+.absolute {
+  position: absolute;
+}
+
+
+.text-blue {
+  color: #3b82f6;
+}
+
+.text-title {
+  font-weight: 500;
+  font-size: 3.5rem;
+  line-height: 2.25rem;
+  pointer-events: none;
+  word-break: break-word;
+}
+
+.text-card-title {
+  font-weight: 800;
+  font-size: 3.5rem;
+  line-height: 2.25rem;
+  pointer-events: none;
+  word-break: break-word;
+}
+
+.text-sub-title {
+  font-weight: 300;
+  font-size: 1rem;
+  line-height: 2.25rem;
+  pointer-events: none;
+  word-break: break-word;
+}
+
+.text-menu {
+  font-weight: 500;
+  font-size: 1rem;
+  transition: color .25s;
+}
+
+
+.box-menu {
+  padding: 1rem;
+
+}
+
+.sub-box-menu {
+  border-radius: 15px;
+  transition: transform $dur $easing,
+    box-shadow $dur $easing;
+  // box-shadow: $shadow-deep;
+
+  //   &:hover {
+  //     transform: translateY(-6px
+  //     );
+  //   box-shadow: $shadow-deep;
+  // }
+}
+
+
+
+.menu-box {
+  box-shadow: 0 0 10px 3px rgba(0, 0, 0, 0.2
+  );
+border: 1px solid transparent;
+border-radius: 30px;
+background-image: linear-gradient(white, white),
+  linear-gradient(135deg, #4f46e5, #ec4899 60%, #f59e0b);
+background-origin: border-box;
+background-clip: content-box,
+  border-box;
+transition: transform $dur $easing,
+  box-shadow $dur $easing;
+
+// &:hover {
+//   transform: translateY(-6px);
+//   box-shadow: $shadow-deep;
+// }
+
+// &:hover::before {
+//   content: '';
+//   position: absolute;
+//   inset: -3px;
+//   border-radius: inherit;
+//   // background: linear-gradient(135deg, #4f46e5, #ec4899 60%, #f59e0b);
+//   filter: blur(34px);
+//   opacity: .17;
+//   z-index: -1;
+//   transition: opacity $dur;
+//   opacity: .27;
+//   border: 1px solid;
+// }
+
+.sub-box {
+  padding: 15px;
+}
+
+}
+
+.color-box {
+  transition: filter 0.2s ease;
+
+  &:hover {
+    filter: brightness(0.9);
+  }
+}
+
+.line {
+  border: 0.5px solid black;
+  width: 167px;
+  top: 52px;
+  transform: rotate(31deg);
+  left: -7px;
+}
+
+.break-text {
+  white-space: normal;
+  word-wrap: break-word;
+}
+
+
+@for $i from 1 through 100 {
+  .m-#{$i}rem {
+    margin: #{$i}rem;
+  }
+
+  .mt-#{$i}rem {
+    margin-top: #{$i}rem;
+  }
+
+  .ml-#{$i}rem {
+    margin-left: #{$i}rem;
+  }
+
+  .mb-#{$i}rem {
+    margin-bottom: #{$i}rem;
+  }
+
+  .mr-#{$i}rem {
+    margin-right: #{$i}rem;
+  }
+
+  .p-#{$i}rem {
+    padding: #{$i}rem;
+  }
+
+  .pt-#{$i}rem {
+    padding-top: #{$i}rem;
+  }
+
+  .pl-#{$i}rem {
+    padding-left: #{$i}rem;
+  }
+
+  .pb-#{$i}rem {
+    padding-bottom: #{$i}rem;
+  }
+
+  .pr-#{$i}rem {
+    padding-right: #{$i}rem;
+  }
+}
+
+
+
+.table-bg-b {
+  background: rgb(96 165 250) !important;
+  color: white;
+  font-weight: 500;
+  font-size: 17px;
+}
+
+.sub-table-bg-b {
+  background-color: rgb(96, 165, 250, 0.1) !important;
+}
+
+.sub-table-bg-b-hover {
+  background-color: rgba(96, 165, 250, 0.25) !important;
+}
\ No newline at end of file

src/app/components/job-family-matrix/job-family-matrix.component.ts

+import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
+@Component({
+  selector: 'app-job-family-matrix',
+  templateUrl: './job-family-matrix.component.html',
+  styleUrls: ['./job-family-matrix.component.scss']
+})
+export class JobFamilyMatrixComponent {
+
+  hoveredCode: any = null;
+  ngOnInit() {
+  }
+
+
+}

src/app/shared/components/sidebar/sidebar.component.ts

@@ -100,6 +100,7 @@ export class SidebarComponent {
       this.currentUrl.includes('ess/profile') ||
       this.currentUrl.includes('ess/competency-mapping') ||
       this.currentUrl.includes('ess/job-family-mapping') ||
+      this.currentUrl.includes('ess/job-family-matrix') ||
       this.currentUrl.includes('ess/job-description')
     if (this.showSideMenu) {
       const html: any = this.elementRef.nativeElement.ownerDocument.documentElement;;
@@ -174,6 +175,7 @@ export class SidebarComponent {
           this.currentUrl.includes('ess/profile') ||
           this.currentUrl.includes('ess/competency-mapping') ||
           this.currentUrl.includes('ess/job-family-mapping') ||
+          this.currentUrl.includes('ess/job-family-matrix') ||
           this.currentUrl.includes('ess/job-description')
         if (this.showSideMenu) {
           const html: any = this.elementRef.nativeElement.ownerDocument.documentElement;;