Merge branch 'release/v1.10.2'
This commit is contained in:
AmirHossein Mahmoodi
81
.gitlab-ci.yml
Normal file
81
.gitlab-ci.yml
Normal file
@@ -0,0 +1,81 @@
|
||||
image: node:latest
|
||||
|
||||
cache:
|
||||
paths:
|
||||
- node_modules
|
||||
|
||||
stages:
|
||||
- lint
|
||||
- test
|
||||
- test:build
|
||||
- deploy
|
||||
|
||||
merge:test:lint:
|
||||
stage: lint
|
||||
script:
|
||||
- npm install
|
||||
- cp example.env.local .env.local
|
||||
- cp example.env.local .env.test
|
||||
- npm run lint
|
||||
only:
|
||||
- merge_requests
|
||||
|
||||
merge:test:jest:
|
||||
stage: test
|
||||
script:
|
||||
- npm install
|
||||
- cp example.env.local .env.local
|
||||
- cp example.env.local .env.test
|
||||
- npm run test
|
||||
only:
|
||||
- merge_requests
|
||||
|
||||
#merge:test:build:
|
||||
# stage: test:build
|
||||
# script:
|
||||
# - npm install
|
||||
# - cp example.env.local .env.local
|
||||
# - cp example.env.local .env.test
|
||||
# - npm run build
|
||||
# only:
|
||||
# - merge_requests
|
||||
|
||||
test:lint:
|
||||
stage: lint
|
||||
script:
|
||||
- npm install
|
||||
- cp example.env.local .env.local
|
||||
- cp example.env.local .env.test
|
||||
- npm run lint
|
||||
only:
|
||||
- develop
|
||||
- main
|
||||
|
||||
test:jest:
|
||||
stage: test
|
||||
script:
|
||||
- npm install
|
||||
- cp example.env.local .env.local
|
||||
- cp example.env.local .env.test
|
||||
- npm run test
|
||||
only:
|
||||
- develop
|
||||
- main
|
||||
|
||||
#test:build:
|
||||
# stage: test:build
|
||||
# script:
|
||||
# - npm install
|
||||
# - cp example.env.local .env.local
|
||||
# - cp example.env.local .env.test
|
||||
# - npm run build
|
||||
# only:
|
||||
# - develop
|
||||
# - main
|
||||
|
||||
deploy:
|
||||
stage: deploy
|
||||
script:
|
||||
- echo "Run deploy project"
|
||||
only:
|
||||
- main
|
||||
16
cypress.config.js
Normal file
16
cypress.config.js
Normal file
@@ -0,0 +1,16 @@
|
||||
const { defineConfig } = require("cypress");
|
||||
|
||||
module.exports = defineConfig({
|
||||
e2e: {
|
||||
setupNodeEvents(on, config) {
|
||||
// implement node event listeners here
|
||||
},
|
||||
},
|
||||
|
||||
component: {
|
||||
devServer: {
|
||||
framework: "next",
|
||||
bundler: "webpack",
|
||||
},
|
||||
},
|
||||
});
|
||||
25
cypress/support/commands.js
Normal file
25
cypress/support/commands.js
Normal file
@@ -0,0 +1,25 @@
|
||||
// ***********************************************
|
||||
// This example commands.js shows you how to
|
||||
// create various custom commands and overwrite
|
||||
// existing commands.
|
||||
//
|
||||
// For more comprehensive examples of custom
|
||||
// commands please read more here:
|
||||
// https://on.cypress.io/custom-commands
|
||||
// ***********************************************
|
||||
//
|
||||
//
|
||||
// -- This is a parent command --
|
||||
// Cypress.Commands.add('login', (email, password) => { ... })
|
||||
//
|
||||
//
|
||||
// -- This is a child command --
|
||||
// Cypress.Commands.add('drag', { prevSubject: 'element'}, (subject, options) => { ... })
|
||||
//
|
||||
//
|
||||
// -- This is a dual command --
|
||||
// Cypress.Commands.add('dismiss', { prevSubject: 'optional'}, (subject, options) => { ... })
|
||||
//
|
||||
//
|
||||
// -- This will overwrite an existing command --
|
||||
// Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })
|
||||
14
cypress/support/component-index.html
Normal file
14
cypress/support/component-index.html
Normal file
@@ -0,0 +1,14 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1.0">
|
||||
<title>Components App</title>
|
||||
<!-- Used by Next.js to inject CSS. -->
|
||||
<div id="__next_css__DO_NOT_USE__"></div>
|
||||
</head>
|
||||
<body>
|
||||
<div data-cy-root></div>
|
||||
</body>
|
||||
</html>
|
||||
27
cypress/support/component.js
Normal file
27
cypress/support/component.js
Normal file
@@ -0,0 +1,27 @@
|
||||
// ***********************************************************
|
||||
// This example support/component.js is processed and
|
||||
// loaded automatically before your test files.
|
||||
//
|
||||
// This is a great place to put global configuration and
|
||||
// behavior that modifies Cypress.
|
||||
//
|
||||
// You can change the location of this file or turn off
|
||||
// automatically serving support files with the
|
||||
// 'supportFile' configuration option.
|
||||
//
|
||||
// You can read more here:
|
||||
// https://on.cypress.io/configuration
|
||||
// ***********************************************************
|
||||
|
||||
// Import commands.js using ES2015 syntax:
|
||||
import './commands'
|
||||
|
||||
// Alternatively you can use CommonJS syntax:
|
||||
// require('./commands')
|
||||
|
||||
import { mount } from 'cypress/react18'
|
||||
|
||||
Cypress.Commands.add('mount', mount)
|
||||
|
||||
// Example use:
|
||||
// cy.mount(<MyComponent />)
|
||||
20
cypress/support/e2e.js
Normal file
20
cypress/support/e2e.js
Normal file
@@ -0,0 +1,20 @@
|
||||
// ***********************************************************
|
||||
// This example support/e2e.js is processed and
|
||||
// loaded automatically before your test files.
|
||||
//
|
||||
// This is a great place to put global configuration and
|
||||
// behavior that modifies Cypress.
|
||||
//
|
||||
// You can change the location of this file or turn off
|
||||
// automatically serving support files with the
|
||||
// 'supportFile' configuration option.
|
||||
//
|
||||
// You can read more here:
|
||||
// https://on.cypress.io/configuration
|
||||
// ***********************************************************
|
||||
|
||||
// Import commands.js using ES2015 syntax:
|
||||
import './commands'
|
||||
|
||||
// Alternatively you can use CommonJS syntax:
|
||||
// require('./commands')
|
||||
@@ -1,5 +1,5 @@
|
||||
NEXT_PUBLIC_API_NAME = "Loan Facilities Dashboard"
|
||||
NEXT_PUBLIC_API_VERSION = "1.8.10"
|
||||
NEXT_PUBLIC_API_VERSION = "1.10.2"
|
||||
NEXT_PUBLIC_DEFAULT_LANGUAGE = "fa"
|
||||
NEXT_PUBLIC_DEFAULT_DIRECTION = "rtl"
|
||||
|
||||
@@ -7,6 +7,7 @@ NEXT_PUBLIC_PRIMARY_MAIN = "#084070"
|
||||
NEXT_PUBLIC_SECONDARY_MAIN = "#FF4E00"
|
||||
|
||||
NEXT_PUBLIC_BASE_URL = "https://loan.witel.ir"
|
||||
NEXT_PUBLIC_POWERED_BY_URL = "https://witel.ir"
|
||||
|
||||
#["NEXT_PUBLIC_HAS_WIDGET" , "NEXT_PUBLIC_HAS_NOTIFICATION"]
|
||||
NEXT_PUBLIC_HAS_VALUE=["NEXT_PUBLIC_HAS_NOTIFICATION"]
|
||||
|
||||
17
jest.config.mjs
Normal file
17
jest.config.mjs
Normal file
@@ -0,0 +1,17 @@
|
||||
import nextJest from 'next/jest.js'
|
||||
|
||||
const createJestConfig = nextJest({
|
||||
// Provide the path to your Next.js app to load next.config.js and .env files in your test environment
|
||||
dir: './',
|
||||
})
|
||||
|
||||
// Add any custom config to be passed to Jest
|
||||
/** @type {import('jest').Config} */
|
||||
const config = {
|
||||
// Add more setup options before each test is run
|
||||
setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],
|
||||
testEnvironment: 'jest-environment-jsdom',
|
||||
}
|
||||
|
||||
// createJestConfig is exported this way to ensure that next/jest can load the Next.js config which is async
|
||||
export default createJestConfig(config)
|
||||
22
jest.setup.js
Normal file
22
jest.setup.js
Normal file
@@ -0,0 +1,22 @@
|
||||
import '@testing-library/jest-dom'
|
||||
import {server} from "./mocks/server";
|
||||
import mockRouter from 'next-router-mock'
|
||||
|
||||
jest.mock('next/router', () => jest.requireActual('next-router-mock'))
|
||||
|
||||
beforeAll(() => {
|
||||
server.listen()
|
||||
})
|
||||
beforeEach(() => {
|
||||
localStorage.clear();
|
||||
mockRouter.query = {}
|
||||
|
||||
})
|
||||
|
||||
afterEach(() => {
|
||||
server.resetHandlers()
|
||||
})
|
||||
|
||||
afterAll(() => {
|
||||
server.close()
|
||||
})
|
||||
13
mocks/AppWithProvider.jsx
Normal file
13
mocks/AppWithProvider.jsx
Normal file
@@ -0,0 +1,13 @@
|
||||
import App from "@/pages/_app";
|
||||
import fa from "&/locales/fa/app.json"
|
||||
|
||||
const translations = {fa};
|
||||
const MockAppWithProviders = ({children, locale, title, isBot}) => {
|
||||
const pageProps = {
|
||||
title: title || '', isBot: isBot || true, locale: locale || 'fa', messages: translations[locale || 'fa']
|
||||
}
|
||||
|
||||
return (<App Component={() => (<>{children}</>)} pageProps={pageProps}/>)
|
||||
}
|
||||
|
||||
export default MockAppWithProviders
|
||||
5
mocks/handler.js
Normal file
5
mocks/handler.js
Normal file
@@ -0,0 +1,5 @@
|
||||
import {userHandler} from "./handlers/user";
|
||||
|
||||
export const handler = [
|
||||
...userHandler
|
||||
];
|
||||
19
mocks/handlers/user.js
Normal file
19
mocks/handlers/user.js
Normal file
@@ -0,0 +1,19 @@
|
||||
import {rest} from "msw";
|
||||
import {GET_USER_ROUTE} from "@/core/data/apiRoutes";
|
||||
|
||||
export const userHandler = [
|
||||
rest.get(GET_USER_ROUTE, (req, res, ctx) => {
|
||||
return res(ctx.json({
|
||||
data: {
|
||||
id: 10,
|
||||
full_name: "Witel Company",
|
||||
position: "Software Engineer",
|
||||
permissions: [
|
||||
"manage_users",
|
||||
"manage_roles",
|
||||
"manage_boss"
|
||||
],
|
||||
}
|
||||
}))
|
||||
}),
|
||||
]
|
||||
4
mocks/server.js
Normal file
4
mocks/server.js
Normal file
@@ -0,0 +1,4 @@
|
||||
import {setupServer} from "msw/node";
|
||||
import {handler} from "./handler";
|
||||
|
||||
export const server = setupServer(...handler)
|
||||
9418
package-lock.json
generated
9418
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
20
package.json
20
package.json
@@ -10,7 +10,11 @@
|
||||
"lint": "next lint",
|
||||
"update": "run-script-os",
|
||||
"update:win32": "echo 'ok'",
|
||||
"update:linux": "rm -rf .next/ && npm i && npm run build && sudo systemctl restart loan_facilities_develop_expert.service"
|
||||
"update:linux": "rm -rf .next/ && npm i && npm run build && sudo systemctl restart loan_facilities_develop_expert.service",
|
||||
"test": "jest",
|
||||
"test:watch": "jest --watchAll",
|
||||
"cypress:open": "cypress open",
|
||||
"cypress:run": "cypress run"
|
||||
},
|
||||
"dependencies": {
|
||||
"@emotion/react": "^11.10.6",
|
||||
@@ -19,6 +23,7 @@
|
||||
"@mui/icons-material": "^5.11.16",
|
||||
"@mui/material": "^5.12.0",
|
||||
"@mui/x-date-pickers": "^6.9.2",
|
||||
"apexcharts": "^3.44.0",
|
||||
"axios": "^1.4.0",
|
||||
"colord": "^2.9.3",
|
||||
"date-fns-jalali": "^2.13.0-0",
|
||||
@@ -38,6 +43,7 @@
|
||||
"nextjs-progressbar": "^0.0.16",
|
||||
"prop-types": "^15.8.1",
|
||||
"react": "^18.2.0",
|
||||
"react-apexcharts": "^1.4.1",
|
||||
"react-dom": "^18.2.0",
|
||||
"react-toastify": "^9.1.3",
|
||||
"sass": "^1.62.0",
|
||||
@@ -48,7 +54,17 @@
|
||||
},
|
||||
"devDependencies": {
|
||||
"@faker-js/faker": "^7.6.0",
|
||||
"eslint-config-next": "^13.3.0",
|
||||
"@testing-library/jest-dom": "^6.1.4",
|
||||
"@testing-library/react": "^14.0.0",
|
||||
"@testing-library/user-event": "^14.5.1",
|
||||
"cypress": "^13.4.0",
|
||||
"eslint-config-next": "^13.5.6",
|
||||
"eslint-plugin-jest-dom": "^5.1.0",
|
||||
"eslint-plugin-testing-library": "^6.1.0",
|
||||
"jest": "^29.7.0",
|
||||
"jest-environment-jsdom": "^29.7.0",
|
||||
"msw": "^1.3.1",
|
||||
"next-router-mock": "^0.9.10",
|
||||
"run-script-os": "^1.1.6"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -2,6 +2,7 @@
|
||||
"app_name": "سامانه جامع تسهیلات",
|
||||
"app_short_name": "سامانه تسهیلات",
|
||||
"dashboard": "داشبورد",
|
||||
"powered_by_witel": "توسعه یافته توسط وایتل",
|
||||
"first_page": "خوش آمدید",
|
||||
"login": "ورود",
|
||||
"login_expert": "ورود کارشناس",
|
||||
@@ -359,7 +360,8 @@
|
||||
"permission_min_error": "حداقل باید یک دسترسی انتخاب شود",
|
||||
"type_id": "نوع کاربر",
|
||||
"navgan_id": "کد ناوگان",
|
||||
"button-update": "ویرایش"
|
||||
"button-update": "ویرایش",
|
||||
"loading_permissions_list": "درحال دریافت لیست دسترسی ها"
|
||||
},
|
||||
"UploadSystem": {
|
||||
"upload_file": "فایل خود را بارگذاری کنید",
|
||||
@@ -466,6 +468,7 @@
|
||||
"type_id": "نوع کاربر",
|
||||
"navgan_id": "کد ناوگان",
|
||||
"button-cancel": "انصراف",
|
||||
"button-add": "ثبت"
|
||||
"button-add": "ثبت",
|
||||
"loading_permissions_list": "درحال دریافت لیست دسترسی ها"
|
||||
}
|
||||
}
|
||||
|
||||
63
public/locales/fa/chart.js
Normal file
63
public/locales/fa/chart.js
Normal file
@@ -0,0 +1,63 @@
|
||||
export const FA_CHART_LOCALIZATION = {
|
||||
"name": "fa",
|
||||
"options": {
|
||||
"months": [
|
||||
"فروردین",
|
||||
"اردیبهشت",
|
||||
"خرداد",
|
||||
"تیر",
|
||||
"مرداد",
|
||||
"شهریور",
|
||||
"مهر",
|
||||
"آبان",
|
||||
"آذر",
|
||||
"دی",
|
||||
"بهمن",
|
||||
"اسفند"
|
||||
],
|
||||
"shortMonths": [
|
||||
"فرو",
|
||||
"ارد",
|
||||
"خرد",
|
||||
"تیر",
|
||||
"مرد",
|
||||
"شهر",
|
||||
"مهر",
|
||||
"آبا",
|
||||
"آذر",
|
||||
"دی",
|
||||
"بهمـ",
|
||||
"اسفـ"
|
||||
],
|
||||
"days": [
|
||||
"یکشنبه",
|
||||
"دوشنبه",
|
||||
"سه شنبه",
|
||||
"چهارشنبه",
|
||||
"پنجشنبه",
|
||||
"جمعه",
|
||||
"شنبه"
|
||||
],
|
||||
"shortDays": [
|
||||
"ی",
|
||||
"د",
|
||||
"س",
|
||||
"چ",
|
||||
"پ",
|
||||
"ج",
|
||||
"ش"
|
||||
],
|
||||
"toolbar": {
|
||||
"exportToSVG": "دانلود SVG",
|
||||
"exportToPNG": "دانلود PNG",
|
||||
"exportToCSV": "دانلود CSV",
|
||||
"menu": "منو",
|
||||
"selection": "انتخاب",
|
||||
"selectionZoom": "بزرگنمایی انتخابی",
|
||||
"zoomIn": "بزرگنمایی",
|
||||
"zoomOut": "کوچکنمایی",
|
||||
"pan": "پیمایش",
|
||||
"reset": "بازنشانی بزرگنمایی"
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -123,7 +123,7 @@ const ChangePasswordForm = ({onSubmit}) => {
|
||||
variant="contained"
|
||||
color="primary"
|
||||
size="large"
|
||||
disabled={props.isSubmitting || !(props.values.current_password && props.values.new_password && props.values.new_password_confirmation)}
|
||||
disabled={props.isSubmitting || !props.dirty || !props.isValid}
|
||||
>
|
||||
{props.isSubmitting
|
||||
? t("SubmitButton.button_while_submit")
|
||||
|
||||
@@ -1,17 +1,14 @@
|
||||
import CenterLayout from "@/layouts/CenterLayout";
|
||||
import DashboardLayouts from "@/layouts/dashboardLayouts";
|
||||
import {Container} from "@mui/material";
|
||||
import ChangePasswordForm from "@/components/dashboard/change-password/change-password-form";
|
||||
|
||||
const DashboardChangePasswordComponent = () => {
|
||||
return (
|
||||
<DashboardLayouts>
|
||||
<CenterLayout>
|
||||
<Container maxWidth="sm">
|
||||
<ChangePasswordForm />
|
||||
</Container>
|
||||
</CenterLayout>
|
||||
</DashboardLayouts>
|
||||
<CenterLayout>
|
||||
<Container maxWidth="sm">
|
||||
<ChangePasswordForm/>
|
||||
</Container>
|
||||
</CenterLayout>
|
||||
);
|
||||
};
|
||||
export default DashboardChangePasswordComponent;
|
||||
|
||||
@@ -1,142 +0,0 @@
|
||||
import {useTranslations} from "next-intl";
|
||||
import {useState} from "react";
|
||||
import {
|
||||
Button,
|
||||
Dialog,
|
||||
DialogActions,
|
||||
DialogContent,
|
||||
DialogTitle,
|
||||
IconButton,
|
||||
Stack,
|
||||
TextField,
|
||||
Tooltip,
|
||||
Typography
|
||||
} from "@mui/material";
|
||||
import ThumbUpAltIcon from "@mui/icons-material/ThumbUpAlt";
|
||||
import UploadSystem from "@/core/components/UploadSystem";
|
||||
import {useFormik} from "formik";
|
||||
import UploadFileNotification from "@/core/components/notifications/UploadFileNotification";
|
||||
import {CONFIRM_COMMERCIAL_CHIEF} from "@/core/data/apiRoutes";
|
||||
import useRequest from "@/lib/app/hooks/useRequest";
|
||||
import useNotification from "@/lib/app/hooks/useNotification";
|
||||
|
||||
|
||||
const Confirm = ({rowId, fetchUrl, mutate}) => {
|
||||
const t = useTranslations();
|
||||
const [selectedImage, setSelectedImage] = useState("");
|
||||
const [fileType, setfileType] = useState(null);
|
||||
const [fileName, setfileName] = useState(null);
|
||||
const [showAddIcon, setShowAddIcon] = useState(true);
|
||||
const [openConfirmDialog, setOpenConfirmDialog] = useState(false);
|
||||
const requestServer = useRequest({auth: true})
|
||||
const {update_notification} = useNotification()
|
||||
|
||||
const formik = useFormik({
|
||||
initialValues: {
|
||||
description: "",
|
||||
confirm_img: null
|
||||
},
|
||||
onSubmit: (values, {setSubmitting}) => {
|
||||
const formData = new FormData();
|
||||
if (values.description != "") formData.append("description", values.description);
|
||||
if (values.confirm_img != null) formData.append("attachment", values.confirm_img);
|
||||
|
||||
requestServer(`${CONFIRM_COMMERCIAL_CHIEF}/${rowId}`, 'post', {
|
||||
data: formData,
|
||||
}).then((response) => {
|
||||
mutate(fetchUrl)
|
||||
update_notification()
|
||||
}).catch(() => {
|
||||
}).finally(() => {
|
||||
setSubmitting(false);
|
||||
});
|
||||
},
|
||||
});
|
||||
|
||||
const handleDescriptionChange = (event) => {
|
||||
formik.setFieldValue("description", event.target.value)
|
||||
};
|
||||
|
||||
const handleUploadChange = (event) => {
|
||||
const uploadedFile = event.target?.files?.[0];
|
||||
if (uploadedFile) {
|
||||
const maxFileSize = 2 * 1024 * 1024;
|
||||
if (uploadedFile.size > maxFileSize) {
|
||||
UploadFileNotification(t);
|
||||
event.target.value = "";
|
||||
return;
|
||||
}
|
||||
|
||||
const fileType = event.target?.files?.[0].type;
|
||||
const fileName = event.target?.files?.[0].name;
|
||||
setSelectedImage(URL.createObjectURL(uploadedFile));
|
||||
setfileType(fileType);
|
||||
setfileName(fileName);
|
||||
formik.setFieldValue("confirm_img", uploadedFile);
|
||||
setShowAddIcon(false);
|
||||
}
|
||||
};
|
||||
return (
|
||||
<>
|
||||
<Tooltip title={t("ConfirmDialog.confirm")}>
|
||||
<IconButton
|
||||
color="primary"
|
||||
onClick={() => {
|
||||
setOpenConfirmDialog(true)
|
||||
}}
|
||||
>
|
||||
<ThumbUpAltIcon/>
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
<Dialog fullWidth open={openConfirmDialog}
|
||||
PaperProps={{sx: {boxShadow: 'rgba(60, 64, 67, 0.3) 0px 1px 16px 0px, rgba(60, 64, 67, 0.15) 0px 1px 10px 0px'}}}>
|
||||
<DialogTitle>{t("ConfirmDialog.confirm")}</DialogTitle>
|
||||
<DialogContent>
|
||||
<Stack spacing={2}>
|
||||
<Stack>
|
||||
<TextField
|
||||
name="description"
|
||||
multiline
|
||||
rows={8}
|
||||
label={<>
|
||||
<span>{t("ConfirmDialog.description")}</span><small>{t("ConfirmDialog.optional")}</small></>}
|
||||
value={formik.values.description}
|
||||
onChange={handleDescriptionChange}
|
||||
fullWidth
|
||||
variant="outlined"
|
||||
sx={{mt: 1}}
|
||||
/>
|
||||
</Stack>
|
||||
<Stack>
|
||||
<Typography>{t("UploadSystem.upload_file")}{t("UploadSystem.optional")}</Typography>
|
||||
<UploadSystem
|
||||
selectedImage={selectedImage}
|
||||
handleUploadChange={handleUploadChange} // Pass the updated function directly
|
||||
setselectedImage={setSelectedImage}
|
||||
setFieldValue={formik.setFieldValue} // Remove props.setFieldValue, use formik.setFieldValue
|
||||
fieldname="confirm_img"
|
||||
fileType={fileType}
|
||||
fileName={fileName}
|
||||
imageAlt={t("app_name")}
|
||||
imageSize={[250, 150]}
|
||||
setShowAddIcon={setShowAddIcon}
|
||||
showAddIcon={showAddIcon}
|
||||
/>
|
||||
</Stack>
|
||||
</Stack>
|
||||
</DialogContent>
|
||||
<DialogActions>
|
||||
<Button onClick={() => setOpenConfirmDialog(false)} variant="outlined" color="secondary"
|
||||
disabled={formik.isSubmitting} autoFocus>
|
||||
{t("ConfirmDialog.button-cancel")}
|
||||
</Button>
|
||||
<Button onClick={formik.handleSubmit} variant="contained" color="primary"
|
||||
disabled={formik.isSubmitting}>
|
||||
{t("ConfirmDialog.button-confirm")}
|
||||
</Button>
|
||||
</DialogActions>
|
||||
</Dialog>
|
||||
</>
|
||||
);
|
||||
};
|
||||
export default Confirm;
|
||||
@@ -0,0 +1,117 @@
|
||||
import UploadSystem from "@/core/components/UploadSystem";
|
||||
import useNotification from "@/lib/app/hooks/useNotification";
|
||||
import useRequest from "@/lib/app/hooks/useRequest";
|
||||
import {Button, DialogActions, DialogContent, Stack, TextField, Typography} from "@mui/material"
|
||||
import {useFormik} from "formik";
|
||||
import {useTranslations} from "next-intl";
|
||||
import {CONFIRM_COMMERCIAL_CHIEF} from "@/core/data/apiRoutes";
|
||||
import UploadFileNotification from "@/core/components/notifications/UploadFileNotification";
|
||||
import {useState} from "react";
|
||||
|
||||
const ConfirmContent = ({rowId, mutate, setOpenConfirmDialog}) => {
|
||||
const t = useTranslations();
|
||||
const [selectedImage, setSelectedImage] = useState("");
|
||||
const [fileType, setfileType] = useState(null);
|
||||
const [fileName, setfileName] = useState(null);
|
||||
const [showAddIcon, setShowAddIcon] = useState(true);
|
||||
const requestServer = useRequest({auth: true})
|
||||
const {update_notification} = useNotification()
|
||||
|
||||
const formik = useFormik({
|
||||
initialValues: {
|
||||
description: "",
|
||||
confirm_img: null
|
||||
},
|
||||
onSubmit: (values, {setSubmitting}) => {
|
||||
const formData = new FormData();
|
||||
if (values.description != "") formData.append("description", values.description);
|
||||
if (values.confirm_img != null) formData.append("attachment", values.confirm_img);
|
||||
|
||||
requestServer(`${CONFIRM_COMMERCIAL_CHIEF}/${rowId}`, 'post', {
|
||||
data: formData,
|
||||
}).then((response) => {
|
||||
setOpenConfirmDialog(false)
|
||||
update_notification()
|
||||
mutate()
|
||||
}).catch(() => {
|
||||
}).finally(() => {
|
||||
setSubmitting(false);
|
||||
});
|
||||
},
|
||||
});
|
||||
|
||||
const handleDescriptionChange = (event) => {
|
||||
formik.setFieldValue("description", event.target.value)
|
||||
};
|
||||
|
||||
const handleUploadChange = (event) => {
|
||||
const uploadedFile = event.target?.files?.[0];
|
||||
if (uploadedFile) {
|
||||
const maxFileSize = 2 * 1024 * 1024;
|
||||
if (uploadedFile.size > maxFileSize) {
|
||||
UploadFileNotification(t);
|
||||
event.target.value = "";
|
||||
return;
|
||||
}
|
||||
|
||||
const fileType = event.target?.files?.[0].type;
|
||||
const fileName = event.target?.files?.[0].name;
|
||||
setSelectedImage(URL.createObjectURL(uploadedFile));
|
||||
setfileType(fileType);
|
||||
setfileName(fileName);
|
||||
formik.setFieldValue("confirm_img", uploadedFile);
|
||||
setShowAddIcon(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<DialogContent>
|
||||
<Stack spacing={2}>
|
||||
<Stack>
|
||||
<TextField
|
||||
name="description"
|
||||
multiline
|
||||
rows={8}
|
||||
label={<>
|
||||
<span>{t("ConfirmDialog.description")}</span><small>{t("ConfirmDialog.optional")}</small></>}
|
||||
value={formik.values.description}
|
||||
onChange={handleDescriptionChange}
|
||||
fullWidth
|
||||
variant="outlined"
|
||||
sx={{mt: 1}}
|
||||
/>
|
||||
</Stack>
|
||||
<Stack>
|
||||
<Typography>{t("UploadSystem.upload_file")}{t("UploadSystem.optional")}</Typography>
|
||||
<UploadSystem
|
||||
selectedImage={selectedImage}
|
||||
handleUploadChange={handleUploadChange} // Pass the updated function directly
|
||||
setselectedImage={setSelectedImage}
|
||||
setFieldValue={formik.setFieldValue} // Remove props.setFieldValue, use formik.setFieldValue
|
||||
fieldname="confirm_img"
|
||||
fileType={fileType}
|
||||
fileName={fileName}
|
||||
imageAlt={t("app_name")}
|
||||
imageSize={[250, 150]}
|
||||
setShowAddIcon={setShowAddIcon}
|
||||
showAddIcon={showAddIcon}
|
||||
/>
|
||||
</Stack>
|
||||
</Stack>
|
||||
</DialogContent>
|
||||
<DialogActions>
|
||||
<Button onClick={() => setOpenConfirmDialog(false)} variant="outlined" color="secondary"
|
||||
disabled={formik.isSubmitting} autoFocus>
|
||||
{t("ConfirmDialog.button-cancel")}
|
||||
</Button>
|
||||
<Button onClick={formik.handleSubmit} variant="contained" color="primary"
|
||||
disabled={formik.isSubmitting}>
|
||||
{t("ConfirmDialog.button-confirm")}
|
||||
</Button>
|
||||
</DialogActions>
|
||||
</>
|
||||
)
|
||||
|
||||
}
|
||||
export default ConfirmContent
|
||||
@@ -0,0 +1,31 @@
|
||||
import {Dialog, DialogTitle, IconButton, Tooltip} from "@mui/material";
|
||||
import {useTranslations} from "next-intl";
|
||||
import ThumbUpAltIcon from "@mui/icons-material/ThumbUpAlt";
|
||||
import {useState} from "react";
|
||||
import ConfirmContent from "./ConfirmContent";
|
||||
|
||||
const Confirm = ({rowId, mutate}) => {
|
||||
const t = useTranslations();
|
||||
const [openConfirmDialog, setOpenConfirmDialog] = useState(false);
|
||||
return (
|
||||
<>
|
||||
<Tooltip title={t("ConfirmDialog.confirm")}>
|
||||
<IconButton
|
||||
color="primary"
|
||||
onClick={() => {
|
||||
setOpenConfirmDialog(true)
|
||||
}}
|
||||
>
|
||||
<ThumbUpAltIcon/>
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
<Dialog fullWidth open={openConfirmDialog}
|
||||
PaperProps={{sx: {boxShadow: 'rgba(60, 64, 67, 0.3) 0px 1px 16px 0px, rgba(60, 64, 67, 0.15) 0px 1px 10px 0px'}}}>
|
||||
<DialogTitle>{t("ConfirmDialog.confirm")}</DialogTitle>
|
||||
<ConfirmContent mutate={mutate} rowId={rowId} setOpenConfirmDialog={setOpenConfirmDialog}/>
|
||||
</Dialog>
|
||||
</>
|
||||
)
|
||||
|
||||
}
|
||||
export default Confirm;
|
||||
@@ -1,146 +0,0 @@
|
||||
import {REJECT_COMMERCIAL_CHIEF} from "@/core/data/apiRoutes";
|
||||
import {
|
||||
Button,
|
||||
Dialog,
|
||||
DialogActions,
|
||||
DialogContent,
|
||||
DialogTitle,
|
||||
IconButton,
|
||||
Stack,
|
||||
TextField,
|
||||
Tooltip,
|
||||
Typography,
|
||||
} from "@mui/material";
|
||||
import {useTranslations} from "next-intl";
|
||||
import {useFormik} from "formik";
|
||||
import * as Yup from "yup";
|
||||
import {useState} from "react";
|
||||
import UploadSystem from "@/core/components/UploadSystem";
|
||||
import UploadFileNotification from "@/core/components/notifications/UploadFileNotification";
|
||||
import ThumbDownIcon from "@mui/icons-material/ThumbDown";
|
||||
import useRequest from "@/lib/app/hooks/useRequest";
|
||||
import useNotification from "@/lib/app/hooks/useNotification";
|
||||
|
||||
|
||||
const Reject = ({rowId, fetchUrl, mutate}) => {
|
||||
const [selectedImage, setSelectedImage] = useState("");
|
||||
const [fileType, setfileType] = useState(null);
|
||||
const [fileName, setfileName] = useState(null);
|
||||
const [showAddIcon, setShowAddIcon] = useState(true);
|
||||
const t = useTranslations();
|
||||
const [openRejectDialog, setOpenRejectDialog] = useState(false);
|
||||
const requestServer = useRequest({auth: true})
|
||||
const {update_notification} = useNotification()
|
||||
|
||||
const validationSchema = Yup.object().shape({
|
||||
description: Yup.string().required(t("RejectDialog.description_error")),
|
||||
});
|
||||
|
||||
const formik = useFormik({
|
||||
initialValues: {
|
||||
description: "",
|
||||
reject_img: null
|
||||
},
|
||||
validationSchema,
|
||||
onSubmit: (values, {setSubmitting}) => {
|
||||
const formData = new FormData();
|
||||
formData.append("description", values.description);
|
||||
if (values.reject_img != null) formData.append("attachment", values.reject_img);
|
||||
|
||||
requestServer(`${REJECT_COMMERCIAL_CHIEF}/${rowId}`, 'post', {
|
||||
data: formData,
|
||||
}).then((response) => {
|
||||
mutate(fetchUrl)
|
||||
update_notification()
|
||||
}).catch(() => {
|
||||
}).finally(() => {
|
||||
setSubmitting(false);
|
||||
});
|
||||
},
|
||||
});
|
||||
|
||||
const handleDescriptionChange = (event) => {
|
||||
formik.setFieldValue("description", event.target.value);
|
||||
formik.handleChange(event);
|
||||
};
|
||||
const handleUploadChange = (event) => {
|
||||
const uploadedFile = event.target?.files?.[0];
|
||||
if (uploadedFile) {
|
||||
const maxFileSize = 2 * 1024 * 1024;
|
||||
if (uploadedFile.size > maxFileSize) {
|
||||
UploadFileNotification(t);
|
||||
event.target.value = "";
|
||||
return;
|
||||
}
|
||||
const fileType = event.target?.files?.[0].type;
|
||||
const fileName = event.target?.files?.[0].name;
|
||||
setSelectedImage(URL.createObjectURL(uploadedFile));
|
||||
setfileType(fileType);
|
||||
setfileName(fileName);
|
||||
formik.setFieldValue("reject_img", uploadedFile);
|
||||
setShowAddIcon(false);
|
||||
}
|
||||
};
|
||||
return (
|
||||
<>
|
||||
<Tooltip title={t("RejectDialog.reject")}>
|
||||
<IconButton color="primary" onClick={() => setOpenRejectDialog(true)}>
|
||||
<ThumbDownIcon/>
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
<Dialog fullWidth open={openRejectDialog}
|
||||
PaperProps={{sx: {boxShadow: 'rgba(60, 64, 67, 0.3) 0px 1px 16px 0px, rgba(60, 64, 67, 0.15) 0px 1px 10px 0px'}}}>
|
||||
<DialogTitle>{t("RejectDialog.reject")}</DialogTitle>
|
||||
<DialogContent>
|
||||
<Stack spacing={2}>
|
||||
<Stack>
|
||||
<TextField
|
||||
name="description"
|
||||
multiline
|
||||
rows={8}
|
||||
label={t("RejectDialog.description")}
|
||||
value={formik.values.description}
|
||||
onChange={handleDescriptionChange}
|
||||
onBlur={formik.handleBlur("description")}
|
||||
error={
|
||||
formik.touched.description && Boolean(formik.errors.description)
|
||||
}
|
||||
helperText={formik.touched.description && formik.errors.description}
|
||||
fullWidth
|
||||
variant="outlined"
|
||||
sx={{mt: 1}}
|
||||
/>
|
||||
</Stack>
|
||||
<Stack>
|
||||
<Typography>{t("UploadSystem.upload_file")}{t("UploadSystem.optional")}</Typography>
|
||||
<UploadSystem
|
||||
selectedImage={selectedImage}
|
||||
handleUploadChange={handleUploadChange} // Pass the updated function directly
|
||||
setselectedImage={setSelectedImage}
|
||||
setFieldValue={formik.setFieldValue} // Remove props.setFieldValue, use formik.setFieldValue
|
||||
fieldname="reject_img"
|
||||
fileType={fileType}
|
||||
fileName={fileName}
|
||||
imageAlt={t("app_name")}
|
||||
imageSize={[250 /*width*/, 150 /*height*/]}
|
||||
setShowAddIcon={setShowAddIcon}
|
||||
showAddIcon={showAddIcon}
|
||||
/>
|
||||
</Stack>
|
||||
</Stack>
|
||||
</DialogContent>
|
||||
<DialogActions>
|
||||
<Button onClick={() => setOpenRejectDialog(false)} variant="outlined" color="secondary"
|
||||
disabled={formik.isSubmitting} autoFocus>
|
||||
{t("RejectDialog.button-cancel")}
|
||||
</Button>
|
||||
<Button onClick={formik.handleSubmit} variant="contained" color="primary"
|
||||
disabled={formik.isSubmitting}>
|
||||
{t("RejectDialog.button-reject")}
|
||||
</Button>
|
||||
</DialogActions>
|
||||
</Dialog>
|
||||
</>
|
||||
);
|
||||
};
|
||||
export default Reject;
|
||||
@@ -0,0 +1,123 @@
|
||||
import UploadSystem from "@/core/components/UploadSystem"
|
||||
import useNotification from "@/lib/app/hooks/useNotification";
|
||||
import useRequest from "@/lib/app/hooks/useRequest";
|
||||
import {Button, DialogActions, DialogContent, Stack, TextField, Typography} from "@mui/material"
|
||||
import {useFormik} from "formik";
|
||||
import {useTranslations} from "next-intl";
|
||||
import {useState} from "react";
|
||||
import * as Yup from "yup";
|
||||
import {REJECT_COMMERCIAL_CHIEF} from "@/core/data/apiRoutes";
|
||||
|
||||
const RejectContent = ({rowId, mutate, setOpenRejectDialog}) => {
|
||||
const [selectedImage, setSelectedImage] = useState("");
|
||||
const [fileType, setfileType] = useState(null);
|
||||
const [fileName, setfileName] = useState(null);
|
||||
const [showAddIcon, setShowAddIcon] = useState(true);
|
||||
const t = useTranslations();
|
||||
const requestServer = useRequest({auth: true})
|
||||
const {update_notification} = useNotification()
|
||||
|
||||
const validationSchema = Yup.object().shape({
|
||||
description: Yup.string().required(t("RejectDialog.description_error")),
|
||||
});
|
||||
|
||||
const formik = useFormik({
|
||||
initialValues: {
|
||||
description: "",
|
||||
reject_img: null
|
||||
},
|
||||
validationSchema,
|
||||
onSubmit: (values, {setSubmitting}) => {
|
||||
const formData = new FormData();
|
||||
formData.append("description", values.description);
|
||||
if (values.reject_img != null) formData.append("attachment", values.reject_img);
|
||||
|
||||
requestServer(`${REJECT_COMMERCIAL_CHIEF}/${rowId}`, 'post', {
|
||||
data: formData,
|
||||
}).then((response) => {
|
||||
setOpenRejectDialog(false)
|
||||
mutate()
|
||||
update_notification()
|
||||
}).catch(() => {
|
||||
}).finally(() => {
|
||||
setSubmitting(false);
|
||||
});
|
||||
},
|
||||
});
|
||||
|
||||
const handleDescriptionChange = (event) => {
|
||||
formik.setFieldValue("description", event.target.value);
|
||||
formik.handleChange(event);
|
||||
};
|
||||
const handleUploadChange = (event) => {
|
||||
const uploadedFile = event.target?.files?.[0];
|
||||
if (uploadedFile) {
|
||||
const maxFileSize = 2 * 1024 * 1024;
|
||||
if (uploadedFile.size > maxFileSize) {
|
||||
UploadFileNotification(t);
|
||||
event.target.value = "";
|
||||
return;
|
||||
}
|
||||
const fileType = event.target?.files?.[0].type;
|
||||
const fileName = event.target?.files?.[0].name;
|
||||
setSelectedImage(URL.createObjectURL(uploadedFile));
|
||||
setfileType(fileType);
|
||||
setfileName(fileName);
|
||||
formik.setFieldValue("reject_img", uploadedFile);
|
||||
setShowAddIcon(false);
|
||||
}
|
||||
};
|
||||
return (
|
||||
<>
|
||||
<DialogContent>
|
||||
<Stack spacing={2}>
|
||||
<Stack>
|
||||
<TextField
|
||||
name="description"
|
||||
multiline
|
||||
rows={8}
|
||||
label={t("RejectDialog.description")}
|
||||
value={formik.values.description}
|
||||
onChange={handleDescriptionChange}
|
||||
onBlur={formik.handleBlur("description")}
|
||||
error={
|
||||
formik.touched.description && Boolean(formik.errors.description)
|
||||
}
|
||||
helperText={formik.touched.description && formik.errors.description}
|
||||
fullWidth
|
||||
variant="outlined"
|
||||
sx={{mt: 1}}
|
||||
/>
|
||||
</Stack>
|
||||
<Stack>
|
||||
<Typography>{t("UploadSystem.upload_file")}{t("UploadSystem.optional")}</Typography>
|
||||
<UploadSystem
|
||||
selectedImage={selectedImage}
|
||||
handleUploadChange={handleUploadChange} // Pass the updated function directly
|
||||
setselectedImage={setSelectedImage}
|
||||
setFieldValue={formik.setFieldValue} // Remove props.setFieldValue, use formik.setFieldValue
|
||||
fieldname="reject_img"
|
||||
fileType={fileType}
|
||||
fileName={fileName}
|
||||
imageAlt={t("app_name")}
|
||||
imageSize={[250 /*width*/, 150 /*height*/]}
|
||||
setShowAddIcon={setShowAddIcon}
|
||||
showAddIcon={showAddIcon}
|
||||
/>
|
||||
</Stack>
|
||||
</Stack>
|
||||
</DialogContent>
|
||||
<DialogActions>
|
||||
<Button onClick={() => setOpenRejectDialog(false)} variant="outlined" color="secondary"
|
||||
disabled={formik.isSubmitting} autoFocus>
|
||||
{t("RejectDialog.button-cancel")}
|
||||
</Button>
|
||||
<Button onClick={formik.handleSubmit} variant="contained" color="primary"
|
||||
disabled={formik.isSubmitting || !formik.dirty || !formik.isValid}>
|
||||
{t("RejectDialog.button-reject")}
|
||||
</Button>
|
||||
</DialogActions>
|
||||
</>
|
||||
)
|
||||
}
|
||||
export default RejectContent
|
||||
@@ -0,0 +1,25 @@
|
||||
import {Dialog, DialogTitle, IconButton, Tooltip} from "@mui/material"
|
||||
import {useTranslations} from "next-intl";
|
||||
import {useState} from "react";
|
||||
import RejectContent from "./RejectContent";
|
||||
import ThumbDownIcon from "@mui/icons-material/ThumbDown";
|
||||
|
||||
const Reject = ({rowId, mutate}) => {
|
||||
const t = useTranslations();
|
||||
const [openRejectDialog, setOpenRejectDialog] = useState(false);
|
||||
return (
|
||||
<>
|
||||
<Tooltip title={t("RejectDialog.reject")}>
|
||||
<IconButton color="primary" onClick={() => setOpenRejectDialog(true)}>
|
||||
<ThumbDownIcon/>
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
<Dialog fullWidth open={openRejectDialog}
|
||||
PaperProps={{sx: {boxShadow: 'rgba(60, 64, 67, 0.3) 0px 1px 16px 0px, rgba(60, 64, 67, 0.15) 0px 1px 10px 0px'}}}>
|
||||
<DialogTitle>{t("RejectDialog.reject")}</DialogTitle>
|
||||
<RejectContent mutate={mutate} rowId={rowId} setOpenRejectDialog={setOpenRejectDialog}/>
|
||||
</Dialog>
|
||||
</>
|
||||
)
|
||||
}
|
||||
export default Reject
|
||||
@@ -1,19 +1,16 @@
|
||||
import {Box} from "@mui/material";
|
||||
import ConfirmForm from "./Form/ConfirmForm"
|
||||
import RejectForm from "./Form/RejectForm"
|
||||
|
||||
const TableRow = ({row, mutate, fetchUrl}) => {
|
||||
import Confirm from "./Form/ConfirmForm";
|
||||
import Reject from "./Form/RejectForm";
|
||||
|
||||
const TableRow = ({row, mutate}) => {
|
||||
return (
|
||||
<Box sx={{display: "flex", flexWrap: "nowrap", gap: "8px"}}>
|
||||
<ConfirmForm
|
||||
<Confirm
|
||||
rowId={row.getValue("id")}
|
||||
mutate={mutate}
|
||||
fetchUrl={fetchUrl}
|
||||
/>
|
||||
<RejectForm
|
||||
<Reject
|
||||
rowId={row.getValue("id")}
|
||||
fetchUrl={fetchUrl}
|
||||
mutate={mutate}
|
||||
/>
|
||||
</Box>
|
||||
|
||||
@@ -1,4 +1,3 @@
|
||||
import DashboardLayouts from "@/layouts/dashboardLayouts";
|
||||
import {Box, Typography} from "@mui/material";
|
||||
import {useMemo} from "react";
|
||||
import {GET_COMMERCIAL_CHIEF} from "@/core/data/apiRoutes";
|
||||
@@ -124,31 +123,30 @@ function DashboardCommercialChiefComponent() {
|
||||
],
|
||||
[]
|
||||
);
|
||||
|
||||
return (
|
||||
<DashboardLayouts>
|
||||
<Box sx={{px: 3}}>
|
||||
<DataTable
|
||||
tableUrl={GET_COMMERCIAL_CHIEF}
|
||||
columns={columns}
|
||||
selectableRow={false}
|
||||
enableCustomToolbar={false}
|
||||
enableLastUpdate={true}
|
||||
sorting={[{
|
||||
id: 'id', desc: false
|
||||
}]}
|
||||
enablePinning={true}
|
||||
enableDensityToggle={false}
|
||||
initialState={{density: 'compact'}} //compact (small) //comfortable (medium) //spacious (large)
|
||||
enableColumnFilters={true}
|
||||
enableHiding={true}
|
||||
enableFullScreenToggle={false}
|
||||
enableGlobalFilter={false}
|
||||
enableColumnResizing={false} // if you want true this you should change renderRowActions props ** see https://www.material-react-table.com/docs/guides/row-actions
|
||||
enableRowActions={true}
|
||||
TableRowAction={TableRowActions}
|
||||
/>
|
||||
</Box>
|
||||
</DashboardLayouts>
|
||||
<Box sx={{px: 3}}>
|
||||
<DataTable
|
||||
tableUrl={GET_COMMERCIAL_CHIEF}
|
||||
columns={columns}
|
||||
selectableRow={false}
|
||||
enableCustomToolbar={false}
|
||||
enableLastUpdate={true}
|
||||
sorting={[{
|
||||
id: 'id', desc: false
|
||||
}]}
|
||||
enablePinning={true}
|
||||
enableDensityToggle={false}
|
||||
initialState={{density: 'compact'}} //compact (small) //comfortable (medium) //spacious (large)
|
||||
enableColumnFilters={true}
|
||||
enableHiding={true}
|
||||
enableFullScreenToggle={false}
|
||||
enableGlobalFilter={false}
|
||||
enableColumnResizing={false} // if you want true this you should change renderRowActions props ** see https://www.material-react-table.com/docs/guides/row-actions
|
||||
enableRowActions={true}
|
||||
TableRowAction={TableRowActions}
|
||||
/>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
@@ -1,141 +0,0 @@
|
||||
import {useTranslations} from "next-intl";
|
||||
import {useState} from "react";
|
||||
import {
|
||||
Button,
|
||||
Dialog,
|
||||
DialogActions,
|
||||
DialogContent,
|
||||
DialogTitle,
|
||||
IconButton,
|
||||
Stack,
|
||||
TextField,
|
||||
Tooltip,
|
||||
Typography
|
||||
} from "@mui/material";
|
||||
import ThumbUpAltIcon from "@mui/icons-material/ThumbUpAlt";
|
||||
import UploadSystem from "@/core/components/UploadSystem";
|
||||
import {useFormik} from "formik";
|
||||
import UploadFileNotification from "@/core/components/notifications/UploadFileNotification";
|
||||
import {CONFIRM_DEVELOPMENT_ASSISTANT} from "@/core/data/apiRoutes";
|
||||
import useRequest from "@/lib/app/hooks/useRequest";
|
||||
import useNotification from "@/lib/app/hooks/useNotification";
|
||||
|
||||
|
||||
const Confirm = ({rowId, fetchUrl, mutate}) => {
|
||||
const t = useTranslations();
|
||||
const [selectedImage, setSelectedImage] = useState("");
|
||||
const [fileType, setfileType] = useState(null);
|
||||
const [fileName, setfileName] = useState(null);
|
||||
const [showAddIcon, setShowAddIcon] = useState(true);
|
||||
const [openConfirmDialog, setOpenConfirmDialog] = useState(false);
|
||||
const requestServer = useRequest({auth: true})
|
||||
const {update_notification} = useNotification()
|
||||
|
||||
const formik = useFormik({
|
||||
initialValues: {
|
||||
description: "",
|
||||
confirm_img: null
|
||||
},
|
||||
onSubmit: (values, {setSubmitting}) => {
|
||||
const formData = new FormData();
|
||||
if (values.description != "") formData.append("description", values.description);
|
||||
if (values.confirm_img != null) formData.append("attachment", values.confirm_img);
|
||||
|
||||
requestServer(`${CONFIRM_DEVELOPMENT_ASSISTANT}/${rowId}`, 'post', {
|
||||
data: formData,
|
||||
}).then((response) => {
|
||||
mutate(fetchUrl)
|
||||
update_notification()
|
||||
}).catch(() => {
|
||||
}).finally(() => {
|
||||
setSubmitting(false);
|
||||
});
|
||||
},
|
||||
});
|
||||
|
||||
const handleDescriptionChange = (event) => {
|
||||
formik.setFieldValue("description", event.target.value)
|
||||
};
|
||||
const handleUploadChange = (event) => {
|
||||
const uploadedFile = event.target?.files?.[0];
|
||||
if (uploadedFile) {
|
||||
const maxFileSize = 2 * 1024 * 1024;
|
||||
if (uploadedFile.size > maxFileSize) {
|
||||
UploadFileNotification(t);
|
||||
event.target.value = "";
|
||||
return;
|
||||
}
|
||||
|
||||
const fileType = event.target?.files?.[0].type;
|
||||
const fileName = event.target?.files?.[0].name;
|
||||
setSelectedImage(URL.createObjectURL(uploadedFile));
|
||||
setfileType(fileType);
|
||||
setfileName(fileName);
|
||||
formik.setFieldValue("confirm_img", uploadedFile);
|
||||
setShowAddIcon(false);
|
||||
}
|
||||
};
|
||||
return (
|
||||
<>
|
||||
<Tooltip title={t("ConfirmDialog.confirm")}>
|
||||
<IconButton
|
||||
color="primary"
|
||||
onClick={() => {
|
||||
setOpenConfirmDialog(true)
|
||||
}}
|
||||
>
|
||||
<ThumbUpAltIcon/>
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
<Dialog fullWidth open={openConfirmDialog}
|
||||
PaperProps={{sx: {boxShadow: 'rgba(60, 64, 67, 0.3) 0px 1px 16px 0px, rgba(60, 64, 67, 0.15) 0px 1px 10px 0px'}}}>
|
||||
<DialogTitle>{t("ConfirmDialog.confirm")}</DialogTitle>
|
||||
<DialogContent>
|
||||
<Stack spacing={2}>
|
||||
<Stack>
|
||||
<TextField
|
||||
name="description"
|
||||
multiline
|
||||
rows={8}
|
||||
label={<>
|
||||
<span>{t("ConfirmDialog.description")}</span><small>{t("ConfirmDialog.optional")}</small></>}
|
||||
value={formik.values.description}
|
||||
onChange={handleDescriptionChange}
|
||||
fullWidth
|
||||
variant="outlined"
|
||||
sx={{mt: 1}}
|
||||
/>
|
||||
</Stack>
|
||||
<Stack>
|
||||
<Typography>{t("UploadSystem.upload_file")}{t("UploadSystem.optional")}</Typography>
|
||||
<UploadSystem
|
||||
selectedImage={selectedImage}
|
||||
handleUploadChange={handleUploadChange} // Pass the updated function directly
|
||||
setselectedImage={setSelectedImage}
|
||||
setFieldValue={formik.setFieldValue} // Remove props.setFieldValue, use formik.setFieldValue
|
||||
fieldname="confirm_img"
|
||||
fileType={fileType}
|
||||
fileName={fileName}
|
||||
imageAlt={t("app_name")}
|
||||
imageSize={[250, 150]}
|
||||
setShowAddIcon={setShowAddIcon}
|
||||
showAddIcon={showAddIcon}
|
||||
/>
|
||||
</Stack>
|
||||
</Stack>
|
||||
</DialogContent>
|
||||
<DialogActions>
|
||||
<Button onClick={() => setOpenConfirmDialog(false)} variant="outlined" color="secondary"
|
||||
disabled={formik.isSubmitting} autoFocus>
|
||||
{t("ConfirmDialog.button-cancel")}
|
||||
</Button>
|
||||
<Button onClick={formik.handleSubmit} variant="contained" color="primary"
|
||||
disabled={formik.isSubmitting}>
|
||||
{t("ConfirmDialog.button-confirm")}
|
||||
</Button>
|
||||
</DialogActions>
|
||||
</Dialog>
|
||||
</>
|
||||
);
|
||||
};
|
||||
export default Confirm;
|
||||
@@ -0,0 +1,117 @@
|
||||
import UploadSystem from "@/core/components/UploadSystem";
|
||||
import useNotification from "@/lib/app/hooks/useNotification";
|
||||
import useRequest from "@/lib/app/hooks/useRequest";
|
||||
import {Button, DialogActions, DialogContent, Stack, TextField, Typography} from "@mui/material"
|
||||
import {useFormik} from "formik";
|
||||
import {useTranslations} from "next-intl";
|
||||
import {CONFIRM_DEVELOPMENT_ASSISTANT} from "@/core/data/apiRoutes";
|
||||
import UploadFileNotification from "@/core/components/notifications/UploadFileNotification";
|
||||
import {useState} from "react";
|
||||
|
||||
const ConfirmContent = ({rowId, mutate, setOpenConfirmDialog}) => {
|
||||
const t = useTranslations();
|
||||
const [selectedImage, setSelectedImage] = useState("");
|
||||
const [fileType, setfileType] = useState(null);
|
||||
const [fileName, setfileName] = useState(null);
|
||||
const [showAddIcon, setShowAddIcon] = useState(true);
|
||||
const requestServer = useRequest({auth: true})
|
||||
const {update_notification} = useNotification()
|
||||
|
||||
const formik = useFormik({
|
||||
initialValues: {
|
||||
description: "",
|
||||
confirm_img: null
|
||||
},
|
||||
onSubmit: (values, {setSubmitting}) => {
|
||||
const formData = new FormData();
|
||||
if (values.description != "") formData.append("description", values.description);
|
||||
if (values.confirm_img != null) formData.append("attachment", values.confirm_img);
|
||||
|
||||
requestServer(`${CONFIRM_DEVELOPMENT_ASSISTANT}/${rowId}`, 'post', {
|
||||
data: formData,
|
||||
}).then((response) => {
|
||||
setOpenConfirmDialog(false)
|
||||
mutate()
|
||||
update_notification()
|
||||
}).catch(() => {
|
||||
}).finally(() => {
|
||||
setSubmitting(false);
|
||||
});
|
||||
},
|
||||
});
|
||||
|
||||
const handleDescriptionChange = (event) => {
|
||||
formik.setFieldValue("description", event.target.value)
|
||||
};
|
||||
|
||||
const handleUploadChange = (event) => {
|
||||
const uploadedFile = event.target?.files?.[0];
|
||||
if (uploadedFile) {
|
||||
const maxFileSize = 2 * 1024 * 1024;
|
||||
if (uploadedFile.size > maxFileSize) {
|
||||
UploadFileNotification(t);
|
||||
event.target.value = "";
|
||||
return;
|
||||
}
|
||||
|
||||
const fileType = event.target?.files?.[0].type;
|
||||
const fileName = event.target?.files?.[0].name;
|
||||
setSelectedImage(URL.createObjectURL(uploadedFile));
|
||||
setfileType(fileType);
|
||||
setfileName(fileName);
|
||||
formik.setFieldValue("confirm_img", uploadedFile);
|
||||
setShowAddIcon(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<DialogContent>
|
||||
<Stack spacing={2}>
|
||||
<Stack>
|
||||
<TextField
|
||||
name="description"
|
||||
multiline
|
||||
rows={8}
|
||||
label={<>
|
||||
<span>{t("ConfirmDialog.description")}</span><small>{t("ConfirmDialog.optional")}</small></>}
|
||||
value={formik.values.description}
|
||||
onChange={handleDescriptionChange}
|
||||
fullWidth
|
||||
variant="outlined"
|
||||
sx={{mt: 1}}
|
||||
/>
|
||||
</Stack>
|
||||
<Stack>
|
||||
<Typography>{t("UploadSystem.upload_file")}{t("UploadSystem.optional")}</Typography>
|
||||
<UploadSystem
|
||||
selectedImage={selectedImage}
|
||||
handleUploadChange={handleUploadChange} // Pass the updated function directly
|
||||
setselectedImage={setSelectedImage}
|
||||
setFieldValue={formik.setFieldValue} // Remove props.setFieldValue, use formik.setFieldValue
|
||||
fieldname="confirm_img"
|
||||
fileType={fileType}
|
||||
fileName={fileName}
|
||||
imageAlt={t("app_name")}
|
||||
imageSize={[250, 150]}
|
||||
setShowAddIcon={setShowAddIcon}
|
||||
showAddIcon={showAddIcon}
|
||||
/>
|
||||
</Stack>
|
||||
</Stack>
|
||||
</DialogContent>
|
||||
<DialogActions>
|
||||
<Button onClick={() => setOpenConfirmDialog(false)} variant="outlined" color="secondary"
|
||||
disabled={formik.isSubmitting} autoFocus>
|
||||
{t("ConfirmDialog.button-cancel")}
|
||||
</Button>
|
||||
<Button onClick={formik.handleSubmit} variant="contained" color="primary"
|
||||
disabled={formik.isSubmitting}>
|
||||
{t("ConfirmDialog.button-confirm")}
|
||||
</Button>
|
||||
</DialogActions>
|
||||
</>
|
||||
)
|
||||
|
||||
}
|
||||
export default ConfirmContent
|
||||
@@ -0,0 +1,31 @@
|
||||
import {Dialog, DialogTitle, IconButton, Tooltip} from "@mui/material";
|
||||
import {useTranslations} from "next-intl";
|
||||
import ThumbUpAltIcon from "@mui/icons-material/ThumbUpAlt";
|
||||
import {useState} from "react";
|
||||
import ConfirmContent from "./ConfirmContent";
|
||||
|
||||
const Confirm = ({rowId, mutate}) => {
|
||||
const t = useTranslations();
|
||||
const [openConfirmDialog, setOpenConfirmDialog] = useState(false);
|
||||
return (
|
||||
<>
|
||||
<Tooltip title={t("ConfirmDialog.confirm")}>
|
||||
<IconButton
|
||||
color="primary"
|
||||
onClick={() => {
|
||||
setOpenConfirmDialog(true)
|
||||
}}
|
||||
>
|
||||
<ThumbUpAltIcon/>
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
<Dialog fullWidth open={openConfirmDialog}
|
||||
PaperProps={{sx: {boxShadow: 'rgba(60, 64, 67, 0.3) 0px 1px 16px 0px, rgba(60, 64, 67, 0.15) 0px 1px 10px 0px'}}}>
|
||||
<DialogTitle>{t("ConfirmDialog.confirm")}</DialogTitle>
|
||||
<ConfirmContent mutate={mutate} rowId={rowId} setOpenConfirmDialog={setOpenConfirmDialog}/>
|
||||
</Dialog>
|
||||
</>
|
||||
)
|
||||
|
||||
}
|
||||
export default Confirm;
|
||||
@@ -1,146 +0,0 @@
|
||||
import {REJECT_DEVELOPMENT_ASSISTANT} from "@/core/data/apiRoutes";
|
||||
import {
|
||||
Button,
|
||||
Dialog,
|
||||
DialogActions,
|
||||
DialogContent,
|
||||
DialogTitle,
|
||||
IconButton,
|
||||
Stack,
|
||||
TextField,
|
||||
Tooltip,
|
||||
Typography,
|
||||
} from "@mui/material";
|
||||
import {useTranslations} from "next-intl";
|
||||
import {useFormik} from "formik";
|
||||
import * as Yup from "yup";
|
||||
import {useState} from "react";
|
||||
import UploadSystem from "@/core/components/UploadSystem";
|
||||
import UploadFileNotification from "@/core/components/notifications/UploadFileNotification";
|
||||
import ThumbDownIcon from "@mui/icons-material/ThumbDown";
|
||||
import useRequest from "@/lib/app/hooks/useRequest";
|
||||
import useNotification from "@/lib/app/hooks/useNotification";
|
||||
|
||||
|
||||
const Reject = ({rowId, fetchUrl, mutate}) => {
|
||||
const [selectedImage, setSelectedImage] = useState("");
|
||||
const [fileType, setfileType] = useState(null);
|
||||
const [fileName, setfileName] = useState(null);
|
||||
const [showAddIcon, setShowAddIcon] = useState(true);
|
||||
const t = useTranslations();
|
||||
const [openRejectDialog, setOpenRejectDialog] = useState(false);
|
||||
const requestServer = useRequest({auth: true})
|
||||
const {update_notification} = useNotification()
|
||||
|
||||
const validationSchema = Yup.object().shape({
|
||||
description: Yup.string().required(t("RejectDialog.description_error")),
|
||||
});
|
||||
|
||||
const formik = useFormik({
|
||||
initialValues: {
|
||||
description: "",
|
||||
reject_img: null
|
||||
},
|
||||
validationSchema,
|
||||
onSubmit: (values, {setSubmitting}) => {
|
||||
const formData = new FormData();
|
||||
formData.append("description", values.description);
|
||||
if (values.reject_img != null) formData.append("attachment", values.reject_img);
|
||||
|
||||
requestServer(`${REJECT_DEVELOPMENT_ASSISTANT}/${rowId}`, 'post', {
|
||||
data: formData,
|
||||
}).then((response) => {
|
||||
mutate(fetchUrl)
|
||||
update_notification()
|
||||
}).catch(() => {
|
||||
}).finally(() => {
|
||||
setSubmitting(false);
|
||||
});
|
||||
},
|
||||
});
|
||||
|
||||
const handleDescriptionChange = (event) => {
|
||||
formik.setFieldValue("description", event.target.value);
|
||||
formik.handleChange(event);
|
||||
};
|
||||
const handleUploadChange = (event) => {
|
||||
const uploadedFile = event.target?.files?.[0];
|
||||
if (uploadedFile) {
|
||||
const maxFileSize = 2 * 1024 * 1024;
|
||||
if (uploadedFile.size > maxFileSize) {
|
||||
UploadFileNotification(t);
|
||||
event.target.value = "";
|
||||
return;
|
||||
}
|
||||
const fileType = event.target?.files?.[0].type;
|
||||
const fileName = event.target?.files?.[0].name;
|
||||
setSelectedImage(URL.createObjectURL(uploadedFile));
|
||||
setfileType(fileType);
|
||||
setfileName(fileName);
|
||||
formik.setFieldValue("reject_img", uploadedFile);
|
||||
setShowAddIcon(false);
|
||||
}
|
||||
};
|
||||
return (
|
||||
<>
|
||||
<Tooltip title={t("RejectDialog.reject")}>
|
||||
<IconButton color="primary" onClick={() => setOpenRejectDialog(true)}>
|
||||
<ThumbDownIcon/>
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
<Dialog fullWidth open={openRejectDialog}
|
||||
PaperProps={{sx: {boxShadow: 'rgba(60, 64, 67, 0.3) 0px 1px 16px 0px, rgba(60, 64, 67, 0.15) 0px 1px 10px 0px'}}}>
|
||||
<DialogTitle>{t("RejectDialog.reject")}</DialogTitle>
|
||||
<DialogContent>
|
||||
<Stack spacing={2}>
|
||||
<Stack>
|
||||
<TextField
|
||||
name="description"
|
||||
multiline
|
||||
rows={8}
|
||||
label={t("RejectDialog.description")}
|
||||
value={formik.values.description}
|
||||
onChange={handleDescriptionChange}
|
||||
onBlur={formik.handleBlur("description")}
|
||||
error={
|
||||
formik.touched.description && Boolean(formik.errors.description)
|
||||
}
|
||||
helperText={formik.touched.description && formik.errors.description}
|
||||
fullWidth
|
||||
variant="outlined"
|
||||
sx={{mt: 1}}
|
||||
/>
|
||||
</Stack>
|
||||
<Stack>
|
||||
<Typography>{t("UploadSystem.upload_file")}{t("UploadSystem.optional")}</Typography>
|
||||
<UploadSystem
|
||||
selectedImage={selectedImage}
|
||||
handleUploadChange={handleUploadChange} // Pass the updated function directly
|
||||
setselectedImage={setSelectedImage}
|
||||
setFieldValue={formik.setFieldValue} // Remove props.setFieldValue, use formik.setFieldValue
|
||||
fieldname="reject_img"
|
||||
fileType={fileType}
|
||||
fileName={fileName}
|
||||
imageAlt={t("app_name")}
|
||||
imageSize={[250 /*width*/, 150 /*height*/]}
|
||||
setShowAddIcon={setShowAddIcon}
|
||||
showAddIcon={showAddIcon}
|
||||
/>
|
||||
</Stack>
|
||||
</Stack>
|
||||
</DialogContent>
|
||||
<DialogActions>
|
||||
<Button onClick={() => setOpenRejectDialog(false)} variant="outlined" color="secondary"
|
||||
disabled={formik.isSubmitting} autoFocus>
|
||||
{t("RejectDialog.button-cancel")}
|
||||
</Button>
|
||||
<Button onClick={formik.handleSubmit} variant="contained" color="primary"
|
||||
disabled={formik.isSubmitting}>
|
||||
{t("RejectDialog.button-reject")}
|
||||
</Button>
|
||||
</DialogActions>
|
||||
</Dialog>
|
||||
</>
|
||||
);
|
||||
};
|
||||
export default Reject;
|
||||
@@ -0,0 +1,123 @@
|
||||
import UploadSystem from "@/core/components/UploadSystem"
|
||||
import useNotification from "@/lib/app/hooks/useNotification";
|
||||
import useRequest from "@/lib/app/hooks/useRequest";
|
||||
import {Button, DialogActions, DialogContent, Stack, TextField, Typography} from "@mui/material"
|
||||
import {useFormik} from "formik";
|
||||
import {useTranslations} from "next-intl";
|
||||
import {useState} from "react";
|
||||
import * as Yup from "yup";
|
||||
import {REJECT_DEVELOPMENT_ASSISTANT} from "@/core/data/apiRoutes";
|
||||
|
||||
const RejectContent = ({rowId, mutate, setOpenRejectDialog}) => {
|
||||
const [selectedImage, setSelectedImage] = useState("");
|
||||
const [fileType, setfileType] = useState(null);
|
||||
const [fileName, setfileName] = useState(null);
|
||||
const [showAddIcon, setShowAddIcon] = useState(true);
|
||||
const t = useTranslations();
|
||||
const requestServer = useRequest({auth: true})
|
||||
const {update_notification} = useNotification()
|
||||
|
||||
const validationSchema = Yup.object().shape({
|
||||
description: Yup.string().required(t("RejectDialog.description_error")),
|
||||
});
|
||||
|
||||
const formik = useFormik({
|
||||
initialValues: {
|
||||
description: "",
|
||||
reject_img: null
|
||||
},
|
||||
validationSchema,
|
||||
onSubmit: (values, {setSubmitting}) => {
|
||||
const formData = new FormData();
|
||||
formData.append("description", values.description);
|
||||
if (values.reject_img != null) formData.append("attachment", values.reject_img);
|
||||
|
||||
requestServer(`${REJECT_DEVELOPMENT_ASSISTANT}/${rowId}`, 'post', {
|
||||
data: formData,
|
||||
}).then((response) => {
|
||||
setOpenRejectDialog(false)
|
||||
mutate()
|
||||
update_notification()
|
||||
}).catch(() => {
|
||||
}).finally(() => {
|
||||
setSubmitting(false);
|
||||
});
|
||||
},
|
||||
});
|
||||
|
||||
const handleDescriptionChange = (event) => {
|
||||
formik.setFieldValue("description", event.target.value);
|
||||
formik.handleChange(event);
|
||||
};
|
||||
const handleUploadChange = (event) => {
|
||||
const uploadedFile = event.target?.files?.[0];
|
||||
if (uploadedFile) {
|
||||
const maxFileSize = 2 * 1024 * 1024;
|
||||
if (uploadedFile.size > maxFileSize) {
|
||||
UploadFileNotification(t);
|
||||
event.target.value = "";
|
||||
return;
|
||||
}
|
||||
const fileType = event.target?.files?.[0].type;
|
||||
const fileName = event.target?.files?.[0].name;
|
||||
setSelectedImage(URL.createObjectURL(uploadedFile));
|
||||
setfileType(fileType);
|
||||
setfileName(fileName);
|
||||
formik.setFieldValue("reject_img", uploadedFile);
|
||||
setShowAddIcon(false);
|
||||
}
|
||||
};
|
||||
return (
|
||||
<>
|
||||
<DialogContent>
|
||||
<Stack spacing={2}>
|
||||
<Stack>
|
||||
<TextField
|
||||
name="description"
|
||||
multiline
|
||||
rows={8}
|
||||
label={t("RejectDialog.description")}
|
||||
value={formik.values.description}
|
||||
onChange={handleDescriptionChange}
|
||||
onBlur={formik.handleBlur("description")}
|
||||
error={
|
||||
formik.touched.description && Boolean(formik.errors.description)
|
||||
}
|
||||
helperText={formik.touched.description && formik.errors.description}
|
||||
fullWidth
|
||||
variant="outlined"
|
||||
sx={{mt: 1}}
|
||||
/>
|
||||
</Stack>
|
||||
<Stack>
|
||||
<Typography>{t("UploadSystem.upload_file")}{t("UploadSystem.optional")}</Typography>
|
||||
<UploadSystem
|
||||
selectedImage={selectedImage}
|
||||
handleUploadChange={handleUploadChange} // Pass the updated function directly
|
||||
setselectedImage={setSelectedImage}
|
||||
setFieldValue={formik.setFieldValue} // Remove props.setFieldValue, use formik.setFieldValue
|
||||
fieldname="reject_img"
|
||||
fileType={fileType}
|
||||
fileName={fileName}
|
||||
imageAlt={t("app_name")}
|
||||
imageSize={[250 /*width*/, 150 /*height*/]}
|
||||
setShowAddIcon={setShowAddIcon}
|
||||
showAddIcon={showAddIcon}
|
||||
/>
|
||||
</Stack>
|
||||
</Stack>
|
||||
</DialogContent>
|
||||
<DialogActions>
|
||||
<Button onClick={() => setOpenRejectDialog(false)} variant="outlined" color="secondary"
|
||||
disabled={formik.isSubmitting} autoFocus>
|
||||
{t("RejectDialog.button-cancel")}
|
||||
</Button>
|
||||
<Button onClick={formik.handleSubmit} variant="contained" color="primary"
|
||||
disabled={formik.isSubmitting || !formik.dirty || !formik.isValid}>
|
||||
{t("RejectDialog.button-reject")}
|
||||
</Button>
|
||||
</DialogActions>
|
||||
</>
|
||||
)
|
||||
}
|
||||
export default RejectContent
|
||||
@@ -0,0 +1,25 @@
|
||||
import {Dialog, DialogTitle, IconButton, Tooltip} from "@mui/material"
|
||||
import {useTranslations} from "next-intl";
|
||||
import {useState} from "react";
|
||||
import RejectContent from "./RejectContent";
|
||||
import ThumbDownIcon from "@mui/icons-material/ThumbDown";
|
||||
|
||||
const Reject = ({rowId, mutate}) => {
|
||||
const t = useTranslations();
|
||||
const [openRejectDialog, setOpenRejectDialog] = useState(false);
|
||||
return (
|
||||
<>
|
||||
<Tooltip title={t("RejectDialog.reject")}>
|
||||
<IconButton color="primary" onClick={() => setOpenRejectDialog(true)}>
|
||||
<ThumbDownIcon/>
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
<Dialog fullWidth open={openRejectDialog}
|
||||
PaperProps={{sx: {boxShadow: 'rgba(60, 64, 67, 0.3) 0px 1px 16px 0px, rgba(60, 64, 67, 0.15) 0px 1px 10px 0px'}}}>
|
||||
<DialogTitle>{t("RejectDialog.reject")}</DialogTitle>
|
||||
<RejectContent mutate={mutate} rowId={rowId} setOpenRejectDialog={setOpenRejectDialog}/>
|
||||
</Dialog>
|
||||
</>
|
||||
)
|
||||
}
|
||||
export default Reject
|
||||
@@ -1,19 +1,17 @@
|
||||
import {Box} from "@mui/material";
|
||||
import ConfirmForm from "./Form/ConfirmForm"
|
||||
import RejectForm from "./Form/RejectForm"
|
||||
import Confirm from "./Form/ConfirmForm";
|
||||
import Reject from "./Form/RejectForm";
|
||||
|
||||
const TableRow = ({row, mutate, fetchUrl}) => {
|
||||
const TableRow = ({row, mutate}) => {
|
||||
|
||||
return (
|
||||
<Box sx={{display: "flex", flexWrap: "nowrap", gap: "8px"}}>
|
||||
<ConfirmForm
|
||||
<Confirm
|
||||
rowId={row.getValue("id")}
|
||||
mutate={mutate}
|
||||
fetchUrl={fetchUrl}
|
||||
/>
|
||||
<RejectForm
|
||||
<Reject
|
||||
rowId={row.getValue("id")}
|
||||
fetchUrl={fetchUrl}
|
||||
mutate={mutate}
|
||||
/>
|
||||
</Box>
|
||||
|
||||
@@ -1,4 +1,3 @@
|
||||
import DashboardLayouts from "@/layouts/dashboardLayouts";
|
||||
import {Box, Typography} from "@mui/material";
|
||||
import {useMemo} from "react";
|
||||
import {GET_DEVELOPMENT_ASSISTANT} from "@/core/data/apiRoutes";
|
||||
@@ -125,31 +124,30 @@ function DashboardDevelopmentAssistantComponent() {
|
||||
],
|
||||
[]
|
||||
);
|
||||
|
||||
return (
|
||||
<DashboardLayouts>
|
||||
<Box sx={{px: 3}}>
|
||||
<DataTable
|
||||
tableUrl={GET_DEVELOPMENT_ASSISTANT}
|
||||
columns={columns}
|
||||
selectableRow={false}
|
||||
enableCustomToolbar={false}
|
||||
enableLastUpdate={true}
|
||||
enablePinning={true}
|
||||
enableDensityToggle={false}
|
||||
sorting={[{
|
||||
id: 'id', desc: false
|
||||
}]}
|
||||
initialState={{density: 'compact'}} //compact (small) //comfortable (medium) //spacious (large)
|
||||
enableColumnFilters={true}
|
||||
enableHiding={true}
|
||||
enableFullScreenToggle={false}
|
||||
enableGlobalFilter={false}
|
||||
enableColumnResizing={false} // if you want true this you should change renderRowActions props ** see https://www.material-react-table.com/docs/guides/row-actions
|
||||
enableRowActions={true}
|
||||
TableRowAction={TableRowActions}
|
||||
/>
|
||||
</Box>
|
||||
</DashboardLayouts>
|
||||
<Box sx={{px: 3}}>
|
||||
<DataTable
|
||||
tableUrl={GET_DEVELOPMENT_ASSISTANT}
|
||||
columns={columns}
|
||||
selectableRow={false}
|
||||
enableCustomToolbar={false}
|
||||
enableLastUpdate={true}
|
||||
enablePinning={true}
|
||||
enableDensityToggle={false}
|
||||
sorting={[{
|
||||
id: 'id', desc: false
|
||||
}]}
|
||||
initialState={{density: 'compact'}} //compact (small) //comfortable (medium) //spacious (large)
|
||||
enableColumnFilters={true}
|
||||
enableHiding={true}
|
||||
enableFullScreenToggle={false}
|
||||
enableGlobalFilter={false}
|
||||
enableColumnResizing={false} // if you want true this you should change renderRowActions props ** see https://www.material-react-table.com/docs/guides/row-actions
|
||||
enableRowActions={true}
|
||||
TableRowAction={TableRowActions}
|
||||
/>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
@@ -1,6 +1,5 @@
|
||||
import StyledForm from "@/core/components/StyledForm";
|
||||
import CenterLayout from "@/layouts/CenterLayout";
|
||||
import DashboardLayouts from "@/layouts/dashboardLayouts";
|
||||
import useUser from "@/lib/app/hooks/useUser";
|
||||
import {Box, Container, Grid, Paper, Stack, TextField, Typography,} from "@mui/material";
|
||||
import * as Yup from "yup";
|
||||
@@ -54,169 +53,167 @@ const DashboardEditProfile = () => {
|
||||
const validationSchema = Yup.object().shape({});
|
||||
|
||||
return (
|
||||
<DashboardLayouts>
|
||||
<CenterLayout>
|
||||
<Container maxWidth="sm">
|
||||
<Formik
|
||||
initialValues={initialValues}
|
||||
onSubmit={handleSubmit}
|
||||
validationSchema={validationSchema}
|
||||
>
|
||||
{(props) => (
|
||||
<StyledForm
|
||||
onSubmit={(e) => {
|
||||
e.preventDefault();
|
||||
props.handleSubmit();
|
||||
}}
|
||||
>
|
||||
<Paper elevation={0}>
|
||||
<Stack spacing={3} sx={{p: 5}} component="div">
|
||||
<Typography margin={2} variant="h4" textAlign="center">
|
||||
{t("UpdateProfile.typography_edit_profile")}
|
||||
</Typography>
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
}}
|
||||
>
|
||||
<AvatarUpload
|
||||
user={user}
|
||||
setFieldValue={props.setFieldValue}
|
||||
valueAvatar="expert_avatar"
|
||||
changeFlag="change_avatar"
|
||||
<CenterLayout>
|
||||
<Container maxWidth="sm">
|
||||
<Formik
|
||||
initialValues={initialValues}
|
||||
onSubmit={handleSubmit}
|
||||
validationSchema={validationSchema}
|
||||
>
|
||||
{(props) => (
|
||||
<StyledForm
|
||||
onSubmit={(e) => {
|
||||
e.preventDefault();
|
||||
props.handleSubmit();
|
||||
}}
|
||||
>
|
||||
<Paper elevation={0}>
|
||||
<Stack spacing={3} sx={{p: 5}} component="div">
|
||||
<Typography margin={2} variant="h4" textAlign="center">
|
||||
{t("UpdateProfile.typography_edit_profile")}
|
||||
</Typography>
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
}}
|
||||
>
|
||||
<AvatarUpload
|
||||
user={user}
|
||||
setFieldValue={props.setFieldValue}
|
||||
valueAvatar="expert_avatar"
|
||||
changeFlag="change_avatar"
|
||||
/>
|
||||
</Box>
|
||||
<Grid container spacing={2} sx={{pb: 2}}>
|
||||
<Grid item xs={12} sm={6}>
|
||||
<Field
|
||||
as={TextField}
|
||||
name="username"
|
||||
label={t("UpdateProfile.text_field_username")}
|
||||
variant="outlined"
|
||||
margin="normal"
|
||||
size="small"
|
||||
disabled={true}
|
||||
error={
|
||||
props.touched.username && props.errors.username
|
||||
? true
|
||||
: false
|
||||
}
|
||||
helperText={
|
||||
props.touched.username
|
||||
? props.errors.username
|
||||
: null
|
||||
}
|
||||
sx={{
|
||||
width: "100%",
|
||||
}}
|
||||
/>
|
||||
</Box>
|
||||
<Grid container spacing={2} sx={{pb: 2}}>
|
||||
<Grid item xs={12} sm={6}>
|
||||
<Field
|
||||
as={TextField}
|
||||
name="username"
|
||||
label={t("UpdateProfile.text_field_username")}
|
||||
variant="outlined"
|
||||
margin="normal"
|
||||
size="small"
|
||||
disabled={true}
|
||||
error={
|
||||
props.touched.username && props.errors.username
|
||||
? true
|
||||
: false
|
||||
}
|
||||
helperText={
|
||||
props.touched.username
|
||||
? props.errors.username
|
||||
: null
|
||||
}
|
||||
sx={{
|
||||
width: "100%",
|
||||
}}
|
||||
/>
|
||||
</Grid>
|
||||
<Grid item xs={12} sm={6}>
|
||||
<Field
|
||||
as={TextField}
|
||||
name="name"
|
||||
label={t("UpdateProfile.text_field_name")}
|
||||
variant="outlined"
|
||||
margin="normal"
|
||||
size="small"
|
||||
disabled={true}
|
||||
error={
|
||||
props.touched.name && props.errors.name
|
||||
? true
|
||||
: false
|
||||
}
|
||||
helperText={
|
||||
props.touched.name ? props.errors.name : null
|
||||
}
|
||||
sx={{
|
||||
width: "100%",
|
||||
}}
|
||||
/>
|
||||
</Grid>
|
||||
<Grid item xs={12} sm={6}>
|
||||
<Field
|
||||
as={TextField}
|
||||
name="email"
|
||||
label={t("UpdateProfile.text_field_email")}
|
||||
variant="outlined"
|
||||
margin="normal"
|
||||
size="small"
|
||||
disabled={true}
|
||||
error={
|
||||
props.touched.email && props.errors.email
|
||||
? true
|
||||
: false
|
||||
}
|
||||
helperText={
|
||||
props.touched.email ? props.errors.email : null
|
||||
}
|
||||
sx={{
|
||||
width: "100%",
|
||||
}}
|
||||
/>
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={12} sm={6}>
|
||||
<Field
|
||||
as={TextField}
|
||||
name="province_name"
|
||||
label={t("UpdateProfile.text_field_province_name")}
|
||||
variant="outlined"
|
||||
margin="normal"
|
||||
size="small"
|
||||
disabled={true}
|
||||
error={
|
||||
props.touched.province_name &&
|
||||
props.errors.province_name
|
||||
? true
|
||||
: false
|
||||
}
|
||||
helperText={
|
||||
props.touched.province_name
|
||||
? props.errors.province_name
|
||||
: null
|
||||
}
|
||||
sx={{
|
||||
width: "100%",
|
||||
}}
|
||||
/>
|
||||
</Grid>
|
||||
<Grid item xs={12} sm={6}>
|
||||
<Field
|
||||
as={TextField}
|
||||
name="position"
|
||||
label={t("UpdateProfile.text_field_position")}
|
||||
variant="outlined"
|
||||
margin="normal"
|
||||
size="small"
|
||||
disabled={true}
|
||||
error={
|
||||
props.touched.position && props.errors.position
|
||||
? true
|
||||
: false
|
||||
}
|
||||
helperText={
|
||||
props.touched.position
|
||||
? props.errors.position
|
||||
: null
|
||||
}
|
||||
sx={{
|
||||
width: "100%",
|
||||
}}
|
||||
/>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Stack>
|
||||
</Paper>
|
||||
</StyledForm>
|
||||
)}
|
||||
</Formik>
|
||||
</Container>
|
||||
</CenterLayout>
|
||||
</DashboardLayouts>
|
||||
<Grid item xs={12} sm={6}>
|
||||
<Field
|
||||
as={TextField}
|
||||
name="name"
|
||||
label={t("UpdateProfile.text_field_name")}
|
||||
variant="outlined"
|
||||
margin="normal"
|
||||
size="small"
|
||||
disabled={true}
|
||||
error={
|
||||
props.touched.name && props.errors.name
|
||||
? true
|
||||
: false
|
||||
}
|
||||
helperText={
|
||||
props.touched.name ? props.errors.name : null
|
||||
}
|
||||
sx={{
|
||||
width: "100%",
|
||||
}}
|
||||
/>
|
||||
</Grid>
|
||||
<Grid item xs={12} sm={6}>
|
||||
<Field
|
||||
as={TextField}
|
||||
name="email"
|
||||
label={t("UpdateProfile.text_field_email")}
|
||||
variant="outlined"
|
||||
margin="normal"
|
||||
size="small"
|
||||
disabled={true}
|
||||
error={
|
||||
props.touched.email && props.errors.email
|
||||
? true
|
||||
: false
|
||||
}
|
||||
helperText={
|
||||
props.touched.email ? props.errors.email : null
|
||||
}
|
||||
sx={{
|
||||
width: "100%",
|
||||
}}
|
||||
/>
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={12} sm={6}>
|
||||
<Field
|
||||
as={TextField}
|
||||
name="province_name"
|
||||
label={t("UpdateProfile.text_field_province_name")}
|
||||
variant="outlined"
|
||||
margin="normal"
|
||||
size="small"
|
||||
disabled={true}
|
||||
error={
|
||||
props.touched.province_name &&
|
||||
props.errors.province_name
|
||||
? true
|
||||
: false
|
||||
}
|
||||
helperText={
|
||||
props.touched.province_name
|
||||
? props.errors.province_name
|
||||
: null
|
||||
}
|
||||
sx={{
|
||||
width: "100%",
|
||||
}}
|
||||
/>
|
||||
</Grid>
|
||||
<Grid item xs={12} sm={6}>
|
||||
<Field
|
||||
as={TextField}
|
||||
name="position"
|
||||
label={t("UpdateProfile.text_field_position")}
|
||||
variant="outlined"
|
||||
margin="normal"
|
||||
size="small"
|
||||
disabled={true}
|
||||
error={
|
||||
props.touched.position && props.errors.position
|
||||
? true
|
||||
: false
|
||||
}
|
||||
helperText={
|
||||
props.touched.position
|
||||
? props.errors.position
|
||||
: null
|
||||
}
|
||||
sx={{
|
||||
width: "100%",
|
||||
}}
|
||||
/>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Stack>
|
||||
</Paper>
|
||||
</StyledForm>
|
||||
)}
|
||||
</Formik>
|
||||
</Container>
|
||||
</CenterLayout>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@@ -8,7 +8,7 @@ import {useState} from "react";
|
||||
import useRequest from "@/lib/app/hooks/useRequest";
|
||||
|
||||
|
||||
const ChnagePasswordContent = ({rowId, fetchUrl, mutate, setOpenChangePasswordDialog}) => {
|
||||
const ChnagePasswordContent = ({rowId, mutate, setOpenChangePasswordDialog}) => {
|
||||
const t = useTranslations();
|
||||
const requestServer = useRequest();
|
||||
const [showPassword, setShowPassword] = useState(false);
|
||||
@@ -40,7 +40,8 @@ const ChnagePasswordContent = ({rowId, fetchUrl, mutate, setOpenChangePasswordDi
|
||||
data: formData
|
||||
})
|
||||
.then((response) => {
|
||||
mutate(fetchUrl)
|
||||
setOpenChangePasswordDialog(false)
|
||||
mutate()
|
||||
}).catch(() => {
|
||||
}).finally(() => {
|
||||
setSubmitting(false);
|
||||
@@ -81,7 +82,7 @@ const ChnagePasswordContent = ({rowId, fetchUrl, mutate, setOpenChangePasswordDi
|
||||
{t("ExpertMangement.button-cancel")}
|
||||
</Button>
|
||||
<Button onClick={formik.handleSubmit} variant="contained" color="primary"
|
||||
disabled={formik.isSubmitting}>
|
||||
disabled={formik.isSubmitting || !formik.dirty || !formik.isValid}>
|
||||
{t("ExpertMangement.button-confirm")}
|
||||
</Button>
|
||||
</DialogActions>
|
||||
|
||||
@@ -5,7 +5,7 @@ import {useState} from "react";
|
||||
import ChangePasswordContent from "./ChangePasswordContent";
|
||||
|
||||
|
||||
const ChangePassword = ({rowId, fetchUrl, mutate}) => {
|
||||
const ChangePassword = ({rowId, mutate}) => {
|
||||
const t = useTranslations();
|
||||
const [openChnagePasswordDialog, setOpenChangePasswordDialog] = useState(false);
|
||||
|
||||
@@ -24,7 +24,7 @@ const ChangePassword = ({rowId, fetchUrl, mutate}) => {
|
||||
<Dialog fullWidth maxWidth={'xs'} open={openChnagePasswordDialog}
|
||||
PaperProps={{sx: {boxShadow: 'rgba(60, 64, 67, 0.3) 0px 1px 16px 0px, rgba(60, 64, 67, 0.15) 0px 1px 10px 0px'}}}>
|
||||
<DialogTitle>{t("ExpertMangement.change_password")}</DialogTitle>
|
||||
<ChangePasswordContent rowId={rowId} mutate={mutate} fetchUrl={fetchUrl}
|
||||
<ChangePasswordContent rowId={rowId} mutate={mutate}
|
||||
setOpenChangePasswordDialog={setOpenChangePasswordDialog}/>
|
||||
</Dialog>
|
||||
</>
|
||||
|
||||
@@ -25,7 +25,7 @@ import useProvince from "@/lib/app/hooks/useProvince";
|
||||
import useRole from "@/lib/app/hooks/useRole";
|
||||
import {Visibility, VisibilityOff} from "@mui/icons-material";
|
||||
|
||||
const CreateContent = ({setOpenCreateDialog, mutate, fetchUrl}) => {
|
||||
const CreateContent = ({setOpenCreateDialog, mutate}) => {
|
||||
const t = useTranslations();
|
||||
const requestServer = useRequest()
|
||||
const [cityList, setCityList] = useState([]);
|
||||
@@ -105,8 +105,8 @@ const CreateContent = ({setOpenCreateDialog, mutate, fetchUrl}) => {
|
||||
|
||||
requestServer(`${CREATE_EXPERT_MANAGEMENT}`, 'post', {auth: true, data: formData})
|
||||
.then((response) => {
|
||||
mutate(fetchUrl)
|
||||
setOpenCreateDialog(false)
|
||||
mutate()
|
||||
}).catch(() => {
|
||||
}).finally(() => {
|
||||
setSubmitting(false);
|
||||
@@ -374,7 +374,7 @@ const CreateContent = ({setOpenCreateDialog, mutate, fetchUrl}) => {
|
||||
{t("ExpertMangement.button-cancel")}
|
||||
</Button>
|
||||
<Button onClick={formik.handleSubmit} variant="contained" color="primary"
|
||||
disabled={formik.isSubmitting}>
|
||||
disabled={formik.isSubmitting || !formik.dirty || !formik.isValid}>
|
||||
{t("ExpertMangement.button-confirm")}
|
||||
</Button>
|
||||
</DialogActions>
|
||||
|
||||
@@ -4,7 +4,7 @@ import DataSaverOnIcon from "@mui/icons-material/DataSaverOn";
|
||||
import {useState} from "react";
|
||||
import CreateContent from "./CreateContent";
|
||||
|
||||
const Create = ({mutate, fetchUrl}) => {
|
||||
const Create = ({mutate}) => {
|
||||
const t = useTranslations();
|
||||
const [openCreateDialog, setOpenCreateDialog] = useState(false);
|
||||
|
||||
@@ -30,7 +30,7 @@ const Create = ({mutate, fetchUrl}) => {
|
||||
TransitionProps={{unmountOnExit: true}}
|
||||
PaperProps={{sx: {boxShadow: 'rgba(60, 64, 67, 0.3) 0px 1px 16px 0px, rgba(60, 64, 67, 0.15) 0px 1px 10px 0px'}}}>
|
||||
<DialogTitle>{t("ExpertMangement.create")}</DialogTitle>
|
||||
<CreateContent setOpenCreateDialog={setOpenCreateDialog} mutate={mutate} fetchUrl={fetchUrl}/>
|
||||
<CreateContent setOpenCreateDialog={setOpenCreateDialog} mutate={mutate}/>
|
||||
</Dialog>
|
||||
</>
|
||||
);
|
||||
|
||||
@@ -14,7 +14,7 @@ import {DELETE_EXPERT_MANAGEMENT} from "@/core/data/apiRoutes";
|
||||
import useRequest from "@/lib/app/hooks/useRequest";
|
||||
import {useTranslations} from "next-intl";
|
||||
|
||||
const Delete = ({rowId, fetchUrl, mutate}) => {
|
||||
const Delete = ({rowId, mutate}) => {
|
||||
const t = useTranslations();
|
||||
const requestServer = useRequest({auth: true});
|
||||
const [openDeleteDialog, setOpenDeleteDialog] = useState(false);
|
||||
@@ -24,7 +24,7 @@ const Delete = ({rowId, fetchUrl, mutate}) => {
|
||||
setIsSubmitting(true)
|
||||
requestServer(`${DELETE_EXPERT_MANAGEMENT}/${rowId}`, 'post')
|
||||
.then((response) => {
|
||||
mutate(fetchUrl)
|
||||
mutate()
|
||||
})
|
||||
.catch(() => {
|
||||
})
|
||||
|
||||
@@ -22,7 +22,7 @@ import useRequest from "@/lib/app/hooks/useRequest";
|
||||
import useProvince from "@/lib/app/hooks/useProvince";
|
||||
import useRole from "@/lib/app/hooks/useRole";
|
||||
|
||||
const UpdateContent = ({row, fetchUrl, mutate, setOpenUpdateDialog}) => {
|
||||
const UpdateContent = ({row, mutate, setOpenUpdateDialog}) => {
|
||||
const t = useTranslations();
|
||||
const requestServer = useRequest();
|
||||
const [cityList, setCityList] = useState([]);
|
||||
@@ -89,7 +89,8 @@ const UpdateContent = ({row, fetchUrl, mutate, setOpenUpdateDialog}) => {
|
||||
|
||||
requestServer(`${UPDATE_EXPERT_MANAGEMENT}/${row.original.id}`, 'post', {auth: true, data: formData})
|
||||
.then((response) => {
|
||||
mutate(fetchUrl)
|
||||
setOpenUpdateDialog(false);
|
||||
mutate()
|
||||
}).catch(() => {
|
||||
}).finally(() => {
|
||||
setSubmitting(false);
|
||||
@@ -332,7 +333,7 @@ const UpdateContent = ({row, fetchUrl, mutate, setOpenUpdateDialog}) => {
|
||||
{t("ExpertMangement.button-cancel")}
|
||||
</Button>
|
||||
<Button onClick={formik.handleSubmit} variant="contained" color="primary"
|
||||
disabled={formik.isSubmitting}>
|
||||
disabled={formik.isSubmitting || !formik.dirty || !formik.isValid}>
|
||||
{t("ExpertMangement.button-confirm")}
|
||||
</Button>
|
||||
</DialogActions>
|
||||
|
||||
@@ -5,7 +5,7 @@ import {useState} from "react";
|
||||
import UpdateContent from "./UpdateContent";
|
||||
|
||||
|
||||
const Update = ({row, fetchUrl, mutate}) => {
|
||||
const Update = ({row, mutate}) => {
|
||||
const t = useTranslations();
|
||||
const [openUpdateDialog, setOpenUpdateDialog] = useState(false);
|
||||
|
||||
@@ -24,7 +24,7 @@ const Update = ({row, fetchUrl, mutate}) => {
|
||||
<Dialog fullWidth maxWidth={'lg'} open={openUpdateDialog}
|
||||
PaperProps={{sx: {boxShadow: 'rgba(60, 64, 67, 0.3) 0px 1px 16px 0px, rgba(60, 64, 67, 0.15) 0px 1px 10px 0px'}}}>
|
||||
<DialogTitle>{t("ExpertMangement.update")}</DialogTitle>
|
||||
<UpdateContent row={row} mutate={mutate} fetchUrl={fetchUrl} setOpenUpdateDialog={setOpenUpdateDialog}/>
|
||||
<UpdateContent row={row} mutate={mutate} setOpenUpdateDialog={setOpenUpdateDialog}/>
|
||||
</Dialog>
|
||||
</>
|
||||
);
|
||||
|
||||
@@ -3,23 +3,20 @@ import Update from "./Form/UpdateForm"
|
||||
import Delete from "./Form/DeleteForm";
|
||||
import ChangePassword from "./Form/ChangePassword";
|
||||
|
||||
const TableRowActions = ({row, mutate, fetchUrl}) => {
|
||||
const TableRowActions = ({row, mutate}) => {
|
||||
return (
|
||||
<Box sx={{display: "flex", flexWrap: "nowrap", gap: "8px"}}>
|
||||
<Update
|
||||
row={row}
|
||||
mutate={mutate}
|
||||
fetchUrl={fetchUrl}
|
||||
/>
|
||||
<ChangePassword
|
||||
rowId={row.getValue("id")}
|
||||
mutate={mutate}
|
||||
fetchUrl={fetchUrl}
|
||||
/>
|
||||
<Delete
|
||||
rowId={row.getValue("id")}
|
||||
mutate={mutate}
|
||||
fetchUrl={fetchUrl}
|
||||
/>
|
||||
|
||||
</Box>
|
||||
|
||||
@@ -1,4 +1,3 @@
|
||||
import DashboardLayouts from "@/layouts/dashboardLayouts";
|
||||
import {Box, Typography} from "@mui/material";
|
||||
import {useMemo} from "react";
|
||||
import {GET_EXPERT_MANAGEMENT} from "@/core/data/apiRoutes";
|
||||
@@ -138,32 +137,31 @@ function DashboardExpertManagementComponent() {
|
||||
],
|
||||
[]
|
||||
);
|
||||
|
||||
return (
|
||||
<DashboardLayouts>
|
||||
<Box sx={{px: 3}}>
|
||||
<DataTable
|
||||
tableUrl={GET_EXPERT_MANAGEMENT}
|
||||
columns={columns}
|
||||
selectableRow={false}
|
||||
CustomToolbar={TableToolbar}
|
||||
sorting={[{
|
||||
id: 'id', desc: true
|
||||
}]}
|
||||
enableCustomToolbar={true}
|
||||
enableLastUpdate={true}
|
||||
enablePinning={true}
|
||||
enableDensityToggle={false}
|
||||
initialState={{density: 'compact'}} //compact (small) //comfortable (medium) //spacious (large)
|
||||
enableColumnFilters={true}
|
||||
enableHiding={true}
|
||||
enableFullScreenToggle={false}
|
||||
enableGlobalFilter={false}
|
||||
enableColumnResizing={false} // if you want true this you should change renderRowActions props ** see https://www.material-react-table.com/docs/guides/row-actions
|
||||
enableRowActions={true}
|
||||
TableRowAction={TableRowActions}
|
||||
/>
|
||||
</Box>
|
||||
</DashboardLayouts>
|
||||
<Box sx={{px: 3}}>
|
||||
<DataTable
|
||||
tableUrl={GET_EXPERT_MANAGEMENT}
|
||||
columns={columns}
|
||||
selectableRow={false}
|
||||
CustomToolbar={TableToolbar}
|
||||
sorting={[{
|
||||
id: 'id', desc: true
|
||||
}]}
|
||||
enableCustomToolbar={true}
|
||||
enableLastUpdate={true}
|
||||
enablePinning={true}
|
||||
enableDensityToggle={false}
|
||||
initialState={{density: 'compact'}} //compact (small) //comfortable (medium) //spacious (large)
|
||||
enableColumnFilters={true}
|
||||
enableHiding={true}
|
||||
enableFullScreenToggle={false}
|
||||
enableGlobalFilter={false}
|
||||
enableColumnResizing={false} // if you want true this you should change renderRowActions props ** see https://www.material-react-table.com/docs/guides/row-actions
|
||||
enableRowActions={true}
|
||||
TableRowAction={TableRowActions}
|
||||
/>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
@@ -1,7 +1,5 @@
|
||||
import DashboardLayouts from "@/layouts/dashboardLayouts";
|
||||
|
||||
const DashboardFirstComponent = () => {
|
||||
return <DashboardLayouts></DashboardLayouts>;
|
||||
return <></>
|
||||
};
|
||||
|
||||
export default DashboardFirstComponent;
|
||||
|
||||
@@ -1,141 +0,0 @@
|
||||
import {useTranslations} from "next-intl";
|
||||
import {useState} from "react";
|
||||
import {
|
||||
Button,
|
||||
Dialog,
|
||||
DialogActions,
|
||||
DialogContent,
|
||||
DialogTitle,
|
||||
IconButton,
|
||||
Stack,
|
||||
TextField,
|
||||
Tooltip,
|
||||
Typography
|
||||
} from "@mui/material";
|
||||
import ThumbUpAltIcon from "@mui/icons-material/ThumbUpAlt";
|
||||
import UploadSystem from "@/core/components/UploadSystem";
|
||||
import {useFormik} from "formik";
|
||||
import UploadFileNotification from "@/core/components/notifications/UploadFileNotification";
|
||||
import {CONFIRM_INSPECTOR_EXPERT} from "@/core/data/apiRoutes";
|
||||
import useRequest from "@/lib/app/hooks/useRequest";
|
||||
import useNotification from "@/lib/app/hooks/useNotification";
|
||||
|
||||
|
||||
const Confirm = ({rowId, fetchUrl, mutate}) => {
|
||||
const t = useTranslations();
|
||||
const [selectedImage, setSelectedImage] = useState("");
|
||||
const [fileType, setfileType] = useState(null);
|
||||
const [fileName, setfileName] = useState(null);
|
||||
const [showAddIcon, setShowAddIcon] = useState(true);
|
||||
const [openConfirmDialog, setOpenConfirmDialog] = useState(false);
|
||||
const requestServer = useRequest({auth: true})
|
||||
const {update_notification} = useNotification()
|
||||
|
||||
const formik = useFormik({
|
||||
initialValues: {
|
||||
description: "",
|
||||
confirm_img: null
|
||||
},
|
||||
onSubmit: (values, {setSubmitting}) => {
|
||||
const formData = new FormData();
|
||||
if (values.description != "") formData.append("description", values.description);
|
||||
if (values.confirm_img != null) formData.append("attachment", values.confirm_img);
|
||||
|
||||
requestServer(`${CONFIRM_INSPECTOR_EXPERT}/${rowId}`, 'post', {
|
||||
data: formData,
|
||||
}).then((response) => {
|
||||
mutate(fetchUrl)
|
||||
update_notification()
|
||||
}).catch(() => {
|
||||
}).finally(() => {
|
||||
setSubmitting(false);
|
||||
});
|
||||
},
|
||||
});
|
||||
|
||||
const handleDescriptionChange = (event) => {
|
||||
formik.setFieldValue("description", event.target.value)
|
||||
};
|
||||
const handleUploadChange = (event) => {
|
||||
const uploadedFile = event.target?.files?.[0];
|
||||
if (uploadedFile) {
|
||||
const maxFileSize = 2 * 1024 * 1024;
|
||||
if (uploadedFile.size > maxFileSize) {
|
||||
UploadFileNotification(t);
|
||||
event.target.value = "";
|
||||
return;
|
||||
}
|
||||
|
||||
const fileType = event.target?.files?.[0].type;
|
||||
const fileName = event.target?.files?.[0].name;
|
||||
setSelectedImage(URL.createObjectURL(uploadedFile));
|
||||
setfileType(fileType);
|
||||
setfileName(fileName);
|
||||
formik.setFieldValue("confirm_img", uploadedFile);
|
||||
setShowAddIcon(false);
|
||||
}
|
||||
};
|
||||
return (
|
||||
<>
|
||||
<Tooltip title={t("ConfirmDialog.confirm")}>
|
||||
<IconButton
|
||||
color="primary"
|
||||
onClick={() => {
|
||||
setOpenConfirmDialog(true)
|
||||
}}
|
||||
>
|
||||
<ThumbUpAltIcon/>
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
<Dialog fullWidth open={openConfirmDialog}
|
||||
PaperProps={{sx: {boxShadow: 'rgba(60, 64, 67, 0.3) 0px 1px 16px 0px, rgba(60, 64, 67, 0.15) 0px 1px 10px 0px'}}}>
|
||||
<DialogTitle>{t("ConfirmDialog.confirm")}</DialogTitle>
|
||||
<DialogContent>
|
||||
<Stack spacing={2}>
|
||||
<Stack>
|
||||
<TextField
|
||||
name="description"
|
||||
multiline
|
||||
rows={8}
|
||||
label={<>
|
||||
<span>{t("ConfirmDialog.description")}</span><small>{t("ConfirmDialog.optional")}</small></>}
|
||||
value={formik.values.description}
|
||||
onChange={handleDescriptionChange}
|
||||
fullWidth
|
||||
variant="outlined"
|
||||
sx={{mt: 1}}
|
||||
/>
|
||||
</Stack>
|
||||
<Stack>
|
||||
<Typography>{t("UploadSystem.upload_file")}{t("UploadSystem.optional")}</Typography>
|
||||
<UploadSystem
|
||||
selectedImage={selectedImage}
|
||||
handleUploadChange={handleUploadChange} // Pass the updated function directly
|
||||
setselectedImage={setSelectedImage}
|
||||
setFieldValue={formik.setFieldValue} // Remove props.setFieldValue, use formik.setFieldValue
|
||||
fieldname="confirm_img"
|
||||
fileType={fileType}
|
||||
fileName={fileName}
|
||||
imageAlt={t("app_name")}
|
||||
imageSize={[250, 150]}
|
||||
setShowAddIcon={setShowAddIcon}
|
||||
showAddIcon={showAddIcon}
|
||||
/>
|
||||
</Stack>
|
||||
</Stack>
|
||||
</DialogContent>
|
||||
<DialogActions>
|
||||
<Button onClick={() => setOpenConfirmDialog(false)} variant="outlined" color="secondary"
|
||||
disabled={formik.isSubmitting} autoFocus>
|
||||
{t("ConfirmDialog.button-cancel")}
|
||||
</Button>
|
||||
<Button onClick={formik.handleSubmit} variant="contained" color="primary"
|
||||
disabled={formik.isSubmitting}>
|
||||
{t("ConfirmDialog.button-confirm")}
|
||||
</Button>
|
||||
</DialogActions>
|
||||
</Dialog>
|
||||
</>
|
||||
);
|
||||
};
|
||||
export default Confirm;
|
||||
@@ -0,0 +1,117 @@
|
||||
import UploadSystem from "@/core/components/UploadSystem";
|
||||
import useNotification from "@/lib/app/hooks/useNotification";
|
||||
import useRequest from "@/lib/app/hooks/useRequest";
|
||||
import {Button, DialogActions, DialogContent, Stack, TextField, Typography} from "@mui/material"
|
||||
import {useFormik} from "formik";
|
||||
import {useTranslations} from "next-intl";
|
||||
import {CONFIRM_INSPECTOR_EXPERT} from "@/core/data/apiRoutes";
|
||||
import UploadFileNotification from "@/core/components/notifications/UploadFileNotification";
|
||||
import {useState} from "react";
|
||||
|
||||
const ConfirmContent = ({rowId, mutate, setOpenConfirmDialog}) => {
|
||||
const t = useTranslations();
|
||||
const [selectedImage, setSelectedImage] = useState("");
|
||||
const [fileType, setfileType] = useState(null);
|
||||
const [fileName, setfileName] = useState(null);
|
||||
const [showAddIcon, setShowAddIcon] = useState(true);
|
||||
const requestServer = useRequest({auth: true})
|
||||
const {update_notification} = useNotification()
|
||||
|
||||
const formik = useFormik({
|
||||
initialValues: {
|
||||
description: "",
|
||||
confirm_img: null
|
||||
},
|
||||
onSubmit: (values, {setSubmitting}) => {
|
||||
const formData = new FormData();
|
||||
if (values.description != "") formData.append("description", values.description);
|
||||
if (values.confirm_img != null) formData.append("attachment", values.confirm_img);
|
||||
|
||||
requestServer(`${CONFIRM_INSPECTOR_EXPERT}/${rowId}`, 'post', {
|
||||
data: formData,
|
||||
}).then((response) => {
|
||||
setOpenConfirmDialog(false)
|
||||
mutate()
|
||||
update_notification()
|
||||
}).catch(() => {
|
||||
}).finally(() => {
|
||||
setSubmitting(false);
|
||||
});
|
||||
},
|
||||
});
|
||||
|
||||
const handleDescriptionChange = (event) => {
|
||||
formik.setFieldValue("description", event.target.value)
|
||||
};
|
||||
|
||||
const handleUploadChange = (event) => {
|
||||
const uploadedFile = event.target?.files?.[0];
|
||||
if (uploadedFile) {
|
||||
const maxFileSize = 2 * 1024 * 1024;
|
||||
if (uploadedFile.size > maxFileSize) {
|
||||
UploadFileNotification(t);
|
||||
event.target.value = "";
|
||||
return;
|
||||
}
|
||||
|
||||
const fileType = event.target?.files?.[0].type;
|
||||
const fileName = event.target?.files?.[0].name;
|
||||
setSelectedImage(URL.createObjectURL(uploadedFile));
|
||||
setfileType(fileType);
|
||||
setfileName(fileName);
|
||||
formik.setFieldValue("confirm_img", uploadedFile);
|
||||
setShowAddIcon(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<DialogContent>
|
||||
<Stack spacing={2}>
|
||||
<Stack>
|
||||
<TextField
|
||||
name="description"
|
||||
multiline
|
||||
rows={8}
|
||||
label={<>
|
||||
<span>{t("ConfirmDialog.description")}</span><small>{t("ConfirmDialog.optional")}</small></>}
|
||||
value={formik.values.description}
|
||||
onChange={handleDescriptionChange}
|
||||
fullWidth
|
||||
variant="outlined"
|
||||
sx={{mt: 1}}
|
||||
/>
|
||||
</Stack>
|
||||
<Stack>
|
||||
<Typography>{t("UploadSystem.upload_file")}{t("UploadSystem.optional")}</Typography>
|
||||
<UploadSystem
|
||||
selectedImage={selectedImage}
|
||||
handleUploadChange={handleUploadChange} // Pass the updated function directly
|
||||
setselectedImage={setSelectedImage}
|
||||
setFieldValue={formik.setFieldValue} // Remove props.setFieldValue, use formik.setFieldValue
|
||||
fieldname="confirm_img"
|
||||
fileType={fileType}
|
||||
fileName={fileName}
|
||||
imageAlt={t("app_name")}
|
||||
imageSize={[250, 150]}
|
||||
setShowAddIcon={setShowAddIcon}
|
||||
showAddIcon={showAddIcon}
|
||||
/>
|
||||
</Stack>
|
||||
</Stack>
|
||||
</DialogContent>
|
||||
<DialogActions>
|
||||
<Button onClick={() => setOpenConfirmDialog(false)} variant="outlined" color="secondary"
|
||||
disabled={formik.isSubmitting} autoFocus>
|
||||
{t("ConfirmDialog.button-cancel")}
|
||||
</Button>
|
||||
<Button onClick={formik.handleSubmit} variant="contained" color="primary"
|
||||
disabled={formik.isSubmitting}>
|
||||
{t("ConfirmDialog.button-confirm")}
|
||||
</Button>
|
||||
</DialogActions>
|
||||
</>
|
||||
)
|
||||
|
||||
}
|
||||
export default ConfirmContent
|
||||
@@ -0,0 +1,31 @@
|
||||
import {Dialog, DialogTitle, IconButton, Tooltip} from "@mui/material";
|
||||
import {useTranslations} from "next-intl";
|
||||
import ThumbUpAltIcon from "@mui/icons-material/ThumbUpAlt";
|
||||
import {useState} from "react";
|
||||
import ConfirmContent from "./ConfirmContent";
|
||||
|
||||
const Confirm = ({rowId, mutate}) => {
|
||||
const t = useTranslations();
|
||||
const [openConfirmDialog, setOpenConfirmDialog] = useState(false);
|
||||
return (
|
||||
<>
|
||||
<Tooltip title={t("ConfirmDialog.confirm")}>
|
||||
<IconButton
|
||||
color="primary"
|
||||
onClick={() => {
|
||||
setOpenConfirmDialog(true)
|
||||
}}
|
||||
>
|
||||
<ThumbUpAltIcon/>
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
<Dialog fullWidth open={openConfirmDialog}
|
||||
PaperProps={{sx: {boxShadow: 'rgba(60, 64, 67, 0.3) 0px 1px 16px 0px, rgba(60, 64, 67, 0.15) 0px 1px 10px 0px'}}}>
|
||||
<DialogTitle>{t("ConfirmDialog.confirm")}</DialogTitle>
|
||||
<ConfirmContent mutate={mutate} rowId={rowId} setOpenConfirmDialog={setOpenConfirmDialog}/>
|
||||
</Dialog>
|
||||
</>
|
||||
)
|
||||
|
||||
}
|
||||
export default Confirm;
|
||||
@@ -1,148 +0,0 @@
|
||||
import {REJECT_INSPECTOR_EXPERT} from "@/core/data/apiRoutes";
|
||||
import {
|
||||
Button,
|
||||
Dialog,
|
||||
DialogActions,
|
||||
DialogContent,
|
||||
DialogTitle,
|
||||
IconButton,
|
||||
Stack,
|
||||
TextField,
|
||||
Tooltip,
|
||||
Typography,
|
||||
} from "@mui/material";
|
||||
import {useTranslations} from "next-intl";
|
||||
import {useFormik} from "formik";
|
||||
import * as Yup from "yup";
|
||||
import {useState} from "react";
|
||||
import UploadSystem from "@/core/components/UploadSystem";
|
||||
import UploadFileNotification from "@/core/components/notifications/UploadFileNotification";
|
||||
import useDirection from "@/lib/app/hooks/useDirection";
|
||||
import ThumbDownIcon from "@mui/icons-material/ThumbDown";
|
||||
import useRequest from "@/lib/app/hooks/useRequest";
|
||||
import useNotification from "@/lib/app/hooks/useNotification";
|
||||
|
||||
|
||||
const Reject = ({rowId, fetchUrl, mutate}) => {
|
||||
const [selectedImage, setSelectedImage] = useState("");
|
||||
const [fileType, setfileType] = useState(null);
|
||||
const [fileName, setfileName] = useState(null);
|
||||
const [showAddIcon, setShowAddIcon] = useState(true);
|
||||
const t = useTranslations();
|
||||
const {directionApp} = useDirection();
|
||||
const [openRejectDialog, setOpenRejectDialog] = useState(false);
|
||||
const requestServer = useRequest({auth: true})
|
||||
const {update_notification} = useNotification()
|
||||
|
||||
const validationSchema = Yup.object().shape({
|
||||
description: Yup.string().required(t("RejectDialog.description_error")),
|
||||
});
|
||||
|
||||
const formik = useFormik({
|
||||
initialValues: {
|
||||
description: "",
|
||||
reject_img: null
|
||||
},
|
||||
validationSchema,
|
||||
onSubmit: (values, {setSubmitting}) => {
|
||||
const formData = new FormData();
|
||||
formData.append("description", values.description);
|
||||
if (values.reject_img != null) formData.append("attachment", values.reject_img);
|
||||
|
||||
requestServer(`${REJECT_INSPECTOR_EXPERT}/${rowId}`, 'post', {
|
||||
data: formData,
|
||||
}).then((response) => {
|
||||
mutate(fetchUrl)
|
||||
update_notification()
|
||||
}).catch(() => {
|
||||
}).finally(() => {
|
||||
setSubmitting(false);
|
||||
});
|
||||
},
|
||||
});
|
||||
|
||||
const handleDescriptionChange = (event) => {
|
||||
formik.setFieldValue("description", event.target.value);
|
||||
formik.handleChange(event);
|
||||
};
|
||||
const handleUploadChange = (event) => {
|
||||
const uploadedFile = event.target?.files?.[0];
|
||||
if (uploadedFile) {
|
||||
const maxFileSize = 2 * 1024 * 1024;
|
||||
if (uploadedFile.size > maxFileSize) {
|
||||
UploadFileNotification(t);
|
||||
event.target.value = "";
|
||||
return;
|
||||
}
|
||||
const fileType = event.target?.files?.[0].type;
|
||||
const fileName = event.target?.files?.[0].name;
|
||||
setSelectedImage(URL.createObjectURL(uploadedFile));
|
||||
setfileType(fileType);
|
||||
setfileName(fileName);
|
||||
formik.setFieldValue("reject_img", uploadedFile);
|
||||
setShowAddIcon(false);
|
||||
}
|
||||
};
|
||||
return (
|
||||
<>
|
||||
<Tooltip title={t("RejectDialog.reject")}>
|
||||
<IconButton color="primary" onClick={() => setOpenRejectDialog(true)}>
|
||||
<ThumbDownIcon/>
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
<Dialog fullWidth open={openRejectDialog}
|
||||
PaperProps={{sx: {boxShadow: 'rgba(60, 64, 67, 0.3) 0px 1px 16px 0px, rgba(60, 64, 67, 0.15) 0px 1px 10px 0px'}}}>
|
||||
<DialogTitle>{t("RejectDialog.reject")}</DialogTitle>
|
||||
<DialogContent>
|
||||
<Stack spacing={2}>
|
||||
<Stack>
|
||||
<TextField
|
||||
name="description"
|
||||
multiline
|
||||
rows={8}
|
||||
label={t("RejectDialog.description")}
|
||||
value={formik.values.description}
|
||||
onChange={handleDescriptionChange}
|
||||
onBlur={formik.handleBlur("description")}
|
||||
error={
|
||||
formik.touched.description && Boolean(formik.errors.description)
|
||||
}
|
||||
helperText={formik.touched.description && formik.errors.description}
|
||||
fullWidth
|
||||
variant="outlined"
|
||||
sx={{mt: 1}}
|
||||
/>
|
||||
</Stack>
|
||||
<Stack>
|
||||
<Typography>{t("UploadSystem.upload_file")}{t("UploadSystem.optional")}</Typography>
|
||||
<UploadSystem
|
||||
selectedImage={selectedImage}
|
||||
handleUploadChange={handleUploadChange} // Pass the updated function directly
|
||||
setselectedImage={setSelectedImage}
|
||||
setFieldValue={formik.setFieldValue} // Remove props.setFieldValue, use formik.setFieldValue
|
||||
fieldname="reject_img"
|
||||
fileType={fileType}
|
||||
fileName={fileName}
|
||||
imageAlt={t("app_name")}
|
||||
imageSize={[250 /*width*/, 150 /*height*/]}
|
||||
setShowAddIcon={setShowAddIcon}
|
||||
showAddIcon={showAddIcon}
|
||||
/>
|
||||
</Stack>
|
||||
</Stack>
|
||||
</DialogContent>
|
||||
<DialogActions>
|
||||
<Button onClick={() => setOpenRejectDialog(false)} variant="outlined" color="secondary"
|
||||
disabled={formik.isSubmitting} autoFocus>
|
||||
{t("RejectDialog.button-cancel")}
|
||||
</Button>
|
||||
<Button onClick={formik.handleSubmit} variant="contained" color="primary"
|
||||
disabled={formik.isSubmitting}>
|
||||
{t("RejectDialog.button-reject")}
|
||||
</Button>
|
||||
</DialogActions>
|
||||
</Dialog>
|
||||
</>
|
||||
);
|
||||
};
|
||||
export default Reject;
|
||||
@@ -0,0 +1,123 @@
|
||||
import UploadSystem from "@/core/components/UploadSystem"
|
||||
import useNotification from "@/lib/app/hooks/useNotification";
|
||||
import useRequest from "@/lib/app/hooks/useRequest";
|
||||
import {Button, DialogActions, DialogContent, Stack, TextField, Typography} from "@mui/material"
|
||||
import {useFormik} from "formik";
|
||||
import {useTranslations} from "next-intl";
|
||||
import {useState} from "react";
|
||||
import * as Yup from "yup";
|
||||
import {REJECT_INSPECTOR_EXPERT} from "@/core/data/apiRoutes";
|
||||
|
||||
const RejectContent = ({rowId, mutate, setOpenRejectDialog}) => {
|
||||
const [selectedImage, setSelectedImage] = useState("");
|
||||
const [fileType, setfileType] = useState(null);
|
||||
const [fileName, setfileName] = useState(null);
|
||||
const [showAddIcon, setShowAddIcon] = useState(true);
|
||||
const t = useTranslations();
|
||||
const requestServer = useRequest({auth: true})
|
||||
const {update_notification} = useNotification()
|
||||
|
||||
const validationSchema = Yup.object().shape({
|
||||
description: Yup.string().required(t("RejectDialog.description_error")),
|
||||
});
|
||||
|
||||
const formik = useFormik({
|
||||
initialValues: {
|
||||
description: "",
|
||||
reject_img: null
|
||||
},
|
||||
validationSchema,
|
||||
onSubmit: (values, {setSubmitting}) => {
|
||||
const formData = new FormData();
|
||||
formData.append("description", values.description);
|
||||
if (values.reject_img != null) formData.append("attachment", values.reject_img);
|
||||
|
||||
requestServer(`${REJECT_INSPECTOR_EXPERT}/${rowId}`, 'post', {
|
||||
data: formData,
|
||||
}).then((response) => {
|
||||
setOpenRejectDialog(false)
|
||||
mutate()
|
||||
update_notification()
|
||||
}).catch(() => {
|
||||
}).finally(() => {
|
||||
setSubmitting(false);
|
||||
});
|
||||
},
|
||||
});
|
||||
|
||||
const handleDescriptionChange = (event) => {
|
||||
formik.setFieldValue("description", event.target.value);
|
||||
formik.handleChange(event);
|
||||
};
|
||||
const handleUploadChange = (event) => {
|
||||
const uploadedFile = event.target?.files?.[0];
|
||||
if (uploadedFile) {
|
||||
const maxFileSize = 2 * 1024 * 1024;
|
||||
if (uploadedFile.size > maxFileSize) {
|
||||
UploadFileNotification(t);
|
||||
event.target.value = "";
|
||||
return;
|
||||
}
|
||||
const fileType = event.target?.files?.[0].type;
|
||||
const fileName = event.target?.files?.[0].name;
|
||||
setSelectedImage(URL.createObjectURL(uploadedFile));
|
||||
setfileType(fileType);
|
||||
setfileName(fileName);
|
||||
formik.setFieldValue("reject_img", uploadedFile);
|
||||
setShowAddIcon(false);
|
||||
}
|
||||
};
|
||||
return (
|
||||
<>
|
||||
<DialogContent>
|
||||
<Stack spacing={2}>
|
||||
<Stack>
|
||||
<TextField
|
||||
name="description"
|
||||
multiline
|
||||
rows={8}
|
||||
label={t("RejectDialog.description")}
|
||||
value={formik.values.description}
|
||||
onChange={handleDescriptionChange}
|
||||
onBlur={formik.handleBlur("description")}
|
||||
error={
|
||||
formik.touched.description && Boolean(formik.errors.description)
|
||||
}
|
||||
helperText={formik.touched.description && formik.errors.description}
|
||||
fullWidth
|
||||
variant="outlined"
|
||||
sx={{mt: 1}}
|
||||
/>
|
||||
</Stack>
|
||||
<Stack>
|
||||
<Typography>{t("UploadSystem.upload_file")}{t("UploadSystem.optional")}</Typography>
|
||||
<UploadSystem
|
||||
selectedImage={selectedImage}
|
||||
handleUploadChange={handleUploadChange} // Pass the updated function directly
|
||||
setselectedImage={setSelectedImage}
|
||||
setFieldValue={formik.setFieldValue} // Remove props.setFieldValue, use formik.setFieldValue
|
||||
fieldname="reject_img"
|
||||
fileType={fileType}
|
||||
fileName={fileName}
|
||||
imageAlt={t("app_name")}
|
||||
imageSize={[250 /*width*/, 150 /*height*/]}
|
||||
setShowAddIcon={setShowAddIcon}
|
||||
showAddIcon={showAddIcon}
|
||||
/>
|
||||
</Stack>
|
||||
</Stack>
|
||||
</DialogContent>
|
||||
<DialogActions>
|
||||
<Button onClick={() => setOpenRejectDialog(false)} variant="outlined" color="secondary"
|
||||
disabled={formik.isSubmitting} autoFocus>
|
||||
{t("RejectDialog.button-cancel")}
|
||||
</Button>
|
||||
<Button onClick={formik.handleSubmit} variant="contained" color="primary"
|
||||
disabled={formik.isSubmitting || !formik.dirty || !formik.isValid}>
|
||||
{t("RejectDialog.button-reject")}
|
||||
</Button>
|
||||
</DialogActions>
|
||||
</>
|
||||
)
|
||||
}
|
||||
export default RejectContent
|
||||
@@ -0,0 +1,25 @@
|
||||
import {Dialog, DialogTitle, IconButton, Tooltip} from "@mui/material"
|
||||
import {useTranslations} from "next-intl";
|
||||
import {useState} from "react";
|
||||
import RejectContent from "./RejectContent";
|
||||
import ThumbDownIcon from "@mui/icons-material/ThumbDown";
|
||||
|
||||
const Reject = ({rowId, mutate}) => {
|
||||
const t = useTranslations();
|
||||
const [openRejectDialog, setOpenRejectDialog] = useState(false);
|
||||
return (
|
||||
<>
|
||||
<Tooltip title={t("RejectDialog.reject")}>
|
||||
<IconButton color="primary" onClick={() => setOpenRejectDialog(true)}>
|
||||
<ThumbDownIcon/>
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
<Dialog fullWidth open={openRejectDialog}
|
||||
PaperProps={{sx: {boxShadow: 'rgba(60, 64, 67, 0.3) 0px 1px 16px 0px, rgba(60, 64, 67, 0.15) 0px 1px 10px 0px'}}}>
|
||||
<DialogTitle>{t("RejectDialog.reject")}</DialogTitle>
|
||||
<RejectContent mutate={mutate} rowId={rowId} setOpenRejectDialog={setOpenRejectDialog}/>
|
||||
</Dialog>
|
||||
</>
|
||||
)
|
||||
}
|
||||
export default Reject
|
||||
@@ -1,104 +0,0 @@
|
||||
import {REVISE_INSPECTOR_EXPERT} from "@/core/data/apiRoutes";
|
||||
import {
|
||||
Button,
|
||||
Dialog,
|
||||
DialogActions,
|
||||
DialogContent,
|
||||
DialogTitle,
|
||||
IconButton,
|
||||
Stack,
|
||||
TextField,
|
||||
Tooltip,
|
||||
} from "@mui/material";
|
||||
import {useTranslations} from "next-intl";
|
||||
import {useFormik} from "formik";
|
||||
import * as Yup from "yup";
|
||||
import {useState} from "react";
|
||||
import useRequest from "@/lib/app/hooks/useRequest";
|
||||
import ReplyIcon from '@mui/icons-material/Reply';
|
||||
import useNotification from "@/lib/app/hooks/useNotification";
|
||||
|
||||
|
||||
const Revise = ({rowId, fetchUrl, mutate}) => {
|
||||
const t = useTranslations();
|
||||
const [openRejectDialog, setOpenRejectDialog] = useState(false);
|
||||
const requestServer = useRequest({auth: true})
|
||||
const {update_notification} = useNotification()
|
||||
|
||||
const validationSchema = Yup.object().shape({
|
||||
description: Yup.string().required(t("ReviseDialog.description_error")),
|
||||
});
|
||||
|
||||
const formik = useFormik({
|
||||
initialValues: {
|
||||
description: "",
|
||||
},
|
||||
validationSchema,
|
||||
onSubmit: (values, {setSubmitting}) => {
|
||||
const formData = new FormData();
|
||||
formData.append("description", values.description);
|
||||
|
||||
requestServer(`${REVISE_INSPECTOR_EXPERT}/${rowId}`, 'post', {
|
||||
data: formData,
|
||||
}).then((response) => {
|
||||
mutate(fetchUrl)
|
||||
update_notification()
|
||||
}).catch(() => {
|
||||
}).finally(() => {
|
||||
setSubmitting(false);
|
||||
});
|
||||
},
|
||||
});
|
||||
|
||||
const handleDescriptionChange = (event) => {
|
||||
formik.setFieldValue("description", event.target.value);
|
||||
formik.handleChange(event);
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<Tooltip title={t("ReviseDialog.revise")}>
|
||||
<IconButton color="primary" onClick={() => setOpenRejectDialog(true)}>
|
||||
<ReplyIcon/>
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
<Dialog fullWidth open={openRejectDialog}
|
||||
PaperProps={{sx: {boxShadow: 'rgba(60, 64, 67, 0.3) 0px 1px 16px 0px, rgba(60, 64, 67, 0.15) 0px 1px 10px 0px'}}}>
|
||||
<DialogTitle>{t("ReviseDialog.revise")}</DialogTitle>
|
||||
<DialogContent>
|
||||
<Stack spacing={2}>
|
||||
<Stack>
|
||||
<TextField
|
||||
name="description"
|
||||
multiline
|
||||
rows={8}
|
||||
label={t("ReviseDialog.description")}
|
||||
value={formik.values.description}
|
||||
onChange={handleDescriptionChange}
|
||||
onBlur={formik.handleBlur("description")}
|
||||
error={
|
||||
formik.touched.description && Boolean(formik.errors.description)
|
||||
}
|
||||
helperText={formik.touched.description && formik.errors.description}
|
||||
fullWidth
|
||||
variant="outlined"
|
||||
sx={{mt: 1}}
|
||||
/>
|
||||
</Stack>
|
||||
</Stack>
|
||||
</DialogContent>
|
||||
<DialogActions>
|
||||
<Button onClick={() => setOpenRejectDialog(false)} variant="outlined" color="secondary"
|
||||
disabled={formik.isSubmitting} autoFocus>
|
||||
{t("ReviseDialog.button-cancel")}
|
||||
</Button>
|
||||
<Button onClick={formik.handleSubmit} variant="contained" color="primary"
|
||||
disabled={formik.isSubmitting}>
|
||||
{t("ReviseDialog.button-revise")}
|
||||
</Button>
|
||||
</DialogActions>
|
||||
</Dialog>
|
||||
</>
|
||||
);
|
||||
};
|
||||
export default Revise;
|
||||
@@ -0,0 +1,81 @@
|
||||
import useNotification from "@/lib/app/hooks/useNotification";
|
||||
import useRequest from "@/lib/app/hooks/useRequest";
|
||||
import {Button, DialogActions, DialogContent, Stack, TextField} from "@mui/material"
|
||||
import {useFormik} from "formik";
|
||||
import {useTranslations} from "next-intl";
|
||||
import * as Yup from "yup";
|
||||
import {REVISE_INSPECTOR_EXPERT} from "@/core/data/apiRoutes";
|
||||
|
||||
const ReviseContent = ({rowId, mutate, setOpenReviseDialog}) => {
|
||||
const t = useTranslations();
|
||||
const requestServer = useRequest({auth: true})
|
||||
const {update_notification} = useNotification()
|
||||
|
||||
const validationSchema = Yup.object().shape({
|
||||
description: Yup.string().required(t("ReviseDialog.description_error")),
|
||||
});
|
||||
|
||||
const formik = useFormik({
|
||||
initialValues: {
|
||||
description: "",
|
||||
},
|
||||
validationSchema,
|
||||
onSubmit: (values, {setSubmitting}) => {
|
||||
const formData = new FormData();
|
||||
formData.append("description", values.description);
|
||||
|
||||
requestServer(`${REVISE_INSPECTOR_EXPERT}/${rowId}`, 'post', {
|
||||
data: formData,
|
||||
}).then((response) => {
|
||||
setOpenReviseDialog(false)
|
||||
mutate()
|
||||
update_notification()
|
||||
}).catch(() => {
|
||||
}).finally(() => {
|
||||
setSubmitting(false);
|
||||
});
|
||||
},
|
||||
});
|
||||
|
||||
const handleDescriptionChange = (event) => {
|
||||
formik.setFieldValue("description", event.target.value);
|
||||
formik.handleChange(event);
|
||||
};
|
||||
return (
|
||||
<>
|
||||
<DialogContent>
|
||||
<Stack spacing={2}>
|
||||
<Stack>
|
||||
<TextField
|
||||
name="description"
|
||||
multiline
|
||||
rows={8}
|
||||
label={t("ReviseDialog.description")}
|
||||
value={formik.values.description}
|
||||
onChange={handleDescriptionChange}
|
||||
onBlur={formik.handleBlur("description")}
|
||||
error={
|
||||
formik.touched.description && Boolean(formik.errors.description)
|
||||
}
|
||||
helperText={formik.touched.description && formik.errors.description}
|
||||
fullWidth
|
||||
variant="outlined"
|
||||
sx={{mt: 1}}
|
||||
/>
|
||||
</Stack>
|
||||
</Stack>
|
||||
</DialogContent>
|
||||
<DialogActions>
|
||||
<Button onClick={() => setOpenReviseDialog(false)} variant="outlined" color="secondary"
|
||||
disabled={formik.isSubmitting} autoFocus>
|
||||
{t("ReviseDialog.button-cancel")}
|
||||
</Button>
|
||||
<Button onClick={formik.handleSubmit} variant="contained" color="primary"
|
||||
disabled={formik.isSubmitting || !formik.dirty || !formik.isValid}>
|
||||
{t("ReviseDialog.button-revise")}
|
||||
</Button>
|
||||
</DialogActions>
|
||||
</>
|
||||
)
|
||||
}
|
||||
export default ReviseContent
|
||||
@@ -0,0 +1,31 @@
|
||||
import {Dialog, DialogTitle, IconButton, Tooltip} from "@mui/material";
|
||||
import {useTranslations} from "next-intl";
|
||||
import ReplyIcon from '@mui/icons-material/Reply';
|
||||
import {useState} from "react";
|
||||
import ReviseContent from "./ReviseContent";
|
||||
|
||||
const Revise = ({rowId, mutate}) => {
|
||||
const t = useTranslations();
|
||||
const [openReviseDialog, setOpenReviseDialog] = useState(false);
|
||||
return (
|
||||
<>
|
||||
<Tooltip title={t("ReviseDialog.revise")}>
|
||||
<IconButton
|
||||
color="primary"
|
||||
onClick={() => {
|
||||
setOpenReviseDialog(true)
|
||||
}}
|
||||
>
|
||||
<ReplyIcon/>
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
<Dialog fullWidth open={openReviseDialog}
|
||||
PaperProps={{sx: {boxShadow: 'rgba(60, 64, 67, 0.3) 0px 1px 16px 0px, rgba(60, 64, 67, 0.15) 0px 1px 10px 0px'}}}>
|
||||
<DialogTitle>{t("ReviseDialog.revise")}</DialogTitle>
|
||||
<ReviseContent mutate={mutate} rowId={rowId} setOpenReviseDialog={setOpenReviseDialog}/>
|
||||
</Dialog>
|
||||
</>
|
||||
)
|
||||
|
||||
}
|
||||
export default Revise;
|
||||
@@ -1,25 +1,22 @@
|
||||
import {Box} from "@mui/material";
|
||||
import ConfirmForm from "./Form/ConfirmForm"
|
||||
import RejectForm from "./Form/RejectForm"
|
||||
import ReviseForm from "./Form/ReviseForm"
|
||||
import Confirm from "./Form/ConfirmForm";
|
||||
import Reject from "./Form/RejectForm";
|
||||
import Revise from "./Form/ReviseForm";
|
||||
|
||||
const TableRow = ({row, mutate, fetchUrl}) => {
|
||||
const TableRow = ({row, mutate}) => {
|
||||
|
||||
return (
|
||||
<Box sx={{display: "flex", flexWrap: "nowrap", gap: "8px"}}>
|
||||
<ConfirmForm
|
||||
<Confirm
|
||||
rowId={row.getValue("id")}
|
||||
mutate={mutate}
|
||||
fetchUrl={fetchUrl}
|
||||
/>
|
||||
<RejectForm
|
||||
<Reject
|
||||
rowId={row.getValue("id")}
|
||||
fetchUrl={fetchUrl}
|
||||
mutate={mutate}
|
||||
/>
|
||||
<ReviseForm
|
||||
<Revise
|
||||
rowId={row.getValue("id")}
|
||||
fetchUrl={fetchUrl}
|
||||
mutate={mutate}
|
||||
/>
|
||||
</Box>
|
||||
|
||||
@@ -1,4 +1,3 @@
|
||||
import DashboardLayouts from "@/layouts/dashboardLayouts";
|
||||
import {Box, Typography} from "@mui/material";
|
||||
import {useMemo} from "react";
|
||||
import {GET_INSPECTOR_EXPERT} from "@/core/data/apiRoutes";
|
||||
@@ -124,31 +123,30 @@ function DashboardInspectorExpertComponent() {
|
||||
],
|
||||
[]
|
||||
);
|
||||
|
||||
return (
|
||||
<DashboardLayouts>
|
||||
<Box sx={{px: 3}}>
|
||||
<DataTable
|
||||
tableUrl={GET_INSPECTOR_EXPERT}
|
||||
columns={columns}
|
||||
selectableRow={false}
|
||||
enableCustomToolbar={false}
|
||||
enableLastUpdate={true}
|
||||
enablePinning={true}
|
||||
sorting={[{
|
||||
id: 'id', desc: false
|
||||
}]}
|
||||
enableDensityToggle={false}
|
||||
initialState={{density: 'compact'}} //compact (small) //comfortable (medium) //spacious (large)
|
||||
enableColumnFilters={true}
|
||||
enableHiding={true}
|
||||
enableFullScreenToggle={false}
|
||||
enableGlobalFilter={false}
|
||||
enableColumnResizing={false} // if you want true this you shold change renderRowActions props ** see https://www.material-react-table.com/docs/guides/row-actions
|
||||
enableRowActions={true}
|
||||
TableRowAction={TableRowActions}
|
||||
/>
|
||||
</Box>
|
||||
</DashboardLayouts>
|
||||
<Box sx={{px: 3}}>
|
||||
<DataTable
|
||||
tableUrl={GET_INSPECTOR_EXPERT}
|
||||
columns={columns}
|
||||
selectableRow={false}
|
||||
enableCustomToolbar={false}
|
||||
enableLastUpdate={true}
|
||||
enablePinning={true}
|
||||
sorting={[{
|
||||
id: 'id', desc: false
|
||||
}]}
|
||||
enableDensityToggle={false}
|
||||
initialState={{density: 'compact'}} //compact (small) //comfortable (medium) //spacious (large)
|
||||
enableColumnFilters={true}
|
||||
enableHiding={true}
|
||||
enableFullScreenToggle={false}
|
||||
enableGlobalFilter={false}
|
||||
enableColumnResizing={false} // if you want true this you shold change renderRowActions props ** see https://www.material-react-table.com/docs/guides/row-actions
|
||||
enableRowActions={true}
|
||||
TableRowAction={TableRowActions}
|
||||
/>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
@@ -1,187 +0,0 @@
|
||||
import {useTranslations} from "next-intl";
|
||||
import {useState} from "react";
|
||||
import {
|
||||
Button,
|
||||
Dialog,
|
||||
DialogActions,
|
||||
DialogContent,
|
||||
DialogTitle,
|
||||
IconButton,
|
||||
Stack,
|
||||
TextField,
|
||||
Tooltip,
|
||||
Typography
|
||||
} from "@mui/material";
|
||||
import ThumbUpAltIcon from "@mui/icons-material/ThumbUpAlt";
|
||||
import UploadSystem from "@/core/components/UploadSystem";
|
||||
import {useFormik} from "formik";
|
||||
import UploadFileNotification from "@/core/components/notifications/UploadFileNotification";
|
||||
import {CONFIRM_MACHINARY_OFFICE} from "@/core/data/apiRoutes";
|
||||
import * as Yup from "yup";
|
||||
import useRequest from "@/lib/app/hooks/useRequest";
|
||||
import useNotification from "@/lib/app/hooks/useNotification";
|
||||
import PriceField from "@/core/components/PriceField";
|
||||
|
||||
|
||||
const Confirm = ({rowId, fetchUrl, mutate}) => {
|
||||
const t = useTranslations();
|
||||
const [selectedImage, setSelectedImage] = useState("");
|
||||
const [fileType, setfileType] = useState(null);
|
||||
const [fileName, setfileName] = useState(null);
|
||||
const [showAddIcon, setShowAddIcon] = useState(true);
|
||||
const [openConfirmDialog, setOpenConfirmDialog] = useState(false);
|
||||
const requestServer = useRequest({auth: true})
|
||||
const {update_notification} = useNotification()
|
||||
|
||||
const validationSchema = Yup.object().shape({
|
||||
proposed_amount: Yup.mixed().test(
|
||||
"is-number",
|
||||
`${t("ConfirmDialog.approved_amount_number")}`,
|
||||
(value) => !isNaN(value)
|
||||
).test("positive", `${t("ConfirmDialog.proposed_amount_positive")}`, (value) => value >= 0)
|
||||
.required(t("ConfirmDialog.proposed_amount_error"))
|
||||
})
|
||||
const formik = useFormik({
|
||||
initialValues: {
|
||||
description: "",
|
||||
proposed_amount: "",
|
||||
confirm_img: null
|
||||
},
|
||||
validationSchema,
|
||||
onSubmit: (values, {setSubmitting}) => {
|
||||
const formData = new FormData();
|
||||
formData.append("proposed_amount", values.proposed_amount);
|
||||
if (values.description != "") formData.append("expert_description", values.description);
|
||||
if (values.confirm_img != null) formData.append("attachment", values.confirm_img);
|
||||
|
||||
requestServer(`${CONFIRM_MACHINARY_OFFICE}/${rowId}`, 'post', {
|
||||
data: formData,
|
||||
}).then((response) => {
|
||||
mutate(fetchUrl)
|
||||
update_notification()
|
||||
}).catch(() => {
|
||||
}).finally(() => {
|
||||
setSubmitting(false);
|
||||
});
|
||||
},
|
||||
});
|
||||
|
||||
const handleDescriptionChange = (event) => {
|
||||
formik.setFieldValue("description", event.target.value)
|
||||
};
|
||||
const handleAmountChange = (event) => {
|
||||
if (!isNaN(event.target.value)) {
|
||||
formik.setFieldValue("proposed_amount", event.target.value)
|
||||
} else {
|
||||
formik.setFieldValue("proposed_amount", formik.values.proposed_amount)
|
||||
}
|
||||
};
|
||||
const handleUploadChange = (event) => {
|
||||
const uploadedFile = event.target?.files?.[0];
|
||||
if (uploadedFile) {
|
||||
const maxFileSize = 2 * 1024 * 1024;
|
||||
if (uploadedFile.size > maxFileSize) {
|
||||
UploadFileNotification(t);
|
||||
event.target.value = "";
|
||||
return;
|
||||
}
|
||||
|
||||
const fileType = event.target?.files?.[0].type;
|
||||
const fileName = event.target?.files?.[0].name;
|
||||
setSelectedImage(URL.createObjectURL(uploadedFile));
|
||||
setfileType(fileType);
|
||||
setfileName(fileName);
|
||||
formik.setFieldValue("confirm_img", uploadedFile);
|
||||
setShowAddIcon(false);
|
||||
}
|
||||
};
|
||||
return (
|
||||
<>
|
||||
<Tooltip title={t("ConfirmDialog.confirm")}>
|
||||
<IconButton
|
||||
color="primary"
|
||||
onClick={() => {
|
||||
setOpenConfirmDialog(true)
|
||||
}}
|
||||
>
|
||||
<ThumbUpAltIcon/>
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
<Dialog fullWidth open={openConfirmDialog}
|
||||
PaperProps={{sx: {boxShadow: 'rgba(60, 64, 67, 0.3) 0px 1px 16px 0px, rgba(60, 64, 67, 0.15) 0px 1px 10px 0px'}}}>
|
||||
<DialogTitle>{t("ConfirmDialog.confirm")}</DialogTitle>
|
||||
<DialogContent>
|
||||
<Stack spacing={3}>
|
||||
<Stack>
|
||||
<TextField
|
||||
name="description"
|
||||
multiline
|
||||
rows={8}
|
||||
label={<>
|
||||
<span>{t("ConfirmDialog.description")}</span><small>{t("ConfirmDialog.optional")}</small></>}
|
||||
value={formik.values.description}
|
||||
onChange={handleDescriptionChange}
|
||||
fullWidth
|
||||
variant="outlined"
|
||||
sx={{mt: 1}}
|
||||
/>
|
||||
</Stack>
|
||||
<Stack>
|
||||
<PriceField
|
||||
name="proposed_amount"
|
||||
label={<>
|
||||
<span>{t("ConfirmDialog.proposed_amount")}</span><small>{t("ConfirmDialog.unit")}</small></>}
|
||||
type="text"
|
||||
inputProps={{
|
||||
inputMode: "number",
|
||||
min: 0,
|
||||
pattern: "[0-9]*",
|
||||
}}
|
||||
variant="outlined"
|
||||
value={formik.values.proposed_amount}
|
||||
onChange={handleAmountChange}
|
||||
onBlur={formik.handleBlur("proposed_amount")}
|
||||
error={
|
||||
formik.touched.proposed_amount &&
|
||||
Boolean(formik.errors.proposed_amount)
|
||||
}
|
||||
helperText={
|
||||
formik.touched.proposed_amount && formik.errors.proposed_amount
|
||||
}
|
||||
sx={{mt: 1}}
|
||||
fullWidth
|
||||
/>
|
||||
</Stack>
|
||||
<Stack>
|
||||
<Typography>{t("UploadSystem.upload_file")}{t("UploadSystem.optional")}</Typography>
|
||||
<UploadSystem
|
||||
selectedImage={selectedImage}
|
||||
handleUploadChange={handleUploadChange} // Pass the updated function directly
|
||||
setselectedImage={setSelectedImage}
|
||||
setFieldValue={formik.setFieldValue} // Remove props.setFieldValue, use formik.setFieldValue
|
||||
fieldname="confirm_img"
|
||||
fileType={fileType}
|
||||
fileName={fileName}
|
||||
imageAlt={t("app_name")}
|
||||
imageSize={[250, 150]}
|
||||
setShowAddIcon={setShowAddIcon}
|
||||
showAddIcon={showAddIcon}
|
||||
/>
|
||||
</Stack>
|
||||
</Stack>
|
||||
</DialogContent>
|
||||
<DialogActions>
|
||||
<Button onClick={() => setOpenConfirmDialog(false)} variant="outlined" color="secondary"
|
||||
disabled={formik.isSubmitting} autoFocus>
|
||||
{t("ConfirmDialog.button-cancel")}
|
||||
</Button>
|
||||
<Button onClick={formik.handleSubmit} variant="contained" color="primary"
|
||||
disabled={formik.isSubmitting}>
|
||||
{t("ConfirmDialog.button-confirm")}
|
||||
</Button>
|
||||
</DialogActions>
|
||||
</Dialog>
|
||||
</>
|
||||
);
|
||||
};
|
||||
export default Confirm;
|
||||
@@ -0,0 +1,163 @@
|
||||
import UploadSystem from "@/core/components/UploadSystem";
|
||||
import useNotification from "@/lib/app/hooks/useNotification";
|
||||
import useRequest from "@/lib/app/hooks/useRequest";
|
||||
import {Button, DialogActions, DialogContent, Stack, TextField, Typography} from "@mui/material"
|
||||
import {useFormik} from "formik";
|
||||
import {useTranslations} from "next-intl";
|
||||
import {CONFIRM_MACHINARY_OFFICE} from "@/core/data/apiRoutes";
|
||||
import UploadFileNotification from "@/core/components/notifications/UploadFileNotification";
|
||||
import {useState} from "react";
|
||||
import PriceField from "@/core/components/PriceField";
|
||||
import * as Yup from "yup";
|
||||
|
||||
const ConfirmContent = ({rowId, mutate, setOpenConfirmDialog}) => {
|
||||
const t = useTranslations();
|
||||
const [selectedImage, setSelectedImage] = useState("");
|
||||
const [fileType, setfileType] = useState(null);
|
||||
const [fileName, setfileName] = useState(null);
|
||||
const [showAddIcon, setShowAddIcon] = useState(true);
|
||||
const requestServer = useRequest({auth: true})
|
||||
const {update_notification} = useNotification()
|
||||
|
||||
const validationSchema = Yup.object().shape({
|
||||
proposed_amount: Yup.mixed().test(
|
||||
"is-number",
|
||||
`${t("ConfirmDialog.proposed_amount_number")}`,
|
||||
(value) => !isNaN(value)
|
||||
).test("positive", `${t("ConfirmDialog.proposed_amount_positive")}`, (value) => value >= 0)
|
||||
.required(t("ConfirmDialog.proposed_amount_error"))
|
||||
});
|
||||
|
||||
const formik = useFormik({
|
||||
initialValues: {
|
||||
description: "",
|
||||
proposed_amount: "",
|
||||
confirm_img: null
|
||||
}, validationSchema,
|
||||
onSubmit: (values, {setSubmitting}) => {
|
||||
const formData = new FormData();
|
||||
formData.append("proposed_amount", values.proposed_amount);
|
||||
if (values.description != "") formData.append("expert_description", values.description);
|
||||
if (values.confirm_img != null) formData.append("attachment", values.confirm_img);
|
||||
|
||||
requestServer(`${CONFIRM_MACHINARY_OFFICE}/${rowId}`, 'post', {
|
||||
data: formData,
|
||||
}).then((response) => {
|
||||
setOpenConfirmDialog(false)
|
||||
mutate()
|
||||
update_notification()
|
||||
}).catch(() => {
|
||||
}).finally(() => {
|
||||
setSubmitting(false);
|
||||
});
|
||||
},
|
||||
});
|
||||
|
||||
const handleDescriptionChange = (event) => {
|
||||
formik.setFieldValue("description", event.target.value)
|
||||
};
|
||||
|
||||
const handleUploadChange = (event) => {
|
||||
const uploadedFile = event.target?.files?.[0];
|
||||
if (uploadedFile) {
|
||||
const maxFileSize = 2 * 1024 * 1024;
|
||||
if (uploadedFile.size > maxFileSize) {
|
||||
UploadFileNotification(t);
|
||||
event.target.value = "";
|
||||
return;
|
||||
}
|
||||
|
||||
const fileType = event.target?.files?.[0].type;
|
||||
const fileName = event.target?.files?.[0].name;
|
||||
setSelectedImage(URL.createObjectURL(uploadedFile));
|
||||
setfileType(fileType);
|
||||
setfileName(fileName);
|
||||
formik.setFieldValue("confirm_img", uploadedFile);
|
||||
setShowAddIcon(false);
|
||||
}
|
||||
};
|
||||
const handleAmountChange = (event) => {
|
||||
if (!isNaN(event.target.value)) {
|
||||
formik.setFieldValue("proposed_amount", event.target.value)
|
||||
} else {
|
||||
formik.setFieldValue("proposed_amount", formik.values.proposed_amount)
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<DialogContent>
|
||||
<Stack spacing={2}>
|
||||
<Stack>
|
||||
<TextField
|
||||
name="description"
|
||||
multiline
|
||||
rows={8}
|
||||
label={<>
|
||||
<span>{t("ConfirmDialog.description")}</span><small>{t("ConfirmDialog.optional")}</small></>}
|
||||
value={formik.values.description}
|
||||
onChange={handleDescriptionChange}
|
||||
fullWidth
|
||||
variant="outlined"
|
||||
sx={{mt: 1}}
|
||||
/>
|
||||
</Stack>
|
||||
<Stack>
|
||||
<PriceField
|
||||
name="proposed_amount"
|
||||
label={<>
|
||||
<span>{t("ConfirmDialog.proposed_amount")}</span><small>{t("ConfirmDialog.unit")}</small></>}
|
||||
type="text"
|
||||
inputProps={{
|
||||
inputMode: "number",
|
||||
min: 0,
|
||||
pattern: "[0-9]*",
|
||||
}}
|
||||
variant="outlined"
|
||||
value={formik.values.proposed_amount}
|
||||
onChange={handleAmountChange}
|
||||
onBlur={formik.handleBlur("proposed_amount")}
|
||||
error={
|
||||
formik.touched.proposed_amount &&
|
||||
Boolean(formik.errors.proposed_amount)
|
||||
}
|
||||
helperText={
|
||||
formik.touched.proposed_amount && formik.errors.proposed_amount
|
||||
}
|
||||
sx={{mt: 1}}
|
||||
fullWidth
|
||||
/>
|
||||
</Stack>
|
||||
<Stack>
|
||||
<Typography>{t("UploadSystem.upload_file")}{t("UploadSystem.optional")}</Typography>
|
||||
<UploadSystem
|
||||
selectedImage={selectedImage}
|
||||
handleUploadChange={handleUploadChange} // Pass the updated function directly
|
||||
setselectedImage={setSelectedImage}
|
||||
setFieldValue={formik.setFieldValue} // Remove props.setFieldValue, use formik.setFieldValue
|
||||
fieldname="confirm_img"
|
||||
fileType={fileType}
|
||||
fileName={fileName}
|
||||
imageAlt={t("app_name")}
|
||||
imageSize={[250, 150]}
|
||||
setShowAddIcon={setShowAddIcon}
|
||||
showAddIcon={showAddIcon}
|
||||
/>
|
||||
</Stack>
|
||||
</Stack>
|
||||
</DialogContent>
|
||||
<DialogActions>
|
||||
<Button onClick={() => setOpenConfirmDialog(false)} variant="outlined" color="secondary"
|
||||
disabled={formik.isSubmitting} autoFocus>
|
||||
{t("ConfirmDialog.button-cancel")}
|
||||
</Button>
|
||||
<Button onClick={formik.handleSubmit} variant="contained" color="primary"
|
||||
disabled={formik.isSubmitting || !formik.dirty || !formik.isValid}>
|
||||
{t("ConfirmDialog.button-confirm")}
|
||||
</Button>
|
||||
</DialogActions>
|
||||
</>
|
||||
)
|
||||
|
||||
}
|
||||
export default ConfirmContent
|
||||
@@ -0,0 +1,31 @@
|
||||
import {Dialog, DialogTitle, IconButton, Tooltip} from "@mui/material";
|
||||
import {useTranslations} from "next-intl";
|
||||
import ThumbUpAltIcon from "@mui/icons-material/ThumbUpAlt";
|
||||
import {useState} from "react";
|
||||
import ConfirmContent from "./ConfirmContent";
|
||||
|
||||
const Confirm = ({rowId, mutate}) => {
|
||||
const t = useTranslations();
|
||||
const [openConfirmDialog, setOpenConfirmDialog] = useState(false);
|
||||
return (
|
||||
<>
|
||||
<Tooltip title={t("ConfirmDialog.confirm")}>
|
||||
<IconButton
|
||||
color="primary"
|
||||
onClick={() => {
|
||||
setOpenConfirmDialog(true)
|
||||
}}
|
||||
>
|
||||
<ThumbUpAltIcon/>
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
<Dialog fullWidth open={openConfirmDialog}
|
||||
PaperProps={{sx: {boxShadow: 'rgba(60, 64, 67, 0.3) 0px 1px 16px 0px, rgba(60, 64, 67, 0.15) 0px 1px 10px 0px'}}}>
|
||||
<DialogTitle>{t("ConfirmDialog.confirm")}</DialogTitle>
|
||||
<ConfirmContent mutate={mutate} rowId={rowId} setOpenConfirmDialog={setOpenConfirmDialog}/>
|
||||
</Dialog>
|
||||
</>
|
||||
)
|
||||
|
||||
}
|
||||
export default Confirm;
|
||||
@@ -1,148 +0,0 @@
|
||||
import {REJECT_MACHINARY_OFFICE} from "@/core/data/apiRoutes";
|
||||
import {
|
||||
Button,
|
||||
Dialog,
|
||||
DialogActions,
|
||||
DialogContent,
|
||||
DialogTitle,
|
||||
IconButton,
|
||||
Stack,
|
||||
TextField,
|
||||
Tooltip,
|
||||
Typography,
|
||||
} from "@mui/material";
|
||||
import {useTranslations} from "next-intl";
|
||||
import {useFormik} from "formik";
|
||||
import * as Yup from "yup";
|
||||
import {useState} from "react";
|
||||
import UploadSystem from "@/core/components/UploadSystem";
|
||||
import UploadFileNotification from "@/core/components/notifications/UploadFileNotification";
|
||||
import useDirection from "@/lib/app/hooks/useDirection";
|
||||
import ThumbDownIcon from "@mui/icons-material/ThumbDown";
|
||||
import useRequest from "@/lib/app/hooks/useRequest";
|
||||
import useNotification from "@/lib/app/hooks/useNotification";
|
||||
|
||||
|
||||
const Reject = ({rowId, fetchUrl, mutate}) => {
|
||||
const [selectedImage, setSelectedImage] = useState("");
|
||||
const [fileType, setfileType] = useState(null);
|
||||
const [fileName, setfileName] = useState(null);
|
||||
const [showAddIcon, setShowAddIcon] = useState(true);
|
||||
const t = useTranslations();
|
||||
const {directionApp} = useDirection();
|
||||
const [openRejectDialog, setOpenRejectDialog] = useState(false);
|
||||
const requestServer = useRequest({auth: true})
|
||||
const {update_notification} = useNotification()
|
||||
|
||||
const validationSchema = Yup.object().shape({
|
||||
description: Yup.string().required(t("RejectDialog.description_error")),
|
||||
});
|
||||
|
||||
const formik = useFormik({
|
||||
initialValues: {
|
||||
description: "",
|
||||
reject_img: null
|
||||
},
|
||||
validationSchema,
|
||||
onSubmit: (values, {setSubmitting}) => {
|
||||
const formData = new FormData();
|
||||
formData.append("expert_description", values.description);
|
||||
if (values.reject_img != null) formData.append("attachment", values.reject_img);
|
||||
|
||||
requestServer(`${REJECT_MACHINARY_OFFICE}/${rowId}`, 'post', {
|
||||
data: formData,
|
||||
}).then((response) => {
|
||||
mutate(fetchUrl)
|
||||
update_notification()
|
||||
}).catch(() => {
|
||||
}).finally(() => {
|
||||
setSubmitting(false);
|
||||
});
|
||||
},
|
||||
});
|
||||
|
||||
const handleDescriptionChange = (event) => {
|
||||
formik.setFieldValue("description", event.target.value);
|
||||
formik.handleChange(event);
|
||||
};
|
||||
const handleUploadChange = (event) => {
|
||||
const uploadedFile = event.target?.files?.[0];
|
||||
if (uploadedFile) {
|
||||
const maxFileSize = 2 * 1024 * 1024;
|
||||
if (uploadedFile.size > maxFileSize) {
|
||||
UploadFileNotification(t);
|
||||
event.target.value = "";
|
||||
return;
|
||||
}
|
||||
const fileType = event.target?.files?.[0].type;
|
||||
const fileName = event.target?.files?.[0].name;
|
||||
setSelectedImage(URL.createObjectURL(uploadedFile));
|
||||
setfileType(fileType);
|
||||
setfileName(fileName);
|
||||
formik.setFieldValue("reject_img", uploadedFile);
|
||||
setShowAddIcon(false);
|
||||
}
|
||||
};
|
||||
return (
|
||||
<>
|
||||
<Tooltip title={t("RejectDialog.reject")}>
|
||||
<IconButton color="primary" onClick={() => setOpenRejectDialog(true)}>
|
||||
<ThumbDownIcon/>
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
<Dialog fullWidth open={openRejectDialog}
|
||||
PaperProps={{sx: {boxShadow: 'rgba(60, 64, 67, 0.3) 0px 1px 16px 0px, rgba(60, 64, 67, 0.15) 0px 1px 10px 0px'}}}>
|
||||
<DialogTitle>{t("RejectDialog.reject")}</DialogTitle>
|
||||
<DialogContent>
|
||||
<Stack spacing={2}>
|
||||
<Stack>
|
||||
<TextField
|
||||
name="description"
|
||||
multiline
|
||||
rows={8}
|
||||
label={t("RejectDialog.description")}
|
||||
value={formik.values.description}
|
||||
onChange={handleDescriptionChange}
|
||||
onBlur={formik.handleBlur("description")}
|
||||
error={
|
||||
formik.touched.description && Boolean(formik.errors.description)
|
||||
}
|
||||
helperText={formik.touched.description && formik.errors.description}
|
||||
fullWidth
|
||||
variant="outlined"
|
||||
sx={{mt: 1}}
|
||||
/>
|
||||
</Stack>
|
||||
<Stack>
|
||||
<Typography>{t("UploadSystem.upload_file")}{t("UploadSystem.optional")}</Typography>
|
||||
<UploadSystem
|
||||
selectedImage={selectedImage}
|
||||
handleUploadChange={handleUploadChange} // Pass the updated function directly
|
||||
setselectedImage={setSelectedImage}
|
||||
setFieldValue={formik.setFieldValue} // Remove props.setFieldValue, use formik.setFieldValue
|
||||
fieldname="reject_img"
|
||||
fileType={fileType}
|
||||
fileName={fileName}
|
||||
imageAlt={t("app_name")}
|
||||
imageSize={[250 /*width*/, 150 /*height*/]}
|
||||
setShowAddIcon={setShowAddIcon}
|
||||
showAddIcon={showAddIcon}
|
||||
/>
|
||||
</Stack>
|
||||
</Stack>
|
||||
</DialogContent>
|
||||
<DialogActions>
|
||||
<Button onClick={() => setOpenRejectDialog(false)} variant="outlined" color="secondary"
|
||||
disabled={formik.isSubmitting} autoFocus>
|
||||
{t("RejectDialog.button-cancel")}
|
||||
</Button>
|
||||
<Button onClick={formik.handleSubmit} variant="contained" color="primary"
|
||||
disabled={formik.isSubmitting}>
|
||||
{t("RejectDialog.button-reject")}
|
||||
</Button>
|
||||
</DialogActions>
|
||||
</Dialog>
|
||||
</>
|
||||
);
|
||||
};
|
||||
export default Reject;
|
||||
@@ -0,0 +1,123 @@
|
||||
import UploadSystem from "@/core/components/UploadSystem"
|
||||
import useNotification from "@/lib/app/hooks/useNotification";
|
||||
import useRequest from "@/lib/app/hooks/useRequest";
|
||||
import {Button, DialogActions, DialogContent, Stack, TextField, Typography} from "@mui/material"
|
||||
import {useFormik} from "formik";
|
||||
import {useTranslations} from "next-intl";
|
||||
import {useState} from "react";
|
||||
import * as Yup from "yup";
|
||||
import {REJECT_MACHINARY_OFFICE} from "@/core/data/apiRoutes";
|
||||
|
||||
const RejectContent = ({rowId, mutate, setOpenRejectDialog}) => {
|
||||
const [selectedImage, setSelectedImage] = useState("");
|
||||
const [fileType, setfileType] = useState(null);
|
||||
const [fileName, setfileName] = useState(null);
|
||||
const [showAddIcon, setShowAddIcon] = useState(true);
|
||||
const t = useTranslations();
|
||||
const requestServer = useRequest({auth: true})
|
||||
const {update_notification} = useNotification()
|
||||
|
||||
const validationSchema = Yup.object().shape({
|
||||
description: Yup.string().required(t("RejectDialog.description_error")),
|
||||
});
|
||||
|
||||
const formik = useFormik({
|
||||
initialValues: {
|
||||
description: "",
|
||||
reject_img: null
|
||||
},
|
||||
validationSchema,
|
||||
onSubmit: (values, {setSubmitting}) => {
|
||||
const formData = new FormData();
|
||||
formData.append("expert_description", values.description);
|
||||
if (values.reject_img != null) formData.append("attachment", values.reject_img);
|
||||
|
||||
requestServer(`${REJECT_MACHINARY_OFFICE}/${rowId}`, 'post', {
|
||||
data: formData,
|
||||
}).then((response) => {
|
||||
setOpenRejectDialog(false)
|
||||
mutate()
|
||||
update_notification()
|
||||
}).catch(() => {
|
||||
}).finally(() => {
|
||||
setSubmitting(false);
|
||||
});
|
||||
},
|
||||
});
|
||||
|
||||
const handleDescriptionChange = (event) => {
|
||||
formik.setFieldValue("description", event.target.value);
|
||||
formik.handleChange(event);
|
||||
};
|
||||
const handleUploadChange = (event) => {
|
||||
const uploadedFile = event.target?.files?.[0];
|
||||
if (uploadedFile) {
|
||||
const maxFileSize = 2 * 1024 * 1024;
|
||||
if (uploadedFile.size > maxFileSize) {
|
||||
UploadFileNotification(t);
|
||||
event.target.value = "";
|
||||
return;
|
||||
}
|
||||
const fileType = event.target?.files?.[0].type;
|
||||
const fileName = event.target?.files?.[0].name;
|
||||
setSelectedImage(URL.createObjectURL(uploadedFile));
|
||||
setfileType(fileType);
|
||||
setfileName(fileName);
|
||||
formik.setFieldValue("reject_img", uploadedFile);
|
||||
setShowAddIcon(false);
|
||||
}
|
||||
};
|
||||
return (
|
||||
<>
|
||||
<DialogContent>
|
||||
<Stack spacing={2}>
|
||||
<Stack>
|
||||
<TextField
|
||||
name="description"
|
||||
multiline
|
||||
rows={8}
|
||||
label={t("RejectDialog.description")}
|
||||
value={formik.values.description}
|
||||
onChange={handleDescriptionChange}
|
||||
onBlur={formik.handleBlur("description")}
|
||||
error={
|
||||
formik.touched.description && Boolean(formik.errors.description)
|
||||
}
|
||||
helperText={formik.touched.description && formik.errors.description}
|
||||
fullWidth
|
||||
variant="outlined"
|
||||
sx={{mt: 1}}
|
||||
/>
|
||||
</Stack>
|
||||
<Stack>
|
||||
<Typography>{t("UploadSystem.upload_file")}{t("UploadSystem.optional")}</Typography>
|
||||
<UploadSystem
|
||||
selectedImage={selectedImage}
|
||||
handleUploadChange={handleUploadChange} // Pass the updated function directly
|
||||
setselectedImage={setSelectedImage}
|
||||
setFieldValue={formik.setFieldValue} // Remove props.setFieldValue, use formik.setFieldValue
|
||||
fieldname="reject_img"
|
||||
fileType={fileType}
|
||||
fileName={fileName}
|
||||
imageAlt={t("app_name")}
|
||||
imageSize={[250 /*width*/, 150 /*height*/]}
|
||||
setShowAddIcon={setShowAddIcon}
|
||||
showAddIcon={showAddIcon}
|
||||
/>
|
||||
</Stack>
|
||||
</Stack>
|
||||
</DialogContent>
|
||||
<DialogActions>
|
||||
<Button onClick={() => setOpenRejectDialog(false)} variant="outlined" color="secondary"
|
||||
disabled={formik.isSubmitting} autoFocus>
|
||||
{t("RejectDialog.button-cancel")}
|
||||
</Button>
|
||||
<Button onClick={formik.handleSubmit} variant="contained" color="primary"
|
||||
disabled={formik.isSubmitting || !formik.dirty || !formik.isValid}>
|
||||
{t("RejectDialog.button-reject")}
|
||||
</Button>
|
||||
</DialogActions>
|
||||
</>
|
||||
)
|
||||
}
|
||||
export default RejectContent
|
||||
@@ -0,0 +1,25 @@
|
||||
import {Dialog, DialogTitle, IconButton, Tooltip} from "@mui/material"
|
||||
import {useTranslations} from "next-intl";
|
||||
import {useState} from "react";
|
||||
import RejectContent from "./RejectContent";
|
||||
import ThumbDownIcon from "@mui/icons-material/ThumbDown";
|
||||
|
||||
const Reject = ({rowId, mutate}) => {
|
||||
const t = useTranslations();
|
||||
const [openRejectDialog, setOpenRejectDialog] = useState(false);
|
||||
return (
|
||||
<>
|
||||
<Tooltip title={t("RejectDialog.reject")}>
|
||||
<IconButton color="primary" onClick={() => setOpenRejectDialog(true)}>
|
||||
<ThumbDownIcon/>
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
<Dialog fullWidth open={openRejectDialog}
|
||||
PaperProps={{sx: {boxShadow: 'rgba(60, 64, 67, 0.3) 0px 1px 16px 0px, rgba(60, 64, 67, 0.15) 0px 1px 10px 0px'}}}>
|
||||
<DialogTitle>{t("RejectDialog.reject")}</DialogTitle>
|
||||
<RejectContent mutate={mutate} rowId={rowId} setOpenRejectDialog={setOpenRejectDialog}/>
|
||||
</Dialog>
|
||||
</>
|
||||
)
|
||||
}
|
||||
export default Reject
|
||||
@@ -1,19 +1,17 @@
|
||||
import {Box} from "@mui/material";
|
||||
import ConfirmForm from "./Form/ConfirmForm"
|
||||
import RejectForm from "./Form/RejectForm"
|
||||
import Confirm from "./Form/ConfirmForm";
|
||||
import Reject from "./Form/RejectForm";
|
||||
|
||||
const TableRow = ({row, mutate, fetchUrl}) => {
|
||||
const TableRow = ({row, mutate}) => {
|
||||
|
||||
return (
|
||||
<Box sx={{display: "flex", flexWrap: "nowrap", gap: "8px"}}>
|
||||
<ConfirmForm
|
||||
<Confirm
|
||||
rowId={row.getValue("id")}
|
||||
mutate={mutate}
|
||||
fetchUrl={fetchUrl}
|
||||
/>
|
||||
<RejectForm
|
||||
<Reject
|
||||
rowId={row.getValue("id")}
|
||||
fetchUrl={fetchUrl}
|
||||
mutate={mutate}
|
||||
/>
|
||||
</Box>
|
||||
|
||||
@@ -1,4 +1,3 @@
|
||||
import DashboardLayouts from "@/layouts/dashboardLayouts";
|
||||
import {Box, Typography} from "@mui/material";
|
||||
import {useMemo} from "react";
|
||||
import {GET_MACHINARY_OFFICE} from "@/core/data/apiRoutes";
|
||||
@@ -156,30 +155,28 @@ function DashboardMachinaryOfficeComponent() {
|
||||
[]
|
||||
);
|
||||
return (
|
||||
<DashboardLayouts>
|
||||
<Box sx={{px: 3}}>
|
||||
<DataTable
|
||||
tableUrl={GET_MACHINARY_OFFICE}
|
||||
columns={columns}
|
||||
selectableRow={false}
|
||||
enableCustomToolbar={false}
|
||||
enableLastUpdate={true}
|
||||
sorting={[{
|
||||
id: 'id', desc: false
|
||||
}]}
|
||||
enablePinning={true}
|
||||
enableDensityToggle={false}
|
||||
initialState={{density: 'compact'}} //compact (small) //comfortable (medium) //spacious (large)
|
||||
enableColumnFilters={true}
|
||||
enableHiding={true}
|
||||
enableFullScreenToggle={false}
|
||||
enableGlobalFilter={false}
|
||||
enableColumnResizing={false} // if you want true this you shold change renderRowActions props ** see https://www.material-react-table.com/docs/guides/row-actions
|
||||
enableRowActions={true}
|
||||
TableRowAction={TableRowActions}
|
||||
/>
|
||||
</Box>
|
||||
</DashboardLayouts>
|
||||
<Box sx={{px: 3}}>
|
||||
<DataTable
|
||||
tableUrl={GET_MACHINARY_OFFICE}
|
||||
columns={columns}
|
||||
selectableRow={false}
|
||||
enableCustomToolbar={false}
|
||||
enableLastUpdate={true}
|
||||
sorting={[{
|
||||
id: 'id', desc: false
|
||||
}]}
|
||||
enablePinning={true}
|
||||
enableDensityToggle={false}
|
||||
initialState={{density: 'compact'}} //compact (small) //comfortable (medium) //spacious (large)
|
||||
enableColumnFilters={true}
|
||||
enableHiding={true}
|
||||
enableFullScreenToggle={false}
|
||||
enableGlobalFilter={false}
|
||||
enableColumnResizing={false} // if you want true this you shold change renderRowActions props ** see https://www.material-react-table.com/docs/guides/row-actions
|
||||
enableRowActions={true}
|
||||
TableRowAction={TableRowActions}
|
||||
/>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
@@ -1,147 +0,0 @@
|
||||
import {useTranslations} from "next-intl";
|
||||
import {useState} from "react";
|
||||
import {
|
||||
Button,
|
||||
Dialog,
|
||||
DialogActions,
|
||||
DialogContent,
|
||||
DialogTitle,
|
||||
FormControl,
|
||||
FormHelperText,
|
||||
IconButton,
|
||||
InputLabel,
|
||||
MenuItem,
|
||||
Select,
|
||||
Stack,
|
||||
TextField,
|
||||
Tooltip
|
||||
} from "@mui/material";
|
||||
import {useFormik} from "formik";
|
||||
import ChangeCircleIcon from '@mui/icons-material/ChangeCircle';
|
||||
import {UPDATE_LOAN_MANAGEMENT_NAVGAN} from "@/core/data/apiRoutes";
|
||||
import useRequest from "@/lib/app/hooks/useRequest";
|
||||
import useNotification from "@/lib/app/hooks/useNotification";
|
||||
import * as Yup from "yup";
|
||||
import useLoanStateNavgan from "@/lib/prefetchDataTable/hooks/useLoanStateNavgan";
|
||||
|
||||
|
||||
const Update = ({rowId, fetchUrl, mutate}) => {
|
||||
const t = useTranslations();
|
||||
const {loan_state_navgan} = useLoanStateNavgan()
|
||||
const [openConfirmDialog, setOpenConfirmDialog] = useState(false);
|
||||
const requestServer = useRequest({auth: true})
|
||||
const {update_notification} = useNotification()
|
||||
|
||||
const validationSchema = Yup.object().shape({
|
||||
description: Yup.string().required(t("UpdateDialog.description_error")),
|
||||
next_state_id: Yup.number().required(t("UpdateDialog.next-state-id-error"))
|
||||
});
|
||||
|
||||
const formik = useFormik({
|
||||
initialValues: {
|
||||
description: "",
|
||||
next_state_id: ""
|
||||
},
|
||||
validationSchema,
|
||||
onSubmit: (values, {setSubmitting}) => {
|
||||
const formData = new FormData();
|
||||
formData.append("expert_description", values.description);
|
||||
formData.append("next_state_id", values.next_state_id);
|
||||
|
||||
requestServer(`${UPDATE_LOAN_MANAGEMENT_NAVGAN}/${rowId}`, 'post', {
|
||||
data: formData,
|
||||
}).then((response) => {
|
||||
mutate(fetchUrl)
|
||||
update_notification()
|
||||
}).catch(() => {
|
||||
}).finally(() => {
|
||||
setSubmitting(false);
|
||||
});
|
||||
},
|
||||
});
|
||||
|
||||
const handleDescriptionChange = (event) => {
|
||||
formik.setFieldValue("description", event.target.value)
|
||||
};
|
||||
const handleNextStateIDChange = (event) => {
|
||||
formik.setFieldValue("next_state_id", event.target.value)
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<Tooltip title={t("UpdateDialog.update-tooltip")}>
|
||||
<IconButton
|
||||
color="primary"
|
||||
onClick={() => {
|
||||
setOpenConfirmDialog(true)
|
||||
}}
|
||||
>
|
||||
<ChangeCircleIcon/>
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
<Dialog fullWidth open={openConfirmDialog}
|
||||
PaperProps={{sx: {boxShadow: 'rgba(60, 64, 67, 0.3) 0px 1px 16px 0px, rgba(60, 64, 67, 0.15) 0px 1px 10px 0px'}}}>
|
||||
<DialogTitle>{t("UpdateDialog.update")}</DialogTitle>
|
||||
<DialogContent>
|
||||
<Stack spacing={2}>
|
||||
<Stack>
|
||||
<TextField
|
||||
name="description"
|
||||
multiline
|
||||
rows={8}
|
||||
label={t("UpdateDialog.description")}
|
||||
value={formik.values.description}
|
||||
onChange={handleDescriptionChange}
|
||||
fullWidth
|
||||
variant="outlined"
|
||||
sx={{mt: 1}}
|
||||
onBlur={formik.handleBlur("description")}
|
||||
error={
|
||||
formik.touched.description && Boolean(formik.errors.description)
|
||||
}
|
||||
helperText={formik.touched.description && formik.errors.description}
|
||||
/>
|
||||
</Stack>
|
||||
<Stack>
|
||||
<FormControl
|
||||
error={
|
||||
formik.touched.next_state_id &&
|
||||
Boolean(formik.errors.next_state_id)
|
||||
} fullWidth>
|
||||
<InputLabel>{t("UpdateDialog.next-state-id")}</InputLabel>
|
||||
<Select
|
||||
labelId="next_state_id"
|
||||
id="next_state_id"
|
||||
value={formik.values.next_state_id}
|
||||
label={t("UpdateDialog.next-state-id")}
|
||||
onChange={handleNextStateIDChange}
|
||||
onBlur={formik.handleBlur("next_state_id")}
|
||||
>
|
||||
{loan_state_navgan ? (loan_state_navgan.map((item) => {
|
||||
return (
|
||||
<MenuItem key={item.id} value={item.id}>{item.name}</MenuItem>
|
||||
)
|
||||
})) : null}
|
||||
</Select>
|
||||
<FormHelperText>
|
||||
{formik.touched.next_state_id && formik.errors.next_state_id}
|
||||
</FormHelperText>
|
||||
</FormControl>
|
||||
</Stack>
|
||||
</Stack>
|
||||
</DialogContent>
|
||||
<DialogActions>
|
||||
<Button onClick={() => setOpenConfirmDialog(false)} variant="outlined" color="secondary"
|
||||
disabled={formik.isSubmitting} autoFocus>
|
||||
{t("UpdateDialog.button-cancel")}
|
||||
</Button>
|
||||
<Button onClick={formik.handleSubmit} variant="contained" color="primary"
|
||||
disabled={formik.isSubmitting}>
|
||||
{t("UpdateDialog.button-update")}
|
||||
</Button>
|
||||
</DialogActions>
|
||||
</Dialog>
|
||||
</>
|
||||
);
|
||||
};
|
||||
export default Update;
|
||||
@@ -0,0 +1,125 @@
|
||||
import {UPDATE_LOAN_MANAGEMENT_NAVGAN} from "@/core/data/apiRoutes";
|
||||
import useNotification from "@/lib/app/hooks/useNotification";
|
||||
import useRequest from "@/lib/app/hooks/useRequest";
|
||||
import useLoanStateNavgan from "@/lib/prefetchDataTable/hooks/useLoanStateNavgan";
|
||||
import {
|
||||
Button,
|
||||
DialogActions,
|
||||
DialogContent,
|
||||
FormControl,
|
||||
FormHelperText,
|
||||
InputLabel,
|
||||
MenuItem,
|
||||
Select,
|
||||
Stack,
|
||||
TextField
|
||||
} from "@mui/material"
|
||||
import {useFormik} from "formik";
|
||||
import {useTranslations} from "next-intl";
|
||||
import * as Yup from "yup";
|
||||
|
||||
const UpdateContent = ({rowId, mutate, setOpenConfirmDialog}) => {
|
||||
const t = useTranslations();
|
||||
const {loan_state_navgan} = useLoanStateNavgan()
|
||||
const requestServer = useRequest({auth: true})
|
||||
const {update_notification} = useNotification()
|
||||
|
||||
const validationSchema = Yup.object().shape({
|
||||
description: Yup.string().required(t("UpdateDialog.description_error")),
|
||||
next_state_id: Yup.number().required(t("UpdateDialog.next-state-id-error"))
|
||||
});
|
||||
|
||||
const formik = useFormik({
|
||||
initialValues: {
|
||||
description: "",
|
||||
next_state_id: ""
|
||||
},
|
||||
validationSchema,
|
||||
onSubmit: (values, {setSubmitting}) => {
|
||||
const formData = new FormData();
|
||||
formData.append("expert_description", values.description);
|
||||
formData.append("next_state_id", values.next_state_id);
|
||||
|
||||
requestServer(`${UPDATE_LOAN_MANAGEMENT_NAVGAN}/${rowId}`, 'post', {
|
||||
data: formData,
|
||||
}).then((response) => {
|
||||
setOpenConfirmDialog(false)
|
||||
mutate()
|
||||
update_notification()
|
||||
}).catch(() => {
|
||||
}).finally(() => {
|
||||
setSubmitting(false);
|
||||
});
|
||||
},
|
||||
});
|
||||
|
||||
const handleDescriptionChange = (event) => {
|
||||
formik.setFieldValue("description", event.target.value)
|
||||
};
|
||||
const handleNextStateIDChange = (event) => {
|
||||
formik.setFieldValue("next_state_id", event.target.value)
|
||||
};
|
||||
return (
|
||||
<>
|
||||
<DialogContent>
|
||||
<Stack spacing={2}>
|
||||
<Stack>
|
||||
<TextField
|
||||
name="description"
|
||||
multiline
|
||||
rows={8}
|
||||
label={t("UpdateDialog.description")}
|
||||
value={formik.values.description}
|
||||
onChange={handleDescriptionChange}
|
||||
fullWidth
|
||||
variant="outlined"
|
||||
sx={{mt: 1}}
|
||||
onBlur={formik.handleBlur("description")}
|
||||
error={
|
||||
formik.touched.description && Boolean(formik.errors.description)
|
||||
}
|
||||
helperText={formik.touched.description && formik.errors.description}
|
||||
/>
|
||||
</Stack>
|
||||
<Stack>
|
||||
<FormControl
|
||||
error={
|
||||
formik.touched.next_state_id &&
|
||||
Boolean(formik.errors.next_state_id)
|
||||
} fullWidth>
|
||||
<InputLabel>{t("UpdateDialog.next-state-id")}</InputLabel>
|
||||
<Select
|
||||
labelId="next_state_id"
|
||||
id="next_state_id"
|
||||
value={formik.values.next_state_id}
|
||||
label={t("UpdateDialog.next-state-id")}
|
||||
onChange={handleNextStateIDChange}
|
||||
onBlur={formik.handleBlur("next_state_id")}
|
||||
>
|
||||
{loan_state_navgan ? (loan_state_navgan.map((item) => {
|
||||
return (
|
||||
<MenuItem key={item.id} value={item.id}>{item.name}</MenuItem>
|
||||
)
|
||||
})) : null}
|
||||
</Select>
|
||||
<FormHelperText>
|
||||
{formik.touched.next_state_id && formik.errors.next_state_id}
|
||||
</FormHelperText>
|
||||
</FormControl>
|
||||
</Stack>
|
||||
</Stack>
|
||||
</DialogContent>
|
||||
<DialogActions>
|
||||
<Button onClick={() => setOpenConfirmDialog(false)} variant="outlined" color="secondary"
|
||||
disabled={formik.isSubmitting} autoFocus>
|
||||
{t("UpdateDialog.button-cancel")}
|
||||
</Button>
|
||||
<Button onClick={formik.handleSubmit} variant="contained" color="primary"
|
||||
disabled={formik.isSubmitting || !formik.dirty || !formik.isValid}>
|
||||
{t("UpdateDialog.button-update")}
|
||||
</Button>
|
||||
</DialogActions>
|
||||
</>
|
||||
)
|
||||
}
|
||||
export default UpdateContent
|
||||
@@ -0,0 +1,30 @@
|
||||
import {Dialog, DialogTitle, IconButton, Tooltip} from "@mui/material";
|
||||
import {useTranslations} from "next-intl";
|
||||
import ChangeCircleIcon from '@mui/icons-material/ChangeCircle';
|
||||
import {useState} from "react";
|
||||
import UpdateContent from "./UpdateContent";
|
||||
|
||||
const Update = ({rowId, mutate}) => {
|
||||
const t = useTranslations();
|
||||
const [openConfirmDialog, setOpenConfirmDialog] = useState(false);
|
||||
return (
|
||||
<>
|
||||
<Tooltip title={t("UpdateDialog.update-tooltip")}>
|
||||
<IconButton
|
||||
color="primary"
|
||||
onClick={() => {
|
||||
setOpenConfirmDialog(true)
|
||||
}}
|
||||
>
|
||||
<ChangeCircleIcon/>
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
<Dialog fullWidth open={openConfirmDialog}
|
||||
PaperProps={{sx: {boxShadow: 'rgba(60, 64, 67, 0.3) 0px 1px 16px 0px, rgba(60, 64, 67, 0.15) 0px 1px 10px 0px'}}}>
|
||||
<DialogTitle>{t("UpdateDialog.update")}</DialogTitle>
|
||||
<UpdateContent mutate={mutate} rowId={rowId} setOpenConfirmDialog={setOpenConfirmDialog}/>
|
||||
</Dialog>
|
||||
</>
|
||||
)
|
||||
}
|
||||
export default Update
|
||||
@@ -1,14 +1,13 @@
|
||||
import {Box} from "@mui/material";
|
||||
import Update from "./Form/UpdateForm"
|
||||
|
||||
const TableRowActions = ({row, mutate, fetchUrl}) => {
|
||||
const TableRowActions = ({row, mutate}) => {
|
||||
|
||||
return (
|
||||
<Box sx={{display: "flex", flexWrap: "nowrap", gap: "8px"}}>
|
||||
<Update
|
||||
rowId={row.getValue("id")}
|
||||
mutate={mutate}
|
||||
fetchUrl={fetchUrl}
|
||||
/>
|
||||
</Box>
|
||||
);
|
||||
|
||||
@@ -1,4 +1,3 @@
|
||||
import DashboardLayouts from "@/layouts/dashboardLayouts";
|
||||
import {Box, Typography} from "@mui/material";
|
||||
import {useMemo} from "react";
|
||||
import {GET_LOAN_MANAGEMENT_NAVGAN} from "@/core/data/apiRoutes";
|
||||
@@ -134,31 +133,30 @@ function DashboardNavganLoanManagementComponent() {
|
||||
],
|
||||
[]
|
||||
);
|
||||
|
||||
return (
|
||||
<DashboardLayouts>
|
||||
<Box sx={{px: 3}}>
|
||||
<DataTable
|
||||
tableUrl={GET_LOAN_MANAGEMENT_NAVGAN}
|
||||
columns={columns}
|
||||
selectableRow={false}
|
||||
enableCustomToolbar={false}
|
||||
enableLastUpdate={true}
|
||||
sorting={[{
|
||||
id: 'id', desc: false
|
||||
}]}
|
||||
enablePinning={true}
|
||||
enableDensityToggle={false}
|
||||
initialState={{density: 'compact'}} //compact (small) //comfortable (medium) //spacious (large)
|
||||
enableColumnFilters={true}
|
||||
enableHiding={true}
|
||||
enableFullScreenToggle={false}
|
||||
enableGlobalFilter={false}
|
||||
enableColumnResizing={false} // if you want true this you should change renderRowActions props ** see https://www.material-react-table.com/docs/guides/row-actions
|
||||
enableRowActions={true}
|
||||
TableRowAction={TableRowActions}
|
||||
/>
|
||||
</Box>
|
||||
</DashboardLayouts>
|
||||
<Box sx={{px: 3}}>
|
||||
<DataTable
|
||||
tableUrl={GET_LOAN_MANAGEMENT_NAVGAN}
|
||||
columns={columns}
|
||||
selectableRow={false}
|
||||
enableCustomToolbar={false}
|
||||
enableLastUpdate={true}
|
||||
sorting={[{
|
||||
id: 'id', desc: false
|
||||
}]}
|
||||
enablePinning={true}
|
||||
enableDensityToggle={false}
|
||||
initialState={{density: 'compact'}} //compact (small) //comfortable (medium) //spacious (large)
|
||||
enableColumnFilters={true}
|
||||
enableHiding={true}
|
||||
enableFullScreenToggle={false}
|
||||
enableGlobalFilter={false}
|
||||
enableColumnResizing={false} // if you want true this you should change renderRowActions props ** see https://www.material-react-table.com/docs/guides/row-actions
|
||||
enableRowActions={true}
|
||||
TableRowAction={TableRowActions}
|
||||
/>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
@@ -1,143 +0,0 @@
|
||||
import {useTranslations} from "next-intl";
|
||||
import {useState} from "react";
|
||||
import {
|
||||
Button,
|
||||
Dialog,
|
||||
DialogActions,
|
||||
DialogContent,
|
||||
DialogTitle,
|
||||
IconButton,
|
||||
Stack,
|
||||
TextField,
|
||||
Tooltip,
|
||||
Typography
|
||||
} from "@mui/material";
|
||||
import ThumbUpAltIcon from "@mui/icons-material/ThumbUpAlt";
|
||||
import UploadSystem from "@/core/components/UploadSystem";
|
||||
import useDirection from "@/lib/app/hooks/useDirection";
|
||||
import {useFormik} from "formik";
|
||||
import UploadFileNotification from "@/core/components/notifications/UploadFileNotification";
|
||||
import {CONFIRM_NAVGAN_PROVINCE_MANAGER} from "@/core/data/apiRoutes";
|
||||
import useRequest from "@/lib/app/hooks/useRequest";
|
||||
import useNotification from "@/lib/app/hooks/useNotification";
|
||||
|
||||
|
||||
const Confirm = ({rowId, fetchUrl, mutate}) => {
|
||||
const t = useTranslations();
|
||||
const {directionApp} = useDirection();
|
||||
const [selectedImage, setSelectedImage] = useState("");
|
||||
const [fileType, setfileType] = useState(null);
|
||||
const [fileName, setfileName] = useState(null);
|
||||
const [showAddIcon, setShowAddIcon] = useState(true);
|
||||
const [openConfirmDialog, setOpenConfirmDialog] = useState(false);
|
||||
const requestServer = useRequest({auth: true})
|
||||
const {update_notification} = useNotification()
|
||||
|
||||
const formik = useFormik({
|
||||
initialValues: {
|
||||
description: "",
|
||||
confirm_img: null
|
||||
},
|
||||
onSubmit: (values, {setSubmitting}) => {
|
||||
const formData = new FormData();
|
||||
if (values.description != "") formData.append("expert_description", values.description);
|
||||
if (values.confirm_img != null) formData.append("attachment", values.confirm_img);
|
||||
|
||||
requestServer(`${CONFIRM_NAVGAN_PROVINCE_MANAGER}/${rowId}`, 'post', {
|
||||
data: formData,
|
||||
}).then((response) => {
|
||||
mutate(fetchUrl)
|
||||
update_notification()
|
||||
}).catch(() => {
|
||||
}).finally(() => {
|
||||
setSubmitting(false);
|
||||
});
|
||||
},
|
||||
});
|
||||
|
||||
const handleDescriptionChange = (event) => {
|
||||
formik.setFieldValue("description", event.target.value)
|
||||
};
|
||||
const handleUploadChange = (event) => {
|
||||
const uploadedFile = event.target?.files?.[0];
|
||||
if (uploadedFile) {
|
||||
const maxFileSize = 2 * 1024 * 1024;
|
||||
if (uploadedFile.size > maxFileSize) {
|
||||
UploadFileNotification(t);
|
||||
event.target.value = "";
|
||||
return;
|
||||
}
|
||||
|
||||
const fileType = event.target?.files?.[0].type;
|
||||
const fileName = event.target?.files?.[0].name;
|
||||
setSelectedImage(URL.createObjectURL(uploadedFile));
|
||||
setfileType(fileType);
|
||||
setfileName(fileName);
|
||||
formik.setFieldValue("confirm_img", uploadedFile);
|
||||
setShowAddIcon(false);
|
||||
}
|
||||
};
|
||||
return (
|
||||
<>
|
||||
<Tooltip title={t("ConfirmDialog.confirm")}>
|
||||
<IconButton
|
||||
color="primary"
|
||||
onClick={() => {
|
||||
setOpenConfirmDialog(true)
|
||||
}}
|
||||
>
|
||||
<ThumbUpAltIcon/>
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
<Dialog fullWidth open={openConfirmDialog}
|
||||
PaperProps={{sx: {boxShadow: 'rgba(60, 64, 67, 0.3) 0px 1px 16px 0px, rgba(60, 64, 67, 0.15) 0px 1px 10px 0px'}}}>
|
||||
<DialogTitle>{t("ConfirmDialog.confirm")}</DialogTitle>
|
||||
<DialogContent>
|
||||
<Stack spacing={2}>
|
||||
<Stack>
|
||||
<TextField
|
||||
name="description"
|
||||
multiline
|
||||
rows={8}
|
||||
label={<>
|
||||
<span>{t("ConfirmDialog.description")}</span><small>{t("ConfirmDialog.optional")}</small></>}
|
||||
value={formik.values.description}
|
||||
onChange={handleDescriptionChange}
|
||||
fullWidth
|
||||
variant="outlined"
|
||||
sx={{mt: 1}}
|
||||
/>
|
||||
</Stack>
|
||||
<Stack>
|
||||
<Typography>{t("UploadSystem.upload_file")}{t("UploadSystem.optional")}</Typography>
|
||||
<UploadSystem
|
||||
selectedImage={selectedImage}
|
||||
handleUploadChange={handleUploadChange} // Pass the updated function directly
|
||||
setselectedImage={setSelectedImage}
|
||||
setFieldValue={formik.setFieldValue} // Remove props.setFieldValue, use formik.setFieldValue
|
||||
fieldname="confirm_img"
|
||||
fileType={fileType}
|
||||
fileName={fileName}
|
||||
imageAlt={t("app_name")}
|
||||
imageSize={[250, 150]}
|
||||
setShowAddIcon={setShowAddIcon}
|
||||
showAddIcon={showAddIcon}
|
||||
/>
|
||||
</Stack>
|
||||
</Stack>
|
||||
</DialogContent>
|
||||
<DialogActions>
|
||||
<Button onClick={() => setOpenConfirmDialog(false)} variant="outlined" color="secondary"
|
||||
disabled={formik.isSubmitting} autoFocus>
|
||||
{t("ConfirmDialog.button-cancel")}
|
||||
</Button>
|
||||
<Button onClick={formik.handleSubmit} variant="contained" color="primary"
|
||||
disabled={formik.isSubmitting}>
|
||||
{t("ConfirmDialog.button-confirm")}
|
||||
</Button>
|
||||
</DialogActions>
|
||||
</Dialog>
|
||||
</>
|
||||
);
|
||||
};
|
||||
export default Confirm;
|
||||
@@ -0,0 +1,117 @@
|
||||
import UploadSystem from "@/core/components/UploadSystem";
|
||||
import useNotification from "@/lib/app/hooks/useNotification";
|
||||
import useRequest from "@/lib/app/hooks/useRequest";
|
||||
import {Button, DialogActions, DialogContent, Stack, TextField, Typography} from "@mui/material"
|
||||
import {useFormik} from "formik";
|
||||
import {useTranslations} from "next-intl";
|
||||
import {CONFIRM_NAVGAN_PROVINCE_MANAGER} from "@/core/data/apiRoutes";
|
||||
import UploadFileNotification from "@/core/components/notifications/UploadFileNotification";
|
||||
import {useState} from "react";
|
||||
|
||||
const ConfirmContent = ({rowId, mutate, setOpenConfirmDialog}) => {
|
||||
const t = useTranslations();
|
||||
const [selectedImage, setSelectedImage] = useState("");
|
||||
const [fileType, setfileType] = useState(null);
|
||||
const [fileName, setfileName] = useState(null);
|
||||
const [showAddIcon, setShowAddIcon] = useState(true);
|
||||
const requestServer = useRequest({auth: true})
|
||||
const {update_notification} = useNotification()
|
||||
|
||||
const formik = useFormik({
|
||||
initialValues: {
|
||||
description: "",
|
||||
confirm_img: null
|
||||
},
|
||||
onSubmit: (values, {setSubmitting}) => {
|
||||
const formData = new FormData();
|
||||
if (values.description != "") formData.append("expert_description", values.description);
|
||||
if (values.confirm_img != null) formData.append("attachment", values.confirm_img);
|
||||
|
||||
requestServer(`${CONFIRM_NAVGAN_PROVINCE_MANAGER}/${rowId}`, 'post', {
|
||||
data: formData,
|
||||
}).then((response) => {
|
||||
setOpenConfirmDialog(false)
|
||||
mutate()
|
||||
update_notification()
|
||||
}).catch(() => {
|
||||
}).finally(() => {
|
||||
setSubmitting(false);
|
||||
});
|
||||
},
|
||||
});
|
||||
|
||||
const handleDescriptionChange = (event) => {
|
||||
formik.setFieldValue("description", event.target.value)
|
||||
};
|
||||
|
||||
const handleUploadChange = (event) => {
|
||||
const uploadedFile = event.target?.files?.[0];
|
||||
if (uploadedFile) {
|
||||
const maxFileSize = 2 * 1024 * 1024;
|
||||
if (uploadedFile.size > maxFileSize) {
|
||||
UploadFileNotification(t);
|
||||
event.target.value = "";
|
||||
return;
|
||||
}
|
||||
|
||||
const fileType = event.target?.files?.[0].type;
|
||||
const fileName = event.target?.files?.[0].name;
|
||||
setSelectedImage(URL.createObjectURL(uploadedFile));
|
||||
setfileType(fileType);
|
||||
setfileName(fileName);
|
||||
formik.setFieldValue("confirm_img", uploadedFile);
|
||||
setShowAddIcon(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<DialogContent>
|
||||
<Stack spacing={2}>
|
||||
<Stack>
|
||||
<TextField
|
||||
name="description"
|
||||
multiline
|
||||
rows={8}
|
||||
label={<>
|
||||
<span>{t("ConfirmDialog.description")}</span><small>{t("ConfirmDialog.optional")}</small></>}
|
||||
value={formik.values.description}
|
||||
onChange={handleDescriptionChange}
|
||||
fullWidth
|
||||
variant="outlined"
|
||||
sx={{mt: 1}}
|
||||
/>
|
||||
</Stack>
|
||||
<Stack>
|
||||
<Typography>{t("UploadSystem.upload_file")}{t("UploadSystem.optional")}</Typography>
|
||||
<UploadSystem
|
||||
selectedImage={selectedImage}
|
||||
handleUploadChange={handleUploadChange} // Pass the updated function directly
|
||||
setselectedImage={setSelectedImage}
|
||||
setFieldValue={formik.setFieldValue} // Remove props.setFieldValue, use formik.setFieldValue
|
||||
fieldname="confirm_img"
|
||||
fileType={fileType}
|
||||
fileName={fileName}
|
||||
imageAlt={t("app_name")}
|
||||
imageSize={[250, 150]}
|
||||
setShowAddIcon={setShowAddIcon}
|
||||
showAddIcon={showAddIcon}
|
||||
/>
|
||||
</Stack>
|
||||
</Stack>
|
||||
</DialogContent>
|
||||
<DialogActions>
|
||||
<Button onClick={() => setOpenConfirmDialog(false)} variant="outlined" color="secondary"
|
||||
disabled={formik.isSubmitting} autoFocus>
|
||||
{t("ConfirmDialog.button-cancel")}
|
||||
</Button>
|
||||
<Button onClick={formik.handleSubmit} variant="contained" color="primary"
|
||||
disabled={formik.isSubmitting}>
|
||||
{t("ConfirmDialog.button-confirm")}
|
||||
</Button>
|
||||
</DialogActions>
|
||||
</>
|
||||
)
|
||||
|
||||
}
|
||||
export default ConfirmContent
|
||||
@@ -0,0 +1,31 @@
|
||||
import {Dialog, DialogTitle, IconButton, Tooltip} from "@mui/material";
|
||||
import {useTranslations} from "next-intl";
|
||||
import ThumbUpAltIcon from "@mui/icons-material/ThumbUpAlt";
|
||||
import {useState} from "react";
|
||||
import ConfirmContent from "./ConfirmContent";
|
||||
|
||||
const Confirm = ({rowId, mutate}) => {
|
||||
const t = useTranslations();
|
||||
const [openConfirmDialog, setOpenConfirmDialog] = useState(false);
|
||||
return (
|
||||
<>
|
||||
<Tooltip title={t("ConfirmDialog.confirm")}>
|
||||
<IconButton
|
||||
color="primary"
|
||||
onClick={() => {
|
||||
setOpenConfirmDialog(true)
|
||||
}}
|
||||
>
|
||||
<ThumbUpAltIcon/>
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
<Dialog fullWidth open={openConfirmDialog}
|
||||
PaperProps={{sx: {boxShadow: 'rgba(60, 64, 67, 0.3) 0px 1px 16px 0px, rgba(60, 64, 67, 0.15) 0px 1px 10px 0px'}}}>
|
||||
<DialogTitle>{t("ConfirmDialog.confirm")}</DialogTitle>
|
||||
<ConfirmContent mutate={mutate} rowId={rowId} setOpenConfirmDialog={setOpenConfirmDialog}/>
|
||||
</Dialog>
|
||||
</>
|
||||
)
|
||||
|
||||
}
|
||||
export default Confirm;
|
||||
@@ -1,148 +0,0 @@
|
||||
import {REJECT_NAVGAN_PROVINCE_MANAGER} from "@/core/data/apiRoutes";
|
||||
import {
|
||||
Button,
|
||||
Dialog,
|
||||
DialogActions,
|
||||
DialogContent,
|
||||
DialogTitle,
|
||||
IconButton,
|
||||
Stack,
|
||||
TextField,
|
||||
Tooltip,
|
||||
Typography,
|
||||
} from "@mui/material";
|
||||
import {useTranslations} from "next-intl";
|
||||
import {useFormik} from "formik";
|
||||
import * as Yup from "yup";
|
||||
import {useState} from "react";
|
||||
import UploadSystem from "@/core/components/UploadSystem";
|
||||
import UploadFileNotification from "@/core/components/notifications/UploadFileNotification";
|
||||
import useDirection from "@/lib/app/hooks/useDirection";
|
||||
import ThumbDownIcon from "@mui/icons-material/ThumbDown";
|
||||
import useRequest from "@/lib/app/hooks/useRequest";
|
||||
import useNotification from "@/lib/app/hooks/useNotification";
|
||||
|
||||
|
||||
const Reject = ({rowId, fetchUrl, mutate}) => {
|
||||
const [selectedImage, setSelectedImage] = useState("");
|
||||
const [fileType, setfileType] = useState(null);
|
||||
const [fileName, setfileName] = useState(null);
|
||||
const [showAddIcon, setShowAddIcon] = useState(true);
|
||||
const t = useTranslations();
|
||||
const {directionApp} = useDirection();
|
||||
const [openRejectDialog, setOpenRejectDialog] = useState(false);
|
||||
const requestServer = useRequest({auth: true})
|
||||
const {update_notification} = useNotification()
|
||||
|
||||
const validationSchema = Yup.object().shape({
|
||||
description: Yup.string().required(t("RejectDialog.description_error")),
|
||||
});
|
||||
|
||||
const formik = useFormik({
|
||||
initialValues: {
|
||||
description: "",
|
||||
reject_img: null
|
||||
},
|
||||
validationSchema,
|
||||
onSubmit: (values, {setSubmitting}) => {
|
||||
const formData = new FormData();
|
||||
formData.append("expert_description", values.description);
|
||||
if (values.reject_img != null) formData.append("attachment", values.reject_img);
|
||||
|
||||
requestServer(`${REJECT_NAVGAN_PROVINCE_MANAGER}/${rowId}`, 'post', {
|
||||
data: formData,
|
||||
}).then((response) => {
|
||||
mutate(fetchUrl)
|
||||
update_notification()
|
||||
}).catch(() => {
|
||||
}).finally(() => {
|
||||
setSubmitting(false);
|
||||
});
|
||||
},
|
||||
});
|
||||
|
||||
const handleDescriptionChange = (event) => {
|
||||
formik.setFieldValue("description", event.target.value);
|
||||
formik.handleChange(event);
|
||||
};
|
||||
const handleUploadChange = (event) => {
|
||||
const uploadedFile = event.target?.files?.[0];
|
||||
if (uploadedFile) {
|
||||
const maxFileSize = 2 * 1024 * 1024;
|
||||
if (uploadedFile.size > maxFileSize) {
|
||||
UploadFileNotification(t);
|
||||
event.target.value = "";
|
||||
return;
|
||||
}
|
||||
const fileType = event.target?.files?.[0].type;
|
||||
const fileName = event.target?.files?.[0].name;
|
||||
setSelectedImage(URL.createObjectURL(uploadedFile));
|
||||
setfileType(fileType);
|
||||
setfileName(fileName);
|
||||
formik.setFieldValue("reject_img", uploadedFile);
|
||||
setShowAddIcon(false);
|
||||
}
|
||||
};
|
||||
return (
|
||||
<>
|
||||
<Tooltip title={t("RejectDialog.reject")}>
|
||||
<IconButton color="primary" onClick={() => setOpenRejectDialog(true)}>
|
||||
<ThumbDownIcon/>
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
<Dialog fullWidth open={openRejectDialog}
|
||||
PaperProps={{sx: {boxShadow: 'rgba(60, 64, 67, 0.3) 0px 1px 16px 0px, rgba(60, 64, 67, 0.15) 0px 1px 10px 0px'}}}>
|
||||
<DialogTitle>{t("RejectDialog.reject")}</DialogTitle>
|
||||
<DialogContent>
|
||||
<Stack spacing={2}>
|
||||
<Stack>
|
||||
<TextField
|
||||
name="description"
|
||||
multiline
|
||||
rows={8}
|
||||
label={t("RejectDialog.description")}
|
||||
value={formik.values.description}
|
||||
onChange={handleDescriptionChange}
|
||||
onBlur={formik.handleBlur("description")}
|
||||
error={
|
||||
formik.touched.description && Boolean(formik.errors.description)
|
||||
}
|
||||
helperText={formik.touched.description && formik.errors.description}
|
||||
fullWidth
|
||||
variant="outlined"
|
||||
sx={{mt: 1}}
|
||||
/>
|
||||
</Stack>
|
||||
<Stack>
|
||||
<Typography>{t("UploadSystem.upload_file")}{t("UploadSystem.optional")}</Typography>
|
||||
<UploadSystem
|
||||
selectedImage={selectedImage}
|
||||
handleUploadChange={handleUploadChange} // Pass the updated function directly
|
||||
setselectedImage={setSelectedImage}
|
||||
setFieldValue={formik.setFieldValue} // Remove props.setFieldValue, use formik.setFieldValue
|
||||
fieldname="reject_img"
|
||||
fileType={fileType}
|
||||
fileName={fileName}
|
||||
imageAlt={t("app_name")}
|
||||
imageSize={[250 /*width*/, 150 /*height*/]}
|
||||
setShowAddIcon={setShowAddIcon}
|
||||
showAddIcon={showAddIcon}
|
||||
/>
|
||||
</Stack>
|
||||
</Stack>
|
||||
</DialogContent>
|
||||
<DialogActions>
|
||||
<Button onClick={() => setOpenRejectDialog(false)} variant="outlined" color="secondary"
|
||||
disabled={formik.isSubmitting} autoFocus>
|
||||
{t("RejectDialog.button-cancel")}
|
||||
</Button>
|
||||
<Button onClick={formik.handleSubmit} variant="contained" color="primary"
|
||||
disabled={formik.isSubmitting}>
|
||||
{t("RejectDialog.button-reject")}
|
||||
</Button>
|
||||
</DialogActions>
|
||||
</Dialog>
|
||||
</>
|
||||
);
|
||||
};
|
||||
export default Reject;
|
||||
@@ -0,0 +1,123 @@
|
||||
import UploadSystem from "@/core/components/UploadSystem"
|
||||
import useNotification from "@/lib/app/hooks/useNotification";
|
||||
import useRequest from "@/lib/app/hooks/useRequest";
|
||||
import {Button, DialogActions, DialogContent, Stack, TextField, Typography} from "@mui/material"
|
||||
import {useFormik} from "formik";
|
||||
import {useTranslations} from "next-intl";
|
||||
import {useState} from "react";
|
||||
import * as Yup from "yup";
|
||||
import {REJECT_NAVGAN_PROVINCE_MANAGER} from "@/core/data/apiRoutes";
|
||||
|
||||
const RejectContent = ({rowId, mutate, setOpenRejectDialog}) => {
|
||||
const [selectedImage, setSelectedImage] = useState("");
|
||||
const [fileType, setfileType] = useState(null);
|
||||
const [fileName, setfileName] = useState(null);
|
||||
const [showAddIcon, setShowAddIcon] = useState(true);
|
||||
const t = useTranslations();
|
||||
const requestServer = useRequest({auth: true})
|
||||
const {update_notification} = useNotification()
|
||||
|
||||
const validationSchema = Yup.object().shape({
|
||||
description: Yup.string().required(t("RejectDialog.description_error")),
|
||||
});
|
||||
|
||||
const formik = useFormik({
|
||||
initialValues: {
|
||||
description: "",
|
||||
reject_img: null
|
||||
},
|
||||
validationSchema,
|
||||
onSubmit: (values, {setSubmitting}) => {
|
||||
const formData = new FormData();
|
||||
formData.append("expert_description", values.description);
|
||||
if (values.reject_img != null) formData.append("attachment", values.reject_img);
|
||||
|
||||
requestServer(`${REJECT_NAVGAN_PROVINCE_MANAGER}/${rowId}`, 'post', {
|
||||
data: formData,
|
||||
}).then((response) => {
|
||||
setOpenRejectDialog(false)
|
||||
mutate()
|
||||
update_notification()
|
||||
}).catch(() => {
|
||||
}).finally(() => {
|
||||
setSubmitting(false);
|
||||
});
|
||||
},
|
||||
});
|
||||
|
||||
const handleDescriptionChange = (event) => {
|
||||
formik.setFieldValue("description", event.target.value);
|
||||
formik.handleChange(event);
|
||||
};
|
||||
const handleUploadChange = (event) => {
|
||||
const uploadedFile = event.target?.files?.[0];
|
||||
if (uploadedFile) {
|
||||
const maxFileSize = 2 * 1024 * 1024;
|
||||
if (uploadedFile.size > maxFileSize) {
|
||||
UploadFileNotification(t);
|
||||
event.target.value = "";
|
||||
return;
|
||||
}
|
||||
const fileType = event.target?.files?.[0].type;
|
||||
const fileName = event.target?.files?.[0].name;
|
||||
setSelectedImage(URL.createObjectURL(uploadedFile));
|
||||
setfileType(fileType);
|
||||
setfileName(fileName);
|
||||
formik.setFieldValue("reject_img", uploadedFile);
|
||||
setShowAddIcon(false);
|
||||
}
|
||||
};
|
||||
return (
|
||||
<>
|
||||
<DialogContent>
|
||||
<Stack spacing={2}>
|
||||
<Stack>
|
||||
<TextField
|
||||
name="description"
|
||||
multiline
|
||||
rows={8}
|
||||
label={t("RejectDialog.description")}
|
||||
value={formik.values.description}
|
||||
onChange={handleDescriptionChange}
|
||||
onBlur={formik.handleBlur("description")}
|
||||
error={
|
||||
formik.touched.description && Boolean(formik.errors.description)
|
||||
}
|
||||
helperText={formik.touched.description && formik.errors.description}
|
||||
fullWidth
|
||||
variant="outlined"
|
||||
sx={{mt: 1}}
|
||||
/>
|
||||
</Stack>
|
||||
<Stack>
|
||||
<Typography>{t("UploadSystem.upload_file")}{t("UploadSystem.optional")}</Typography>
|
||||
<UploadSystem
|
||||
selectedImage={selectedImage}
|
||||
handleUploadChange={handleUploadChange} // Pass the updated function directly
|
||||
setselectedImage={setSelectedImage}
|
||||
setFieldValue={formik.setFieldValue} // Remove props.setFieldValue, use formik.setFieldValue
|
||||
fieldname="reject_img"
|
||||
fileType={fileType}
|
||||
fileName={fileName}
|
||||
imageAlt={t("app_name")}
|
||||
imageSize={[250 /*width*/, 150 /*height*/]}
|
||||
setShowAddIcon={setShowAddIcon}
|
||||
showAddIcon={showAddIcon}
|
||||
/>
|
||||
</Stack>
|
||||
</Stack>
|
||||
</DialogContent>
|
||||
<DialogActions>
|
||||
<Button onClick={() => setOpenRejectDialog(false)} variant="outlined" color="secondary"
|
||||
disabled={formik.isSubmitting} autoFocus>
|
||||
{t("RejectDialog.button-cancel")}
|
||||
</Button>
|
||||
<Button onClick={formik.handleSubmit} variant="contained" color="primary"
|
||||
disabled={formik.isSubmitting || !formik.dirty || !formik.isValid}>
|
||||
{t("RejectDialog.button-reject")}
|
||||
</Button>
|
||||
</DialogActions>
|
||||
</>
|
||||
)
|
||||
}
|
||||
export default RejectContent
|
||||
@@ -0,0 +1,25 @@
|
||||
import {Dialog, DialogTitle, IconButton, Tooltip} from "@mui/material"
|
||||
import {useTranslations} from "next-intl";
|
||||
import {useState} from "react";
|
||||
import RejectContent from "./RejectContent";
|
||||
import ThumbDownIcon from "@mui/icons-material/ThumbDown";
|
||||
|
||||
const Reject = ({rowId, mutate}) => {
|
||||
const t = useTranslations();
|
||||
const [openRejectDialog, setOpenRejectDialog] = useState(false);
|
||||
return (
|
||||
<>
|
||||
<Tooltip title={t("RejectDialog.reject")}>
|
||||
<IconButton color="primary" onClick={() => setOpenRejectDialog(true)}>
|
||||
<ThumbDownIcon/>
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
<Dialog fullWidth open={openRejectDialog}
|
||||
PaperProps={{sx: {boxShadow: 'rgba(60, 64, 67, 0.3) 0px 1px 16px 0px, rgba(60, 64, 67, 0.15) 0px 1px 10px 0px'}}}>
|
||||
<DialogTitle>{t("RejectDialog.reject")}</DialogTitle>
|
||||
<RejectContent mutate={mutate} rowId={rowId} setOpenRejectDialog={setOpenRejectDialog}/>
|
||||
</Dialog>
|
||||
</>
|
||||
)
|
||||
}
|
||||
export default Reject
|
||||
@@ -1,19 +1,17 @@
|
||||
import {Box} from "@mui/material";
|
||||
import ConfirmForm from "./Form/ConfirmForm"
|
||||
import RejectForm from "./Form/RejectForm"
|
||||
import Confirm from "./Form/ConfirmForm";
|
||||
import Reject from "./Form/RejectForm";
|
||||
|
||||
const TableRow = ({row, mutate, fetchUrl}) => {
|
||||
const TableRow = ({row, mutate}) => {
|
||||
|
||||
return (
|
||||
<Box sx={{display: "flex", flexWrap: "nowrap", gap: "8px"}}>
|
||||
<ConfirmForm
|
||||
<Confirm
|
||||
rowId={row.getValue("id")}
|
||||
mutate={mutate}
|
||||
fetchUrl={fetchUrl}
|
||||
/>
|
||||
<RejectForm
|
||||
<Reject
|
||||
rowId={row.getValue("id")}
|
||||
fetchUrl={fetchUrl}
|
||||
mutate={mutate}
|
||||
/>
|
||||
</Box>
|
||||
|
||||
@@ -1,4 +1,3 @@
|
||||
import DashboardLayouts from "@/layouts/dashboardLayouts";
|
||||
import {Box, Typography} from "@mui/material";
|
||||
import {useMemo} from "react";
|
||||
import {GET_NAVGAN_PROVINCE_MANAGER} from "@/core/data/apiRoutes";
|
||||
@@ -156,31 +155,30 @@ function DashboardNavganProvinceManagerComponent() {
|
||||
],
|
||||
[]
|
||||
);
|
||||
|
||||
return (
|
||||
<DashboardLayouts>
|
||||
<Box sx={{px: 3}}>
|
||||
<DataTable
|
||||
tableUrl={GET_NAVGAN_PROVINCE_MANAGER}
|
||||
columns={columns}
|
||||
selectableRow={false}
|
||||
enableCustomToolbar={false}
|
||||
enableLastUpdate={true}
|
||||
sorting={[{
|
||||
id: 'id', desc: false
|
||||
}]}
|
||||
enablePinning={true}
|
||||
enableDensityToggle={false}
|
||||
initialState={{density: 'compact'}} //compact (small) //comfortable (medium) //spacious (large)
|
||||
enableColumnFilters={true}
|
||||
enableHiding={true}
|
||||
enableFullScreenToggle={false}
|
||||
enableGlobalFilter={false}
|
||||
enableColumnResizing={false} // if you want true this you shold change renderRowActions props ** see https://www.material-react-table.com/docs/guides/row-actions
|
||||
enableRowActions={true}
|
||||
TableRowAction={TableRowActions}
|
||||
/>
|
||||
</Box>
|
||||
</DashboardLayouts>
|
||||
<Box sx={{px: 3}}>
|
||||
<DataTable
|
||||
tableUrl={GET_NAVGAN_PROVINCE_MANAGER}
|
||||
columns={columns}
|
||||
selectableRow={false}
|
||||
enableCustomToolbar={false}
|
||||
enableLastUpdate={true}
|
||||
sorting={[{
|
||||
id: 'id', desc: false
|
||||
}]}
|
||||
enablePinning={true}
|
||||
enableDensityToggle={false}
|
||||
initialState={{density: 'compact'}} //compact (small) //comfortable (medium) //spacious (large)
|
||||
enableColumnFilters={true}
|
||||
enableHiding={true}
|
||||
enableFullScreenToggle={false}
|
||||
enableGlobalFilter={false}
|
||||
enableColumnResizing={false} // if you want true this you shold change renderRowActions props ** see https://www.material-react-table.com/docs/guides/row-actions
|
||||
enableRowActions={true}
|
||||
TableRowAction={TableRowActions}
|
||||
/>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
@@ -1,189 +0,0 @@
|
||||
import {useTranslations} from "next-intl";
|
||||
import {useState} from "react";
|
||||
import {
|
||||
Button,
|
||||
Dialog,
|
||||
DialogActions,
|
||||
DialogContent,
|
||||
DialogTitle,
|
||||
IconButton,
|
||||
Stack,
|
||||
TextField,
|
||||
Tooltip,
|
||||
Typography
|
||||
} from "@mui/material";
|
||||
import ThumbUpAltIcon from "@mui/icons-material/ThumbUpAlt";
|
||||
import UploadSystem from "@/core/components/UploadSystem";
|
||||
import useDirection from "@/lib/app/hooks/useDirection";
|
||||
import {useFormik} from "formik";
|
||||
import UploadFileNotification from "@/core/components/notifications/UploadFileNotification";
|
||||
import * as Yup from "yup";
|
||||
import useRequest from "@/lib/app/hooks/useRequest";
|
||||
import {CONFIRM_PASSENGER_BOSS} from "@/core/data/apiRoutes";
|
||||
import useNotification from "@/lib/app/hooks/useNotification";
|
||||
import PriceField from "@/core/components/PriceField";
|
||||
|
||||
|
||||
const Confirm = ({rowId, fetchUrl, mutate}) => {
|
||||
const t = useTranslations();
|
||||
const {directionApp} = useDirection();
|
||||
const [selectedImage, setSelectedImage] = useState("");
|
||||
const [fileType, setfileType] = useState(null);
|
||||
const [fileName, setfileName] = useState(null);
|
||||
const [showAddIcon, setShowAddIcon] = useState(true);
|
||||
const [openConfirmDialog, setOpenConfirmDialog] = useState(false);
|
||||
const requestServer = useRequest({auth: true})
|
||||
const {update_notification} = useNotification()
|
||||
|
||||
const validationSchema = Yup.object().shape({
|
||||
approved_amount: Yup.mixed().test(
|
||||
"is-number",
|
||||
`${t("ConfirmDialog.approved_amount_number")}`,
|
||||
(value) => !isNaN(value)
|
||||
).test("positive", `${t("ConfirmDialog.approved_amount_positive")}`, (value) => value >= 0)
|
||||
.required(t("ConfirmDialog.approved_amount_error"))
|
||||
});
|
||||
const formik = useFormik({
|
||||
initialValues: {
|
||||
description: "",
|
||||
approved_amount: "",
|
||||
confirm_img: null
|
||||
},
|
||||
validationSchema,
|
||||
onSubmit: (values, {setSubmitting}) => {
|
||||
const formData = new FormData();
|
||||
formData.append("approved_amount", values.approved_amount);
|
||||
if (values.description != "") formData.append("expert_description", values.description);
|
||||
if (values.confirm_img != null) formData.append("attachment", values.confirm_img);
|
||||
|
||||
requestServer(`${CONFIRM_PASSENGER_BOSS}/${rowId}`, 'post', {
|
||||
data: formData,
|
||||
}).then((response) => {
|
||||
mutate(fetchUrl)
|
||||
update_notification()
|
||||
}).catch(() => {
|
||||
}).finally(() => {
|
||||
setSubmitting(false);
|
||||
});
|
||||
},
|
||||
});
|
||||
|
||||
const handleDescriptionChange = (event) => {
|
||||
formik.setFieldValue("description", event.target.value)
|
||||
};
|
||||
const handleAmountChange = (event) => {
|
||||
if (!isNaN(event.target.value)) {
|
||||
formik.setFieldValue("approved_amount", event.target.value)
|
||||
} else {
|
||||
formik.setFieldValue("approved_amount", formik.values.approved_amount)
|
||||
}
|
||||
};
|
||||
const handleUploadChange = (event) => {
|
||||
const uploadedFile = event.target?.files?.[0];
|
||||
if (uploadedFile) {
|
||||
const maxFileSize = 2 * 1024 * 1024;
|
||||
if (uploadedFile.size > maxFileSize) {
|
||||
UploadFileNotification(t);
|
||||
event.target.value = "";
|
||||
return;
|
||||
}
|
||||
|
||||
const fileType = event.target?.files?.[0].type;
|
||||
const fileName = event.target?.files?.[0].name;
|
||||
setSelectedImage(URL.createObjectURL(uploadedFile));
|
||||
setfileType(fileType);
|
||||
setfileName(fileName);
|
||||
formik.setFieldValue("confirm_img", uploadedFile);
|
||||
setShowAddIcon(false);
|
||||
}
|
||||
};
|
||||
return (
|
||||
<>
|
||||
<Tooltip title={t("ConfirmDialog.confirm")}>
|
||||
<IconButton
|
||||
color="primary"
|
||||
onClick={() => {
|
||||
setOpenConfirmDialog(true)
|
||||
}}
|
||||
>
|
||||
<ThumbUpAltIcon/>
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
<Dialog fullWidth open={openConfirmDialog}
|
||||
PaperProps={{sx: {boxShadow: 'rgba(60, 64, 67, 0.3) 0px 1px 16px 0px, rgba(60, 64, 67, 0.15) 0px 1px 10px 0px'}}}>
|
||||
<DialogTitle>{t("ConfirmDialog.confirm")}</DialogTitle>
|
||||
<DialogContent>
|
||||
<Stack spacing={3}>
|
||||
<Stack>
|
||||
<TextField
|
||||
name="description"
|
||||
multiline
|
||||
rows={8}
|
||||
label={<>
|
||||
<span>{t("ConfirmDialog.description")}</span><small>{t("ConfirmDialog.optional")}</small></>}
|
||||
value={formik.values.description}
|
||||
onChange={handleDescriptionChange}
|
||||
fullWidth
|
||||
variant="outlined"
|
||||
sx={{mt: 1}}
|
||||
/>
|
||||
</Stack>
|
||||
<Stack>
|
||||
<PriceField
|
||||
name="approved_amount"
|
||||
label={<>
|
||||
<span>{t("ConfirmDialog.approved_amount")}</span><small>{t("ConfirmDialog.unit")}</small></>}
|
||||
type="text"
|
||||
inputProps={{
|
||||
inputMode: "number",
|
||||
min: 0,
|
||||
pattern: "[0-9]*",
|
||||
}}
|
||||
onChange={handleAmountChange}
|
||||
variant="outlined"
|
||||
value={formik.values.approved_amount}
|
||||
onBlur={formik.handleBlur("approved_amount")}
|
||||
error={
|
||||
formik.touched.approved_amount &&
|
||||
Boolean(formik.errors.approved_amount)
|
||||
}
|
||||
helperText={
|
||||
formik.touched.approved_amount && formik.errors.approved_amount
|
||||
}
|
||||
sx={{mt: 1}}
|
||||
fullWidth
|
||||
/>
|
||||
</Stack>
|
||||
<Stack>
|
||||
<Typography>{t("UploadSystem.upload_file")}{t("UploadSystem.optional")}</Typography>
|
||||
<UploadSystem
|
||||
selectedImage={selectedImage}
|
||||
handleUploadChange={handleUploadChange} // Pass the updated function directly
|
||||
setselectedImage={setSelectedImage}
|
||||
setFieldValue={formik.setFieldValue} // Remove props.setFieldValue, use formik.setFieldValue
|
||||
fieldname="confirm_img"
|
||||
fileType={fileType}
|
||||
fileName={fileName}
|
||||
imageAlt={t("app_name")}
|
||||
imageSize={[250, 150]}
|
||||
setShowAddIcon={setShowAddIcon}
|
||||
showAddIcon={showAddIcon}
|
||||
/>
|
||||
</Stack>
|
||||
</Stack>
|
||||
</DialogContent>
|
||||
<DialogActions>
|
||||
<Button onClick={() => setOpenConfirmDialog(false)} variant="outlined" color="secondary"
|
||||
disabled={formik.isSubmitting} autoFocus>
|
||||
{t("ConfirmDialog.button-cancel")}
|
||||
</Button>
|
||||
<Button onClick={formik.handleSubmit} variant="contained" color="primary"
|
||||
disabled={formik.isSubmitting}>
|
||||
{t("ConfirmDialog.button-confirm")}
|
||||
</Button>
|
||||
</DialogActions>
|
||||
</Dialog>
|
||||
</>
|
||||
);
|
||||
};
|
||||
export default Confirm;
|
||||
@@ -0,0 +1,163 @@
|
||||
import UploadSystem from "@/core/components/UploadSystem";
|
||||
import useNotification from "@/lib/app/hooks/useNotification";
|
||||
import useRequest from "@/lib/app/hooks/useRequest";
|
||||
import {Button, DialogActions, DialogContent, Stack, TextField, Typography} from "@mui/material"
|
||||
import {useFormik} from "formik";
|
||||
import {useTranslations} from "next-intl";
|
||||
import {CONFIRM_PASSENGER_BOSS} from "@/core/data/apiRoutes";
|
||||
import UploadFileNotification from "@/core/components/notifications/UploadFileNotification";
|
||||
import {useState} from "react";
|
||||
import PriceField from "@/core/components/PriceField";
|
||||
import * as Yup from "yup";
|
||||
|
||||
const ConfirmContent = ({rowId, mutate, setOpenConfirmDialog}) => {
|
||||
const t = useTranslations();
|
||||
const [selectedImage, setSelectedImage] = useState("");
|
||||
const [fileType, setfileType] = useState(null);
|
||||
const [fileName, setfileName] = useState(null);
|
||||
const [showAddIcon, setShowAddIcon] = useState(true);
|
||||
const requestServer = useRequest({auth: true})
|
||||
const {update_notification} = useNotification()
|
||||
|
||||
const validationSchema = Yup.object().shape({
|
||||
approved_amount: Yup.mixed().test(
|
||||
"is-number",
|
||||
`${t("ConfirmDialog.approved_amount_number")}`,
|
||||
(value) => !isNaN(value)
|
||||
).test("positive", `${t("ConfirmDialog.approved_amount_positive")}`, (value) => value >= 0)
|
||||
.required(t("ConfirmDialog.approved_amount_error"))
|
||||
});
|
||||
|
||||
const formik = useFormik({
|
||||
initialValues: {
|
||||
description: "",
|
||||
approved_amount: "",
|
||||
confirm_img: null
|
||||
}, validationSchema,
|
||||
onSubmit: (values, {setSubmitting}) => {
|
||||
const formData = new FormData();
|
||||
formData.append("approved_amount", values.approved_amount);
|
||||
if (values.description != "") formData.append("expert_description", values.description);
|
||||
if (values.confirm_img != null) formData.append("attachment", values.confirm_img);
|
||||
|
||||
requestServer(`${CONFIRM_PASSENGER_BOSS}/${rowId}`, 'post', {
|
||||
data: formData,
|
||||
}).then((response) => {
|
||||
setOpenConfirmDialog(false)
|
||||
mutate()
|
||||
update_notification()
|
||||
}).catch(() => {
|
||||
}).finally(() => {
|
||||
setSubmitting(false);
|
||||
});
|
||||
},
|
||||
});
|
||||
|
||||
const handleDescriptionChange = (event) => {
|
||||
formik.setFieldValue("description", event.target.value)
|
||||
};
|
||||
|
||||
const handleUploadChange = (event) => {
|
||||
const uploadedFile = event.target?.files?.[0];
|
||||
if (uploadedFile) {
|
||||
const maxFileSize = 2 * 1024 * 1024;
|
||||
if (uploadedFile.size > maxFileSize) {
|
||||
UploadFileNotification(t);
|
||||
event.target.value = "";
|
||||
return;
|
||||
}
|
||||
|
||||
const fileType = event.target?.files?.[0].type;
|
||||
const fileName = event.target?.files?.[0].name;
|
||||
setSelectedImage(URL.createObjectURL(uploadedFile));
|
||||
setfileType(fileType);
|
||||
setfileName(fileName);
|
||||
formik.setFieldValue("confirm_img", uploadedFile);
|
||||
setShowAddIcon(false);
|
||||
}
|
||||
};
|
||||
const handleAmountChange = (event) => {
|
||||
if (!isNaN(event.target.value)) {
|
||||
formik.setFieldValue("approved_amount", event.target.value)
|
||||
} else {
|
||||
formik.setFieldValue("approved_amount", formik.values.approved_amount)
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<DialogContent>
|
||||
<Stack spacing={2}>
|
||||
<Stack>
|
||||
<TextField
|
||||
name="description"
|
||||
multiline
|
||||
rows={8}
|
||||
label={<>
|
||||
<span>{t("ConfirmDialog.description")}</span><small>{t("ConfirmDialog.optional")}</small></>}
|
||||
value={formik.values.description}
|
||||
onChange={handleDescriptionChange}
|
||||
fullWidth
|
||||
variant="outlined"
|
||||
sx={{mt: 1}}
|
||||
/>
|
||||
</Stack>
|
||||
<Stack>
|
||||
<PriceField
|
||||
name="approved_amount"
|
||||
label={<>
|
||||
<span>{t("ConfirmDialog.approved_amount")}</span><small>{t("ConfirmDialog.unit")}</small></>}
|
||||
type="text"
|
||||
inputProps={{
|
||||
inputMode: "number",
|
||||
min: 0,
|
||||
pattern: "[0-9]*",
|
||||
}}
|
||||
variant="outlined"
|
||||
value={formik.values.approved_amount}
|
||||
onChange={handleAmountChange}
|
||||
onBlur={formik.handleBlur("approved_amount")}
|
||||
error={
|
||||
formik.touched.approved_amount &&
|
||||
Boolean(formik.errors.approved_amount)
|
||||
}
|
||||
helperText={
|
||||
formik.touched.approved_amount && formik.errors.approved_amount
|
||||
}
|
||||
sx={{mt: 1}}
|
||||
fullWidth
|
||||
/>
|
||||
</Stack>
|
||||
<Stack>
|
||||
<Typography>{t("UploadSystem.upload_file")}{t("UploadSystem.optional")}</Typography>
|
||||
<UploadSystem
|
||||
selectedImage={selectedImage}
|
||||
handleUploadChange={handleUploadChange} // Pass the updated function directly
|
||||
setselectedImage={setSelectedImage}
|
||||
setFieldValue={formik.setFieldValue} // Remove props.setFieldValue, use formik.setFieldValue
|
||||
fieldname="confirm_img"
|
||||
fileType={fileType}
|
||||
fileName={fileName}
|
||||
imageAlt={t("app_name")}
|
||||
imageSize={[250, 150]}
|
||||
setShowAddIcon={setShowAddIcon}
|
||||
showAddIcon={showAddIcon}
|
||||
/>
|
||||
</Stack>
|
||||
</Stack>
|
||||
</DialogContent>
|
||||
<DialogActions>
|
||||
<Button onClick={() => setOpenConfirmDialog(false)} variant="outlined" color="secondary"
|
||||
disabled={formik.isSubmitting} autoFocus>
|
||||
{t("ConfirmDialog.button-cancel")}
|
||||
</Button>
|
||||
<Button onClick={formik.handleSubmit} variant="contained" color="primary"
|
||||
disabled={formik.isSubmitting || !formik.dirty || !formik.isValid}>
|
||||
{t("ConfirmDialog.button-confirm")}
|
||||
</Button>
|
||||
</DialogActions>
|
||||
</>
|
||||
)
|
||||
|
||||
}
|
||||
export default ConfirmContent
|
||||
@@ -0,0 +1,31 @@
|
||||
import {Dialog, DialogTitle, IconButton, Tooltip} from "@mui/material";
|
||||
import {useTranslations} from "next-intl";
|
||||
import ThumbUpAltIcon from "@mui/icons-material/ThumbUpAlt";
|
||||
import {useState} from "react";
|
||||
import ConfirmContent from "./ConfirmContent";
|
||||
|
||||
const Confirm = ({rowId, mutate}) => {
|
||||
const t = useTranslations();
|
||||
const [openConfirmDialog, setOpenConfirmDialog] = useState(false);
|
||||
return (
|
||||
<>
|
||||
<Tooltip title={t("ConfirmDialog.confirm")}>
|
||||
<IconButton
|
||||
color="primary"
|
||||
onClick={() => {
|
||||
setOpenConfirmDialog(true)
|
||||
}}
|
||||
>
|
||||
<ThumbUpAltIcon/>
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
<Dialog fullWidth open={openConfirmDialog}
|
||||
PaperProps={{sx: {boxShadow: 'rgba(60, 64, 67, 0.3) 0px 1px 16px 0px, rgba(60, 64, 67, 0.15) 0px 1px 10px 0px'}}}>
|
||||
<DialogTitle>{t("ConfirmDialog.confirm")}</DialogTitle>
|
||||
<ConfirmContent mutate={mutate} rowId={rowId} setOpenConfirmDialog={setOpenConfirmDialog}/>
|
||||
</Dialog>
|
||||
</>
|
||||
)
|
||||
|
||||
}
|
||||
export default Confirm;
|
||||
@@ -1,148 +0,0 @@
|
||||
import {REJECT_PASSENGER_BOSS} from "@/core/data/apiRoutes";
|
||||
import {
|
||||
Button,
|
||||
Dialog,
|
||||
DialogActions,
|
||||
DialogContent,
|
||||
DialogTitle,
|
||||
IconButton,
|
||||
Stack,
|
||||
TextField,
|
||||
Tooltip,
|
||||
Typography,
|
||||
} from "@mui/material";
|
||||
import {useTranslations} from "next-intl";
|
||||
import {useFormik} from "formik";
|
||||
import * as Yup from "yup";
|
||||
import {useState} from "react";
|
||||
import UploadSystem from "@/core/components/UploadSystem";
|
||||
import UploadFileNotification from "@/core/components/notifications/UploadFileNotification";
|
||||
import useDirection from "@/lib/app/hooks/useDirection";
|
||||
import ThumbDownIcon from "@mui/icons-material/ThumbDown";
|
||||
import useRequest from "@/lib/app/hooks/useRequest";
|
||||
import useNotification from "@/lib/app/hooks/useNotification";
|
||||
|
||||
|
||||
const Reject = ({rowId, fetchUrl, mutate}) => {
|
||||
const [selectedImage, setSelectedImage] = useState("");
|
||||
const [fileType, setfileType] = useState(null);
|
||||
const [fileName, setfileName] = useState(null);
|
||||
const [showAddIcon, setShowAddIcon] = useState(true);
|
||||
const t = useTranslations();
|
||||
const {directionApp} = useDirection();
|
||||
const [openRejectDialog, setOpenRejectDialog] = useState(false);
|
||||
const requestServer = useRequest({auth: true})
|
||||
const {update_notification} = useNotification()
|
||||
|
||||
const validationSchema = Yup.object().shape({
|
||||
description: Yup.string().required(t("RejectDialog.description_error")),
|
||||
});
|
||||
|
||||
const formik = useFormik({
|
||||
initialValues: {
|
||||
description: "",
|
||||
reject_img: null
|
||||
},
|
||||
validationSchema,
|
||||
onSubmit: (values, {setSubmitting}) => {
|
||||
const formData = new FormData();
|
||||
formData.append("expert_description", values.description);
|
||||
if (values.reject_img != null) formData.append("attachment", values.reject_img);
|
||||
|
||||
requestServer(`${REJECT_PASSENGER_BOSS}/${rowId}`, 'post', {
|
||||
data: formData,
|
||||
}).then((response) => {
|
||||
mutate(fetchUrl)
|
||||
update_notification()
|
||||
}).catch(() => {
|
||||
}).finally(() => {
|
||||
setSubmitting(false);
|
||||
});
|
||||
},
|
||||
});
|
||||
|
||||
const handleDescriptionChange = (event) => {
|
||||
formik.setFieldValue("description", event.target.value);
|
||||
formik.handleChange(event);
|
||||
};
|
||||
const handleUploadChange = (event) => {
|
||||
const uploadedFile = event.target?.files?.[0];
|
||||
if (uploadedFile) {
|
||||
const maxFileSize = 2 * 1024 * 1024;
|
||||
if (uploadedFile.size > maxFileSize) {
|
||||
UploadFileNotification(t);
|
||||
event.target.value = "";
|
||||
return;
|
||||
}
|
||||
const fileType = event.target?.files?.[0].type;
|
||||
const fileName = event.target?.files?.[0].name;
|
||||
setSelectedImage(URL.createObjectURL(uploadedFile));
|
||||
setfileType(fileType);
|
||||
setfileName(fileName);
|
||||
formik.setFieldValue("reject_img", uploadedFile);
|
||||
setShowAddIcon(false);
|
||||
}
|
||||
};
|
||||
return (
|
||||
<>
|
||||
<Tooltip title={t("RejectDialog.reject")}>
|
||||
<IconButton color="primary" onClick={() => setOpenRejectDialog(true)}>
|
||||
<ThumbDownIcon/>
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
<Dialog fullWidth open={openRejectDialog}
|
||||
PaperProps={{sx: {boxShadow: 'rgba(60, 64, 67, 0.3) 0px 1px 16px 0px, rgba(60, 64, 67, 0.15) 0px 1px 10px 0px'}}}>
|
||||
<DialogTitle>{t("RejectDialog.reject")}</DialogTitle>
|
||||
<DialogContent>
|
||||
<Stack spacing={2}>
|
||||
<Stack>
|
||||
<TextField
|
||||
name="description"
|
||||
multiline
|
||||
rows={8}
|
||||
label={t("RejectDialog.description")}
|
||||
value={formik.values.description}
|
||||
onChange={handleDescriptionChange}
|
||||
onBlur={formik.handleBlur("description")}
|
||||
error={
|
||||
formik.touched.description && Boolean(formik.errors.description)
|
||||
}
|
||||
helperText={formik.touched.description && formik.errors.description}
|
||||
fullWidth
|
||||
variant="outlined"
|
||||
sx={{mt: 1}}
|
||||
/>
|
||||
</Stack>
|
||||
<Stack>
|
||||
<Typography>{t("UploadSystem.upload_file")}{t("UploadSystem.optional")}</Typography>
|
||||
<UploadSystem
|
||||
selectedImage={selectedImage}
|
||||
handleUploadChange={handleUploadChange} // Pass the updated function directly
|
||||
setselectedImage={setSelectedImage}
|
||||
setFieldValue={formik.setFieldValue} // Remove props.setFieldValue, use formik.setFieldValue
|
||||
fieldname="reject_img"
|
||||
fileType={fileType}
|
||||
fileName={fileName}
|
||||
imageAlt={t("app_name")}
|
||||
imageSize={[250 /*width*/, 150 /*height*/]}
|
||||
setShowAddIcon={setShowAddIcon}
|
||||
showAddIcon={showAddIcon}
|
||||
/>
|
||||
</Stack>
|
||||
</Stack>
|
||||
</DialogContent>
|
||||
<DialogActions>
|
||||
<Button onClick={() => setOpenRejectDialog(false)} variant="outlined" color="secondary"
|
||||
disabled={formik.isSubmitting} autoFocus>
|
||||
{t("RejectDialog.button-cancel")}
|
||||
</Button>
|
||||
<Button onClick={formik.handleSubmit} variant="contained" color="primary"
|
||||
disabled={formik.isSubmitting}>
|
||||
{t("RejectDialog.button-reject")}
|
||||
</Button>
|
||||
</DialogActions>
|
||||
</Dialog>
|
||||
</>
|
||||
);
|
||||
};
|
||||
export default Reject;
|
||||
@@ -0,0 +1,123 @@
|
||||
import UploadSystem from "@/core/components/UploadSystem"
|
||||
import useNotification from "@/lib/app/hooks/useNotification";
|
||||
import useRequest from "@/lib/app/hooks/useRequest";
|
||||
import {Button, DialogActions, DialogContent, Stack, TextField, Typography} from "@mui/material"
|
||||
import {useFormik} from "formik";
|
||||
import {useTranslations} from "next-intl";
|
||||
import {useState} from "react";
|
||||
import * as Yup from "yup";
|
||||
import {REJECT_PASSENGER_BOSS} from "@/core/data/apiRoutes";
|
||||
|
||||
const RejectContent = ({rowId, mutate, setOpenRejectDialog}) => {
|
||||
const [selectedImage, setSelectedImage] = useState("");
|
||||
const [fileType, setfileType] = useState(null);
|
||||
const [fileName, setfileName] = useState(null);
|
||||
const [showAddIcon, setShowAddIcon] = useState(true);
|
||||
const t = useTranslations();
|
||||
const requestServer = useRequest({auth: true})
|
||||
const {update_notification} = useNotification()
|
||||
|
||||
const validationSchema = Yup.object().shape({
|
||||
description: Yup.string().required(t("RejectDialog.description_error")),
|
||||
});
|
||||
|
||||
const formik = useFormik({
|
||||
initialValues: {
|
||||
description: "",
|
||||
reject_img: null
|
||||
},
|
||||
validationSchema,
|
||||
onSubmit: (values, {setSubmitting}) => {
|
||||
const formData = new FormData();
|
||||
formData.append("expert_description", values.description);
|
||||
if (values.reject_img != null) formData.append("attachment", values.reject_img);
|
||||
|
||||
requestServer(`${REJECT_PASSENGER_BOSS}/${rowId}`, 'post', {
|
||||
data: formData,
|
||||
}).then((response) => {
|
||||
setOpenRejectDialog(false)
|
||||
mutate()
|
||||
update_notification()
|
||||
}).catch(() => {
|
||||
}).finally(() => {
|
||||
setSubmitting(false);
|
||||
});
|
||||
},
|
||||
});
|
||||
|
||||
const handleDescriptionChange = (event) => {
|
||||
formik.setFieldValue("description", event.target.value);
|
||||
formik.handleChange(event);
|
||||
};
|
||||
const handleUploadChange = (event) => {
|
||||
const uploadedFile = event.target?.files?.[0];
|
||||
if (uploadedFile) {
|
||||
const maxFileSize = 2 * 1024 * 1024;
|
||||
if (uploadedFile.size > maxFileSize) {
|
||||
UploadFileNotification(t);
|
||||
event.target.value = "";
|
||||
return;
|
||||
}
|
||||
const fileType = event.target?.files?.[0].type;
|
||||
const fileName = event.target?.files?.[0].name;
|
||||
setSelectedImage(URL.createObjectURL(uploadedFile));
|
||||
setfileType(fileType);
|
||||
setfileName(fileName);
|
||||
formik.setFieldValue("reject_img", uploadedFile);
|
||||
setShowAddIcon(false);
|
||||
}
|
||||
};
|
||||
return (
|
||||
<>
|
||||
<DialogContent>
|
||||
<Stack spacing={2}>
|
||||
<Stack>
|
||||
<TextField
|
||||
name="description"
|
||||
multiline
|
||||
rows={8}
|
||||
label={t("RejectDialog.description")}
|
||||
value={formik.values.description}
|
||||
onChange={handleDescriptionChange}
|
||||
onBlur={formik.handleBlur("description")}
|
||||
error={
|
||||
formik.touched.description && Boolean(formik.errors.description)
|
||||
}
|
||||
helperText={formik.touched.description && formik.errors.description}
|
||||
fullWidth
|
||||
variant="outlined"
|
||||
sx={{mt: 1}}
|
||||
/>
|
||||
</Stack>
|
||||
<Stack>
|
||||
<Typography>{t("UploadSystem.upload_file")}{t("UploadSystem.optional")}</Typography>
|
||||
<UploadSystem
|
||||
selectedImage={selectedImage}
|
||||
handleUploadChange={handleUploadChange} // Pass the updated function directly
|
||||
setselectedImage={setSelectedImage}
|
||||
setFieldValue={formik.setFieldValue} // Remove props.setFieldValue, use formik.setFieldValue
|
||||
fieldname="reject_img"
|
||||
fileType={fileType}
|
||||
fileName={fileName}
|
||||
imageAlt={t("app_name")}
|
||||
imageSize={[250 /*width*/, 150 /*height*/]}
|
||||
setShowAddIcon={setShowAddIcon}
|
||||
showAddIcon={showAddIcon}
|
||||
/>
|
||||
</Stack>
|
||||
</Stack>
|
||||
</DialogContent>
|
||||
<DialogActions>
|
||||
<Button onClick={() => setOpenRejectDialog(false)} variant="outlined" color="secondary"
|
||||
disabled={formik.isSubmitting} autoFocus>
|
||||
{t("RejectDialog.button-cancel")}
|
||||
</Button>
|
||||
<Button onClick={formik.handleSubmit} variant="contained" color="primary"
|
||||
disabled={formik.isSubmitting || !formik.dirty || !formik.isValid}>
|
||||
{t("RejectDialog.button-reject")}
|
||||
</Button>
|
||||
</DialogActions>
|
||||
</>
|
||||
)
|
||||
}
|
||||
export default RejectContent
|
||||
@@ -0,0 +1,25 @@
|
||||
import {Dialog, DialogTitle, IconButton, Tooltip} from "@mui/material"
|
||||
import {useTranslations} from "next-intl";
|
||||
import {useState} from "react";
|
||||
import RejectContent from "./RejectContent";
|
||||
import ThumbDownIcon from "@mui/icons-material/ThumbDown";
|
||||
|
||||
const Reject = ({rowId, mutate}) => {
|
||||
const t = useTranslations();
|
||||
const [openRejectDialog, setOpenRejectDialog] = useState(false);
|
||||
return (
|
||||
<>
|
||||
<Tooltip title={t("RejectDialog.reject")}>
|
||||
<IconButton color="primary" onClick={() => setOpenRejectDialog(true)}>
|
||||
<ThumbDownIcon/>
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
<Dialog fullWidth open={openRejectDialog}
|
||||
PaperProps={{sx: {boxShadow: 'rgba(60, 64, 67, 0.3) 0px 1px 16px 0px, rgba(60, 64, 67, 0.15) 0px 1px 10px 0px'}}}>
|
||||
<DialogTitle>{t("RejectDialog.reject")}</DialogTitle>
|
||||
<RejectContent mutate={mutate} rowId={rowId} setOpenRejectDialog={setOpenRejectDialog}/>
|
||||
</Dialog>
|
||||
</>
|
||||
)
|
||||
}
|
||||
export default Reject
|
||||
@@ -1,19 +1,17 @@
|
||||
import {Box} from "@mui/material";
|
||||
import ConfirmForm from "./Form/ConfirmForm"
|
||||
import RejectForm from "./Form/RejectForm"
|
||||
import Reject from "./Form/RejectForm"
|
||||
import Confirm from "./Form/ConfirmForm";
|
||||
|
||||
const TableRow = ({row, mutate, fetchUrl}) => {
|
||||
const TableRow = ({row, mutate}) => {
|
||||
|
||||
return (
|
||||
<Box sx={{display: "flex", flexWrap: "nowrap", gap: "8px"}}>
|
||||
<ConfirmForm
|
||||
<Confirm
|
||||
rowId={row.getValue("id")}
|
||||
mutate={mutate}
|
||||
fetchUrl={fetchUrl}
|
||||
/>
|
||||
<RejectForm
|
||||
<Reject
|
||||
rowId={row.getValue("id")}
|
||||
fetchUrl={fetchUrl}
|
||||
mutate={mutate}
|
||||
/>
|
||||
</Box>
|
||||
|
||||
@@ -1,4 +1,3 @@
|
||||
import DashboardLayouts from "@/layouts/dashboardLayouts";
|
||||
import {Box, Typography} from "@mui/material";
|
||||
import {useMemo} from "react";
|
||||
import {GET_PASSENGER_BOSS} from "@/core/data/apiRoutes";
|
||||
@@ -157,30 +156,28 @@ function DashboardPassengerOfficeComponent() {
|
||||
[]
|
||||
);
|
||||
return (
|
||||
<DashboardLayouts>
|
||||
<Box sx={{px: 3}}>
|
||||
<DataTable
|
||||
tableUrl={GET_PASSENGER_BOSS}
|
||||
columns={columns}
|
||||
selectableRow={false}
|
||||
enableCustomToolbar={false}
|
||||
enableLastUpdate={true}
|
||||
sorting={[{
|
||||
id: 'id', desc: false
|
||||
}]}
|
||||
enablePinning={true}
|
||||
enableDensityToggle={false}
|
||||
initialState={{density: 'compact'}} //compact (small) //comfortable (medium) //spacious (large)
|
||||
enableColumnFilters={true}
|
||||
enableHiding={true}
|
||||
enableFullScreenToggle={false}
|
||||
enableGlobalFilter={false}
|
||||
enableColumnResizing={false} // if you want true this you shold change renderRowActions props ** see https://www.material-react-table.com/docs/guides/row-actions
|
||||
enableRowActions={true}
|
||||
TableRowAction={TableRowActions}
|
||||
/>
|
||||
</Box>
|
||||
</DashboardLayouts>
|
||||
<Box sx={{px: 3}}>
|
||||
<DataTable
|
||||
tableUrl={GET_PASSENGER_BOSS}
|
||||
columns={columns}
|
||||
selectableRow={false}
|
||||
enableCustomToolbar={false}
|
||||
enableLastUpdate={true}
|
||||
sorting={[{
|
||||
id: 'id', desc: false
|
||||
}]}
|
||||
enablePinning={true}
|
||||
enableDensityToggle={false}
|
||||
initialState={{density: 'compact'}} //compact (small) //comfortable (medium) //spacious (large)
|
||||
enableColumnFilters={true}
|
||||
enableHiding={true}
|
||||
enableFullScreenToggle={false}
|
||||
enableGlobalFilter={false}
|
||||
enableColumnResizing={false} // if you want true this you shold change renderRowActions props ** see https://www.material-react-table.com/docs/guides/row-actions
|
||||
enableRowActions={true}
|
||||
TableRowAction={TableRowActions}
|
||||
/>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
@@ -1,142 +0,0 @@
|
||||
import {useTranslations} from "next-intl";
|
||||
import {useState} from "react";
|
||||
import {
|
||||
Button,
|
||||
Dialog,
|
||||
DialogActions,
|
||||
DialogContent,
|
||||
DialogTitle,
|
||||
IconButton,
|
||||
Stack,
|
||||
TextField,
|
||||
Tooltip,
|
||||
Typography
|
||||
} from "@mui/material";
|
||||
import ThumbUpAltIcon from "@mui/icons-material/ThumbUpAlt";
|
||||
import UploadSystem from "@/core/components/UploadSystem";
|
||||
import useDirection from "@/lib/app/hooks/useDirection";
|
||||
import {useFormik} from "formik";
|
||||
import UploadFileNotification from "@/core/components/notifications/UploadFileNotification";
|
||||
import useRequest from "@/lib/app/hooks/useRequest";
|
||||
import {CONFIRM_PASSENGER_OFFICE} from "@/core/data/apiRoutes";
|
||||
import useNotification from "@/lib/app/hooks/useNotification";
|
||||
|
||||
const Confirm = ({rowId, fetchUrl, mutate}) => {
|
||||
const t = useTranslations();
|
||||
const {directionApp} = useDirection();
|
||||
const [selectedImage, setSelectedImage] = useState("");
|
||||
const [fileType, setfileType] = useState(null);
|
||||
const [fileName, setfileName] = useState(null);
|
||||
const [showAddIcon, setShowAddIcon] = useState(true);
|
||||
const [openConfirmDialog, setOpenConfirmDialog] = useState(false);
|
||||
const requestServer = useRequest({auth: true})
|
||||
const {update_notification} = useNotification()
|
||||
|
||||
const formik = useFormik({
|
||||
initialValues: {
|
||||
description: "",
|
||||
confirm_img: null
|
||||
},
|
||||
onSubmit: (values, {setSubmitting}) => {
|
||||
const formData = new FormData();
|
||||
if (values.description != "") formData.append("expert_description", values.description);
|
||||
if (values.confirm_img != null) formData.append("attachment", values.confirm_img);
|
||||
|
||||
requestServer(`${CONFIRM_PASSENGER_OFFICE}/${rowId}`, 'post', {
|
||||
data: formData,
|
||||
}).then((response) => {
|
||||
mutate(fetchUrl)
|
||||
update_notification()
|
||||
}).catch(() => {
|
||||
}).finally(() => {
|
||||
setSubmitting(false);
|
||||
});
|
||||
},
|
||||
});
|
||||
|
||||
const handleDescriptionChange = (event) => {
|
||||
formik.setFieldValue("description", event.target.value)
|
||||
};
|
||||
const handleUploadChange = (event) => {
|
||||
const uploadedFile = event.target?.files?.[0];
|
||||
if (uploadedFile) {
|
||||
const maxFileSize = 2 * 1024 * 1024;
|
||||
if (uploadedFile.size > maxFileSize) {
|
||||
UploadFileNotification(t);
|
||||
event.target.value = "";
|
||||
return;
|
||||
}
|
||||
|
||||
const fileType = event.target?.files?.[0].type;
|
||||
const fileName = event.target?.files?.[0].name;
|
||||
setSelectedImage(URL.createObjectURL(uploadedFile));
|
||||
setfileType(fileType);
|
||||
setfileName(fileName);
|
||||
formik.setFieldValue("confirm_img", uploadedFile);
|
||||
setShowAddIcon(false);
|
||||
}
|
||||
};
|
||||
return (
|
||||
<>
|
||||
<Tooltip title={t("ConfirmDialog.confirm")}>
|
||||
<IconButton
|
||||
color="primary"
|
||||
onClick={() => {
|
||||
setOpenConfirmDialog(true)
|
||||
}}
|
||||
>
|
||||
<ThumbUpAltIcon/>
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
<Dialog fullWidth open={openConfirmDialog}
|
||||
PaperProps={{sx: {boxShadow: 'rgba(60, 64, 67, 0.3) 0px 1px 16px 0px, rgba(60, 64, 67, 0.15) 0px 1px 10px 0px'}}}>
|
||||
<DialogTitle>{t("ConfirmDialog.confirm")}</DialogTitle>
|
||||
<DialogContent>
|
||||
<Stack spacing={2}>
|
||||
<Stack>
|
||||
<TextField
|
||||
name="description"
|
||||
multiline
|
||||
rows={8}
|
||||
label={<>
|
||||
<span>{t("ConfirmDialog.description")}</span><small>{t("ConfirmDialog.optional")}</small></>}
|
||||
value={formik.values.description}
|
||||
onChange={handleDescriptionChange}
|
||||
fullWidth
|
||||
variant="outlined"
|
||||
sx={{mt: 1}}
|
||||
/>
|
||||
</Stack>
|
||||
<Stack>
|
||||
<Typography>{t("UploadSystem.upload_file")}{t("UploadSystem.optional")}</Typography>
|
||||
<UploadSystem
|
||||
selectedImage={selectedImage}
|
||||
handleUploadChange={handleUploadChange} // Pass the updated function directly
|
||||
setselectedImage={setSelectedImage}
|
||||
setFieldValue={formik.setFieldValue} // Remove props.setFieldValue, use formik.setFieldValue
|
||||
fieldname="confirm_img"
|
||||
fileType={fileType}
|
||||
fileName={fileName}
|
||||
imageAlt={t("app_name")}
|
||||
imageSize={[250, 150]}
|
||||
setShowAddIcon={setShowAddIcon}
|
||||
showAddIcon={showAddIcon}
|
||||
/>
|
||||
</Stack>
|
||||
</Stack>
|
||||
</DialogContent>
|
||||
<DialogActions>
|
||||
<Button onClick={() => setOpenConfirmDialog(false)} variant="outlined" color="secondary"
|
||||
disabled={formik.isSubmitting} autoFocus>
|
||||
{t("ConfirmDialog.button-cancel")}
|
||||
</Button>
|
||||
<Button onClick={formik.handleSubmit} variant="contained" color="primary"
|
||||
disabled={formik.isSubmitting}>
|
||||
{t("ConfirmDialog.button-confirm")}
|
||||
</Button>
|
||||
</DialogActions>
|
||||
</Dialog>
|
||||
</>
|
||||
);
|
||||
};
|
||||
export default Confirm;
|
||||
@@ -0,0 +1,117 @@
|
||||
import UploadSystem from "@/core/components/UploadSystem";
|
||||
import useNotification from "@/lib/app/hooks/useNotification";
|
||||
import useRequest from "@/lib/app/hooks/useRequest";
|
||||
import {Button, DialogActions, DialogContent, Stack, TextField, Typography} from "@mui/material"
|
||||
import {useFormik} from "formik";
|
||||
import {useTranslations} from "next-intl";
|
||||
import {CONFIRM_PASSENGER_OFFICE} from "@/core/data/apiRoutes";
|
||||
import UploadFileNotification from "@/core/components/notifications/UploadFileNotification";
|
||||
import {useState} from "react";
|
||||
|
||||
const ConfirmContent = ({rowId, mutate, setOpenConfirmDialog}) => {
|
||||
const t = useTranslations();
|
||||
const [selectedImage, setSelectedImage] = useState("");
|
||||
const [fileType, setfileType] = useState(null);
|
||||
const [fileName, setfileName] = useState(null);
|
||||
const [showAddIcon, setShowAddIcon] = useState(true);
|
||||
const requestServer = useRequest({auth: true})
|
||||
const {update_notification} = useNotification()
|
||||
|
||||
const formik = useFormik({
|
||||
initialValues: {
|
||||
description: "",
|
||||
confirm_img: null
|
||||
},
|
||||
onSubmit: (values, {setSubmitting}) => {
|
||||
const formData = new FormData();
|
||||
if (values.description != "") formData.append("description", values.description);
|
||||
if (values.confirm_img != null) formData.append("attachment", values.confirm_img);
|
||||
|
||||
requestServer(`${CONFIRM_PASSENGER_OFFICE}/${rowId}`, 'post', {
|
||||
data: formData,
|
||||
}).then((response) => {
|
||||
setOpenConfirmDialog(false)
|
||||
mutate()
|
||||
update_notification()
|
||||
}).catch(() => {
|
||||
}).finally(() => {
|
||||
setSubmitting(false);
|
||||
});
|
||||
},
|
||||
});
|
||||
|
||||
const handleDescriptionChange = (event) => {
|
||||
formik.setFieldValue("description", event.target.value)
|
||||
};
|
||||
|
||||
const handleUploadChange = (event) => {
|
||||
const uploadedFile = event.target?.files?.[0];
|
||||
if (uploadedFile) {
|
||||
const maxFileSize = 2 * 1024 * 1024;
|
||||
if (uploadedFile.size > maxFileSize) {
|
||||
UploadFileNotification(t);
|
||||
event.target.value = "";
|
||||
return;
|
||||
}
|
||||
|
||||
const fileType = event.target?.files?.[0].type;
|
||||
const fileName = event.target?.files?.[0].name;
|
||||
setSelectedImage(URL.createObjectURL(uploadedFile));
|
||||
setfileType(fileType);
|
||||
setfileName(fileName);
|
||||
formik.setFieldValue("confirm_img", uploadedFile);
|
||||
setShowAddIcon(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<DialogContent>
|
||||
<Stack spacing={2}>
|
||||
<Stack>
|
||||
<TextField
|
||||
name="description"
|
||||
multiline
|
||||
rows={8}
|
||||
label={<>
|
||||
<span>{t("ConfirmDialog.description")}</span><small>{t("ConfirmDialog.optional")}</small></>}
|
||||
value={formik.values.description}
|
||||
onChange={handleDescriptionChange}
|
||||
fullWidth
|
||||
variant="outlined"
|
||||
sx={{mt: 1}}
|
||||
/>
|
||||
</Stack>
|
||||
<Stack>
|
||||
<Typography>{t("UploadSystem.upload_file")}{t("UploadSystem.optional")}</Typography>
|
||||
<UploadSystem
|
||||
selectedImage={selectedImage}
|
||||
handleUploadChange={handleUploadChange} // Pass the updated function directly
|
||||
setselectedImage={setSelectedImage}
|
||||
setFieldValue={formik.setFieldValue} // Remove props.setFieldValue, use formik.setFieldValue
|
||||
fieldname="confirm_img"
|
||||
fileType={fileType}
|
||||
fileName={fileName}
|
||||
imageAlt={t("app_name")}
|
||||
imageSize={[250, 150]}
|
||||
setShowAddIcon={setShowAddIcon}
|
||||
showAddIcon={showAddIcon}
|
||||
/>
|
||||
</Stack>
|
||||
</Stack>
|
||||
</DialogContent>
|
||||
<DialogActions>
|
||||
<Button onClick={() => setOpenConfirmDialog(false)} variant="outlined" color="secondary"
|
||||
disabled={formik.isSubmitting} autoFocus>
|
||||
{t("ConfirmDialog.button-cancel")}
|
||||
</Button>
|
||||
<Button onClick={formik.handleSubmit} variant="contained" color="primary"
|
||||
disabled={formik.isSubmitting}>
|
||||
{t("ConfirmDialog.button-confirm")}
|
||||
</Button>
|
||||
</DialogActions>
|
||||
</>
|
||||
)
|
||||
|
||||
}
|
||||
export default ConfirmContent
|
||||
@@ -0,0 +1,31 @@
|
||||
import {Dialog, DialogTitle, IconButton, Tooltip} from "@mui/material";
|
||||
import {useTranslations} from "next-intl";
|
||||
import ThumbUpAltIcon from "@mui/icons-material/ThumbUpAlt";
|
||||
import {useState} from "react";
|
||||
import ConfirmContent from "./ConfirmContent";
|
||||
|
||||
const Confirm = ({rowId, mutate}) => {
|
||||
const t = useTranslations();
|
||||
const [openConfirmDialog, setOpenConfirmDialog] = useState(false);
|
||||
return (
|
||||
<>
|
||||
<Tooltip title={t("ConfirmDialog.confirm")}>
|
||||
<IconButton
|
||||
color="primary"
|
||||
onClick={() => {
|
||||
setOpenConfirmDialog(true)
|
||||
}}
|
||||
>
|
||||
<ThumbUpAltIcon/>
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
<Dialog fullWidth open={openConfirmDialog}
|
||||
PaperProps={{sx: {boxShadow: 'rgba(60, 64, 67, 0.3) 0px 1px 16px 0px, rgba(60, 64, 67, 0.15) 0px 1px 10px 0px'}}}>
|
||||
<DialogTitle>{t("ConfirmDialog.confirm")}</DialogTitle>
|
||||
<ConfirmContent mutate={mutate} rowId={rowId} setOpenConfirmDialog={setOpenConfirmDialog}/>
|
||||
</Dialog>
|
||||
</>
|
||||
)
|
||||
|
||||
}
|
||||
export default Confirm;
|
||||
@@ -1,148 +0,0 @@
|
||||
import {REJECT_PASSENGER_OFFICE} from "@/core/data/apiRoutes";
|
||||
import {
|
||||
Button,
|
||||
Dialog,
|
||||
DialogActions,
|
||||
DialogContent,
|
||||
DialogTitle,
|
||||
IconButton,
|
||||
Stack,
|
||||
TextField,
|
||||
Tooltip,
|
||||
Typography,
|
||||
} from "@mui/material";
|
||||
import {useTranslations} from "next-intl";
|
||||
import {useFormik} from "formik";
|
||||
import * as Yup from "yup";
|
||||
import {useState} from "react";
|
||||
import UploadSystem from "@/core/components/UploadSystem";
|
||||
import UploadFileNotification from "@/core/components/notifications/UploadFileNotification";
|
||||
import useDirection from "@/lib/app/hooks/useDirection";
|
||||
import ThumbDownIcon from "@mui/icons-material/ThumbDown";
|
||||
import useRequest from "@/lib/app/hooks/useRequest";
|
||||
import useNotification from "@/lib/app/hooks/useNotification";
|
||||
|
||||
|
||||
const Reject = ({rowId, fetchUrl, mutate}) => {
|
||||
const [selectedImage, setSelectedImage] = useState("");
|
||||
const [fileType, setfileType] = useState(null);
|
||||
const [fileName, setfileName] = useState(null);
|
||||
const [showAddIcon, setShowAddIcon] = useState(true);
|
||||
const t = useTranslations();
|
||||
const {directionApp} = useDirection();
|
||||
const [openRejectDialog, setOpenRejectDialog] = useState(false);
|
||||
const requestServer = useRequest({auth: true})
|
||||
const {update_notification} = useNotification()
|
||||
|
||||
const validationSchema = Yup.object().shape({
|
||||
description: Yup.string().required(t("RejectDialog.description_error")),
|
||||
});
|
||||
|
||||
const formik = useFormik({
|
||||
initialValues: {
|
||||
description: "",
|
||||
reject_img: null
|
||||
},
|
||||
validationSchema,
|
||||
onSubmit: (values, {setSubmitting}) => {
|
||||
const formData = new FormData();
|
||||
formData.append("expert_description", values.description);
|
||||
if (values.reject_img != null) formData.append("attachment", values.reject_img);
|
||||
|
||||
requestServer(`${REJECT_PASSENGER_OFFICE}/${rowId}`, 'post', {
|
||||
data: formData,
|
||||
}).then((response) => {
|
||||
mutate(fetchUrl)
|
||||
update_notification()
|
||||
}).catch(() => {
|
||||
}).finally(() => {
|
||||
setSubmitting(false);
|
||||
});
|
||||
},
|
||||
});
|
||||
|
||||
const handleDescriptionChange = (event) => {
|
||||
formik.setFieldValue("description", event.target.value);
|
||||
formik.handleChange(event);
|
||||
};
|
||||
const handleUploadChange = (event) => {
|
||||
const uploadedFile = event.target?.files?.[0];
|
||||
if (uploadedFile) {
|
||||
const maxFileSize = 2 * 1024 * 1024;
|
||||
if (uploadedFile.size > maxFileSize) {
|
||||
UploadFileNotification(t);
|
||||
event.target.value = "";
|
||||
return;
|
||||
}
|
||||
const fileType = event.target?.files?.[0].type;
|
||||
const fileName = event.target?.files?.[0].name;
|
||||
setSelectedImage(URL.createObjectURL(uploadedFile));
|
||||
setfileType(fileType);
|
||||
setfileName(fileName);
|
||||
formik.setFieldValue("reject_img", uploadedFile);
|
||||
setShowAddIcon(false);
|
||||
}
|
||||
};
|
||||
return (
|
||||
<>
|
||||
<Tooltip title={t("RejectDialog.reject")}>
|
||||
<IconButton color="primary" onClick={() => setOpenRejectDialog(true)}>
|
||||
<ThumbDownIcon/>
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
<Dialog fullWidth open={openRejectDialog}
|
||||
PaperProps={{sx: {boxShadow: 'rgba(60, 64, 67, 0.3) 0px 1px 16px 0px, rgba(60, 64, 67, 0.15) 0px 1px 10px 0px'}}}>
|
||||
<DialogTitle>{t("RejectDialog.reject")}</DialogTitle>
|
||||
<DialogContent>
|
||||
<Stack spacing={2}>
|
||||
<Stack>
|
||||
<TextField
|
||||
name="description"
|
||||
multiline
|
||||
rows={8}
|
||||
label={t("RejectDialog.description")}
|
||||
value={formik.values.description}
|
||||
onChange={handleDescriptionChange}
|
||||
onBlur={formik.handleBlur("description")}
|
||||
error={
|
||||
formik.touched.description && Boolean(formik.errors.description)
|
||||
}
|
||||
helperText={formik.touched.description && formik.errors.description}
|
||||
fullWidth
|
||||
variant="outlined"
|
||||
sx={{mt: 1}}
|
||||
/>
|
||||
</Stack>
|
||||
<Stack>
|
||||
<Typography>{t("UploadSystem.upload_file")}{t("UploadSystem.optional")}</Typography>
|
||||
<UploadSystem
|
||||
selectedImage={selectedImage}
|
||||
handleUploadChange={handleUploadChange} // Pass the updated function directly
|
||||
setselectedImage={setSelectedImage}
|
||||
setFieldValue={formik.setFieldValue} // Remove props.setFieldValue, use formik.setFieldValue
|
||||
fieldname="reject_img"
|
||||
fileType={fileType}
|
||||
fileName={fileName}
|
||||
imageAlt={t("app_name")}
|
||||
imageSize={[250 /*width*/, 150 /*height*/]}
|
||||
setShowAddIcon={setShowAddIcon}
|
||||
showAddIcon={showAddIcon}
|
||||
/>
|
||||
</Stack>
|
||||
</Stack>
|
||||
</DialogContent>
|
||||
<DialogActions>
|
||||
<Button onClick={() => setOpenRejectDialog(false)} variant="outlined" color="secondary"
|
||||
disabled={formik.isSubmitting} autoFocus>
|
||||
{t("RejectDialog.button-cancel")}
|
||||
</Button>
|
||||
<Button onClick={formik.handleSubmit} variant="contained" color="primary"
|
||||
disabled={formik.isSubmitting}>
|
||||
{t("RejectDialog.button-reject")}
|
||||
</Button>
|
||||
</DialogActions>
|
||||
</Dialog>
|
||||
</>
|
||||
);
|
||||
};
|
||||
export default Reject;
|
||||
@@ -0,0 +1,123 @@
|
||||
import UploadSystem from "@/core/components/UploadSystem"
|
||||
import useNotification from "@/lib/app/hooks/useNotification";
|
||||
import useRequest from "@/lib/app/hooks/useRequest";
|
||||
import {Button, DialogActions, DialogContent, Stack, TextField, Typography} from "@mui/material"
|
||||
import {useFormik} from "formik";
|
||||
import {useTranslations} from "next-intl";
|
||||
import {useState} from "react";
|
||||
import * as Yup from "yup";
|
||||
import {REJECT_PASSENGER_OFFICE} from "@/core/data/apiRoutes";
|
||||
|
||||
const RejectContent = ({rowId, mutate, setOpenRejectDialog}) => {
|
||||
const [selectedImage, setSelectedImage] = useState("");
|
||||
const [fileType, setfileType] = useState(null);
|
||||
const [fileName, setfileName] = useState(null);
|
||||
const [showAddIcon, setShowAddIcon] = useState(true);
|
||||
const t = useTranslations();
|
||||
const requestServer = useRequest({auth: true})
|
||||
const {update_notification} = useNotification()
|
||||
|
||||
const validationSchema = Yup.object().shape({
|
||||
description: Yup.string().required(t("RejectDialog.description_error")),
|
||||
});
|
||||
|
||||
const formik = useFormik({
|
||||
initialValues: {
|
||||
description: "",
|
||||
reject_img: null
|
||||
},
|
||||
validationSchema,
|
||||
onSubmit: (values, {setSubmitting}) => {
|
||||
const formData = new FormData();
|
||||
formData.append("expert_description", values.description);
|
||||
if (values.reject_img != null) formData.append("attachment", values.reject_img);
|
||||
|
||||
requestServer(`${REJECT_PASSENGER_OFFICE}/${rowId}`, 'post', {
|
||||
data: formData,
|
||||
}).then((response) => {
|
||||
setOpenRejectDialog(false)
|
||||
mutate()
|
||||
update_notification()
|
||||
}).catch(() => {
|
||||
}).finally(() => {
|
||||
setSubmitting(false);
|
||||
});
|
||||
},
|
||||
});
|
||||
|
||||
const handleDescriptionChange = (event) => {
|
||||
formik.setFieldValue("description", event.target.value);
|
||||
formik.handleChange(event);
|
||||
};
|
||||
const handleUploadChange = (event) => {
|
||||
const uploadedFile = event.target?.files?.[0];
|
||||
if (uploadedFile) {
|
||||
const maxFileSize = 2 * 1024 * 1024;
|
||||
if (uploadedFile.size > maxFileSize) {
|
||||
UploadFileNotification(t);
|
||||
event.target.value = "";
|
||||
return;
|
||||
}
|
||||
const fileType = event.target?.files?.[0].type;
|
||||
const fileName = event.target?.files?.[0].name;
|
||||
setSelectedImage(URL.createObjectURL(uploadedFile));
|
||||
setfileType(fileType);
|
||||
setfileName(fileName);
|
||||
formik.setFieldValue("reject_img", uploadedFile);
|
||||
setShowAddIcon(false);
|
||||
}
|
||||
};
|
||||
return (
|
||||
<>
|
||||
<DialogContent>
|
||||
<Stack spacing={2}>
|
||||
<Stack>
|
||||
<TextField
|
||||
name="description"
|
||||
multiline
|
||||
rows={8}
|
||||
label={t("RejectDialog.description")}
|
||||
value={formik.values.description}
|
||||
onChange={handleDescriptionChange}
|
||||
onBlur={formik.handleBlur("description")}
|
||||
error={
|
||||
formik.touched.description && Boolean(formik.errors.description)
|
||||
}
|
||||
helperText={formik.touched.description && formik.errors.description}
|
||||
fullWidth
|
||||
variant="outlined"
|
||||
sx={{mt: 1}}
|
||||
/>
|
||||
</Stack>
|
||||
<Stack>
|
||||
<Typography>{t("UploadSystem.upload_file")}{t("UploadSystem.optional")}</Typography>
|
||||
<UploadSystem
|
||||
selectedImage={selectedImage}
|
||||
handleUploadChange={handleUploadChange} // Pass the updated function directly
|
||||
setselectedImage={setSelectedImage}
|
||||
setFieldValue={formik.setFieldValue} // Remove props.setFieldValue, use formik.setFieldValue
|
||||
fieldname="reject_img"
|
||||
fileType={fileType}
|
||||
fileName={fileName}
|
||||
imageAlt={t("app_name")}
|
||||
imageSize={[250 /*width*/, 150 /*height*/]}
|
||||
setShowAddIcon={setShowAddIcon}
|
||||
showAddIcon={showAddIcon}
|
||||
/>
|
||||
</Stack>
|
||||
</Stack>
|
||||
</DialogContent>
|
||||
<DialogActions>
|
||||
<Button onClick={() => setOpenRejectDialog(false)} variant="outlined" color="secondary"
|
||||
disabled={formik.isSubmitting} autoFocus>
|
||||
{t("RejectDialog.button-cancel")}
|
||||
</Button>
|
||||
<Button onClick={formik.handleSubmit} variant="contained" color="primary"
|
||||
disabled={formik.isSubmitting || !formik.dirty || !formik.isValid}>
|
||||
{t("RejectDialog.button-reject")}
|
||||
</Button>
|
||||
</DialogActions>
|
||||
</>
|
||||
)
|
||||
}
|
||||
export default RejectContent
|
||||
@@ -0,0 +1,25 @@
|
||||
import {Dialog, DialogTitle, IconButton, Tooltip} from "@mui/material"
|
||||
import {useTranslations} from "next-intl";
|
||||
import {useState} from "react";
|
||||
import RejectContent from "./RejectContent";
|
||||
import ThumbDownIcon from "@mui/icons-material/ThumbDown";
|
||||
|
||||
const Reject = ({rowId, mutate}) => {
|
||||
const t = useTranslations();
|
||||
const [openRejectDialog, setOpenRejectDialog] = useState(false);
|
||||
return (
|
||||
<>
|
||||
<Tooltip title={t("RejectDialog.reject")}>
|
||||
<IconButton color="primary" onClick={() => setOpenRejectDialog(true)}>
|
||||
<ThumbDownIcon/>
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
<Dialog fullWidth open={openRejectDialog}
|
||||
PaperProps={{sx: {boxShadow: 'rgba(60, 64, 67, 0.3) 0px 1px 16px 0px, rgba(60, 64, 67, 0.15) 0px 1px 10px 0px'}}}>
|
||||
<DialogTitle>{t("RejectDialog.reject")}</DialogTitle>
|
||||
<RejectContent mutate={mutate} rowId={rowId} setOpenRejectDialog={setOpenRejectDialog}/>
|
||||
</Dialog>
|
||||
</>
|
||||
)
|
||||
}
|
||||
export default Reject
|
||||
@@ -1,19 +1,17 @@
|
||||
import {Box} from "@mui/material";
|
||||
import ConfirmForm from "./Form/ConfirmForm"
|
||||
import RejectForm from "./Form/RejectForm"
|
||||
import Confirm from "./Form/ConfirmForm";
|
||||
import Reject from "./Form/RejectForm";
|
||||
|
||||
const TableRow = ({row, mutate, fetchUrl}) => {
|
||||
|
||||
return (
|
||||
<Box sx={{display: "flex", flexWrap: "nowrap", gap: "8px"}}>
|
||||
<ConfirmForm
|
||||
<Confirm
|
||||
rowId={row.getValue("id")}
|
||||
mutate={mutate}
|
||||
fetchUrl={fetchUrl}
|
||||
/>
|
||||
<RejectForm
|
||||
<Reject
|
||||
rowId={row.getValue("id")}
|
||||
fetchUrl={fetchUrl}
|
||||
mutate={mutate}
|
||||
/>
|
||||
</Box>
|
||||
|
||||
@@ -1,4 +1,3 @@
|
||||
import DashboardLayouts from "@/layouts/dashboardLayouts";
|
||||
import {Box, Typography} from "@mui/material";
|
||||
import {useMemo} from "react";
|
||||
import {GET_PASSENGER_OFFICE} from "@/core/data/apiRoutes";
|
||||
@@ -157,30 +156,28 @@ function DashboardPassengerOfficeComponent() {
|
||||
[]
|
||||
);
|
||||
return (
|
||||
<DashboardLayouts>
|
||||
<Box sx={{px: 3}}>
|
||||
<DataTable
|
||||
tableUrl={GET_PASSENGER_OFFICE}
|
||||
columns={columns}
|
||||
selectableRow={false}
|
||||
enableCustomToolbar={false}
|
||||
enableLastUpdate={true}
|
||||
sorting={[{
|
||||
id: 'id', desc: false
|
||||
}]}
|
||||
enablePinning={true}
|
||||
enableDensityToggle={false}
|
||||
initialState={{density: 'compact'}} //compact (small) //comfortable (medium) //spacious (large)
|
||||
enableColumnFilters={true}
|
||||
enableHiding={true}
|
||||
enableFullScreenToggle={false}
|
||||
enableGlobalFilter={false}
|
||||
enableColumnResizing={false} // if you want true this you shold change renderRowActions props ** see https://www.material-react-table.com/docs/guides/row-actions
|
||||
enableRowActions={true}
|
||||
TableRowAction={TableRowActions}
|
||||
/>
|
||||
</Box>
|
||||
</DashboardLayouts>
|
||||
<Box sx={{px: 3}}>
|
||||
<DataTable
|
||||
tableUrl={GET_PASSENGER_OFFICE}
|
||||
columns={columns}
|
||||
selectableRow={false}
|
||||
enableCustomToolbar={false}
|
||||
enableLastUpdate={true}
|
||||
sorting={[{
|
||||
id: 'id', desc: false
|
||||
}]}
|
||||
enablePinning={true}
|
||||
enableDensityToggle={false}
|
||||
initialState={{density: 'compact'}} //compact (small) //comfortable (medium) //spacious (large)
|
||||
enableColumnFilters={true}
|
||||
enableHiding={true}
|
||||
enableFullScreenToggle={false}
|
||||
enableGlobalFilter={false}
|
||||
enableColumnResizing={false} // if you want true this you shold change renderRowActions props ** see https://www.material-react-table.com/docs/guides/row-actions
|
||||
enableRowActions={true}
|
||||
TableRowAction={TableRowActions}
|
||||
/>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
@@ -1,141 +0,0 @@
|
||||
import {useTranslations} from "next-intl";
|
||||
import {useState} from "react";
|
||||
import {
|
||||
Button,
|
||||
Dialog,
|
||||
DialogActions,
|
||||
DialogContent,
|
||||
DialogTitle,
|
||||
IconButton,
|
||||
Stack,
|
||||
TextField,
|
||||
Tooltip,
|
||||
Typography
|
||||
} from "@mui/material";
|
||||
import ThumbUpAltIcon from "@mui/icons-material/ThumbUpAlt";
|
||||
import UploadSystem from "@/core/components/UploadSystem";
|
||||
import {useFormik} from "formik";
|
||||
import UploadFileNotification from "@/core/components/notifications/UploadFileNotification";
|
||||
import {CONFIRM_PROVINCE_HEAD_EXPERT} from "@/core/data/apiRoutes";
|
||||
import useRequest from "@/lib/app/hooks/useRequest";
|
||||
import useNotification from "@/lib/app/hooks/useNotification";
|
||||
|
||||
|
||||
const Confirm = ({rowId, fetchUrl, mutate}) => {
|
||||
const t = useTranslations();
|
||||
const [selectedImage, setSelectedImage] = useState("");
|
||||
const [fileType, setfileType] = useState(null);
|
||||
const [fileName, setfileName] = useState(null);
|
||||
const [showAddIcon, setShowAddIcon] = useState(true);
|
||||
const [openConfirmDialog, setOpenConfirmDialog] = useState(false);
|
||||
const requestServer = useRequest({auth: true})
|
||||
const {update_notification} = useNotification()
|
||||
|
||||
const formik = useFormik({
|
||||
initialValues: {
|
||||
description: "",
|
||||
confirm_img: null
|
||||
},
|
||||
onSubmit: (values, {setSubmitting}) => {
|
||||
const formData = new FormData();
|
||||
if (values.description != "") formData.append("description", values.description);
|
||||
if (values.confirm_img != null) formData.append("attachment", values.confirm_img);
|
||||
|
||||
requestServer(`${CONFIRM_PROVINCE_HEAD_EXPERT}/${rowId}`, 'post', {
|
||||
data: formData,
|
||||
}).then((response) => {
|
||||
mutate(fetchUrl)
|
||||
update_notification()
|
||||
}).catch(() => {
|
||||
}).finally(() => {
|
||||
setSubmitting(false);
|
||||
});
|
||||
},
|
||||
});
|
||||
|
||||
const handleDescriptionChange = (event) => {
|
||||
formik.setFieldValue("description", event.target.value)
|
||||
};
|
||||
const handleUploadChange = (event) => {
|
||||
const uploadedFile = event.target?.files?.[0];
|
||||
if (uploadedFile) {
|
||||
const maxFileSize = 2 * 1024 * 1024;
|
||||
if (uploadedFile.size > maxFileSize) {
|
||||
UploadFileNotification(t);
|
||||
event.target.value = "";
|
||||
return;
|
||||
}
|
||||
|
||||
const fileType = event.target?.files?.[0].type;
|
||||
const fileName = event.target?.files?.[0].name;
|
||||
setSelectedImage(URL.createObjectURL(uploadedFile));
|
||||
setfileType(fileType);
|
||||
setfileName(fileName);
|
||||
formik.setFieldValue("confirm_img", uploadedFile);
|
||||
setShowAddIcon(false);
|
||||
}
|
||||
};
|
||||
return (
|
||||
<>
|
||||
<Tooltip title={t("ConfirmDialog.confirm")}>
|
||||
<IconButton
|
||||
color="primary"
|
||||
onClick={() => {
|
||||
setOpenConfirmDialog(true)
|
||||
}}
|
||||
>
|
||||
<ThumbUpAltIcon/>
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
<Dialog fullWidth open={openConfirmDialog}
|
||||
PaperProps={{sx: {boxShadow: 'rgba(60, 64, 67, 0.3) 0px 1px 16px 0px, rgba(60, 64, 67, 0.15) 0px 1px 10px 0px'}}}>
|
||||
<DialogTitle>{t("ConfirmDialog.confirm")}</DialogTitle>
|
||||
<DialogContent>
|
||||
<Stack spacing={2}>
|
||||
<Stack>
|
||||
<TextField
|
||||
name="description"
|
||||
multiline
|
||||
rows={8}
|
||||
label={<>
|
||||
<span>{t("ConfirmDialog.description")}</span><small>{t("ConfirmDialog.optional")}</small></>}
|
||||
value={formik.values.description}
|
||||
onChange={handleDescriptionChange}
|
||||
fullWidth
|
||||
variant="outlined"
|
||||
sx={{mt: 1}}
|
||||
/>
|
||||
</Stack>
|
||||
<Stack>
|
||||
<Typography>{t("UploadSystem.upload_file")}{t("UploadSystem.optional")}</Typography>
|
||||
<UploadSystem
|
||||
selectedImage={selectedImage}
|
||||
handleUploadChange={handleUploadChange} // Pass the updated function directly
|
||||
setselectedImage={setSelectedImage}
|
||||
setFieldValue={formik.setFieldValue} // Remove props.setFieldValue, use formik.setFieldValue
|
||||
fieldname="confirm_img"
|
||||
fileType={fileType}
|
||||
fileName={fileName}
|
||||
imageAlt={t("app_name")}
|
||||
imageSize={[250, 150]}
|
||||
setShowAddIcon={setShowAddIcon}
|
||||
showAddIcon={showAddIcon}
|
||||
/>
|
||||
</Stack>
|
||||
</Stack>
|
||||
</DialogContent>
|
||||
<DialogActions>
|
||||
<Button onClick={() => setOpenConfirmDialog(false)} variant="outlined" color="secondary"
|
||||
disabled={formik.isSubmitting} autoFocus>
|
||||
{t("ConfirmDialog.button-cancel")}
|
||||
</Button>
|
||||
<Button onClick={formik.handleSubmit} variant="contained" color="primary"
|
||||
disabled={formik.isSubmitting}>
|
||||
{t("ConfirmDialog.button-confirm")}
|
||||
</Button>
|
||||
</DialogActions>
|
||||
</Dialog>
|
||||
</>
|
||||
);
|
||||
};
|
||||
export default Confirm;
|
||||
@@ -0,0 +1,117 @@
|
||||
import UploadSystem from "@/core/components/UploadSystem";
|
||||
import useNotification from "@/lib/app/hooks/useNotification";
|
||||
import useRequest from "@/lib/app/hooks/useRequest";
|
||||
import {Button, DialogActions, DialogContent, Stack, TextField, Typography} from "@mui/material"
|
||||
import {useFormik} from "formik";
|
||||
import {useTranslations} from "next-intl";
|
||||
import {CONFIRM_PROVINCE_HEAD_EXPERT} from "@/core/data/apiRoutes";
|
||||
import UploadFileNotification from "@/core/components/notifications/UploadFileNotification";
|
||||
import {useState} from "react";
|
||||
|
||||
const ConfirmContent = ({rowId, mutate, setOpenConfirmDialog}) => {
|
||||
const t = useTranslations();
|
||||
const [selectedImage, setSelectedImage] = useState("");
|
||||
const [fileType, setfileType] = useState(null);
|
||||
const [fileName, setfileName] = useState(null);
|
||||
const [showAddIcon, setShowAddIcon] = useState(true);
|
||||
const requestServer = useRequest({auth: true})
|
||||
const {update_notification} = useNotification()
|
||||
|
||||
const formik = useFormik({
|
||||
initialValues: {
|
||||
description: "",
|
||||
confirm_img: null
|
||||
},
|
||||
onSubmit: (values, {setSubmitting}) => {
|
||||
const formData = new FormData();
|
||||
if (values.description != "") formData.append("description", values.description);
|
||||
if (values.confirm_img != null) formData.append("attachment", values.confirm_img);
|
||||
|
||||
requestServer(`${CONFIRM_PROVINCE_HEAD_EXPERT}/${rowId}`, 'post', {
|
||||
data: formData,
|
||||
}).then((response) => {
|
||||
setOpenConfirmDialog(false)
|
||||
mutate()
|
||||
update_notification()
|
||||
}).catch(() => {
|
||||
}).finally(() => {
|
||||
setSubmitting(false);
|
||||
});
|
||||
},
|
||||
});
|
||||
|
||||
const handleDescriptionChange = (event) => {
|
||||
formik.setFieldValue("description", event.target.value)
|
||||
};
|
||||
|
||||
const handleUploadChange = (event) => {
|
||||
const uploadedFile = event.target?.files?.[0];
|
||||
if (uploadedFile) {
|
||||
const maxFileSize = 2 * 1024 * 1024;
|
||||
if (uploadedFile.size > maxFileSize) {
|
||||
UploadFileNotification(t);
|
||||
event.target.value = "";
|
||||
return;
|
||||
}
|
||||
|
||||
const fileType = event.target?.files?.[0].type;
|
||||
const fileName = event.target?.files?.[0].name;
|
||||
setSelectedImage(URL.createObjectURL(uploadedFile));
|
||||
setfileType(fileType);
|
||||
setfileName(fileName);
|
||||
formik.setFieldValue("confirm_img", uploadedFile);
|
||||
setShowAddIcon(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<DialogContent>
|
||||
<Stack spacing={2}>
|
||||
<Stack>
|
||||
<TextField
|
||||
name="description"
|
||||
multiline
|
||||
rows={8}
|
||||
label={<>
|
||||
<span>{t("ConfirmDialog.description")}</span><small>{t("ConfirmDialog.optional")}</small></>}
|
||||
value={formik.values.description}
|
||||
onChange={handleDescriptionChange}
|
||||
fullWidth
|
||||
variant="outlined"
|
||||
sx={{mt: 1}}
|
||||
/>
|
||||
</Stack>
|
||||
<Stack>
|
||||
<Typography>{t("UploadSystem.upload_file")}{t("UploadSystem.optional")}</Typography>
|
||||
<UploadSystem
|
||||
selectedImage={selectedImage}
|
||||
handleUploadChange={handleUploadChange} // Pass the updated function directly
|
||||
setselectedImage={setSelectedImage}
|
||||
setFieldValue={formik.setFieldValue} // Remove props.setFieldValue, use formik.setFieldValue
|
||||
fieldname="confirm_img"
|
||||
fileType={fileType}
|
||||
fileName={fileName}
|
||||
imageAlt={t("app_name")}
|
||||
imageSize={[250, 150]}
|
||||
setShowAddIcon={setShowAddIcon}
|
||||
showAddIcon={showAddIcon}
|
||||
/>
|
||||
</Stack>
|
||||
</Stack>
|
||||
</DialogContent>
|
||||
<DialogActions>
|
||||
<Button onClick={() => setOpenConfirmDialog(false)} variant="outlined" color="secondary"
|
||||
disabled={formik.isSubmitting} autoFocus>
|
||||
{t("ConfirmDialog.button-cancel")}
|
||||
</Button>
|
||||
<Button onClick={formik.handleSubmit} variant="contained" color="primary"
|
||||
disabled={formik.isSubmitting}>
|
||||
{t("ConfirmDialog.button-confirm")}
|
||||
</Button>
|
||||
</DialogActions>
|
||||
</>
|
||||
)
|
||||
|
||||
}
|
||||
export default ConfirmContent
|
||||
@@ -0,0 +1,31 @@
|
||||
import {Dialog, DialogTitle, IconButton, Tooltip} from "@mui/material";
|
||||
import {useTranslations} from "next-intl";
|
||||
import ThumbUpAltIcon from "@mui/icons-material/ThumbUpAlt";
|
||||
import {useState} from "react";
|
||||
import ConfirmContent from "./ConfirmContent";
|
||||
|
||||
const Confirm = ({rowId, mutate}) => {
|
||||
const t = useTranslations();
|
||||
const [openConfirmDialog, setOpenConfirmDialog] = useState(false);
|
||||
return (
|
||||
<>
|
||||
<Tooltip title={t("ConfirmDialog.confirm")}>
|
||||
<IconButton
|
||||
color="primary"
|
||||
onClick={() => {
|
||||
setOpenConfirmDialog(true)
|
||||
}}
|
||||
>
|
||||
<ThumbUpAltIcon/>
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
<Dialog fullWidth open={openConfirmDialog}
|
||||
PaperProps={{sx: {boxShadow: 'rgba(60, 64, 67, 0.3) 0px 1px 16px 0px, rgba(60, 64, 67, 0.15) 0px 1px 10px 0px'}}}>
|
||||
<DialogTitle>{t("ConfirmDialog.confirm")}</DialogTitle>
|
||||
<ConfirmContent mutate={mutate} rowId={rowId} setOpenConfirmDialog={setOpenConfirmDialog}/>
|
||||
</Dialog>
|
||||
</>
|
||||
)
|
||||
|
||||
}
|
||||
export default Confirm;
|
||||
@@ -1,148 +0,0 @@
|
||||
import {REJECT_PROVINCE_HEAD_EXPERT} from "@/core/data/apiRoutes";
|
||||
import {
|
||||
Button,
|
||||
Dialog,
|
||||
DialogActions,
|
||||
DialogContent,
|
||||
DialogTitle,
|
||||
IconButton,
|
||||
Stack,
|
||||
TextField,
|
||||
Tooltip,
|
||||
Typography,
|
||||
} from "@mui/material";
|
||||
import {useTranslations} from "next-intl";
|
||||
import {useFormik} from "formik";
|
||||
import * as Yup from "yup";
|
||||
import {useState} from "react";
|
||||
import UploadSystem from "@/core/components/UploadSystem";
|
||||
import UploadFileNotification from "@/core/components/notifications/UploadFileNotification";
|
||||
import useDirection from "@/lib/app/hooks/useDirection";
|
||||
import ThumbDownIcon from "@mui/icons-material/ThumbDown";
|
||||
import useRequest from "@/lib/app/hooks/useRequest";
|
||||
import useNotification from "@/lib/app/hooks/useNotification";
|
||||
|
||||
|
||||
const Reject = ({rowId, fetchUrl, mutate}) => {
|
||||
const [selectedImage, setSelectedImage] = useState("");
|
||||
const [fileType, setfileType] = useState(null);
|
||||
const [fileName, setfileName] = useState(null);
|
||||
const [showAddIcon, setShowAddIcon] = useState(true);
|
||||
const t = useTranslations();
|
||||
const {directionApp} = useDirection();
|
||||
const [openRejectDialog, setOpenRejectDialog] = useState(false);
|
||||
const requestServer = useRequest({auth: true})
|
||||
const {update_notification} = useNotification()
|
||||
|
||||
const validationSchema = Yup.object().shape({
|
||||
description: Yup.string().required(t("RejectDialog.description_error")),
|
||||
});
|
||||
|
||||
const formik = useFormik({
|
||||
initialValues: {
|
||||
description: "",
|
||||
reject_img: null
|
||||
},
|
||||
validationSchema,
|
||||
onSubmit: (values, {setSubmitting}) => {
|
||||
const formData = new FormData();
|
||||
formData.append("description", values.description);
|
||||
if (values.reject_img != null) formData.append("attachment", values.reject_img);
|
||||
|
||||
requestServer(`${REJECT_PROVINCE_HEAD_EXPERT}/${rowId}`, 'post', {
|
||||
data: formData,
|
||||
}).then((response) => {
|
||||
mutate(fetchUrl)
|
||||
update_notification()
|
||||
}).catch(() => {
|
||||
}).finally(() => {
|
||||
setSubmitting(false);
|
||||
});
|
||||
},
|
||||
});
|
||||
|
||||
const handleDescriptionChange = (event) => {
|
||||
formik.setFieldValue("description", event.target.value);
|
||||
formik.handleChange(event);
|
||||
};
|
||||
const handleUploadChange = (event) => {
|
||||
const uploadedFile = event.target?.files?.[0];
|
||||
if (uploadedFile) {
|
||||
const maxFileSize = 2 * 1024 * 1024;
|
||||
if (uploadedFile.size > maxFileSize) {
|
||||
UploadFileNotification(t);
|
||||
event.target.value = "";
|
||||
return;
|
||||
}
|
||||
const fileType = event.target?.files?.[0].type;
|
||||
const fileName = event.target?.files?.[0].name;
|
||||
setSelectedImage(URL.createObjectURL(uploadedFile));
|
||||
setfileType(fileType);
|
||||
setfileName(fileName);
|
||||
formik.setFieldValue("reject_img", uploadedFile);
|
||||
setShowAddIcon(false);
|
||||
}
|
||||
};
|
||||
return (
|
||||
<>
|
||||
<Tooltip title={t("RejectDialog.reject")}>
|
||||
<IconButton color="primary" onClick={() => setOpenRejectDialog(true)}>
|
||||
<ThumbDownIcon/>
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
<Dialog fullWidth open={openRejectDialog}
|
||||
PaperProps={{sx: {boxShadow: 'rgba(60, 64, 67, 0.3) 0px 1px 16px 0px, rgba(60, 64, 67, 0.15) 0px 1px 10px 0px'}}}>
|
||||
<DialogTitle>{t("RejectDialog.reject")}</DialogTitle>
|
||||
<DialogContent>
|
||||
<Stack spacing={2}>
|
||||
<Stack>
|
||||
<TextField
|
||||
name="description"
|
||||
multiline
|
||||
rows={8}
|
||||
label={t("RejectDialog.description")}
|
||||
value={formik.values.description}
|
||||
onChange={handleDescriptionChange}
|
||||
onBlur={formik.handleBlur("description")}
|
||||
error={
|
||||
formik.touched.description && Boolean(formik.errors.description)
|
||||
}
|
||||
helperText={formik.touched.description && formik.errors.description}
|
||||
fullWidth
|
||||
variant="outlined"
|
||||
sx={{mt: 1}}
|
||||
/>
|
||||
</Stack>
|
||||
<Stack>
|
||||
<Typography>{t("UploadSystem.upload_file")}{t("UploadSystem.optional")}</Typography>
|
||||
<UploadSystem
|
||||
selectedImage={selectedImage}
|
||||
handleUploadChange={handleUploadChange} // Pass the updated function directly
|
||||
setselectedImage={setSelectedImage}
|
||||
setFieldValue={formik.setFieldValue} // Remove props.setFieldValue, use formik.setFieldValue
|
||||
fieldname="reject_img"
|
||||
fileType={fileType}
|
||||
fileName={fileName}
|
||||
imageAlt={t("app_name")}
|
||||
imageSize={[250 /*width*/, 150 /*height*/]}
|
||||
setShowAddIcon={setShowAddIcon}
|
||||
showAddIcon={showAddIcon}
|
||||
/>
|
||||
</Stack>
|
||||
</Stack>
|
||||
</DialogContent>
|
||||
<DialogActions>
|
||||
<Button onClick={() => setOpenRejectDialog(false)} variant="outlined" color="secondary"
|
||||
disabled={formik.isSubmitting} autoFocus>
|
||||
{t("RejectDialog.button-cancel")}
|
||||
</Button>
|
||||
<Button onClick={formik.handleSubmit} variant="contained" color="primary"
|
||||
disabled={formik.isSubmitting}>
|
||||
{t("RejectDialog.button-reject")}
|
||||
</Button>
|
||||
</DialogActions>
|
||||
</Dialog>
|
||||
</>
|
||||
);
|
||||
};
|
||||
export default Reject;
|
||||
@@ -0,0 +1,123 @@
|
||||
import UploadSystem from "@/core/components/UploadSystem"
|
||||
import useNotification from "@/lib/app/hooks/useNotification";
|
||||
import useRequest from "@/lib/app/hooks/useRequest";
|
||||
import {Button, DialogActions, DialogContent, Stack, TextField, Typography} from "@mui/material"
|
||||
import {useFormik} from "formik";
|
||||
import {useTranslations} from "next-intl";
|
||||
import {useState} from "react";
|
||||
import * as Yup from "yup";
|
||||
import {REJECT_PROVINCE_HEAD_EXPERT} from "@/core/data/apiRoutes";
|
||||
|
||||
const RejectContent = ({rowId, mutate, setOpenRejectDialog}) => {
|
||||
const [selectedImage, setSelectedImage] = useState("");
|
||||
const [fileType, setfileType] = useState(null);
|
||||
const [fileName, setfileName] = useState(null);
|
||||
const [showAddIcon, setShowAddIcon] = useState(true);
|
||||
const t = useTranslations();
|
||||
const requestServer = useRequest({auth: true})
|
||||
const {update_notification} = useNotification()
|
||||
|
||||
const validationSchema = Yup.object().shape({
|
||||
description: Yup.string().required(t("RejectDialog.description_error")),
|
||||
});
|
||||
|
||||
const formik = useFormik({
|
||||
initialValues: {
|
||||
description: "",
|
||||
reject_img: null
|
||||
},
|
||||
validationSchema,
|
||||
onSubmit: (values, {setSubmitting}) => {
|
||||
const formData = new FormData();
|
||||
formData.append("description", values.description);
|
||||
if (values.reject_img != null) formData.append("attachment", values.reject_img);
|
||||
|
||||
requestServer(`${REJECT_PROVINCE_HEAD_EXPERT}/${rowId}`, 'post', {
|
||||
data: formData,
|
||||
}).then((response) => {
|
||||
setOpenRejectDialog(false)
|
||||
mutate()
|
||||
update_notification()
|
||||
}).catch(() => {
|
||||
}).finally(() => {
|
||||
setSubmitting(false);
|
||||
});
|
||||
},
|
||||
});
|
||||
|
||||
const handleDescriptionChange = (event) => {
|
||||
formik.setFieldValue("description", event.target.value);
|
||||
formik.handleChange(event);
|
||||
};
|
||||
const handleUploadChange = (event) => {
|
||||
const uploadedFile = event.target?.files?.[0];
|
||||
if (uploadedFile) {
|
||||
const maxFileSize = 2 * 1024 * 1024;
|
||||
if (uploadedFile.size > maxFileSize) {
|
||||
UploadFileNotification(t);
|
||||
event.target.value = "";
|
||||
return;
|
||||
}
|
||||
const fileType = event.target?.files?.[0].type;
|
||||
const fileName = event.target?.files?.[0].name;
|
||||
setSelectedImage(URL.createObjectURL(uploadedFile));
|
||||
setfileType(fileType);
|
||||
setfileName(fileName);
|
||||
formik.setFieldValue("reject_img", uploadedFile);
|
||||
setShowAddIcon(false);
|
||||
}
|
||||
};
|
||||
return (
|
||||
<>
|
||||
<DialogContent>
|
||||
<Stack spacing={2}>
|
||||
<Stack>
|
||||
<TextField
|
||||
name="description"
|
||||
multiline
|
||||
rows={8}
|
||||
label={t("RejectDialog.description")}
|
||||
value={formik.values.description}
|
||||
onChange={handleDescriptionChange}
|
||||
onBlur={formik.handleBlur("description")}
|
||||
error={
|
||||
formik.touched.description && Boolean(formik.errors.description)
|
||||
}
|
||||
helperText={formik.touched.description && formik.errors.description}
|
||||
fullWidth
|
||||
variant="outlined"
|
||||
sx={{mt: 1}}
|
||||
/>
|
||||
</Stack>
|
||||
<Stack>
|
||||
<Typography>{t("UploadSystem.upload_file")}{t("UploadSystem.optional")}</Typography>
|
||||
<UploadSystem
|
||||
selectedImage={selectedImage}
|
||||
handleUploadChange={handleUploadChange} // Pass the updated function directly
|
||||
setselectedImage={setSelectedImage}
|
||||
setFieldValue={formik.setFieldValue} // Remove props.setFieldValue, use formik.setFieldValue
|
||||
fieldname="reject_img"
|
||||
fileType={fileType}
|
||||
fileName={fileName}
|
||||
imageAlt={t("app_name")}
|
||||
imageSize={[250 /*width*/, 150 /*height*/]}
|
||||
setShowAddIcon={setShowAddIcon}
|
||||
showAddIcon={showAddIcon}
|
||||
/>
|
||||
</Stack>
|
||||
</Stack>
|
||||
</DialogContent>
|
||||
<DialogActions>
|
||||
<Button onClick={() => setOpenRejectDialog(false)} variant="outlined" color="secondary"
|
||||
disabled={formik.isSubmitting} autoFocus>
|
||||
{t("RejectDialog.button-cancel")}
|
||||
</Button>
|
||||
<Button onClick={formik.handleSubmit} variant="contained" color="primary"
|
||||
disabled={formik.isSubmitting || !formik.dirty || !formik.isValid}>
|
||||
{t("RejectDialog.button-reject")}
|
||||
</Button>
|
||||
</DialogActions>
|
||||
</>
|
||||
)
|
||||
}
|
||||
export default RejectContent
|
||||
@@ -0,0 +1,25 @@
|
||||
import {Dialog, DialogTitle, IconButton, Tooltip} from "@mui/material"
|
||||
import {useTranslations} from "next-intl";
|
||||
import {useState} from "react";
|
||||
import RejectContent from "./RejectContent";
|
||||
import ThumbDownIcon from "@mui/icons-material/ThumbDown";
|
||||
|
||||
const Reject = ({rowId, mutate}) => {
|
||||
const t = useTranslations();
|
||||
const [openRejectDialog, setOpenRejectDialog] = useState(false);
|
||||
return (
|
||||
<>
|
||||
<Tooltip title={t("RejectDialog.reject")}>
|
||||
<IconButton color="primary" onClick={() => setOpenRejectDialog(true)}>
|
||||
<ThumbDownIcon/>
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
<Dialog fullWidth open={openRejectDialog}
|
||||
PaperProps={{sx: {boxShadow: 'rgba(60, 64, 67, 0.3) 0px 1px 16px 0px, rgba(60, 64, 67, 0.15) 0px 1px 10px 0px'}}}>
|
||||
<DialogTitle>{t("RejectDialog.reject")}</DialogTitle>
|
||||
<RejectContent mutate={mutate} rowId={rowId} setOpenRejectDialog={setOpenRejectDialog}/>
|
||||
</Dialog>
|
||||
</>
|
||||
)
|
||||
}
|
||||
export default Reject
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user