Working on the Master Module
This commit is contained in:
AnsariTufail
100
src/Pages/MasterModule/TemplateMaster/EditTemplateModel.tsx
Normal file
100
src/Pages/MasterModule/TemplateMaster/EditTemplateModel.tsx
Normal file
@@ -0,0 +1,100 @@
|
||||
import { DialogBody, DialogCloseTrigger, DialogContent, DialogFooter, DialogHeader, DialogRoot, DialogTitle, DialogTrigger } from "../../../components/ui/dialog"
|
||||
import { Box, Field, IconButton, Input, Stack, Text, Textarea } from "@chakra-ui/react"
|
||||
import { Button } from "../../../components/ui/button"
|
||||
import { FiUpload } from "react-icons/fi";
|
||||
import { useState } from "react";
|
||||
import { FaRegEdit } from "react-icons/fa";
|
||||
|
||||
|
||||
function EditTemplateModel() {
|
||||
|
||||
const [images, setImages] = useState<string[]>([]);
|
||||
|
||||
const handleImageChange = (event: React.ChangeEvent<HTMLInputElement>) => {
|
||||
if (event.target.files) {
|
||||
const selectedFiles = Array.from(event.target.files);
|
||||
|
||||
const newImages = selectedFiles.map((file) => {
|
||||
return URL.createObjectURL(file); // Convert to preview URL
|
||||
});
|
||||
|
||||
setImages((prevImages) => [...prevImages, ...newImages]); // Append new images
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
return (
|
||||
|
||||
<DialogRoot placement="center">
|
||||
<DialogTrigger asChild>
|
||||
{/* <Button bg={"transparent"} size="sm">
|
||||
<MdOutlineRemoveRedEye style={{ cursor: "pointer", fontSize: "16px" }} />
|
||||
</Button> */}
|
||||
<Button bg={"transparent"} size="sm">
|
||||
<FaRegEdit style={{ cursor: "pointer", fontSize: "14px" }} color="#000"/>
|
||||
</Button>
|
||||
|
||||
</DialogTrigger>
|
||||
|
||||
<DialogContent
|
||||
bg={"#fff"}
|
||||
// w={{ lg: "60%", md: "230px" }}
|
||||
w={{ base: '90%', md: '400px' }}
|
||||
height={'auto'}
|
||||
|
||||
overflowX="hidden"
|
||||
p={3} // Reduced padding
|
||||
bgSize={'md'}
|
||||
>
|
||||
<DialogHeader bg="white" >
|
||||
<DialogTitle alignSelf="center" color="black" fontSize="14px">Add</DialogTitle>
|
||||
</DialogHeader>
|
||||
|
||||
<DialogBody bg="white">
|
||||
<Stack py={3}>
|
||||
|
||||
<Field.Root>
|
||||
<Field.Label color="black" pt={1} fontSize="12px">Template Name</Field.Label>
|
||||
<Input placeholder="" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" />
|
||||
|
||||
|
||||
<Field.Label color="black" pt={1} fontSize="12px">Images</Field.Label>
|
||||
<Box display="flex" alignItems="center" justifyContent="space-between" px={3} bgColor="#EEEEEE" border="none" width="100%" height="50px" cursor="pointer" position="relative">
|
||||
<Input type="file" accept="image/*" opacity={0} position="absolute" bgColor="#EEEEEE" border="none" pl={1} width="100%" height="100%" cursor="pointer" onChange={handleImageChange}/>
|
||||
<Box display="flex" gap={2} overflow="hidden">
|
||||
{images.length > 0 ? (
|
||||
images.map((img, index) => (
|
||||
<img
|
||||
key={index}
|
||||
src={img}
|
||||
alt={`Uploaded ${index}`}
|
||||
style={{ maxHeight: "40px", maxWidth: "70px", objectFit: "contain" }}
|
||||
/>
|
||||
))
|
||||
) : (
|
||||
<Box width="70px" height="40px" /> // Placeholder to maintain layout
|
||||
)}
|
||||
</Box>
|
||||
<FiUpload color="#000" />
|
||||
</Box>
|
||||
|
||||
{/* <Input placeholder="" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" /> */}
|
||||
|
||||
</Field.Root>
|
||||
</Stack>
|
||||
|
||||
</DialogBody>
|
||||
<DialogFooter display="flex" justifyContent="center" pt={"2"}>
|
||||
<Button w="100%" bg="#02A0A0" color={"#fff"}>
|
||||
Save
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
|
||||
<DialogCloseTrigger color="black" />
|
||||
</DialogContent>
|
||||
</DialogRoot >
|
||||
|
||||
)
|
||||
}
|
||||
|
||||
export default EditTemplateModel
|
||||
100
src/Pages/MasterModule/TemplateMaster/TemplateAddModel.tsx
Normal file
100
src/Pages/MasterModule/TemplateMaster/TemplateAddModel.tsx
Normal file
@@ -0,0 +1,100 @@
|
||||
import { DialogBody, DialogCloseTrigger, DialogContent, DialogFooter, DialogHeader, DialogRoot, DialogTitle, DialogTrigger } from "../../../components/ui/dialog"
|
||||
import { Box, Field, IconButton, Input, Stack, Text, Textarea } from "@chakra-ui/react"
|
||||
import { IoMdAdd } from "react-icons/io"
|
||||
import { Button } from "../../../components/ui/button"
|
||||
import { FiUpload } from "react-icons/fi";
|
||||
import { useState } from "react";
|
||||
|
||||
|
||||
function TemplateAddModel() {
|
||||
|
||||
const [images, setImages] = useState<string[]>([]);
|
||||
|
||||
const handleImageChange = (event: React.ChangeEvent<HTMLInputElement>) => {
|
||||
if (event.target.files) {
|
||||
const selectedFiles = Array.from(event.target.files);
|
||||
|
||||
const newImages = selectedFiles.map((file) => {
|
||||
return URL.createObjectURL(file); // Convert to preview URL
|
||||
});
|
||||
|
||||
setImages((prevImages) => [...prevImages, ...newImages]); // Append new images
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
return (
|
||||
|
||||
<DialogRoot placement="center">
|
||||
<DialogTrigger asChild>
|
||||
{/* <Button bg={"transparent"} size="sm">
|
||||
<MdOutlineRemoveRedEye style={{ cursor: "pointer", fontSize: "16px" }} />
|
||||
</Button> */}
|
||||
<Button px={5} size={"xs"} bg={"#02A0A0"}>
|
||||
<IoMdAdd /> <Text>Add</Text>
|
||||
</Button>
|
||||
|
||||
</DialogTrigger>
|
||||
|
||||
<DialogContent
|
||||
bg={"#fff"}
|
||||
// w={{ lg: "60%", md: "230px" }}
|
||||
w={{ base: '90%', md: '400px' }}
|
||||
height={'auto'}
|
||||
|
||||
overflowX="hidden"
|
||||
p={3} // Reduced padding
|
||||
bgSize={'md'}
|
||||
>
|
||||
<DialogHeader bg="white" >
|
||||
<DialogTitle alignSelf="center" color="black" fontSize="14px">Add</DialogTitle>
|
||||
</DialogHeader>
|
||||
|
||||
<DialogBody bg="white">
|
||||
<Stack py={3}>
|
||||
|
||||
<Field.Root>
|
||||
<Field.Label color="black" pt={1} fontSize="12px">Template Name</Field.Label>
|
||||
<Input placeholder="" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" />
|
||||
|
||||
|
||||
<Field.Label color="black" pt={1} fontSize="12px">Images</Field.Label>
|
||||
<Box display="flex" alignItems="center" justifyContent="space-between" px={3} bgColor="#EEEEEE" border="none" width="100%" height="50px" cursor="pointer" position="relative">
|
||||
<Input type="file" accept="image/*" opacity={0} position="absolute" bgColor="#EEEEEE" border="none" pl={1} width="100%" height="100%" cursor="pointer" onChange={handleImageChange}/>
|
||||
<Box display="flex" gap={2} overflow="hidden">
|
||||
{images.length > 0 ? (
|
||||
images.map((img, index) => (
|
||||
<img
|
||||
key={index}
|
||||
src={img}
|
||||
alt={`Uploaded ${index}`}
|
||||
style={{ maxHeight: "40px", maxWidth: "70px", objectFit: "contain" }}
|
||||
/>
|
||||
))
|
||||
) : (
|
||||
<Box width="70px" height="40px" /> // Placeholder to maintain layout
|
||||
)}
|
||||
</Box>
|
||||
<FiUpload color="#000" />
|
||||
</Box>
|
||||
|
||||
{/* <Input placeholder="" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" /> */}
|
||||
|
||||
</Field.Root>
|
||||
</Stack>
|
||||
|
||||
</DialogBody>
|
||||
<DialogFooter display="flex" justifyContent="center" pt={"2"}>
|
||||
<Button w="100%" bg="#02A0A0" color={"#fff"}>
|
||||
Save
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
|
||||
<DialogCloseTrigger color="black" />
|
||||
</DialogContent>
|
||||
</DialogRoot >
|
||||
|
||||
)
|
||||
}
|
||||
|
||||
export default TemplateAddModel
|
||||
@@ -1,12 +1,99 @@
|
||||
import { Box, HStack, Image, Input, Text } from "@chakra-ui/react";
|
||||
import MainFrame from "../../../components/MainFrame"
|
||||
import { InputGroup } from "../../../components/ui/input-group";
|
||||
import { LuSearch } from "react-icons/lu";
|
||||
import DataTable from "../../../components/DataTable";
|
||||
import { Switch } from "../../../components/ui/switch";
|
||||
import img from "../../../assets/waterfall.jpg"
|
||||
import Templateimg from "../../../assets/Template_img.png"
|
||||
import TemplateAddModel from "./TemplateAddModel";
|
||||
import EditTemplateModel from "./EditTemplateModel";
|
||||
|
||||
|
||||
|
||||
// table data
|
||||
|
||||
const tableHeadRow = [
|
||||
"Sr. No",
|
||||
"Title",
|
||||
"Images",
|
||||
"Action"
|
||||
|
||||
];
|
||||
|
||||
const managepost: any[] = [
|
||||
...Array.from({ length: 12 }, (_, i) => ({
|
||||
"Sr. No": i + 1,
|
||||
"Title": "Lorem Ipsum",
|
||||
"Images": (
|
||||
// <Image w={50} src={img} />
|
||||
<HStack >
|
||||
<Image w={100} h={50} src={img} />
|
||||
<Image w={100} h={50} src={Templateimg} />
|
||||
</HStack>
|
||||
|
||||
|
||||
),
|
||||
|
||||
"Action": (
|
||||
<HStack justifyContent="center">
|
||||
<EditTemplateModel />
|
||||
<Box>
|
||||
<Switch colorPalette={'teal'} size={"xs"}/>
|
||||
</Box>
|
||||
</HStack>
|
||||
),
|
||||
})),
|
||||
];
|
||||
|
||||
const TemplateMaster = () => {
|
||||
return (
|
||||
|
||||
<MainFrame>
|
||||
TemplateMaster
|
||||
</MainFrame>
|
||||
)
|
||||
}
|
||||
export default TemplateMaster
|
||||
return (
|
||||
|
||||
<MainFrame>
|
||||
<Box>
|
||||
<HStack
|
||||
w={"100%"}
|
||||
justifyContent={"space-between"}
|
||||
mb={4}
|
||||
py={0}
|
||||
px={3}
|
||||
>
|
||||
<Text as={"span"} fontSize={"sm"} fontWeight={500} color={"#000"}>
|
||||
Template Master
|
||||
</Text>
|
||||
|
||||
<HStack mr={5}>
|
||||
<InputGroup marginRight={"1rem"}
|
||||
startElement={
|
||||
<LuSearch fontSize={"xs"} style={{ position: 'relative', left: '10px' }} />
|
||||
}
|
||||
color={"#000"}
|
||||
>
|
||||
<Input
|
||||
p={3}
|
||||
w={300}
|
||||
bg={"#fff"}
|
||||
colorPalette={"blue"}
|
||||
_focus={{ border: "1px solid #02A0A0" }}
|
||||
rounded={"md"}
|
||||
size={"2xs"}
|
||||
fontSize={"2sm"}
|
||||
placeholder="Search..."
|
||||
bgColor={'#EEEEEE'}
|
||||
ps={8}
|
||||
/>
|
||||
</InputGroup>
|
||||
{/* <Button bgColor={'#EEEEEE'} pl={3} pr={3}><IoMdAdd /> <Text>Add</Text></Button> */}
|
||||
<TemplateAddModel />
|
||||
</HStack>
|
||||
</HStack>
|
||||
<DataTable
|
||||
sortableColumns={["Name", "Registration Date "]}
|
||||
tableHeadRow={tableHeadRow}
|
||||
data={managepost}
|
||||
/>
|
||||
</Box>
|
||||
</MainFrame>
|
||||
)
|
||||
}
|
||||
export default TemplateMaster
|
||||
Reference in New Issue
Block a user