feat(SQLite): connection add/edit masks

This commit is contained in:
Fabio Di Stasio 2021-11-13 11:34:30 +01:00
parent b3f10220b3
commit c54438d6d3
11 changed files with 180 additions and 41 deletions

View File

@ -3,7 +3,8 @@
"UI",
"core",
"MySQL",
"PostgreSQL"
"PostgreSQL",
"SQLite"
],
"svg.preview.background": "transparent"
}

View File

@ -8,6 +8,9 @@ module.exports = {
collations: false,
engines: false,
connectionSchema: false,
sslConnection: false,
sshConnection: false,
fileConnection: false,
// Tools
processesList: false,
usersManagement: false,

View File

@ -1,5 +1,6 @@
module.exports = {
maria: require('./mysql'),
mysql: require('./mysql'),
pg: require('./postgresql')
pg: require('./postgresql'),
sqlite: require('./sqlite')
};

View File

@ -10,6 +10,8 @@ module.exports = {
connectionSchema: true,
collations: true,
engines: true,
sslConnection: true,
sshConnection: true,
// Tools
processesList: true,
// Structure

View File

@ -8,6 +8,8 @@ module.exports = {
defaultDatabase: 'postgres',
// Core
database: true,
sslConnection: true,
sshConnection: true,
// Tools
processesList: true,
// Structure

View File

@ -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
};

View File

@ -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: '',

View File

@ -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;

View File

Before

Width:  |  Height:  |  Size: 1004 B

After

Width:  |  Height:  |  Size: 1004 B

View File

@ -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");
}

View File

@ -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: {