ทะเบียนแผนก

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

 import { Component, EventEmitter, Input, OnInit, } from '@angular/core';
+import { ToastrService } from 'ngx-toastr';
 import { Bu1Model, MyBu1Model } from 'src/app/shared/model/bu1.model';
 import { Bu2Model, MyBu2Model } from 'src/app/shared/model/bu2.model';
 import { Bu1Service } from 'src/app/shared/services/bu1.service';
 import { Bu2Service } from 'src/app/shared/services/bu2.service';
-
-
+interface table {
+  currentPage: number,
+  page: number[],
+  search: string
+}
 @Component({
   selector: 'app-department-list',
   templateUrl: './department-list.component.html',
   styleUrls: ['./department-list.component.scss']
 })
 export class DepartmentListComponent implements OnInit {
-  currentPage = 1
-  page = Array.from({ length: 1 }, (_, i) => i + 1);
   bu2List: Bu2Model[] = []
   bu2: Bu2Model = new MyBu2Model({})
+  bu2Table: table = {
+    currentPage: 1,
+    page: Array.from({ length: 1 }, (_, i) => i + 1),
+    search: ""
+  }
+  bu2Modal: table = {
+    currentPage: 1,
+    page: Array.from({ length: 1 }, (_, i) => i + 1),
+    search: ""
+  }
+  bu1List: Bu1Model[] = []
   bu1: Bu1Model = new MyBu1Model({})
-  search = ""
+  bu1Modal: table = {
+    currentPage: 1,
+    page: Array.from({ length: 1 }, (_, i) => i + 1),
+    search: ""
+  }
+  currentModal = ""
   constructor(private bu2Service: Bu2Service,
-    private bu1Service: Bu1Service
+    private bu1Service: Bu1Service,
+    private toastr: ToastrService
   ) { }
   ngOnInit(): void {
     this.getBu2List()
+    this.getBu1List()
   }
   getBu2List() {
     this.bu2Service.getBu2().subscribe(response => {
-      console.log("31313 : ", response)
       this.bu2List = response
-      this.searchChange()
+      this.onBu2TableSearchChange()
     })
   }
-  searchChange() {
-    this.currentPage = 1
-    this.page = Array.from({ length: Math.ceil(this.bu2ListFilter().length / 10) }, (_, i) => i + 1);
+  onBu2TableSearchChange() {
+    this.bu2Table.currentPage = 1
+    this.bu2Table.page = Array.from({ length: Math.ceil(this.filterBu2Table().length / 10) }, (_, i) => i + 1);
   }
-  bu2ListFilter() {
-    return this.bu2List.filter(x => x.bu2id.toLowerCase().includes(this.search) ||
-      x.tdesc.toLowerCase().includes(this.search) ||
-      x.edesc.toLowerCase().includes(this.search))
+  filterBu2Table() {
+    return this.bu2List.filter(x => x.bu2id.toLowerCase().includes(this.bu2Table.search) ||
+      x.tdesc.toLowerCase().includes(this.bu2Table.search) ||
+      x.edesc.toLowerCase().includes(this.bu2Table.search))
   }
-  selectBu2(bu2: Bu2Model) {
-    this.bu1Service.getBu1ById(bu2.parent).subscribe(response => {
-      this.bu1 = response
-      console.log(this.bu1)
-    })
-    this.bu2 = new MyBu2Model(bu2)
+  selectBu2(bu2?: Bu2Model) {
+    this.bu2 = new MyBu2Model(bu2 || {})
+    this.selectBu1()
+    if (this.bu2.parent) {
+      this.bu1Service.getBu1ById(this.bu2.parent).subscribe(response => {
+        this.bu1 = new MyBu1Model(response)
+      })
+    }
+  }
+  bu2idChange() {
+    const bu2 = this.bu2List.find(x => x.bu2id == this.bu2.bu2id)
+    this.selectBu2(bu2 || new MyBu2Model({ bu2id: this.bu2.bu2id }))
+  }
+  onBu2ModalSearchChange() {
+    this.bu2Modal.currentPage = 1
+    this.bu2Modal.page = Array.from({ length: Math.ceil(this.filterBu2Modal().length / 10) }, (_, i) => i + 1);
+  }
+  filterBu2Modal() {
+    return this.bu2List.filter(x => x.bu2id.toLowerCase().includes(this.bu2Modal.search) ||
+      x.tdesc.toLowerCase().includes(this.bu2Modal.search) ||
+      x.edesc.toLowerCase().includes(this.bu2Modal.search))
   }
   addBu2() {
     // this.bu2Service.post(this.bu2).subscribe((response:any) => {
@@ -61,5 +95,34 @@ export class DepartmentListComponent implements OnInit {
     // })
   }
 
+  getBu1List() {
+    this.bu1Service.getBu1().subscribe(response => {
+      this.bu1List = response
+      this.onBu1ModalSearchChange()
+    })
+  }
+  onBu1ModalSearchChange() {
+    this.bu1Modal.currentPage = 1
+    this.bu1Modal.page = Array.from({ length: Math.ceil(this.filterBu1Modal().length / 10) }, (_, i) => i + 1);
+  }
+  bu1idChange() {
+    const bu1 = this.bu1List.find(x => x.bu1id == this.bu1.bu1id)
+    this.selectBu1(bu1 || new MyBu1Model({ bu1id: this.bu1.bu1id }))
+  }
+  filterBu1Modal() {
+    return this.bu1List.filter(x => x.bu1id.toLowerCase().includes(this.bu1Modal.search) ||
+      x.tdesc.toLowerCase().includes(this.bu1Modal.search) ||
+      x.edesc.toLowerCase().includes(this.bu1Modal.search))
+  }
+  selectBu1(bu1?: Bu1Model) {
+    this.bu1 = new MyBu1Model(bu1 || {})
+  }
+
+  showSuccess() {
+    this.toastr.success('This is an example of tip', 'TIP', {
+      timeOut: 3000,
+      positionClass: 'toast-top-right',
+    });
+  }
 }
 

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

@@ -53,7 +53,7 @@
                             *ngFor="let item of ['ลำดับ','รหัสฝ่าย','รายละเอียดฝ่าย (ไทย)','รายละเอียดฝ่าย (อังกฤษ)','การจัดการ']; let f = first; let l = last">
                             <th scope="col" class="relative px-10px py-10px bg-soft-secondary text-primary"
                                 [class.!text-center]="f||l">
-                                <span class="text-sm">{{ item }}</span>
+                                <span class="!text-sm">{{ item }}</span>
                                 <div class="absolute top-1/2 transform -translate-y-1/2 right-0" *ngIf="!l">
                                     <i class="ti ti-dots-vertical fs-l"></i>
                                 </div>
@@ -223,11 +223,11 @@
                 <div class="flex justify-end mt-2rem mb-1rem">
                     <button type="button"
                         class="hs-dropdown-toggle ti-btn ti-border font-medium bg-white text-gray-700 shadow-sm align-middle hover:bg-gray-50 focus:ring-offset-white focus:ring-primary dark:bg-bgdark dark:hover:bg-black/20 dark:border-white/10 dark:text-white/70 dark:hover:text-white dark:focus:ring-offset-white/10"
-                        data-hs-overlay="#department-register-modal-edit">
+                        data-hs-overlay="#department-register-modal-edit" data-hs-overlay-close>
                         ย้อนกลับ
                     </button>
                     <a class="ti-btn ti-btn-success" href="javascript:void(0);"
-                        data-hs-overlay="#department-register-alert-modal">
+                        data-hs-overlay="#department-register-alert-modal" data-hs-overlay-close>
                         บันทึกข้อมูล
                     </a>
                 </div>

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

 import { Component, EventEmitter, Input, OnInit, } from '@angular/core';
+import { ToastrService } from 'ngx-toastr';
 import { Bu1Model, MyBu1Model } from 'src/app/shared/model/bu1.model';
 import { Bu1Service } from 'src/app/shared/services/bu1.service';
 
@@ -13,7 +14,9 @@ export class DepartmentRegisterComponent implements OnInit {
   bu1List: Bu1Model[] = []
   bu1: Bu1Model = new MyBu1Model({})
   search = ""
-  constructor(private bu1Service: Bu1Service) { }
+  constructor(private bu1Service: Bu1Service,
+    private toastr: ToastrService
+  ) { }
   ngOnInit(): void {
     this.getBu1List()
   }
@@ -33,8 +36,16 @@ export class DepartmentRegisterComponent implements OnInit {
       x.edesc.toLowerCase().includes(this.search))
   }
   selectBu1(bu1: Bu1Model) {
+    // this.showSuccess()
     this.bu1 = new MyBu1Model(bu1)
   }
+
+  showSuccess() {
+    this.toastr.success('This is an example of tip', 'TIP', {
+      timeOut: 3000,
+      positionClass: 'toast-top-right',
+    });
+  }
   addBu1() {
     // this.bu1Service.post(this.bu1).subscribe((response:any) => {
     //   if (response.success) {

src/app/components/company-registration/company-registration.component.html

@@ -8,7 +8,7 @@
     <div class="page">
         <div class="border-b border-gray-200 dark:border-white/10">
             <nav class="-mb-0.5 flex space-x-6 rtl:space-x-reverse">
-                <a class="pl-8 text-xxl font-bold hs-tab-active:border-secondary  hs-tab-active:text-secondary pb-3 px-1 inline-flex items-center gap-2 border-b-[3px] border-transparent whitespace-nowrap text-gray-500  dark:text-white/70 hover:text-secondary active"
+                <a class="ml-8 text-xxl font-bold hs-tab-active:border-secondary  hs-tab-active:text-secondary pb-3 px-1 inline-flex items-center gap-2 border-b-[3px] border-transparent whitespace-nowrap text-gray-500  dark:text-white/70 hover:text-secondary active"
                     href="javascript:void(0);" id="underline-item-1" data-hs-tab="#underline-1"
                     aria-controls="underline-1"
                     (click)="pathTitle = ['การจัดการข้อมูลองค์กร', 'ทะเบียนบริษัท','ทะเบียนบริษัท']">

src/assets/css/style.css

@@ -21711,4 +21711,37 @@ div:where(.swal2-container) div:where(.swal2-validation-message){
 
 .bg-input-readonly{
   background-color:  rgb(241 245 249 / var(--tw-bg-opacity));
+}
+
+.ml-8{
+  margin-left: 2rem;
+}
+
+.br-transparent{
+  border-right: transparent;
+}
+.bl-transparent{
+  border-left: transparent;
+}
+.bt-transparent{
+  border-top: transparent;
+}
+.bb-transparent{
+  border-bottom: transparent;
+}
+
+.bx-transparent{
+  border-right: transparent;
+  border-left: transparent;
+}
+.by-transparent{
+  border-top: transparent;
+  border-bottom: transparent;
+}
+.border-radius-0\.25{
+  border-radius: 0.25rem !important;
+}
+
+.ti-form-input-no-border-left:focus{
+  --tw-shadow: 0 1 0 0 rgba(15,23,42,0.07), 0 0 2px 0 rgba(15,23,42,0.03) !important;
 }
\ No newline at end of file

src/assets/fonts/NotoSansThai/OFL.txt

+Copyright 2022 The Noto Project Authors (https://github.com/notofonts/thai)
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+https://openfontlicense.org
+
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded, 
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.

src/assets/fonts/NotoSansThai/README.txt

+Noto Sans Thai Variable Font
+============================
+
+This download contains Noto Sans Thai as both a variable font and static fonts.
+
+Noto Sans Thai is a variable font with these axes:
+  wdth
+  wght
+
+This means all the styles are contained in a single file:
+  NotoSansThai-VariableFont_wdth,wght.ttf
+
+If your app fully supports variable fonts, you can now pick intermediate styles
+that aren’t available as static fonts. Not all apps support variable fonts, and
+in those cases you can use the static font files for Noto Sans Thai:
+  static/NotoSansThai_ExtraCondensed-Thin.ttf
+  static/NotoSansThai_ExtraCondensed-ExtraLight.ttf
+  static/NotoSansThai_ExtraCondensed-Light.ttf
+  static/NotoSansThai_ExtraCondensed-Regular.ttf
+  static/NotoSansThai_ExtraCondensed-Medium.ttf
+  static/NotoSansThai_ExtraCondensed-SemiBold.ttf
+  static/NotoSansThai_ExtraCondensed-Bold.ttf
+  static/NotoSansThai_ExtraCondensed-ExtraBold.ttf
+  static/NotoSansThai_ExtraCondensed-Black.ttf
+  static/NotoSansThai_Condensed-Thin.ttf
+  static/NotoSansThai_Condensed-ExtraLight.ttf
+  static/NotoSansThai_Condensed-Light.ttf
+  static/NotoSansThai_Condensed-Regular.ttf
+  static/NotoSansThai_Condensed-Medium.ttf
+  static/NotoSansThai_Condensed-SemiBold.ttf
+  static/NotoSansThai_Condensed-Bold.ttf
+  static/NotoSansThai_Condensed-ExtraBold.ttf
+  static/NotoSansThai_Condensed-Black.ttf
+  static/NotoSansThai_SemiCondensed-Thin.ttf
+  static/NotoSansThai_SemiCondensed-ExtraLight.ttf
+  static/NotoSansThai_SemiCondensed-Light.ttf
+  static/NotoSansThai_SemiCondensed-Regular.ttf
+  static/NotoSansThai_SemiCondensed-Medium.ttf
+  static/NotoSansThai_SemiCondensed-SemiBold.ttf
+  static/NotoSansThai_SemiCondensed-Bold.ttf
+  static/NotoSansThai_SemiCondensed-ExtraBold.ttf
+  static/NotoSansThai_SemiCondensed-Black.ttf
+  static/NotoSansThai-Thin.ttf
+  static/NotoSansThai-ExtraLight.ttf
+  static/NotoSansThai-Light.ttf
+  static/NotoSansThai-Regular.ttf
+  static/NotoSansThai-Medium.ttf
+  static/NotoSansThai-SemiBold.ttf
+  static/NotoSansThai-Bold.ttf
+  static/NotoSansThai-ExtraBold.ttf
+  static/NotoSansThai-Black.ttf
+
+Get started
+-----------
+
+1. Install the font files you want to use
+
+2. Use your app's font picker to view the font family and all the
+available styles
+
+Learn more about variable fonts
+-------------------------------
+
+  https://developers.google.com/web/fundamentals/design-and-ux/typography/variable-fonts
+  https://variablefonts.typenetwork.com
+  https://medium.com/variable-fonts
+
+In desktop apps
+
+  https://theblog.adobe.com/can-variable-fonts-illustrator-cc
+  https://helpx.adobe.com/nz/photoshop/using/fonts.html#variable_fonts
+
+Online
+
+  https://developers.google.com/fonts/docs/getting_started
+  https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Fonts/Variable_Fonts_Guide
+  https://developer.microsoft.com/en-us/microsoft-edge/testdrive/demos/variable-fonts
+
+Installing fonts
+
+  MacOS: https://support.apple.com/en-us/HT201749
+  Linux: https://www.google.com/search?q=how+to+install+a+font+on+gnu%2Blinux
+  Windows: https://support.microsoft.com/en-us/help/314960/how-to-install-or-remove-a-font-in-windows
+
+Android Apps
+
+  https://developers.google.com/fonts/docs/android
+  https://developer.android.com/guide/topics/ui/look-and-feel/downloadable-fonts
+
+License
+-------
+Please read the full license text (OFL.txt) to understand the permissions,
+restrictions and requirements for usage, redistribution, and modification.
+
+You can use them in your products & projects – print or digital,
+commercial or otherwise.
+
+This isn't legal advice, please consider consulting a lawyer and see the full
+license for all details.

src/index.html

@@ -17,13 +17,16 @@
   <link rel="preconnect" href="https://fonts.gstatic.com">
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-  <link
+  <!-- <link
     href="https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap"
-    rel="stylesheet">
+    rel="stylesheet"> -->
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+Thai:wght@100..900&display=swap" rel="stylesheet">
 </head>
 
 <body>
   <app-root></app-root>
 </body>
 
-</html>
+</html>
\ No newline at end of file

src/styles.scss

 * {
-  font-family: Montserrat !important;
-  src: url("./assets/fonts/Montserrat/Montserrat-Italic-VariableFont_wght.ttf");
+  font-family: "Noto Sans Thai", serif;
+  // src: url("./assets/fonts/NotoSansThai/NotoSansThai-VariableFont_wdth,wght.ttf");
 }
 
 @import "../src/assets/css/style.css";
@@ -346,30 +346,10 @@ ngx-dropzone {
 }
 /* colorpicker */
 
-
-.bg-card-white {
-  background-color: #ffffff;
-  height: 100vh;
-  position: fixed;
-  z-index: -1;
-  width: 100vw;
-  right: 1.5rem;
-}
 .block-main-content {
+  border-radius: 12px;
   background: white;
-  margin-left: -1.5rem;
+  margin-left: -14px;
+  margin-right: -14px;
+  margin-bottom: 20px;
 }
-@media (min-width: 480px) {
-  .bg-card-white {
-    background-color: #ffffff;
-    height: 100vh;
-    position: fixed;
-    z-index: -1;
-    width: 100vw;
-    right: 1.75rem;
-  }
-  .block-main-content {
-    background: white;
-    margin-left: -1.75rem;
-  }
-}
\ No newline at end of file