Skip to content

Commit 33d76b4

Browse files
ilomon10ilomon10
committed
Working activity doctor view
1 parent 0e9714f commit 33d76b4

File tree

8 files changed

+313
-85
lines changed

8 files changed

+313
-85
lines changed

‎public/package-lock.json

+17
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎public/package.json

+1
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@
66
"@blueprintjs/core": "^3.47.0",
77
"@blueprintjs/datetime": "^3.23.6",
88
"@blueprintjs/popover2": "^0.11.1",
9+
"@blueprintjs/select": "^3.16.6",
910
"@emotion/react": "^11.4.0",
1011
"@emotion/styled": "^11.3.0",
1112
"@feathersjs/authentication-client": "^4.5.11",

‎public/src/components/Select.js

+113
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,113 @@
1+
import { useMemo } from "react";
2+
import { Button, MenuItem } from "@blueprintjs/core";
3+
import { Select as BPSelect } from "@blueprintjs/select";
4+
5+
export const Select = ({
6+
id,
7+
intent,
8+
minimal,
9+
label,
10+
fill,
11+
outlined,
12+
small,
13+
14+
filterable,
15+
allowCreateItem,
16+
options,
17+
optionRenderer,
18+
onCreateNew,
19+
onChange,
20+
onClick,
21+
onOpening,
22+
value,
23+
loading,
24+
multiple,
25+
removeItem
26+
}) => {
27+
const items = useMemo(() => {
28+
return options;
29+
}, [options]);
30+
const activeItem = useMemo(() => {
31+
return items.find(item => item.value === value);
32+
}, [value, items]);
33+
34+
const createNewItemRenderer = (query, active) => {
35+
return (
36+
<MenuItem
37+
active={active}
38+
icon="add"
39+
text={`Add new group "${query}"`}
40+
onClick={(e) => {
41+
onCreateNew(query);
42+
}}
43+
/>
44+
)
45+
}
46+
47+
const itemRenderer = (item, { handleClick, modifiers }) => {
48+
if (!modifiers.matchesPredicate) {
49+
return null;
50+
}
51+
return (
52+
<MenuItem
53+
key={item.value}
54+
active={modifiers.active}
55+
disabled={modifiers.disabled}
56+
onClick={handleClick}
57+
text={item.label}
58+
/>
59+
)
60+
}
61+
62+
const itemPredicate = (query, item) => {
63+
const normalizeLabel = item.label.toLowerCase();
64+
const normalizeQuery = query.toLowerCase();
65+
return `${item.value} ${normalizeLabel}`.indexOf(normalizeQuery) >= 0;
66+
}
67+
68+
return (
69+
<BPSelect
70+
filterable={filterable}
71+
items={items}
72+
activeItem={activeItem}
73+
itemRenderer={optionRenderer || itemRenderer}
74+
itemPredicate={itemPredicate}
75+
onItemSelect={onChange}
76+
createNewItemPosition="first"
77+
createNewItemRenderer={allowCreateItem ? createNewItemRenderer : null}
78+
createNewItemFromQuery={allowCreateItem ? () => null : null}
79+
inputProps={{
80+
onKeyDown: (e) => {
81+
if (e.code === "Enter") {
82+
e.stopPropagation();
83+
onCreateNew(e.target.value);
84+
}
85+
}
86+
}}
87+
popoverProps={{
88+
onOpening: onOpening,
89+
minimal: true
90+
}}
91+
tagInputProps={{
92+
onRemove: removeItem
93+
}}
94+
noResults={(
95+
<MenuItem text={loading ? "Loading..." : "No Item"} />
96+
)}
97+
selectedItems={value}
98+
>
99+
<Button
100+
id={id}
101+
outlined={outlined}
102+
small={small}
103+
minimal={minimal}
104+
intent={intent}
105+
loading={loading}
106+
text={activeItem ? activeItem.label : (label || "Select")}
107+
rightIcon="caret-down"
108+
onClick={onClick}
109+
fill={fill}
110+
/>
111+
</BPSelect >
112+
)
113+
}

‎public/src/index.js

+1
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import ReactDOM from 'react-dom';
44
import 'normalize.css';
55
import '@blueprintjs/core/lib/css/blueprint.css';
66
import '@blueprintjs/icons/lib/css/blueprint-icons.css';
7+
import '@blueprintjs/select/lib/css/blueprint-select.css';
78
import '@blueprintjs/datetime/lib/css/blueprint-datetime.css';
89
import '@blueprintjs/popover2/lib/css/blueprint-popover2.css';
910
import './index.css';

‎public/src/pages/Doctor/Layout.js

+5-83
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,15 @@
11
import { Box, Flex } from "../../components/Grid"
22
import { Helmet } from "react-helmet";
3-
import { useAccount } from "../../components/Account";
43
import { Button } from "@blueprintjs/core";
54
import { useHistory } from "react-router-dom";
6-
import { useEffect } from "react";
7-
import { ListGroup } from "../../components/ListGroup";
5+
import { List } from "./List";
86

97
export const Layout = () => {
10-
const { logout } = useAccount();
118
const history = useHistory();
12-
useEffect(() => {
13-
14-
}, []);
159
return (
1610
<>
1711
<Helmet>
18-
<title>Doctor - Activity</title>
12+
<title>Doctor - Patient Activity</title>
1913
</Helmet>
2014
<Box sx={{
2115
position: "absolute",
@@ -46,8 +40,7 @@ export const Layout = () => {
4640
large={true}
4741
icon="log-out"
4842
onClick={() => {
49-
logout();
50-
history.go(0);
43+
history.push("/logout");
5144
}}
5245
/>
5346
</Flex>
@@ -61,82 +54,11 @@ export const Layout = () => {
6154
position: "absolute",
6255
inset: 0
6356
}}>
64-
<ListGroup sx={{
65-
height: "100%",
66-
display: "flex",
67-
flexDirection: "column"
68-
}}>
69-
<ListGroup.Header>
70-
<Flex sx={{
71-
justifyContent: "space-between"
72-
}}>
73-
<Button
74-
small={true}
75-
outlined={true}
76-
text="John Doe"
77-
/>
78-
<Button
79-
small={true}
80-
outlined={true}
81-
text="Senin, 27 Agustus 2021"
82-
/>
83-
</Flex>
84-
</ListGroup.Header>
85-
<Box sx={{ flexGrow: 1, flexShrink: 1, height: "1%", overflowY: "auto" }}>
86-
{/* <Box sx={{ position: "absolute", inset: 0, height: "100%", overflowY: "hidden" }}> */}
87-
{[{
88-
patient: "John Doe",
89-
text: "Mengonsumsi obat Amoxilin tepat waktu",
90-
date: "07:50 AM",
91-
}, {
92-
patient: "John Doe",
93-
text: "Mengonsumsi obat Amoxilin tepat waktu",
94-
date: "07:50 AM",
95-
}, {
96-
patient: "John Doe",
97-
text: "Mengonsumsi obat Amoxilin tepat waktu",
98-
date: "07:50 AM",
99-
}, {
100-
patient: "John Doe",
101-
text: "Mengonsumsi obat Amoxilin tepat waktu",
102-
date: "07:50 AM",
103-
}, {
104-
patient: "John Doe",
105-
text: "Mengonsumsi obat Amoxilin tepat waktu",
106-
date: "07:50 AM",
107-
}, {
108-
patient: "John Doe",
109-
text: "Mengonsumsi obat Amoxilin tepat waktu",
110-
date: "07:50 AM",
111-
}].map((value, idx) => (
112-
<ListGroup.Item key={idx}>
113-
<Flex sx={{
114-
fontSize: 0
115-
}}>
116-
<Box>#{idx}</Box>
117-
<Box sx={{
118-
ml: 3,
119-
fontWeight: "bold",
120-
color: "gray.5"
121-
}}>{value["patient"]}</Box>
122-
<Box sx={{
123-
flexGrow: 1,
124-
textAlign: "right",
125-
color: "gray.4"
126-
}}>{value["date"]}</Box>
127-
</Flex>
128-
<Box sx={{
129-
mt: 2,
130-
fontSize: 2
131-
}}>{value["text"]}</Box>
132-
</ListGroup.Item>))}
133-
{/* </Box> */}
134-
</Box>
135-
</ListGroup>
57+
<List />
13658
</Box>
13759
</Box>
13860
</Flex>
13961
</Box>
14062
</>
14163
)
142-
}
64+
}

0 commit comments

Comments
 (0)