Add UI for deleting table constraints

mathesar-foundation · Oct 26, 2021 · 2c971b1 · 2c971b1
1 parent 0d9130e
commit 2c971b1
Show file tree

Hide file tree

Showing 7 changed files with 151 additions and 52 deletions.
diff --git a/mathesar_ui/src/components/index.ts b/mathesar_ui/src/components/index.ts
@@ -18,6 +18,7 @@ export { default as Button } from './button/Button.svelte';
 export { default as Icon } from './icon/Icon.svelte';
 export { default as Progress } from './progress/Progress.svelte';
 export { default as Skeleton } from './skeleton/Skeleton.svelte';
+export { default as Seesaw } from './seesaw/Seesaw.svelte';
 
 // Compound Components (Ordered)
 export { default as Notification } from './notification/Notification.svelte';

diff --git a/mathesar_ui/src/components/seesaw/Seesaw.scss b/mathesar_ui/src/components/seesaw/Seesaw.scss
@@ -0,0 +1,15 @@
+.seesaw {
+  overflow: hidden;
+  .switcher {
+    display: flex;
+    align-items: stretch;
+    width: 200%;
+    transition: transform .1s;
+    > * {
+      flex-basis: 100%;
+    }
+  }
+  &.isRight .switcher {
+    transform: translateX(-50%);
+  }
+}
diff --git a/mathesar_ui/src/components/seesaw/Seesaw.svelte b/mathesar_ui/src/components/seesaw/Seesaw.svelte
@@ -0,0 +1,22 @@
+<script lang="ts">
+  export let position: 'left' | 'right' = 'left';
+
+  $: isLeft = position === 'left';
+  $: isRight = position === 'right';
+</script>
+
+<div class="seesaw" class:isLeft class:isRight>
+  <div class="switcher">
+    <div class="left">
+      <slot name="left"/>
+    </div>
+    <div class="right">
+      <slot name="right"/>
+    </div>
+  </div>
+</div>
+
+<style global lang="scss">
+  @import "Seesaw.scss";
+</style>
+
diff --git a/mathesar_ui/src/sections/table-view/constraints/TableConstraint.scss b/mathesar_ui/src/sections/table-view/constraints/TableConstraint.scss
@@ -0,0 +1,37 @@
+.table-constraint {
+  line-height: 1.4;
+  .view,
+  .confirm-drop {
+    padding: 10px 15px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+  .view {
+    > * + * {
+      margin-left: 10px;
+    }
+    .type {
+      text-transform: uppercase;
+      color: #666;
+    }
+    .columns {
+      color: #666;
+      font-size: 0.9rem;
+    }
+    .drop {
+      color: #f47171;
+    }
+  }
+
+  .confirm-drop {
+    text-align: right;
+    height: 100%;
+    .warning-icon {
+      color: #EEE;
+    }
+    .buttons {
+      margin-top: 5px;
+    }
+  }
+}
diff --git a/mathesar_ui/src/sections/table-view/constraints/TableConstraint.svelte b/mathesar_ui/src/sections/table-view/constraints/TableConstraint.svelte
@@ -0,0 +1,71 @@
+<script lang="ts">
+  import { Icon, Seesaw } from '@mathesar-components';
+  import type { Constraint } from "@mathesar/stores/table-data/constraints";
+  import { faTrash, faCheck, faArrowLeft, faExclamationTriangle } from '@fortawesome/free-solid-svg-icons';
+  import Button from "@mathesar/components/button/Button.svelte";
+  import { createEventDispatcher } from 'svelte';
+
+  const dispatch = createEventDispatcher();
+  
+  export let constraint: Constraint;
+
+  let isConfirmingDrop = false;
+  
+  $: columnSummary = constraint.columns.join(', ');
+</script>
+
+<div class="table-constraint" class:isConfirmingDrop>
+  <Seesaw position={isConfirmingDrop ? 'left' : 'right'}>
+
+    <div class="view" slot="right" >
+      <div>
+        <div><span class="name">{constraint.name}</span></div>
+        <div>
+          <span class="type">{constraint.type}</span>
+          <span>&bull;</span>
+          <span class="columns">{columnSummary}</span>
+        </div>
+      </div>
+      <div>
+        <Button
+          on:click={() => isConfirmingDrop = true}
+          class="drop"
+          title={`Drop constraint "${constraint.name}"`}
+        >
+          <Icon data={faTrash} />
+        </Button>
+      </div>
+    </div>
+
+    <div class="confirm-drop" slot="left">
+      <div class="warning-icon"><Icon data={faExclamationTriangle} size="3em"/></div>
+      <div>
+        <div>Drop constaint "<span class="name">{constraint.name}</span>"?</div>
+        <div class="buttons">
+          <Button
+            size="small"
+            on:click={() => isConfirmingDrop = false}
+            class="cancel"
+            title={`Cancel`}
+          >
+            <Icon data={faArrowLeft}/>
+            <span>Cancel</span>
+          </Button>
+          <Button
+            size="small"
+            on:click={() => dispatch('drop')}
+            title={`Confirm drop constraint`}
+          >
+            <Icon data={faCheck}/>
+            <span>Drop</span>
+          </Button>
+        </div>
+      </div>
+    </div>
+
+  </Seesaw>
+</div>
+
+<style global lang="scss">
+  @import "TableConstraint.scss";
+</style>
diff --git a/mathesar_ui/src/sections/table-view/constraints/TableConstraints.scss b/mathesar_ui/src/sections/table-view/constraints/TableConstraints.scss
@@ -8,25 +8,4 @@
     border: solid #CCC 1px;
     border-radius: 4px;
   }
-  .table-constraint {
-    margin: 12px;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    line-height: 1.4;
-    > * + * {
-      margin-left: 10px;
-    }
-    .type {
-      text-transform: uppercase;
-      color: #666;
-    }
-    .columns {
-      color: #666;
-      font-size: 0.9rem;
-    }
-    .drop {
-      color: #f47171;
-    }
-  }
 }
diff --git a/mathesar_ui/src/sections/table-view/constraints/TableConstraints.svelte b/mathesar_ui/src/sections/table-view/constraints/TableConstraints.svelte
@@ -5,28 +5,21 @@
   import type { Constraint, ConstraintsDataStore } from '@mathesar/stores/table-data/constraints';
   import { States } from '@mathesar/utils/api';
   import { faSpinner } from '@fortawesome/free-solid-svg-icons';
-  // TODO uncomment when adding the "Drop" button
-  // import type { Constraint } from "@mathesar/stores/table-data/constraints";
-  // import Icon from "@mathesar/components/icon/Icon.svelte";
-  // import { faTrash } from '@fortawesome/free-solid-svg-icons';
-  // import Button from "@mathesar/components/button/Button.svelte";
+  import TableConstraint from './TableConstraint.svelte';
 
   export let isOpen = false;
 
   const tabularData = getContext<TabularDataStore>('tabularData');
+    
   $: constraintsDataStore = $tabularData.constraintsDataStore as ConstraintsDataStore;
   $: state = $constraintsDataStore.state as States;
   $: errorMsg = $constraintsDataStore.error as string;
   $: constraints = $constraintsDataStore.constraints as Constraint[];
   $: countText = constraints.length === 0 ? '' : ` (${constraints.length as number})`;
 
-  function columnSummary(constraint: Constraint) {
-    return constraint.columns.join(', ');
+  function drop(constraint: Constraint) {
+    console.log(`DROP ${constraint.id}`);
   }
-
-  // function drop(constraint: Constraint) {
-  //   console.log(`DROP ${constraint.id}`); //TODO
-  // }
 </script>
 
 <Modal bind:isOpen>
@@ -40,26 +33,7 @@
     {:else if state === States.Done}
       <div class="constraints-list">
         {#each constraints as constraint (constraint.id)}
-          <div class="table-constraint">
-            <div>
-              <div class="name">{constraint.name}</div>
-              <div>
-                <span class="type">{constraint.type}</span>
-                <span>&bull;</span>
-                <span class="columns">{columnSummary(constraint)}</span>
-              </div>
-            </div>
-            <div>
-              <!-- TODO Add this in a future PR -->
-              <!-- <Button
-                size=small
-                on:click={() => drop(constraint)} class="drop"
-                title={`Drop constraint "${constraint.name}"`}
-              >
-                <Icon data={faTrash} />
-              </Button> -->
-            </div>
-          </div>
+          <TableConstraint {constraint} on:drop={() => drop(constraint)}/>
         {/each}
       </div>
     {:else if state === States.Error}