From 8b93c497784ea431f9747c5afb53f6ef075ea9d6 Mon Sep 17 00:00:00 2001
From: Fabio Di Stasio <fabio286@gmail.com>
Date: Wed, 18 Aug 2021 17:28:41 +0200
Subject: [PATCH] feat: new create view tabs

---
 src/renderer/components/ModalNewTable.vue     | 130 --------
 src/renderer/components/ModalNewView.vue      | 192 ------------
 src/renderer/components/Workspace.vue         |  28 +-
 .../components/WorkspaceExploreBar.vue        |  77 +----
 .../WorkspaceExploreBarSchemaContext.vue      |   6 +-
 .../components/WorkspaceTabNewTable.vue       |  14 +-
 .../components/WorkspaceTabNewView.vue        | 286 ++++++++++++++++++
 .../components/WorkspaceTabPropsTable.vue     |   6 +-
 .../WorkspaceTabPropsTableFIelds.vue          |   2 +-
 .../WorkspaceTabPropsTableFields.vue          |   2 +-
 src/renderer/i18n/en-US.js                    |   3 +-
 11 files changed, 330 insertions(+), 416 deletions(-)
 delete mode 100644 src/renderer/components/ModalNewTable.vue
 delete mode 100644 src/renderer/components/ModalNewView.vue
 create mode 100644 src/renderer/components/WorkspaceTabNewView.vue

diff --git a/src/renderer/components/ModalNewTable.vue b/src/renderer/components/ModalNewTable.vue
deleted file mode 100644
index 09fc2975..00000000
--- a/src/renderer/components/ModalNewTable.vue
+++ /dev/null
@@ -1,130 +0,0 @@
-<template>
-   <ConfirmModal
-      :confirm-text="$t('word.confirm')"
-      size="400"
-      @confirm="confirmOptionsChange"
-      @hide="$emit('close')"
-   >
-      <template :slot="'header'">
-         <div class="d-flex">
-            <i class="mdi mdi-24px mdi-table-plus mr-1" /> {{ $t('message.createNewTable') }}
-         </div>
-      </template>
-      <div :slot="'body'">
-         <form class="form-horizontal">
-            <div class="form-group">
-               <label class="form-label col-4">
-                  {{ $t('word.name') }}
-               </label>
-               <div class="column">
-                  <input
-                     ref="firstInput"
-                     v-model="localOptions.name"
-                     class="form-input"
-                     type="text"
-                  >
-               </div>
-            </div>
-            <div v-if="workspace.customizations.comment" class="form-group">
-               <label class="form-label col-4">
-                  {{ $t('word.comment') }}
-               </label>
-               <div class="column">
-                  <input
-                     v-model="localOptions.comment"
-                     class="form-input"
-                     type="text"
-                  >
-               </div>
-            </div>
-            <div v-if="workspace.customizations.collations" class="form-group">
-               <label class="form-label col-4">
-                  {{ $t('word.collation') }}
-               </label>
-               <div class="column">
-                  <select v-model="localOptions.collation" class="form-select">
-                     <option
-                        v-for="collation in workspace.collations"
-                        :key="collation.id"
-                        :value="collation.collation"
-                     >
-                        {{ collation.collation }}
-                     </option>
-                  </select>
-               </div>
-            </div>
-            <div v-if="workspace.customizations.engines" class="form-group">
-               <label class="form-label col-4">
-                  {{ $t('word.engine') }}
-               </label>
-               <div class="column">
-                  <select v-model="localOptions.engine" class="form-select">
-                     <option
-                        v-for="engine in workspace.engines"
-                        :key="engine.name"
-                        :value="engine.name"
-                     >
-                        {{ engine.name }}
-                     </option>
-                  </select>
-               </div>
-            </div>
-         </form>
-      </div>
-   </ConfirmModal>
-</template>
-
-<script>
-import { mapGetters } from 'vuex';
-import ConfirmModal from '@/components/BaseConfirmModal';
-
-export default {
-   name: 'ModalNewTable',
-   components: {
-      ConfirmModal
-   },
-   props: {
-      workspace: Object
-   },
-   data () {
-      return {
-         localOptions: {
-            name: '',
-            comment: '',
-            collation: '',
-            engine: ''
-         },
-         isOptionsChanging: false
-      };
-   },
-   computed: {
-      ...mapGetters({
-         selectedWorkspace: 'workspaces/getSelected',
-         getDatabaseVariable: 'workspaces/getDatabaseVariable'
-      }),
-      defaultCollation () {
-         if (this.workspace.customizations.collations)
-            return this.getDatabaseVariable(this.selectedWorkspace, 'collation_server').value || '';
-         return '';
-      },
-      defaultEngine () {
-         if (this.workspace.customizations.engines)
-            return this.workspace.engines.find(engine => engine.isDefault).name;
-         return '';
-      }
-   },
-   mounted () {
-      this.localOptions.collation = this.defaultCollation;
-      this.localOptions.engine = this.defaultEngine;
-
-      setTimeout(() => {
-         this.$refs.firstInput.focus();
-      }, 20);
-   },
-   methods: {
-      confirmOptionsChange () {
-         this.$emit('open-create-table-editor', this.localOptions);
-      }
-   }
-};
-</script>
diff --git a/src/renderer/components/ModalNewView.vue b/src/renderer/components/ModalNewView.vue
deleted file mode 100644
index cef429e3..00000000
--- a/src/renderer/components/ModalNewView.vue
+++ /dev/null
@@ -1,192 +0,0 @@
-<template>
-   <ConfirmModal
-      :confirm-text="$t('word.confirm')"
-      size="medium"
-      @confirm="confirmOptionsChange"
-      @hide="$emit('close')"
-   >
-      <template :slot="'header'">
-         <div class="d-flex">
-            <i class="mdi mdi-24px mdi-eye-plus mr-1" /> {{ $t('message.createNewView') }}
-         </div>
-      </template>
-      <div :slot="'body'">
-         <div class="container">
-            <div class="columns mb-4">
-               <div class="column col-6">
-                  <div class="form-group">
-                     <label class="form-label">{{ $t('word.name') }}</label>
-                     <input
-                        ref="firstInput"
-                        v-model="localView.name"
-                        class="form-input"
-                        type="text"
-                     >
-                  </div>
-               </div>
-               <div class="column col-6">
-                  <div v-if="workspace.customizations.definer" class="form-group">
-                     <label class="form-label">{{ $t('word.definer') }}</label>
-                     <select v-model="localView.definer" class="form-select">
-                        <option value="">
-                           {{ $t('message.currentUser') }}
-                        </option>
-                        <option
-                           v-for="user in workspace.users"
-                           :key="`${user.name}@${user.host}`"
-                           :value="`\`${user.name}\`@\`${user.host}\``"
-                        >
-                           {{ user.name }}@{{ user.host }}
-                        </option>
-                     </select>
-                  </div>
-               </div>
-            </div>
-            <div class="columns">
-               <div class="column col-4">
-                  <div v-if="workspace.customizations.viewSqlSecurity" class="form-group">
-                     <label class="form-label">{{ $t('message.sqlSecurity') }}</label>
-                     <label class="form-radio">
-                        <input
-                           v-model="localView.security"
-                           type="radio"
-                           name="security"
-                           value="DEFINER"
-                        >
-                        <i class="form-icon" /> DEFINER
-                     </label>
-                     <label class="form-radio">
-                        <input
-                           v-model="localView.security"
-                           type="radio"
-                           name="security"
-                           value="INVOKER"
-                        >
-                        <i class="form-icon" /> INVOKER
-                     </label>
-                  </div>
-               </div>
-               <div class="column col-4">
-                  <div v-if="workspace.customizations.viewAlgorithm" class="form-group">
-                     <label class="form-label">{{ $t('word.algorithm') }}</label>
-                     <label class="form-radio">
-                        <input
-                           v-model="localView.algorithm"
-                           type="radio"
-                           name="algorithm"
-                           value="UNDEFINED"
-                        >
-                        <i class="form-icon" /> UNDEFINED
-                     </label>
-                     <label class="form-radio">
-                        <input
-                           v-model="localView.algorithm"
-                           type="radio"
-                           value="MERGE"
-                           name="algorithm"
-                        >
-                        <i class="form-icon" /> MERGE
-                     </label>
-                     <label class="form-radio">
-                        <input
-                           v-model="localView.algorithm"
-                           type="radio"
-                           value="TEMPTABLE"
-                           name="algorithm"
-                        >
-                        <i class="form-icon" /> TEMPTABLE
-                     </label>
-                  </div>
-               </div>
-               <div class="column col-4">
-                  <div v-if="workspace.customizations.viewUpdateOption" class="form-group">
-                     <label class="form-label">{{ $t('message.updateOption') }}</label>
-                     <label class="form-radio">
-                        <input
-                           v-model="localView.updateOption"
-                           type="radio"
-                           name="update"
-                           value=""
-                        >
-                        <i class="form-icon" /> None
-                     </label>
-                     <label class="form-radio">
-                        <input
-                           v-model="localView.updateOption"
-                           type="radio"
-                           name="update"
-                           value="CASCADED"
-                        >
-                        <i class="form-icon" /> CASCADED
-                     </label>
-                     <label class="form-radio">
-                        <input
-                           v-model="localView.updateOption"
-                           type="radio"
-                           name="update"
-                           value="LOCAL"
-                        >
-                        <i class="form-icon" /> LOCAL
-                     </label>
-                  </div>
-               </div>
-            </div>
-         </div>
-         <div class="workspace-query-results column col-12 mt-2">
-            <label class="form-label ml-2">{{ $t('message.selectStatement') }}</label>
-            <QueryEditor
-               ref="queryEditor"
-               :value.sync="localView.sql"
-               :workspace="workspace"
-               :schema="schema"
-               :height="editorHeight"
-            />
-         </div>
-      </div>
-   </ConfirmModal>
-</template>
-
-<script>
-import ConfirmModal from '@/components/BaseConfirmModal';
-import QueryEditor from '@/components/QueryEditor';
-
-export default {
-   name: 'ModalNewView',
-   components: {
-      ConfirmModal,
-      QueryEditor
-   },
-   props: {
-      workspace: Object
-   },
-   data () {
-      return {
-         localView: {
-            algorithm: 'UNDEFINED',
-            definer: '',
-            security: 'DEFINER',
-            updateOption: '',
-            sql: '',
-            name: ''
-         },
-         isOptionsChanging: false,
-         editorHeight: 300
-      };
-   },
-   computed: {
-      schema () {
-         return this.workspace.breadcrumbs.schema;
-      }
-   },
-   mounted () {
-      setTimeout(() => {
-         this.$refs.firstInput.focus();
-      }, 20);
-   },
-   methods: {
-      confirmOptionsChange () {
-         this.$emit('open-create-view-editor', this.localView);
-      }
-   }
-};
-</script>
diff --git a/src/renderer/components/Workspace.vue b/src/renderer/components/Workspace.vue
index 8953ca62..1567884c 100644
--- a/src/renderer/components/Workspace.vue
+++ b/src/renderer/components/Workspace.vue
@@ -102,6 +102,23 @@
                   </span>
                </a>
 
+               <a
+                  v-else-if="tab.type === 'new-view'"
+                  class="tab-link"
+                  :class="{'badge': tab.isChanged}"
+               >
+                  <i class="mdi mdi-shape-square-plus mdi-18px mr-1" />
+                  <span :title="`${$t('word.new').toUpperCase()}: ${$tc(`word.${tab.elementType}`)}`">
+                     {{ $t('message.newView') }}
+                     <span
+                        class="btn btn-clear"
+                        :title="$t('word.close')"
+                        @mousedown.left.stop
+                        @click.stop="closeTab(tab)"
+                     />
+                  </span>
+               </a>
+
                <a
                   v-else-if="tab.type === 'view-props'"
                   class="tab-link"
@@ -225,7 +242,6 @@
                :tab="tab"
                :connection="connection"
                :is-selected="selectedTab === tab.uid"
-               :table="tab.elementName"
                :schema="tab.schema"
             />
             <WorkspaceTabPropsTable
@@ -236,6 +252,14 @@
                :table="tab.elementName"
                :schema="tab.schema"
             />
+            <WorkspaceTabNewView
+               v-else-if="tab.type === 'new-view'"
+               :key="tab.uid"
+               :tab="tab"
+               :connection="connection"
+               :is-selected="selectedTab === tab.uid"
+               :schema="tab.schema"
+            />
             <WorkspaceTabPropsView
                v-else-if="tab.type === 'view-props'"
                :key="tab.uid"
@@ -312,6 +336,7 @@ import WorkspaceTabQuery from '@/components/WorkspaceTabQuery';
 import WorkspaceTabTable from '@/components/WorkspaceTabTable';
 
 import WorkspaceTabNewTable from '@/components/WorkspaceTabNewTable';
+import WorkspaceTabNewView from '@/components/WorkspaceTabNewView';
 
 import WorkspaceTabPropsTable from '@/components/WorkspaceTabPropsTable';
 import WorkspaceTabPropsView from '@/components/WorkspaceTabPropsView';
@@ -333,6 +358,7 @@ export default {
       WorkspaceTabQuery,
       WorkspaceTabTable,
       WorkspaceTabNewTable,
+      WorkspaceTabNewView,
       WorkspaceTabPropsTable,
       WorkspaceTabPropsView,
       WorkspaceTabPropsTrigger,
diff --git a/src/renderer/components/WorkspaceExploreBar.vue b/src/renderer/components/WorkspaceExploreBar.vue
index 50cb5d89..b964aec8 100644
--- a/src/renderer/components/WorkspaceExploreBar.vue
+++ b/src/renderer/components/WorkspaceExploreBar.vue
@@ -61,12 +61,6 @@
          @close="hideNewDBModal"
          @reload="refresh"
       />
-      <ModalNewView
-         v-if="isNewViewModal"
-         :workspace="workspace"
-         @close="hideCreateViewModal"
-         @open-create-view-editor="openCreateViewEditor"
-      />
       <ModalNewTrigger
          v-if="isNewTriggerModal"
          :workspace="workspace"
@@ -102,8 +96,8 @@
          :selected-schema="selectedSchema"
          :context-event="databaseContextEvent"
          @close-context="closeDatabaseContext"
-         @open-create-table-tab="openCreateTableTab"
-         @show-create-view-modal="showCreateViewModal"
+         @open-create-table-tab="openCreateElementTab('table')"
+         @open-create-view-tab="openCreateElementTab('view')"
          @show-create-trigger-modal="showCreateTriggerModal"
          @show-create-routine-modal="showCreateRoutineModal"
          @show-create-function-modal="showCreateFunctionModal"
@@ -146,8 +140,6 @@
 <script>
 import { mapGetters, mapActions } from 'vuex';
 
-import Tables from '@/ipc-api/Tables';
-import Views from '@/ipc-api/Views';
 import Triggers from '@/ipc-api/Triggers';
 import Routines from '@/ipc-api/Routines';
 import Functions from '@/ipc-api/Functions';
@@ -159,7 +151,6 @@ import TableContext from '@/components/WorkspaceExploreBarTableContext';
 import MiscContext from '@/components/WorkspaceExploreBarMiscContext';
 import MiscFolderContext from '@/components/WorkspaceExploreBarMiscFolderContext';
 import ModalNewSchema from '@/components/ModalNewSchema';
-import ModalNewView from '@/components/ModalNewView';
 import ModalNewTrigger from '@/components/ModalNewTrigger';
 import ModalNewRoutine from '@/components/ModalNewRoutine';
 import ModalNewFunction from '@/components/ModalNewFunction';
@@ -175,7 +166,6 @@ export default {
       MiscContext,
       MiscFolderContext,
       ModalNewSchema,
-      ModalNewView,
       ModalNewTrigger,
       ModalNewRoutine,
       ModalNewFunction,
@@ -298,42 +288,17 @@ export default {
       hideNewDBModal () {
          this.isNewDBModal = false;
       },
-      openCreateTableTab () {
+      openCreateElementTab (element) {
          this.closeDatabaseContext();
 
          this.newTab({
             uid: this.workspace.uid,
             schema: this.selectedSchema,
             elementName: '',
-            elementType: 'table',
-            type: 'new-table'
+            elementType: element,
+            type: `new-${element}`
          });
       },
-      hideCreateTableModal () {
-         this.isNewTableModal = false;
-      },
-      async openCreateTableEditor (payload) {
-         const params = {
-            uid: this.connection.uid,
-            schema: this.selectedSchema,
-            ...payload
-         };
-
-         const { status, response } = await Tables.createTable(params);
-
-         if (status === 'success') {
-            await this.refresh();
-            this.newTab({
-               uid: this.workspace.uid,
-               schema: this.selectedSchema,
-               elementName: payload.name,
-               elementType: 'table',
-               type: 'table-props'
-            });
-         }
-         else
-            this.addNotification({ status: 'error', message: response });
-      },
       openSchemaContext (payload) {
          this.selectedSchema = payload.schema;
          this.databaseContextEvent = payload.event;
@@ -369,38 +334,6 @@ export default {
       closeMiscFolderContext () {
          this.isMiscFolderContext = false;
       },
-      showCreateViewModal () {
-         this.closeDatabaseContext();
-         this.closeMiscFolderContext();
-         this.isNewViewModal = true;
-      },
-      hideCreateViewModal () {
-         this.isNewViewModal = false;
-      },
-      async openCreateViewEditor (payload) {
-         const params = {
-            uid: this.connection.uid,
-            schema: this.selectedSchema,
-            ...payload
-         };
-
-         const { status, response } = await Views.createView(params);
-
-         if (status === 'success') {
-            await this.refresh();
-            this.changeBreadcrumbs({ schema: this.selectedSchema, view: payload.name });
-
-            this.newTab({
-               uid: this.workspace.uid,
-               schema: this.selectedSchema,
-               elementName: payload.name,
-               elementType: 'view',
-               type: 'view-props'
-            });
-         }
-         else
-            this.addNotification({ status: 'error', message: response });
-      },
       showCreateTriggerModal () {
          this.closeDatabaseContext();
          this.closeMiscFolderContext();
diff --git a/src/renderer/components/WorkspaceExploreBarSchemaContext.vue b/src/renderer/components/WorkspaceExploreBarSchemaContext.vue
index 016723e4..c8de4b2b 100644
--- a/src/renderer/components/WorkspaceExploreBarSchemaContext.vue
+++ b/src/renderer/components/WorkspaceExploreBarSchemaContext.vue
@@ -17,7 +17,7 @@
             <div
                v-if="workspace.customizations.viewAdd"
                class="context-element"
-               @click="showCreateViewModal"
+               @click="openCreateViewTab"
             >
                <span class="d-flex"><i class="mdi mdi-18px mdi-table-eye text-light pr-1" /> {{ $t('word.view') }}</span>
             </div>
@@ -135,8 +135,8 @@ export default {
       openCreateTableTab () {
          this.$emit('open-create-table-tab');
       },
-      showCreateViewModal () {
-         this.$emit('show-create-view-modal');
+      openCreateViewTab () {
+         this.$emit('open-create-view-tab');
       },
       showCreateTriggerModal () {
          this.$emit('show-create-trigger-modal');
diff --git a/src/renderer/components/WorkspaceTabNewTable.vue b/src/renderer/components/WorkspaceTabNewTable.vue
index 63efc90f..da78502e 100644
--- a/src/renderer/components/WorkspaceTabNewTable.vue
+++ b/src/renderer/components/WorkspaceTabNewTable.vue
@@ -129,7 +129,7 @@
             :tab-uid="tabUid"
             :conn-uid="connection.uid"
             :index-types="workspace.indexTypes"
-            :table="table"
+            table="new"
             :schema="schema"
             mode="table"
             @duplicate-field="duplicateField"
@@ -142,7 +142,7 @@
       <WorkspaceTabPropsTableIndexesModal
          v-if="isIndexesModal"
          :local-indexes="localIndexes"
-         :table="table"
+         table="new"
          :fields="localFields"
          :index-types="workspace.indexTypes"
          :workspace="workspace"
@@ -187,7 +187,6 @@ export default {
       connection: Object,
       tab: Object,
       isSelected: Boolean,
-      table: String,
       schema: String
    },
    data () {
@@ -246,14 +245,6 @@ export default {
       }
    },
    watch: {
-      schema () {
-         if (this.isSelected)
-            this.lastTable = this.table;
-      },
-      table () {
-         if (this.isSelected)
-            this.lastTable = this.table;
-      },
       isSelected (val) {
          if (val)
             this.changeBreadcrumbs({ schema: this.schema });
@@ -357,7 +348,6 @@ export default {
             key: '',
             type: this.workspace.dataTypes[0].types[0].name,
             schema: this.schema,
-            table: this.table,
             numPrecision: null,
             numLength: this.workspace.dataTypes[0].types[0].length,
             datePrecision: null,
diff --git a/src/renderer/components/WorkspaceTabNewView.vue b/src/renderer/components/WorkspaceTabNewView.vue
new file mode 100644
index 00000000..3c7ce6e7
--- /dev/null
+++ b/src/renderer/components/WorkspaceTabNewView.vue
@@ -0,0 +1,286 @@
+<template>
+   <div v-show="isSelected" class="workspace-query-tab column col-12 columns col-gapless">
+      <div class="workspace-query-runner column col-12">
+         <div class="workspace-query-runner-footer">
+            <div class="workspace-query-buttons">
+               <button
+                  class="btn btn-primary btn-sm"
+                  :disabled="!isChanged"
+                  :class="{'loading':isSaving}"
+                  title="CTRL+S"
+                  @click="saveChanges"
+               >
+                  <i class="mdi mdi-24px mdi-content-save mr-1" />
+                  <span>{{ $t('word.save') }}</span>
+               </button>
+               <button
+                  :disabled="!isChanged"
+                  class="btn btn-link btn-sm mr-0"
+                  :title="$t('message.clearChanges')"
+                  @click="clearChanges"
+               >
+                  <i class="mdi mdi-24px mdi-delete-sweep mr-1" />
+                  <span>{{ $t('word.clear') }}</span>
+               </button>
+            </div>
+            <div class="workspace-query-info">
+               <div class="d-flex" :title="$t('word.schema')">
+                  <i class="mdi mdi-18px mdi-database mr-1" /><b>{{ schema }}</b>
+               </div>
+            </div>
+         </div>
+      </div>
+      <div class="container">
+         <div class="columns">
+            <div class="column col-auto">
+               <div class="form-group">
+                  <label class="form-label">{{ $t('word.name') }}</label>
+                  <input
+                     ref="firstInput"
+                     v-model="localView.name"
+                     class="form-input"
+                     type="text"
+                  >
+               </div>
+            </div>
+            <div class="column col-auto">
+               <div v-if="workspace.customizations.definer" class="form-group">
+                  <label class="form-label">{{ $t('word.definer') }}</label>
+                  <select
+                     v-if="workspace.users.length"
+                     v-model="localView.definer"
+                     class="form-select"
+                  >
+                     <option value="">
+                        {{ $t('message.currentUser') }}
+                     </option>
+                     <option v-if="!isDefinerInUsers" :value="originalView.definer">
+                        {{ originalView.definer.replaceAll('`', '') }}
+                     </option>
+                     <option
+                        v-for="user in workspace.users"
+                        :key="`${user.name}@${user.host}`"
+                        :value="`\`${user.name}\`@\`${user.host}\``"
+                     >
+                        {{ user.name }}@{{ user.host }}
+                     </option>
+                  </select>
+                  <select v-if="!workspace.users.length" class="form-select">
+                     <option value="">
+                        {{ $t('message.currentUser') }}
+                     </option>
+                  </select>
+               </div>
+            </div>
+            <div class="column col-auto mr-2">
+               <div v-if="workspace.customizations.viewSqlSecurity" class="form-group">
+                  <label class="form-label">{{ $t('message.sqlSecurity') }}</label>
+                  <select v-model="localView.security" class="form-select">
+                     <option>DEFINER</option>
+                     <option>INVOKER</option>
+                  </select>
+               </div>
+            </div>
+            <div class="column col-auto mr-2">
+               <div v-if="workspace.customizations.viewAlgorithm" class="form-group">
+                  <label class="form-label">{{ $t('word.algorithm') }}</label>
+                  <select v-model="localView.algorithm" class="form-select">
+                     <option>UNDEFINED</option>
+                     <option>MERGE</option>
+                     <option>TEMPTABLE</option>
+                  </select>
+               </div>
+            </div>
+            <div v-if="workspace.customizations.viewUpdateOption" class="column col-auto mr-2">
+               <div class="form-group">
+                  <label class="form-label">{{ $t('message.updateOption') }}</label>
+                  <select v-model="localView.updateOption" class="form-select">
+                     <option value="">
+                        None
+                     </option>
+                     <option>CASCADED</option>
+                     <option>LOCAL</option>
+                  </select>
+               </div>
+            </div>
+         </div>
+      </div>
+      <div class="workspace-query-results column col-12 mt-2 p-relative">
+         <BaseLoader v-if="isLoading" />
+         <label class="form-label ml-2">{{ $t('message.selectStatement') }}</label>
+         <QueryEditor
+            v-show="isSelected"
+            ref="queryEditor"
+            :value.sync="localView.sql"
+            :workspace="workspace"
+            :schema="schema"
+            :height="editorHeight"
+         />
+      </div>
+   </div>
+</template>
+
+<script>
+import { mapGetters, mapActions } from 'vuex';
+import BaseLoader from '@/components/BaseLoader';
+import QueryEditor from '@/components/QueryEditor';
+import Views from '@/ipc-api/Views';
+
+export default {
+   name: 'WorkspaceTabNewView',
+   components: {
+      BaseLoader,
+      QueryEditor
+   },
+   props: {
+      connection: Object,
+      tab: Object,
+      isSelected: Boolean,
+      schema: String
+   },
+   data () {
+      return {
+         isLoading: false,
+         isSaving: false,
+         originalView: {},
+         localView: {},
+         lastView: null,
+         sqlProxy: '',
+         editorHeight: 300
+      };
+   },
+   computed: {
+      ...mapGetters({
+         selectedWorkspace: 'workspaces/getSelected',
+         getWorkspace: 'workspaces/getWorkspace'
+      }),
+      workspace () {
+         return this.getWorkspace(this.connection.uid);
+      },
+      tabUid () {
+         return this.$vnode.key;
+      },
+      isChanged () {
+         return JSON.stringify(this.originalView) !== JSON.stringify(this.localView);
+      },
+      isDefinerInUsers () {
+         return this.originalView ? this.workspace.users.some(user => this.originalView.definer === `\`${user.name}\`@\`${user.host}\``) : true;
+      }
+   },
+   watch: {
+      isSelected (val) {
+         if (val) {
+            this.changeBreadcrumbs({ schema: this.schema, view: this.view });
+
+            setTimeout(() => {
+               this.resizeQueryEditor();
+            }, 50);
+         }
+      },
+      isChanged (val) {
+         this.setUnsavedChanges({ uid: this.connection.uid, tUid: this.tabUid, isChanged: val });
+      }
+   },
+   async created () {
+      this.originalView = {
+         algorithm: 'UNDEFINED',
+         definer: '',
+         security: 'DEFINER',
+         updateOption: '',
+         sql: '',
+         name: ''
+      };
+
+      this.localView = JSON.parse(JSON.stringify(this.originalView));
+
+      setTimeout(() => {
+         this.resizeQueryEditor();
+      }, 50);
+
+      window.addEventListener('keydown', this.onKey);
+   },
+   mounted () {
+      if (this.isSelected)
+         this.changeBreadcrumbs({ schema: this.schema });
+
+      setTimeout(() => {
+         this.$refs.firstInput.focus();
+      }, 100);
+
+      window.addEventListener('resize', this.resizeQueryEditor);
+   },
+   destroyed () {
+      window.removeEventListener('resize', this.resizeQueryEditor);
+   },
+   beforeDestroy () {
+      window.removeEventListener('keydown', this.onKey);
+   },
+   methods: {
+      ...mapActions({
+         addNotification: 'notifications/addNotification',
+         refreshStructure: 'workspaces/refreshStructure',
+         setUnsavedChanges: 'workspaces/setUnsavedChanges',
+         changeBreadcrumbs: 'workspaces/changeBreadcrumbs',
+         newTab: 'workspaces/newTab',
+         removeTab: 'workspaces/removeTab',
+         renameTabs: 'workspaces/renameTabs'
+      }),
+      async saveChanges () {
+         if (this.isSaving) return;
+         this.isSaving = true;
+
+         const params = {
+            uid: this.connection.uid,
+            schema: this.schema,
+            ...this.localView
+         };
+
+         try {
+            const { status, response } = await Views.createView(params);
+
+            if (status === 'success') {
+               await this.refreshStructure(this.connection.uid);
+
+               this.newTab({
+                  uid: this.connection.uid,
+                  schema: this.schema,
+                  elementName: this.localView.name,
+                  elementType: 'view',
+                  type: 'view-props'
+               });
+
+               this.removeTab({ uid: this.connection.uid, tab: this.tab.uid });
+            }
+            else
+               this.addNotification({ status: 'error', message: response });
+         }
+         catch (err) {
+            this.addNotification({ status: 'error', message: err.stack });
+         }
+
+         this.isSaving = false;
+      },
+      clearChanges () {
+         this.localView = JSON.parse(JSON.stringify(this.originalView));
+         this.$refs.queryEditor.editor.session.setValue(this.localView.sql);
+      },
+      resizeQueryEditor () {
+         if (this.$refs.queryEditor) {
+            const footer = document.getElementById('footer');
+            const size = window.innerHeight - this.$refs.queryEditor.$el.getBoundingClientRect().top - footer.offsetHeight;
+            this.editorHeight = size;
+            this.$refs.queryEditor.editor.resize();
+         }
+      },
+      onKey (e) {
+         if (this.isSelected) {
+            e.stopPropagation();
+            if (e.ctrlKey && e.keyCode === 83) { // CTRL + S
+               if (this.isChanged)
+                  this.saveChanges();
+            }
+         }
+      }
+   }
+};
+</script>
diff --git a/src/renderer/components/WorkspaceTabPropsTable.vue b/src/renderer/components/WorkspaceTabPropsTable.vue
index 6eb90956..10db2a23 100644
--- a/src/renderer/components/WorkspaceTabPropsTable.vue
+++ b/src/renderer/components/WorkspaceTabPropsTable.vue
@@ -132,7 +132,7 @@
       </div>
       <div class="workspace-query-results column col-12 p-relative">
          <BaseLoader v-if="isLoading" />
-         <WorkspaceTabPropsTableFIelds
+         <WorkspaceTabPropsTableFields
             v-if="localFields"
             ref="indexTable"
             :fields="localFields"
@@ -181,7 +181,7 @@ import { mapGetters, mapActions } from 'vuex';
 import { uidGen } from 'common/libs/uidGen';
 import Tables from '@/ipc-api/Tables';
 import BaseLoader from '@/components/BaseLoader';
-import WorkspaceTabPropsTableFIelds from '@/components/WorkspaceTabPropsTableFIelds';
+import WorkspaceTabPropsTableFields from '@/components/WorkspaceTabPropsTableFields';
 import WorkspaceTabPropsTableIndexesModal from '@/components/WorkspaceTabPropsTableIndexesModal';
 import WorkspaceTabPropsTableForeignModal from '@/components/WorkspaceTabPropsTableForeignModal';
 
@@ -189,7 +189,7 @@ export default {
    name: 'WorkspaceTabPropsTable',
    components: {
       BaseLoader,
-      WorkspaceTabPropsTableFIelds,
+      WorkspaceTabPropsTableFields,
       WorkspaceTabPropsTableIndexesModal,
       WorkspaceTabPropsTableForeignModal
    },
diff --git a/src/renderer/components/WorkspaceTabPropsTableFIelds.vue b/src/renderer/components/WorkspaceTabPropsTableFIelds.vue
index 30a3a755..a77cd8fa 100644
--- a/src/renderer/components/WorkspaceTabPropsTableFIelds.vue
+++ b/src/renderer/components/WorkspaceTabPropsTableFIelds.vue
@@ -130,7 +130,7 @@ import TableRow from '@/components/WorkspaceTabPropsTableRow';
 import TableContext from '@/components/WorkspaceTabPropsTableContext';
 
 export default {
-   name: 'WorkspaceTabPropsTableFIelds',
+   name: 'WorkspaceTabPropsTableFields',
    components: {
       TableRow,
       TableContext,
diff --git a/src/renderer/components/WorkspaceTabPropsTableFields.vue b/src/renderer/components/WorkspaceTabPropsTableFields.vue
index 30a3a755..a77cd8fa 100644
--- a/src/renderer/components/WorkspaceTabPropsTableFields.vue
+++ b/src/renderer/components/WorkspaceTabPropsTableFields.vue
@@ -130,7 +130,7 @@ import TableRow from '@/components/WorkspaceTabPropsTableRow';
 import TableContext from '@/components/WorkspaceTabPropsTableContext';
 
 export default {
-   name: 'WorkspaceTabPropsTableFIelds',
+   name: 'WorkspaceTabPropsTableFields',
    components: {
       TableRow,
       TableContext,
diff --git a/src/renderer/i18n/en-US.js b/src/renderer/i18n/en-US.js
index 9d72b5e0..7b4226b8 100644
--- a/src/renderer/i18n/en-US.js
+++ b/src/renderer/i18n/en-US.js
@@ -231,8 +231,9 @@ module.exports = {
       noSchema: 'No schema',
       restorePreviourSession: 'Restore previous session',
       runQuery: 'Run query',
+      thereAreNoTableFields: 'There are no table fields',
       newTable: 'New table',
-      thereAreNoTableFields: 'There are no table fields'
+      newView: 'New view'
    },
    faker: {
       address: 'Address',