Skip to content

Commit

Permalink
feedback: settings page direction
Browse files Browse the repository at this point in the history
  • Loading branch information
@Tguntenaar
Tguntenaar committed Nov 22, 2023
1 parent e4fadf9 commit c176b48
Show file tree
Hide file tree
Showing 5 changed files with 332 additions and 452 deletions.
87 changes: 87 additions & 0 deletions src/devhub/components/molecule/ListEditor.jsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,87 @@
const { Tile } =
VM.require("${REPL_DEVHUB}/widget/devhub.components.molecule.Tile") ||
(() => <></>);

const { data, setList, validate, invalidate } = props;

const [newItem, setNewItem] = useState("");

const handleAddItem = () => {
if (validate(newItem)) {
setList([...data.list, newItem]);
setNewItem("");
} else {
return invalidate();
}
};

const handleDeleteItem = (index) => {
const updatedData = [...data.list];
updatedData.splice(index, 1);
setList(updatedData);
};

const Item = styled.div`
padding: 10px;
margin: 5px;
display: flex;
align-items: center;
flex-direction: row;
gap: 10px;
`;

return (
<>
{data.list.map((item, index) => (
<Item key={index}>
<div className="flex-grow-1">
<Widget
src="${REPL_DEVHUB}/widget/devhub.components.molecule.Input"
props={{
className: "flex-grow-1",
value: item,
skipPaddingGap: true,
placeholder: data.placeholder,
inputProps: {
prefix: data.prefix,
disabled: true,
},
}}
/>
</div>
<button
className="btn btn-outline-danger"
onClick={() => handleDeleteItem(index)}
>
<i className="bi bi-trash-fill" />
</button>
</Item>
))}
{data.list.length < data.maxLength && (
<Item>
<div className="flex-grow-1">
<Widget
src="${REPL_DEVHUB}/widget/devhub.components.molecule.Input"
props={{
className: "flex-grow-1",
skipPaddingGap: true,
onChange: (e) => setNewItem(e.target.value),
value: newItem,
placeholder: data.placeholder,
inputProps: {
prefix: data.prefix,
},
}}
/>
</div>
<button
className="btn btn-success add-member"
onClick={handleAddItem}
disabled={newItem === ""}
>
<i className="bi bi-plus" />
</button>
</Item>
)}
</>
);
20 changes: 2 additions & 18 deletions src/devhub/entity/team/Configurator.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,3 @@
/**
* In the context of the contract, a group is essentially a member identified
* by the prefix 'team:'; therefore, on the front end, we also employ 'team,'
* with the user interface displaying 'group' for clarity.
*/
const { Tile } =
VM.require("${REPL_DEVHUB}/widget/devhub.components.molecule.Tile") ||
(() => <></>);
Expand Down Expand Up @@ -40,7 +35,6 @@ const [newItem, setNewItem] = useState("");
const [teamName, setTeamName] = useState(
backwardsCompatibleTeam(data.teamName) || ""
);
const [description, setDescription] = useState(data.description || "");
const [label, setLabel] = useState(data.label || "");
const [labelType, setLabelType] = useState(
(data.label || "").startsWith("starts-with:") ? "starts-with:" : ""
Expand Down Expand Up @@ -86,7 +80,6 @@ const handleSubmit = () => {

onSubmit({
teamName,
description,
label: labelType + backwardsCompatibleLabel(label),
editPost,
useLabels,
Expand All @@ -97,7 +90,7 @@ const handleSubmit = () => {
return (
<Tile className="p-3">
<Container>
<h3>{data.teamName ? "Edit label" : "Create group"}</h3>
<h3>{data.teamName == "" ? "Edit label" : "Create label"}</h3>
<Widget
src="${REPL_DEVHUB}/widget/devhub.components.atom.Alert"
props={{
Expand All @@ -121,16 +114,7 @@ return (
}}
/>
</div>
<div className="flex-grow-1">
<span>Group description</span>
<Widget
src="${REPL_DEVHUB}/widget/devhub.components.molecule.MarkdownEditor"
props={{
data: { content: description },
onChange: setDescription,
}}
/>
</div>

<div className="flex-grow-1">
<div>
Would you like this group to limit their restrictions to a single
Expand Down
177 changes: 87 additions & 90 deletions src/devhub/entity/team/LabelRow.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -158,97 +158,94 @@ const backwardsCompatibleLabel = (oldLabel) => {
const backwardsCompatibleTeam = (oldTeam) =>
oldTeam.startsWith("team:") ? oldTeam.slice(5) : oldTeam;

return editMode ? (
return (
<>
<Widget
src={"${REPL_DEVHUB}/widget/devhub.entity.team.Configurator"}
props={{
data: configuratorData,
onCancel: () => setEditMode(false),
onSubmit: (params) => editTeam(params),
}}
/>
<Widget
src="${REPL_DEVHUB}/widget/devhub.components.atom.Alert"
props={{
onClose: () => setAlertMessage(""),
message: alertMessage,
}}
/>
</>
) : (
/**
* <th scope="col">label name</th>
<th scope="col">Type</th>
<th scope="col">Members</th>
<th scope="col">Only allow members to use label</th>
<th scope="col">Allow members to edit any post with label</th>
<th scope="col">Actions</th>
*/
<tr>
<th scope="row">
<Widget
src={"${REPL_DEVHUB}/widget/devhub.components.atom.Tag"}
props={{
tag: backwardsCompatibleLabel(label),
}}
/>
</th>
<td>
{(label || "").startsWith("starts-with:")
? "Multiple labels with common prefix"
: "Single label"}
</td>
<td>
{metadata.children && (
<div class="vstack">
{metadata.children.length ? (
metadata.children.map((child) => <p>{child}</p>)
) : (
<div>No members in this group</div>
)}
</div>
)}
</td>
<td>
<div class="form-check">
<input
class="form-check-input"
type="checkbox"
value={useLabels}
id={`useLabelsCheckbox${identifier}`}
checked={useLabels}
onChange={() => setUseLabels(!useLabels)}
disabled={disabled}
<tr>
<th scope="row" class=" justify-content-center align-items-center p-3">
<Widget
src={"${REPL_DEVHUB}/widget/devhub.components.atom.Tag"}
props={{
tag: backwardsCompatibleLabel(label),
}}
/>
</div>
</td>
<td>
<div class="form-check">
<input
class="form-check-input"
type="checkbox"
value={editPost}
id={`editPostCheckbox${identifier}`}
checked={editPost}
onChange={() => setEditPost(!editPost)}
disabled={disabled}
</th>
<td class=" justify-content-center align-items-center p-3">
{(label || "").startsWith("starts-with:")
? "Multiple labels with common prefix"
: "Single label"}
</td>
<td class=" justify-content-center align-items-center p-3">
{metadata.children && (
<div class="vstack">
{metadata.children.length ? (
metadata.children.map((child) => <p>{child}</p>)
) : (
<div>No members in this group</div>
)}
</div>
)}
</td>
<td class=" justify-content-center align-items-center p-3">
<div class="form-check">
<input
class="form-check-input"
type="checkbox"
value={useLabels}
id={`useLabelsCheckbox${identifier}`}
checked={useLabels}
onChange={() => setUseLabels(!useLabels)}
disabled={disabled}
/>
</div>
</td>
<td class=" justify-content-center align-items-center p-3">
<div class="form-check">
<input
class="form-check-input"
type="checkbox"
value={editPost}
id={`editPostCheckbox${identifier}`}
checked={editPost}
onChange={() => setEditPost(!editPost)}
disabled={disabled}
/>
</div>
</td>
<td class=" justify-content-center align-items-center p-3">
<Widget
src={"${REPL_DEVHUB}/widget/devhub.components.molecule.Button"}
props={{
classNames: { root: "btn-outline-light text-dark" },
icon: {
type: "bootstrap_icon",
variant: "bi-gear-wide-connected",
},
label: "Edit",
onClick: () => setEditMode(true),
}}
/>
</div>
</td>
<td>
<Widget
src={"${REPL_DEVHUB}/widget/devhub.components.molecule.Button"}
props={{
classNames: { root: "btn-outline-light text-dark" },
icon: {
type: "bootstrap_icon",
variant: "bi-gear-wide-connected",
},
label: "Edit",
onClick: () => setEditMode(true),
}}
/>
</td>
</tr>
</td>
</tr>
{editMode && (
<tr>
<th scope="row" colspan="6">
<Widget
src={"${REPL_DEVHUB}/widget/devhub.entity.team.Configurator"}
props={{
data: configuratorData,
onCancel: () => setEditMode(false),
onSubmit: (params) => editTeam(params),
}}
/>
<Widget
src="${REPL_DEVHUB}/widget/devhub.components.atom.Alert"
props={{
onClose: () => setAlertMessage(""),
message: alertMessage,
}}
/>
</th>
</tr>
)}
</>
);
Loading

0 comments on commit c176b48

Please sign in to comment.