finish rename feature

src/assets/styles/buttons.css

@@ -1,3 +1,12 @@
+button {
+  box-sizing: border-box;
+  height: 36px;
+  padding: 0 12px;
+  font-size: 14px;
+  font-weight: 600;
+  cursor: pointer;
+}
+
 button:focus {
   outline: none;
 }
@@ -5,16 +14,10 @@ button:focus {
 button.primary {
   background: var(--color-accent);
   border: 1px solid var(--color-accent-shade);
-  box-sizing: border-box;
   border-radius: var(--border-radius-big);
-  height: 36px;
-  padding: 0 12px;
   min-width: 83px;
   color: var(--color-text-light);
   text-shadow: var(--shadow);
-  font-size: 14px;
-  font-weight: 600;
-  cursor: pointer;
 }
 
 button.primary:hover {
@@ -22,8 +25,6 @@ button.primary:hover {
   border: 1px solid var(--color-accent-shade);
   color: var(--color-text-light);
   text-shadow: var(--shadow);
-  font-size: 14px;
-  font-weight: 600;
 }
 
 button.primary:disabled {
@@ -37,27 +38,20 @@ button.primary:disabled {
 button.secondary {
   background: white;
   border: 1px solid var(--color-border);
-  box-sizing: border-box;
   border-radius: var(--border-radius-big);
-  height: 36px;
-  padding: 0 12px;
   min-width: 83px;
   color: var(--color-text-base);
-  font-size: 14px;
+}
-  font-weight: 600;
+
-  cursor: pointer;
+button.secondary:hover {
+  border: 1px solid var(--color-text-light-2);
+  color: var(--color-text-active);
 }
 
 button.toolbar {
   background: transparent;
   border: none;
-  box-sizing: border-box;
-  height: 36px;
-  padding: 0 12px;
   color: var(--color-text-base);
-  font-size: 14px;
-  font-weight: 600;
-  cursor: pointer;
 }
 
 button.toolbar:hover {

src/assets/styles/dialogs.css

@@ -6,7 +6,7 @@
 .dialog-header {
   height: 46px;
   line-height: 46px;
-  padding: 0 12px;
+  padding: 0 22px 0 12px;
   color: var(--color-text-base);
   font-size: 16px;
   font-weight: 600;
@@ -28,3 +28,11 @@
   background-color: var(--color-bg-light);
   padding: 24px;
 }
+
+.dialog-buttons-container button {
+  margin-left: 16px;
+}
+
+.vm--overlay {
+  background-color: rgba(162, 177, 198, 0.5);
+}

src/assets/styles/textFields.css

@@ -1,18 +0,0 @@
-input[type="text"] {
-  background: var(--color-white);
-  border: 1px solid var(--color-border);
-  color: var(--color-text-base);
-  border-radius: var(--border-radius-medium-2);
-  height: 36px;
-  padding: 0 8px;
-  font-size: 12px;
-}
-
-input[type="text"]::placeholder {
-  color: var(--color-text-light-2);
-}
-
-input[type="text"]:focus {
-  outline: none;
-}
-

src/assets/styles/variables.css

@@ -10,6 +10,7 @@
   --color-blue-medium: #119DFF;
   --color-blue-dark: #0D76BF;
   --color-blue-dark-2: #2A3F5F;
+  --color-red: #EF553B;
 
 
 
@@ -25,6 +26,7 @@
   --color-text-light-2: var(--color-gray-medium);
   --color-text-base: var(--color-gray-dark);
   --color-text-active: var(--color-blue-dark-2);
+  --color-text-error: var(--color-red);
 
   --shadow: 0 1px 2px rgba(42, 63, 95, 0.7);
 

src/components/Schema.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <input type="text" placeholder="Search table"/>
+    <text-field placeholder="Search table" width="100%"/>
     <div id="db">
       <div @click="schemaVisible = !schemaVisible" class="db-name">
         <svg
@@ -50,10 +50,11 @@
 
 <script>
 import TableDescription from '@/components/TableDescription'
+import TextField from '@/components/TextField'
 
 export default {
   name: 'Schema',
-  components: { TableDescription },
+  components: { TableDescription, TextField },
   data () {
     return {
       schemaVisible: true,

src/components/TextField.vue

@@ -0,0 +1,63 @@
+<template>
+  <div>
+    <div :class="['text-field-label', { error: errorMsg }]">{{ label }}</div>
+    <input
+      type="text"
+      :placeholder="placeholder"
+      :class="{ error: errorMsg }"
+      :style="{ width: width }"
+      :value="value"
+      @input="$emit('input',  $event.target.value)"
+    />
+    <div class="text-field-error">{{ errorMsg }}</div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'textField',
+  props: ['placeholder', 'label', 'errorMsg', 'value', 'width']
+}
+</script>
+
+<style scoped>
+input {
+  background: var(--color-white);
+  border: 1px solid var(--color-border);
+  color: var(--color-text-base);
+  border-radius: var(--border-radius-medium-2);
+  height: 36px;
+  padding: 0 8px;
+  font-size: 13px;
+  box-sizing: border-box;
+}
+
+input::placeholder {
+  color: var(--color-text-light-2);
+}
+
+input:focus {
+  outline: none;
+}
+
+input.error {
+  border-color: var(--color-text-error);
+}
+.text-field-label {
+  font-size: 12px;
+  color: var(--color-text-base);
+  padding-left: 8px;
+  margin-bottom: 2px;
+}
+
+.text-field-label.error {
+  color: var(--color-text-error);
+}
+
+.text-field-error {
+  color: var(--color-text-error);
+  font-size: 12px;
+  padding-left: 8px;
+  margin-top: 2px;
+}
+</style>

src/components/svg/close.vue

@@ -1,5 +1,5 @@
 <template>
-  <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <svg @click.stop="$emit('click')" class="icon" width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
     <path d="M14 1.41L12.59 0L7 5.59L1.41 0L0 1.41L5.59 7L0 12.59L1.41 14L7 8.41L12.59 14L14 12.59L8.41 7L14 1.41Z" fill="#A2B1C6"/>
   </svg>
 </template>
@@ -9,3 +9,12 @@ export default {
   name: 'CloseIcon'
 }
 </script>
+
+<style scoped>
+.icon {
+  cursor: pointer;
+}
+.icon:hover path {
+  fill: var(--color-text-active);
+}
+</style>

src/main.js

@@ -7,7 +7,6 @@ import VModal from 'vue-js-modal'
 
 import '@/assets/styles/variables.css'
 import '@/assets/styles/buttons.css'
-import '@/assets/styles/textFields.css'
 import '@/assets/styles/tables.css'
 import '@/assets/styles/dialogs.css'
 

src/views/MyQueries.vue

@@ -8,7 +8,7 @@
           <button class="toolbar">Delete</button>
         </div>
         <div id="toolbar-search">
-          <input type="text" placeholder="Search query by name"/>
+          <text-field placeholder="Search query by name" width="300px"/>
         </div>
       </div>
       <div class="rounded-bg">
@@ -36,7 +36,7 @@
                 <div class="second-column">
                   <div class="date-container">{{ query.createdAt | date }}</div>
                   <div class="icons-container">
-                    <rename-icon @click="showRenameDialog" />
+                    <rename-icon @click="showRenameDialog(index)" />
                     <copy-icon />
                     <export-icon />
                     <delete-icon />
@@ -53,14 +53,19 @@
   <modal name="rename" classes="dialog" height="auto">
     <div class="dialog-header">
       Rename query
-      <close-icon />
+      <close-icon @click="$modal.hide('rename')"/>
     </div>
     <div class="dialog-body">
-      <input type="text"/>
+      <text-field
+        label="New query name"
+        :error-msg="errorMsg"
+        v-model="newName"
+        width="100%"
+      />
     </div>
     <div class="dialog-buttons-container">
-      <button class="secondary">Cancel</button>
+      <button class="secondary" @click="$modal.hide('rename')">Cancel</button>
-      <button class="primary">Rename</button>
+      <button class="primary" @click="renameQuery">Rename</button>
     </div>
   </modal>
 </div>
@@ -72,6 +77,7 @@ import CopyIcon from '@/components/svg/copy'
 import ExportIcon from '@/components/svg/export'
 import DeleteIcon from '@/components/svg/delete'
 import CloseIcon from '@/components/svg/close'
+import TextField from '@/components/TextField'
 
 export default {
   name: 'MyQueries',
@@ -80,11 +86,15 @@ export default {
     CopyIcon,
     ExportIcon,
     DeleteIcon,
-    CloseIcon
+    CloseIcon,
+    TextField
   },
   data () {
     return {
-      queries: []
+      queries: [],
+      newName: null,
+      currentQueryIndex: null,
+      errorMsg: null
     }
   },
   created () {
@@ -120,8 +130,29 @@ export default {
       this.$store.commit('setCurrentTabId', tab.id)
       this.$router.push('/editor')
     },
-    showRenameDialog () {
+    showRenameDialog (index) {
+      this.errorMsg = null
+      this.currentQueryIndex = index
+      this.newName = this.queries[this.currentQueryIndex].name
       this.$modal.show('rename')
+    },
+    renameQuery () {
+      if (!this.newName) {
+        this.errorMsg = 'Query name can\'t be empty'
+        return
+      }
+      const currentQuery = this.queries[this.currentQueryIndex]
+      currentQuery.name = this.newName
+      this.$set(this.queries, this.currentQueryIndex, currentQuery)
+      this.$modal.hide('rename')
+      this.saveQueriesInLocalStorage()
+      const tabIndex = this.$store.state.tabs.findIndex(tab => tab.id === currentQuery.id)
+      if (tabIndex >= 0) {
+        this.$store.commit('updateTabName', { index: tabIndex, newName: this.newName })
+      }
+    },
+    saveQueriesInLocalStorage () {
+      localStorage.setItem('myQueries', JSON.stringify(this.queries))
     }
   }
 }
@@ -135,10 +166,13 @@ export default {
 #my-queries-toolbar {
   display: flex;
   justify-content: space-between;
+  margin-bottom: 18px;
+  margin: 0 auto 8px;
+  max-width: 1500px;
+  width: 100%;
 }
 
-.rounded-bg,
+.rounded-bg {
-#my-queries-toolbar {
   margin: 0 auto;
   max-width: 1500px;
   width: 100%;
@@ -191,4 +225,7 @@ tbody tr:hover td {
 tbody tr:hover .icons-container {
   display: block;
 }
+.dialog input {
+  width: 100%;
+}
 </style>