martin/databag
1
0
Fork 0
mirror of https://github.com/balzack/databag.git synced 2025-02-14 12:39:17 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

rendering accounts in admin dashboard

Browse Source
This commit is contained in:
Roland Osborne 2022-06-07 00:57:18 -07:00
parent ab9935fac7
commit 29e93e494d
8 changed files with 150 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
net/web/src/Admin/Admin.jsx
View File

@ -44,7 +44,7 @@ export function Admin() {
return (
<AdminWrapper>
<Dashboard password={state.token} config={state.config} />
<Dashboard token={state.token} config={state.config} />
</AdminWrapper>
)
}

34
net/web/src/Admin/Dashboard/AccountItem/AccountItem.jsx
View File

@ -1,4 +1,34 @@
export function AccountItem() {
return <div>ACCOUNT</div>
import { Avatar } from 'avatar/Avatar';
import { AccountItemWrapper, DeleteButton, EnableButton, DisableButton, ResetButton } from './AccountItem.styled';
import { useAccountItem } from './useAccountItem.hook';
import { UserDeleteOutlined, UnlockOutlined, CloseCircleOutlined, CheckCircleOutlined } from '@ant-design/icons';
export function AccountItem({ token, item }) {
const { state, actions } = useAccountItem(token, item);
const Enable = () => {
if (state.disabled) {
return <EnableButton type="text" size="large" icon={<CloseCircleOutlined />}></EnableButton>
}
return <DisableButton type="text" size="large" icon={<CheckCircleOutlined />}></DisableButton>
}
return (
<AccountItemWrapper>
<div class="avatar">
<Avatar imageUrl={state.imageUrl} />
</div>
<div class="id">
<div class="handle">{ state.handle }</div>
<div class="guid">{ state.guid }</div>
</div>
<div class="control">
<ResetButton type="text" size="large" icon={<UnlockOutlined />}></ResetButton>
<Enable />
<DeleteButton type="text" size="large" icon={<UserDeleteOutlined />}></DeleteButton>
</div>
</AccountItemWrapper>
);
}

66
net/web/src/Admin/Dashboard/AccountItem/AccountItem.styled.js Normal file
View File

@ -0,0 +1,66 @@
import { Button } from 'antd';
import styled from 'styled-components';
export const AccountItemWrapper = styled.div`
display: flex;
width: 100%;
flex-direction: row;
overflow: hidden;
padding-left: 16px;
padding-right: 16px;
padding-top: 2px;
padding-bottom: 2px;
border-bottom: 1px solid #eeeeee;
&:hover {
background-color: #eeeeee;
}
.avatar {
width: 32px;
height: 32px;
display: flex;
justify-content: center;
}
.id {
padding-left: 16px;
padding-right: 8px;
display: flex;
flex-direction: column;
flex-grow: 1;
.handle {
font-size: 0.8em;
font-weight: bold;
}
.guid {
font-size: 0.8em;
font-weight: bold;
}
.control {
flex-grow: 1;
display: flex;
justify-content: flex-end;
align-items: center;
}
}
`;
export const EnableButton = styled(Button)`
color: orange;
`;
export const DisableButton = styled(Button)`
color: orange;
`;
export const ResetButton = styled(Button)`
color: #1890ff;
`;
export const DeleteButton = styled(Button)`
color: red;
`

28
net/web/src/Admin/Dashboard/AccountItem/useAccountItem.hook.js Normal file
View File

@ -0,0 +1,28 @@
import { useContext, useState, useEffect } from 'react';
import { getAccountImageUrl } from 'api/getAccountImageUrl';
export function useAccountItem(token, item) {
const [state, setState] = useState({
});
const updateState = (value) => {
setState((s) => ({ ...s, ...value }));
}
useEffect(() => {
updateState({
disabled: false,
accountId: item?.accountId,
name: item?.name,
guid: item?.guid,
handle: item?.handle,
imageUrl: item?.imageSet ? getAccountImageUrl(token, item?.accountId) : null,
});
}, []);
const actions = {
};
return { state, actions };
}

8
net/web/src/Admin/Dashboard/Dashboard.jsx
View File

@ -4,9 +4,9 @@ import { SettingOutlined, UserAddOutlined, ReloadOutlined } from '@ant-design/ic
import { useDashboard } from './useDashboard.hook';
import { AccountItem } from './AccountItem/AccountItem';
export function Dashboard({ password, config }) {
export function Dashboard({ token, config }) {
const { state, actions } = useDashboard(password, config);
const { state, actions } = useDashboard(token, config);
return (
<DashboardWrapper>
@ -33,12 +33,12 @@ export function Dashboard({ password, config }) {
itemLayout="horizontal"
dataSource={state.accounts}
loading={state.loading}
renderItem={item => (<AccountItem item={item} />)}
renderItem={item => (<AccountItem token={token} item={item} />)}
/>
</div>
</div>
<Modal title="Settings" visible={state.showSettings} centered
<Modal title="Settings" visible={state.showSettings} centered
okText="Save" onOk={() => actions.setSettings()} onCancel={() => actions.setShowSettings(false)}>
<SettingsLayout direction="vertical">
<div class="host">

4
net/web/src/Admin/Dashboard/Dashboard.styled.js
View File

@ -15,7 +15,8 @@ export const DashboardWrapper = styled.div`
flex-direction: column;
padding: 16px;
border-radius: 4px;
max-width: 500px;
min-width: 800px;
max-width: 900px;
width: 50%;
max-height: 80%;
@ -28,6 +29,7 @@ export const DashboardWrapper = styled.div`
}
.body {
padding-top: 8px;
min-height: 0;
overflow: auto;
}

15
net/web/src/Admin/Dashboard/useDashboard.hook.js
View File

@ -2,7 +2,7 @@ import { useState, useEffect } from 'react';
import { setNodeConfig } from 'api/setNodeConfig';
import { getNodeAccounts } from 'api/getNodeAccounts';
export function useDashboard(password, config) {
export function useDashboard(token, config) {
const [state, setState] = useState({
host: "",
@ -31,7 +31,7 @@ export function useDashboard(password, config) {
if (!state.busy) {
updateState({ busy: true });
try {
await setNodeConfig(password,
await setNodeConfig(token,
{ ...state.config, domain: state.host, accountStorage: state.storage * 1073741824 });
updateState({ showSettings: false });
}
@ -46,7 +46,16 @@ export function useDashboard(password, config) {
if (!state.loading) {
updateState({ loading: true });
try {
let accounts = await getNodeAccounts(password);
let accounts = await getNodeAccounts(token);
accounts.sort((a, b) => {
if (a.handle < b.handle) {
return -1;
}
if (a.handle > b.handle) {
return 1;
}
return 0;
});
updateState({ accounts });
}
catch(err) {

4
net/web/src/api/getAccountImageUrl.js Normal file
View File

@ -0,0 +1,4 @@
export function getAccountImageUrl(token, accountId) {
return `/admin/accounts/${accountId}/image?token=${token}`
}