watcha
/
watcha-admin
mirror of https://github.com/watcha-fr/watcha-admin
1
1
Fork 0
Code Issues Projects Releases Wiki Activity

feat: add the old CreateUserRightPanel to the new UsersTab

Browse Source
pull/15/head
c-cal 5 years ago
parent 0446f520cb
commit b1fd5e050f
Signed by: watcha
GPG Key ID: 87DD78E7F7A1581D
4 changed files with 110 additions and 84 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 8
      src/App.css
  2. 144
      src/CreateUserRightPanel.js
  3. 12
      src/TableTab.js
  4. 30
      src/UsersTab.js

8
src/App.css
Unescape View File

@ -80,9 +80,15 @@
background-color: white;
}
.tableTabBody {
display: flex;
min-height: 1%;
}
.tableContainer {
display: flex;
overflow: auto;
width: 100%;
}
th {
@ -154,7 +160,7 @@ th:hover {
}
.rightPanel {
height: 90vh;
height: 100%;
width: 30vw;
}

144
src/CreateUserRightPanel.js
Unescape View File

@ -200,10 +200,7 @@ class CreateUserRightPanel extends Component {
isName = query => query.length > 1;
onInfoMessageValidate = () => {
this.props.refreshRightPanel();
this.dismissInfoMessage();
};
onInfoMessageValidate = () => this.dismissInfoMessage();
render() {
const { t } = this.props;
@ -271,78 +268,75 @@ class CreateUserRightPanel extends Component {
);
return (
<div>
<Collapse in={true} dimension="width" timeout={0}>
<div>
<Card className="rightPanel">
<Card.Header className="header-with-button">
{t("Create user")}
<i
className="fas fa-times dismissRight"
onClick={this.props.onClose}
></i>
</Card.Header>
<Collapse className="mx-3" in={true} dimension="width" timeout={0}>
<div>
<Card className="rightPanel">
<Card.Header className="header-with-button">
{t("Create user")}
<i
className="fas fa-times dismissRight"
onClick={this.props.onClose}
></i>
</Card.Header>
<div className="pannelContainer">
<Card.Body>
<Card body bg="light">
<Table>
<tbody>
<tr>
<td className="labelText">
{t("First Name")}:
</td>
<td>
<input
onChange={
this
.onFirstNameChange
}
/>
</td>
</tr>
<tr>
<td className="labelText">
{t("Last Name")}:
</td>
<td>
<input
onChange={
this
.onLastNameChange
}
/>
</td>
</tr>
<tr>
<td className="labelText">
Email:
</td>
<td>
<input
onChange={
this
.onEmailChange
}
/>
</td>
</tr>
<tr>
<td className="labelText">
{t("User Id")}:
</td>
{editUserId}
</tr>
</tbody>
</Table>
</Card>
</Card.Body>
{bottomWell}
</div>
</Card>
</div>
</Collapse>
</div>
<div className="pannelContainer">
<Card.Body>
<Card body bg="light">
<Table>
<tbody>
<tr>
<td className="labelText">
{t("First Name")}:
</td>
<td>
<input
onChange={
this
.onFirstNameChange
}
/>
</td>
</tr>
<tr>
<td className="labelText">
{t("Last Name")}:
</td>
<td>
<input
onChange={
this
.onLastNameChange
}
/>
</td>
</tr>
<tr>
<td className="labelText">
Email:
</td>
<td>
<input
onChange={
this.onEmailChange
}
/>
</td>
</tr>
<tr>
<td className="labelText">
{t("User Id")}:
</td>
{editUserId}
</tr>
</tbody>
</Table>
</Card>
</Card.Body>
{bottomWell}
</div>
</Card>
</div>
</Collapse>
);
}
}

12
src/TableTab.js
Unescape View File

@ -10,7 +10,7 @@ import matchSorter from "match-sorter";
import SearchBox from "./SearchBox";
import Table from "./Table";
export default ({ data, columns, initialState, Button }) => {
export default ({ data, columns, initialState, button, panel }) => {
const globalFilter = useMemo(() => fuzzyTextFilterFn, []);
const tableInstance = useTable(
@ -33,11 +33,13 @@ export default ({ data, columns, initialState, Button }) => {
<>
<div className="d-flex justify-content-between p-3">
<SearchBox {...{ tableInstance }} />
<Button />
{button}
</div>
<div className="tableContainer px-3">
<Table {...{ tableInstance }} />
{/* <RightPanel /> */}
<div className="tableTabBody">
<div className="tableContainer px-3">
<Table {...{ tableInstance }} />
</div>
{panel}
</div>
</>
);

30
src/UsersTab.js
Unescape View File

@ -1,15 +1,18 @@
import React, { useEffect, useMemo, useState } from "react";
import React, { useCallback, useEffect, useMemo, useState } from "react";
import { useGet } from "restful-react";
import { withTranslation } from "react-i18next";
import Button from "./NewUserButton"
import Button from "./NewUserButton";
import Date from "./Date";
import DelayedSpinner from "./DelayedSpinner";
import TableTab, { compareLowerCase } from "./TableTab";
import CreateUserRightPanel from "./CreateUserRightPanel";
export default withTranslation()(({ t }) => {
const [userList, setUserList] = useState(null);
const [intervalId, setIntervalId] = useState(null);
const [rightPanel, setRightPanel] = useState();
const { data, refetch } = useGet({
path: "watcha_user_list",
@ -73,8 +76,29 @@ export default withTranslation()(({ t }) => {
[]
);
const onClick = useCallback(
() => setRightPanel("CreateUserRightPanel"),
[]
);
const button = useMemo(() => <Button {...{ onClick }} />, [onClick]);
const isEmailAvailable = useCallback(
() => value => userList.some(user => user.emailAddress === value),
[userList]
);
const onClose = useCallback(() => setRightPanel(), []);
const panel = rightPanel === "CreateUserRightPanel" && (
<CreateUserRightPanel {...{ isEmailAvailable, onClose }} />
);
return userList ? (
<TableTab data={userList} {...{ columns, initialState, Button }} />
<TableTab
data={userList}
{...{ columns, initialState, button, panel }}
/>
) : (
<DelayedSpinner />
);

Write Preview
Loading…
Cancel
Save