Skip to content

Commit

Permalink
Merge pull request #382 from sinamics/link
Browse files Browse the repository at this point in the history 
UI Improvements
  • Loading branch information
@sinamics
sinamics authored Apr 14, 2024
2 parents 11ffd9c + 601ea8e commit 3672305
Show file tree
Hide file tree
Showing 5 changed files with 136 additions and 73 deletions.
5 changes: 3 additions & 2 deletions src/components/layouts/header.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import Image from "next/image";
import { globalSiteTitle } from "~/utils/global";
import { useSidebarStore } from "~/utils/store";
import ZtnetLogo from "docs/images/logo/ztnet_100x100.png";
import Link from "next/link";

const Themes = [
"light",
Expand All @@ -27,7 +28,7 @@ const Header = () => {
<header className="header bg-base-200 px-4 py-1 shadow-md shadow-base">
<div className="header-content flex flex-row items-center">
<div className="hidden md:inline-flex">
<a href="#" className="inline-flex flex-row items-center gap-2">
<Link href="/network" className="inline-flex flex-row items-center gap-2">
<Image
style={{ width: 25, height: 25 }}
alt="ztnet logo"
Expand All @@ -37,7 +38,7 @@ const Header = () => {
<span className="ml-1 text-2xl font-bold uppercase leading-10 text-accent">
{globalSiteTitle}
</span>
</a>
</Link>
</div>
<div className="md:pl-12 flex items-center pt-1">
<label className={`${open ? "swap-active" : ""} swap swap-rotate`}>
Expand Down
2 changes: 1 addition & 1 deletion src/components/layouts/layout.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -103,7 +103,7 @@ export const LayoutOrganizationAuthenticated = ({ children }: Props): JSX.Elemen
openChats.includes(orgId) ? "mr-72" : ""
}`}
>
<div className="px-5 lg:px-24 space-y-5 pt-10">
<div className="px-5 lg:px-10 space-y-5 pt-10">
<OrgNavBar />
{children}
{/* Logs Footer */}
Expand Down
142 changes: 102 additions & 40 deletions src/components/networkByIdPage/table/memberHeaderColumns.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ import {
useTrpcApiErrorHandler,
useTrpcApiSuccessHandler,
} from "~/hooks/useTrpcApiHandler";
import cn from "classnames";

enum ConnectionStatus {
Offline = 0,
Expand Down Expand Up @@ -130,7 +131,12 @@ export const MemberHeaderColumns = ({ nwid, central = false, organizationId }: I
},
{ enabled: !!nwid },
);

const { mutate: stashUser } = api.networkMember.stash.useMutation({
onSuccess: () => refetchNetworkById(),
});
const { mutate: deleteMember } = api.networkMember.delete.useMutation({
onSuccess: () => refetchNetworkById(),
});
const { mutate: updateMember } = api.networkMember.Update.useMutation({
onError: handleApiError,
onSuccess: handleApiSuccess({ actions: [refetchNetworkById] }),
Expand Down Expand Up @@ -160,46 +166,70 @@ export const MemberHeaderColumns = ({ nwid, central = false, organizationId }: I
header: () => <span>{c("header.authorized")}</span>,
id: "authorized",
cell: ({ getValue, row: { original } }) => {
// const options = [
// original?.activeBridge ? (
// <span className="text-sm text-primary tracking-tighter">
// <Br />
// </span>
// ) : null,
// original?.noAutoAssignIps ? <Aa /> : null,
// ]
// .filter(Boolean)
// .reduce(
// (acc, elem, index) => (
// <>
// {acc}
// {index > 0 ? "" : ""}
// {elem}
// </>
// ),
// null,
// );
return (
<label className="label cursor-pointer justify-center">
<input
type="checkbox"
checked={getValue()}
onChange={(event) => {
const authorized = event.target.checked;
if (me?.options?.deAuthorizeWarning && !authorized) {
callModal({
title: "Warning",
description: "Are you sure you want to deauthorize this member?",
yesAction: () => {
updateMember(
{
nwid,
memberId: original.id,
central,
organizationId,
updateParams: { authorized },
},
{ onSuccess: () => void refetchNetworkById() },
);
},
});
} else {
updateMember(
{
nwid,
memberId: original.id,
central,
organizationId,
updateParams: { authorized: event.target.checked },
},
{ onSuccess: () => void refetchNetworkById() },
);
}
}}
className="checkbox-success checkbox checkbox-xs sm:checkbox-sm"
/>
</label>
<span className="flex items-center gap-2">
<label className="label cursor-pointer justify-center">
{/* add a letter B if bridge has been enabled */}

<input
type="checkbox"
checked={getValue()}
onChange={(event) => {
const authorized = event.target.checked;
if (me?.options?.deAuthorizeWarning && !authorized) {
callModal({
title: "Warning",
description: "Are you sure you want to deauthorize this member?",
yesAction: () => {
updateMember(
{
nwid,
memberId: original.id,
central,
organizationId,
updateParams: { authorized },
},
{ onSuccess: () => void refetchNetworkById() },
);
},
});
} else {
updateMember(
{
nwid,
memberId: original.id,
central,
organizationId,
updateParams: { authorized: event.target.checked },
},
{ onSuccess: () => void refetchNetworkById() },
);
}
}}
className="checkbox-success checkbox checkbox-xs sm:checkbox-sm"
/>
</label>
{/* {options} */}
</span>
);
},
}),
Expand Down Expand Up @@ -420,6 +450,38 @@ export const MemberHeaderColumns = ({ nwid, central = false, organizationId }: I
>
{b("options")}
</button>
{central ? (
<button
onClick={() =>
deleteMember({
central,
id: original.id,
nwid: original.nwid,
})
}
className="btn btn-error btn-outline btn-xs rounded-sm"
>
{b("delete")}
</button>
) : (
<button
onClick={() =>
stashUser(
{
nwid,
id: original.id,
},
{ onSuccess: () => void refetchNetworkById() },
)
}
className={cn("btn btn-outline btn-xs rounded-sm", {
"btn-warning": !central,
"btn-error": central,
})}
>
{b("stash")}
</button>
)}
</div>
);
},
Expand Down
26 changes: 13 additions & 13 deletions src/pages/central/[id].tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -91,7 +91,7 @@ const CentralNetworkById = ({ orgIds }) => {
return (
<div>
<HeadSection title={pageTitle} />
<div className="w-5/5 mx-auto flex flex-row flex-wrap justify-between space-y-10 p-4 text-sm sm:w-5/6 sm:p-10 md:text-base xl:space-y-0">
<div className="mx-auto flex flex-row flex-wrap justify-between space-y-10 p-4 text-sm sm:p-10 md:text-base xl:space-y-0">
<div className="grid grid-cols-1 xl:grid-cols-[1fr,auto,1fr] gap-10">
<div className="flex flex-col space-y-3 sm:space-y-0">
<div className="flex flex-col justify-between sm:flex-row">
Expand Down Expand Up @@ -127,7 +127,7 @@ const CentralNetworkById = ({ orgIds }) => {
</div>
</div>
</div>
<div className="w-5/5 mx-auto flex px-4 text-sm sm:w-5/6 sm:px-10 md:text-base">
<div className="mx-auto flex px-4 text-sm sm:px-10 md:text-base">
<div className="flex flex-col justify-between space-y-3 whitespace-nowrap lg:flex-row lg:space-x-3 lg:space-y-0">
<div>
<span className="text-muted font-medium">{t("networkStart")}</span>{" "}
Expand Down Expand Up @@ -161,10 +161,10 @@ const CentralNetworkById = ({ orgIds }) => {
</div>
</div>
</div>
<div className="w-5/5 divider mx-auto flex px-4 py-4 text-sm sm:w-5/6 sm:px-10 md:text-base">
<div className="divider mx-auto flex px-4 py-4 text-sm sm:px-10 md:text-base">
{t("networkSettings")}
</div>
<div className="w-5/5 mx-auto grid grid-cols-1 space-y-3 px-4 py-4 text-sm sm:w-5/6 sm:px-10 md:text-base xl:flex xl:space-y-0">
<div className="mx-auto grid grid-cols-1 space-y-3 px-4 py-4 text-sm sm:px-10 md:text-base xl:flex xl:space-y-0">
{/* Ipv4 assignment */}
<div className="w-6/6 xl:w-3/6">
<NetworkIpAssignment central />
Expand All @@ -177,7 +177,7 @@ const CentralNetworkById = ({ orgIds }) => {
<NettworkRoutes central />
</div>
</div>
<div className="w-5/5 mx-auto grid grid-cols-1 space-y-3 px-4 py-4 text-sm sm:w-5/6 sm:px-10 md:text-base xl:flex xl:space-y-0">
<div className="mx-auto grid grid-cols-1 space-y-3 px-4 py-4 text-sm sm:px-10 md:text-base xl:flex xl:space-y-0">
{/* Ipv4 assignment */}
<div className="w-6/6 xl:w-3/6">
{" "}
Expand All @@ -191,10 +191,10 @@ const CentralNetworkById = ({ orgIds }) => {
<NetworkMulticast central />
</div>
</div>
<div className="w-5/5 divider mx-auto flex px-4 py-4 text-sm sm:w-5/6 sm:px-10 md:text-base">
<div className="divider mx-auto flex px-4 py-4 text-sm sm:px-10 md:text-base">
{t("networkMembers")}
</div>
<div className="w-5/5 mx-auto w-full px-4 py-4 text-sm sm:w-5/6 sm:px-10 md:text-base">
<div className="mx-auto w-full px-4 py-4 text-sm sm:px-10 md:text-base">
{members?.length ? (
<div className="membersTable-wrapper">
<NetworkMembersTable nwid={network.id} central={true} />
Expand Down Expand Up @@ -266,14 +266,14 @@ const CentralNetworkById = ({ orgIds }) => {
</div>
)}
</div>
<div className="w-5/5 mx-auto grid grid-cols-1 space-y-3 px-4 py-4 text-sm sm:w-5/6 sm:px-10 md:text-base xl:flex xl:space-y-0">
<div className="mx-auto grid grid-cols-1 space-y-3 px-4 py-4 text-sm sm:px-10 md:text-base xl:flex xl:space-y-0">
{/* Ipv4 assignment */}
<div className="flex w-full flex-wrap space-x-0 space-y-5 xl:space-x-5 xl:space-y-0">
<InviteMemberByMail />
<AddMemberById central />
</div>
</div>
{/* <div className="w-5/5 mx-auto w-full px-4 py-4 text-sm sm:w-5/6 sm:px-10 md:text-base">
{/* <div className="mx-auto w-full px-4 py-4 text-sm sm:px-10 md:text-base">
<div className="mb-4 md:mb-0">
{networkById?.zombieMembers?.length > 0 ? (
<>
Expand All @@ -298,17 +298,17 @@ const CentralNetworkById = ({ orgIds }) => {
) : null}
</div>
</div> */}
<div className="w-5/5 mx-auto flex px-4 py-4 text-sm sm:w-5/6 sm:px-10 md:text-base">
<div className="mx-auto flex px-4 py-4 text-sm sm:px-10 md:text-base">
<NetworkHelpText />
</div>

<div className="w-5/5 mx-auto flex px-4 py-4 text-sm sm:w-5/6 sm:px-10 md:text-base">
<div className="mx-auto flex px-4 py-4 text-sm sm:px-10 md:text-base">
<CentralFlowRules />
</div>
<div className="w-5/5 divider mx-auto flex px-4 py-4 text-sm sm:w-5/6 sm:px-10 md:text-base">
<div className="divider mx-auto flex px-4 py-4 text-sm sm:px-10 md:text-base">
Network Actions
</div>
<div className="w-5/5 mx-auto px-4 py-4 text-sm sm:w-5/6 sm:px-10 md:flex-row md:text-base">
<div className="mx-auto px-4 py-4 text-sm sm:px-10 md:flex-row md:text-base">
<div className="flex items-end md:justify-end">
<button
onClick={() =>
Expand Down
Loading

0 comments on commit 3672305

Please sign in to comment.