Start to show the list of families
This commit is contained in:
parent
1a4a7985e0
commit
947a3ad274
@ -46,4 +46,14 @@ export class FamilyApi {
|
|||||||
return JoinFamilyResult.Error;
|
return JoinFamilyResult.Error;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
/**
|
||||||
|
* Get the list of families
|
||||||
|
*/
|
||||||
|
static async GetList():Promise<Family[]> {
|
||||||
|
return (await APIClient.exec({
|
||||||
|
method: "GET",
|
||||||
|
uri: "/family/list",
|
||||||
|
|
||||||
|
})).data
|
||||||
|
}}
|
||||||
|
@ -1,9 +1,11 @@
|
|||||||
|
import AddIcon from "@mui/icons-material/Add";
|
||||||
|
import ConfirmationNumberIcon from "@mui/icons-material/ConfirmationNumber";
|
||||||
|
import { Button, IconButton, Tooltip, Typography } from "@mui/material";
|
||||||
import React from "react";
|
import React from "react";
|
||||||
import { AsyncWidget } from "../widgets/AsyncWidget";
|
import { Family, FamilyApi } from "../api/FamilyApi";
|
||||||
import { Family } from "../api/FamilyApi";
|
|
||||||
import { Button, Typography } from "@mui/material";
|
|
||||||
import { CreateFamilyDialog } from "../dialogs/CreateFamilyDialog";
|
import { CreateFamilyDialog } from "../dialogs/CreateFamilyDialog";
|
||||||
import { JoinFamilyDialog } from "../dialogs/JoinFamilyDialog";
|
import { JoinFamilyDialog } from "../dialogs/JoinFamilyDialog";
|
||||||
|
import { AsyncWidget } from "../widgets/AsyncWidget";
|
||||||
|
|
||||||
export function FamiliesListRoute(): React.ReactElement {
|
export function FamiliesListRoute(): React.ReactElement {
|
||||||
const loadKey = React.useRef(1);
|
const loadKey = React.useRef(1);
|
||||||
@ -14,8 +16,7 @@ export function FamiliesListRoute(): React.ReactElement {
|
|||||||
const [joinFamily, setJoinFamily] = React.useState(false);
|
const [joinFamily, setJoinFamily] = React.useState(false);
|
||||||
|
|
||||||
const load = async () => {
|
const load = async () => {
|
||||||
// TODO : implement
|
setFamilies(await FamilyApi.GetList());
|
||||||
setFamilies([]);
|
|
||||||
};
|
};
|
||||||
|
|
||||||
const reload = () => {
|
const reload = () => {
|
||||||
@ -44,7 +45,11 @@ export function FamiliesListRoute(): React.ReactElement {
|
|||||||
onRequestJoinFamily={onRequestJoinFamily}
|
onRequestJoinFamily={onRequestJoinFamily}
|
||||||
/>
|
/>
|
||||||
) : (
|
) : (
|
||||||
<HasFamilysWidget onReload={reload} families={families!} />
|
<HasFamilysWidget
|
||||||
|
onRequestCreateFamily={onRequestCreateFamily}
|
||||||
|
onRequestJoinFamily={onRequestJoinFamily}
|
||||||
|
families={families!}
|
||||||
|
/>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
{/** Create family dialog anchor */}
|
{/** Create family dialog anchor */}
|
||||||
@ -122,7 +127,27 @@ function NoFamilyButton(p: {
|
|||||||
|
|
||||||
function HasFamilysWidget(p: {
|
function HasFamilysWidget(p: {
|
||||||
families: Family[];
|
families: Family[];
|
||||||
onReload: () => void;
|
onRequestCreateFamily: () => void;
|
||||||
|
onRequestJoinFamily: () => void;
|
||||||
}): React.ReactElement {
|
}): React.ReactElement {
|
||||||
return <p>todo has families</p>;
|
return (
|
||||||
|
<div style={{ width: "100%", maxWidth: "800px", margin: "20px auto" }}>
|
||||||
|
<div style={{ display: "flex", justifyContent: "space-between" }}>
|
||||||
|
<Typography variant="h4">Mes familles</Typography>
|
||||||
|
<div>
|
||||||
|
<IconButton aria-label="create" onClick={p.onRequestCreateFamily}>
|
||||||
|
<Tooltip title="Créer une nouvelle famille">
|
||||||
|
<AddIcon />
|
||||||
|
</Tooltip>
|
||||||
|
</IconButton>
|
||||||
|
<IconButton aria-label="create" onClick={p.onRequestJoinFamily}>
|
||||||
|
<Tooltip title="Rejoindre une famille">
|
||||||
|
<ConfirmationNumberIcon />
|
||||||
|
</Tooltip>
|
||||||
|
</IconButton>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
TODO list of families
|
||||||
|
</div>
|
||||||
|
);
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user