Skip to content

Commit fea154b

Browse files
userlocalhostuserlocalhost
authored
Merge pull request #514 from userlocalhost/feature/new-ui/edit-entity/move-attribute
Added buttons to be able to move Attribute order
2 parents af5e271 + 9bfa12f commit fea154b

File tree

4 files changed

+102
-15
lines changed

4 files changed

+102
-15
lines changed

‎CHANGELOG.md

+2
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,8 @@
55
### Added
66

77
### Changed
8+
* (New-UI) Added movable Atttribute button at editing Entity page
9+
Contributed by @hinashi, @syucream, @userlocalhost
810

911
### Fixed
1012

‎frontend/src/components/entity/entityForm/AttributeRow.tsx

+71-9
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,6 @@
11
import AddIcon from "@mui/icons-material/Add";
2+
import ArrowDownwardIcon from "@mui/icons-material/ArrowDownward";
3+
import ArrowUpwardIcon from "@mui/icons-material/ArrowUpward";
24
import DeleteOutlineIcon from "@mui/icons-material/DeleteOutline";
35
import GroupIcon from "@mui/icons-material/Group";
46
import {
@@ -14,7 +16,6 @@ import {
1416
TableRow,
1517
Typography,
1618
} from "@mui/material";
17-
import { styled } from "@mui/material/styles";
1819
import { makeStyles } from "@mui/styles";
1920
import React, { FC, useMemo } from "react";
2021
import { Link } from "react-router-dom";
@@ -28,14 +29,31 @@ const useStyles = makeStyles<Theme>((theme) => ({
2829
button: {
2930
margin: theme.spacing(1),
3031
},
31-
}));
32+
tableRow: {
33+
"&:nth-of-type(odd)": {
34+
backgroundColor: "white",
35+
},
36+
"&:nth-of-type(even)": {
37+
backgroundColor: "#607D8B0A",
38+
},
39+
},
40+
highlightedTableRow: {
41+
backgroundColor: "yellow",
3242

33-
const StyledTableRow = styled(TableRow)(({ theme }) => ({
34-
"&:nth-of-type(odd)": {
35-
backgroundColor: "white",
43+
// TODO reset the animation with considering rerendering
44+
// animation: `$highlighted ease 1s 1`,
45+
// "&:nth-of-type(odd)": {
46+
// backgroundColor: "white",
47+
// },
48+
// "&:nth-of-type(even)": {
49+
// backgroundColor: "#607D8B0A",
50+
// },
3651
},
37-
"&:nth-of-type(even)": {
38-
backgroundColor: "#607D8B0A",
52+
53+
"@keyframes highlighted": {
54+
"0%": {
55+
backgroundColor: "yellow",
56+
},
3957
},
4058
}));
4159

@@ -46,6 +64,8 @@ interface Props {
4664
referralEntities: Entity[];
4765
entityInfo: EntityUpdate;
4866
setEntityInfo: (entityInfo: EntityUpdate) => void;
67+
latestChangedIndex?: number;
68+
setLatestChangedIndex: (latestChangedIndex: number) => void;
4969
}
5070

5171
export const AttributeRow: FC<Props> = ({
@@ -55,6 +75,8 @@ export const AttributeRow: FC<Props> = ({
5575
referralEntities,
5676
entityInfo,
5777
setEntityInfo,
78+
latestChangedIndex,
79+
setLatestChangedIndex,
5880
}) => {
5981
const classes = useStyles();
6082

@@ -69,6 +91,18 @@ export const AttributeRow: FC<Props> = ({
6991
setEntityInfo({ ...entityInfo, attrs: [...allAttrs] });
7092
};
7193

94+
const handleChangeOrderAttribute = (index: number, order: number) => {
95+
const newIndex = index - order;
96+
const oldIndex = index;
97+
const x = allAttrs[newIndex];
98+
allAttrs[newIndex] = allAttrs[oldIndex];
99+
allAttrs[oldIndex] = x;
100+
allAttrs[newIndex].index = index + 1 - order;
101+
allAttrs[oldIndex].index = index + 1;
102+
setLatestChangedIndex(newIndex);
103+
setEntityInfo({ ...entityInfo, attrs: [...allAttrs] });
104+
};
105+
72106
const handleDeleteAttribute = (index: number) => {
73107
allAttrs[index] = {
74108
...allAttrs[index],
@@ -95,7 +129,13 @@ export const AttributeRow: FC<Props> = ({
95129
};
96130

97131
return (
98-
<StyledTableRow>
132+
<TableRow
133+
className={
134+
index === latestChangedIndex
135+
? classes.highlightedTableRow
136+
: classes.tableRow
137+
}
138+
>
99139
<TableCell>
100140
{index !== undefined && (
101141
<Input
@@ -180,6 +220,28 @@ export const AttributeRow: FC<Props> = ({
180220
)}
181221
</TableCell>
182222

223+
<TableCell>
224+
{index !== undefined && (
225+
<Box display="flex" flexDirection="column">
226+
<IconButton
227+
disabled={index === 0}
228+
className={classes.button}
229+
onClick={(e) => handleChangeOrderAttribute(index, 1)}
230+
>
231+
<ArrowUpwardIcon />
232+
</IconButton>
233+
234+
<IconButton
235+
disabled={index === allAttrs.length - 1}
236+
className={classes.button}
237+
onClick={(e) => handleChangeOrderAttribute(index, -1)}
238+
>
239+
<ArrowDownwardIcon />
240+
</IconButton>
241+
</Box>
242+
)}
243+
</TableCell>
244+
183245
<TableCell>
184246
{index !== undefined && (
185247
<IconButton
@@ -216,6 +278,6 @@ export const AttributeRow: FC<Props> = ({
216278
</Button>
217279
)}
218280
</TableCell>
219-
</StyledTableRow>
281+
</TableRow>
220282
);
221283
};

‎frontend/src/components/entity/entityForm/AttributesFields.tsx

+7-2
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ import {
99
Typography,
1010
} from "@mui/material";
1111
import { makeStyles } from "@mui/styles";
12-
import React, { Fragment, FC } from "react";
12+
import React, { Fragment, FC, useState } from "react";
1313

1414
import { AttributeRow } from "./AttributeRow";
1515

@@ -32,7 +32,7 @@ export const AttributesFields: FC<Props> = ({
3232
setEntityInfo,
3333
referralEntities,
3434
}) => {
35-
const classes = useStyles();
35+
const [latestChangedIndex, setLatestChangedIndex] = useState<number>();
3636

3737
return (
3838
<Box>
@@ -49,6 +49,7 @@ export const AttributesFields: FC<Props> = ({
4949
<TableCell sx={{ color: "#FFFFFF" }}>型</TableCell>
5050
<TableCell sx={{ color: "#FFFFFF" }}>必須</TableCell>
5151
<TableCell sx={{ color: "#FFFFFF" }}>関連削除</TableCell>
52+
<TableCell sx={{ color: "#FFFFFF" }}>並び替え</TableCell>
5253
<TableCell sx={{ color: "#FFFFFF" }}>削除</TableCell>
5354
<TableCell sx={{ color: "#FFFFFF" }}>追加</TableCell>
5455
<TableCell sx={{ color: "#FFFFFF" }}>ACL設定</TableCell>
@@ -66,6 +67,8 @@ export const AttributesFields: FC<Props> = ({
6667
referralEntities={referralEntities}
6768
entityInfo={entityInfo}
6869
setEntityInfo={setEntityInfo}
70+
latestChangedIndex={latestChangedIndex}
71+
setLatestChangedIndex={setLatestChangedIndex}
6972
/>
7073
)}
7174
</Fragment>
@@ -77,6 +80,8 @@ export const AttributesFields: FC<Props> = ({
7780
referralEntities={referralEntities}
7881
entityInfo={entityInfo}
7982
setEntityInfo={setEntityInfo}
83+
latestChangedIndex={latestChangedIndex}
84+
setLatestChangedIndex={setLatestChangedIndex}
8085
/>
8186
)}
8287
</>

‎frontend/src/pages/__snapshots__/EditEntityPage.test.tsx.snap

+22-4
Original file line numberDiff line numberDiff line change
@@ -421,6 +421,12 @@ Object {
421421
>
422422
関連削除
423423
</th>
424+
<th
425+
class="MuiTableCell-root MuiTableCell-head MuiTableCell-sizeMedium css-qs7hxv-MuiTableCell-root"
426+
scope="col"
427+
>
428+
並び替え
429+
</th>
424430
<th
425431
class="MuiTableCell-root MuiTableCell-head MuiTableCell-sizeMedium css-qs7hxv-MuiTableCell-root"
426432
scope="col"
@@ -445,7 +451,7 @@ Object {
445451
class="MuiTableBody-root css-apqrd9-MuiTableBody-root"
446452
>
447453
<tr
448-
class="MuiTableRow-root css-1lwfqbm-MuiTableRow-root"
454+
class="MuiTableRow-root makeStyles-highlightedTableRow-12 css-1q1u3t4-MuiTableRow-root"
449455
>
450456
<td
451457
class="MuiTableCell-root MuiTableCell-body MuiTableCell-sizeMedium css-1ex1afd-MuiTableCell-root"
@@ -462,11 +468,14 @@ Object {
462468
<td
463469
class="MuiTableCell-root MuiTableCell-body MuiTableCell-sizeMedium css-1ex1afd-MuiTableCell-root"
464470
/>
471+
<td
472+
class="MuiTableCell-root MuiTableCell-body MuiTableCell-sizeMedium css-1ex1afd-MuiTableCell-root"
473+
/>
465474
<td
466475
class="MuiTableCell-root MuiTableCell-body MuiTableCell-sizeMedium css-1ex1afd-MuiTableCell-root"
467476
>
468477
<button
469-
class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium makeStyles-button-11 css-78trlr-MuiButtonBase-root-MuiIconButton-root"
478+
class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium makeStyles-button-10 css-78trlr-MuiButtonBase-root-MuiIconButton-root"
470479
tabindex="0"
471480
type="button"
472481
>
@@ -917,6 +926,12 @@ Object {
917926
>
918927
関連削除
919928
</th>
929+
<th
930+
class="MuiTableCell-root MuiTableCell-head MuiTableCell-sizeMedium css-qs7hxv-MuiTableCell-root"
931+
scope="col"
932+
>
933+
並び替え
934+
</th>
920935
<th
921936
class="MuiTableCell-root MuiTableCell-head MuiTableCell-sizeMedium css-qs7hxv-MuiTableCell-root"
922937
scope="col"
@@ -941,7 +956,7 @@ Object {
941956
class="MuiTableBody-root css-apqrd9-MuiTableBody-root"
942957
>
943958
<tr
944-
class="MuiTableRow-root css-1lwfqbm-MuiTableRow-root"
959+
class="MuiTableRow-root makeStyles-highlightedTableRow-12 css-1q1u3t4-MuiTableRow-root"
945960
>
946961
<td
947962
class="MuiTableCell-root MuiTableCell-body MuiTableCell-sizeMedium css-1ex1afd-MuiTableCell-root"
@@ -958,11 +973,14 @@ Object {
958973
<td
959974
class="MuiTableCell-root MuiTableCell-body MuiTableCell-sizeMedium css-1ex1afd-MuiTableCell-root"
960975
/>
976+
<td
977+
class="MuiTableCell-root MuiTableCell-body MuiTableCell-sizeMedium css-1ex1afd-MuiTableCell-root"
978+
/>
961979
<td
962980
class="MuiTableCell-root MuiTableCell-body MuiTableCell-sizeMedium css-1ex1afd-MuiTableCell-root"
963981
>
964982
<button
965-
class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium makeStyles-button-11 css-78trlr-MuiButtonBase-root-MuiIconButton-root"
983+
class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium makeStyles-button-10 css-78trlr-MuiButtonBase-root-MuiIconButton-root"
966984
tabindex="0"
967985
type="button"
968986
>

0 commit comments

Comments
 (0)