QRunIO/qqq-frontend-material-dashboard
2
0
Fork 0
mirror of https://github.com/Kingsrook/qqq-frontend-material-dashboard.git synced 2025-07-18 13:20:43 +00:00
Code Issues Packages Projects Releases Wiki Activity

Initial checkin

Browse Source
This commit is contained in:
Tim Chamberlain
2022-06-27 13:29:42 -05:00
commit 048e080b77
661 changed files with 61687 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

173
src/layouts/applications/kanban/index.tsx Normal file
View File

@ -0,0 +1,173 @@
/**
=========================================================
* Material Dashboard 2 PRO React TS - v1.0.0
=========================================================
* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
* Copyright 2022 Creative Tim (https://www.creative-tim.com)
Coded by www.creative-tim.com
=========================================================
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
*/
import { useState } from "react";
// @asseinfo/react-kanban components
import Board from "@asseinfo/react-kanban";
// html-react-parser
import parse from "html-react-parser";
// uuid is a library for generating unique id
import { v4 as uuidv4 } from "uuid";
// @mui material components
import Icon from "@mui/material/Icon";
import { Theme } from "@mui/material/styles";
// Material Dashboard 2 PRO React TS components
import MDBox from "components/MDBox";
import MDButton from "components/MDButton";
import MDTypography from "components/MDTypography";
import MDInput from "components/MDInput";
// Material Dashboard 2 PRO React TS examples components
import DashboardLayout from "examples/LayoutContainers/DashboardLayout";
import DashboardNavbar from "examples/Navbars/DashboardNavbar";
import Footer from "examples/Footer";
// Kanban application components
import Header from "layouts/applications/kanban/components/Header";
// Data
import boards from "layouts/applications/kanban/data";
// Material Dashboard 2 PRO React context
import { useMaterialUIController } from "context";
function Kanban(): JSX.Element {
const [controller] = useMaterialUIController();
const { darkMode } = controller;
const [newCardForm, setNewCardForm] = useState<string | number | boolean>(false);
const [formValue, setFormValue] = useState<string>("");
const openNewCardForm = (event: HTMLButtonElement | any, id: string | number) =>
setNewCardForm(id);
const closeNewCardForm = () => setNewCardForm(false);
const handeSetFormValue = ({ currentTarget }: any) => setFormValue(currentTarget.value);
return (
<DashboardLayout>
<DashboardNavbar />
<MDBox py={3}>
<MDBox display="flex" justifyContent="flex-end" m={2}>
<Header />
</MDBox>
<MDBox
position="relative"
my={4}
sx={({
palette: { light, background },
functions: { pxToRem },
borders: { borderRadius },
}: Theme | any) => ({
"& .react-kanban-column": {
backgroundColor: darkMode ? background.card : light.main,
width: pxToRem(450),
margin: `0 ${pxToRem(10)}`,
padding: pxToRem(20),
borderRadius: borderRadius.lg,
},
})}
>
<Board
initialBoard={boards}
allowAddCard
allowAddColumn
renderColumnHeader={({ id, title }: any, { addCard }: any) => (
<>
<MDBox display="flex" justifyContent="space-between" alignItems="center" mb={3}>
<MDTypography variant="h6">{title}</MDTypography>
<MDButton size="small" iconOnly onClick={(event) => openNewCardForm(event, id)}>
<Icon
sx={{
fontWeight: "bold",
color: ({ palette: { dark } }) => dark.main,
}}
>
add
</Icon>
</MDButton>
</MDBox>
{newCardForm === id ? (
<MDBox my={2.5}>
<MDInput
value={formValue}
rows="4"
onChange={handeSetFormValue}
multiline
fullWidth
/>
<MDBox display="flex" mt={2}>
<MDButton
variant="gradient"
color="success"
size="small"
onClick={() => {
addCard({ id: uuidv4(), template: formValue });
setFormValue("");
}}
>
add
</MDButton>
<MDBox ml={1}>
<MDButton
variant="gradient"
color="light"
size="small"
onClick={closeNewCardForm}
>
cancel
</MDButton>
</MDBox>
</MDBox>
</MDBox>
) : null}
</>
)}
renderCard={({ id, template }: any, { dragging }: any) => (
<MDBox
key={id}
dragging={dragging.toString() || undefined}
display="block"
width="calc(450px - 40px)"
bgColor={darkMode ? "transparent" : "white"}
color="text"
borderRadius="xl"
mt={2.5}
py={1.875}
px={1.875}
lineHeight={1.5}
sx={{
border: ({ borders: { borderWidth }, palette: { white } }: any) =>
darkMode ? `${borderWidth[1]} solid ${white.main}` : 0,
fontSize: ({ typography: { size } }: any) => size.md,
}}
>
{typeof template === "string" ? parse(template) : template}
</MDBox>
)}
onCardNew={(): any => null}
/>
</MDBox>
</MDBox>
<Footer />
</DashboardLayout>
);
}
export default Kanban;