Karimaldeen/hijabi-dashboard
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Done

Browse Source
This commit is contained in:
KarimAldeen 2024-03-11 17:47:28 +03:00
parent c47ea73fdb
commit 6ec649308d
24 changed files with 106 additions and 931 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/App.tsx
View File

@ -4,8 +4,6 @@ import Loading from './Components/Utils/Loading/Loading';
import { RoutesLinks } from './Routes';
import Layout from './Layout/app/Layout';
import Auth from './Pages/Auth/Page';
import EditAccount from './Pages/Account/EditAccount/EditAccount';
import { toast } from 'react-toastify';
const Page404 = lazy(() => import("./Layout/app/NotFoundPage"))
const App = () => {

98
src/Components/Utils/Translate.tsx
View File

@ -1,93 +1,33 @@
import React from 'react';
import { Menu, MenuItem, MenuButton } from '@szhsin/react-menu';
import { useTranslation, initReactI18next } from 'react-i18next';
import i18n from 'i18next';
import translationEN from '../../translate/en.json';
import translationAR from '../../translate/ar.json';
import translationDE from '../../translate/de.json';
i18n.use(initReactI18next).init({
resources: {
en: {
translation: translationEN
},
ar: {
translation: translationAR
},
de: {
translation: translationDE
}
},
lng: 'en',
interpolation: {
escapeValue: false
}
});
let What_the_language = localStorage.getItem('language') ?? "en";
if (What_the_language === "en") {
i18n.changeLanguage('en');
document.body.setAttribute('dir', 'ltr');
document.body.classList.add('en');
} else if (What_the_language === "ar") {
i18n.changeLanguage('ar');
document.body.setAttribute('dir', 'rtl');
document.body.classList.add('ar');
} else if (What_the_language === "de") {
i18n.changeLanguage('de');
document.body.setAttribute('dir', 'ltr');
document.body.classList.add('de');
}
import { useTranslation } from 'react-i18next';
import { useLanguage, useLanguageMenu } from '../../Hooks/useChangeLanguage';
import i18next from 'i18next';
export default function Translate() {
const { t, i18n } = useTranslation();
const { changeLanguage } = useLanguage();
const { languageOptions } = useLanguageMenu();
const changeLanguage = (newLanguage : string) => {
i18n.changeLanguage(newLanguage);
localStorage.setItem("language", newLanguage);
What_the_language = newLanguage;
if (newLanguage === "ar") {
document.body.setAttribute('dir', 'rtl');
document.body.classList.remove('de');
document.body.classList.add('ar');
} else if (newLanguage === "en") {
document.body.setAttribute('dir', 'ltr');
document.body.classList.remove('ar', 'de');
document.body.classList.add('en');
} else if (newLanguage === "de") {
document.body.setAttribute('dir', 'ltr');
document.body.classList.remove('ar');
document.body.classList.add('de');
}
const handleLanguageChange = (newLanguage:string) => {
changeLanguage(newLanguage);
};
return (
<div className='Translate'>
<Menu menuButton={<MenuButton>
{What_the_language === "ar" ?
<>
<img alt='' src={`/Layout/Ar.svg`} width={20} height={20} /> {t("Arabic")}
</>
:
What_the_language === "de" ?
<>
<img alt='' src={`/Layout/De.svg`} width={20} height={20} /> {t("German")}
</>
:
<>
<img alt='' src={`/Layout/En.svg`} width={20} height={20} /> {t("English")}
</>
}
{languageOptions.map((option:any,index:number) => (
option.code === i18next.language ?
<React.Fragment key={index}>
<img alt='' src={option.icon} width={20} height={20} /> {option.label}
</React.Fragment>
: null
))}
</MenuButton>} transition>
<MenuItem onClick={() => changeLanguage('ar')}>
<img alt='' src='/Layout/Ar.svg' width={20} height={20} /> {t("Arabic")}
</MenuItem>
<MenuItem onClick={() => changeLanguage('en')}>
<img alt='' src='/Layout/En.svg' width={20} height={20} /> {t("English")}
</MenuItem>
<MenuItem onClick={() => changeLanguage('de')}>
<img alt='' src='/Layout/De.svg' width={20} height={20} /> {t("German")}
{languageOptions.map((option:any) => (
<MenuItem key={option.code} onClick={() => handleLanguageChange(option.code)}>
<img alt='' src={option.icon} width={20} height={20} /> {option.label}
</MenuItem>
))}
</Menu>
</div>
);

71
src/Hooks/useChangeLanguage.tsx Normal file
View File

@ -0,0 +1,71 @@
import { useEffect } from 'react';
import { initReactI18next, useTranslation } from 'react-i18next';
import i18n from 'i18next';
import translationEN from '../translate/en.json';
import translationAR from '../translate/ar.json';
import translationDE from '../translate/de.json';
let language = localStorage.getItem('language') ?? 'en';
i18n.use(initReactI18next).init({
resources: {
en: {
translation: translationEN
},
ar: {
translation: translationAR
},
de: {
translation: translationDE
}
},
lng: language ?? "en",
interpolation: {
escapeValue: false
}
});
// console.log(navigator.language,"navigator.language");
export function useLanguage() {
useEffect(() => {
changeLanguage(language);
}, []);
const changeLanguage = (newLanguage:any) => {
i18n.changeLanguage(newLanguage);
localStorage.setItem('language', newLanguage);
applyLanguageStyles(newLanguage);
};
return { changeLanguage };
}
function applyLanguageStyles(language:any) {
if (language === 'ar') {
document.body.setAttribute('dir', 'rtl');
document.body.classList.remove('de');
document.body.classList.add('ar');
} else if (language === 'en') {
document.body.setAttribute('dir', 'ltr');
document.body.classList.remove('ar', 'de');
document.body.classList.add('en');
} else if (language === 'de') {
document.body.setAttribute('dir', 'ltr');
document.body.classList.remove('ar');
document.body.classList.add('de');
}
}
export function useLanguageMenu() {
const { t } = useTranslation();
const languageOptions = [
{ code: 'ar', icon: '/Layout/Ar.svg', label: t('Arabic') },
{ code: 'en', icon: '/Layout/En.svg', label: t('English') },
{ code: 'de', icon: '/Layout/De.svg', label: t('German') }
];
return { languageOptions };
}

31
src/Pages/Account/AddAccount/AddccountPage.tsx
View File

@ -1,31 +0,0 @@
import React, { FC, useEffect } from "react";
import { RegisterForm } from "./RegisterForm";
import { Card, CardHeader, CardBody } from "reactstrap";
import { useAddAccount } from "../../../api/Account";
import { useTranslation } from "react-i18next";
import { useNavigate } from "react-router-dom";
const AddAccount: FC = () => {
const {t} = useTranslation();
const addMutation: any = useAddAccount();
const Naviagte = useNavigate();
useEffect(() => {
if (addMutation.isSuccess) {
Naviagte("/Account/View");
}
}, [addMutation.isSuccess]);
return (
<Card>
<CardHeader>
<h4 className="add_account_title">{t("add_account")}</h4>
</CardHeader>
<CardBody>
<RegisterForm mutation={addMutation} />
</CardBody>
</Card>
);
};
export default AddAccount;

164
src/Pages/Account/AddAccount/RegisterForm.tsx
View File

@ -1,164 +0,0 @@
import React, { FC } from "react";
import { Form, Formik } from "formik";
import { Row, Col } from "reactstrap";
import MailOutlineIcon from "@mui/icons-material/MailOutline";
import LockOutlinedIcon from "@mui/icons-material/LockOutlined";
import PersonOutlineOutlinedIcon from "@mui/icons-material/PersonOutlineOutlined";
import { ADMIN, Roles, SUPER_ADMIN, VENDOR} from "../../../config/RoleConfige";
import * as Yup from "yup";
import "./index.css";
import PropTypes from "prop-types";
import { getDataToSend } from "../../../api/Account";
import Select from 'react-select';
import { convet_data_to_select } from "./Utils";
// import { useGetAllRoles } from "../../../api/Role";
import { useTranslation } from "react-i18next";
import { ValidatedField } from "../../../Components/Ui";
import { LoadingButton } from "../../../Components/Ui/LoadingButton";
import ValidationField from "../../../Components/ValidationField/ValidationField";
interface RegisterFormProps {
mutation: any;
editMode?: boolean;
objectToEdit?: any;
}
export const RegisterForm: FC<RegisterFormProps> = ({ mutation, editMode = false, objectToEdit = {} }) => {
const {t} = useTranslation();
// const {data} = useGetAllRoles();
const rolesOptions = convet_data_to_select([]);
const handleSubmit = (values: any) => {
values['role_name'] = rolesOptions.find(e => e.value == values['role_id'])?.label
const dataToSend = getDataToSend(values, editMode, objectToEdit);
mutation.mutate(dataToSend);
};
return (
<Formik
initialValues={getInitialValues(editMode, objectToEdit)}
validationSchema={getValidationSchema(editMode)}
onSubmit={handleSubmit}
>
{(formik) => (
<Form>
<Row lg={2} xl={2}>
<Col>
<ValidationField
name="full_name"
label="full_name"
placeholder="full_name"
type="text"
/>
</Col>
<Col>
<ValidationField
type="Select"
option={rolesOptions}
label="role"
placeholder="Select Role"
name="role_id"
/>
<p style={{color:'red'}}>{formik.errors.role_name} </p>
</Col>
</Row>
<Row xs={1} sm={1} md={2} lg={2} xl={2}>
<Col>
<ValidationField
name="email"
label="email"
placeholder="email"
type="text"
/>
</Col>
<Col>
<ValidationField
name="phone"
label="phone"
placeholder="phone"
type="number"
/>
</Col>
{!editMode && (
<>
<Col>
<ValidationField
name="password"
label="password"
placeholder="password"
type="password"
/>
</Col>
<Col>
<ValidationField
name="password_confirmation"
label="confirm_password"
placeholder="confirm_password"
type="password"
/>
</Col>
</>
)}
</Row>
<LoadingButton
isLoading={mutation.isLoading}
className="mt-1 float-right"
color="primary"
type="submit"
>
{!editMode ? t("add") : t("save")}
</LoadingButton>
</Form>
)}
</Formik>
);
};
RegisterForm.propTypes = {
editMode: PropTypes.bool,
objectToEdit: PropTypes.object,
};
RegisterForm.defaultProps = {
editMode: false,
objectToEdit: {},
};
function getInitialValues(editMode: boolean, objectToEdit: any) {
if (editMode) {
return {
full_name: objectToEdit.full_name,
email: objectToEdit.email,
phone: objectToEdit.phone,
role: objectToEdit.role_type,
password: "",
password_confirmation: "",
role_id:objectToEdit?.roles.id
};
}
return {
full_name: "",
email: "",
password: "",
password_confirmation: "",
phone: "",
role_name: "",
role_id:''
};
}
function getValidationSchema(editMode: boolean) {
return Yup.object().shape({
full_name: Yup.string().required("required"),
email: Yup.string().email("validation.invalid_email").required("required"),
phone: Yup.string().required("required"),
role_id:Yup.string().required("required"),
});
}

5
src/Pages/Account/AddAccount/Utils.ts
View File

@ -1,5 +0,0 @@
export const convet_data_to_select = (array: any[]): { label: string, value: string }[] => {
let new_array: { label: string, value: string }[] = [];
new_array = array.map(e => ({ label: e.name, value: e.id }));
return new_array;
}

13
src/Pages/Account/AddAccount/index.css
View File

@ -1,13 +0,0 @@
.permissions-section {
padding: 1.5rem;
border: 1px solid lightgray;
border-radius: 10px;
white-space: pre-wrap;
}
.RoleTitle{
font-weight: 500;
margin-bottom: 0;
color: var(--primary);
}

48
src/Pages/Account/EditAccount/EditAccount.tsx
View File

@ -1,48 +0,0 @@
import React, { FC, useEffect } from "react";
import { RegisterForm } from "../AddAccount/RegisterForm";
import { Card, CardHeader, CardBody, Button } from "reactstrap";
import { useUpdateAccount } from "../../../api/Account";
import { useTranslation } from "react-i18next";
import { useLocation, useNavigate } from "react-router-dom";
interface EditAccountProps {
location: {
state: any;
};
}
const EditAccount: FC<EditAccountProps> = () => {
const {t} = useTranslation();
const location = useLocation()
const objectToEdit = location?.state;
console.log(objectToEdit);
const updateMutation = useUpdateAccount();
const Navigate = useNavigate();
useEffect(() => {
if (updateMutation.isSuccess) {
Navigate("/Account/View");
}
}, [updateMutation.isSuccess]);
return (
<Card>
<CardHeader style={{ display: 'flex', justifyContent: 'space-between', width: '100%' }}>
<h4 className="add_account_title">{t("edit_account")}</h4>
<Button onClick={() => Navigate('/Account/View')} color="primary">
{t('back')}
</Button>
</CardHeader>
<CardBody>
<RegisterForm
mutation={updateMutation}
editMode={true}
objectToEdit={objectToEdit}
/>
</CardBody>
</Card>
);
};
export default EditAccount;

80
src/Pages/Account/EditAccount/EditPassword.tsx
View File

@ -1,80 +0,0 @@
import React, { FC, useState, useEffect } from "react";
import { Modal, ModalHeader, ModalBody, ModalFooter, Button } from "reactstrap";
import { Formik, Form } from "formik";
// import ChangePassword, {
// initialValues,
// validationSchema,
// } from "components/forms/ChangePassword";
import { useTranslation } from "react-i18next";
import { LoadingButton } from "../../../Components/Ui/LoadingButton";
import { useChangePassword } from "../../../api/Account";
import ChangePassword, { initialValues, validationSchema } from "./formutils";
interface EditPasswordModalProps {
isOpen: boolean;
setIsOpen: (isOpen: boolean) => void;
objectToEdit: any;
setObjectToEdit: (objectToEdit: any) => void;
}
const EditPasswordModal: FC<EditPasswordModalProps> = ({
isOpen,
setIsOpen,
objectToEdit,
setObjectToEdit,
}) => {
const {t} = useTranslation();
const updateMutation = useChangePassword();
const handleSubmit = (values: any) => {
updateMutation.mutate({ ...values, account_id: objectToEdit.id , password_confirmation:values.c_password });
};
useEffect(() => {
if (updateMutation.isSuccess) {
setIsOpen(false);
}
}, [updateMutation.isSuccess, setIsOpen]);
return (
<Modal centered isOpen={isOpen} size="md">
<ModalHeader className="change_password_header">{t("change_password")}</ModalHeader>
{objectToEdit && (
<Formik
onSubmit={handleSubmit}
initialValues={initialValues}
validationSchema={validationSchema}
>
{(formik) => (
<Form>
<ModalBody>
<div>
<h6 className="change_password_body">{objectToEdit?.full_name}</h6>
</div>
<ChangePassword />
</ModalBody>
<ModalFooter>
<Button
disabled={updateMutation.isLoading}
onClick={() => setIsOpen(false)}
color="danger"
>
{t("cancel")}
</Button>
<LoadingButton
type="submit"
color="primary"
isLoading={updateMutation.isLoading}
>
{t("save")}
</LoadingButton>
</ModalFooter>
</Form>
)}
</Formik>
)}
</Modal>
);
};
export default EditPasswordModal;

43
src/Pages/Account/EditAccount/formutils.tsx
View File

@ -1,43 +0,0 @@
import React, { FC } from "react";
import * as Yup from "yup";
import { useTranslation } from "react-i18next";
import { PasswordField } from "../../../Components/Ui/PasswordField/PasswordField";
interface ChangePasswordProps {
id?: string;
mutation?: any;
}
export const validationSchema = Yup.object().shape({
password: Yup.string().required("_required.password"),
c_password: Yup.string()
.required("_required.password")
.oneOf([Yup.ref("password")], "validation.passwords_match"),
});
export const initialValues = {
password: "",
c_password: "",
};
const ChangePassword: FC<ChangePasswordProps> = ({ id, mutation }) => {
const {t} = useTranslation();
return (
<>
<PasswordField
name="password"
label={t("password")}
// placeholder="Password"
/>
<PasswordField
name="c_password"
label={t("confirm_password")}
// placeholder="Confirm Password"
/>
</>
);
};
export default ChangePassword;

34
src/Pages/Account/viewAccount/FormViewAccount.tsx
View File

@ -1,34 +0,0 @@
import React from 'react'
import { Col, Row } from 'reactstrap';
import ValidationField from '../../../Components/ValidationField/ValidationField';
import { FakeSelectData } from '../../../Layout/app/Const';
import { useFormikContext } from 'formik';
import { DatePicker } from 'antd';
function FormViewAccount() {
const formik = useFormikContext<any>();
return (
<Row xs={1} sm={1} md={1} lg={2} xl={2}>
<Col>
<ValidationField name="name" type="text"label='name' placeholder='placeholder' />
</Col>
<Col>
<ValidationField name="date" type="Date" label='date' placeholder='placeholder' />
</Col>
</Row>
)
}
export default FormViewAccount

43
src/Pages/Account/viewAccount/ViewAccountPage.tsx
View File

@ -1,43 +0,0 @@
import React from 'react'
import DashBody from '../../../Layout/Dashboard/DashBody'
import DashHeader from '../../../Layout/Dashboard/DashHeader'
import LyTable from '../../../Layout/Dashboard/LyTable'
import useTableColumns from './useTableColumns'
import { useGetAccounts} from '../../../api/Account'
import { QueryStatusEnum } from '../../../config/QueryStatus'
import EditPasswordModal from '../EditAccount/EditPassword'
function ViewAccountPage() {
const {data ,status } = useGetAccounts()
const [editPasswordModal, setEditPasswordModal] = React.useState(false);
const [objectToEdit, setObjectToEdit] = React.useState(null);
const columns = useTableColumns(setEditPasswordModal ,setObjectToEdit);
return (
// Pass Status to Layout
<DashBody status={status as QueryStatusEnum} >
<DashHeader title={'view_accounts'} showAddButton={false}></DashHeader>
<LyTable
data={data}
isLoading={false}
columns={columns}
/>
<EditPasswordModal
isOpen={editPasswordModal}
setIsOpen={setEditPasswordModal}
objectToEdit={objectToEdit}
setObjectToEdit={setObjectToEdit}
/>
</DashBody>
)
}
export default ViewAccountPage

51
src/Pages/Account/viewAccount/formUtil.ts
View File

@ -1,51 +0,0 @@
import * as Yup from "yup";
import { buildFormData } from "../../../api/helper/buildFormData";
interface formUtilCommon {
name:string,
email:string
}
interface ObjectToEdit extends formUtilCommon {
id?:number,
}
interface InitialValues extends ObjectToEdit {
}
interface ValidateSchema extends formUtilCommon{
}
export const getInitialValues = (objectToEdit: ObjectToEdit | null = null): InitialValues => {
return {
id:objectToEdit?.id?? 0 ,
name:objectToEdit?.name ?? "",
email:objectToEdit?.email?? ""
}
};
export const getValidationSchema = (editMode: boolean = false): Yup.Schema<ValidateSchema> => {
// validate input
return Yup.object().shape({
name:Yup.string().required('required'),
email:Yup.string().required("required")
});
};
export const getDataToSend = (values: any): FormData => {
const data = { ...values };
const formData = new FormData();
buildFormData(formData, data);
return formData;
};

79
src/Pages/Account/viewAccount/useTableColumns.tsx
View File

@ -1,79 +0,0 @@
import React, { useMemo } from "react";
import { useTranslation } from "react-i18next";
import Actions from "../../../Components/Ui/tables/Actions";
import { useNavigate } from "react-router";
import useDeleteMutation from "../../../api/helper/useDeleteMutation";
import { useDeleteAccount } from "../../../api/Account";
import { RiLockPasswordFill } from "react-icons/ri";
const useTableColumns :any = (setEditPasswordModal:any ,setObjectToEdit: any) => {
const [t] = useTranslation();
const navigate = useNavigate();
const deleteMutation = useDeleteAccount();
return useMemo(
() => [
{
name: t("full_name"),
sortable: false,
center: "true",
cell: (row:any) => row?.full_name
},
{
name: t("role"),
sortable: false,
center: "true",
cell: (row:any) => row?.roles?.name
},
{
name: t("email"),
sortable: false,
center: "true",
cell: (row:any) => row?.email
},
{
name: t("phone"),
sortable: false,
center: "true",
cell: (row:any) => row?.phone
},
{
name: "#",
sortable: false,
center: "true",
cell: (row) => (
<>
<Actions
// importnat to return the row in on Edit Function to store in objectToEdit That Upper in Edit Modal
onEdit={() => {
navigate("/Account/Edit" ,{
state:row
})
}}
showView={false}
objectToEdit={row}
showEdit={true}
onDelete={() => deleteMutation.mutate({id:row.id })}
/>
<RiLockPasswordFill
onClick={() => {
// navigate('/')
setEditPasswordModal(true);
setObjectToEdit(row);
}}
className="lock_icon"
size={22}
/>
</>
),
},
],
[t]
);
};
export default useTableColumns;

23
src/Pages/Categories/useTableColumns.tsx
View File

@ -6,7 +6,6 @@ import ColumnsImage from "../../Components/Columns/ColumnsImage";
import { useDeleteCategories } from "../../api/Categories";
import { useNavigate } from "react-router-dom";
function fnDelete(props :any ){}
const useTableColumns :any = () => {
const [t] = useTranslation();
@ -60,29 +59,7 @@ const useTableColumns :any = () => {
/>
),
},
// {
// name: t("status"),
// sortable: false,
// center: "true",
// cell: (row:any) => {
// return(
// <p style={{
// background:!row.deleted_at ?'#19ab27':'#ea5454',
// color:"white",
// padding:6,
// borderRadius:10,
// position:"relative",
// top:'7px'
// }}>
// {
// !row.deleted_at ? t('available') : t('unavailable')
// }
// </p>
// )
// }
// },
],
[t]

14
src/Pages/Coupon/View/AddForm.tsx
View File

@ -1,5 +1,5 @@
import React from 'react'
import React, { useEffect } from 'react'
import { Col, Row } from 'reactstrap';
import ValidationField from '../../../Components/ValidationField/ValidationField';
import { useFormikContext } from 'formik';
@ -12,7 +12,7 @@ import useFormatToSelect from '../../../Hooks/useFormatToSelect';
import { useGetProduct } from '../../../api/product';
function Form() {
const { values } = useFormikContext<any>();
const { values ,setFieldValue} = useFormikContext<any>();
const [t] = useTranslation(); // FLAT coupn not be spacified && flate
const coupon_type = [{ lable: "general", value: "general" },{ lable: "specified", value: "specified" }]
const coupon_type_discount_flat = [{ lable: "general", value: "general" }]
@ -24,6 +24,16 @@ function Form() {
const SelectCategoriesData = useFormatToSelect(CategoriesData?.categories)
const SelectProductData = useFormatToSelect(ProductData?.BaseProducts)
useEffect(() => {
if (values?.discount_type === 'flat') {
console.log(values?.coupon_type,"values?.coupon_type");
setFieldValue("coupon_type","general")
}
}, [values?.discount_type])
return (
<Row xs={1} sm={1} md={1} lg={2} xl={2}>
<Col>

2
src/Pages/Coupon/formUtil.ts
View File

@ -68,7 +68,7 @@ export const getInitialValuesForAdd = (objectToEdit: any | null = null): any =>
maximum_number_of_uses_per_user: '',
maximum_number_of_uses: '',
coupon_value: '',
coupon_type: '',
coupon_type: 'general',
discount_type: '',
product_attr: '',
category_attr: '',

1
src/Pages/Home/HomePage.tsx
View File

@ -9,6 +9,7 @@ import Chart from "./Chart";
export default function HomePage() {
const { t } = useTranslation();
const cardsData = [
{
icon: <FaRedRiver className="warning" size={24} />,

33
src/Pages/appSetting/AppSettingPage.tsx
View File

@ -1,33 +0,0 @@
import React from 'react'
import DashBody from '../../Layout/Dashboard/DashBody'
import DashHeader from '../../Layout/Dashboard/DashHeader'
import LyTable from '../../Layout/Dashboard/LyTable'
import useTableColumns from './useTableColumns'
import { useGetAppSetting} from '../../api/appSetting'
import { QueryStatusEnum } from '../../config/QueryStatus'
import EditAppSettingModal from './EditAppSettingModal'
function AppSettingPage() {
const column =useTableColumns()
const {data ,status } = useGetAppSetting()
return (
// Pass Status to Layout
<DashBody status={status as QueryStatusEnum} >
<DashHeader showAddButton={false} title={'app_setting'}></DashHeader>
<LyTable
data={data}
isLoading={false}
columns={column}
/>
<EditAppSettingModal />
</DashBody>
)
}
export default AppSettingPage

36
src/Pages/appSetting/EditAppSettingModal.tsx
View File

@ -1,36 +0,0 @@
import React from 'react'
import LayoutModal from '../../Layout/Dashboard/LayoutModal'
import FormAppSetting from './FormAppSetting'
import { InitialValues, getInitialValues, getValidationSchema } from './formUtil'
import { usePageState } from '../../lib/state mangment/LayoutPagestate'
import { QueryStatusEnum } from '../../config/QueryStatus'
import { useUpdateAppSetting } from '../../api/appSetting'
function EditAppSettingModal() {
const {objectToEdit} = usePageState()
const {status , mutate } = useUpdateAppSetting();
const handleEditSubmit = (values:InitialValues) => {
console.log(values);
mutate({
key:values.key,
value:values.value,
setting_id:objectToEdit.id,
title:values.name,
is_percentage:values?.is_percentage
})
}
return (
<LayoutModal
isAddModal={false}
getInitialValues={getInitialValues(objectToEdit)}
handleSubmit={handleEditSubmit}
status={status as QueryStatusEnum}
headerText='Edit Modal'
getValidationSchema={getValidationSchema(objectToEdit)}>
<FormAppSetting />
</LayoutModal>
)
}
export default EditAppSettingModal

33
src/Pages/appSetting/FormAppSetting.tsx
View File

@ -1,33 +0,0 @@
import React from 'react'
import { Col, Row } from 'reactstrap';
import ValidationField from '../../Components/ValidationField/ValidationField';
import { useFormikContext } from 'formik';
function FormAppSetting() {
const formik = useFormikContext<any>();
return (
<Row xs={1} sm={1} md={1} lg={2} xl={2}>
<Col>
<ValidationField name="name" type="text"label='name' isDisabled placeholder='placeholder' />
</Col>
<Col>
<ValidationField name="value" type="text"label='value' placeholder='placeholder' />
</Col>
</Row>
)
}
export default FormAppSetting

59
src/Pages/appSetting/formUtil.ts
View File

@ -1,59 +0,0 @@
import * as Yup from "yup";
import { buildFormData } from "../../api/helper/buildFormData";
interface formUtilCommon {
value:string
}
interface ObjectToEdit extends formUtilCommon {
id?:number,
title:string,
key:string,
is_percentage:number,
}
export interface InitialValues extends formUtilCommon {
id?:number,
name:string,
key:string,
is_percentage:number,
}
interface ValidateSchema extends formUtilCommon{
name:string,
}
export const getInitialValues = (objectToEdit: ObjectToEdit | null = null): InitialValues => {
// console.log(objectToEdit);
return {
id:objectToEdit?.id?? 0 ,
name:objectToEdit?.title ?? "",
value:objectToEdit?.value?? "",
key:objectToEdit?.key?? "",
is_percentage:objectToEdit?.is_percentage?? 0,
}
};
export const getValidationSchema = (editMode: boolean = false): Yup.Schema<ValidateSchema> => {
// validate input
return Yup.object().shape({
name:Yup.string().required('required'),
value:Yup.string().required("required")
});
};
export const getDataToSend = (values: any): FormData => {
const data = { ...values };
const formData = new FormData();
buildFormData(formData, data);
return formData;
};

49
src/Pages/appSetting/useTableColumns.tsx
View File

@ -1,49 +0,0 @@
import React, { useMemo } from "react";
import { useTranslation } from "react-i18next";
import Actions from "../../Components/Ui/tables/Actions";
import { useDeleteAppSetting } from "../../api/appSetting";
const useTableColumns :any = () => {
const [t] = useTranslation();
const {mutate} = useDeleteAppSetting();
return useMemo(
() => [
{
name: t("name"),
sortable: false,
center: "true",
cell: (row:any) => row?.title
},
{
name: t("value"),
sortable: false,
center: "true",
cell: (row:any) => row?.value
},
{
name: "#",
sortable: false,
center: "true",
cell: (row) => (
<Actions
onEdit={() => {}}
showView={false}
objectToEdit={row}
showEdit={true}
// showDelete={false}
onDelete={() => mutate({ id: row.id })}
/>
),
},
],
[t]
);
};
export default useTableColumns;

21
src/Pages/order/useTableColumns.tsx
View File

@ -1,15 +1,7 @@
import React, { useMemo } from "react";
// import { history } from "../../../history";
// import { GrView } from "react-icons/gr";
// import OrderStatus from "components/OrderStatus";
// import Actions from "components/table/TableActions";
import { useTranslation } from "react-i18next";
import { useDeleteOrder } from "../../api/order";
import { GrView } from "react-icons/gr";
import Actions from "../../Components/Ui/tables/Actions";
import { history } from "../../ProviderContainer";
import { useNavigate } from "react-router-dom";
import ColumnsImage from "../../Components/Columns/ColumnsImage";
const useTableColumns = () => {
const [t] = useTranslation();
@ -25,18 +17,6 @@ const useTableColumns = () => {
center:true,
selector:(row:any) => row?.id,
},
// {
// name: t("image"),
// sortable: false,
// center:true,
// width : "100px",
// selector:(row:any) => {
// let str = row?.photo;
// str = str?.replace(`public`, "/storage") ?? "";
// return <ColumnsImage src={str} />
// }
// },
{
name: t("name"),
sortable: false,
@ -67,7 +47,6 @@ const useTableColumns = () => {
name: t("total"),
center: true,
cell:(row:any)=>{
console.log(row);
return (row?.total)
}