Skip to content

F
FMS_Project_Frontend
Commit 344d1dff authored by ReemyHasan's avatar ReemyHasan
Browse files
Options

Add Users Functionalties

parent fee3154a
Hide whitespace changes
Inline Side-by-side
Showing with 1237 additions and 501 deletions
packages/admin/pages/_app.tsx
View file @ 344d1dff
......@@ -13,7 +13,8 @@ import useTranslation from "next-translate/useTranslation";
import { TranslationFiles } from "@/src/data/core";
import websocket from "../src/features/web-socket";
import DataContext from "../src/context/trap-context";
import '../src/styles/tailwind.css'
import '../src/styles/tailwind.css';
import { useCookies } from "react-cookie";
const inter = Inter({ subsets: ["latin"] });
export default function App({ Component, pageProps }: AppProps) {
......@@ -28,11 +29,13 @@ export default function App({ Component, pageProps }: AppProps) {
new_val,
setNewVal
]);
React.useEffect(() => {
if (router.pathname === "/") {
router.push("/dashboard");
}
}, [router]);
const [cookies, setCookie, removeCookie] = useCookies([]);
// React.useEffect(() => {
// if (router.pathname === "/") {
// router.push("/dashboard");
// }
// }, [router]);
useEffect(() => {
if (typeof window !== "undefined") {
......@@ -40,14 +43,30 @@ export default function App({ Component, pageProps }: AppProps) {
if (loader) loader.remove();
}
}, []);
// useEffect(() => {
// if (!websocket) {
// return;
// }
// return () => {
// if (websocket) {
// websocket.close();
// }
// };
// }, []);
const removeCookieAfterOneHour = async () => {
removeCookie("role", { path: "/", sameSite: true });
removeCookie("token", { path: "/", sameSite: true });
window.location.href = "/sign-in";
};
useEffect(() => {
if (!websocket) {
return;
}
const timeout = setTimeout(() => {
removeCookieAfterOneHour();
}, 360000 //000
);
return () => {
if (websocket) {
websocket.close();
}
clearTimeout(timeout);
};
}, []);
return (
......@@ -68,8 +87,7 @@ export default function App({ Component, pageProps }: AppProps) {
}}
>
<DataContext.Provider value={contextValue}>
<AuthContextProvider>
{/*// @ts-ignore*/}
<AuthContextProvider >
<Component {...pageProps} />
</AuthContextProvider>
</DataContext.Provider>
......
packages/admin/pages/index.tsx
View file @ 344d1dff
......@@ -4,6 +4,7 @@ import { Fragment } from "react";
import Head from "next/head";
import { TranslationFiles } from "@/src/data/core";
import useTranslation from "next-translate/useTranslation";
import DashboardComponent from "@/src/features/dashboard";
export default function Home() {
const { t } = useTranslation(TranslationFiles.COMMON);
......@@ -14,7 +15,8 @@ export default function Home() {
</Head>
<AppLayout>
<main className={`app-main-container`}>
<div className={"page-header"}>{t("dashboard")}</div>
<div className={"page-header"}>{t("")}</div>
<DashboardComponent />
</main>
</AppLayout>
</Fragment>
......
packages/admin/pages/user/profile/index.tsx
View file @ 344d1dff
......@@ -4,7 +4,7 @@ import UserLayout from "../../../src/components/user-layout";
import { Fragment } from "react";
import useTranslation from "next-translate/useTranslation";
import { TranslationFiles } from "@/src/data/core";
import ProfileForm from "@/src/features/profile";
import UserProfileForm from "@/src/features/profile/user-profile";
export default function Profile() {
const { t } = useTranslation(TranslationFiles.COMMON);
return (
......@@ -13,7 +13,7 @@ export default function Profile() {
<title>{t("profile")}</title>
</Head>
<UserLayout >
<ProfileForm />
<UserProfileForm />
</UserLayout>
</Fragment>
);
......
packages/admin/src/components/dynamic-form/form-header/index.tsx
View file @ 344d1dff
......@@ -7,8 +7,9 @@ import { TranslationFiles } from "@/src/data/core";
type DynamicFormHeaderProps = {
className?: string;
title: string;
onSave: (values: any) => void;
};
const DynamicFormHeader = ({ className, title }: DynamicFormHeaderProps) => {
const DynamicFormHeader = ({ className, title,onSave }: DynamicFormHeaderProps) => {
const { t } = useTranslation(TranslationFiles.COMMON);
return (
<Row
......@@ -20,11 +21,14 @@ const DynamicFormHeader = ({ className, title }: DynamicFormHeaderProps) => {
</Col>
<Col>
<Row gutter={8}>
<Col>
{/* <Col>
<FmsButton borderRadius= {32} type={"secondary"}>{t("cancel")}</FmsButton>
</Col>
</Col> */}
<Col>
<FmsButton borderRadius= {32} type={"primary"}>
<FmsButton borderRadius= {32}
type={"primary"}
onClick={onSave}
>
{t("save")}
</FmsButton>
</Col>
......
packages/admin/src/components/dynamic-form/index.tsx
View file @ 344d1dff
......@@ -16,21 +16,23 @@ const DynamicForm = ({
}: DynamicFormDto) => {
return (
<Fragment>
<Formik
{/* <Formik
enableReinitialize
initialValues={initialValues}
onSubmit={onFinish}
validationSchema={schema}
>
> */}
{() => (
<Form>
<DynamicFormHeader
className={className?.formHeaderClassName}
title={title}
onSave={onFinish}
/>
<Row
<Row
className={`${styles.formContent} ${className?.formContentClassName}`}
>
{/*
{formCol?.map((col, index) => (
<Col span={col?.span} key={index}>
{col?.cards?.map((card, index) => (
......@@ -49,11 +51,11 @@ const DynamicForm = ({
</Card>
))}
</Col>
))}
</Row>
))}*/}
</Row>
</Form>
)}
</Formik>
{/* </Formik> */}
</Fragment>
);
};
......
packages/admin/src/components/user-layout/components/header/index.tsx
View file @ 344d1dff
......@@ -8,40 +8,40 @@ import DataContext from "../../../../context/trap-context";
const { Header } = Layout;
export default function AppHeader() {
const { data, setData, websocket, setNewVal } = useContext(DataContext);
useEffect(() => {
if (!websocket) {
return;
}
websocket.onmessage = function (event:any) {
const message = JSON.parse(event.data);
console.log(message);
if (message.new_val != null) {
const newData = message.new_val;
const transformedData = {
flag:'0',
id: newData.id,
timestamp: newData.timestamp,
agentAddress: newData.agentAddress,
severity: newData.severity,
specificTrap: newData.specificTrap,
genericTrap: newData.genericTrap,
variableBindings: newData.variableBindings,
};
setNewVal(transformedData);
setData((prevData: any) => [...prevData, newData]);
}
else{
setNewVal({id:message.old_val.id,flag:-1,});
}
};
// const { data, setData, websocket, setNewVal } = useContext(DataContext);
// useEffect(() => {
// if (!websocket) {
// return;
// }
// websocket.onmessage = function (event:any) {
// const message = JSON.parse(event.data);
// console.log(message);
// if (message.new_val != null) {
// const newData = message.new_val;
// const transformedData = {
// flag:'0',
// id: newData.id,
// timestamp: newData.timestamp,
// agentAddress: newData.agentAddress,
// severity: newData.severity,
// specificTrap: newData.specificTrap,
// genericTrap: newData.genericTrap,
// variableBindings: newData.variableBindings,
// };
// setNewVal(transformedData);
// setData((prevData: any) => [...prevData, newData]);
// }
// else{
// setNewVal({id:message.old_val.id,flag:-1,});
// }
// };
return () => {
// if (websocket) {
// websocket.close();
// }
};
}, []);
// return () => {
// // if (websocket) {
// // websocket.close();
// // }
// };
// }, []);
return (
......@@ -59,9 +59,9 @@ export default function AppHeader() {
<Col className={"app-language-switcher"}>
<AppLanguageSwitcher />
</Col>
<Col className={"app-notifications"}>
{/* <Col className={"app-notifications"}>
<AppNotifications data={data} setData={setData} />
</Col>
</Col> */}
<Col className={"app-user-info"}>
<UserInfo />
</Col>
......
packages/admin/src/context/auth-context/index.tsx
View file @ 344d1dff
import { AUTH_TOKEN } from "@/src/data/constant/app-constant";
// import { AUTH_TOKEN } from "@/src/data/constant/app-constant";
import router from "next/router";
import { createContext, useEffect, useState } from "react";
import { useCookies } from "react-cookie";
......@@ -7,24 +7,32 @@ export const AuthContext = createContext({});
const AuthContextProvider = (props: { children: React.ReactNode }) => {
const [authenticated, setAuthenticated] = useState<boolean>(false);
const [cookies, removeCookies] = useCookies([AUTH_TOKEN]);
const [cookies, removeCookie] = useCookies(["role", "token"]);
useEffect(() => {
if (cookies[AUTH_TOKEN]) {
if (cookies["token"]) {
setAuthenticated(true);
} else {
setAuthenticated(false);
router.push("/sign-in");
}
}, [cookies[AUTH_TOKEN]]);
}, [cookies]);
const logout = async () => {
removeCookies(AUTH_TOKEN, { path: "/", sameSite: true });
window.location.href = "/sign-in";
try {
removeCookie("role", "", { path: "/", expires: new Date(0) });
removeCookie("token", "", { path: "/", expires: new Date(0) });
// removeCookie("role","");
// removeCookie("token","");
window.location.href = "/sign-in";
} catch (error) {
console.error("Error while removing cookies:", error);
}
};
return (
<AuthContext.Provider
value={{
authenticated: authenticated,
logout: logout,
setAuthenticated: setAuthenticated,
}}
......
packages/admin/src/data/constant/app-constant.tsx
View file @ 344d1dff
export const AUTH_TOKEN: string = "app-auth-token";
// export const AUTH_TOKEN: string = "token";
export const Default_Language: string = "app-language";
export const TrapURL: string = "http://localhost:6647/api/rethink/data";
export const SettingURL: string = "http://localhost:6647/api/about";
export const ApiGatewayURL: string = `http://localhost:6644`;
export const TrapURL: string = `http://localhost:6644/api/rethink/data`;
export const SettingURL: string = `http://localhost:6644/api/about`;
export const AuthURL: string = "http://localhost:6644/auth/";
export const UserURL: string = `http://localhost:6644/users/`;
packages/admin/src/features/about/footer.tsx
View file @ 344d1dff
import { GithubOutlined, MailOutlined } from "@ant-design/icons";
import React, { useState } from "react";
export default function Footer() {
const [showEmail, setShowEmail] = useState(false);
const email = <span>{"example@example.com "}</span>;
// const [showEmail, setShowEmail] = useState(false);
// const email = <span>{"example@example.com "}</span>;
const handleButtonClick = () => {
setShowEmail(!showEmail);
};
return (
<>
<footer className="relative bg-blueGray-200 pt-8 pb-6">
......@@ -32,52 +29,14 @@ export default function Footer() {
<div className="container mx-auto px-4">
<div className="flex flex-wrap text-center lg:text-left">
<div className="w-full lg:w-6/12 px-4">
{/* <h4 className="text-3xl font-semibold">Let's keep in touch!</h4>
<h5 className="text-lg mt-0 mb-2 text-blueGray-600">
Find us on any of these platform.
</h5> */}
<div className="mt-6 lg:mb-0 mb-6">
{/* <button
className="bg-white text-lightBlue-400 shadow-lg font-normal h-10 w-10 items-center justify-center align-center rounded-full outline-none focus:outline-none mr-2"
type="button"
onClick={handleButtonClick}
>
<MailOutlined
style={{ fontSize: "19px", color: "#000f24" }}
className={"ExclamationCircleOutlined "}
/>
</button>
{showEmail && <>{email}</>}
<button
className="bg-white text-blueGray-800 shadow-lg font-normal h-10 w-10 items-center justify-center align-center rounded-full outline-none focus:outline-none mr-2"
type="button"
onClick={() =>
window.open("https://github.com/ReemyHasan", "_blank")
}
>
<GithubOutlined
style={{ fontSize: "19px", color: "#000f24" }}
className={"ExclamationCircleOutlined "}
/>
</button> */}
</div>
</div>
<div className="w-full lg:w-6/12 px-4">
<div className="flex flex-wrap items-top mb-6">
<div className="w-full lg:w-4/12 px-4 ml-auto">
{/* <span className="block uppercase text-blueGray-500 text-sm font-semibold mb-2">
Useful Links
</span>
<ul className="list-unstyled">
<li>
<a
className="text-blueGray-600 hover:text-blueGray-800 font-semibold block pb-2 text-sm"
href="#"
>
Contact Us
</a>
</li>
</ul> */}
</div>
</div>
</div>
......
packages/admin/src/features/about/index.tsx
View file @ 344d1dff
......@@ -11,8 +11,10 @@ import {
} from "@/src/services/setting-service";
import MainUtils from "@/src/utils/main";
import { useCookies } from "react-cookie";
export default function AboutContent() {
const { t } = useTranslation(TranslationFiles.COMMON);
const [cookies] = useCookies([]);
const router = useRouter();
const [formData, setFormData] = useState({
subject: "", //fullName
......@@ -26,12 +28,12 @@ export default function AboutContent() {
}, []);
async function getAboutInfo() {
const response = await fetchAboutSettingData();
const response = await fetchAboutSettingData(cookies["token"],cookies["role"]);
setData(response);
console.log(data);
}
async function sendMessage() {
const response = await sendEmailMessage(formData);
const response = await sendEmailMessage(formData,cookies["token"],cookies["role"]);
console.log(response);
if (response == true) {
setSendingStatus("success");
......@@ -45,6 +47,9 @@ export default function AboutContent() {
return item ? item.value : "";
}
};
if (data.length === 0) {
return <div>Loading...</div>;
}
return (
<>
<main>
......
packages/admin/src/features/add-user/add-user-data.tsx
View file @ 344d1dff
......@@ -8,18 +8,26 @@ export const formItems = (t: Function) => {
title: t("info"),
items: [
{
colSpan: 12,
colSpan: 8,
label: t("fname"),
type: FormItemTypes.Text,
name: "first-name",
name: "fname",
createMode: true,
updateMode: true,
},
{
colSpan: 12,
colSpan: 8,
label: t("lname"),
type: FormItemTypes.Text,
name: "last-name",
name: "lname",
createMode: true,
updateMode: true,
},
{
colSpan: 8,
label: t("username"),
type: FormItemTypes.Text,
name: "username",
createMode: true,
updateMode: true,
},
......@@ -32,7 +40,15 @@ export const formItems = (t: Function) => {
updateMode: true,
},
{
colSpan: 12,
colSpan: 24,
label: t("password"),
type: FormItemTypes.Text,
name: "password",
createMode: true,
updateMode: true,
},
{
colSpan: 6,
label: t("gender-label"),
type: FormItemTypes.Select,
name: "gender",
......@@ -50,33 +66,33 @@ export const formItems = (t: Function) => {
],
},
{
colSpan: 12,
colSpan: 6,
label: t("job-label"),
type: FormItemTypes.Select,
name: "Job",
name: "role",
createMode: true,
updateMode: true,
options: [
{
label: t("male"),
value: 0,
label: t("user"),
value: 'user',
},
{
label: t("female"),
value: 1,
label: t("admin"),
value: 'admin',
},
],
},
{
colSpan: 12,
colSpan: 6,
label: t("joining-date-label"),
type: FormItemTypes.DatePicker,
name: "ReceivedDate",
name: "workingDate",
createMode: true,
updateMode: true,
},
{
colSpan: 12,
colSpan: 6,
label: t("country-label"),
type: FormItemTypes.Select,
name: "country",
......@@ -93,14 +109,7 @@ export const formItems = (t: Function) => {
},
],
},
{
colSpan: 24,
label: t("description-label"),
type: FormItemTypes.TextArea,
name: "description",
createMode: true,
updateMode: true,
},
],
},
],
......
packages/admin/src/features/add-user/index.tsx
View file @ 344d1dff
import { DynamicFormTypes } from "@/src/components/dynamic-form/dtos/dynamic-form.dto";
import DynamicForm from "@/src/components/dynamic-form";
import { formItems } from "./add-user-data";
import React, { useState } from "react";
import { Row, Col, Card, Form, Input, Button, message, Select, DatePicker } from "antd"; // Make sure to import the correct antd components
import useTranslation from "next-translate/useTranslation";
import { TranslationFiles } from "@/src/data/core";
import { Register } from "@/src/services/user-service";
import { useCookies } from "react-cookie";
const { Option } = Select;
const SignUpForm = () => {
const { t } = useTranslation(TranslationFiles.COMMON);
const [cookies] = useCookies([]);
const [loading, setLoading] = useState(false);
const onFinish = async (values:any) => {
try {
console.log(values);
setLoading(true);
await Register(values, cookies["token"], cookies["role"]);
setLoading(false);
message.success("User registered successfully!");
} catch (error) {
setLoading(false);
console.error(error);
message.error("Error occurred while registering user.");
}
};
return (
<div data-testid="new-stock-form">
<DynamicForm
type={DynamicFormTypes.Create}
title={t("add-new-user")}
initialValues={{}}
onFinish={(values) => console.log({ values })}
formCol={formItems(t)}
/>
<Row gutter={16} justify="center">
<Col span={16}>
<Card title={t("add-new-user")}>
<Form
name="signUpForm"
layout="vertical"
onFinish={onFinish}
>
<Row gutter={16}>
<Col span={12}>
<Form.Item
label={t("fname")}
name="fname"
rules={[
{ required: true, message: "Please enter your first name." },
]}
>
<Input placeholder={t("fname")} />
</Form.Item>
</Col>
<Col span={12}>
<Form.Item
label={t("lname")}
name="lname"
rules={[
{ required: true, message: "Please enter your last name." },
]}
>
<Input placeholder={t("lname")} />
</Form.Item>
</Col>
</Row>
<Row gutter={16}>
<Col span={12}>
<Form.Item
label={t("email.label")}
name="email"
rules={[
{ required: true, message: "Please enter your email." },
{ type: 'email', message: 'Please enter a valid email address.' },
]}
>
<Input placeholder={t("email.label")} />
</Form.Item>
</Col>
<Col span={12}>
<Form.Item
label={t("username.label")}
name="username"
rules={[
{ required: true, message: "Please enter your username." },
]}
>
<Input placeholder={t("username")} />
</Form.Item>
</Col>
</Row>
<Form.Item
label={t("password")}
name="password"
rules={[
{ required: true, message: "Please enter your password." },
]}
>
<Input.Password placeholder={t("password")} />
</Form.Item>
<Row gutter={16}>
<Col span={12}>
<Form.Item
label={t("gender-label")}
name="gender"
rules={[
{ required: true, message: "Please select your gender." },
]}
>
<Select placeholder={t("gender")}>
<Option value="male">{t("male")}</Option>
<Option value="female">{t("female")}</Option>
</Select>
</Form.Item>
</Col>
<Col span={12}>
<Form.Item
label={t("role.label")}
name="role"
rules={[
{ required: true, message: "Please select a role." },
]}
>
<Select placeholder={t("role.label")}>
<Option value="user">{t("user")}</Option>
<Option value="admin">{t("admin")}</Option>
</Select>
</Form.Item>
</Col>
</Row>
<Row gutter={16}>
<Col span={12}>
<Form.Item
label={t("workingDate.label")}
name="workingDate"
rules={[
{ required: true, message: "Please select a working date." },
]}
>
<DatePicker placeholder={t("workingDate.label")} />
</Form.Item>
</Col>
<Col span={12}>
<Form.Item
label={t("country.label")}
name="country"
rules={[
{ required: true, message: "Please select a country." },
]}
>
<Select placeholder={t("country.label")}>
<Option value="syria">{t("syria")}</Option>
<Option value="others">{t("others")}</Option>
</Select>
</Form.Item>
</Col>
</Row>
<Form.Item>
<Button type="primary" htmlType="submit" loading={loading}>
{t("save")}
</Button>
</Form.Item>
</Form>
</Card>
</Col>
</Row>
</div>
);
};
export default SignUpForm;
packages/admin/src/features/dashboard/card-users.tsx
View file @ 344d1dff
import React from "react";
import FmsTable from "../../../../shared-library/src/tables/fms-table";
import { DataSource } from "../show-users/data-source";
// import { DataSource } from "../show-users/data-source";
import useTranslation from "next-translate/useTranslation";
import { TranslationFiles } from "@/src/data/core";
import FmsButton from "../../../../shared-library/src/buttons/fms-button";
......@@ -40,7 +40,7 @@ export default function CardUsers() {
{"See all".toUpperCase()}
</FmsButton>
</div>
<FmsTable
{/* <FmsTable
title={"users"}
columns={Columns}
data={DataSource}
......@@ -49,7 +49,7 @@ export default function CardUsers() {
// t={t}
// setData={setData}
// setColumns={setColumns}
/>
/> */}
</div>
</div>
</>
......
packages/admin/src/features/edit-user/add-user-data.tsx deleted 100644 → 0
View file @ fee3154a
import { FormItemTypes } from "@/src/components/dynamic-form/dtos/form-item.dto.ts";
export const formItems = (t: Function) => {
return [
{
span: 24,
cards: [
{
title: t("info"),
items: [
{
colSpan: 12,
label: t("fname"),
type: FormItemTypes.Text,
name: "first-name",
createMode: true,
updateMode: true,
},
{
colSpan: 12,
label: t("lname"),
type: FormItemTypes.Text,
name: "last-name",
createMode: true,
updateMode: true,
},
{
colSpan: 12,
label: t("email.label"),
type: FormItemTypes.Text,
name: "email",
createMode: true,
updateMode: true,
},
{
colSpan: 12,
label: t("gender-label"),
type: FormItemTypes.Select,
name: "gender",
createMode: true,
updateMode: true,
options: [
{
label: t("male"),
value: 0,
},
{
label: t("female"),
value: 1,
},
],
},
{
colSpan: 12,
label: t("job-label"),
type: FormItemTypes.Select,
name: "Job",
createMode: true,
updateMode: true,
options: [
{
label: t("male"),
value: 0,
},
{
label: t("female"),
value: 1,
},
],
},
{
colSpan: 12,
label: t("joining-date-label"),
type: FormItemTypes.DatePicker,
name: "ReceivedDate",
createMode: true,
updateMode: true,
},
],
},
],
},
];
};
packages/admin/src/features/login/index.tsx
View file @ 344d1dff
import React, { useEffect } from "react";
import { Button, Checkbox, Col, Form, Input, Row } from "antd";
import React, { useEffect , useState} from "react";
import { Button, Checkbox, Col, Form, Input, Row, message } from "antd";
import Image from "next/image";
import AuthWrapper from "./auth-wrapper";
import styles from "./auth-wrapper.module.css";
import { AUTH_TOKEN } from "@/src/data/constant/app-constant";
import { useCookies } from "react-cookie";
import useTranslation from "next-translate/useTranslation";
import { TranslationFiles } from "@/src/data/core";
import router from "next/router";
import {
login, getUserInfo
} from "@/src/services/user-service";
import MainUtils from "@/src/utils/main";
const Login = () => {
const { t } = useTranslation(TranslationFiles.COMMON);
const [cookies, setCookie, removeCookie] = useCookies([AUTH_TOKEN]);
const [cookies, setCookie, removeCookie] = useCookies([]);
async function UserInfo(data:any,token:any) {
const response = await getUserInfo(data,token);
return response;
}
async function onFinishSend (values: any){
const response = await login(values);
if(!MainUtils.isEmptyObject( response)){
const info = await UserInfo(values.username, response.data);
const onFinishSend = (values: any) => {
if(values.email=="admin@f.com"){
setCookie(AUTH_TOKEN, values.email, { maxAge: 60 });
setCookie("token", response.data);
setCookie("role", info.role);
setCookie("username", info.username);
if(info.role=="admin"){
router.push("/");
}
else if (info.role=="user"){
router.push("/user/landing");
}
message.success("successfully authenticated!!");
}
else if(values.email=="user@f.com"){
setCookie(AUTH_TOKEN, values.email, { maxAge: 60 });
router.push("/user/landing");
else{
message.error("credentials are not correct");
}
};
const removeCookieAfterOneHour = () => {
removeCookie(AUTH_TOKEN);
const removeCookieAfterOneHour = async () => {
removeCookie("role", { });
removeCookie("token", { });
window.location.href = "/sign-in";
};
// call the removeCookieAfterOneHour function after one hour (3600000 milliseconds)
useEffect(() => {
const timeout = setTimeout(() => {
removeCookieAfterOneHour();
}, 60000);
}, 360000 //000
);
return () => {
clearTimeout(timeout);
};
......@@ -55,21 +75,21 @@ const Login = () => {
<Row>
<Col span={24}>
<Form name="basic" layout="vertical" onFinish={onFinishSend}>
<Form.Item label={t("email.label")} className={styles.formInput}>
<Form.Item label={t("username.label")} className={styles.formInput}>
<Form.Item
name="email"
name="username"
rules={[
{
required: true,
message: t("email.required-message"),
},
{
type: "email",
type:"string",
},
]}
>
<Input
placeholder={t("email.placeholder")}
placeholder={t("username.placeholder")}
data-testid="email"
/>
</Form.Item>
......
packages/admin/src/features/profile/index.tsx
View file @ 344d1dff
import React, { useEffect , useState} from "react";
import useTranslation from "next-translate/useTranslation";
import { TranslationFiles } from "@/src/data/core";
import FmsButton from "../../../../shared-library/src/buttons/fms-button";
import { useRouter } from "next/router";
import { getUserInfo } from "@/src/services/user-service";
import { useCookies } from "react-cookie";
const ProfileForm = () => {
const { t } = useTranslation(TranslationFiles.COMMON);
const [cookies] = useCookies([]);
const [data, setData] = useState([]);
const router = useRouter();
useEffect(() => {
async function fetchUserInfo() {
try {
const response = await getUserInfo(cookies["username"], cookies["token"]);
setData(response);
console.log(response);
} catch (error) {
// Handle any errors that might occur during the API call
}
}
fetchUserInfo();
}, []);
if (data.length === 0) {
return <div>Loading...</div>;
}
return (
<>
<main className="profile-page">
......@@ -48,11 +69,11 @@ const ProfileForm = () => {
<div className="flex flex-wrap justify-center">
<div className="w-full lg:w-3/12 px-4 lg:order-2 flex justify-center">
<div className="relative">
<img
{/* <img
alt="..."
src="/images/Reem.jpg"
src="/images/login-image2.jpg"
className="shadow-xl rounded-full h-auto align-middle border-none absolute -m-16 -ml-20 lg:-ml-16 max-w-150-px"
/>
/> */}
</div>
</div>
<div className="w-full lg:w-4/12 px-4 lg:order-3 lg:text-right lg:self-center">
......@@ -80,8 +101,8 @@ const ProfileForm = () => {
</span>
</div>
<div className="mr-4 p-3 text-center">
<span className="text-xl font-bold block uppercase tracking-wide text-blueGray-600">
10
<span className="text-xl font-bold block tracking-wide text-blueGray-600">
{data.gender}
</span>
<span className="text-sm text-blueGray-400">
{t("gender")}
......@@ -89,7 +110,7 @@ const ProfileForm = () => {
</div>
<div className="lg:mr-4 p-3 text-center">
<span className="text-xl font-bold block uppercase tracking-wide text-blueGray-600">
89
{data.workingDate}
</span>
<span className="text-sm text-blueGray-400">
{t("start-working-date")}
......@@ -99,20 +120,23 @@ const ProfileForm = () => {
</div>
</div>
<div className="text-center mt-12">
<h3 className="text-4xl font-semibold leading-normal mb-2 text-blueGray-700 mb-2">
REEM HASAN
<h3 className="text-4xl font-semibold uppercase leading-normal mb-2 text-blueGray-700 mb-2">
{data.username}
</h3>
<div className="text-sm leading-normal mt-0 mb-2 text-blueGray-400 font-bold uppercase">
<i className="fas fa-map-marker-alt mr-2 text-lg text-blueGray-400"></i>{" "}
Syria-Damascus
{data.country}
</div>
<div className="text-sm leading-normal mt-0 mb-2 text-blueGray-400 font-bold uppercase">
<i className="fas fa-map-marker-alt mr-2 text-lg text-blueGray-400"></i>{" "}
{data.email}
</div>
</div>
<div className="mt-10 py-10 border-t border-blueGray-200 text-center">
<div className="flex flex-wrap justify-center">
<div className="w-full lg:w-9/12 px-4">
<p className="mb-4 text-lg leading-relaxed text-blueGray-700">
Site Admin
{`${data.fname} ${data.lname}`}
</p>
<div className="mb-2 text-lightBlue-500 mt-10">
<i className="fas fa-briefcase mr-2 text-lg text-blueGray-400"></i>
......@@ -120,7 +144,7 @@ const ProfileForm = () => {
</div>
<div className="mb-2 text-lightBlue-500">
<i className="fas fa-university mr-2 text-lg "></i>
Site Admin
{data.role}
</div>
</div>
</div>
......
packages/admin/src/features/profile/user-profile.tsx 0 → 100644
View file @ 344d1dff
import useTranslation from "next-translate/useTranslation";
import { TranslationFiles } from "@/src/data/core";
import FmsButton from "../../../../shared-library/src/buttons/fms-button";
import { useRouter } from "next/router";
const UserProfileForm = () => {
const { t } = useTranslation(TranslationFiles.COMMON);
const router = useRouter();
return (
<>
<main className="profile-page">
<section className="relative block h-500-px">
<div
className="absolute top-0 w-full h-full bg-center bg-cover"
style={{
backgroundImage:
"url('https://images.unsplash.com/photo-1499336315816-097655dcfbda?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2710&q=80')",
}}
>
<span
id="blackOverlay"
className="w-full h-full absolute opacity-50 bg-black"
></span>
</div>
<div
className="top-auto bottom-0 left-0 right-0 w-full absolute pointer-events-none overflow-hidden h-16"
style={{ transform: "translateZ(0)" }}
>
<svg
className="absolute bottom-0 overflow-hidden"
xmlns="http://www.w3.org/2000/svg"
preserveAspectRatio="none"
version="1.1"
viewBox="0 0 2560 100"
x="0"
y="0"
>
<polygon
className="text-blueGray-200 fill-current"
points="2560 0 2560 100 0 100"
></polygon>
</svg>
</div>
</section>
<section className="relative py-16 bg-blueGray-200">
<div className="container mx-auto px-4">
<div className="relative flex flex-col min-w-0 break-words bg-white w-full mb-6 shadow-xl rounded-lg -mt-64">
<div className="px-6">
<div className="flex flex-wrap justify-center">
<div className="w-full lg:w-3/12 px-4 lg:order-2 flex justify-center">
<div className="relative">
<img
alt="..."
src="/images/Reem.jpg"
className="shadow-xl rounded-full h-auto align-middle border-none absolute -m-16 -ml-20 lg:-ml-16 max-w-150-px"
/>
</div>
</div>
<div className="w-full lg:w-4/12 px-4 lg:order-3 lg:text-right lg:self-center">
{/* <div className="py-6 px-3 mt-32 sm:mt-0">
<FmsButton
className="bg-blueGray-700 active:bg-blueGray-600 uppercase text-white font-bold hover:shadow-md shadow text-xs px-4 py-2 rounded outline-none focus:outline-none sm:mr-2 mb-1 ease-linear transition-all duration-150"
type="primary"
borderRadius="32"
onClick={() => {
router.push("/setup/setting-profile-content");
}}
>
{t("edit")}
</FmsButton>
</div> */}
</div>
<div className="w-full lg:w-4/12 px-4 lg:order-1">
<div className="flex justify-center py-4 lg:pt-4 pt-8">
<div className="mr-4 p-3 text-center">
<span className="text-xl font-bold block uppercase tracking-wide text-blueGray-600">
</span>
<span className="text-sm text-blueGray-400">
</span>
</div>
<div className="mr-4 p-3 text-center">
<span className="text-xl font-bold block uppercase tracking-wide text-blueGray-600">
10
</span>
<span className="text-sm text-blueGray-400">
{t("gender")}
</span>
</div>
<div className="lg:mr-4 p-3 text-center">
<span className="text-xl font-bold block uppercase tracking-wide text-blueGray-600">
89
</span>
<span className="text-sm text-blueGray-400">
{t("start-working-date")}
</span>
</div>
</div>
</div>
</div>
<div className="text-center mt-12">
<h3 className="text-4xl font-semibold leading-normal mb-2 text-blueGray-700 mb-2">
REEM HASAN
</h3>
<div className="text-sm leading-normal mt-0 mb-2 text-blueGray-400 font-bold uppercase">
<i className="fas fa-map-marker-alt mr-2 text-lg text-blueGray-400"></i>{" "}
Syria-Damascus
</div>
</div>
<div className="mt-10 py-10 border-t border-blueGray-200 text-center">
<div className="flex flex-wrap justify-center">
<div className="w-full lg:w-9/12 px-4">
<p className="mb-4 text-lg leading-relaxed text-blueGray-700">
Site Admin
</p>
<div className="mb-2 text-lightBlue-500 mt-10">
<i className="fas fa-briefcase mr-2 text-lg text-blueGray-400"></i>
{t("role")}
</div>
<div className="mb-2 text-lightBlue-500">
<i className="fas fa-university mr-2 text-lg "></i>
Site Admin
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</main>
</>
);
};
export default UserProfileForm;
packages/admin/src/features/setting/index.tsx
View file @ 344d1dff
......@@ -11,7 +11,7 @@ const Setting = () => {
const router = useRouter();
return (
<>
<Divider orientation="left">{t("setting-pages")}</Divider>
<Divider orientation="left">{t("setting-about-page")}</Divider>
<Col span={24} className={"pd"}>
<FmsButton
......@@ -25,7 +25,7 @@ const Setting = () => {
{t("About-page-setting").toUpperCase()}
</FmsButton>
</Col>
<Divider orientation="left"></Divider>
<Divider orientation="left">{t("setting-profile-page")}</Divider>
<Col span={12}className={"pd"} >
<FmsButton
type="move"
......
packages/admin/src/features/setting/setting-about-content.tsx
View file @ 344d1dff
......@@ -10,6 +10,7 @@ import {
sendEmailMessage,
} from "@/src/services/setting-service";
import MainUtils from "../../utils/main";
import { useCookies } from "react-cookie";
export default function SettingAboutContent() {
const { t } = useTranslation(TranslationFiles.COMMON);
const router = useRouter();
......@@ -21,8 +22,9 @@ export default function SettingAboutContent() {
const [sendingStatus, setSendingStatus] = useState("");
const [data, setData] = useState([]);
const [cookies] = useCookies([]);
async function sendMessage() {
const response = await sendEmailMessage(formData);
const response = await sendEmailMessage(formData,cookies["token"],cookies["role"]);
console.log(response);
if (response == true) {
setSendingStatus("success");
......@@ -34,7 +36,7 @@ export default function SettingAboutContent() {
for (let i = 0; i < data.length; i++) {
console.log("data", data[i]);
if (!MainUtils.isEmptyValue( data[i].value)) {
const response = await UpdateAboutSettingData(data[i]);
const response = await UpdateAboutSettingData(data[i],cookies["token"],cookies["role"]);
console.log(response);
if (!MainUtils.isEmptyObject(response)) {
message.success(data[i].key+" Updated successfully");
......
packages/admin/src/features/setting/setting-profile.tsx
View file @ 344d1dff
import { useState } from "react";
import { useState, useEffect } from "react";
import useTranslation from "next-translate/useTranslation";
import { TranslationFiles } from "@/src/data/core";
import FmsButton from "../../../../shared-library/src/buttons/fms-button";
import { DatePicker, Input, Select } from "antd";
import { FileAddOutlined, UploadOutlined } from "@ant-design/icons";
import { DatePicker, Input, Select, message } from "antd";
import { getUserInfo, UpdateUserInfo } from "@/src/services/user-service";
import { useCookies } from "react-cookie";
import { useRouter } from "next/router";
const SettingProfileContent = () => {
const { t } = useTranslation(TranslationFiles.COMMON);
const [imageSrc, setImageSrc] = useState("/images/Reem.jpg");
const [data, setData] = useState([]);
const [cookies] = useCookies([]);
const router = useRouter();
useEffect(() => {
async function fetchUserInfo() {
try {
const response = await getUserInfo(cookies["username"], cookies["token"]);
setData(response);
console.log(response);
} catch (error) {
}
}
const handleImageUpload = (e) => {
const file = e.target.files[0];
const reader = new FileReader();
reader.onloadend = () => {
setImageSrc(reader.result);
};
reader.readAsDataURL(file);
fetchUserInfo();
}, []);
const handleUpdate = async () => {
try {
const response = await UpdateUserInfo(
data,
cookies["token"],
cookies["role"]
);
message.success("your profile information updated successfully.");
router.push("/profile");
} catch (error) {
message.error("Error updating profile information.");
}
};
if (data.length === 0) {
return <div>Loading...</div>;
}
return (
<>
<main className="profile-page">
......@@ -60,33 +86,6 @@ const SettingProfileContent = () => {
<div className="flex flex-wrap justify-center">
<div className="w-full lg:w-3/12 px-4 lg:order-2 flex justify-center">
<div className="relative">
<label htmlFor="image-upload" className="file-input-label">
<img
alt="..."
src={imageSrc}
className="shadow-xl rounded-full h-auto align-middle border-none absolute -m-16 -ml-20 lg:-ml-16 max-w-150-px"
/>
<div className="add-image-button pd-top">
<FmsButton
type={"secondary"}
className={"pd-top"}
size={"large"}
borderRadius={8}
onclick={
handleImageUpload
}
>
<input
type="file"
id="image-upload"
accept=".jpg,.jpeg,.png"
onChange={handleImageUpload}
// className="hidden"
/>
</FmsButton>
</div>
</label>
</div>
</div>
<div className="w-full lg:w-4/12 px-4 lg:order-3 lg:text-right lg:self-center">
......@@ -95,7 +94,7 @@ const SettingProfileContent = () => {
className="bg-blueGray-700 active:bg-blueGray-600 uppercase text-white font-bold hover:shadow-md shadow text-xs px-4 py-2 rounded outline-none focus:outline-none sm:mr-2 mb-1 ease-linear transition-all duration-150"
type="primary"
borderRadius="32"
onClick={handleUpdate}
>
{t("save")}
</FmsButton>
......@@ -112,24 +111,21 @@ const SettingProfileContent = () => {
</span>
</div>
<div className="pd-top mr-4 p-3 text-center">
<span className=" text-xl font-bold block uppercase tracking-wide text-blueGray-600">
<Select
placeholder={t("gender")}
// value={""}
onChange={(e: any) =>
{}
}
/>
<span className=" text-xl font-bold block tracking-wide text-blueGray-600">
<Select
value={data.gender}
onChange={(e) =>
setData({ ...data, gender: e })
}>
<Select.Option value="male">{t("male")}</Select.Option>
<Select.Option value="female">{t("female")}</Select.Option>
</Select>
</span>
</div>
<div className="pd-top lg:mr-4 p-3 text-center">
<span className="text-xl font-bold block uppercase tracking-wide text-blueGray-600">
<DatePicker
placeholder={t("start-working-date")}
// value={""}
onChange={(e: any) =>
{}}/>
{data.workingDate}
</span>
</div>
</div>
......@@ -139,47 +135,75 @@ const SettingProfileContent = () => {
<h3 className="text-4xl font-semibold leading-normal mb-2 text-blueGray-700 mb-2">
<Input
className={"med-size"}
placeholder={"name"}
// value={""}
onChange={(e: any) =>
{}
}/>
placeholder={"username"}
value={data.username}
onChange={(e) =>
setData({ ...data, username: e.target.value })
}
/>
</h3>
<div className="text-sm leading-normal mt-0 mb-2 text-blueGray-400 font-bold uppercase">
<i className="fas fa-map-marker-alt text-lg text-blueGray-400"></i>
<Input
className={"med-size"}
placeholder={"country"}
// value={""}
onChange={(e: any) =>
{}
}/>
className={"med-size"}
placeholder={"username"}
value={data.country}
onChange={(e) =>
setData({ ...data, country: e.target.value })
}
/>
</div>
<div className="text-sm leading-normal mt-0 mb-2 text-blueGray-400 font-bold uppercase">
<i className="fas fa-map-marker-alt text-lg text-blueGray-400"></i>
<Input
className={"med-size"}
placeholder={"email"}
value={data.email}
onChange={(e) =>
setData({ ...data, email: e.target.value })
}
/>
</div>
</div>
<div className="mt-10 py-10 border-t border-blueGray-200 text-center">
<div className="flex flex-wrap justify-center">
<div className="w-full lg:w-9/12 px-4">
<p className="mb-4 text-lg leading-relaxed text-blueGray-700">
<Input
placeholder={"role"}
// value={""}
onChange={(e: any) =>
{}
}/>
className={"med-size"}
placeholder={"fname"}
value={data.fname}
onChange={(e) =>
setData({ ...data, fname: e.target.value })
}
/>
<span />
<Input
className={"med-size"}
placeholder={"lname"}
value={data.lname}
onChange={(e) =>
setData({ ...data, lname: e.target.value })
}
/>
</p>
<div className="mb-2 text-lightBlue-500 mt-10">
<i className="fas fa-briefcase mr-2 text-lg text-blueGray-400"></i>
{t("description")}
{t("role")}
</div>
<div className="mb-2 text-lightBlue-500">
<i className="fas fa-university mr-2 text-lg "></i>
<Input.TextArea
placeholder={"description"}
// value={""}
onChange={(e: any) =>
{}
}/>
<Select
value={data.role}
onChange={(e) =>
setData({ ...data, role: e.target.value })
}>
<Select.Option value="user">{t("user")}</Select.Option>
<Select.Option value="admin">{t("admin")}</Select.Option>
</Select>
</div>
</div>
</div>
......
packages/admin/src/features/show-traps/index.tsx
View file @ 344d1dff
......@@ -10,7 +10,7 @@ import ShowDetailsPopup from "./show-details-popup";
import axios from "axios";
import { Spin } from "antd";
import { fetchData } from "@/src/services/traps-service";
import { useCookies } from "react-cookie";
export default function ShowTraps() {
const { t } = useTranslation(TranslationFiles.COMMON);
const [modalProps, setModalProps] = useState({
......@@ -20,9 +20,10 @@ export default function ShowTraps() {
const { data, new_val, setNewVal } = useContext(DataContext);
const [data1, setData1] = useState([]);
const [loading, setLoading] = useState(false);
const [cookies] = useCookies([]);
useEffect(() => {
setLoading(true);
fetchData().then((transformedData) => {
fetchData(cookies["token"]).then((transformedData) => {
if(transformedData)
setData1(transformedData);
if(new_val!=null){
......
packages/admin/src/features/show-users/columns.tsx
View file @ 344d1dff
import { useRouter } from "next/router";
import {Col, DatePicker, Input, Row } from "antd";
import FmsButton from "../../../../shared-library/src/buttons/fms-button";
export function getColumns(setModalProps:any) {
const { RangePicker } = DatePicker;
return [
{
title: "Name",
dataIndex: "name",
key: "name",
title: "first-name",
dataIndex: "fname",
key: "fname",
resizable: true,
sorter: (a:any, b:any) => a.fname.localeCompare(b.fname),
sortDirections: ['descend', 'ascend'],
filterDropdown: ({ setSelectedKeys, selectedKeys, confirm }:any) => (
<div style={{ padding: 8 }}>
<Input
placeholder="Search"
value={selectedKeys[0]}
onChange={(e:any) => setSelectedKeys(e.target.value ? [e.target.value] : [])}
onPressEnter={confirm}
style={{ width: 188, marginBottom: 8, display: 'block' }}
/>
<Row gutter={12}>
<Col>
<FmsButton
type="primary"
onClick={confirm}
size="small"
borderRadius={10}
>
{"Search"}
</FmsButton>
</Col>
</Row>
</div>
),
onFilter: (value:any, record:any) => record.fname.toLowerCase().includes(value.toLowerCase()),
},
{
title: "last-name",
dataIndex: "lname",
key: "lname",
resizable: true,
sorter: (a:any, b:any) => a.lname.localeCompare(b.lname),
sortDirections: ['descend', 'ascend'],
filterDropdown: ({ setSelectedKeys, selectedKeys, confirm }:any) => (
<div style={{ padding: 8 }}>
<Input
placeholder="Search"
value={selectedKeys[0]}
onChange={(e:any) => setSelectedKeys(e.target.value ? [e.target.value] : [])}
onPressEnter={confirm}
style={{ width: 188, marginBottom: 8, display: 'block' }}
/>
<Row gutter={12}>
<Col>
<FmsButton
type="primary"
onClick={confirm}
size="small"
borderRadius={10}
>
{"Search"}
</FmsButton>
</Col>
</Row>
</div>
),
onFilter: (value:any, record:any) => record.lname.toLowerCase().includes(value.toLowerCase()),
},
{
title: "username",
dataIndex: "username",
key: "username",
resizable: true,
sorter: (a:any, b:any) => a.username.localeCompare(b.username),
sortDirections: ['descend', 'ascend'],
filterDropdown: ({ setSelectedKeys, selectedKeys, confirm }:any) => (
<div style={{ padding: 8 }}>
<Input
placeholder="Search"
value={selectedKeys[0]}
onChange={(e:any) => setSelectedKeys(e.target.value ? [e.target.value] : [])}
onPressEnter={confirm}
style={{ width: 188, marginBottom: 8, display: 'block' }}
/>
<Row gutter={12}>
<Col>
<FmsButton
type="primary"
onClick={confirm}
size="small"
borderRadius={10}
>
{"Search"}
</FmsButton>
</Col>
</Row>
</div>
),
onFilter: (value:any, record:any) => record.username.toLowerCase().includes(value.toLowerCase()),
},
{
title: "email",
dataIndex: "email",
key: "email",
resizable: true,
sorter: (a:any, b:any) => a.email.localeCompare(b.email),
sortDirections: ['descend', 'ascend'],
filterDropdown: ({ setSelectedKeys, selectedKeys, confirm }:any) => (
<div style={{ padding: 8 }}>
<Input
placeholder="Search"
value={selectedKeys[0]}
onChange={(e:any) => setSelectedKeys(e.target.value ? [e.target.value] : [])}
onPressEnter={confirm}
style={{ width: 188, marginBottom: 8, display: 'block' }}
/>
<Row gutter={12}>
<Col>
<FmsButton
type="primary"
onClick={confirm}
size="small"
borderRadius={10}
>
{"Search"}
</FmsButton>
</Col>
</Row>
</div>
),
onFilter: (value:any, record:any) => record.email.toLowerCase().includes(value.toLowerCase()),
},
{
title: "Age",
dataIndex: "age",
key: "age",
title: "gender",
dataIndex: "gender",
key: "gender",
resizable: true,
sorter: (a:any, b:any) => a.gender.localeCompare(b.gender),
sortDirections: ['descend', 'ascend'],
filterDropdown: ({ setSelectedKeys, selectedKeys, confirm }:any) => (
<div style={{ padding: 8 }}>
<Input
placeholder="Search"
value={selectedKeys[0]}
onChange={(e:any) => setSelectedKeys(e.target.value ? [e.target.value] : [])}
onPressEnter={confirm}
style={{ width: 188, marginBottom: 8, display: 'block' }}
/>
<Row gutter={12}>
<Col>
<FmsButton
type="primary"
onClick={confirm}
size="small"
borderRadius={10}
>
{"Search"}
</FmsButton>
</Col>
</Row>
</div>
),
onFilter: (value:any, record:any) => record.gender.toLowerCase().includes(value.toLowerCase()),
},
{
title: "role",
dataIndex: "role",
key: "role",
resizable: true,
sorter: (a:any, b:any) => a.role.localeCompare(b.role),
sortDirections: ['descend', 'ascend'],
filterDropdown: ({ setSelectedKeys, selectedKeys, confirm }:any) => (
<div style={{ padding: 8 }}>
<Input
placeholder="Search"
value={selectedKeys[0]}
onChange={(e:any) => setSelectedKeys(e.target.value ? [e.target.value] : [])}
onPressEnter={confirm}
style={{ width: 188, marginBottom: 8, display: 'block' }}
/>
<Row gutter={12}>
<Col>
<FmsButton
type="primary"
onClick={confirm}
size="small"
borderRadius={10}
>
{"Search"}
</FmsButton>
</Col>
</Row>
</div>
),
onFilter: (value:any, record:any) => record.role.toLowerCase().includes(value.toLowerCase()),
},
{
title: "Address",
dataIndex: "address",
key: "address",
title: "workingDate",
dataIndex: "workingDate",
key: "workingDate",
sorter: (a: any, b: any) => a.workingDate.localeCompare(b.workingDate),
sortDirections: ['descend', 'ascend'],
filterDropdown: ({ setSelectedKeys, selectedKeys, confirm, clearFilters }: any) => (
<div style={{ padding: 8 }}>
<RangePicker
value={selectedKeys[0]}
onChange={(value: any) => setSelectedKeys(value ? [value] : [])}
onOk={confirm}
style={{ marginBottom: "8px", display: 'block' }}
/>
<Row gutter={12}>
<Col>
<FmsButton
type="primary"
onClick={confirm}
size="small"
borderRadius={10}
style={{ marginRight: 8 }}
>
{"Search"}
</FmsButton>
</Col>
</Row>
</div>
),
onFilter: (value: any, record: any) => {
const [start, end] = value;
const date = new Date(record.workingDate); // Convert to a Date object
return (
(!start || date >= start.startOf('day')) &&
(!end || date <= end.endOf('day'))
);
},
},
{
title: "country",
dataIndex: "country",
key: "country",
resizable: true,
sorter: (a:any, b:any) => a.country.localeCompare(b.country),
sortDirections: ['descend', 'ascend'],
filterDropdown: ({ setSelectedKeys, selectedKeys, confirm }:any) => (
<div style={{ padding: 8 }}>
<Input
placeholder="Search"
value={selectedKeys[0]}
onChange={(e:any) => setSelectedKeys(e.target.value ? [e.target.value] : [])}
onPressEnter={confirm}
style={{ width: 188, marginBottom: 8, display: 'block' }}
/>
<Row gutter={12}>
<Col>
<FmsButton
type="primary"
onClick={confirm}
size="small"
borderRadius={10}
>
{"Search"}
</FmsButton>
</Col>
</Row>
</div>
),
onFilter: (value:any, record:any) => record.country.toLowerCase().includes(value.toLowerCase()),
},
{
title: "Actions",
......@@ -23,7 +272,9 @@ export function getColumns(setModalProps:any) {
render: (text: any, record: any) => (
<FmsButton
type="primary"
onClick={() => setModalProps({ isOpen: true, data: null})}
size="middle"
borderRadius={32}
onClick={() => setModalProps({ isOpen: true, data: record })}
>
{"edit"}
</FmsButton>
......
packages/admin/src/features/show-users/data-source.tsx deleted 100644 → 0
View file @ fee3154a
type RoutesType = {
id: string;
name: string;
age: number;
address: string;
};
export const DataSource: Array<RoutesType> = [
{
id: "1",
name: "John Brown",
age: 1,
address: "New York No. 1 Lake Park",
},
{
id: "2",
name: "Jim Green",
age: 2,
address: "London No. 1 Lake Park",
},
{
id: "3",
name: "Joe Black",
age: 3,
address: "Sidney No. 1 Lake Park",
},
{
id: "4",
name: "Joe Black",
age: 4,
address: "Sidney No. 1 Lake Park",
},
{
id: "5",
name: "Joe Black",
age: 5,
address: "Sidney No. 1 Lake Park",
},
{
id: "6",
name: "Joe Black",
age: 6,
address: "Sidney No. 1 Lake Park",
},
{
id: "7",
name: "Joe Black",
age: 7,
address: "Sidney No. 1 Lake Park",
},
{
id: "8",
name: "Joe Black",
age: 8,
address: "Sidney No. 1 Lake Park",
},
{
id: "9",
name: "Joe Black",
age: 9,
address: "Sidney No. 1 Lake Park",
},
{
id: "10",
name: "Joe Black",
age: 10,
address: "Sidney No. 1 Lake Park",
},
{
id: "11",
name: "Joe Black",
age: 11,
address: "Sidney No. 1 Lake Park",
},
{
id: "12",
name: "Joe Black",
age: 12,
address: "Sidney No. 1 Lake Park",
},
{
id: "13",
name: "Joe Black",
age: 13,
address: "Sidney No. 1 Lake Park",
},
];
packages/admin/src/features/show-users/edit-user-popup.tsx
View file @ 344d1dff
import React, {useState, useEffect} from "react";
import { Col, DatePicker, Input, Modal, Row, Select } from "antd";
import React, { useState, useEffect } from "react";
import {
Button,
Card,
Col,
DatePicker,
Form,
Input,
Modal,
Row,
Select,
message,
} from "antd";
import useTranslation from "next-translate/useTranslation";
import { TranslationFiles } from "@/src/data/core";
import { UpdateUserInfo } from "@/src/services/user-service";
import { useCookies } from "react-cookie";
import MainUtils from "@/src/utils/main";
interface Props {
modalProps: any;
modalProps: any;
setModalProps: any;
}
export default function EditUserPopup({ modalProps, setModalProps }: Props) {
const { t } = useTranslation(TranslationFiles.COMMON);
const [isModalOpen,setIsModalOpen] = useState(false);
const [isModalOpen, setIsModalOpen] = useState(false);
const [userData, setUserData] = useState<any>(null);
const [cookies] = useCookies([]);
const handleCancel = () => {
setModalProps(false,null);
setModalProps(false, null);
};
useEffect(() => {
console.log(MainUtils.cloneObject( modalProps.data));
setIsModalOpen(modalProps.isOpen);
}, [modalProps])
setUserData(modalProps.data);
return (
<Modal title="edit-user" visible={isModalOpen} onOk={handleCancel} onCancel={handleCancel}>
<Row gutter={[12, 12]}>
<Col span={24}>
<Input />
</Col>
<Col span={24}>
<Input />
</Col>
<Col span={24}>
<Select />
</Col>
<Col span={24}>
<Select />
</Col>
<Col span={24}>
<Select />
</Col>
<Col span={24}>
<DatePicker />
</Col>
<Col span={24}>
<Input.TextArea />
</Col>
</Row>
}, [modalProps]);
const handleUpdate = async () => {
try {
const response = await UpdateUserInfo(
userData,
cookies["token"],
cookies["role"]
);
</Modal>
message.success("User information updated successfully.");
setModalProps(false, null);
} catch (error) {
message.error("Error updating user information.");
}
};
return (
<Modal
title="edit-user"
visible={isModalOpen}
onOk={handleUpdate}
onCancel={handleCancel}
>
<Row gutter={16} justify="center">
<Col span={16}>
<Form initialValues={userData} onFinish={handleUpdate}>
<Form.Item label="first-name" name="fname">
<Input
onChange={(e) =>
setUserData({ ...userData, fname: e.target.value })
}
/>
</Form.Item>
<Form.Item label="last-name" name="lname">
<Input
onChange={(e) =>
setUserData({ ...userData, lname: e.target.value })
}
/>
</Form.Item>
<Form.Item label="username"
name="username"
>
<Input
onChange={(e) =>
setUserData({ ...userData, username: e.target.value })
}
/>
</Form.Item>
<Form.Item label="email"
name="email"
rules={[
{ type: 'email' },
]}
>
<Input
onChange={(e) =>
setUserData({ ...userData, email: e.target.value })
}
/>
</Form.Item>
<Form.Item
label={t("password")}
name="password"
>
<Input.Password
onChange={(e) =>
setUserData({ ...userData, password: e.target.value })
} />
</Form.Item>
<Form.Item label={t("gender-label")} name="gender" >
<Select onChange={(e) =>
setUserData({ ...userData, gender: e })
}>
<Select.Option value="male">{t("male")}</Select.Option>
<Select.Option value="female">{t("female")}</Select.Option>
</Select>
</Form.Item>
<Form.Item label={t("role.label")} name="role">
<Select
onChange={(e) =>
setUserData({ ...userData, role: e })
}>
<Select.Option value="user">{t("user")}</Select.Option>
<Select.Option value="admin">{t("admin")}</Select.Option>
</Select>
</Form.Item>
{/* <Form.Item label={t("workingDate.label")} name="workingDate" >
<DatePicker />
</Form.Item> */}
<Form.Item label={t("country.label")} name="country" >
<Select onChange={(e) =>
setUserData({ ...userData, country: e })
}>
<Select.Option value="syria">{t("syria")}</Select.Option>
<Select.Option value="others">{t("others")}</Select.Option>
</Select>
</Form.Item>
</Form>
</Col>
</Row>
</Modal>
);
}
\ No newline at end of file
packages/admin/src/features/show-users/index.tsx
View file @ 344d1dff
import * as React from "react";
import { useState } from "react";
import { useState ,useEffect } from "react";
import useTranslation from "next-translate/useTranslation";
import { TranslationFiles } from "@/src/data/core";
import FmsTable from "../../../../shared-library/src/tables/fms-table";
import { getColumns } from "./columns";
import { DataSource } from "./data-source";
import EditUserPopup from "./edit-user-popup"
import EditUserPopup from "./edit-user-popup";
import { getAllUsers, deleteUser } from "@/src/services/user-service";
import { useCookies } from "react-cookie";
import { message } from "antd";
import FmsButton from "../../../../shared-library/src/buttons/fms-button";
export default function ShowUsers() {
const { t } = useTranslation(TranslationFiles.COMMON);
const [modalProps, setModalProps] = useState({
isOpen: false,
data: null,
});
const [data, setData] = useState(DataSource);
const [data, setData] = useState([]);
const [selectedRowKeys, setSelectedRowKeys] = useState<string[]>([]);
const [cookies] = useCookies([]);
// Fetch data when the component mounts using useEffect
useEffect(() => {
const fetchData = async () => {
try {
const response = await getAllUsers(cookies["token"], cookies["role"]);
setData(response);
console.log(response);
} catch (error) {
console.error("Error fetching data:", error);
}
};
fetchData();
}, []);
const handleDeleteMultiple = async () => {
if (selectedRowKeys.length === 0) {
message.warning("Please select at least one row to delete.");
return;
}
try {
// Delete selected rows on the server
await Promise.all(selectedRowKeys.map((id:any) => deleteUser(id, cookies["token"], cookies["role"])));
// After successful deletion, update the table data by filtering out the deleted records
setData((prevData) =>
prevData.filter((item) => !selectedRowKeys.includes(item.id))
);
// Clear the selectedRowKeys state after deletion
setSelectedRowKeys([]);
message.success("Selected rows deleted successfully.");
} catch (error) {
console.error("Error deleting users:", error);
message.error("An error occurred while deleting selected rows.");
}
};
return (
<div>
<div className={"moreIcon"} >
<FmsButton borderRadius= {32} type={"danger"} onClick={handleDeleteMultiple} >{t("delete-selected")}</FmsButton>
</div>
<FmsTable
title={t("users")}
columns={getColumns(setModalProps)}
data={data}
rowSelection={{
type: "checkbox",
selectedRowKeys,
onChange: (selectedKeys) => {
setSelectedRowKeys(selectedKeys);
},
}}
t={t}
setData= {setData}
......
packages/admin/src/features/web-socket/index.tsx
View file @ 344d1dff
let websocket: WebSocket | null = new WebSocket("ws://192.168.93.198:6647/fms-websocket");
let websocket: WebSocket | null = new WebSocket("ws://localhost:6647/fms-websocket");
websocket.onopen = function () {
console.log("Connected to WebSocket server");
......
packages/admin/src/services/setting-service.tsx
View file @ 344d1dff
import axios from "axios";
import {SettingURL} from "../data/constant/app-constant";
export const fetchAboutSettingData = async () => {
export const fetchAboutSettingData = async (token:any,role:any) => {
try {
const response = await axios.get(SettingURL+"/data");
const response = await axios.get(SettingURL+"/data",{
headers: {
Authorization: `Bearer ${token}`,
},
});
if (response.data) {
const data = response.data.map((item:any) => ({
id: item.id,
......@@ -18,38 +23,60 @@ export const fetchAboutSettingData = async () => {
}
};
export const putAboutSettingData = async (data:any) => {
export const putAboutSettingData = async (data:any,token:any,role:any) => {
if(role=="admin"){
try {
const response = await axios.post(SettingURL+"/post",data);
const response = await axios.post(SettingURL+"/post",data,{
headers: {
Authorization: `Bearer ${token}`,
},
});
console.log(response.data);
} catch (error) {
console.error(error);
}
}
};
export const deleteByKeyAboutSettingData = async (key:any) => {
export const deleteByKeyAboutSettingData = async (key:any,token:any,role:any) => {
if(role=="admin"){
try {
const response = await axios.delete(SettingURL+`/delete/${key}`);
const response = await axios.delete(SettingURL+`/delete/${key}`,{
headers: {
Authorization: `Bearer ${token}`,
},
});
console.log(response.data);
} catch (error) {
console.error(error);
}
}
};
export const UpdateAboutSettingData = async (data:any) => {
export const UpdateAboutSettingData = async (data:any,token:any,role:any) => {
if(role=="admin"){
try {
const response = await axios.put(SettingURL+`/update`, data);
const response = await axios.put(SettingURL+`/update`, data,{
headers: {
Authorization: `Bearer ${token}`,
},
});
console.log(response);
return response;
} catch (error) {
console.error(error);
return error;
}
}
};
export const sendEmailMessage = async (data:any) => {
export const sendEmailMessage = async (data:any,token:any,role:any) => {
try {
const response = await axios.post(SettingURL+`/send-message`, data);
const response = await axios.post(SettingURL+`/send-message`, data,{
headers: {
Authorization: `Bearer ${token}`,
},
});
return response.data;
} catch (error) {
return error;
......
packages/admin/src/services/traps-service.tsx
View file @ 344d1dff
import axios from "axios";
import {TrapURL} from "../data/constant/app-constant";
export const fetchData = async () => {
export const fetchData = async (token:any) => {
try {
const response = await axios.get(TrapURL);
const response = await axios.get(TrapURL,{
headers: {
Authorization: `Bearer ${token}`,
},
});
if (response.data) {
const transformedData = response.data.map((item:any) => ({
id: item.id,
......
packages/admin/src/services/user-service.tsx 0 → 100644
View file @ 344d1dff
import axios from "axios";
import { UserURL,AuthURL } from "../data/constant/app-constant";
import { message } from "antd";
import MainUtils from "../utils/main";
export const login = async (data: any) => {
try {
const values = MainUtils.cloneObject(data);
// console.log(values);
const response = await axios.post(AuthURL+"token", values);
// console.log(response);
return response;
} catch (error) {
console.log(error);
}
};
export const Register = async (data:any,token:any,role:any) => {
if(role=="admin"){
try {
const response = await axios.post(AuthURL+"register",data
,{
headers: {
Authorization: `Bearer ${token}`,
},
}
);
console.log(response.data);
} catch (error) {
console.error(error);
}
}
};
export const getUserInfo = async (data: any, token:any) => {
try {
const response = await axios.get(UserURL + `get/${data}`,{
headers: {
Authorization: `Bearer ${token}`,
},
});
return response.data;
} catch (error) {
message.error("Error: " + error);
}
};
export const getAllUsers = async (token:any, role:any) => {
if(role=="admin"){
try {
// console.log("data: "+data);
// console.log("token: "+ token);
const response = await axios.get(UserURL + `getAllUsers`,{
headers: {
Authorization: `Bearer ${token}`,
},
});
// console.log(response.data);
return response.data;
} catch (error) {
message.error("Error: " + error);
}
}
};
export const deleteUser = async (id: any, token:any,role:any) => {
if(role=="admin"){
try {
// console.log("data: "+data);
// console.log("token: "+ token);
const response = await axios.delete(UserURL + `delete/${id}`,{
headers: {
Authorization: `Bearer ${token}`,
},
});
// console.log(response.data);
return response.data;
} catch (error) {
message.error("Error: " + error);
}
}
};
export const UpdateUserInfo = async (data:any, token:any, role:any) => {
if(role=="admin"){
try {
// console.log("data: "+data);
// console.log("token: "+ token);
const response = await axios.put(UserURL + `/updateUser`, data, {
headers: {
Authorization: `Bearer ${token}`,
},
});
console.log(response.data);
return response.data;
} catch (error) {
message.error("Error: " + error);
}
}
};
packages/admin/src/styles/global.less
View file @ 344d1dff
......@@ -192,4 +192,12 @@ a {
.file-input-label input[type="file"] {
// margin: 20px;
cursor: pointer;
}
.moreIcon {
float: right;
cursor: pointer;
border-radius: 7px;
font-size: 20px;
/* background-color: rgba(0, 0, 0, .1); */
color: var(--primary-gray-400);
}
\ No newline at end of file
packages/shared-library/src/tables/fms-table.tsx
View file @ 344d1dff
......@@ -4,6 +4,7 @@ import {
Tag,
} from "antd";
import classes from "./styles.module.css";
import FmsButton from "../buttons/fms-button";
interface fmsTableProps {
title: string;
columns: Array<any>;
......@@ -13,7 +14,7 @@ interface fmsTableProps {
setColumns: Function;
rowSelection:any;
pageSizeOptions:Array<string>;
defaultPageSize:any
defaultPageSize:any;
}
const FmsTable: FunctionComponent<fmsTableProps> = ({
title,
......@@ -24,7 +25,7 @@ const FmsTable: FunctionComponent<fmsTableProps> = ({
setColumns,
rowSelection,
pageSizeOptions,
defaultPageSize
defaultPageSize,
}) => {
return (
......@@ -35,8 +36,9 @@ const FmsTable: FunctionComponent<fmsTableProps> = ({
data-testid="fms-table-total-count"
className={classes.totalCountTag}
>
{`${data.length} row`}
{data && `${data.length} row`}
</Tag>
</div>
<Table
className="fms-table"
......
packages/shared-library/src/tables/styles.module.css
View file @ 344d1dff
......@@ -64,7 +64,7 @@
cursor: pointer;
border-radius: 7px;
font-size: 20px;
background-color: rgba(0, 0, 0, .1);
/* background-color: rgba(0, 0, 0, .1); */
color: var(--primary-gray-400);
}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment

HIAST - GitLab