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

#18

Browse Source
This commit is contained in:
KarimAldeen 2024-03-27 08:36:26 +03:00
parent a2461703ba
commit 7d33171980
9 changed files with 103 additions and 106 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
src/Pages/Users/Page.tsx
View File

@ -5,9 +5,7 @@ import DashHeader from '../../Layout/Dashboard/DashHeader'
import LyTable from '../../Layout/Dashboard/LyTable'
import useTableColumns from './useTableColumns'
import { QueryStatusEnum } from '../../config/QueryStatus'
import { useTranslation } from 'react-i18next'
import { useNavigate } from 'react-router-dom'
import AddButton from '../../Layout/Dashboard/AddButton/AddButton'
import { useGetUsers } from '../../api/users'
import SearchField from '../../Layout/Dashboard/SearchField'
@ -15,8 +13,7 @@ function Page() {
const column =useTableColumns()
const {data ,status } = useGetUsers()
const [t] = useTranslation()
const navigate = useNavigate()
const totalRows = data?.meta?.total;
return (

57
src/Pages/Users/View/AddPage.tsx
View File

@ -1,57 +0,0 @@
import React, { useEffect, useState } from 'react'
import { getInitialValuesForAdd as getInitialValues, getValidationSchema, getDataToSend } from '../formUtil'
import { Tab, TabList, TabPanel as TabBody, Tabs } from 'react-tabs'
import 'react-tabs/style/react-tabs.css';
import { MdLanguage } from 'react-icons/md'
import ViewPage from '../../../Layout/Dashboard/ViewPage';
import { useTranslation } from 'react-i18next';
import useNavigateOnSuccess from '../../../Hooks/useNavigateOnSuccess';
import { useAddUsers } from '../../../api/users';
import Form from './AddForm';
const AddPage = () => {
const { mutate, isLoading:IsloadingButton, isSuccess } = useAddUsers()
const handleSubmit = (values: any) => {
mutate(values)
};
const { t } = useTranslation();
useNavigateOnSuccess(isSuccess, '/users')
const ViewProps = { getInitialValues, getValidationSchema, getDataToSend, handleSubmit,IsloadingButton };
return (
<div className='ViewPage'>
<ViewPage {...ViewProps}>
<Tabs>
<TabList>
<Tab><div className='SignleDriverContainer'><span className='SignleDriverInfoIcon'><MdLanguage size={20} /></span> <h6 className='SingleDriverInfo'>{t("BasicInfo")}</h6></div></Tab>
</TabList>
<TabBody >
<div className=" mt-4"><Form /></div>
</TabBody>
</Tabs>
</ViewPage>
</div>
)
}
export default AddPage

6
src/Pages/Users/View/AddForm.tsx → src/Pages/Users/View/EditForm.tsx
View File

@ -7,14 +7,12 @@ function Form() {
return (
<Row xs={1} sm={1} md={1} lg={2} xl={2}>
<Col>
<ValidationField name="name" />
<ValidationField name="avatar" type="File" />
<ValidationField name="password" />
</Col>
<Col>
<ValidationField name="type" />
<ValidationField name="email" />
</Col>

67
src/Pages/Users/View/EditPage.tsx Normal file
View File

@ -0,0 +1,67 @@
import React, { useEffect } from 'react'
import { getInitialValues, getDataToSend } from '../formUtil'
import { Tab, TabList, TabPanel as TabBody, Tabs } from 'react-tabs'
import 'react-tabs/style/react-tabs.css';
import { MdLanguage } from 'react-icons/md'
import ViewPage from '../../../Layout/Dashboard/ViewPage';
import { usePageState } from '../../../lib/state mangment/LayoutPagestate';
import LoadingPage from '../../../Layout/app/LoadingPage';
import { useTranslation } from 'react-i18next';
import { useGetOneUser, useUpdateAdmin } from '../../../api/users';
import useNavigateOnSuccess from '../../../Hooks/useNavigateOnSuccess';
import Form from './EditForm';
const EditPage = () => {
const { setObjectToEdit, objectToEdit } = usePageState()
const {t} = useTranslation();
const { data } = useGetOneUser()
const {mutate ,isSuccess,isLoading:IsloadingButton} = useUpdateAdmin("put")
const handleSubmit = (values:any)=>{
return mutate(values);
}
useNavigateOnSuccess(isSuccess , '/users')
useEffect(() => {
console.log(data);
setObjectToEdit(data?.data);
}, [data]);
const getValidationSchema = () => {
return null
};
const ViewProps = { getInitialValues, getValidationSchema, getDataToSend, handleSubmit,IsloadingButton };
return (
<div className='ViewPage'>
{objectToEdit && data ?
<ViewPage {...ViewProps}>
<Tabs>
<TabList>
<Tab><div className='SignleDriverContainer'><span className='SignleDriverInfoIcon'><MdLanguage size={20} /></span> <h6 className='SingleDriverInfo'>{t("BasicInfo")}</h6></div></Tab>
</TabList>
<TabBody >
<div className=" mt-4"><Form /></div>
</TabBody>
</Tabs>
</ViewPage>
: <LoadingPage />}
</div>
)
}
export default EditPage

19
src/Pages/Users/formUtil.ts
View File

@ -1,28 +1,22 @@
import * as Yup from "yup";
import { buildFormData } from "../../api/helper/buildFormData";
import moment from 'moment';
import * as dayjs from 'dayjs'
export const getInitialValues = (objectToEdit: any | null = null): any => {
//@ts-ignore
return {
id: objectToEdit?.id ,
name: objectToEdit?.name ,
email: objectToEdit?.email ,
type: objectToEdit?.type ,
avatar: objectToEdit?.avatar ,
password: objectToEdit?.password ,
};
};
export const getInitialValuesForAdd = (objectToEdit: any | null = null): any => {
return {
name: null ,
email: null ,
type: null ,
avatar: null ,
password: null ,
};
};
@ -30,10 +24,7 @@ export const getInitialValuesForAdd = (objectToEdit: any | null = null): any =>
export const getValidationSchema = (editMode: boolean = false): Yup.Schema<any> => {
// Validate input
return Yup.object().shape({
name: Yup.string().required('Required'),
email: Yup.string().required('Required'),
type: Yup.string().required('Required'),
avatar: Yup.string().required('Required'),
});
};

20
src/Pages/Users/useTableColumns.tsx
View File

@ -4,25 +4,31 @@ import { useTranslation } from "react-i18next";
import Actions from "../../Components/Ui/tables/Actions";
import ColumnsImage from "../../Components/Columns/ColumnsImage";
import { useNavigate } from "react-router-dom";
import { useDeleteUsers, useUpdateUsers } from "../../api/users";
import { useUpdateUsers } from "../../api/users";
import { Switch } from "antd";
import { MdEmail } from "react-icons/md";
import { useModalState } from "../../zustand/Modal";
import { toast } from "react-toastify";
const useTableColumns: any = () => {
const [t] = useTranslation();
const deleteMutation = useDeleteUsers()
const navigate = useNavigate()
const { mutate: update_status } = useUpdateUsers("put")
const onChange = (checked: boolean, row: any) => {
console.log(`switch to ${checked}`);
console.log(`switch to ${checked}`)
if(row.type === "user"){
update_status({
id: row.id,
status: checked ? "active" : "suspended"
})
}else{
toast.error("sorry_only_user_can_change_his_status")
}
};
@ -78,8 +84,8 @@ const useTableColumns: any = () => {
cell: (row: any) => (
<Actions
objectToEdit={row}
showEdit={false}
onEdit={() => navigate(`/users/${row.id}`)}
showEdit={row.type === "user" ?false : true}
onEdit={() => navigate(`/admin/${row.id}`)}
showView={false}
// onDelete={() => deleteMutation.mutate({ id: row.id })}
showDelete={false}
@ -91,7 +97,7 @@ const useTableColumns: any = () => {
},
],
[t]
[]
);
};

6
src/Routes.tsx
View File

@ -31,7 +31,7 @@ import AddSliderPage from "./Pages/Slider/View/AddPage";
import EditSlider from "./Pages/Slider/View/EditPage";
import UsersPage from "./Pages/Users/Page";
import AddUsersPage from "./Pages/Users/View/AddPage";
import EditUsersPage from "./Pages/Users/View/EditPage";
import AddUsersNotifactionPage from "./Pages/Users/SendNotifcation/View/AddPage";
@ -160,8 +160,8 @@ export const RoutesLinks: RoutesLinksType[] = [
href: "/users",
},
{
href: "/users/add",
element: <AddUsersPage />,
href: "/admin/:id",
element: <EditUsersPage />,
hidden:true
},

8
src/api/users.ts
View File

@ -3,15 +3,18 @@ import useGetQueryPagination from "./helper/ueGetPagination";
import useAddMutation from "./helper/useAddMutation"
import useDeleteMutation from "./helper/useDeleteMutation"
import useGetOneQuery from "./helper/useGetOneQuery";
import useGetQuery from "./helper/useGetQuery"
import useUpdateMutation from "./helper/useUpdateMutation";
import useUpdateMutationById from "./helper/useUpdateMutationById";
const API = {
ADD: `user`,
GET_ALL: `user?notOfType=admin`,
// GET_ALL: `user?notOfType=admin`,
GET_ALL: `user`,
DELETE: `user`,
UPDATE: `user/updateStatus`,
UPDATE_ADMIN: `user`,
};
const KEY = "User"
@ -22,6 +25,7 @@ export const useGetOneUser = (params?:any) => useGetOneQuery(KEY, API.GET_ALL,pa
export const useAddUsers = () => useAddMutation(KEY, API.ADD);
export const useUpdateUsers = (method?:string) => useUpdateMutationById(KEY, API.UPDATE,true,method);
export const useUpdateAdmin = (method?:string) => useUpdateMutation(KEY, API.UPDATE_ADMIN,true,method);
export const useDeleteUsers = () =>useDeleteMutation(KEY, API.DELETE);

11
src/translate/text
View File

@ -1,10 +1 @@
Product_Count_in_your_Application
productCount
user_in_your_Application
userCount
orderCount
order_count_in_your_Application
You_have
users
orders
month
sorry_only_user_can_change_his_status