Skip to content

Commit 5047e34

Browse files
lu0713lu0713
committed
about to tackle modal problem - everything working otherwise
1 parent abbbc24 commit 5047e34

4 files changed

Lines changed: 188 additions & 96 deletions

File tree

‎app/components/Applications.tsx‎

Lines changed: 36 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -82,50 +82,52 @@ const Applications = () => {
8282
backgroundColor: 'transparent'
8383
}
8484
},
85-
// fontStyles: {
86-
// fontSize: '16px',
87-
// [theme.breakpoints.up('lg')]: {
88-
// fontSize: '18px',
89-
// // MAIN PAGE SQUARE BUTTON FONTS
90-
// fontFamily: 'Inter'
91-
// },
92-
// },
85+
fontStyles: {
86+
fontSize: '16px',
87+
[theme.breakpoints.up('lg')]: {
88+
fontSize: '18px',
89+
// MAIN PAGE SQUARE BUTTON FONTS
90+
fontFamily: 'Inter'
91+
},
92+
},
9393
}));
9494

9595
const classes = useStyles();
9696

9797
return (
98-
<div className="cardContainer">
98+
<>
9999
{applications.map((app: string[], i: number | any | string | undefined) => (
100-
<div id={'card-hover'}>
101-
<Card
102-
key={`card-${i}`}
103-
className={classes.paper}
104-
variant="outlined"
105-
onClick={event => handleClick(event, app[0], i)}
106-
>
107-
<CardHeader
108-
avatar={
109-
<IconButton
110-
ref={element => (delRef.current[i] = element)}
111-
className={classes.hover}
112-
aria-label="Delete"
113-
onClick={event => confirmDelete(event, app[0], i)}
114-
>
115-
<DeleteForeverOutlinedIcon />
116-
</IconButton>
117-
}
118-
></CardHeader>
119-
<CardContent>
120-
<Typography className={'cardContent'}>{app[0]}</Typography>
121-
</CardContent>
122-
</Card>
123-
</div>
100+
<Grid item lg={4} md={6} sm={12} key={i}>
101+
<div id="card-hover">
102+
<Card
103+
// key={`card-${i}`}
104+
className={classes.paper}
105+
variant="outlined"
106+
onClick={event => handleClick(event, app[0], i)}
107+
>
108+
<CardHeader
109+
avatar={
110+
<IconButton
111+
ref={element => (delRef.current[i] = element)}
112+
className={classes.hover}
113+
aria-label="Delete"
114+
onClick={event => confirmDelete(event, app[0], i)}
115+
>
116+
<DeleteForeverOutlinedIcon />
117+
</IconButton>
118+
}
119+
></CardHeader>
120+
<CardContent>
121+
<Typography className={classes.fontStyles}>{app[0]}</Typography>
122+
</CardContent>
123+
</Card>
124+
</div>
125+
</Grid>
124126
))}
125127
<Modal open={open} onClose={() => setOpen(false)}>
126128
<ServicesModal i={index} app={app} />
127129
</Modal>
128-
</div>
130+
</>
129131
);
130132
};
131133

‎app/components/Occupied.tsx‎

Lines changed: 94 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,70 @@
1-
import React, { useState } from 'react';
2-
import { Grid, Modal, Button, Typography } from '@material-ui/core';
1+
import React, { useContext, useEffect, useState, useRef } from 'react';
2+
3+
// MATERIAL UI METHODS
4+
import {
5+
IconButton,
6+
Modal,
7+
Card,
8+
CardHeader,
9+
CardContent,
10+
Button,
11+
Typography } from '@material-ui/core';
312
import { Theme, makeStyles } from '@material-ui/core/styles';
4-
import AddCircleOutlineTwoToneIcon from '@material-ui/icons/AddCircleOutlineTwoTone';
5-
import Copyright from '../components/Copyright';
6-
import AddModal from '../modals/AddModal';
7-
import Applications from './Applications';
13+
import { BaseCSSProperties } from '@material-ui/core/styles/withStyles';
14+
15+
// MATERIAL UI ICONS
816
import MoreVertIcon from '@material-ui/icons/MoreVert';
17+
import AddCircleOutlineTwoToneIcon from '@material-ui/icons/AddCircleOutlineTwoTone';
18+
import DeleteForeverOutlinedIcon from '@material-ui/icons/DeleteForeverOutlined';
919
import ListIcon from '@material-ui/icons/List';
1020
import SearchIcon from '@material-ui/icons/Search';
1121
import DashboardIcon from '@material-ui/icons/Dashboard';
1222
import NotificationsIcon from '@material-ui/icons/Notifications';
1323
import PersonIcon from '@material-ui/icons/Person';
24+
25+
// MODALS
26+
import AddModal from '../modals/AddModal';
27+
import ServicesModal from '../modals/ServicesModal';
28+
29+
// STYLESHEETS
1430
import '../stylesheets/Occupied.scss';
15-
import { BaseCSSProperties } from '@material-ui/core/styles/withStyles';
1631

32+
// DASHBOARD CONTEXT
33+
import { DashboardContext } from '../context/DashboardContext';
34+
35+
// TYPESCRIPT
1736
interface StyleProps {
1837
root: BaseCSSProperties,
1938
};
39+
type ClickEvent = React.MouseEvent<HTMLElement>;
2040

2141
const Occupied: React.FC = () => {
22-
const [open, setOpen] = useState(false);
42+
const { applications, getApplications, deleteApp } = useContext(DashboardContext);
43+
const [open, setOpen] = useState<boolean>(false);
44+
const [index, setIndex] = useState<number>(0);
45+
const [app, setApp] = useState<string>('');
46+
47+
// Dynamic refs
48+
const delRef = useRef<any>([]);
49+
50+
useEffect(() => {
51+
getApplications();
52+
}, []);
53+
54+
// Ask user for deletetion confirmation
55+
const confirmDelete = (event: ClickEvent, app: string, i: number) => {
56+
const message = `The application '${app}' will be permanently deleted. Continue?`;
57+
if (confirm(message)) deleteApp(i);
58+
};
59+
60+
// Handle clicks on Application cards
61+
const handleClick = (event: ClickEvent, selectedApp: string, i: number) => {
62+
if (delRef.current[i] && !delRef.current[i].contains(event.target)) {
63+
setIndex(i);
64+
setApp(selectedApp);
65+
setOpen(true);
66+
}
67+
};
2368

2469
const useStyles = makeStyles<Theme, StyleProps>(theme => ({
2570
// card: "+" button only
@@ -56,7 +101,7 @@ const Occupied: React.FC = () => {
56101

57102
return (
58103

59-
<div>
104+
<div className="entireArea">
60105
<div className="sidebarArea">
61106
</div>
62107
<div className="dashboardArea">
@@ -80,13 +125,46 @@ const Occupied: React.FC = () => {
80125
<PersonIcon className="sideIcon" id="personIcon"/>
81126
</section>
82127
</header>
83-
<Modal open={open} onClose={() => setOpen(false)}>
84-
<AddModal setOpen={setOpen} />
85-
</Modal>
86-
<Button className={classes.paper} onClick={() => setOpen(true)}>
87-
<AddCircleOutlineTwoToneIcon className={classes.icon} />
88-
</Button>
89-
<Applications />
128+
129+
<div className="cardContainer">
130+
<div className="card" id={`card-add`}>
131+
<Button className={classes.paper} onClick={() => setOpen(true)}>
132+
<AddCircleOutlineTwoToneIcon className={classes.icon} />
133+
</Button>
134+
</div>
135+
{applications.map((app: string[], i: number | any | string | undefined) => (
136+
<div className="card" id={`card-${i}`}>
137+
<Card
138+
key={`card-${i}`}
139+
className={classes.paper}
140+
variant="outlined"
141+
onClick={event => handleClick(event, app[0], i)}
142+
>
143+
<CardHeader
144+
avatar={
145+
<IconButton
146+
ref={element => (delRef.current[i] = element)}
147+
className={classes.hover}
148+
aria-label="Delete"
149+
onClick={event => confirmDelete(event, app[0], i)}
150+
>
151+
<DeleteForeverOutlinedIcon />
152+
</IconButton>
153+
}
154+
></CardHeader>
155+
<CardContent>
156+
<Typography className={'cardContent'}>{app[0]}</Typography>
157+
</CardContent>
158+
</Card>
159+
</div>
160+
))}
161+
<Modal open={open} onClose={() => setOpen(false)}>
162+
<ServicesModal open={open} onClose={() => setOpen(false)} i={index} app={app} />
163+
</Modal>
164+
<Modal open={open} onClose={() => setOpen(false)}>
165+
<AddModal open={open} onClose={() => setOpen(false)} setOpen={setOpen} />
166+
</Modal>
167+
</div>
90168
</div>
91169
</div>
92170
);

‎app/stylesheets/Applications.scss‎

Lines changed: 1 addition & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -1,50 +1,5 @@
11
@import './constants.scss';
22

3-
.makeStyles-paper-8 {
4-
font-size: 28px;
5-
}
63

7-
.cardContainer {
8-
display: flex;
9-
justify-content: space-around;
10-
}
114

12-
#card-hover {
13-
display: flex;
14-
flex-direction: row;
15-
justify-content: space-around;
16-
margin: 0;
17-
padding: 0;
18-
cursor: pointer;
19-
transition: all 0.5s;
20-
&:after,
21-
&:before {
22-
content: ' ';
23-
width: 10px;
24-
height: 10px;
25-
position: absolute;
26-
transition: all 0.5s;
27-
}
28-
&:after {
29-
top: -1px;
30-
right: -1px;
31-
// border-top: 2px solid rgba(132, 216, 255, 0.7);
32-
// border-right: 2px solid rgba(132, 216, 255, 0.7);
33-
}
34-
&:before {
35-
bottom: -1px;
36-
left: -1px;
37-
// border-bottom: 2px solid rgba(132, 216, 255, 0.7);
38-
// border-left: 2px solid rgba(132, 216, 255, 0.7);
39-
}
40-
&:hover {
41-
position: relative;
42-
border-top-right-radius: 0px;
43-
border-bottom-left-radius: 0px;
44-
&:before,
45-
&:after {
46-
width: 25%;
47-
height: 25%;
48-
}
49-
}
50-
}
5+

‎app/stylesheets/Occupied.scss‎

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
@import './constants.scss';
22

3+
// HEADER
34
.mainHeader {
45
display: flex;
56
flex-direction: row;
@@ -183,4 +184,60 @@ select:-webkit-autofill:focus {
183184
-webkit-text-fill-color: green;
184185
-webkit-box-shadow: 0 0 0px 1000px #000 inset;
185186
transition: background-color 5000s ease-in-out 0s;
187+
}
188+
189+
// MAIN DASHBOARD
190+
.dashboardArea {
191+
display: flex;
192+
flex-direction: column;
193+
justify-content: space-evenly;
194+
}
195+
196+
// DATABASE CARDS
197+
.cardContainer {
198+
display: flex;
199+
justify-content: space-between;
200+
align-self: center;
201+
width: 80%;
202+
margin: 20px;
203+
}
204+
205+
.card {
206+
display: flex;
207+
flex-direction: row;
208+
justify-content: space-around;
209+
margin: 20px;
210+
padding: 0;
211+
cursor: pointer;
212+
transition: all 0.5s;
213+
&:after,
214+
&:before {
215+
content: ' ';
216+
width: 10px;
217+
height: 10px;
218+
position: absolute;
219+
transition: all 0.5s;
220+
}
221+
&:after {
222+
top: -1px;
223+
right: -1px;
224+
// border-top: 2px solid rgba(132, 216, 255, 0.7);
225+
// border-right: 2px solid rgba(132, 216, 255, 0.7);
226+
}
227+
&:before {
228+
bottom: -1px;
229+
left: -1px;
230+
// border-bottom: 2px solid rgba(132, 216, 255, 0.7);
231+
// border-left: 2px solid rgba(132, 216, 255, 0.7);
232+
}
233+
&:hover {
234+
position: relative;
235+
border-top-right-radius: 0px;
236+
border-bottom-left-radius: 0px;
237+
&:before,
238+
&:after {
239+
width: 25%;
240+
height: 25%;
241+
}
242+
}
186243
}

0 commit comments

Comments
 (0)