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]); };