Add navigation to families screen
This commit is contained in:
parent
09f1584d18
commit
6aceda7fe7
@ -1,6 +1,6 @@
|
||||
import { APIClient } from "./ApiClient";
|
||||
|
||||
export interface Family {
|
||||
interface FamilyAPI {
|
||||
user_id: number;
|
||||
family_id: number;
|
||||
name: string;
|
||||
@ -11,6 +11,49 @@ export interface Family {
|
||||
count_admins: number;
|
||||
}
|
||||
|
||||
export class Family implements FamilyAPI {
|
||||
user_id: number;
|
||||
family_id: number;
|
||||
name: string;
|
||||
time_create: number;
|
||||
is_admin: boolean;
|
||||
invitation_code: string;
|
||||
count_members: number;
|
||||
count_admins: number;
|
||||
|
||||
constructor(f: FamilyAPI) {
|
||||
this.user_id = f.user_id;
|
||||
this.family_id = f.family_id;
|
||||
this.name = f.name;
|
||||
this.time_create = f.time_create;
|
||||
this.is_admin = f.is_admin;
|
||||
this.invitation_code = f.invitation_code;
|
||||
this.count_members = f.count_members;
|
||||
this.count_admins = f.count_admins;
|
||||
}
|
||||
|
||||
/**
|
||||
* Check if the current user user can leave a family
|
||||
*/
|
||||
get CanLeave(): boolean {
|
||||
return !this.is_admin || this.count_admins > 1;
|
||||
}
|
||||
|
||||
/**
|
||||
* Get application URL for family
|
||||
*/
|
||||
URL(uri?: string): string {
|
||||
return `/family/${this.family_id}/${uri ?? ""}`;
|
||||
}
|
||||
|
||||
/**
|
||||
* Get base family URL
|
||||
*/
|
||||
get BaseURL(): string {
|
||||
return this.URL("");
|
||||
}
|
||||
}
|
||||
|
||||
export enum JoinFamilyResult {
|
||||
TooManyRequests,
|
||||
InvalidCode,
|
||||
@ -65,14 +108,7 @@ export class FamilyApi {
|
||||
method: "GET",
|
||||
uri: "/family/list",
|
||||
})
|
||||
).data;
|
||||
}
|
||||
|
||||
/**
|
||||
* Check if the current user user can leave a family
|
||||
*/
|
||||
static CanLeaveFamily(f: Family): boolean {
|
||||
return !f.is_admin || f.count_admins > 1;
|
||||
).data.map((f: FamilyAPI) => new Family(f));
|
||||
}
|
||||
|
||||
/**
|
||||
|
@ -11,13 +11,15 @@ import {
|
||||
Typography,
|
||||
} from "@mui/material";
|
||||
import React from "react";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import { Family, FamilyApi } from "../api/FamilyApi";
|
||||
import { CreateFamilyDialog } from "../dialogs/CreateFamilyDialog";
|
||||
import { JoinFamilyDialog } from "../dialogs/JoinFamilyDialog";
|
||||
import { AsyncWidget } from "../widgets/AsyncWidget";
|
||||
import { TimeWidget } from "../widgets/TimeWidget";
|
||||
import { useConfirm } from "../widgets/ConfirmDialogProvider";
|
||||
import { useAlert } from "../widgets/AlertDialogProvider";
|
||||
import { AsyncWidget } from "../widgets/AsyncWidget";
|
||||
import { useConfirm } from "../widgets/ConfirmDialogProvider";
|
||||
import { RouterLink } from "../widgets/RouterLink";
|
||||
import { TimeWidget } from "../widgets/TimeWidget";
|
||||
|
||||
export function FamiliesListRoute(): React.ReactElement {
|
||||
const loadKey = React.useRef(1);
|
||||
@ -181,14 +183,14 @@ function FamilyCard(p: {
|
||||
f: Family;
|
||||
onFamilyLeft: () => void;
|
||||
}): React.ReactElement {
|
||||
const canLeave = FamilyApi.CanLeaveFamily(p.f);
|
||||
const confirm = useConfirm();
|
||||
const alert = useAlert();
|
||||
const navigate = useNavigate();
|
||||
|
||||
const leaveFamily = async () => {
|
||||
try {
|
||||
if (
|
||||
!canLeave ||
|
||||
!p.f.CanLeave ||
|
||||
!(await confirm.confirm(
|
||||
"Voulez-vous vraiment quitter la famille " + p.f.name + " ?"
|
||||
))
|
||||
@ -211,27 +213,30 @@ function FamilyCard(p: {
|
||||
return (
|
||||
<Card style={{ margin: "5px" }}>
|
||||
<CardActionArea>
|
||||
<CardContent>
|
||||
<Typography gutterBottom variant="h5" component="div">
|
||||
{p.f.name}
|
||||
</Typography>
|
||||
<Typography variant="body2" color="text.secondary">
|
||||
{p.f.count_members === 1
|
||||
? "1 membre"
|
||||
: p.f.count_members + " membres"}{" "}
|
||||
<br />
|
||||
{p.f.count_admins === 1
|
||||
? "1 administrateur"
|
||||
: p.f.count_admins + " administrateurs"}
|
||||
<br />
|
||||
Famille créée il y a <TimeWidget time={p.f.time_create} />
|
||||
</Typography>
|
||||
</CardContent>
|
||||
{" "}
|
||||
<RouterLink to={p.f.BaseURL}>
|
||||
<CardContent>
|
||||
<Typography gutterBottom variant="h5" component="div">
|
||||
{p.f.name}
|
||||
</Typography>
|
||||
<Typography variant="body2" color="text.secondary">
|
||||
{p.f.count_members === 1
|
||||
? "1 membre"
|
||||
: p.f.count_members + " membres"}{" "}
|
||||
<br />
|
||||
{p.f.count_admins === 1
|
||||
? "1 administrateur"
|
||||
: p.f.count_admins + " administrateurs"}
|
||||
<br />
|
||||
Famille créée il y a <TimeWidget time={p.f.time_create} />
|
||||
</Typography>
|
||||
</CardContent>{" "}
|
||||
</RouterLink>
|
||||
</CardActionArea>
|
||||
<CardActions>
|
||||
<Tooltip
|
||||
title={
|
||||
canLeave
|
||||
p.f.CanLeave
|
||||
? "Quitter la famille"
|
||||
: "Vous ne pouvez pas quitter cette famille, pour la retirer de cette liste vous devez la supprimer."
|
||||
}
|
||||
@ -240,7 +245,7 @@ function FamilyCard(p: {
|
||||
<Button
|
||||
size="small"
|
||||
color="primary"
|
||||
disabled={!canLeave}
|
||||
disabled={!p.f.CanLeave}
|
||||
onClick={leaveFamily}
|
||||
>
|
||||
Quitter
|
||||
|
Loading…
Reference in New Issue
Block a user