dennii/dbgate
1
0
Fork 0
mirror of https://github.com/DeNNiiInc/dbgate.git synced 2026-04-30 10:23:57 +00:00
Code Issues Packages Projects Releases Wiki Activity

better formating

Browse Source
This commit is contained in:
Jan Prochazka
2025-12-03 18:21:04 +01:00
parent 910f9cadfe
commit 30b4c85c5a
2 changed files with 126 additions and 115 deletions
Download Patch File Download Diff File Expand all files Collapse all files

52
packages/tools/src/stringTools.ts
View File

@@ -45,14 +45,15 @@ export function hexStringToArray(inputString) {
export function base64ToHex(base64String) { export function base64ToHex(base64String) {
const binaryString = atob(base64String); const binaryString = atob(base64String);
const hexString = Array.from(binaryString, c => const hexString = Array.from(binaryString, c => c.charCodeAt(0).toString(16).padStart(2, '0')).join('');
c.charCodeAt(0).toString(16).padStart(2, '0')
).join('');
return '0x' + hexString.toUpperCase(); return '0x' + hexString.toUpperCase();
}; }
export function hexToBase64(hexString) { export function hexToBase64(hexString) {
const binaryString = hexString.match(/.{1,2}/g).map(byte => String.fromCharCode(parseInt(byte, 16))).join(''); const binaryString = hexString
.match(/.{1,2}/g)
.map(byte => String.fromCharCode(parseInt(byte, 16)))
.join('');
return btoa(binaryString); return btoa(binaryString);
} }
@@ -68,9 +69,9 @@ export function parseCellValue(value, editorTypes?: DataEditorTypesBehaviour) {
if (mHex) { if (mHex) {
return { return {
$binary: { $binary: {
base64: hexToBase64(value.substring(2)) base64: hexToBase64(value.substring(2)),
} },
} };
} }
} }
@@ -201,9 +202,23 @@ function stringifyJsonToGrid(value): ReturnType<typeof stringifyCellValue> {
} }
function formatNumberCustomSeparator(value, thousandsSeparator) { function formatNumberCustomSeparator(value, thousandsSeparator) {
const [intPart, decPart] = value.split('.'); const [intPart, decPart] = value.split('.');
const intPartWithSeparator = intPart.replace(/\B(?=(\d{3})+(?!\d))/g, thousandsSeparator); const intPartWithSeparator = intPart.replace(/\B(?=(\d{3})+(?!\d))/g, thousandsSeparator);
return decPart ? `${intPartWithSeparator}.${decPart}` : intPartWithSeparator; return decPart ? `${intPartWithSeparator}.${decPart}` : intPartWithSeparator;
}
function formatCellNumber(value, gridFormattingOptions?: { thousandsSeparator?: string }) {
const separator = gridFormattingOptions?.thousandsSeparator;
if (_isNumber(value)) {
if (separator === 'none' || (value < 1000 && value > -1000)) return value.toString();
if (separator === 'system') return value.toLocaleString();
}
// fallback for system locale
if (separator === 'space' || separator === 'system') return formatNumberCustomSeparator(value.toString(), ' ');
if (separator === 'narrowspace') return formatNumberCustomSeparator(value.toString(), '\u202F');
if (separator === 'comma') return formatNumberCustomSeparator(value.toString(), ',');
if (separator === 'dot') return formatNumberCustomSeparator(value.toString(), '.');
return value.toString();
} }
export function stringifyCellValue( export function stringifyCellValue(
@@ -216,7 +231,7 @@ export function stringifyCellValue(
| 'exportIntent' | 'exportIntent'
| 'clipboardIntent', | 'clipboardIntent',
editorTypes?: DataEditorTypesBehaviour, editorTypes?: DataEditorTypesBehaviour,
gridFormattingOptions?: { thousandsSeparator?: string}, gridFormattingOptions?: { thousandsSeparator?: string },
jsonParsedValue?: any jsonParsedValue?: any
): { ): {
value: string; value: string;
@@ -276,13 +291,13 @@ export function stringifyCellValue(
} }
if (value?.$bigint) { if (value?.$bigint) {
return { return {
value: value.$bigint, value: formatCellNumber(value.$bigint, gridFormattingOptions),
gridStyle: 'valueCellStyle', gridStyle: 'valueCellStyle',
}; };
} }
if (typeof value === 'bigint') { if (typeof value === 'bigint') {
return { return {
value: value.toString(), value: formatCellNumber(value.toString(), gridFormattingOptions),
gridStyle: 'valueCellStyle', gridStyle: 'valueCellStyle',
}; };
} }
@@ -358,14 +373,7 @@ export function stringifyCellValue(
switch (intent) { switch (intent) {
case 'gridCellIntent': case 'gridCellIntent':
const separator = gridFormattingOptions?.thousandsSeparator; const separator = gridFormattingOptions?.thousandsSeparator;
let formattedValue; return { value: formatCellNumber(value, gridFormattingOptions), gridStyle: 'valueCellStyle' };
if (separator === 'none' || (value < 1000 && value > -1000)) formattedValue = value.toString();
else if (separator === 'system') formattedValue = value.toLocaleString();
else if (separator === 'space') formattedValue = formatNumberCustomSeparator(value.toString(), ' ');
else if (separator === 'nobreakspace') formattedValue = formatNumberCustomSeparator(value.toString(), '\u202F');
else if (separator === 'comma') formattedValue = formatNumberCustomSeparator(value.toString(), ',');
else if (separator === 'dot') formattedValue = formatNumberCustomSeparator(value.toString(), '.');
return { value: formattedValue, gridStyle: 'valueCellStyle' };
default: default:
return { value: value.toString() }; return { value: value.toString() };
} }

185
packages/web/src/settings/DataGridSettings.svelte
View File

@@ -1,102 +1,105 @@
<script lang="ts"> <script lang="ts">
import FormCheckboxField from "../forms/FormCheckboxField.svelte"; import FormCheckboxField from '../forms/FormCheckboxField.svelte';
import FormSelectField from "../forms/FormSelectField.svelte"; import FormSelectField from '../forms/FormSelectField.svelte';
import FormTextField from "../forms/FormTextField.svelte"; import FormTextField from '../forms/FormTextField.svelte';
import { _t } from "../translations"; import { _t } from '../translations';
import { isProApp } from "../utility/proTools"; import { isProApp } from '../utility/proTools';
</script> </script>
<div class="wrapper"> <div class="wrapper">
<div class="heading">{_t('settings.dataGrid.title', { defaultMessage: 'Data grid' })}</div> <div class="heading">{_t('settings.dataGrid.title', { defaultMessage: 'Data grid' })}</div>
<FormTextField <FormTextField
name="dataGrid.pageSize" name="dataGrid.pageSize"
label={_t('settings.dataGrid.pageSize', { label={_t('settings.dataGrid.pageSize', {
defaultMessage: 'Page size (number of rows for incremental loading, must be between 5 and 50000)', defaultMessage: 'Page size (number of rows for incremental loading, must be between 5 and 50000)',
})} })}
defaultValue="100" defaultValue="100"
/> />
{#if isProApp()} {#if isProApp()}
<FormCheckboxField <FormCheckboxField
name="dataGrid.showHintColumns" name="dataGrid.showHintColumns"
label={_t('settings.dataGrid.showHintColumns', { defaultMessage: 'Show foreign key hints' })} label={_t('settings.dataGrid.showHintColumns', { defaultMessage: 'Show foreign key hints' })}
defaultValue={true} defaultValue={true}
data-testid="DataGridSettings_showHintColumns" data-testid="DataGridSettings_showHintColumns"
/> />
{/if} {/if}
<!-- <FormCheckboxField name="dataGrid.showHintColumns" label="Show foreign key hints" defaultValue={true} /> --> <!-- <FormCheckboxField name="dataGrid.showHintColumns" label="Show foreign key hints" defaultValue={true} /> -->
<FormSelectField <FormSelectField
label={_t('settings.dataGrid.thousandsSeparator', { defaultMessage: 'Thousands separator for numbers' })} label={_t('settings.dataGrid.thousandsSeparator', { defaultMessage: 'Thousands separator for numbers' })}
name="dataGrid.thousandsSeparatorChar" name="dataGrid.thousandsSeparatorChar"
isNative isNative
defaultValue='none' defaultValue="none"
options={[ options={[
{ value: 'none', label: _t('settings.dataGrid.thousandsSeparator.none', { defaultMessage: 'None' }) }, { value: 'none', label: _t('settings.dataGrid.thousandsSeparator.none', { defaultMessage: 'None' }) },
{ value: 'system', label: _t('settings.dataGrid.thousandsSeparator.system', { defaultMessage: 'System' }) }, { value: 'system', label: _t('settings.dataGrid.thousandsSeparator.system', { defaultMessage: 'System' }) },
{ value: 'space', label: _t('settings.dataGrid.thousandsSeparator.space', { defaultMessage: 'Space' }) }, { value: 'space', label: _t('settings.dataGrid.thousandsSeparator.space', { defaultMessage: 'Space' }) },
{ value: 'nobreakspace', label: _t('settings.dataGrid.thousandsSeparator.narrowNoBreakSpace', { defaultMessage: 'Narrow no-break space' }) }, {
{ value: 'comma', label: _t('settings.dataGrid.thousandsSeparator.comma', { defaultMessage: 'Comma (,)' }) }, value: 'narrowspace',
{ value: 'dot', label: _t('settings.dataGrid.thousandsSeparator.dot', { defaultMessage: 'Dot (.)' }) }, label: _t('settings.dataGrid.thousandsSeparator.narrowSpace', {
]} defaultMessage: 'Narrow space',
/> }),
},
{ value: 'comma', label: _t('settings.dataGrid.thousandsSeparator.comma', { defaultMessage: 'Comma (,)' }) },
{ value: 'dot', label: _t('settings.dataGrid.thousandsSeparator.dot', { defaultMessage: 'Dot (.)' }) },
]}
/>
<FormTextField <FormTextField
name="dataGrid.defaultAutoRefreshInterval" name="dataGrid.defaultAutoRefreshInterval"
label={_t('settings.dataGrid.defaultAutoRefreshInterval', { label={_t('settings.dataGrid.defaultAutoRefreshInterval', {
defaultMessage: 'Default grid auto refresh interval in seconds', defaultMessage: 'Default grid auto refresh interval in seconds',
})} })}
defaultValue="10" defaultValue="10"
/> />
<FormCheckboxField <FormCheckboxField
name="dataGrid.alignNumbersRight" name="dataGrid.alignNumbersRight"
label={_t('settings.dataGrid.alignNumbersRight', { defaultMessage: 'Align numbers to right' })} label={_t('settings.dataGrid.alignNumbersRight', { defaultMessage: 'Align numbers to right' })}
defaultValue={false} defaultValue={false}
/> />
<FormTextField <FormTextField
name="dataGrid.collectionPageSize" name="dataGrid.collectionPageSize"
label={_t('settings.dataGrid.collectionPageSize', { label={_t('settings.dataGrid.collectionPageSize', {
defaultMessage: 'Collection page size (for MongoDB JSON view, must be between 5 and 1000)', defaultMessage: 'Collection page size (for MongoDB JSON view, must be between 5 and 1000)',
})} })}
defaultValue="50" defaultValue="50"
/> />
<FormSelectField <FormSelectField
label={_t('settings.dataGrid.coloringMode', { defaultMessage: 'Row coloring mode' })} label={_t('settings.dataGrid.coloringMode', { defaultMessage: 'Row coloring mode' })}
name="dataGrid.coloringMode" name="dataGrid.coloringMode"
isNative isNative
defaultValue="36" defaultValue="36"
options={[ options={[
{ {
value: '36', value: '36',
label: _t('settings.dataGrid.coloringMode.36', { defaultMessage: 'Every 3rd and 6th row' }), label: _t('settings.dataGrid.coloringMode.36', { defaultMessage: 'Every 3rd and 6th row' }),
}, },
{ {
value: '2-primary', value: '2-primary',
label: _t('settings.dataGrid.coloringMode.2-primary', { label: _t('settings.dataGrid.coloringMode.2-primary', {
defaultMessage: 'Every 2-nd row, primary color', defaultMessage: 'Every 2-nd row, primary color',
}), }),
}, },
{ {
value: '2-secondary', value: '2-secondary',
label: _t('settings.dataGrid.coloringMode.2-secondary', { label: _t('settings.dataGrid.coloringMode.2-secondary', {
defaultMessage: 'Every 2-nd row, secondary color', defaultMessage: 'Every 2-nd row, secondary color',
}), }),
}, },
{ value: 'none', label: _t('settings.dataGrid.coloringMode.none', { defaultMessage: 'None' }) }, { value: 'none', label: _t('settings.dataGrid.coloringMode.none', { defaultMessage: 'None' }) },
]} ]}
/> />
<FormCheckboxField <FormCheckboxField
name="dataGrid.showAllColumnsWhenSearch" name="dataGrid.showAllColumnsWhenSearch"
label={_t('settings.dataGrid.showAllColumnsWhenSearch', { label={_t('settings.dataGrid.showAllColumnsWhenSearch', {
defaultMessage: 'Show all columns when searching', defaultMessage: 'Show all columns when searching',
})} })}
defaultValue={false} defaultValue={false}
/> />
</div> </div>
<style> <style>
@@ -107,11 +110,11 @@ defaultValue={false}
margin-top: var(--dim-large-form-margin); margin-top: var(--dim-large-form-margin);
} }
.wrapper :global(select){ .wrapper :global(select) {
max-width: 400px; max-width: 400px;
} }
.wrapper :global(input){ .wrapper :global(input) {
max-width: 400px; max-width: 400px;
} }
</style> </style>