หน้าจอ ทะเบียนบริษัท > สาขาและหน่วยธุรกิจ > ทะเบียนฝ่ายเเผนก

package-lock.json

@@ -33,6 +33,7 @@
         "angular2-multiselect-dropdown": "^5.0.4",
         "animate.css": "^4.1.1",
         "apexcharts": "^3.41.0",
+        "bootstrap": "^5.3.3",
         "browser-sync": "^2.29.3",
         "chart.js": "^4.3.0",
         "date-fns": "^2.30.0",
@@ -7944,6 +7945,24 @@
       "integrity": "sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==",
       "dev": true
     },
+    "node_modules/bootstrap": {
+      "version": "5.3.3",
+      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.3.3.tgz",
+      "integrity": "sha512-8HLCdWgyoMguSO9o+aH+iuZ+aht+mzW0u3HIMzVu7Srrpv7EBBxTnrFlSCskwdY1+EOFQSm7uMJhNQHkdPcmjg==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/twbs"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/bootstrap"
+        }
+      ],
+      "peerDependencies": {
+        "@popperjs/core": "^2.11.8"
+      }
+    },
     "node_modules/brace-expansion": {
       "version": "1.1.11",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",

package.json

@@ -37,6 +37,7 @@
     "angular2-multiselect-dropdown": "^5.0.4",
     "animate.css": "^4.1.1",
     "apexcharts": "^3.41.0",
+    "bootstrap": "^5.3.3",
     "browser-sync": "^2.29.3",
     "chart.js": "^4.3.0",
     "date-fns": "^2.30.0",

src/app/components/company-registration/branch-business-unit/branch-business-unit.component.html

@@ -18,7 +18,7 @@
             <app-department-register></app-department-register>
         </div>
         <div *ngIf="activeTab === 'tab2'" class="tab-pane">
-            <p>เนื้อหาของ Tab 2</p>
+            <app-department-list></app-department-list>
         </div>
     </div>
 </div>
\ No newline at end of file

src/app/components/company-registration/branch-business-unit/department-list/department-list.component.scss

+/* สไตล์ของแถบเมนู */
+.nav-tabs {
+    display: flex;
+    border-bottom: 2px solid #ccc; /* เส้นใต้ */
+    width: 100%;
+    cursor: pointer;
+  }
+  
+  .nav-item {
+    list-style: none;
+    margin-right: 10px; /* ช่องว่างระหว่างเมนู */
+  }
+  
+  .nav-link {
+    text-decoration: none;
+    padding: 10px 20px;
+    display: inline-block;
+    font-size: large;
+    border-width: 2px 2px 0px 2px;
+    border-style: solid;
+    border-color: #ccc;
+    border-radius: 5px 5px 0px 0px;
+  }
+  
+  .nav-link:hover {
+    background-color: #f0f0f0; /* เปลี่ยนสีเมื่อ hover */
+  }
+  
+  .nav-link.active {
+    color: #ffffff; /* สีตัวอักษรในสถานะ active */
+    font-size: large;
+    border-bottom: 3.5px solid rgb(var(--color-primary)); /* เส้นใต้ */
+    background-color: rgb(var(--color-primary));
+    border-width: 2px 2px 0px 2px;
+    border-style: solid;
+    border-color: rgb(var(--color-primary));
+    border-radius: 5px 5px 0px 0px;
+  }
+  
+  .tab-content {
+    margin-top: 20px;
+  }
+  
+  .tab-pane.active {
+    display: block;
+  }
+  
+  .nav-item-text {
+    list-style: none;
+    margin-right: 10px; /* ช่องว่างระหว่างเมนู */
+  }
+  .nav-link-text {
+    text-decoration: none;
+    display: inline-block;
+    font-size: large;
+    color: #569bf5;
+    border-bottom: 3.5px solid #569bf5;
+  }
+  
\ No newline at end of file

src/app/components/company-registration/branch-business-unit/department-list/department-list.component.ts

+import { Component, EventEmitter, Input, Output } from '@angular/core';
+
+@Component({
+  selector: 'app-department-list',
+  templateUrl: './department-list.component.html',
+  styleUrls: ['./department-list.component.scss']
+})
+export class DepartmentListComponent {
+  @Input() pathTitle = ['การจัดการข้อมูลองค์กร', 'ทะเบียนบริษัท', 'สาขาและหน่วยธุรกิจ']
+  @Output() sendPathTitle: EventEmitter<string[]> = new EventEmitter<string[]>();
+  activeTab: string = 'tab1'; // กำหนด tab เริ่มต้น
+
+  // ฟังก์ชันในการเปลี่ยนแท็บ
+  changeTab(tab: { id: string, text: string }) {
+    this.sendPathTitle.emit(['การจัดการข้อมูลองค์กร', 'ทะเบียนบริษัท', 'สาขาและหน่วยธุรกิจ', tab.text])
+    this.activeTab = tab.id;
+  }
+}

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

@@ -23,6 +23,7 @@ import { NgSelectModule } from '@ng-select/ng-select';
 import { CompanyRegistrationComponent } from '../company-registration/company-registration.component';
 import { DepartmentRegisterComponent } from '../company-registration/branch-business-unit/department-register/department-register.component';
 import { BranchBusinessUnitComponent } from '../company-registration/branch-business-unit/branch-business-unit.component';
+import { DepartmentListComponent } from '../company-registration/branch-business-unit/department-list/department-list.component';
 @NgModule({
   declarations: [
     SalesComponent,
@@ -41,7 +42,8 @@ import { BranchBusinessUnitComponent } from '../company-registration/branch-busi
     // my Component
     CompanyRegistrationComponent,
     BranchBusinessUnitComponent,
-    DepartmentRegisterComponent
+    DepartmentRegisterComponent,
+    DepartmentListComponent,
   ],
   imports: [
     CommonModule,