rename table field (#53)

* rename table field * renmae in schemaEditView and revert uncessary changes * revert uncessary changes * rename schemasidebar works for nodetable * rename node table works for all views * remove uncessary changes * graph does not change if check has not been clicked, otherwise ok remove uncessary changes * Resolve remaining issues * Resolve info display when the name is empty --------- Co-authored-by: Chang Liu <[email protected]>
kuzudb · Dec 2, 2023 · 29f85c0 · 29f85c0
1 parent 12430cd
commit 29f85c0
Show file tree

Hide file tree

Showing 9 changed files with 243 additions and 46 deletions.
diff --git a/src/components/MainLayout.vue b/src/components/MainLayout.vue
@@ -81,6 +81,8 @@
         @addPlaceholderRelTable="addPlaceholderRelTable"
         @updatePlaceholderNodeTableLabel="updatePlaceholderNodeTable"
         @updatePlaceholderRelTable="updatePlaceholderRelTable"
+        @setPlaceholder="setPlaceholder"
+        @unsetPlaceholder="unsetPlaceholder"
       />
       <ShellMainView
         v-show="showShell"
@@ -222,6 +224,39 @@ export default {
       table.src = newTable.src;
       table.dst = newTable.dst;
     },
+    setPlaceholder(name) {
+      let table = this.schema.nodeTables.find((t) => t.name === name);
+      if (table) {
+        table.isPlaceholder = true;
+        this.setPlaceholderNodeTable(name);
+        return;
+      }
+      table = this.schema.relTables.find((t) => t.name === name);
+      if (table) {
+        table.isPlaceholder = true;
+        this.setPlaceholderRelTable(name);
+      }
+    },
+    unsetPlaceholder({ originalLabel, isNode }) {
+      let table;
+      if (isNode) {
+        table = this.schema.nodeTables.find((t) => t.isPlaceholder);
+      } else {
+        table = this.schema.relTables.find((t) => t.isPlaceholder);
+      }
+      if (table) {
+        table.isPlaceholder = false;
+        table.name = originalLabel;
+      }
+      if (isNode) {
+        this.unsetPlaceholderNodeTable(originalLabel);
+      } else {
+        this.unsetPlaceholderRelTable(originalLabel);
+      }
+      this.$nextTick(() => {
+        this.$refs.schemaView.handleSettingsChange();
+      });
+    },
     hideAll() {
       this.showSchema = false;
       this.showShell = false;
@@ -251,7 +286,7 @@ export default {
     updateNavbarHeight() {
       this.navbarHeight = this.$refs.navbar.clientHeight;
     },
-    ...mapActions(useSettingsStore, ['initDefaultSettings', 'handleSchemaReload']),
+    ...mapActions(useSettingsStore, ['initDefaultSettings', 'handleSchemaReload', 'setPlaceholderNodeTable', 'setPlaceholderRelTable', 'unsetPlaceholderNodeTable', 'unsetPlaceholderRelTable'])
   },
   computed: {
     ...mapStores(useModeStore)

diff --git a/src/components/SchemaView/SchemaActionDialog.vue b/src/components/SchemaView/SchemaActionDialog.vue
@@ -147,6 +147,18 @@ export default {
       this.statement = statement;
       this.showModal();
     },
+    renameTable(oldLabel, newLabel, isNode) {
+      this.reset();
+      this.currentAction = {
+        type: isNode ? SCHEMA_ACTION_TYPES.RENAME_NODE_TABLE : SCHEMA_ACTION_TYPES.RENAME_REL_TABLE,
+        oldLabel,
+        newLabel,
+        isNode,
+      };
+      const statement = DataDefinitionLanguage.renameTable(oldLabel, newLabel);
+      this.statement = statement;
+      this.showModal();
+    },
     addProperty(table, property, defaultValue) {
       this.reset();
       this.currentAction = {

diff --git a/src/components/SchemaView/SchemaSidebarAddView.vue b/src/components/SchemaView/SchemaSidebarAddView.vue
@@ -63,15 +63,6 @@
           <i class="fa-solid fa-plus"></i>
           Connection
         </button>
-        &nbsp;
-        <button
-          class="btn btn-sm btn-outline-secondary"
-          title="Rename Table"
-          v-if="false"
-        >
-          <i class="fa-solid fa-pencil"></i>
-          Rename Table
-        </button>
       </div>
       <br />
 

diff --git a/src/components/SchemaView/SchemaSidebarEditView.vue b/src/components/SchemaView/SchemaSidebarEditView.vue
@@ -1,27 +1,30 @@
 <template>
   <div>
     <div>
-      <h5>
-        <button
-          type="button"
-          class="btn btn-sm btn-outline-primary"
-          title="Back"
-          @click="$emit('back')"
-        >
-          <i class="fa-solid fa-long-arrow-left"></i>
-          Back
-        </button>
-        &nbsp; Editing {{ isNode ? "Node" : "Rel" }} Table: &nbsp;
-        <span
-          class="badge bg-primary"
-          :style="{
-            backgroundColor: ` ${getColor(label)} !important`,
-            color: isNode ? '#ffffff' : '#000000',
-          }"
-        >
-          {{ label }}
-        </span>
-      </h5>
+      <div class="d-flex justify-content-between">
+        <div class="input-group d-flex">
+          <span class="input-group-text">Name</span>
+          <input
+            type="text"
+            class="form-control"
+            v-model="currLabel"
+            :style="{
+              backgroundColor: ` ${getBackgroundColorForEditingTable()} !important`,
+              color: isNode ? '#ffffff' : '#000000',
+            }"
+          />
+        </div>
+        <div v-if="isEditingLabel" class="d-flex">
+          &nbsp;
+          <button @click="renameTable" class="btn btn-sm btn-outline-primary">
+            <i class="fa-solid fa-check"></i>
+          </button>
+          &nbsp;
+          <button @click="cancelTableRename" class="btn btn-sm btn-outline-danger">
+            <i class="fa-solid fa-times"></i>
+          </button>
+        </div>
+      </div>
       <hr />
 
       <div v-if="!isNode">
@@ -53,6 +56,15 @@
       </div>
 
       <div class="schema_side-panel__edit-table-actions-container">
+        <button
+          class="btn btn-sm btn-outline-primary"
+          title="Cancel Edit"
+          @click="goBack"
+        >
+          <i class="fa-solid fa-long-arrow-left"></i>
+          Cancel Edit
+        </button>
+        &nbsp;
         <button
           class="btn btn-sm btn-outline-primary"
           title="Add Property"
@@ -72,14 +84,6 @@
           Drop Table
         </button>
         &nbsp;
-        <button
-          class="btn btn-sm btn-outline-secondary"
-          title="Rename Table"
-          v-if="false"
-        >
-          <i class="fa-solid fa-pencil"></i>
-          Rename Table
-        </button>
       </div>
       <br />
 
@@ -164,7 +168,7 @@
 import { useSettingsStore } from "../../store/SettingsStore";
 import { mapStores } from 'pinia'
 import SchemaPropertyEditCell from "./SchemaPropertyEditCell.vue";
-import { DATA_TYPES } from "../../utils/Constants";
+import { DATA_TYPES, PLACEHOLDER_NODE_TABLE, PLACEHOLDER_REL_TABLE } from "../../utils/Constants";
 export default {
   name: "SchemaSidebarEditView",
   components: {
@@ -176,7 +180,11 @@ export default {
     defaultNewProperty: {
       name: "",
       type: DATA_TYPES.INT64,
-    }
+    },
+    currLabel: "",
+    currLabelInputDebounce: null,
+    isEditingLabel: false,
+    oldLabel: "",
   }),
   props: {
     schema: {
@@ -192,16 +200,47 @@ export default {
       required: true,
     },
   },
+  watch: {
+    currLabel(newLabel) {
+      clearTimeout(this.currLabelInputDebounce);
+      this.currLabelInputDebounce = setTimeout(() => {
+        if (!this.isEditingLabel && newLabel !== this.label) {
+          this.isEditingLabel = true;
+          this.oldLabel = this.label;
+          this.$emit("setPlaceholder", this.label);
+        }
+        if (this.isEditingLabel) {
+          if (newLabel === this.oldLabel) {
+            return this.unsetPlaceholder();
+          }
+          else {
+            this.$nextTick(() => {
+              this.$emit("setPlaceholderLabel", {
+                newLabel,
+                isNode: this.isNode,
+              });
+            });
+          }
+        }
+      }, 300);
+    },
+  },
   computed: {
     ...mapStores(useSettingsStore),
     source() {
+      if (this.isEditingLabel) {
+        return this.schema.relTables.find(t => t.isPlaceholder).src;
+      }
       if (!this.schema || !this.label || this.isNode) {
         return null;
       }
       return this.schema.relTables.find(t => t.name === this.label).src;
     },
 
     destination() {
+      if (this.isEditingLabel) {
+        return this.schema.relTables.find(t => t.isPlaceholder).dst;
+      }
       if (!this.schema || !this.label || this.isNode) {
         return null;
       }
@@ -216,6 +255,12 @@ export default {
     },
 
     tableProperties() {
+      if (this.isEditingLabel) {
+        if (this.isNode) {
+          return this.schema.nodeTables.find(t => t.isPlaceholder).properties;
+        }
+        return this.schema.relTables.find(t => t.isPlaceholder).properties;
+      }
       if (!this.schema || !this.label) {
         return [];
       }
@@ -234,6 +279,38 @@ export default {
     getColor(label) {
       return this.settingsStore.colorForLabel(label);
     },
+    getBackgroundColorForEditingTable() {
+      if (!this.isEditingLabel) {
+        return this.getColor(this.label);
+      }
+      if (this.isNode) {
+        return this.getColor(PLACEHOLDER_NODE_TABLE);
+      }
+      return this.getColor(PLACEHOLDER_REL_TABLE);
+    },
+    renameTable() {
+      this.$emit("renameTable", {
+        oldLabel: this.oldLabel,
+        newLabel: this.currLabel,
+        isNode: this.isNode,
+      });
+    },
+    unsetPlaceholder() {
+      this.$emit("unsetPlaceholder", { originalLabel: this.oldLabel, isNode: this.isNode });
+      this.oldLabel = "";
+      this.isEditingLabel = false;
+    },
+    cancelTableRename() {
+      if (!this.isEditingLabel) {
+        return;
+      }
+      this.currLabel = this.oldLabel;
+    },
+    finishTableRename() {
+      this.currLabel = this.label;
+      this.isEditingLabel = false;
+      this.oldLabel = "";
+    },
     dropProperty(propertyName) {
       this.$emit("dropProperty", {
         table: this.label,
@@ -276,6 +353,18 @@ export default {
         defaultValue,
       });
     },
+    goBack() {
+      if (this.isEditingLabel) {
+        this.unsetPlaceholder();
+      }
+      this.$nextTick(() => {
+        this.$emit("back");
+      });
+
+    },
+  },
+  mounted() {
+    this.currLabel = this.label;
   },
 };
 </script>