From c54438d6d3bad38bc76dfcd61f58929fe30279cb Mon Sep 17 00:00:00 2001
From: Fabio Di Stasio <fabio286@gmail.com>
Date: Sat, 13 Nov 2021 11:34:30 +0100
Subject: [PATCH] feat(SQLite): connection add/edit masks

---
 .vscode/settings.json                         |  3 +-
 src/common/customizations/defaults.js         |  3 +
 src/common/customizations/index.js            |  3 +-
 src/common/customizations/mysql.js            |  2 +
 src/common/customizations/postgresql.js       |  2 +
 src/common/customizations/sqlite.js           | 81 +++++++++++++++++++
 .../WorkspaceAddConnectionPanel.vue           | 52 +++++++-----
 .../WorkspaceEditConnectionPanel.vue          | 47 +++++++----
 .../images/svg/{sqllite.svg => sqlite.svg}    |  0
 src/renderer/scss/_db-icons.scss              |  4 +
 .../store/modules/connections.store.js        | 24 ++++--
 11 files changed, 180 insertions(+), 41 deletions(-)
 create mode 100644 src/common/customizations/sqlite.js
 rename src/renderer/images/svg/{sqllite.svg => sqlite.svg} (100%)

diff --git a/.vscode/settings.json b/.vscode/settings.json
index 5b0c8130..649205af 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -3,7 +3,8 @@
       "UI",
       "core",
       "MySQL",
-      "PostgreSQL"
+      "PostgreSQL",
+      "SQLite"
    ],
    "svg.preview.background": "transparent"
 }
\ No newline at end of file
diff --git a/src/common/customizations/defaults.js b/src/common/customizations/defaults.js
index 062836a2..70b5295a 100644
--- a/src/common/customizations/defaults.js
+++ b/src/common/customizations/defaults.js
@@ -8,6 +8,9 @@ module.exports = {
    collations: false,
    engines: false,
    connectionSchema: false,
+   sslConnection: false,
+   sshConnection: false,
+   fileConnection: false,
    // Tools
    processesList: false,
    usersManagement: false,
diff --git a/src/common/customizations/index.js b/src/common/customizations/index.js
index 304889a4..931e18f2 100644
--- a/src/common/customizations/index.js
+++ b/src/common/customizations/index.js
@@ -1,5 +1,6 @@
 module.exports = {
    maria: require('./mysql'),
    mysql: require('./mysql'),
-   pg: require('./postgresql')
+   pg: require('./postgresql'),
+   sqlite: require('./sqlite')
 };
diff --git a/src/common/customizations/mysql.js b/src/common/customizations/mysql.js
index 673adea2..0b6c683e 100644
--- a/src/common/customizations/mysql.js
+++ b/src/common/customizations/mysql.js
@@ -10,6 +10,8 @@ module.exports = {
    connectionSchema: true,
    collations: true,
    engines: true,
+   sslConnection: true,
+   sshConnection: true,
    // Tools
    processesList: true,
    // Structure
diff --git a/src/common/customizations/postgresql.js b/src/common/customizations/postgresql.js
index b3547ccc..341aa538 100644
--- a/src/common/customizations/postgresql.js
+++ b/src/common/customizations/postgresql.js
@@ -8,6 +8,8 @@ module.exports = {
    defaultDatabase: 'postgres',
    // Core
    database: true,
+   sslConnection: true,
+   sshConnection: true,
    // Tools
    processesList: true,
    // Structure
diff --git a/src/common/customizations/sqlite.js b/src/common/customizations/sqlite.js
new file mode 100644
index 00000000..96e2a56f
--- /dev/null
+++ b/src/common/customizations/sqlite.js
@@ -0,0 +1,81 @@
+module.exports = {
+   // Defaults
+   defaultPort: null,
+   defaultUser: null,
+   defaultDatabase: null,
+   // Core
+   database: false,
+   collations: false,
+   engines: false,
+   connectionSchema: false,
+   fileConnection: true,
+   // Tools
+   processesList: false,
+   usersManagement: false,
+   variables: false,
+   // Structure
+   schemas: false,
+   tables: false,
+   views: false,
+   triggers: false,
+   triggerFunctions: false,
+   routines: false,
+   functions: false,
+   schedulers: false,
+   // Settings
+   elementsWrapper: '',
+   stringsWrapper: '"',
+   tableAdd: false,
+   viewAdd: false,
+   triggerAdd: false,
+   triggerFunctionAdd: false,
+   routineAdd: false,
+   functionAdd: false,
+   schedulerAdd: false,
+   databaseEdit: false,
+   schemaEdit: false,
+   tableSettings: false,
+   viewSettings: false,
+   triggerSettings: false,
+   triggerFunctionSettings: false,
+   routineSettings: false,
+   functionSettings: false,
+   schedulerSettings: false,
+   indexes: false,
+   foreigns: false,
+   sortableFields: false,
+   unsigned: false,
+   nullable: false,
+   zerofill: false,
+   tableOptions: false,
+   autoIncrement: false,
+   comment: false,
+   collation: false,
+   definer: false,
+   onUpdate: false,
+   tableArray: false,
+   viewAlgorithm: false,
+   viewSqlSecurity: false,
+   viewUpdateOption: false,
+   procedureDeterministic: false,
+   procedureDataAccess: false,
+   procedureSql: false,
+   procedureContext: false,
+   procedureLanguage: false,
+   functionDeterministic: false,
+   functionDataAccess: false,
+   functionSql: false,
+   functionContext: false,
+   functionLanguage: false,
+   triggerSql: false,
+   triggerStatementInCreation: false,
+   triggerMultipleEvents: false,
+   triggerTableInName: false,
+   triggerUpdateColumns: false,
+   triggerOnlyRename: false,
+   triggerEnableDisable: false,
+   triggerFunctionSql: false,
+   triggerFunctionlanguages: false,
+   parametersLength: false,
+   languages: false
+};
diff --git a/src/renderer/components/WorkspaceAddConnectionPanel.vue b/src/renderer/components/WorkspaceAddConnectionPanel.vue
index e8802235..ede77563 100644
--- a/src/renderer/components/WorkspaceAddConnectionPanel.vue
+++ b/src/renderer/components/WorkspaceAddConnectionPanel.vue
@@ -11,6 +11,7 @@
                   <a class="tab-link">{{ $t('word.general') }}</a>
                </li>
                <li
+                  v-if="customizations.sslConnection"
                   class="tab-item c-hand"
                   :class="{'active': selectedTab === 'ssl'}"
                   @click="selectTab('ssl')"
@@ -18,6 +19,7 @@
                   <a class="tab-link">{{ $t('word.ssl') }}</a>
                </li>
                <li
+                  v-if="customizations.sshConnection"
                   class="tab-item c-hand"
                   :class="{'active': selectedTab === 'ssh'}"
                   @click="selectTab('ssh')"
@@ -49,25 +51,17 @@
                         </div>
                         <div class="column col-8 col-sm-12">
                            <select v-model="connection.client" class="form-select">
-                              <option value="mysql">
-                                 MySQL
+                              <option
+                                 v-for="client in clients"
+                                 :key="client.slug"
+                                 :value="client.slug"
+                              >
+                                 {{ client.name }}
                               </option>
-                              <option value="maria">
-                                 MariaDB
-                              </option>
-                              <option value="pg">
-                                 PostgreSQL
-                              </option>
-                              <!-- <option value="mssql">
-                                       Microsoft SQL
-                                    </option>
-                                    <option value="oracledb">
-                                       Oracle DB
-                                    </option> -->
                            </select>
                         </div>
                      </div>
-                     <div class="form-group columns">
+                     <div v-if="!customizations.fileConnection" class="form-group columns">
                         <div class="column col-4 col-sm-12">
                            <label class="form-label">{{ $t('word.hostName') }}/IP</label>
                         </div>
@@ -79,7 +73,20 @@
                            >
                         </div>
                      </div>
-                     <div class="form-group columns">
+                     <div v-if="customizations.fileConnection" class="form-group columns">
+                        <div class="column col-4 col-sm-12">
+                           <label class="form-label">{{ $t('word.database') }}</label>
+                        </div>
+                        <div class="column col-8 col-sm-12">
+                           <BaseUploadInput
+                              :value="connection.databasePath"
+                              :message="$t('word.browse')"
+                              @clear="pathClear('databasePath')"
+                              @change="pathSelection($event, 'databasePath')"
+                           />
+                        </div>
+                     </div>
+                     <div v-if="!customizations.fileConnection" class="form-group columns">
                         <div class="column col-4 col-sm-12">
                            <label class="form-label">{{ $t('word.port') }}</label>
                         </div>
@@ -105,7 +112,7 @@
                            >
                         </div>
                      </div>
-                     <div class="form-group columns">
+                     <div v-if="!customizations.fileConnection" class="form-group columns">
                         <div class="column col-4 col-sm-12">
                            <label class="form-label">{{ $t('word.user') }}</label>
                         </div>
@@ -118,7 +125,7 @@
                            >
                         </div>
                      </div>
-                     <div class="form-group columns">
+                     <div v-if="!customizations.fileConnection" class="form-group columns">
                         <div class="column col-4 col-sm-12">
                            <label class="form-label">{{ $t('word.password') }}</label>
                         </div>
@@ -144,7 +151,7 @@
                            >
                         </div>
                      </div>
-                     <div class="form-group columns">
+                     <div v-if="!customizations.fileConnection" class="form-group columns">
                         <div class="column col-4 col-sm-12" />
                         <div class="column col-8 col-sm-12">
                            <label class="form-checkbox form-inline">
@@ -369,11 +376,18 @@ export default {
    },
    data () {
       return {
+         clients: [
+            { name: 'MySQL', slug: 'mysql' },
+            { name: 'MariaDB', slug: 'maria' },
+            { name: 'PostgreSQL', slug: 'pg' },
+            { name: 'SQLite', slug: 'sqlite' }
+         ],
          connection: {
             name: '',
             client: 'mysql',
             host: '127.0.0.1',
             database: null,
+            databasePath: '',
             port: null,
             user: null,
             password: '',
diff --git a/src/renderer/components/WorkspaceEditConnectionPanel.vue b/src/renderer/components/WorkspaceEditConnectionPanel.vue
index 01361862..55e5253e 100644
--- a/src/renderer/components/WorkspaceEditConnectionPanel.vue
+++ b/src/renderer/components/WorkspaceEditConnectionPanel.vue
@@ -11,6 +11,7 @@
                   <a class="tab-link">{{ $t('word.general') }}</a>
                </li>
                <li
+                  v-if="customizations.sslConnection"
                   class="tab-item c-hand"
                   :class="{'active': selectedTab === 'ssl'}"
                   @click="selectTab('ssl')"
@@ -18,6 +19,7 @@
                   <a class="tab-link">{{ $t('word.ssl') }}</a>
                </li>
                <li
+                  v-if="customizations.sshConnection"
                   class="tab-item c-hand"
                   :class="{'active': selectedTab === 'ssh'}"
                   @click="selectTab('ssh')"
@@ -49,19 +51,17 @@
                         </div>
                         <div class="column col-8 col-sm-12">
                            <select v-model="localConnection.client" class="form-select">
-                              <option value="mysql">
-                                 MySQL
-                              </option>
-                              <option value="maria">
-                                 MariaDB
-                              </option>
-                              <option value="pg">
-                                 PostgreSQL
+                              <option
+                                 v-for="client in clients"
+                                 :key="client.slug"
+                                 :value="client.slug"
+                              >
+                                 {{ client.name }}
                               </option>
                            </select>
                         </div>
                      </div>
-                     <div class="form-group columns">
+                     <div v-if="!customizations.fileConnection" class="form-group columns">
                         <div class="column col-4 col-sm-12">
                            <label class="form-label">{{ $t('word.hostName') }}/IP</label>
                         </div>
@@ -73,7 +73,20 @@
                            >
                         </div>
                      </div>
-                     <div class="form-group columns">
+                     <div v-if="customizations.fileConnection" class="form-group columns">
+                        <div class="column col-4 col-sm-12">
+                           <label class="form-label">{{ $t('word.database') }}</label>
+                        </div>
+                        <div class="column col-8 col-sm-12">
+                           <BaseUploadInput
+                              :value="localConnection.databasePath"
+                              :message="$t('word.browse')"
+                              @clear="pathClear('databasePath')"
+                              @change="pathSelection($event, 'databasePath')"
+                           />
+                        </div>
+                     </div>
+                     <div v-if="!customizations.fileConnection" class="form-group columns">
                         <div class="column col-4 col-sm-12">
                            <label class="form-label">{{ $t('word.port') }}</label>
                         </div>
@@ -99,7 +112,7 @@
                            >
                         </div>
                      </div>
-                     <div class="form-group columns">
+                     <div v-if="!customizations.fileConnection" class="form-group columns">
                         <div class="column col-4 col-sm-12">
                            <label class="form-label">{{ $t('word.user') }}</label>
                         </div>
@@ -112,7 +125,7 @@
                            >
                         </div>
                      </div>
-                     <div class="form-group columns">
+                     <div v-if="!customizations.fileConnection" class="form-group columns">
                         <div class="column col-4 col-sm-12">
                            <label class="form-label">{{ $t('word.password') }}</label>
                         </div>
@@ -138,7 +151,7 @@
                            >
                         </div>
                      </div>
-                     <div class="form-group columns">
+                     <div v-if="!customizations.fileConnection" class="form-group columns">
                         <div class="column col-4 col-sm-12" />
                         <div class="column col-8 col-sm-12">
                            <label class="form-checkbox form-inline">
@@ -374,6 +387,12 @@ export default {
    },
    data () {
       return {
+         clients: [
+            { name: 'MySQL', slug: 'mysql' },
+            { name: 'MariaDB', slug: 'maria' },
+            { name: 'PostgreSQL', slug: 'pg' },
+            { name: 'SQLite', slug: 'sqlite' }
+         ],
          isConnecting: false,
          isTesting: false,
          isAsking: false,
@@ -383,7 +402,7 @@ export default {
    },
    computed: {
       customizations () {
-         return customizations[this.connection.client];
+         return customizations[this.localConnection.client];
       },
       isBusy () {
          return this.isConnecting || this.isTesting;
diff --git a/src/renderer/images/svg/sqllite.svg b/src/renderer/images/svg/sqlite.svg
similarity index 100%
rename from src/renderer/images/svg/sqllite.svg
rename to src/renderer/images/svg/sqlite.svg
diff --git a/src/renderer/scss/_db-icons.scss b/src/renderer/scss/_db-icons.scss
index 23e157d7..9124f837 100644
--- a/src/renderer/scss/_db-icons.scss
+++ b/src/renderer/scss/_db-icons.scss
@@ -20,6 +20,10 @@
     background-image: url("../images/svg/pg.svg");
   }
 
+  &.dbi-sqlite { 
+    background-image: url("../images/svg/sqlite.svg");
+  }
+
   &.dbi-oracledb {
     background-image: url("../images/svg/oracledb.svg");
   }
diff --git a/src/renderer/store/modules/connections.store.js b/src/renderer/store/modules/connections.store.js
index 5f352fff..e87c25d3 100644
--- a/src/renderer/store/modules/connections.store.js
+++ b/src/renderer/store/modules/connections.store.js
@@ -24,12 +24,24 @@ export default {
       getConnections: state => state.connections,
       getConnectionName: state => uid => {
          const connection = state.connections.filter(connection => connection.uid === uid)[0];
-         if (!connection) return '';
-         return connection.name
-            ? connection.name
-            : connection.ask
-               ? `${connection.host}:${connection.port}`
-               : `${connection.user + '@'}${connection.host}:${connection.port}`;
+         let connectionName = '';
+
+         if (connection.name)
+            connectionName = connection.name;
+         else if (connection.ask)
+            connectionName = `${connection.host}:${connection.port}`;
+         else if (connection.databasePath) {
+            let string = connection.databasePath.split(/[/\\]+/).pop();
+
+            if (string.length >= 30)
+               string = `...${string.slice(-30)}`;
+
+            connectionName = string;
+         }
+         else
+            connectionName = `${connection.user + '@'}${connection.host}:${connection.port}`;
+
+         return connectionName;
       }
    },
    mutations: {