pk editor

packages/tools/src/diffTools.ts

@@ -15,70 +15,3 @@ export function generateTablePairingId(table: TableInfo): TableInfo {
   }
   return table;
 }
-
-function processPrimaryKey(table: TableInfo, oldColumn: ColumnInfo, newColumn: ColumnInfo) {
-  if (!oldColumn?.isPrimaryKey && newColumn?.isPrimaryKey) {
-    if (!table.primaryKey) {
-      table.primaryKey = {
-        constraintType: 'primaryKey',
-        pureName: table.pureName,
-        schemaName: table.schemaName,
-        columns: [],
-      };
-    }
-    table.primaryKey.columns = [
-      ...table.primaryKey.columns,
-      {
-        columnName: newColumn.columnName,
-      },
-    ];
-  }
-
-  console.log('processPrimaryKey', oldColumn, newColumn);
-
-  if (oldColumn?.isPrimaryKey && !newColumn?.isPrimaryKey) {
-    if (table.primaryKey) {
-      table.primaryKey = {
-        ...table.primaryKey,
-        columns: table.primaryKey.columns.filter(x => x.columnName != oldColumn.columnName),
-      };
-      if (table.primaryKey.columns.length == 0) {
-        table.primaryKey = null;
-      }
-    }
-  }
-}
-
-export function editorAddColumn(table: TableInfo, column: ColumnInfo): TableInfo {
-  const res = {
-    ...table,
-    columns: [...table.columns, { ...column, pairingId: uuidv1() }],
-  };
-
-  processPrimaryKey(res, null, column);
-
-  return res;
-}
-
-export function editorModifyColumn(table: TableInfo, column: ColumnInfo): TableInfo {
-  const oldColumn = table?.columns?.find(x => x.pairingId == column.pairingId);
-
-  const res = {
-    ...table,
-    columns: table.columns.map(col => (col.pairingId == column.pairingId ? column : col)),
-  };
-  processPrimaryKey(res, oldColumn, column);
-
-  return res;
-}
-
-export function editorDeleteColumn(table: TableInfo, column: ColumnInfo): TableInfo {
-  const res = {
-    ...table,
-    columns: table.columns.filter(col => col.pairingId != column.pairingId),
-  };
-
-  processPrimaryKey(res, column, null);
-
-  return res;
-}

packages/tools/src/index.ts

@@ -12,3 +12,4 @@ export * from './structureTools';
 export * from './settingsExtractors';
 export * from './filterName';
 export * from './diffTools';
+export * from './schemaEditorTools';

packages/tools/src/schemaEditorTools.ts

@@ -0,0 +1,111 @@
+import uuidv1 from 'uuid/v1';
+import { ColumnInfo, ConstraintInfo, PrimaryKeyInfo, TableInfo } from 'dbgate-types';
+
+function processPrimaryKey(table: TableInfo, oldColumn: ColumnInfo, newColumn: ColumnInfo) {
+  if (!oldColumn?.isPrimaryKey && newColumn?.isPrimaryKey) {
+    if (!table.primaryKey) {
+      table.primaryKey = {
+        constraintType: 'primaryKey',
+        pureName: table.pureName,
+        schemaName: table.schemaName,
+        columns: [],
+      };
+    }
+    table.primaryKey.columns = [
+      ...table.primaryKey.columns,
+      {
+        columnName: newColumn.columnName,
+      },
+    ];
+  }
+
+  console.log('processPrimaryKey', oldColumn, newColumn);
+
+  if (oldColumn?.isPrimaryKey && !newColumn?.isPrimaryKey) {
+    if (table.primaryKey) {
+      table.primaryKey = {
+        ...table.primaryKey,
+        columns: table.primaryKey.columns.filter(x => x.columnName != oldColumn.columnName),
+      };
+      if (table.primaryKey.columns.length == 0) {
+        table.primaryKey = null;
+      }
+    }
+  }
+}
+
+export function editorAddColumn(table: TableInfo, column: ColumnInfo): TableInfo {
+  const res = {
+    ...table,
+    columns: [...table.columns, { ...column, pairingId: uuidv1() }],
+  };
+
+  processPrimaryKey(res, null, column);
+
+  return res;
+}
+
+export function editorModifyColumn(table: TableInfo, column: ColumnInfo): TableInfo {
+  const oldColumn = table?.columns?.find(x => x.pairingId == column.pairingId);
+
+  const res = {
+    ...table,
+    columns: table.columns.map(col => (col.pairingId == column.pairingId ? column : col)),
+  };
+  processPrimaryKey(res, oldColumn, column);
+
+  return res;
+}
+
+export function editorDeleteColumn(table: TableInfo, column: ColumnInfo): TableInfo {
+  const res = {
+    ...table,
+    columns: table.columns.filter(col => col.pairingId != column.pairingId),
+  };
+
+  processPrimaryKey(res, column, null);
+
+  return res;
+}
+
+export function editorAddConstraint(table: TableInfo, constraint: ConstraintInfo): TableInfo {
+  const res = {
+    ...table,
+  };
+
+  if (constraint.constraintType == 'primaryKey') {
+    res.primaryKey = {
+      pairingId: uuidv1(),
+      ...constraint,
+    } as PrimaryKeyInfo;
+  }
+
+  return res;
+}
+
+export function editorModifyConstraint(table: TableInfo, constraint: ConstraintInfo): TableInfo {
+  const res = {
+    ...table,
+  };
+
+  if (constraint.constraintType == 'primaryKey') {
+    res.primaryKey = {
+      ...res.primaryKey,
+      ...constraint,
+    };
+  }
+
+  return res;
+}
+
+export function editorDeleteConstraint(table: TableInfo, constraint: ConstraintInfo): TableInfo {
+  const res = {
+    ...table,
+  };
+
+  if (constraint.constraintType == 'primaryKey') {
+    res.primaryKey = null;
+  }
+
+  return res;
+}

packages/web/src/tableeditor/ColumnsConstraintEditorModal.svelte

@@ -0,0 +1,157 @@
+<script lang="ts">
+  import FormStyledButton from '../elements/FormStyledButton.svelte';
+  import uuidv1 from 'uuid/v1';
+
+  import FormSelectField from '../forms/FormSelectField.svelte';
+  import FormTextField from '../forms/FormTextField.svelte';
+  import FormCheckboxField from '../forms/FormCheckboxField.svelte';
+
+  import FormProvider from '../forms/FormProvider.svelte';
+  import FormSubmit from '../forms/FormSubmit.svelte';
+  import ModalBase from '../modals/ModalBase.svelte';
+  import { closeCurrentModal } from '../modals/modalTools';
+  import ElectronFilesInput from '../impexp/ElectronFilesInput.svelte';
+  import DropDownButton from '../elements/DropDownButton.svelte';
+  import DataTypeEditor from './DataTypeEditor.svelte';
+  import { editorAddConstraint, editorDeleteConstraint, editorModifyConstraint } from 'dbgate-tools';
+  import TextField from '../forms/TextField.svelte';
+  import SelectField from '../forms/SelectField.svelte';
+
+  export let constraintInfo;
+  export let setTableInfo;
+  export let tableInfo;
+  export let constraintLabel;
+  export let constraintType;
+
+  let constraintName = constraintInfo?.constraintName;
+  let columns = constraintInfo?.columns || [];
+
+  function getConstraint() {
+    return {
+      pairingId: uuidv1(),
+      ...constraintInfo,
+      pureName: tableInfo.pureName,
+      schemaName: tableInfo.schemaName,
+      constraintName,
+      constraintType,
+    };
+  }
+
+</script>
+
+<ModalBase {...$$restProps}>
+  <svelte:fragment slot="header"
+    >{constraintInfo ? `Edit ${constraintLabel}` : `Add ${constraintLabel}`}</svelte:fragment
+  >
+
+  <div class="largeFormMarker">
+    <div class="row">
+      <div class="label col-3">Constraint name</div>
+      <div class="col-9">
+        <TextField value={constraintName} on:input={e => (constraintName = e.target['value'])} focused />
+      </div>
+    </div>
+
+    {#each columns as column, index}
+      <div class="row">
+        <div class="label col-3">Column {index + 1}</div>
+        <div class="col-6">
+          <SelectField
+            value={column.columnName}
+            isNative
+            options={tableInfo.columns.map(col => ({
+              label: col.columnName,
+              value: col.columnName,
+            }))}
+          />
+        </div>
+        <div class="col-3 button">
+          <FormStyledButton
+            value="Delete"
+            on:click={e => {
+              const x = [...columns];
+              x.splice(index, 1);
+              columns = x;
+            }}
+          />
+        </div>
+      </div>
+    {/each}
+
+    <div class="row">
+      <div class="label col-3">Add new column</div>
+      <div class="col-9">
+        {#key columns.length}
+          <SelectField
+            placeholder="Select column"
+            value={''}
+            on:change={e => {
+              if (e.detail)
+                columns = [
+                  ...columns,
+                  {
+                    columnName: e.detail,
+                  },
+                ];
+            }}
+            isNative
+            options={[
+              {
+                label: 'Choose column',
+                value: '',
+              },
+              ...tableInfo.columns.map(col => ({
+                label: col.columnName,
+                value: col.columnName,
+              })),
+            ]}
+          />
+        {/key}
+      </div>
+    </div>
+  </div>
+
+  <svelte:fragment slot="footer">
+    <FormStyledButton
+      value={'Save'}
+      on:click={() => {
+        closeCurrentModal();
+        if (constraintInfo) {
+          setTableInfo(tbl => editorModifyConstraint(tbl, getConstraint()));
+        } else {
+          setTableInfo(tbl => editorAddConstraint(tbl, getConstraint()));
+        }
+      }}
+    />
+
+    <FormStyledButton type="button" value="Close" on:click={closeCurrentModal} />
+    {#if constraintInfo}
+      <FormStyledButton
+        type="button"
+        value="Remove"
+        on:click={() => {
+          closeCurrentModal();
+          setTableInfo(tbl => editorDeleteConstraint(tbl, constraintInfo));
+        }}
+      />
+    {/if}
+  </svelte:fragment>
+</ModalBase>
+
+<style>
+  .row {
+    margin: var(--dim-large-form-margin);
+    display: flex;
+  }
+
+  .row .label {
+    white-space: nowrap;
+    align-self: center;
+  }
+
+  .button {
+    align-self: center;
+    text-align: right;
+  }
+
+</style>

packages/web/src/tableeditor/PrimaryKeyEditorModal.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+  import ColumnsConstraintEditorModal from './ColumnsConstraintEditorModal.svelte';
+
+  export let constraintInfo;
+  export let setTableInfo;
+  export let tableInfo;
+
+</script>
+
+<ColumnsConstraintEditorModal
+  {...$$restProps}
+  constraintLabel="primary key"
+  constraintType="primaryKey"
+  {constraintInfo}
+  {setTableInfo}
+  {tableInfo}
+/>

packages/web/src/tableeditor/TableEditor.svelte

@@ -30,6 +30,7 @@
 
   import { useDbCore } from '../utility/metadataLoaders';
   import ColumnEditorModal from './ColumnEditorModal.svelte';
+import PrimaryKeyEditorModal from './PrimaryKeyEditorModal.svelte';
 
   export const activator = createActivator('TableEditor', true);
 
@@ -111,6 +112,9 @@
   <ObjectListControl
     collection={_.compact([primaryKey])}
     title="Primary key"
+    clickable={writable()}
+    on:clickrow={e => showModal(PrimaryKeyEditorModal, { constraintInfo: e.detail, tableInfo, setTableInfo })}
+    
     columns={[
       {
         fieldName: 'columns',