menu borrow

Web-Manage/src/app/DPU/common/approve-borrow/approve-borrow.component.ts

+import { Component } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { NgApexchartsModule } from 'ng-apexcharts';
+import { CountUpModule } from 'ngx-countup';
+import { SharedModule } from '../../../shared/shared.module';
+const DATA=[
+  {
+    img:"./assets/images/faces/11.jpg",
+    name:'ชนะชัย โอดพิมพ์',
+    mail:'jsontaylor2416@gmail.com',
+    id:'#SPK12032901',
+    issueDate:'25,Nov 2022',
+    price:'$212.45',
+    bg:'success/10',
+    text:'success',
+    status:'Paid',
+    dueDate:'25,Dec 2022'
+  },
+  {
+    img:"./assets/images/faces/7.jpg",
+    name:'Suzika Stallone',
+    mail:'suzikastallone3214@gmail.com',
+    id:'#SPK12032912',
+    issueDate:'13,Nov 2022',
+    price:'$512.99',
+    bg:'warning/10',
+    text:'warning',
+    status:'Pending',
+    dueDate:'13,Dec 2022'
+  },
+  {
+    img:"./assets/images/faces/15.jpg",
+    name:'Roman Killon',
+    mail:'romankillon143@gmail.com',
+    id:'#SPK12032945',
+    issueDate:'30,Nov 2022',
+    price:'$2199.49',
+    bg:'danger/10',
+    text:'danger',
+    status:'Overdue',
+    dueDate:'30,Dec 2022'
+  },
+  {
+    img:"./assets/images/faces/12.jpg",
+    name:'Charlie Davieson',
+    mail:'charliedavieson@gmail.com',
+    id:'#SPK12032922',
+    issueDate:'18,Nov 2022',
+    price:' $1569.99',
+    bg:'success/10',
+    text:'success',
+    status:'Paid',
+    dueDate:'18,Dec 2022'
+  },
+  {
+    img:"./assets/images/faces/4.jpg",
+    name:'Selena Deoyl',
+    mail:'selenadeoyl114@gmail.com',
+    id:'#SPK12032932',
+    issueDate:'18,Nov 2022',
+    price:'  $4,873.99',
+    bg:'primary/10',
+    text:'primary',
+    status:'Due By 1 Day',
+    dueDate:'18,Dec 2022'
+  },
+  {
+    img:"./assets/images/faces/7.jpg",
+    name:'Kiara Advensh',
+    mail:'kiaraadvensh87@gmail.com',
+    id:'#SPK12032978',
+    issueDate:'02,Nov 2022',
+    price:'  $1923.99',
+    bg:'success/10',
+    text:'success',
+    status:'Paid',
+    dueDate:'18,Dec 2022'
+  },
+  {
+    img:"./assets/images/faces/9.jpg",
+    name:'Joseph Samurai',
+    mail:'josephsamurai@gmail.com',
+    id:'#SPK12032919',
+    issueDate:'15,Nov 2022',
+    price:'$1,623.99',
+    bg:'success/10',
+    text:'success',
+    status:'Paid',
+    dueDate:'15,Dec 2022'
+  },
+  {
+    img:"./assets/images/faces/13.jpg",
+    name:'Kevin Powell',
+    mail:'kevinpowell@gmail.com',
+    id:'#SPK12032931',
+    issueDate:'21,Nov 2022',
+    price:' $3,423.99',
+    bg:'warning/10',
+    text:'warning',
+    status:'Pending',
+    dueDate:'21,Dec 2022'
+  },
+  {
+    img:"./assets/images/faces/8.jpg",
+    name:'Darla Jung',
+    mail:'darlajung555&@gmail.com',
+    id:'#SPK12032958',
+    issueDate:'15,Oct 2022',
+    price:' $2,982.99',
+    bg:'success/10',
+    text:'success',
+    status:'Paid',
+    dueDate:'15,Nov 2022'
+  }
+]
+
+@Component({
+  selector: 'app-approve-borrow',
+  standalone: true,
+  imports: [SharedModule,NgApexchartsModule,CountUpModule,CommonModule],
+  templateUrl: './approve-borrow.component.html',
+  styleUrl: './approve-borrow.component.scss'
+})
+export class ApproveBorrowComponent {
+  click(id:string){
+    const data = this.invoices.filter((x: { id: string }) => {
+      return x.id != id;
+
+    })
+    this.invoices = data;
+
+}
+invoices=DATA;
+chartOptions:any
+constructor() {
+  this.chartOptions = {
+    series: [
+      {
+        name: 'Total',
+        data: [76, 85, 101, 98, 87, 105],
+      },
+      {
+        name: 'Paid',
+        data: [35, 41, 36, 26, 45, 48],
+      },
+      {
+        name: 'Pending',
+        data: [44, 55, 57, 56, 61, 58],
+      },
+      {
+        name: 'Overdue',
+        data: [13, 27, 31, 29, 35, 25],
+      },
+    ],
+    chart: {
+      type: 'bar',
+      height: 210,
+      stacked: true,
+    },
+    plotOptions: {
+      bar: {
+        horizontal: false,
+        columnWidth: '25%',
+        endingShape: 'rounded',
+      },
+    },
+    grid: {
+      borderColor: '#f2f5f7',
+    },
+    dataLabels: {
+      enabled: false,
+    },
+    colors: ['#4b9bfa', '#28d193', '#ffbe14', '#f3f6f8'],
+    stroke: {
+      show: true,
+      colors: ['transparent'],
+    },
+    xaxis: {
+      categories: ['Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov'],
+      labels: {
+        show: true,
+        style: {
+          colors: '#8c9097',
+          fontSize: '11px',
+          fontWeight: 600,
+          cssClass: 'apexcharts-xaxis-label',
+        },
+      },
+    },
+    yaxis: {
+      title: {
+        style: {
+          color: '#8c9097',
+        },
+      },
+      labels: {
+        show: true,
+        style: {
+          colors: '#8c9097',
+          fontSize: '11px',
+          fontWeight: 600,
+          cssClass: 'apexcharts-xaxis-label',
+        },
+      },
+    },
+    fill: {
+      opacity: 1,
+    },
+    tooltip: {
+      y: {
+        formatter: function (val: string) {
+          return '$ ' + val + ' thousands';
+        },
+      },
+    },
+  };
+}
+}

Web-Manage/src/app/DPU/common/borrow-management/borrow-management.component.ts

+import { Component } from '@angular/core';
+import flatpickr from 'flatpickr';
+import { SharedModule } from '../../../shared/shared.module';
+import { NgSelectModule } from '@ng-select/ng-select';
+import { MaterialModuleModule } from '../../../material-module/material-module.module';
+import { FlatpickrDefaults, FlatpickrModule } from 'angularx-flatpickr';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+@Component({
+  selector: 'app-borrow-management',
+  standalone: true,
+  imports: [SharedModule, NgSelectModule, MaterialModuleModule, FlatpickrModule, FormsModule, ReactiveFormsModule],
+  providers: [FlatpickrDefaults],
+  templateUrl: './borrow-management.component.html',
+  styleUrl: './borrow-management.component.scss'
+})
+export class BorrowManagementComponent {
+  flatpickrOptions: any = {
+    inline: true,
+  };
+  ngOnInit(): void {
+
+    this.flatpickrOptions = {
+      enableTime: true,
+      noCalendar: true,
+      dateFormat: 'H:i',
+    };
+
+    flatpickr('#inlinetime', this.flatpickrOptions);
+
+    this.flatpickrOptions = {
+      enableTime: true,
+      dateFormat: 'Y-m-d H:i', // Specify the format you want
+      defaultDate: '2023-11-07 14:30', // Set the default/preloaded time (adjust this to your desired time)
+    };
+
+    flatpickr('#pretime', this.flatpickrOptions);
+  }
+}

Web-Manage/src/app/DPU/common/common.module.ts

@@ -34,6 +34,11 @@ export const admin: Routes = [
       path: 'emp/position',
       loadComponent: () =>
         import('./employee/position/position.component').then((m) => m.PositionComponent),
+    },
+    {
+      path: 'borrow-management',
+      loadComponent: () =>
+        import('./borrow-management/borrow-management.component').then((m) => m.BorrowManagementComponent),
     }
     ]
   }

Web-Manage/src/app/DPU/common/history-borrow/history-borrow.component.html

+<p>history-borrow works!</p>

Web-Manage/src/app/DPU/common/history-borrow/history-borrow.component.ts

+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-history-borrow',
+  standalone: true,
+  imports: [],
+  templateUrl: './history-borrow.component.html',
+  styleUrl: './history-borrow.component.scss'
+})
+export class HistoryBorrowComponent {
+
+}

Web-Manage/src/app/DPU/common/return-borrow/return-borrow.component.html

+<p>return-borrow works!</p>

Web-Manage/src/app/DPU/common/return-borrow/return-borrow.component.ts

+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-return-borrow',
+  standalone: true,
+  imports: [],
+  templateUrl: './return-borrow.component.html',
+  styleUrl: './return-borrow.component.scss'
+})
+export class ReturnBorrowComponent {
+
+}

Web-Manage/src/app/DPU/models/borrow-transactions.ts

+import { TranslateService } from "@ngx-translate/core";
+import { BaseModel } from "./base.model";
+
+export class BorrowTransactionsModel extends BaseModel {
+  borrow_id: string;
+  pe_id: string;
+  quantity_borrowed: number;
+  status: string;
+  returned_date?: string;
+
+  constructor(data?: Partial<BorrowTransactionsModel>, translateService?: TranslateService) {
+    super(data, translateService);
+    this.borrow_id = data?.borrow_id ?? '';
+    this.pe_id = data?.pe_id ?? '';
+    this.quantity_borrowed = data?.quantity_borrowed ?? 0;
+    this.status = data?.status ?? '';
+    this.returned_date = data?.returned_date ?? null;
+  }
+}

Web-Manage/src/app/DPU/models/project-equipments.ts

+import { TranslateService } from "@ngx-translate/core";
+import { BaseModel } from "./base.model";
+
+export class ProjectEquipmentModel extends BaseModel {
+  pe_id: string;
+  project_id: string;
+  equipment_id?: string;
+  quantity_in_project: number;
+  created_at: string;
+  updated_at: string;
+
+  constructor(data?: Partial<ProjectEquipmentModel>, translateService?: TranslateService) {
+    super(data, translateService);
+    this.pe_id = data?.pe_id ?? '';
+    this.project_id = data?.project_id ?? '';
+    this.equipment_id = data?.equipment_id ?? '';
+    this.quantity_in_project = data?.quantity_in_project ?? 0;
+    this.created_at = data?.created_at ?? new Date().toISOString();
+    this.updated_at = data?.updated_at ?? new Date().toISOString();
+  }
+}

Web-Manage/src/app/DPU/services/borrow-transactions.service.ts

+import { Injectable } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import { Injectable } from '@angular/core';
+import { environment } from 'src/environments/environment';
+import { map, tap, switchMap, filter, reduce } from "rxjs/operators";
+import { ProjectEquipmentModel } from '../models/project-equipments';
+import { BorrowTransactionsModel } from '../models/borrow-transactions';
+
+
+@Injectable({
+  providedIn: 'root'
+})
+export class BorrowTransactionsService {
+
+apiBaseUrl = environment.baseUrl + "/borrow-transactions";
+  constructor(
+    private http: HttpClient
+  ) { }
+
+  getById(id: string) {
+    return this.http
+      .get<BorrowTransactionsModel>(this.apiBaseUrl + "/" + id)
+      .pipe(map((e) => new BorrowTransactionsModel(e)));
+  }
+
+  getLists() {
+    return this.http
+      .get<BorrowTransactionsModel[]>(this.apiBaseUrl)
+      .pipe(
+        map((e) => e.map((e) => new BorrowTransactionsModel(e)))
+      );
+  }
+
+  save(body: BorrowTransactionsModel) {
+    return this.http.post<{
+      "message": string,
+      "user": BorrowTransactionsModel
+    }>(this.apiBaseUrl, new BorrowTransactionsModel(body));
+  }
+
+  update(body: BorrowTransactionsModel) {
+    return this.http.put<{
+      "message": string,
+      "user": BorrowTransactionsModel
+    }>(this.apiBaseUrl + "/" + body.borrow_id, new BorrowTransactionsModel(body));
+  }
+
+  delete(body: BorrowTransactionsModel) {
+    return this.http.delete<{
+      "message": string,
+      "user": BorrowTransactionsModel
+    }>(this.apiBaseUrl + "/" + body.borrow_id);
+  }
+
+
+}
+
+}

Web-Manage/src/app/DPU/services/project-equipments.service.ts

+import { HttpClient } from '@angular/common/http';
+import { Injectable } from '@angular/core';
+import { environment } from 'src/environments/environment';
+import { map, tap, switchMap, filter, reduce } from "rxjs/operators";
+import { ProjectEquipmentModel } from '../models/project-equipments';
+
+
+@Injectable({
+  providedIn: 'root'
+})
+export class ProjectEquipmentService {
+apiBaseUrl = environment.baseUrl + "/project-equipments";
+  constructor(
+    private http: HttpClient
+  ) { }
+
+  getById(id: string) {
+    return this.http
+      .get<ProjectEquipmentModel>(this.apiBaseUrl + "/" + id)
+      .pipe(map((e) => new ProjectEquipmentModel(e)));
+  }
+
+  getLists() {
+    return this.http
+      .get<ProjectEquipmentModel[]>(this.apiBaseUrl)
+      .pipe(
+        map((e) => e.map((e) => new ProjectEquipmentModel(e)))
+      );
+  }
+
+  save(body: ProjectEquipmentModel) {
+    return this.http.post<{
+      "message": string,
+      "user": ProjectEquipmentModel
+    }>(this.apiBaseUrl, new ProjectEquipmentModel(body));
+  }
+
+  update(body: ProjectEquipmentModel) {
+    return this.http.put<{
+      "message": string,
+      "user": ProjectEquipmentModel
+    }>(this.apiBaseUrl + "/" + body.equipment_id, new ProjectEquipmentModel(body));
+  }
+
+  delete(body: ProjectEquipmentModel) {
+    return this.http.delete<{
+      "message": string,
+      "user": ProjectEquipmentModel
+    }>(this.apiBaseUrl + "/" + body.equipment_id);
+  }
+
+
+}

Web-Manage/src/app/shared/services/nav.service.ts

@@ -135,21 +135,22 @@ export class NavService implements OnDestroy {
         },
       ],
     }, {
+      path: '/admin/borrow-management',
       title: 'การเบิกคืนอุปกรณ์',
-      type: 'sub',
+      type: 'link',
       selected: false,
       Menusub: true,
       active: false,
-      children: [
-        { path: '/admin/borrow-management', title: 'การจัดการการเบิก', type: 'link' },
-        { path: '/admin/approve-borrow', title: 'อนุมัติการเบิก', type: 'link' },
-        { path: '/admin/return-borrow', title: 'อนุมัติการคืน', type: 'link' },
-        {
-          path: '/admin/history-product',
-          title: 'ประวัติการทำรายการ',
-          type: 'link',
-        },
-      ],
+      // children: [
+      //   { path: '/admin/borrow-management', title: 'การจัดการการเบิก', type: 'link' },
+      //   { path: '/admin/approve-borrow', title: 'อนุมัติการเบิก', type: 'link' },
+      //   { path: '/admin/return-borrow', title: 'อนุมัติการคืน', type: 'link' },
+      //   {
+      //     path: '/admin/history-product',
+      //     title: 'ประวัติการทำรายการ',
+      //     type: 'link',
+      //   },
+      // ],
     }]
   }