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

remove tooltip from admin dash in small

Browse Source
This commit is contained in:
Roland Osborne 2022-09-06 11:23:04 -07:00
parent a912ceadd7
commit aebd74e8df
4 changed files with 104 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
net/web/src/admin/dashboard/Dashboard.jsx
View File

@ -22,6 +22,28 @@ export function Dashboard({ token, config, logout }) {
<div class="container">
<div class="header">
<div class="label">Accounts</div>
{ state.display === 'small' && (
<>
<div class="settings">
<SettingsButton type="text" size="small" icon={<ReloadOutlined />}
onClick={() => actions.getAccounts()}></SettingsButton>
</div>
<div class="settings">
<SettingsButton type="text" size="small" icon={<SettingOutlined />}
onClick={() => actions.setShowSettings(true)}></SettingsButton>
</div>
<div class="settings">
<SettingsButton type="text" size="small" icon={<LogoutOutlined />}
onClick={() => logout()}></SettingsButton>
</div>
<div class="add">
<AddButton type="text" size="large" icon={<UserAddOutlined />}
loading={state.createBusy} onClick={() => actions.setCreateLink()}></AddButton>
</div>
</>
)}
{ state.display !== 'small' && (
<>
<div class="settings">
<Tooltip placement="topRight" title="Reload Accounts">
<SettingsButton type="text" size="small" icon={<ReloadOutlined />}
@ -46,6 +68,8 @@ export function Dashboard({ token, config, logout }) {
loading={state.createBusy} onClick={() => actions.setCreateLink()}></AddButton>
</Tooltip>
</div>
</>
)}
</div>
<div class="body">

50
net/web/src/admin/dashboard/accountItem/AccountItem.jsx
View File

@ -23,23 +23,6 @@ export function AccountItem({ token, item, remove }) {
navigator.clipboard.writeText(value);
};
const Enable = () => {
if (state.disabled) {
return (
<Tooltip placement="topLeft" title="Enable Account">
<EnableButton type="text" size="large" icon={<CheckCircleOutlined />}
loading={state.statusBusy} onClick={() => actions.setStatus(false)}></EnableButton>
</Tooltip>
)
}
return (
<Tooltip placement="topLeft" title="Disable Account">
<DisableButton type="text" size="large" icon={<CloseCircleOutlined />}
loading={state.statusBusy} onClick={() => actions.setStatus(true)}></DisableButton>
</Tooltip>
)
}
const accessLink = () => {
return window.location.origin + '/#/login?access=' + state.accessToken;
};
@ -54,15 +37,46 @@ export function AccountItem({ token, item, remove }) {
<div class="guid">{ state.guid }</div>
</div>
<div class="control">
{ state.display === 'small' && (
<>
<ResetButton type="text" size="large" icon={<UnlockOutlined />}
loading={state.accessBusy} onClick={() => actions.setAccessLink()}></ResetButton>
{ state.disabled && (
<EnableButton type="text" size="large" icon={<CheckCircleOutlined />}
loading={state.statusBusy} onClick={() => actions.setStatus(false)}></EnableButton>
)}
{ !state.disabled && (
<DisableButton type="text" size="large" icon={<CloseCircleOutlined />}
loading={state.statusBusy} onClick={() => actions.setStatus(true)}></DisableButton>
)}
<DeleteButton type="text" size="large" icon={<UserDeleteOutlined />}
loading={state.removeBusy} onClick={removeAccount}></DeleteButton>
</>
)}
{ state.display !== 'small' && (
<>
<Tooltip placement="topLeft" title="Account Login Link">
<ResetButton type="text" size="large" icon={<UnlockOutlined />}
loading={state.accessBusy} onClick={() => actions.setAccessLink()}></ResetButton>
</Tooltip>
<Enable />
{ state.disabled && (
<Tooltip placement="topLeft" title="Enable Account">
<EnableButton type="text" size="large" icon={<CheckCircleOutlined />}
loading={state.statusBusy} onClick={() => actions.setStatus(false)}></EnableButton>
</Tooltip>
)}
{ !state.disabled && (
<Tooltip placement="topLeft" title="Disable Account">
<DisableButton type="text" size="large" icon={<CloseCircleOutlined />}
loading={state.statusBusy} onClick={() => actions.setStatus(true)}></DisableButton>
</Tooltip>
)}
<Tooltip placement="topLeft" title="Delete Account">
<DeleteButton type="text" size="large" icon={<UserDeleteOutlined />}
loading={state.removeBusy} onClick={removeAccount}></DeleteButton>
</Tooltip>
</>
)}
</div>
<Modal title="Access Account Link" visible={state.showAccess} centered width="fitContent"
footer={[ <Button type="primary" onClick={() => actions.setShowAccess(false)}>OK</Button> ]}

9
net/web/src/admin/dashboard/accountItem/useAccountItem.hook.js
View File

@ -1,7 +1,8 @@
import { useState, useEffect } from 'react';
import { useContext, useState, useEffect } from 'react';
import { getAccountImageUrl } from 'api/getAccountImageUrl';
import { setAccountStatus } from 'api/setAccountStatus';
import { addAccountAccess } from 'api/addAccountAccess';
import { ViewportContext } from 'context/ViewportContext';
export function useAccountItem(token, item, remove) {
@ -12,6 +13,8 @@ export function useAccountItem(token, item, remove) {
showAccess: false,
});
const viewport = useContext(ViewportContext);
const updateState = (value) => {
setState((s) => ({ ...s, ...value }));
}
@ -28,6 +31,10 @@ export function useAccountItem(token, item, remove) {
});
}, [token, item]);
useEffect(() => {
updateState({ display: viewport.state.display });
}, [viewport]);
const actions = {
setAccessLink: async () => {
if (!state.accessBusy) {

9
net/web/src/admin/dashboard/useDashboard.hook.js
View File

@ -1,8 +1,9 @@
import { useState, useEffect } from 'react';
import { useContext, useState, useEffect } from 'react';
import { setNodeConfig } from 'api/setNodeConfig';
import { getNodeAccounts } from 'api/getNodeAccounts';
import { removeAccount } from 'api/removeAccount';
import { addAccountCreate } from 'api/addAccountCreate';
import { ViewportContext } from 'context/ViewportContext';
export function useDashboard(token, config) {
@ -21,6 +22,8 @@ export function useDashboard(token, config) {
showCreate: false,
});
const viewport = useContext(ViewportContext);
const updateState = (value) => {
setState((s) => ({ ...s, ...value }));
}
@ -109,6 +112,10 @@ export function useDashboard(token, config) {
},
};
useEffect(() => {
updateState({ display: viewport.state.display });
}, [viewport]);
useEffect(() => {
const { accountStorage, domain, keyType, enableImage, enableAudio, enableVideo } = config;
updateState({ domain, accountStorage: Math.ceil(accountStorage / 1073741824), keyType,