Browse Source

add timesheet import

tags/Baseline_30082024_FRONTEND_UAT
cyril.tsui 1 year ago
parent
commit
dceb3e4301
2 changed files with 67 additions and 29 deletions
  1. +13
    -1
      src/app/api/timesheets/actions.ts
  2. +54
    -28
      src/components/ExcelFileImport/ExcelFileImport.tsx

+ 13
- 1
src/app/api/timesheets/actions.ts View File

@@ -1,6 +1,6 @@
"use server"; "use server";


import { serverFetchJson } from "@/app/utils/fetchUtil";
import { serverFetchJson, serverFetchString } from "@/app/utils/fetchUtil";
import { ProjectResult } from "../projects"; import { ProjectResult } from "../projects";
import { Task, TaskGroup } from "../tasks"; import { Task, TaskGroup } from "../tasks";
import { BASE_API_URL } from "@/config/api"; import { BASE_API_URL } from "@/config/api";
@@ -122,3 +122,15 @@ export const deleteMemberLeave = async (data: {
export const revalidateCacheAfterAmendment = () => { export const revalidateCacheAfterAmendment = () => {
revalidatePath("/(main)/home"); revalidatePath("/(main)/home");
}; };

export const importTimesheets = async (data: FormData) => {
const importTimesheets = await serverFetchString<String>(
`${BASE_API_URL}/timesheets/import`,
{
method: "POST",
body: data,
},
);

return importTimesheets;
};

+ 54
- 28
src/components/ExcelFileImport/ExcelFileImport.tsx View File

@@ -2,10 +2,11 @@


import { importProjects } from "@/app/api/projects/actions"; import { importProjects } from "@/app/api/projects/actions";
import { FileUpload } from "@mui/icons-material"; import { FileUpload } from "@mui/icons-material";
import { Button, Stack } from "@mui/material";
import { Button, Grid, Stack } from "@mui/material";
import React, { ChangeEvent, useCallback } from "react"; import React, { ChangeEvent, useCallback } from "react";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import { errorDialogWithContent, successDialog } from "../Swal/CustomAlerts"; import { errorDialogWithContent, successDialog } from "../Swal/CustomAlerts";
import { importTimesheets } from "@/app/api/timesheets/actions";


interface Props { interface Props {
} }
@@ -14,17 +15,26 @@ const ExcelFileImport: React.FC<Props> = async ({ }) => {


const { t } = useTranslation("projects"); const { t } = useTranslation("projects");


const handleProjectImportClick = useCallback(async (event: ChangeEvent<HTMLInputElement>) => {
const handleExcelFileImportClick = useCallback(async (event: ChangeEvent<HTMLInputElement>) => {


try { try {
console.log(event.target.files)
if (event.target.files !== null) { if (event.target.files !== null) {
const file = event.target.files[0] const file = event.target.files[0]
const formData = new FormData(); const formData = new FormData();
formData.append('multipartFileList', file); formData.append('multipartFileList', file);


if (file.name.endsWith(".xlsx") || file.name.endsWith(".csv")) { if (file.name.endsWith(".xlsx") || file.name.endsWith(".csv")) {
const response = await importProjects(formData)
let response: String = ""

console.log(event.target.id)
switch (event.target.id) {
case "importProject":
response = await importProjects(formData)
break;
case "importTimesheet":
response = await importTimesheets(formData)
break;
}


if (response === "Import Excel success") { if (response === "Import Excel success") {
successDialog(t("Import Success"), t) successDialog(t("Import Success"), t)
@@ -44,30 +54,46 @@ const ExcelFileImport: React.FC<Props> = async ({ }) => {


return ( return (
<> <>
<Stack
direction="row"
justifyContent="space-between"
flexWrap="wrap"
rowGap={2}
>
<Button
variant="contained"
color="info"
startIcon={<FileUpload />}
component="label"
>
<input
id='importExcel'
type='file'
accept='.xlsx, .csv'
hidden
onChange={(event) => {
handleProjectImportClick(event)
}}
/>
{t("Import Project")}
</Button>
</Stack>
<Grid container rowGap={1.5}>
<Grid container>
<Button
variant="contained"
color="info"
startIcon={<FileUpload />}
component="label"
>
<input
id='importProject'
type='file'
accept='.xlsx, .csv'
hidden
onChange={(event) => {
handleExcelFileImportClick(event)
}}
/>
{t("Import Project")}
</Button>
</Grid>
<Grid container>
<Button
variant="contained"
color="info"
startIcon={<FileUpload />}
component="label"
>
<input
id='importTimesheet'
type='file'
accept='.xlsx, .csv'
hidden
onChange={(event) => {
handleExcelFileImportClick(event)
}}
/>
{t("Import Timesheet")}
</Button>
</Grid>
</Grid>
</> </>
); );
}; };


Loading…
Cancel
Save