From ef6b45d7a1706bf35b45c0e25f08471cbf8ca29d Mon Sep 17 00:00:00 2001 From: Aleksei Chichenkov <39502310+DanSylvest@users.noreply.github.com> Date: Tue, 26 Nov 2024 22:02:30 +0300 Subject: [PATCH] feat(Map): Rework design of checkboxes in Signatures settings dialog. Rework design of checkboxes in Routes settings dialog. Now signature will deleteing by Delete hotkey was Backspace. Fixed size of group column in signatures list. Instead Updated column will be Added, updated may be turn on in settings. (#76) Co-authored-by: achichenkov --- .../RoutesSettingsDialog.tsx | 17 ++-- .../SystemSignatureSettingsDialog.tsx | 38 +++----- .../SystemSignatures/SystemSignatures.tsx | 4 +- .../SystemSignaturesContent.tsx | 94 ++++++++++--------- .../widgets/SystemSignatures/renders/index.ts | 2 +- ...edTimeLeft.tsx => renderAddedTimeLeft.tsx} | 2 +- assets/js/hooks/Mapper/hooks/useHotkey.ts | 8 +- 7 files changed, 81 insertions(+), 84 deletions(-) rename assets/js/hooks/Mapper/components/mapInterface/widgets/SystemSignatures/renders/{renderInsertedTimeLeft.tsx => renderAddedTimeLeft.tsx} (80%) diff --git a/assets/js/hooks/Mapper/components/mapInterface/widgets/RoutesWidget/RoutesSettingsDialog/RoutesSettingsDialog.tsx b/assets/js/hooks/Mapper/components/mapInterface/widgets/RoutesWidget/RoutesSettingsDialog/RoutesSettingsDialog.tsx index 77ca944a..412691c0 100644 --- a/assets/js/hooks/Mapper/components/mapInterface/widgets/RoutesWidget/RoutesSettingsDialog/RoutesSettingsDialog.tsx +++ b/assets/js/hooks/Mapper/components/mapInterface/widgets/RoutesWidget/RoutesSettingsDialog/RoutesSettingsDialog.tsx @@ -1,12 +1,11 @@ import { Dialog } from 'primereact/dialog'; import { useCallback, useEffect, useRef, useState } from 'react'; import { Button } from 'primereact/button'; -import { WdCheckbox } from '@/hooks/Mapper/components/ui-kit'; import { RoutesType, useRouteProvider, } from '@/hooks/Mapper/components/mapInterface/widgets/RoutesWidget/RoutesProvider.tsx'; -import { CheckboxChangeEvent } from 'primereact/checkbox'; +import { PrettySwitchbox } from '@/hooks/Mapper/components/mapRootContent/components/MapSettings/components'; interface RoutesSettingsDialog { visible: boolean; @@ -38,8 +37,8 @@ export const RoutesSettingsDialog = ({ visible, setVisible }: RoutesSettingsDial currentData.current = data; const handleChangeEvent = useCallback( - (propName: keyof RoutesType) => (event: CheckboxChangeEvent) => { - optionsRef.current = { ...optionsRef.current, [propName]: event.checked }; + (propName: keyof RoutesType) => (event: boolean) => { + optionsRef.current = { ...optionsRef.current, [propName]: event }; updateKey(x => x + 1); }, [], @@ -71,14 +70,14 @@ export const RoutesSettingsDialog = ({ visible, setVisible }: RoutesSettingsDial setVisible(false); }} > -
-
+
+
{checkboxes.map(({ label, propName }) => ( - ))}
diff --git a/assets/js/hooks/Mapper/components/mapInterface/widgets/SystemSignatures/SystemSignatureSettingsDialog/SystemSignatureSettingsDialog.tsx b/assets/js/hooks/Mapper/components/mapInterface/widgets/SystemSignatures/SystemSignatureSettingsDialog/SystemSignatureSettingsDialog.tsx index eb61183f..df0f4351 100644 --- a/assets/js/hooks/Mapper/components/mapInterface/widgets/SystemSignatures/SystemSignatureSettingsDialog/SystemSignatureSettingsDialog.tsx +++ b/assets/js/hooks/Mapper/components/mapInterface/widgets/SystemSignatures/SystemSignatureSettingsDialog/SystemSignatureSettingsDialog.tsx @@ -1,9 +1,9 @@ import { Dialog } from 'primereact/dialog'; import { useCallback, useState } from 'react'; import { Button } from 'primereact/button'; -import { Checkbox } from 'primereact/checkbox'; import { TabPanel, TabView } from 'primereact/tabview'; import styles from './SystemSignatureSettingsDialog.module.scss'; +import { PrettySwitchbox } from '@/hooks/Mapper/components/mapRootContent/components/MapSettings/components'; export type Setting = { key: string; name: string; value: boolean; isFilter?: boolean }; @@ -41,8 +41,8 @@ export const SystemSignatureSettingsDialog = ({ }, [onSave, settings]); return ( - -
+ +
{filterSettings.map(setting => { return ( -
- handleSettingsChange(setting.key)} - /> - -
+ handleSettingsChange(setting.key)} + /> ); })}
@@ -72,16 +68,12 @@ export const SystemSignatureSettingsDialog = ({
{userSettings.map(setting => { return ( -
- handleSettingsChange(setting.key)} - /> - -
+ handleSettingsChange(setting.key)} + /> ); })}
diff --git a/assets/js/hooks/Mapper/components/mapInterface/widgets/SystemSignatures/SystemSignatures.tsx b/assets/js/hooks/Mapper/components/mapInterface/widgets/SystemSignatures/SystemSignatures.tsx index 5dff08ce..648b7956 100644 --- a/assets/js/hooks/Mapper/components/mapInterface/widgets/SystemSignatures/SystemSignatures.tsx +++ b/assets/js/hooks/Mapper/components/mapInterface/widgets/SystemSignatures/SystemSignatures.tsx @@ -22,10 +22,10 @@ import { useMapRootState } from '@/hooks/Mapper/mapRootProvider'; const SIGNATURE_SETTINGS_KEY = 'wanderer_system_signature_settings_v4_1'; export const SHOW_DESCRIPTION_COLUMN_SETTING = 'show_description_column_setting'; -export const SHOW_INSERTED_COLUMN_SETTING = 'show_inserted_column_setting'; +export const SHOW_UPDATED_COLUMN_SETTING = 'SHOW_UPDATED_COLUMN_SETTING'; const settings: Setting[] = [ - { key: SHOW_INSERTED_COLUMN_SETTING, name: 'Show Inserted Column', value: false, isFilter: false }, + { key: SHOW_UPDATED_COLUMN_SETTING, name: 'Show Updated Column', value: false, isFilter: false }, { key: SHOW_DESCRIPTION_COLUMN_SETTING, name: 'Show Description Column', value: false, isFilter: false }, { key: COSMIC_ANOMALY, name: 'Show Anomalies', value: true, isFilter: true }, { key: COSMIC_SIGNATURE, name: 'Show Cosmic Signatures', value: true, isFilter: true }, diff --git a/assets/js/hooks/Mapper/components/mapInterface/widgets/SystemSignatures/SystemSignaturesContent/SystemSignaturesContent.tsx b/assets/js/hooks/Mapper/components/mapInterface/widgets/SystemSignatures/SystemSignaturesContent/SystemSignaturesContent.tsx index da8ecf4e..e0280931 100644 --- a/assets/js/hooks/Mapper/components/mapInterface/widgets/SystemSignatures/SystemSignaturesContent/SystemSignaturesContent.tsx +++ b/assets/js/hooks/Mapper/components/mapInterface/widgets/SystemSignatures/SystemSignaturesContent/SystemSignaturesContent.tsx @@ -1,5 +1,4 @@ import { useMapRootState } from '@/hooks/Mapper/mapRootProvider'; -import { useClipboard } from '@/hooks/Mapper/hooks/useClipboard'; import { parseSignatures } from '@/hooks/Mapper/helpers'; import { Commands, OutCommand } from '@/hooks/Mapper/types/mapHandlers.ts'; import { WdTooltip, WdTooltipHandlers } from '@/hooks/Mapper/components/ui-kit'; @@ -22,10 +21,10 @@ import { getRowColorByTimeLeft, } from '@/hooks/Mapper/components/mapInterface/widgets/SystemSignatures/helpers'; import { + renderAddedTimeLeft, renderDescription, renderIcon, renderInfoColumn, - renderInsertedTimeLeft, renderUpdatedTimeLeft, } from '@/hooks/Mapper/components/mapInterface/widgets/SystemSignatures/renders'; import useLocalStorageState from 'use-local-storage-state'; @@ -36,7 +35,7 @@ import { WdTooltipWrapper } from '@/hooks/Mapper/components/ui-kit/WdTooltipWrap import { COSMIC_SIGNATURE } from '@/hooks/Mapper/components/mapInterface/widgets/SystemSignatures/SystemSignatureSettingsDialog'; import { SHOW_DESCRIPTION_COLUMN_SETTING, - SHOW_INSERTED_COLUMN_SETTING, + SHOW_UPDATED_COLUMN_SETTING, } from '@/hooks/Mapper/components/mapInterface/widgets/SystemSignatures'; type SystemSignaturesSortSettings = { sortField: string; @@ -44,7 +43,7 @@ type SystemSignaturesSortSettings = { }; const SORT_DEFAULT_VALUES: SystemSignaturesSortSettings = { - sortField: 'updated_at', + sortField: 'inserted_at', sortOrder: -1, }; @@ -80,11 +79,11 @@ export const SystemSignaturesContent = ({ const tableRef = useRef(null); const compact = useMaxWidth(tableRef, 260); const medium = useMaxWidth(tableRef, 380); + const refData = useRef({ selectable }); + refData.current = { selectable }; const tooltipRef = useRef(null); - const { clipboardContent } = useClipboard(); - const handleResize = useCallback(() => { if (tableRef.current) { const tableWidth = tableRef.current.offsetWidth; @@ -100,10 +99,7 @@ export const SystemSignaturesContent = ({ [settings], ); - const showInsertedColumn = useMemo( - () => settings.find(s => s.key === SHOW_INSERTED_COLUMN_SETTING)?.value, - [settings], - ); + const showUpdatedColumn = useMemo(() => settings.find(s => s.key === SHOW_UPDATED_COLUMN_SETTING)?.value, [settings]); const filteredSignatures = useMemo(() => { return signatures @@ -160,19 +156,26 @@ export const SystemSignaturesContent = ({ [outCommand, systemId], ); - const handleDeleteSelected = useCallback(async () => { - if (selectable) { - return; - } - if (selectedSignatures.length === 0) { - return; - } - const selectedSignaturesEveIds = selectedSignatures.map(x => x.eve_id); - await handleUpdateSignatures( - signatures.filter(x => !selectedSignaturesEveIds.includes(x.eve_id)), - false, - ); - }, [handleUpdateSignatures, selectable, signatures, selectedSignatures]); + const handleDeleteSelected = useCallback( + async (e: KeyboardEvent) => { + if (selectable) { + return; + } + if (selectedSignatures.length === 0) { + return; + } + + e.preventDefault(); + e.stopPropagation(); + + const selectedSignaturesEveIds = selectedSignatures.map(x => x.eve_id); + await handleUpdateSignatures( + signatures.filter(x => !selectedSignaturesEveIds.includes(x.eve_id)), + false, + ); + }, + [handleUpdateSignatures, selectable, signatures, selectedSignatures], + ); const handleSelectAll = useCallback(() => { setSelectedSignatures(signatures); @@ -201,12 +204,9 @@ export const SystemSignaturesContent = ({ [onSelect, selectable], ); - useHotkey(true, ['a'], handleSelectAll); - - useHotkey(false, ['Backspace'], handleDeleteSelected); - - useEffect(() => { - if (selectable) { + const handlePaste = async () => { + const clipboardContent = await navigator.clipboard.readText(); + if (refData.current.selectable) { return; } @@ -227,7 +227,12 @@ export const SystemSignaturesContent = ({ setParsedSignatures(newSignatures); setAskUser(true); } - }, [clipboardContent, selectable]); + }; + + useHotkey(true, ['a'], handleSelectAll); + useHotkey(true, ['v'], handlePaste); + + useHotkey(false, ['Delete'], handleDeleteSelected); useEffect(() => { if (!systemId) { @@ -330,7 +335,7 @@ export const SystemSignaturesContent = ({ return clsx(classes.TableRowCompact, 'bg-amber-500/50 hover:bg-amber-500/70 transition duration-200'); } - const dateClass = getRowColorByTimeLeft(row.updated_at ? new Date(row.updated_at) : undefined); + const dateClass = getRowColorByTimeLeft(row.inserted_at ? new Date(row.inserted_at) : undefined); if (!dateClass) { return clsx(classes.TableRowCompact, 'hover:bg-purple-400/20 transition duration-200'); } @@ -357,6 +362,7 @@ export const SystemSignaturesContent = ({ header="Group" bodyClassName="text-ellipsis overflow-hidden whitespace-nowrap" hidden={compact} + style={{ maxWidth: 110, minWidth: 110, width: 110 }} sortable > )} - {showInsertedColumn && ( + + + {showUpdatedColumn && ( )} - - {!selectable && ( { +export const renderAddedTimeLeft = (row: SystemSignature) => { return (
diff --git a/assets/js/hooks/Mapper/hooks/useHotkey.ts b/assets/js/hooks/Mapper/hooks/useHotkey.ts index 1b6c2b67..319b80a9 100644 --- a/assets/js/hooks/Mapper/hooks/useHotkey.ts +++ b/assets/js/hooks/Mapper/hooks/useHotkey.ts @@ -1,6 +1,6 @@ import { useEffect } from 'react'; -export const useHotkey = (isMetaKey: boolean, hotkeys: string[], callback: () => void) => { +export const useHotkey = (isMetaKey: boolean, hotkeys: string[], callback: (e: KeyboardEvent) => void) => { useEffect(() => { const handleKeyDown = (event: KeyboardEvent) => { if ((!isMetaKey || event.ctrlKey || event.metaKey) && hotkeys.includes(event.key)) { @@ -8,14 +8,14 @@ export const useHotkey = (isMetaKey: boolean, hotkeys: string[], callback: () => return; } event.preventDefault(); - callback(); + callback(event); } }; - window.addEventListener('keydown', handleKeyDown); + window.addEventListener('keydown', handleKeyDown, { capture: true }); return () => { - window.removeEventListener('keydown', handleKeyDown); + window.removeEventListener('keydown', handleKeyDown, { capture: true }); }; }, [isMetaKey, hotkeys, callback]); };