From daa4722742370d11b4edcb043d36564b9f15c940 Mon Sep 17 00:00:00 2001 From: oleojake Date: Tue, 18 Mar 2025 13:57:21 +0100 Subject: [PATCH 1/7] #513-import-button-added-to-toolbar --- .../icons/export-icon.component.tsx | 8 +- .../icons/import-icon.component.tsx | 19 ++ .../import-button/import-button.component.tsx | 20 ++ .../toolbar/components/import-button/index.ts | 1 + src/pods/toolbar/components/index.ts | 1 + src/pods/toolbar/shortcut/shortcut.const.ts | 188 +++++++++--------- src/pods/toolbar/toolbar.pod.tsx | 2 + 7 files changed, 146 insertions(+), 93 deletions(-) create mode 100644 src/common/components/icons/import-icon.component.tsx create mode 100644 src/pods/toolbar/components/import-button/import-button.component.tsx create mode 100644 src/pods/toolbar/components/import-button/index.ts diff --git a/src/common/components/icons/export-icon.component.tsx b/src/common/components/icons/export-icon.component.tsx index ae4b57ae..dd2a216f 100644 --- a/src/common/components/icons/export-icon.component.tsx +++ b/src/common/components/icons/export-icon.component.tsx @@ -4,11 +4,15 @@ export const ExportIcon = () => { xmlns="http://www.w3.org/2000/svg" width="1.2em" height="1.2em" - viewBox="0 0 256 256" + viewBox="0 0 24 24" > + ); diff --git a/src/common/components/icons/import-icon.component.tsx b/src/common/components/icons/import-icon.component.tsx new file mode 100644 index 00000000..8830f759 --- /dev/null +++ b/src/common/components/icons/import-icon.component.tsx @@ -0,0 +1,19 @@ +export const ImportIcon = () => { + return ( + + + + + ); +}; diff --git a/src/pods/toolbar/components/import-button/import-button.component.tsx b/src/pods/toolbar/components/import-button/import-button.component.tsx new file mode 100644 index 00000000..eae6a392 --- /dev/null +++ b/src/pods/toolbar/components/import-button/import-button.component.tsx @@ -0,0 +1,20 @@ +import { ToolbarButton } from '../toolbar-button/toolbarButton.component'; +import { SHORTCUTS } from '../../shortcut/shortcut.const'; +import { ImportIcon } from '@/common/components/icons/import-icon.component'; +import classes from '@/pods/toolbar/toolbar.pod.module.css'; + +export const ImportButton = () => { + const handleImportClick = () => { + console.log('Hola'); + }; + + return ( + } + label="Import" + onClick={handleImportClick} + className={`${classes.button} hide-mobile`} + shortcutOptions={SHORTCUTS.import} + /> + ); +}; diff --git a/src/pods/toolbar/components/import-button/index.ts b/src/pods/toolbar/components/import-button/index.ts new file mode 100644 index 00000000..10615d9c --- /dev/null +++ b/src/pods/toolbar/components/import-button/index.ts @@ -0,0 +1 @@ +export * from './import-button.component'; diff --git a/src/pods/toolbar/components/index.ts b/src/pods/toolbar/components/index.ts index 2bef9a00..d4c20713 100644 --- a/src/pods/toolbar/components/index.ts +++ b/src/pods/toolbar/components/index.ts @@ -15,3 +15,4 @@ export * from './about-button'; export * from './duplicate-button'; export * from './copy-button'; export * from './paste-button'; +export * from './import-button'; diff --git a/src/pods/toolbar/shortcut/shortcut.const.ts b/src/pods/toolbar/shortcut/shortcut.const.ts index a12f9eb9..3fee1730 100644 --- a/src/pods/toolbar/shortcut/shortcut.const.ts +++ b/src/pods/toolbar/shortcut/shortcut.const.ts @@ -1,98 +1,104 @@ import { ShortcutOptions } from './shortcut.model'; interface Shortcut { - [key: string]: ShortcutOptions; + [key: string]: ShortcutOptions; } export const SHORTCUTS: Shortcut = { - addCollection: { - description: 'Add Collection', - id: 'add-collection-button-shortcut', - targetKey: ['c'], - targetKeyLabel: 'C', - }, - addRelation: { - description: 'Add Relation', - id: 'add-relation-button-shortcut', - targetKey: ['r'], - targetKeyLabel: 'R', - }, - delete: { - description: 'Delete', - id: 'delete-button-shortcut', - targetKey: ['backspace'], - targetKeyLabel: 'Backspace', - }, - export: { - description: 'Export', - id: 'export-button-shortcut', - targetKey: ['e'], - targetKeyLabel: 'E', - }, - new: { - description: 'New', - id: 'new-button-shortcut', - targetKey: ['n'], - targetKeyLabel: 'N', - }, - open: { - description: 'Open', - id: 'open-button-shortcut', - targetKey: ['o'], - targetKeyLabel: 'O', - }, - redo: { - description: 'Redo', - id: 'redo-button-shortcut', - targetKey: ['y'], - targetKeyLabel: 'Y', - }, - save: { - description: 'Save', - id: 'save-button-shortcut', - targetKey: ['s'], - targetKeyLabel: 'S', - }, - settings: { - description: 'Settings', - id: 'settings-button-shortcut', - targetKey: ['t'], - targetKeyLabel: 'T', - }, - undo: { - description: 'Undo', - id: 'undo-button-shortcut', - targetKey: ['z'], - targetKeyLabel: 'Z', - }, - zoomIn: { - description: 'Zoom In', - id: 'zoom-in-button-shortcut', - targetKey: ['=', '+'], - targetKeyLabel: '"+"', - }, - zoomOut: { - description: 'Zoom Out', - id: 'zoom-out-button-shortcut', - targetKey: ['-', '-'], - targetKeyLabel: '"-"', - }, - duplicate: { - description: 'Duplicate', - id: 'duplicate-button-shortcut', - targetKey: ['d'], - targetKeyLabel: 'D', - }, - copy: { - description: 'Copy', - id: 'copy-button-shortcut', - targetKey: ['c'], - targetKeyLabel: 'C', - }, - paste: { - description: 'Paste', - id: 'paste-button-shortcut', - targetKey: ['v'], - targetKeyLabel: 'V', - }, + addCollection: { + description: 'Add Collection', + id: 'add-collection-button-shortcut', + targetKey: ['c'], + targetKeyLabel: 'C', + }, + addRelation: { + description: 'Add Relation', + id: 'add-relation-button-shortcut', + targetKey: ['r'], + targetKeyLabel: 'R', + }, + delete: { + description: 'Delete', + id: 'delete-button-shortcut', + targetKey: ['backspace'], + targetKeyLabel: 'Backspace', + }, + export: { + description: 'Export', + id: 'export-button-shortcut', + targetKey: ['e'], + targetKeyLabel: 'E', + }, + new: { + description: 'New', + id: 'new-button-shortcut', + targetKey: ['n'], + targetKeyLabel: 'N', + }, + open: { + description: 'Open', + id: 'open-button-shortcut', + targetKey: ['o'], + targetKeyLabel: 'O', + }, + redo: { + description: 'Redo', + id: 'redo-button-shortcut', + targetKey: ['y'], + targetKeyLabel: 'Y', + }, + save: { + description: 'Save', + id: 'save-button-shortcut', + targetKey: ['s'], + targetKeyLabel: 'S', + }, + settings: { + description: 'Settings', + id: 'settings-button-shortcut', + targetKey: ['t'], + targetKeyLabel: 'T', + }, + undo: { + description: 'Undo', + id: 'undo-button-shortcut', + targetKey: ['z'], + targetKeyLabel: 'Z', + }, + zoomIn: { + description: 'Zoom In', + id: 'zoom-in-button-shortcut', + targetKey: ['=', '+'], + targetKeyLabel: '"+"', + }, + zoomOut: { + description: 'Zoom Out', + id: 'zoom-out-button-shortcut', + targetKey: ['-', '-'], + targetKeyLabel: '"-"', + }, + duplicate: { + description: 'Duplicate', + id: 'duplicate-button-shortcut', + targetKey: ['d'], + targetKeyLabel: 'D', + }, + copy: { + description: 'Copy', + id: 'copy-button-shortcut', + targetKey: ['c'], + targetKeyLabel: 'C', + }, + paste: { + description: 'Paste', + id: 'paste-button-shortcut', + targetKey: ['v'], + targetKeyLabel: 'V', + }, + import: { + description: 'Import', + id: 'import-button-shortcut', + targetKey: ['i'], + targetKeyLabel: 'I', + }, }; diff --git a/src/pods/toolbar/toolbar.pod.tsx b/src/pods/toolbar/toolbar.pod.tsx index f5a15bc4..a275449f 100644 --- a/src/pods/toolbar/toolbar.pod.tsx +++ b/src/pods/toolbar/toolbar.pod.tsx @@ -17,6 +17,7 @@ import { CanvasSettingButton, CopyButton, PasteButton, + ImportButton, } from './components'; import classes from './toolbar.pod.module.css'; @@ -35,6 +36,7 @@ export const ToolbarPod: React.FC = () => { + From d4cc303822e1e71f997f1611a374be4954be354a Mon Sep 17 00:00:00 2001 From: oleojake Date: Wed, 19 Mar 2025 11:32:16 +0100 Subject: [PATCH 2/7] #513-modal-adding-empty-table --- .../modal-dialog/modal-dialog.const.ts | 1 + .../import-panel.pod.module.css | 21 +++++++ .../import-collection/import-panel.pod.tsx | 56 +++++++++++++++++++ .../import-button/import-button.component.tsx | 40 ++++++++++++- 4 files changed, 116 insertions(+), 2 deletions(-) create mode 100644 src/pods/import-collection/import-panel.pod.module.css create mode 100644 src/pods/import-collection/import-panel.pod.tsx diff --git a/src/common/components/modal-dialog/modal-dialog.const.ts b/src/common/components/modal-dialog/modal-dialog.const.ts index 0a91fde4..ecaffe3b 100644 --- a/src/common/components/modal-dialog/modal-dialog.const.ts +++ b/src/common/components/modal-dialog/modal-dialog.const.ts @@ -5,3 +5,4 @@ export const ADD_COLLECTION_TITLE = 'Add Collection'; export const EDIT_COLLECTION_TITLE = 'Edit Collection'; export const ABOUT_TITLE = 'About us'; export const EXPORT_MODEL_TITLE = 'Export Model'; +export const IMPORT_COLLECTION_TITLE = 'Import Collection'; diff --git a/src/pods/import-collection/import-panel.pod.module.css b/src/pods/import-collection/import-panel.pod.module.css new file mode 100644 index 00000000..c46a57bb --- /dev/null +++ b/src/pods/import-collection/import-panel.pod.module.css @@ -0,0 +1,21 @@ +.table-name { + background-color: var(--background-dialog); + position: sticky; + top: 3rem; + left: 0px; + padding-top: var(--space-md); + padding-bottom: var(--space-md); + z-index: 2; + text-align: left; + border-bottom: 1px solid var(--primary-border-color); +} + +.table-name label { + display: flex; + align-items: baseline; + gap: 10px; +} + +.table-name input { + max-width: 190px; +} \ No newline at end of file diff --git a/src/pods/import-collection/import-panel.pod.tsx b/src/pods/import-collection/import-panel.pod.tsx new file mode 100644 index 00000000..8fa997fa --- /dev/null +++ b/src/pods/import-collection/import-panel.pod.tsx @@ -0,0 +1,56 @@ +import React from 'react'; +import classes from './import-panel.pod.module.css'; +import * as canvasVm from '@/core/providers/canvas-schema'; +import * as editTableVm from '../edit-table/edit-table.vm'; +import { doMapOrCreateTable } from '../edit-table/edit-table.business'; +import { mapEditTableVmToTableVm } from '../edit-table/edit-table.mapper'; + +interface ImportPanelProps { + table?: canvasVm.TableVm; + relations: canvasVm.RelationVm[]; + onSave: (table: canvasVm.TableVm) => void; + onClose: () => void; +} + +export const ImportPanel: React.FC = props => { + const { onSave, onClose, relations, table } = props; + const [editTable, setEditTable] = React.useState(() => + doMapOrCreateTable(relations, table) + ); + + const handleSubmit = (table: editTableVm.TableVm) => { + onSave(mapEditTableVmToTableVm(table)); + }; + + const handleChangeTableName = (e: React.ChangeEvent) => { + const tableName: string = e.currentTarget.value; + setEditTable({ ...editTable, tableName }); + }; + + return ( + <> +
+ +
+
+ + +
+ + ); +}; diff --git a/src/pods/toolbar/components/import-button/import-button.component.tsx b/src/pods/toolbar/components/import-button/import-button.component.tsx index eae6a392..3b51811a 100644 --- a/src/pods/toolbar/components/import-button/import-button.component.tsx +++ b/src/pods/toolbar/components/import-button/import-button.component.tsx @@ -1,11 +1,47 @@ +import { useModalDialogContext } from '@/core/providers/modal-dialog-provider'; import { ToolbarButton } from '../toolbar-button/toolbarButton.component'; +import { useCanvasViewSettingsContext } from '@/core/providers'; +import classes from '@/pods/toolbar/toolbar.pod.module.css'; +import { + TableVm, + useCanvasSchemaContext, +} from '@/core/providers/canvas-schema'; +import { IMPORT_COLLECTION_TITLE } from '@/common/components/modal-dialog'; import { SHORTCUTS } from '../../shortcut/shortcut.const'; import { ImportIcon } from '@/common/components/icons/import-icon.component'; -import classes from '@/pods/toolbar/toolbar.pod.module.css'; +import { ImportPanel } from '@/pods/import-collection/import-panel.pod'; + +const BORDER_MARGIN = 40; export const ImportButton = () => { + const { openModal, closeModal } = useModalDialogContext(); + const { canvasSchema, addTable } = useCanvasSchemaContext(); + const { canvasViewSettings, setLoadSample } = useCanvasViewSettingsContext(); + + const handleAddTable = (newTable: TableVm) => { + const updatedTable = { + ...newTable, + x: canvasViewSettings.scrollPosition.x + BORDER_MARGIN, + y: canvasViewSettings.scrollPosition.y + BORDER_MARGIN, + }; + + addTable(updatedTable); + closeModal(); + }; + const handleImportClick = () => { - console.log('Hola'); + setLoadSample(false); + openModal( + , + IMPORT_COLLECTION_TITLE + ); + }; + const handleCloseModal = () => { + closeModal(); }; return ( From 01cee40d6054f693b19ad2a596810da4eb29a7e1 Mon Sep 17 00:00:00 2001 From: oleojake Date: Wed, 19 Mar 2025 19:33:08 +0100 Subject: [PATCH 3/7] #513-add-textarea-to-modal --- src/App.css | 528 +++++++++--------- .../import-panel.pod.module.css | 35 +- .../import-collection/import-panel.pod.tsx | 42 ++ 3 files changed, 338 insertions(+), 267 deletions(-) diff --git a/src/App.css b/src/App.css index bc62be55..edaec624 100644 --- a/src/App.css +++ b/src/App.css @@ -1,356 +1,360 @@ *, *:after, *:before { - box-sizing: border-box; + box-sizing: border-box; } :root { - --padding-table: 38px; - --relation-color: #ecad5a; - --border-radius-table: var(--border-radius-s); - --checkbox-size: 22px; - --space-cells: 9px; - --color-error: rgb(247, 44, 44); - --border-toolbar: 1.5px solid var(--primary-700); - - /* spacing */ - --space-unit: 4px; - --space-xxs: calc(var(--space-unit) / 2); - --space-xs: calc(var(--space-unit) * 2); - --space-sm: calc(var(--space-unit) * 3); - --space-md: calc(var(--space-unit) * 4); - --space-lg: calc(var(--space-unit) * 6); - --space-xl: calc(var(--space-unit) * 8); - --space-xxl: calc(var(--space-unit) * 12); - --space-xxxl: calc(var(--space-unit) * 16); - - /* colors */ - --primary-50: #eef9f1; - --primary-100: #dcf2e3; - --primary-200: #b9e5c7; - --primary-300: #96d9ab; - --primary-400: #73cc8f; - --primary-500: #50bf73; - --primary-600: #40995c; - --primary-700: #307345; - --primary-800: #204c2e; - --primary-900: #102617; - - --secondary-50: #fbf5ed; - --secondary-100: #f7eada; - --secondary-200: #f0d5b5; - --secondary-300: #e8c091; - --secondary-400: #e1ab6c; - --secondary-500: #d99647; - --secondary-600: #ae7839; - --secondary-700: #825a2b; - --secondary-800: #573c1c; - --secondary-900: #2b1e0e; - - /* text */ - --text-color: #f3eded; - --text-disabled: #919191; - --text-dark: #202020; - - /* background */ - --background-50: #e2e7eb; - --background-100: #cad3dc; - --background-200: #a2b3c2; - --background-300: #7b8fa1; - --background-400: #455a6c; - --background-500: #2b3c50; - --background-600: #243446; - --background-700: #1c2d3f; - --background-800: #142231; - --background-900: #0f1924; - - /*font-sizes*/ - --fs-xs: 12px; - --fs-s: 14px; - --fs-m: 16px; - --fs-md: 18px; - --fs-l: 20px; - --fs-xl: 24px; - --fs-xxl: 32px; - - /*font-weight*/ - --fw-light: 300; - --fw-regular: 400; - --fw-medium: 500; - --fw-bold: 600; - --fw-extrabold: 700; - - /*border-radius*/ - --border-radius-unit: 4px; - --border-radius-xxs: calc(var(--border-radius-unit) / 2); - --border-radius-xs: calc(var(--border-radius-unit) * 2); - --border-radius-s: calc(var(--border-radius-unit) * 3); - --border-radius-m: calc(var(--border-radius-unit) * 4); - --border-radius-l: calc(var(--border-radius-unit) * 6); - --border-radius-xl: calc(var(--border-radius-unit) * 8); - --border-radius-xxl: calc(var(--border-radius-unit) * 12); - --border-radius-xxxl: calc(var(--border-radius-unit) * 16); - - --input-border-color: var(--background-400); - --edit-table-header: var(--background-900); - --input-border-color-active: var(--primary-300); - --input-radio-border-color: var(--background-400); - - /* Modal */ - --background-dialog: var(--background-700); - --veil-modal: #0d0d1185; - - /* Canvas */ - --bg-canvas: var(--background-800); - --bg-toolbar: var(--background-400); - --bg-table: var(--background-700); - --header-table: var(--primary-300); - - /* Input */ - --bg-input: var(--background-500); - --bg-input-disabled: var(--background-600); - --hover-input: var(--background-500); - - /* buttons */ - --button-secondary: var(--secondary-400); - --hover-button-secondary: var(--secondary-600); - --hover-button: var(--primary-300); - - /* border */ - --primary-border-color: var(--primary-300); - --secondary-border-color: var(--background-300); - --shadow-filter: var(--primary-600); - - /* checkbox */ - --bg-checkbox: var(--background-500); - --border-checkbox: var(--background-400); - --hover-checkbox: var(--background-200); - - /*About*/ - --color-project: var(--primary-300); - --color-team: var(--secondary-300); - - /* Footer*/ - --footer-background: var(--background-700); - --footer-text-color: var(--primary-300); - - /*Main styles*/ - font-family: Inter, system-ui, Helvetica, Arial, sans-serif; - font-size: var(--fs-m); - line-height: 1.5; - font-weight: var(--fw-regular); - font-synthesis: none; - text-rendering: optimizeLegibility; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; - -webkit-text-size-adjust: 100%; + --padding-table: 38px; + --relation-color: #ecad5a; + --border-radius-table: var(--border-radius-s); + --checkbox-size: 22px; + --space-cells: 9px; + --color-error: rgb(247, 44, 44); + --border-toolbar: 1.5px solid var(--primary-700); + + /* spacing */ + --space-unit: 4px; + --space-xxs: calc(var(--space-unit) / 2); + --space-xs: calc(var(--space-unit) * 2); + --space-sm: calc(var(--space-unit) * 3); + --space-md: calc(var(--space-unit) * 4); + --space-lg: calc(var(--space-unit) * 6); + --space-xl: calc(var(--space-unit) * 8); + --space-xxl: calc(var(--space-unit) * 12); + --space-xxxl: calc(var(--space-unit) * 16); + + /* colors */ + --primary-50: #eef9f1; + --primary-100: #dcf2e3; + --primary-200: #b9e5c7; + --primary-300: #96d9ab; + --primary-400: #73cc8f; + --primary-500: #50bf73; + --primary-600: #40995c; + --primary-700: #307345; + --primary-800: #204c2e; + --primary-900: #102617; + + --secondary-50: #fbf5ed; + --secondary-100: #f7eada; + --secondary-200: #f0d5b5; + --secondary-300: #e8c091; + --secondary-400: #e1ab6c; + --secondary-500: #d99647; + --secondary-600: #ae7839; + --secondary-700: #825a2b; + --secondary-800: #573c1c; + --secondary-900: #2b1e0e; + + /* text */ + --text-color: #f3eded; + --text-disabled: #919191; + --text-dark: #202020; + + /* background */ + --background-50: #e2e7eb; + --background-100: #cad3dc; + --background-200: #a2b3c2; + --background-300: #7b8fa1; + --background-400: #455a6c; + --background-500: #2b3c50; + --background-600: #243446; + --background-700: #1c2d3f; + --background-800: #142231; + --background-900: #0f1924; + + /*font-sizes*/ + --fs-xs: 12px; + --fs-s: 14px; + --fs-m: 16px; + --fs-md: 18px; + --fs-l: 20px; + --fs-xl: 24px; + --fs-xxl: 32px; + + /*font-weight*/ + --fw-light: 300; + --fw-regular: 400; + --fw-medium: 500; + --fw-bold: 600; + --fw-extrabold: 700; + + /*border-radius*/ + --border-radius-unit: 4px; + --border-radius-xxs: calc(var(--border-radius-unit) / 2); + --border-radius-xs: calc(var(--border-radius-unit) * 2); + --border-radius-s: calc(var(--border-radius-unit) * 3); + --border-radius-m: calc(var(--border-radius-unit) * 4); + --border-radius-l: calc(var(--border-radius-unit) * 6); + --border-radius-xl: calc(var(--border-radius-unit) * 8); + --border-radius-xxl: calc(var(--border-radius-unit) * 12); + --border-radius-xxxl: calc(var(--border-radius-unit) * 16); + + --input-border-color: var(--background-400); + --edit-table-header: var(--background-900); + --input-border-color-active: var(--primary-300); + --input-radio-border-color: var(--background-400); + + /* Modal */ + --background-dialog: var(--background-700); + --veil-modal: #0d0d1185; + + /* Canvas */ + --bg-canvas: var(--background-800); + --bg-toolbar: var(--background-400); + --bg-table: var(--background-700); + --header-table: var(--primary-300); + + /* Input */ + --bg-input: var(--background-500); + --bg-input-disabled: var(--background-600); + --hover-input: var(--background-500); + + /* buttons */ + --button-secondary: var(--secondary-400); + --hover-button-secondary: var(--secondary-600); + --hover-button: var(--primary-300); + + /* border */ + --primary-border-color: var(--primary-300); + --secondary-border-color: var(--background-300); + --shadow-filter: var(--primary-600); + + /* checkbox */ + --bg-checkbox: var(--background-500); + --border-checkbox: var(--background-400); + --hover-checkbox: var(--background-200); + + /*About*/ + --color-project: var(--primary-300); + --color-team: var(--secondary-300); + + /* Footer*/ + --footer-background: var(--background-700); + --footer-text-color: var(--primary-300); + + /*Main styles*/ + font-family: Inter, system-ui, Helvetica, Arial, sans-serif; + font-size: var(--fs-m); + line-height: 1.5; + font-weight: var(--fw-regular); + font-synthesis: none; + text-rendering: optimizeLegibility; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + -webkit-text-size-adjust: 100%; } body { - margin: 0; - text-align: center; + margin: 0; + text-align: center; } .light { - /* text */ - --text-color: #202020; - --text-disabled: #aeaeae; - - /* Modal */ - --background-dialog: #f6f7f9; - --veil-modal: #23232385; - - /* Canvas */ - --bg-canvas: #f9fafb; - --bg-table: #f6f7f9; - --header-table: var(--primary-300); - - /* Toolbar */ - --bg-toolbar: #f0f2f5; - --border-toolbar: 1.5px solid var(--primary-200); - - /* Input */ - --bg-input: #f3f5f7; - --bg-input-disabled: #f0f2f5; - --hover-input: #f3f5f7; - --input-border-color: var(--background-200); - --input-border-color-active: var(--primary-500); - --input-radio-border-color: var(--background-200); - - /*Edit-table*/ - --edit-table-header: #e0e6eb; - - /* buttons */ - --button-secondary: var(--secondary-600); - --hover-button-secondary: var(--secondary-600); - --hover-button: var(--primary-300); - - /* border */ - --primary-border-color: var(--primary-400); - --secondary-border-color: #b5b9bc; - --shadow-filter: var(--primary-600); - - /* checkbox */ - --bg-checkbox: #e2e7eb; - - /* Not working*/ - --hover-checkbox: var(--background-300); - - /*About*/ - --color-project: var(--primary-500); - --color-team: var(--secondary-600); - - /* Footer*/ - --footer-background: #f3f5f7; - --footer-text-color: var(--primary-700); + /* text */ + --text-color: #202020; + --text-disabled: #aeaeae; + + /* Modal */ + --background-dialog: #f6f7f9; + --veil-modal: #23232385; + + /* Canvas */ + --bg-canvas: #f9fafb; + --bg-table: #f6f7f9; + --header-table: var(--primary-300); + + /* Toolbar */ + --bg-toolbar: #f0f2f5; + --border-toolbar: 1.5px solid var(--primary-200); + + /* Input */ + --bg-input: #f3f5f7; + --bg-input-disabled: #f0f2f5; + --hover-input: #f3f5f7; + --input-border-color: var(--background-200); + --input-border-color-active: var(--primary-500); + --input-radio-border-color: var(--background-200); + + /*Edit-table*/ + --edit-table-header: #e0e6eb; + + /* buttons */ + --button-secondary: var(--secondary-600); + --hover-button-secondary: var(--secondary-600); + --hover-button: var(--primary-300); + + /* border */ + --primary-border-color: var(--primary-400); + --secondary-border-color: #b5b9bc; + --shadow-filter: var(--primary-600); + + /* checkbox */ + --bg-checkbox: #e2e7eb; + + /* Not working*/ + --hover-checkbox: var(--background-300); + + /*About*/ + --color-project: var(--primary-500); + --color-team: var(--secondary-600); + + /* Footer*/ + --footer-background: #f3f5f7; + --footer-text-color: var(--primary-700); } /* Buttons */ button { - border-radius: var(--border-radius-s); - border: 1px solid transparent; - padding: 0.6em 1.2em; - font-size: var(--fs-s); - font-weight: var(--fw-medium); - font-family: inherit; - background-color: inherit; - cursor: pointer; - transition: border-color 0.25s; - color: var(--text-color); - transition: all 0.3s ease-in-out; + border-radius: var(--border-radius-s); + border: 1px solid transparent; + padding: 0.6em 1.2em; + font-size: var(--fs-s); + font-weight: var(--fw-medium); + font-family: inherit; + background-color: inherit; + cursor: pointer; + transition: border-color 0.25s; + color: var(--text-color); + transition: all 0.3s ease-in-out; } button:focus-visible { - outline: 1px auto var(--primary-300); + outline: 1px auto var(--primary-300); } button:hover { - background-color: var(--hover-button); - color: var(--text-dark); + background-color: var(--hover-button); + color: var(--text-dark); } button:disabled { - color: var(--text-disabled); - cursor: default; + color: var(--text-disabled); + cursor: default; } button:disabled:hover { - background: transparent; + background: transparent; } .button-secondary { - background-color: var(--secondary-300); - color: var(--text-dark); - margin-top: var(--space-md); - border-radius: var(--border-radius-s); + background-color: var(--secondary-300); + color: var(--text-dark); + margin-top: var(--space-md); + border-radius: var(--border-radius-s); } .button-secondary:hover { - background-color: var(--hover-button-secondary); + background-color: var(--hover-button-secondary); } .button-tertiary { - background-color: var(--background-500); + background-color: var(--background-500); } .button-tertiary:hover { - background-color: var(--background-300); - color: var(--text-dark); + background-color: var(--background-300); + color: var(--text-dark); } .button-secondary:disabled, .button-tertiary:disabled { - color: var(--text-disabled); - cursor: default; - background-color: var(--background-500); + color: var(--text-disabled); + cursor: default; + background-color: var(--background-500); } .button-secondary:disabled:hover, .button-tertiary:disabled:hover { - background-color: var(--background-500); + background-color: var(--background-500); } .light .button-tertiary { - background-color: var(--background-200); + background-color: var(--background-200); } .light .button-tertiary:hover { - background-color: var(--background-300); + background-color: var(--background-300); } + .light .button-secondary:disabled, .light .button-tertiary:disabled { - background-color: #efefef; - color: #929292; + background-color: #efefef; + color: #929292; } .light .button-secondary:disabled:hover, .light .button-tertiary:disabled:hover { - background-color: #efefef; + background-color: #efefef; } + .two-buttons { - display: flex; - align-items: baseline; - justify-content: center; - margin-top: var(--space-md); - gap: var(--space-lg); + display: flex; + align-items: baseline; + justify-content: center; + margin-top: var(--space-md); + gap: var(--space-lg); } /* Input */ input, -select { - background-color: var(--bg-input); - border-radius: var(--border-radius-xs); - color: var(--text-color); - padding: var(--space-xs); - width: 100%; - border: none; - outline: none; - - border: 1px solid var(--input-border-color); - transition: all 0.2s ease; +select, +textarea { + background-color: var(--bg-input); + border-radius: var(--border-radius-xs); + color: var(--text-color); + padding: var(--space-xs); + width: 100%; + border: none; + outline: none; + + border: 1px solid var(--input-border-color); + transition: all 0.2s ease; } input:focus, select:focus { - border: 1px solid var(--input-border-color-active); - background-color: var(--hover-input); + border: 1px solid var(--input-border-color-active); + background-color: var(--hover-input); } select:hover, input:hover { - background-color: var(--hover-input); - box-shadow: 0 0 4px var(--hover-checkbox); + background-color: var(--hover-input); + box-shadow: 0 0 4px var(--hover-checkbox); } select { - padding: 7px; + padding: 7px; } /* Checkbox */ input[type='checkbox'] { - margin: 0; - width: var(--checkbox-size); - height: var(--checkbox-size); - cursor: pointer; + margin: 0; + width: var(--checkbox-size); + height: var(--checkbox-size); + cursor: pointer; } .light input[type='checkbox'] { - color-scheme: light; + color-scheme: light; } .dark input[type='checkbox'] { - color-scheme: dark; + color-scheme: dark; } .mobile-only { - display: none; + display: none; } @media screen and (max-device-width: 1090px) { - .hide-mobile { - display: none; - } - .mobile-only { - display: block; - } -} + .hide-mobile { + display: none; + } + + .mobile-only { + display: block; + } +} \ No newline at end of file diff --git a/src/pods/import-collection/import-panel.pod.module.css b/src/pods/import-collection/import-panel.pod.module.css index c46a57bb..579b5c9f 100644 --- a/src/pods/import-collection/import-panel.pod.module.css +++ b/src/pods/import-collection/import-panel.pod.module.css @@ -1,21 +1,46 @@ -.table-name { +.table-name, +.json-textarea { background-color: var(--background-dialog); position: sticky; top: 3rem; - left: 0px; + left: 0; padding-top: var(--space-md); padding-bottom: var(--space-md); z-index: 2; text-align: left; - border-bottom: 1px solid var(--primary-border-color); + display: flex; + align-items: center; + gap: 10px; +} + +.table-name { + border-bottom: 0.5px solid var(--primary-border-color); } -.table-name label { +.table-name label, +.json-textarea label { display: flex; - align-items: baseline; + align-items: center; gap: 10px; + width: 100%; } .table-name input { + flex: 1; max-width: 190px; + padding: 8px; + height: 40px; +} + + +.json-textarea textarea { + flex: 1; + max-width: 700px; + padding: 8px; + height: 40px; +} + +.json-textarea textarea { + height: 200px; + resize: vertical; } \ No newline at end of file diff --git a/src/pods/import-collection/import-panel.pod.tsx b/src/pods/import-collection/import-panel.pod.tsx index 8fa997fa..3ea6d200 100644 --- a/src/pods/import-collection/import-panel.pod.tsx +++ b/src/pods/import-collection/import-panel.pod.tsx @@ -12,16 +12,44 @@ interface ImportPanelProps { onClose: () => void; } +const defaultJson = JSON.stringify( + { + _id: { $oid: '5f5f9b3b4b4b1f001f1b1f1b' }, + age: '30', + name: 'John Doe', + }, + null, + 2 +); + export const ImportPanel: React.FC = props => { const { onSave, onClose, relations, table } = props; + const [jsonContent, setJsonContent] = React.useState(defaultJson); + const [jsonError, setJsonError] = React.useState(null); + const [editTable, setEditTable] = React.useState(() => doMapOrCreateTable(relations, table) ); const handleSubmit = (table: editTableVm.TableVm) => { + console.log(jsonContent); onSave(mapEditTableVmToTableVm(table)); }; + const handleJsonContentChange = ( + e: React.ChangeEvent + ) => { + const newValue = e.currentTarget.value; + setJsonContent(newValue); + + try { + JSON.parse(newValue); + setJsonError(null); + } catch (error) { + setJsonError('El JSON no es válido'); + } + }; + const handleChangeTableName = (e: React.ChangeEvent) => { const tableName: string = e.currentTarget.value; setEditTable({ ...editTable, tableName }); @@ -40,10 +68,24 @@ export const ImportPanel: React.FC = props => { /> +
+