-
Notifications
You must be signed in to change notification settings - Fork 72
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
UI: Group/User/Attribute administration lists revisited (#368)
* Draft of user/group lists refactor * Next changes * UsersPendingList, AttributesList * Removed dummy elements * Small fixes * Added proper error/success handling * Fixed group rename
- Loading branch information
Showing
15 changed files
with
499 additions
and
583 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,78 @@ | ||
| import React, { useCallback, useEffect, useState } from "react"; | ||
| import { Link } from "react-router-dom"; | ||
|
|
||
| import api from "@mwdb-web/commons/api"; | ||
| import { PagedList, useViewAlert } from "@mwdb-web/commons/ui"; | ||
|
|
||
| function AttributeItem({ name, label, description, template }) { | ||
| return ( | ||
| <tr> | ||
| <td> | ||
| <Link to={`/admin/attribute/${name}`}>{name}</Link> | ||
| | ||
| {label && <span>({label})</span>} | ||
| </td> | ||
| <td> | ||
| {description || <div className="text-muted">(Not defined)</div>} | ||
| </td> | ||
| <td> | ||
| {template || <div className="text-muted">(Not defined)</div>} | ||
| </td> | ||
| </tr> | ||
| ); | ||
| } | ||
|
|
||
| export default function AttributesList() { | ||
| const viewAlert = useViewAlert(); | ||
| const [attributes, setAttributes] = useState([]); | ||
| const [activePage, setActivePage] = useState(1); | ||
| const [attributeFilter, setAttributeFilter] = useState(""); | ||
|
|
||
| async function updateAttributes() { | ||
| try { | ||
| const response = await api.getMetakeyDefinitions(); | ||
| setAttributes( | ||
| response.data["metakeys"].map((attribute) => ({ | ||
| ...attribute, | ||
| name: attribute.key, | ||
| })) | ||
| ); | ||
| } catch (error) { | ||
| viewAlert.setAlert({ error }); | ||
| } | ||
| } | ||
|
|
||
| const getAttributes = useCallback(updateAttributes, []); | ||
|
|
||
| useEffect(() => { | ||
| getAttributes(); | ||
| }, [getAttributes]); | ||
|
|
||
| const query = attributeFilter.toLowerCase(); | ||
| const items = attributes | ||
| .filter((attribute) => attribute.key.toLowerCase().includes(query)) | ||
| .sort((attrA, attrB) => attrA.key.localeCompare(attrB.key)); | ||
|
|
||
| return ( | ||
| <div className="container"> | ||
| <Link to="/admin/attribute/new"> | ||
| <button type="button" className="btn btn-success"> | ||
| Create attribute | ||
| </button> | ||
| </Link> | ||
| <PagedList | ||
| listItem={AttributeItem} | ||
| columnNames={["Key (Label)", "Description", "URL Template"]} | ||
| items={items.slice((activePage - 1) * 10, activePage * 10)} | ||
| itemCount={items.length} | ||
| activePage={activePage} | ||
| filterValue={attributeFilter} | ||
| onPageChange={(pageNumber) => setActivePage(pageNumber)} | ||
| onFilterChange={(ev) => { | ||
| setAttributeFilter(ev.target.value); | ||
| setActivePage(1); | ||
| }} | ||
| /> | ||
| </div> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,88 @@ | ||
| import React, { useCallback, useEffect, useState } from "react"; | ||
| import { Link } from "react-router-dom"; | ||
|
|
||
| import api from "@mwdb-web/commons/api"; | ||
| import { | ||
| GroupBadge, | ||
| PagedList, | ||
| HighlightText, | ||
| useViewAlert, | ||
| } from "@mwdb-web/commons/ui"; | ||
|
|
||
| function GroupItem(props) { | ||
| return ( | ||
| <tr key={props.name}> | ||
| <td> | ||
| <Link to={`/admin/group/${props.name}`}> | ||
| <HighlightText filterValue={props.filterValue}> | ||
| {props.name} | ||
| </HighlightText> | ||
| </Link> | ||
| </td> | ||
| <td> | ||
| {props.name === "public" | ||
| ? "(Group is public and contains all members)" | ||
| : props.users.map((login) => ( | ||
| <GroupBadge | ||
| group={{ | ||
| name: login, | ||
| private: true, | ||
| }} | ||
| clickable | ||
| /> | ||
| ))} | ||
| </td> | ||
| </tr> | ||
| ); | ||
| } | ||
|
|
||
| export default function GroupsList() { | ||
| const viewAlert = useViewAlert(); | ||
| const [groups, setGroups] = useState([]); | ||
| const [activePage, setActivePage] = useState(1); | ||
| const [groupFilter, setGroupFilter] = useState(""); | ||
|
|
||
| async function updateGroups() { | ||
| try { | ||
| const response = await api.getGroups(); | ||
| setGroups(response.data["groups"]); | ||
| } catch (error) { | ||
| viewAlert.setAlert({ error }); | ||
| } | ||
| } | ||
|
|
||
| const getGroups = useCallback(updateGroups, []); | ||
|
|
||
| useEffect(() => { | ||
| getGroups(); | ||
| }, [getGroups]); | ||
|
|
||
| const query = groupFilter.toLowerCase(); | ||
| const items = groups | ||
| .filter((group) => !group.private) | ||
| .filter((group) => group.name.toLowerCase().includes(query)) | ||
| .sort((groupA, groupB) => groupA.name.localeCompare(groupB.name)); | ||
|
|
||
| return ( | ||
| <div className="container"> | ||
| <Link to="/admin/group/new"> | ||
| <button type="button" className="btn btn-success"> | ||
| Create group | ||
| </button> | ||
| </Link> | ||
| <PagedList | ||
| listItem={GroupItem} | ||
| columnNames={["Name", "Members"]} | ||
| items={items.slice((activePage - 1) * 10, activePage * 10)} | ||
| itemCount={items.length} | ||
| activePage={activePage} | ||
| filterValue={groupFilter} | ||
| onPageChange={(pageNumber) => setActivePage(pageNumber)} | ||
| onFilterChange={(ev) => { | ||
| setGroupFilter(ev.target.value); | ||
| setActivePage(1); | ||
| }} | ||
| /> | ||
| </div> | ||
| ); | ||
| } |
96 changes: 0 additions & 96 deletions
96
mwdb/web/src/components/Settings/Views/ManageAttributes.js
This file was deleted.
Oops, something went wrong.
Oops, something went wrong.