Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

imprv: User group link in admin page #8855

Merged
merged 40 commits into from
Jul 24, 2024
Merged

imprv: User group link in admin page #8855

Changes from 11 commits
Commits
Show all changes
40 commits
Select commit Hold shift + click to select a range
c955576
edit-icon-add
kazutoweseek May 29, 2024
7c57cc1
Merge branch 'master' into imprv/140677-145630-new-design
miya May 31, 2024
63f0905
undar-line-add
kazutoweseek May 31, 2024
7b11933
mt-add
kazutoweseek Jun 3, 2024
a3cfa09
mt-delete
kazutoweseek Jun 3, 2024
e645f7d
.gap-delete
kazutoweseek Jun 3, 2024
f910cb2
py-0-add-fs-delete
kazutoweseek Jun 5, 2024
e092a5a
hover-add
kazutoweseek Jun 10, 2024
c595598
span-tab-add
kazutoweseek Jun 10, 2024
47bea63
Merge branch 'master' into imprv/140677-145630-new-design
kazutoweseek Jun 12, 2024
cf5e964
change-grou-id
kazutoweseek Jun 12, 2024
2810e14
link-code-move-up
kazutoweseek Jun 17, 2024
e78e559
Merge branch 'master' into imprv/140677-145630-new-design
kazutoweseek Jun 17, 2024
7be9854
change-merge
kazutoweseek Jun 17, 2024
78131e1
div-tag-add
kazutoweseek Jun 17, 2024
0c33bc1
index-delete
kazutoweseek Jun 17, 2024
22c292c
Revert "index-delete"
kazutoweseek Jun 17, 2024
0116621
onmouse-code-move-up
kazutoweseek Jun 17, 2024
98c1767
Merge branch 'master' into imprv/140677-145630-new-design
kazutoweseek Jun 19, 2024
f558ae6
revert changes
kazutoweseek Jun 19, 2024
497a2b7
edit-code-move
kazutoweseek Jun 19, 2024
8d029c6
enter-leave-chaange
kazutoweseek Jun 19, 2024
ce54fe0
index-item-change
kazutoweseek Jun 19, 2024
5ad27d2
Merge branch 'master' into imprv/140677-145630-new-design
kazutoweseek Jun 24, 2024
a2133c7
index-change-item
kazutoweseek Jun 24, 2024
0c79a97
const-add
kazutoweseek Jun 24, 2024
7e835fb
group-delete
kazutoweseek Jun 24, 2024
446fafa
Merge branch 'master' into imprv/140677-145630-new-design
kazutoweseek Jul 1, 2024
92d3ce6
button-for-code-move
kazutoweseek Jul 1, 2024
0d48a1b
code-delete
kazutoweseek Jul 3, 2024
a1c92bb
button-tag-delete
kazutoweseek Jul 3, 2024
d1fbfad
Merge branch 'master' into imprv/140677-145630-new-design
kazutoweseek Jul 8, 2024
422b330
props-code-add
kazutoweseek Jul 8, 2024
5bce4f9
button-tag-add
kazutoweseek Jul 10, 2024
05be1dc
class-name-add
kazutoweseek Jul 11, 2024
b0b3a8c
hovered-delete
kazutoweseek Jul 11, 2024
ac69f6d
props-code-add
kazutoweseek Jul 17, 2024
a9782d4
Merge remote-tracking branch 'origin/master' into imprv/140677-145630…
yuki-takei Jul 24, 2024
73dce9c
implement without state management
yuki-takei Jul 24, 2024
7b7160d
add comment
yuki-takei Jul 24, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 14 additions & 2 deletions apps/app/src/components/Admin/UserGroup/UserGroupTable.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -136,6 +136,7 @@ export const UserGroupTable: FC<Props> = ({
setGroupIdToUsersMap(generateGroupIdToUsersMap(userGroupRelations));
setGroupIdToChildGroupsMap(generateGroupIdToChildGroupsMap(childUserGroups));
}, [userGroupRelations, childUserGroups]);
const [hoveredIndex, setHoveredIndex] = useState<undefined | number>(undefined);

return (
<div data-testid="grw-user-group-table" className="mb-5">
Expand All @@ -154,7 +155,7 @@ export const UserGroupTable: FC<Props> = ({
</tr>
</thead>
<tbody>
{userGroups.map((group) => {
{userGroups.map((group, index) => {
const users = groupIdToUsersMap[group._id];

return (
Expand All @@ -167,7 +168,18 @@ export const UserGroupTable: FC<Props> = ({
className="link-opacity-75-hover"
href={`/admin/user-group-detail/${group._id}?isExternalGroup=${isExternalGroup}`}
>
{group.name}
<button
className="btn btn-link btn-edit-groups text-secondary py-0"
type="button"
key={group._id}
onMouseEnter={() => setHoveredIndex(index)}
onMouseLeave={() => setHoveredIndex(undefined)}
>
<span className="material-symbols-outlined pe-2 pt-2">group</span>
<span className="text-decoration-underline">{group.name}</span>
{(hoveredIndex === index) && (<span className="material-symbols-outlined px-2 py-0">edit</span>
)}
</button>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

DOM 構造について

DOM 構造的に Link の中に button があるのは違和感。

親コンテナの中に Link と button を子供として並列に入れて、
親コンテナに対する hover で button の表示・非表示をコントロールしたらいいと思う。
PageCreateButton あたりが参考になるはず。

ステート管理について

index を保持するのはあまりスマートではないので、ここは切り出して別コンポーネントにしよう。
このファイル内に定義してしまって構わない。

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

これが考慮されていないと思う。
以下を別コンポーネントに切り出して index を props で渡す、という実装になるんじゃないかな。

    <button
      className="btn btn-link btn-edit-groups text-secondary py-0"
      type="button"
      key={group._id}
    >
      <span className="material-symbols-outlined pe-2 pt-2">group</span>
      <span className="text-decoration-underline">{group.name}</span>
      <span className={`material-symbols-outlined px-2 py-0 ${hovereditem === item ? '' : 'opacity-0'}`}>edit</span>
    </button>

</Link>
</td>
)
Expand Down
Loading