mirror of https://github.com/Fabio286/antares.git
refactor: teleport for modals
This commit is contained in:
parent
6780401cb7
commit
8b04a2b7dd
|
|
@ -1,45 +1,47 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="modal active" :class="modalSizeClass">
|
<Teleport to="#window-content">
|
||||||
<a class="modal-overlay" @click="hideModal" />
|
<div class="modal active" :class="modalSizeClass">
|
||||||
<div class="modal-container">
|
<a class="modal-overlay" @click="hideModal" />
|
||||||
<div v-if="hasHeader" class="modal-header pl-2">
|
<div class="modal-container">
|
||||||
<div class="modal-title h6">
|
<div v-if="hasHeader" class="modal-header pl-2">
|
||||||
<slot name="header" />
|
<div class="modal-title h6">
|
||||||
|
<slot name="header" />
|
||||||
|
</div>
|
||||||
|
<a class="btn btn-clear float-right" @click="hideModal" />
|
||||||
</div>
|
</div>
|
||||||
<a class="btn btn-clear float-right" @click="hideModal" />
|
<div v-if="hasDefault" class="modal-header">
|
||||||
</div>
|
<div class="modal-title h6">
|
||||||
<div v-if="hasDefault" class="modal-header">
|
<slot />
|
||||||
<div class="modal-title h6">
|
</div>
|
||||||
<slot />
|
<a class="btn btn-clear float-right" @click="hideModal" />
|
||||||
</div>
|
</div>
|
||||||
<a class="btn btn-clear float-right" @click="hideModal" />
|
<div v-if="hasBody" class="modal-body">
|
||||||
</div>
|
<a
|
||||||
<div v-if="hasBody" class="modal-body">
|
v-if="!hasHeader && !hasDefault"
|
||||||
<a
|
class="btn btn-clear float-right"
|
||||||
v-if="!hasHeader && !hasDefault"
|
@click="hideModal"
|
||||||
class="btn btn-clear float-right"
|
/>
|
||||||
@click="hideModal"
|
<div class="content">
|
||||||
/>
|
<slot name="body" />
|
||||||
<div class="content">
|
</div>
|
||||||
<slot name="body" />
|
</div>
|
||||||
|
<div v-if="!hideFooter" class="modal-footer pt-0">
|
||||||
|
<button
|
||||||
|
class="btn btn-primary mr-2"
|
||||||
|
@click.stop="confirmModal"
|
||||||
|
>
|
||||||
|
{{ confirmText || $t('word.confirm') }}
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
class="btn btn-link"
|
||||||
|
@click="hideModal"
|
||||||
|
>
|
||||||
|
{{ cancelText || $t('word.cancel') }}
|
||||||
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
<div v-if="!hideFooter" class="modal-footer">
|
|
||||||
<button
|
|
||||||
class="btn btn-primary mr-2"
|
|
||||||
@click.stop="confirmModal"
|
|
||||||
>
|
|
||||||
{{ confirmText || $t('word.confirm') }}
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
class="btn btn-link"
|
|
||||||
@click="hideModal"
|
|
||||||
>
|
|
||||||
{{ cancelText || $t('word.cancel') }}
|
|
||||||
</button>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</Teleport>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
|
|
||||||
|
|
@ -1,56 +1,58 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="modal active modal-sm">
|
<Teleport to="#window-content">
|
||||||
<a class="modal-overlay" />
|
<div class="modal active modal-sm">
|
||||||
<div class="modal-container p-0">
|
<a class="modal-overlay" />
|
||||||
<div class="modal-header pl-2">
|
<div class="modal-container p-0">
|
||||||
<div class="modal-title h6">
|
<div class="modal-header pl-2">
|
||||||
<div class="d-flex">
|
<div class="modal-title h6">
|
||||||
<i class="mdi mdi-24px mdi-key-variant mr-1" /> {{ $t('word.credentials') }}
|
<div class="d-flex">
|
||||||
|
<i class="mdi mdi-24px mdi-key-variant mr-1" /> {{ $t('word.credentials') }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<a class="btn btn-clear c-hand" @click.stop="closeModal" />
|
||||||
|
</div>
|
||||||
|
<div class="modal-body pb-0">
|
||||||
|
<div class="content">
|
||||||
|
<form class="form-horizontal">
|
||||||
|
<div class="form-group">
|
||||||
|
<div class="col-3">
|
||||||
|
<label class="form-label">{{ $t('word.user') }}</label>
|
||||||
|
</div>
|
||||||
|
<div class="col-9">
|
||||||
|
<input
|
||||||
|
ref="firstInput"
|
||||||
|
v-model="credentials.user"
|
||||||
|
class="form-input"
|
||||||
|
type="text"
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<div class="col-3">
|
||||||
|
<label class="form-label">{{ $t('word.password') }}</label>
|
||||||
|
</div>
|
||||||
|
<div class="col-9">
|
||||||
|
<input
|
||||||
|
v-model="credentials.password"
|
||||||
|
class="form-input"
|
||||||
|
type="password"
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<a class="btn btn-clear c-hand" @click.stop="closeModal" />
|
<div class="modal-footer">
|
||||||
</div>
|
<button class="btn btn-primary mr-2" @click.stop="sendCredentials">
|
||||||
<div class="modal-body pb-0">
|
{{ $t('word.send') }}
|
||||||
<div class="content">
|
</button>
|
||||||
<form class="form-horizontal">
|
<button class="btn btn-link" @click.stop="closeModal">
|
||||||
<div class="form-group">
|
{{ $t('word.close') }}
|
||||||
<div class="col-3">
|
</button>
|
||||||
<label class="form-label">{{ $t('word.user') }}</label>
|
|
||||||
</div>
|
|
||||||
<div class="col-9">
|
|
||||||
<input
|
|
||||||
ref="firstInput"
|
|
||||||
v-model="credentials.user"
|
|
||||||
class="form-input"
|
|
||||||
type="text"
|
|
||||||
>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="form-group">
|
|
||||||
<div class="col-3">
|
|
||||||
<label class="form-label">{{ $t('word.password') }}</label>
|
|
||||||
</div>
|
|
||||||
<div class="col-9">
|
|
||||||
<input
|
|
||||||
v-model="credentials.password"
|
|
||||||
class="form-input"
|
|
||||||
type="password"
|
|
||||||
>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</form>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="modal-footer">
|
|
||||||
<button class="btn btn-primary mr-2" @click.stop="sendCredentials">
|
|
||||||
{{ $t('word.send') }}
|
|
||||||
</button>
|
|
||||||
<button class="btn btn-link" @click.stop="closeModal">
|
|
||||||
{{ $t('word.close') }}
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</Teleport>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
|
|
||||||
|
|
@ -1,68 +1,70 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="modal active">
|
<Teleport to="#window-content">
|
||||||
<a class="modal-overlay" @click.stop="closeModal" />
|
<div class="modal active">
|
||||||
<div class="modal-container p-0">
|
<a class="modal-overlay" @click.stop="closeModal" />
|
||||||
<div class="modal-header pl-2">
|
<div class="modal-container p-0">
|
||||||
<div class="modal-title h6">
|
<div class="modal-header pl-2">
|
||||||
<div class="d-flex">
|
<div class="modal-title h6">
|
||||||
<i class="mdi mdi-24px mdi-database-edit mr-1" />
|
<div class="d-flex">
|
||||||
<span class="cut-text">{{ $t('message.editSchema') }}</span>
|
<i class="mdi mdi-24px mdi-database-edit mr-1" />
|
||||||
|
<span class="cut-text">{{ $t('message.editSchema') }}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<a class="btn btn-clear c-hand" @click.stop="closeModal" />
|
||||||
|
</div>
|
||||||
|
<div class="modal-body pb-0">
|
||||||
|
<div class="content">
|
||||||
|
<form class="form-horizontal">
|
||||||
|
<div class="form-group">
|
||||||
|
<div class="col-3">
|
||||||
|
<label class="form-label">{{ $t('word.name') }}</label>
|
||||||
|
</div>
|
||||||
|
<div class="col-9">
|
||||||
|
<input
|
||||||
|
v-model="database.name"
|
||||||
|
class="form-input"
|
||||||
|
type="text"
|
||||||
|
required
|
||||||
|
:placeholder="$t('message.schemaName')"
|
||||||
|
readonly
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<div class="col-3">
|
||||||
|
<label class="form-label">{{ $t('word.collation') }}</label>
|
||||||
|
</div>
|
||||||
|
<div class="col-9">
|
||||||
|
<select
|
||||||
|
ref="firstInput"
|
||||||
|
v-model="database.collation"
|
||||||
|
class="form-select"
|
||||||
|
>
|
||||||
|
<option
|
||||||
|
v-for="collation in collations"
|
||||||
|
:key="collation.id"
|
||||||
|
:value="collation.collation"
|
||||||
|
>
|
||||||
|
{{ collation.collation }}
|
||||||
|
</option>
|
||||||
|
</select>
|
||||||
|
<small>{{ $t('message.serverDefault') }}: {{ defaultCollation }}</small>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<a class="btn btn-clear c-hand" @click.stop="closeModal" />
|
<div class="modal-footer">
|
||||||
</div>
|
<button class="btn btn-primary mr-2" @click.stop="updateSchema">
|
||||||
<div class="modal-body pb-0">
|
{{ $t('word.update') }}
|
||||||
<div class="content">
|
</button>
|
||||||
<form class="form-horizontal">
|
<button class="btn btn-link" @click.stop="closeModal">
|
||||||
<div class="form-group">
|
{{ $t('word.close') }}
|
||||||
<div class="col-3">
|
</button>
|
||||||
<label class="form-label">{{ $t('word.name') }}</label>
|
|
||||||
</div>
|
|
||||||
<div class="col-9">
|
|
||||||
<input
|
|
||||||
v-model="database.name"
|
|
||||||
class="form-input"
|
|
||||||
type="text"
|
|
||||||
required
|
|
||||||
:placeholder="$t('message.schemaName')"
|
|
||||||
readonly
|
|
||||||
>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="form-group">
|
|
||||||
<div class="col-3">
|
|
||||||
<label class="form-label">{{ $t('word.collation') }}</label>
|
|
||||||
</div>
|
|
||||||
<div class="col-9">
|
|
||||||
<select
|
|
||||||
ref="firstInput"
|
|
||||||
v-model="database.collation"
|
|
||||||
class="form-select"
|
|
||||||
>
|
|
||||||
<option
|
|
||||||
v-for="collation in collations"
|
|
||||||
:key="collation.id"
|
|
||||||
:value="collation.collation"
|
|
||||||
>
|
|
||||||
{{ collation.collation }}
|
|
||||||
</option>
|
|
||||||
</select>
|
|
||||||
<small>{{ $t('message.serverDefault') }}: {{ defaultCollation }}</small>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</form>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="modal-footer">
|
|
||||||
<button class="btn btn-primary mr-2" @click.stop="updateSchema">
|
|
||||||
{{ $t('word.update') }}
|
|
||||||
</button>
|
|
||||||
<button class="btn btn-link" @click.stop="closeModal">
|
|
||||||
{{ $t('word.close') }}
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</Teleport>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
|
|
||||||
|
|
@ -1,270 +1,272 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="modal active">
|
<Teleport to="#window-content">
|
||||||
<a class="modal-overlay" @click.stop="closeModal" />
|
<div class="modal active">
|
||||||
<div class="modal-container p-0">
|
<a class="modal-overlay" @click.stop="closeModal" />
|
||||||
<div class="modal-header pl-2">
|
<div class="modal-container p-0">
|
||||||
<div class="modal-title h6">
|
<div class="modal-header pl-2">
|
||||||
<div class="d-flex">
|
<div class="modal-title h6">
|
||||||
<i class="mdi mdi-24px mdi-database-arrow-down mr-1" />
|
<div class="d-flex">
|
||||||
<span class="cut-text">{{ $t('message.exportSchema') }}</span>
|
<i class="mdi mdi-24px mdi-database-arrow-down mr-1" />
|
||||||
</div>
|
<span class="cut-text">{{ $t('message.exportSchema') }}</span>
|
||||||
</div>
|
|
||||||
<a class="btn btn-clear c-hand" @click.stop="closeModal" />
|
|
||||||
</div>
|
|
||||||
<div class="modal-body pb-0">
|
|
||||||
<div class="container">
|
|
||||||
<div class="columns">
|
|
||||||
<div class="col-3">
|
|
||||||
<label class="form-label">{{ $t('message.directoryPath') }}</label>
|
|
||||||
</div>
|
|
||||||
<div class="col-9">
|
|
||||||
<fieldset class="input-group">
|
|
||||||
<input
|
|
||||||
v-model="basePath"
|
|
||||||
class="form-input"
|
|
||||||
type="text"
|
|
||||||
required
|
|
||||||
readonly
|
|
||||||
:placeholder="$t('message.schemaName')"
|
|
||||||
>
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
class="btn btn-primary input-group-btn"
|
|
||||||
@click.prevent="openPathDialog"
|
|
||||||
>
|
|
||||||
{{ $t('word.change') }}
|
|
||||||
</button>
|
|
||||||
</fieldset>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<a class="btn btn-clear c-hand" @click.stop="closeModal" />
|
||||||
</div>
|
</div>
|
||||||
|
<div class="modal-body pb-0">
|
||||||
<div class="columns export-options">
|
<div class="container">
|
||||||
<div class="column col-8 left">
|
<div class="columns">
|
||||||
<div class="columns mb-2">
|
<div class="col-3">
|
||||||
<div class="column col-auto d-flex text-italic ">
|
<label class="form-label">{{ $t('message.directoryPath') }}</label>
|
||||||
<i class="mdi mdi-file-document-outline mr-2" />
|
|
||||||
{{ filename }}
|
|
||||||
</div>
|
</div>
|
||||||
|
<div class="col-9">
|
||||||
<div class="column col-auto col-ml-auto ">
|
<fieldset class="input-group">
|
||||||
<button
|
<input
|
||||||
class="btn btn-dark btn-sm"
|
v-model="basePath"
|
||||||
:title="$t('word.refresh')"
|
class="form-input"
|
||||||
@click="refresh"
|
type="text"
|
||||||
>
|
required
|
||||||
<i class="mdi mdi-database-refresh" />
|
readonly
|
||||||
</button>
|
:placeholder="$t('message.schemaName')"
|
||||||
<button
|
|
||||||
class="btn btn-dark btn-sm"
|
|
||||||
:title="$t('message.uncheckAllTables')"
|
|
||||||
:disabled="isRefreshing"
|
|
||||||
@click="uncheckAllTables"
|
|
||||||
>
|
|
||||||
<i class="mdi mdi-file-tree-outline" />
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
class="btn btn-dark btn-sm"
|
|
||||||
:title="$t('message.checkAllTables')"
|
|
||||||
:disabled="isRefreshing"
|
|
||||||
@click="checkAllTables"
|
|
||||||
>
|
|
||||||
<i class="mdi mdi-file-tree" />
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="workspace-query-results">
|
|
||||||
<div ref="table" class="table table-hover">
|
|
||||||
<div class="thead">
|
|
||||||
<div class="tr text-center">
|
|
||||||
<div class="th no-border" style="width: 50%;" />
|
|
||||||
<div class="th no-border">
|
|
||||||
<label
|
|
||||||
class="form-checkbox m-0 px-2 form-inline"
|
|
||||||
@click.prevent="toggleAllTablesOption('includeStructure')"
|
|
||||||
>
|
|
||||||
<input
|
|
||||||
type="checkbox"
|
|
||||||
:indeterminate="includeStructureStatus === 2"
|
|
||||||
:checked="!!includeStructureStatus"
|
|
||||||
>
|
|
||||||
<i class="form-icon" />
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
<div class="th no-border">
|
|
||||||
<label
|
|
||||||
class="form-checkbox m-0 px-2 form-inline"
|
|
||||||
@click.prevent="toggleAllTablesOption('includeContent')"
|
|
||||||
>
|
|
||||||
<input
|
|
||||||
type="checkbox"
|
|
||||||
:indeterminate="includeContentStatus === 2"
|
|
||||||
:checked="!!includeContentStatus"
|
|
||||||
>
|
|
||||||
<i class="form-icon" />
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
<div class="th no-border">
|
|
||||||
<label
|
|
||||||
class="form-checkbox m-0 px-2 form-inline"
|
|
||||||
@click.prevent="toggleAllTablesOption('includeDropStatement')"
|
|
||||||
>
|
|
||||||
<input
|
|
||||||
type="checkbox"
|
|
||||||
:indeterminate="includeDropStatementStatus === 2"
|
|
||||||
:checked="!!includeDropStatementStatus"
|
|
||||||
>
|
|
||||||
<i class="form-icon" />
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="tr">
|
|
||||||
<div class="th" style="width: 50%;">
|
|
||||||
<div class="table-column-title">
|
|
||||||
<span>{{ $t('word.table') }}</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="th text-center">
|
|
||||||
<div class="table-column-title">
|
|
||||||
<span>{{ $t('word.structure') }}</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="th text-center">
|
|
||||||
<div class="table-column-title">
|
|
||||||
<span>{{ $t('word.content') }}</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="th text-center">
|
|
||||||
<div class="table-column-title">
|
|
||||||
<span>{{ $t('word.drop') }}</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="tbody">
|
|
||||||
<div
|
|
||||||
v-for="item in tables"
|
|
||||||
:key="item.name"
|
|
||||||
class="tr"
|
|
||||||
>
|
>
|
||||||
<div class="td">
|
<button
|
||||||
{{ item.table }}
|
type="button"
|
||||||
|
class="btn btn-primary input-group-btn"
|
||||||
|
@click.prevent="openPathDialog"
|
||||||
|
>
|
||||||
|
{{ $t('word.change') }}
|
||||||
|
</button>
|
||||||
|
</fieldset>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="columns export-options">
|
||||||
|
<div class="column col-8 left">
|
||||||
|
<div class="columns mb-2">
|
||||||
|
<div class="column col-auto d-flex text-italic ">
|
||||||
|
<i class="mdi mdi-file-document-outline mr-2" />
|
||||||
|
{{ filename }}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="column col-auto col-ml-auto ">
|
||||||
|
<button
|
||||||
|
class="btn btn-dark btn-sm"
|
||||||
|
:title="$t('word.refresh')"
|
||||||
|
@click="refresh"
|
||||||
|
>
|
||||||
|
<i class="mdi mdi-database-refresh" />
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
class="btn btn-dark btn-sm mx-1"
|
||||||
|
:title="$t('message.uncheckAllTables')"
|
||||||
|
:disabled="isRefreshing"
|
||||||
|
@click="uncheckAllTables"
|
||||||
|
>
|
||||||
|
<i class="mdi mdi-file-tree-outline" />
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
class="btn btn-dark btn-sm"
|
||||||
|
:title="$t('message.checkAllTables')"
|
||||||
|
:disabled="isRefreshing"
|
||||||
|
@click="checkAllTables"
|
||||||
|
>
|
||||||
|
<i class="mdi mdi-file-tree" />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="workspace-query-results">
|
||||||
|
<div ref="table" class="table table-hover">
|
||||||
|
<div class="thead">
|
||||||
|
<div class="tr text-center">
|
||||||
|
<div class="th no-border" style="width: 50%;" />
|
||||||
|
<div class="th no-border">
|
||||||
|
<label
|
||||||
|
class="form-checkbox m-0 px-2 form-inline"
|
||||||
|
@click.prevent="toggleAllTablesOption('includeStructure')"
|
||||||
|
>
|
||||||
|
<input
|
||||||
|
type="checkbox"
|
||||||
|
:indeterminate="includeStructureStatus === 2"
|
||||||
|
:checked="!!includeStructureStatus"
|
||||||
|
>
|
||||||
|
<i class="form-icon" />
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
<div class="th no-border">
|
||||||
|
<label
|
||||||
|
class="form-checkbox m-0 px-2 form-inline"
|
||||||
|
@click.prevent="toggleAllTablesOption('includeContent')"
|
||||||
|
>
|
||||||
|
<input
|
||||||
|
type="checkbox"
|
||||||
|
:indeterminate="includeContentStatus === 2"
|
||||||
|
:checked="!!includeContentStatus"
|
||||||
|
>
|
||||||
|
<i class="form-icon" />
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
<div class="th no-border">
|
||||||
|
<label
|
||||||
|
class="form-checkbox m-0 px-2 form-inline"
|
||||||
|
@click.prevent="toggleAllTablesOption('includeDropStatement')"
|
||||||
|
>
|
||||||
|
<input
|
||||||
|
type="checkbox"
|
||||||
|
:indeterminate="includeDropStatementStatus === 2"
|
||||||
|
:checked="!!includeDropStatementStatus"
|
||||||
|
>
|
||||||
|
<i class="form-icon" />
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="td text-center">
|
<div class="tr">
|
||||||
<label class="form-checkbox m-0 px-2 form-inline">
|
<div class="th" style="width: 50%;">
|
||||||
<input
|
<div class="table-column-title">
|
||||||
v-model="item.includeStructure"
|
<span>{{ $t('word.table') }}</span>
|
||||||
type="checkbox"
|
</div>
|
||||||
><i class="form-icon" />
|
</div>
|
||||||
</label>
|
<div class="th text-center">
|
||||||
|
<div class="table-column-title">
|
||||||
|
<span>{{ $t('word.structure') }}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="th text-center">
|
||||||
|
<div class="table-column-title">
|
||||||
|
<span>{{ $t('word.content') }}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="th text-center">
|
||||||
|
<div class="table-column-title">
|
||||||
|
<span>{{ $t('word.drop') }}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="td text-center">
|
</div>
|
||||||
<label class="form-checkbox m-0 px-2 form-inline">
|
|
||||||
<input
|
<div class="tbody">
|
||||||
v-model="item.includeContent"
|
<div
|
||||||
type="checkbox"
|
v-for="item in tables"
|
||||||
><i class="form-icon" />
|
:key="item.name"
|
||||||
</label>
|
class="tr"
|
||||||
</div>
|
>
|
||||||
<div class="td text-center">
|
<div class="td">
|
||||||
<label class="form-checkbox m-0 px-2 form-inline">
|
{{ item.table }}
|
||||||
<input
|
</div>
|
||||||
v-model="item.includeDropStatement"
|
<div class="td text-center">
|
||||||
type="checkbox"
|
<label class="form-checkbox m-0 px-2 form-inline">
|
||||||
><i class="form-icon" />
|
<input
|
||||||
</label>
|
v-model="item.includeStructure"
|
||||||
|
type="checkbox"
|
||||||
|
><i class="form-icon" />
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
<div class="td text-center">
|
||||||
|
<label class="form-checkbox m-0 px-2 form-inline">
|
||||||
|
<input
|
||||||
|
v-model="item.includeContent"
|
||||||
|
type="checkbox"
|
||||||
|
><i class="form-icon" />
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
<div class="td text-center">
|
||||||
|
<label class="form-checkbox m-0 px-2 form-inline">
|
||||||
|
<input
|
||||||
|
v-model="item.includeDropStatement"
|
||||||
|
type="checkbox"
|
||||||
|
><i class="form-icon" />
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<div class="column col-4">
|
||||||
<div class="column col-4">
|
<h5 class="h5">
|
||||||
<h5 class="h5">
|
{{ $t('word.options') }}
|
||||||
{{ $t('word.options') }}
|
</h5>
|
||||||
</h5>
|
<span class="h6">{{ $t('word.includes') }}:</span>
|
||||||
<span class="h6">{{ $t('word.includes') }}:</span>
|
<label
|
||||||
<label
|
v-for="(_, key) in options.includes"
|
||||||
v-for="(_, key) in options.includes"
|
:key="key"
|
||||||
:key="key"
|
class="form-checkbox"
|
||||||
class="form-checkbox"
|
>
|
||||||
>
|
<input v-model="options.includes[key]" type="checkbox"><i class="form-icon" /> {{ $tc(`word.${key}`, 2) }}
|
||||||
<input v-model="options.includes[key]" type="checkbox"><i class="form-icon" /> {{ $tc(`word.${key}`, 2) }}
|
</label>
|
||||||
</label>
|
<div v-if="customizations.exportByChunks">
|
||||||
<div v-if="customizations.exportByChunks">
|
<div class="h6 mt-4 mb-2">
|
||||||
<div class="h6 mt-4 mb-2">
|
{{ $t('message.newInserStmtEvery') }}:
|
||||||
{{ $t('message.newInserStmtEvery') }}:
|
</div>
|
||||||
|
<div class="columns">
|
||||||
|
<div class="column col-6">
|
||||||
|
<input
|
||||||
|
v-model.number="options.sqlInsertAfter"
|
||||||
|
type="number"
|
||||||
|
class="form-input"
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
<div class="column col-6">
|
||||||
|
<select v-model="options.sqlInsertDivider" class="form-select">
|
||||||
|
<option value="bytes">
|
||||||
|
KiB
|
||||||
|
</option>
|
||||||
|
<option value="rows">
|
||||||
|
{{ $tc('word.row', 2) }}
|
||||||
|
</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="h6 mb-2 mt-4">
|
||||||
|
{{ $t('message.ourputFormat') }}:
|
||||||
</div>
|
</div>
|
||||||
<div class="columns">
|
<div class="columns">
|
||||||
<div class="column col-6">
|
<div class="column h5 mb-4">
|
||||||
<input
|
<select v-model="options.outputFormat" class="form-select">
|
||||||
v-model.number="options.sqlInsertAfter"
|
<option value="sql">
|
||||||
type="number"
|
{{ $t('message.singleFile', {ext: '.sql'}) }}
|
||||||
class="form-input"
|
|
||||||
>
|
|
||||||
</div>
|
|
||||||
<div class="column col-6">
|
|
||||||
<select v-model="options.sqlInsertDivider" class="form-select">
|
|
||||||
<option value="bytes">
|
|
||||||
KiB
|
|
||||||
</option>
|
</option>
|
||||||
<option value="rows">
|
<option value="sql.zip">
|
||||||
{{ $tc('word.row', 2) }}
|
{{ $t('message.zipCompressedFile', {ext: '.sql'}) }}
|
||||||
</option>
|
</option>
|
||||||
</select>
|
</select>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="h6 mb-2 mt-4">
|
|
||||||
{{ $t('message.ourputFormat') }}:
|
|
||||||
</div>
|
|
||||||
<div class="columns">
|
|
||||||
<div class="column h5 mb-4">
|
|
||||||
<select v-model="options.outputFormat" class="form-select">
|
|
||||||
<option value="sql">
|
|
||||||
{{ $t('message.singleFile', {ext: '.sql'}) }}
|
|
||||||
</option>
|
|
||||||
<option value="sql.zip">
|
|
||||||
{{ $t('message.zipCompressedFile', {ext: '.sql'}) }}
|
|
||||||
</option>
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<div class="modal-footer columns">
|
||||||
<div class="modal-footer columns">
|
<div class="column col modal-progress-wrapper text-left">
|
||||||
<div class="column col modal-progress-wrapper text-left">
|
<div v-if="progressPercentage > 0" class="export-progress">
|
||||||
<div v-if="progressPercentage > 0" class="export-progress">
|
<span class="progress-status">
|
||||||
<span class="progress-status">
|
{{ progressPercentage }}% - {{ progressStatus }}
|
||||||
{{ progressPercentage }}% - {{ progressStatus }}
|
</span>
|
||||||
</span>
|
<progress
|
||||||
<progress
|
class="progress d-block"
|
||||||
class="progress d-block"
|
:value="progressPercentage"
|
||||||
:value="progressPercentage"
|
max="100"
|
||||||
max="100"
|
/>
|
||||||
/>
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="column col-auto px-0">
|
||||||
|
<button class="btn btn-link" @click.stop="closeModal">
|
||||||
|
{{ $t('word.close') }}
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
class="btn btn-primary mr-2"
|
||||||
|
:class="{'loading': isExporting}"
|
||||||
|
:disabled="isExporting || isRefreshing"
|
||||||
|
autofocus
|
||||||
|
@click.prevent="startExport"
|
||||||
|
>
|
||||||
|
{{ $t('word.export') }}
|
||||||
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
<div class="column col-auto px-0">
|
|
||||||
<button class="btn btn-link" @click.stop="closeModal">
|
|
||||||
{{ $t('word.close') }}
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
class="btn btn-primary mr-2"
|
|
||||||
:class="{'loading': isExporting}"
|
|
||||||
:disabled="isExporting || isRefreshing"
|
|
||||||
autofocus
|
|
||||||
@click.prevent="startExport"
|
|
||||||
>
|
|
||||||
{{ $t('word.export') }}
|
|
||||||
</button>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</Teleport>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
|
|
||||||
|
|
@ -1,186 +1,188 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="modal active">
|
<Teleport to="#window-content">
|
||||||
<a class="modal-overlay" @click.stop="closeModal" />
|
<div class="modal active">
|
||||||
<div class="modal-container p-0">
|
<a class="modal-overlay" @click.stop="closeModal" />
|
||||||
<div class="modal-header pl-2">
|
<div class="modal-container p-0">
|
||||||
<div class="modal-title h6">
|
<div class="modal-header pl-2">
|
||||||
<div class="d-flex">
|
<div class="modal-title h6">
|
||||||
<i class="mdi mdi-24px mdi-playlist-plus mr-1" />
|
<div class="d-flex">
|
||||||
<span class="cut-text">{{ $tc('message.insertRow', 2) }}</span>
|
<i class="mdi mdi-24px mdi-playlist-plus mr-1" />
|
||||||
|
<span class="cut-text">{{ $tc('message.insertRow', 2) }}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<a class="btn btn-clear c-hand" @click.stop="closeModal" />
|
||||||
|
</div>
|
||||||
|
<div class="modal-body pb-0">
|
||||||
|
<div class="content">
|
||||||
|
<form class="form-horizontal">
|
||||||
|
<fieldset :disabled="isInserting">
|
||||||
|
<div
|
||||||
|
v-for="field in fields"
|
||||||
|
:key="field.name"
|
||||||
|
class="form-group"
|
||||||
|
>
|
||||||
|
<div class="col-3 col-sm-12">
|
||||||
|
<label class="form-label" :title="field.name">{{ field.name }}</label>
|
||||||
|
</div>
|
||||||
|
<div class="column columns col-sm-12">
|
||||||
|
<FakerSelect
|
||||||
|
v-model="localRow[field.name]"
|
||||||
|
:type="field.type"
|
||||||
|
class="column columns pr-0"
|
||||||
|
:is-checked="!fieldsToExclude.includes(field.name)"
|
||||||
|
:foreign-keys="foreignKeys"
|
||||||
|
:key-usage="keyUsage"
|
||||||
|
:field="field"
|
||||||
|
:field-length="fieldLength(field)"
|
||||||
|
:field-obj="localRow[field.name]"
|
||||||
|
>
|
||||||
|
<span class="input-group-addon field-type" :class="typeClass(field.type)">
|
||||||
|
{{ field.type }} {{ wrapNumber(fieldLength(field)) }}
|
||||||
|
</span>
|
||||||
|
<label class="form-checkbox ml-3" :title="$t('word.insert')">
|
||||||
|
<input
|
||||||
|
type="checkbox"
|
||||||
|
:checked="!fieldsToExclude.includes(field.name)"
|
||||||
|
@change.prevent="toggleFields($event, field)"
|
||||||
|
><i class="form-icon" />
|
||||||
|
</label>
|
||||||
|
</FakerSelect>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</fieldset>
|
||||||
|
</form>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<a class="btn btn-clear c-hand" @click.stop="closeModal" />
|
<div class="modal-footer columns">
|
||||||
</div>
|
<div class="column d-flex" :class="hasFakes ? 'col-4' : 'col-2'">
|
||||||
<div class="modal-body pb-0">
|
<div class="input-group tooltip tooltip-right" :data-tooltip="$t('message.numberOfInserts')">
|
||||||
<div class="content">
|
<input
|
||||||
<form class="form-horizontal">
|
v-model="nInserts"
|
||||||
<fieldset :disabled="isInserting">
|
type="number"
|
||||||
<div
|
class="form-input"
|
||||||
v-for="field in fields"
|
min="1"
|
||||||
:key="field.name"
|
:disabled="isInserting"
|
||||||
class="form-group"
|
|
||||||
>
|
>
|
||||||
<div class="col-3 col-sm-12">
|
<span class="input-group-addon">
|
||||||
<label class="form-label" :title="field.name">{{ field.name }}</label>
|
<i class="mdi mdi-24px mdi-repeat" />
|
||||||
</div>
|
</span>
|
||||||
<div class="column columns col-sm-12">
|
</div>
|
||||||
<FakerSelect
|
<div
|
||||||
v-model="localRow[field.name]"
|
v-if="hasFakes"
|
||||||
:type="field.type"
|
class="tooltip tooltip-right ml-2"
|
||||||
class="column columns pr-0"
|
:data-tooltip="$t('message.fakeDataLanguage')"
|
||||||
:is-checked="!fieldsToExclude.includes(field.name)"
|
|
||||||
:foreign-keys="foreignKeys"
|
|
||||||
:key-usage="keyUsage"
|
|
||||||
:field="field"
|
|
||||||
:field-length="fieldLength(field)"
|
|
||||||
:field-obj="localRow[field.name]"
|
|
||||||
>
|
|
||||||
<span class="input-group-addon field-type" :class="typeClass(field.type)">
|
|
||||||
{{ field.type }} {{ wrapNumber(fieldLength(field)) }}
|
|
||||||
</span>
|
|
||||||
<label class="form-checkbox ml-3" :title="$t('word.insert')">
|
|
||||||
<input
|
|
||||||
type="checkbox"
|
|
||||||
:checked="!fieldsToExclude.includes(field.name)"
|
|
||||||
@change.prevent="toggleFields($event, field)"
|
|
||||||
><i class="form-icon" />
|
|
||||||
</label>
|
|
||||||
</FakerSelect>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</fieldset>
|
|
||||||
</form>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="modal-footer columns">
|
|
||||||
<div class="column d-flex" :class="hasFakes ? 'col-4' : 'col-2'">
|
|
||||||
<div class="input-group tooltip tooltip-right" :data-tooltip="$t('message.numberOfInserts')">
|
|
||||||
<input
|
|
||||||
v-model="nInserts"
|
|
||||||
type="number"
|
|
||||||
class="form-input"
|
|
||||||
min="1"
|
|
||||||
:disabled="isInserting"
|
|
||||||
>
|
>
|
||||||
<span class="input-group-addon">
|
<select v-model="fakerLocale" class="form-select">
|
||||||
<i class="mdi mdi-24px mdi-repeat" />
|
<option value="ar">
|
||||||
</span>
|
Arabic
|
||||||
|
</option><option value="az">
|
||||||
|
Azerbaijani
|
||||||
|
</option><option value="zh_CN">
|
||||||
|
Chinese
|
||||||
|
</option><option value="zh_TW">
|
||||||
|
Chinese (Taiwan)
|
||||||
|
</option><option value="cz">
|
||||||
|
Czech
|
||||||
|
</option><option value="nl">
|
||||||
|
Dutch
|
||||||
|
</option><option value="nl_BE">
|
||||||
|
Dutch (Belgium)
|
||||||
|
</option><option value="en">
|
||||||
|
English
|
||||||
|
</option><option value="en_AU_ocker">
|
||||||
|
English (Australia Ocker)
|
||||||
|
</option><option value="en_AU">
|
||||||
|
English (Australia)
|
||||||
|
</option><option value="en_BORK">
|
||||||
|
English (Bork)
|
||||||
|
</option><option value="en_CA">
|
||||||
|
English (Canada)
|
||||||
|
</option><option value="en_GB">
|
||||||
|
English (Great Britain)
|
||||||
|
</option><option value="en_IND">
|
||||||
|
English (India)
|
||||||
|
</option><option value="en_IE">
|
||||||
|
English (Ireland)
|
||||||
|
</option><option value="en_ZA">
|
||||||
|
English (South Africa)
|
||||||
|
</option><option value="en_US">
|
||||||
|
English (United States)
|
||||||
|
</option><option value="fa">
|
||||||
|
Farsi
|
||||||
|
</option><option value="fi">
|
||||||
|
Finnish
|
||||||
|
</option><option value="fr">
|
||||||
|
French
|
||||||
|
</option><option value="fr_CA">
|
||||||
|
French (Canada)
|
||||||
|
</option><option value="fr_CH">
|
||||||
|
French (Switzerland)
|
||||||
|
</option><option value="ge">
|
||||||
|
Georgian
|
||||||
|
</option><option value="de">
|
||||||
|
German
|
||||||
|
</option><option value="de_AT">
|
||||||
|
German (Austria)
|
||||||
|
</option><option value="de_CH">
|
||||||
|
German (Switzerland)
|
||||||
|
</option><option value="hr">
|
||||||
|
Hrvatski
|
||||||
|
</option><option value="id_ID">
|
||||||
|
Indonesia
|
||||||
|
</option><option value="it">
|
||||||
|
Italian
|
||||||
|
</option><option value="ja">
|
||||||
|
Japanese
|
||||||
|
</option><option value="ko">
|
||||||
|
Korean
|
||||||
|
</option><option value="nep">
|
||||||
|
Nepalese
|
||||||
|
</option><option value="nb_NO">
|
||||||
|
Norwegian
|
||||||
|
</option><option value="pl">
|
||||||
|
Polish
|
||||||
|
</option><option value="pt_BR">
|
||||||
|
Portuguese (Brazil)
|
||||||
|
</option><option value="pt_PT">
|
||||||
|
Portuguese (Portugal)
|
||||||
|
</option><option value="ro">
|
||||||
|
Romanian
|
||||||
|
</option><option value="ru">
|
||||||
|
Russian
|
||||||
|
</option><option value="sk">
|
||||||
|
Slovakian
|
||||||
|
</option><option value="es">
|
||||||
|
Spanish
|
||||||
|
</option><option value="es_MX">
|
||||||
|
Spanish (Mexico)
|
||||||
|
</option><option value="sv">
|
||||||
|
Swedish
|
||||||
|
</option><option value="tr">
|
||||||
|
Turkish
|
||||||
|
</option><option value="uk">
|
||||||
|
Ukrainian
|
||||||
|
</option><option value="vi">
|
||||||
|
Vietnamese
|
||||||
|
</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div class="column col-auto">
|
||||||
v-if="hasFakes"
|
<button
|
||||||
class="tooltip tooltip-right ml-2"
|
class="btn btn-primary mr-2"
|
||||||
:data-tooltip="$t('message.fakeDataLanguage')"
|
:class="{'loading': isInserting}"
|
||||||
>
|
@click.stop="insertRows"
|
||||||
<select v-model="fakerLocale" class="form-select">
|
>
|
||||||
<option value="ar">
|
{{ $t('word.insert') }}
|
||||||
Arabic
|
</button>
|
||||||
</option><option value="az">
|
<button class="btn btn-link" @click.stop="closeModal">
|
||||||
Azerbaijani
|
{{ $t('word.close') }}
|
||||||
</option><option value="zh_CN">
|
</button>
|
||||||
Chinese
|
|
||||||
</option><option value="zh_TW">
|
|
||||||
Chinese (Taiwan)
|
|
||||||
</option><option value="cz">
|
|
||||||
Czech
|
|
||||||
</option><option value="nl">
|
|
||||||
Dutch
|
|
||||||
</option><option value="nl_BE">
|
|
||||||
Dutch (Belgium)
|
|
||||||
</option><option value="en">
|
|
||||||
English
|
|
||||||
</option><option value="en_AU_ocker">
|
|
||||||
English (Australia Ocker)
|
|
||||||
</option><option value="en_AU">
|
|
||||||
English (Australia)
|
|
||||||
</option><option value="en_BORK">
|
|
||||||
English (Bork)
|
|
||||||
</option><option value="en_CA">
|
|
||||||
English (Canada)
|
|
||||||
</option><option value="en_GB">
|
|
||||||
English (Great Britain)
|
|
||||||
</option><option value="en_IND">
|
|
||||||
English (India)
|
|
||||||
</option><option value="en_IE">
|
|
||||||
English (Ireland)
|
|
||||||
</option><option value="en_ZA">
|
|
||||||
English (South Africa)
|
|
||||||
</option><option value="en_US">
|
|
||||||
English (United States)
|
|
||||||
</option><option value="fa">
|
|
||||||
Farsi
|
|
||||||
</option><option value="fi">
|
|
||||||
Finnish
|
|
||||||
</option><option value="fr">
|
|
||||||
French
|
|
||||||
</option><option value="fr_CA">
|
|
||||||
French (Canada)
|
|
||||||
</option><option value="fr_CH">
|
|
||||||
French (Switzerland)
|
|
||||||
</option><option value="ge">
|
|
||||||
Georgian
|
|
||||||
</option><option value="de">
|
|
||||||
German
|
|
||||||
</option><option value="de_AT">
|
|
||||||
German (Austria)
|
|
||||||
</option><option value="de_CH">
|
|
||||||
German (Switzerland)
|
|
||||||
</option><option value="hr">
|
|
||||||
Hrvatski
|
|
||||||
</option><option value="id_ID">
|
|
||||||
Indonesia
|
|
||||||
</option><option value="it">
|
|
||||||
Italian
|
|
||||||
</option><option value="ja">
|
|
||||||
Japanese
|
|
||||||
</option><option value="ko">
|
|
||||||
Korean
|
|
||||||
</option><option value="nep">
|
|
||||||
Nepalese
|
|
||||||
</option><option value="nb_NO">
|
|
||||||
Norwegian
|
|
||||||
</option><option value="pl">
|
|
||||||
Polish
|
|
||||||
</option><option value="pt_BR">
|
|
||||||
Portuguese (Brazil)
|
|
||||||
</option><option value="pt_PT">
|
|
||||||
Portuguese (Portugal)
|
|
||||||
</option><option value="ro">
|
|
||||||
Romanian
|
|
||||||
</option><option value="ru">
|
|
||||||
Russian
|
|
||||||
</option><option value="sk">
|
|
||||||
Slovakian
|
|
||||||
</option><option value="es">
|
|
||||||
Spanish
|
|
||||||
</option><option value="es_MX">
|
|
||||||
Spanish (Mexico)
|
|
||||||
</option><option value="sv">
|
|
||||||
Swedish
|
|
||||||
</option><option value="tr">
|
|
||||||
Turkish
|
|
||||||
</option><option value="uk">
|
|
||||||
Ukrainian
|
|
||||||
</option><option value="vi">
|
|
||||||
Vietnamese
|
|
||||||
</option>
|
|
||||||
</select>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="column col-auto">
|
|
||||||
<button
|
|
||||||
class="btn btn-primary mr-2"
|
|
||||||
:class="{'loading': isInserting}"
|
|
||||||
@click.stop="insertRows"
|
|
||||||
>
|
|
||||||
{{ $t('word.insert') }}
|
|
||||||
</button>
|
|
||||||
<button class="btn btn-link" @click.stop="closeModal">
|
|
||||||
{{ $t('word.close') }}
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</Teleport>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
|
|
||||||
|
|
@ -1,98 +1,100 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="modal active">
|
<Teleport to="#window-content">
|
||||||
<a class="modal-overlay" @click.stop="closeModal" />
|
<div class="modal active">
|
||||||
<div class="modal-container p-0 pb-4">
|
<a class="modal-overlay" @click.stop="closeModal" />
|
||||||
<div class="modal-header pl-2">
|
<div class="modal-container p-0 pb-4">
|
||||||
<div class="modal-title h6">
|
<div class="modal-header pl-2">
|
||||||
<div class="d-flex">
|
<div class="modal-title h6">
|
||||||
<i class="mdi mdi-24px mdi-history mr-1" />
|
<div class="d-flex">
|
||||||
<span class="cut-text">{{ $t('word.history') }}: {{ connectionName }}</span>
|
<i class="mdi mdi-24px mdi-history mr-1" />
|
||||||
|
<span class="cut-text">{{ $t('word.history') }}: {{ connectionName }}</span>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<a class="btn btn-clear c-hand" @click.stop="closeModal" />
|
||||||
</div>
|
</div>
|
||||||
<a class="btn btn-clear c-hand" @click.stop="closeModal" />
|
<div class="modal-body p-0 workspace-query-results">
|
||||||
</div>
|
<div
|
||||||
<div class="modal-body p-0 workspace-query-results">
|
v-if="history.length"
|
||||||
<div
|
ref="searchForm"
|
||||||
v-if="history.length"
|
class="form-group has-icon-right p-2 m-0"
|
||||||
ref="searchForm"
|
|
||||||
class="form-group has-icon-right p-2 m-0"
|
|
||||||
>
|
|
||||||
<input
|
|
||||||
v-model="searchTerm"
|
|
||||||
class="form-input"
|
|
||||||
type="text"
|
|
||||||
:placeholder="$t('message.searchForQueries')"
|
|
||||||
>
|
>
|
||||||
<i v-if="!searchTerm" class="form-icon mdi mdi-magnify mdi-18px pr-4" />
|
<input
|
||||||
<i
|
v-model="searchTerm"
|
||||||
v-else
|
class="form-input"
|
||||||
class="form-icon c-hand mdi mdi-backspace mdi-18px pr-4"
|
type="text"
|
||||||
@click="searchTerm = ''"
|
:placeholder="$t('message.searchForQueries')"
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
v-if="history.length"
|
|
||||||
ref="tableWrapper"
|
|
||||||
class="vscroll px-1 "
|
|
||||||
:style="{'height': resultsSize+'px'}"
|
|
||||||
>
|
|
||||||
<div ref="table">
|
|
||||||
<BaseVirtualScroll
|
|
||||||
ref="resultTable"
|
|
||||||
:items="filteredHistory"
|
|
||||||
:item-height="66"
|
|
||||||
:visible-height="resultsSize"
|
|
||||||
:scroll-element="scrollElement"
|
|
||||||
>
|
>
|
||||||
<template #default="{ items }">
|
<i v-if="!searchTerm" class="form-icon mdi mdi-magnify mdi-18px pr-4" />
|
||||||
<div
|
<i
|
||||||
v-for="query in items"
|
v-else
|
||||||
:key="query.uid"
|
class="form-icon c-hand mdi mdi-backspace mdi-18px pr-4"
|
||||||
class="tile my-2"
|
@click="searchTerm = ''"
|
||||||
tabindex="0"
|
/>
|
||||||
>
|
</div>
|
||||||
<div class="tile-icon">
|
<div
|
||||||
<i class="mdi mdi-code-tags pr-1" />
|
v-if="history.length"
|
||||||
</div>
|
ref="tableWrapper"
|
||||||
<div class="tile-content">
|
class="vscroll px-1 "
|
||||||
<div class="tile-title">
|
:style="{'height': resultsSize+'px'}"
|
||||||
<code
|
>
|
||||||
class="cut-text"
|
<div ref="table">
|
||||||
:title="query.sql"
|
<BaseVirtualScroll
|
||||||
v-html="highlightWord(query.sql)"
|
ref="resultTable"
|
||||||
/>
|
:items="filteredHistory"
|
||||||
|
:item-height="66"
|
||||||
|
:visible-height="resultsSize"
|
||||||
|
:scroll-element="scrollElement"
|
||||||
|
>
|
||||||
|
<template #default="{ items }">
|
||||||
|
<div
|
||||||
|
v-for="query in items"
|
||||||
|
:key="query.uid"
|
||||||
|
class="tile my-2"
|
||||||
|
tabindex="0"
|
||||||
|
>
|
||||||
|
<div class="tile-icon">
|
||||||
|
<i class="mdi mdi-code-tags pr-1" />
|
||||||
</div>
|
</div>
|
||||||
<div class="tile-bottom-content">
|
<div class="tile-content">
|
||||||
<small class="tile-subtitle">{{ query.schema }} · {{ formatDate(query.date) }}</small>
|
<div class="tile-title">
|
||||||
<div class="tile-history-buttons">
|
<code
|
||||||
<button class="btn btn-link pl-1" @click.stop="$emit('select-query', query.sql)">
|
class="cut-text"
|
||||||
<i class="mdi mdi-open-in-app pr-1" /> {{ $t('word.select') }}
|
:title="query.sql"
|
||||||
</button>
|
v-html="highlightWord(query.sql)"
|
||||||
<button class="btn btn-link pl-1" @click="copyQuery(query.sql)">
|
/>
|
||||||
<i class="mdi mdi-content-copy pr-1" /> {{ $t('word.copy') }}
|
</div>
|
||||||
</button>
|
<div class="tile-bottom-content">
|
||||||
<button class="btn btn-link pl-1" @click="deleteQuery(query)">
|
<small class="tile-subtitle">{{ query.schema }} · {{ formatDate(query.date) }}</small>
|
||||||
<i class="mdi mdi-delete-forever pr-1" /> {{ $t('word.delete') }}
|
<div class="tile-history-buttons">
|
||||||
</button>
|
<button class="btn btn-link pl-1" @click.stop="$emit('select-query', query.sql)">
|
||||||
|
<i class="mdi mdi-open-in-app pr-1" /> {{ $t('word.select') }}
|
||||||
|
</button>
|
||||||
|
<button class="btn btn-link pl-1" @click="copyQuery(query.sql)">
|
||||||
|
<i class="mdi mdi-content-copy pr-1" /> {{ $t('word.copy') }}
|
||||||
|
</button>
|
||||||
|
<button class="btn btn-link pl-1" @click="deleteQuery(query)">
|
||||||
|
<i class="mdi mdi-delete-forever pr-1" /> {{ $t('word.delete') }}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</template>
|
||||||
</template>
|
</BaseVirtualScroll>
|
||||||
</BaseVirtualScroll>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<div v-else class="empty">
|
||||||
<div v-else class="empty">
|
<div class="empty-icon">
|
||||||
<div class="empty-icon">
|
<i class="mdi mdi-history mdi-48px" />
|
||||||
<i class="mdi mdi-history mdi-48px" />
|
</div>
|
||||||
|
<p class="empty-title h5">
|
||||||
|
{{ $t('message.thereIsNoQueriesYet') }}
|
||||||
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<p class="empty-title h5">
|
|
||||||
{{ $t('message.thereIsNoQueriesYet') }}
|
|
||||||
</p>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</Teleport>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
|
|
||||||
|
|
@ -1,49 +1,52 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="modal active">
|
<Teleport to="#window-content">
|
||||||
<a class="modal-overlay" @click.stop="closeModal" />
|
<div class="modal active">
|
||||||
<div class="modal-container p-0">
|
<a class="modal-overlay" @click.stop="closeModal" />
|
||||||
<div class="modal-header pl-2">
|
<div class="modal-container p-0">
|
||||||
<div class="modal-title h6">
|
<div class="modal-header pl-2">
|
||||||
<div class="d-flex">
|
<div class="modal-title h6">
|
||||||
<i class="mdi mdi-24px mdi-database-arrow-up mr-1" />
|
<div class="d-flex">
|
||||||
<span class="cut-text">{{ $t('message.importSchema') }}</span>
|
<i class="mdi mdi-24px mdi-database-arrow-up mr-1" />
|
||||||
|
<span class="cut-text">{{ $t('message.importSchema') }}</span>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<a class="btn btn-clear c-hand" @click.stop="closeModal" />
|
||||||
</div>
|
</div>
|
||||||
<a class="btn btn-clear c-hand" @click.stop="closeModal" />
|
<div class="modal-body pb-0">
|
||||||
</div>
|
{{ sqlFile }}
|
||||||
<div class="modal-body pb-0">
|
<div v-if="queryErrors.length > 0" class="mt-2">
|
||||||
{{ sqlFile }}
|
<label>{{ $tc('message.importQueryErrors', queryErrors.length) }}</label>
|
||||||
<div v-if="queryErrors.length > 0" class="mt-2">
|
<textarea
|
||||||
<label>{{ $tc('message.importQueryErrors', queryErrors.length) }}</label>
|
v-model="formattedQueryErrors"
|
||||||
<textarea
|
class="form-input"
|
||||||
v-model="formattedQueryErrors"
|
rows="5"
|
||||||
class="form-input"
|
readonly
|
||||||
rows="5"
|
|
||||||
readonly
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="modal-footer columns">
|
|
||||||
<div class="column col modal-progress-wrapper text-left">
|
|
||||||
<div class="import-progress">
|
|
||||||
<span class="progress-status">
|
|
||||||
{{ progressPercentage }}% - {{ progressStatus }} - {{ $tc('message.executedQueries', queryCount) }}
|
|
||||||
</span>
|
|
||||||
<progress
|
|
||||||
class="progress d-block"
|
|
||||||
:value="progressPercentage"
|
|
||||||
max="100"
|
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="column col-auto px-0">
|
<div class="modal-footer columns">
|
||||||
<button class="btn btn-link" @click.stop="closeModal">
|
<div class="column col modal-progress-wrapper text-left">
|
||||||
{{ completed ? $t('word.close') : $t('word.cancel') }}
|
<div class="import-progress">
|
||||||
</button>
|
<span class="progress-status">
|
||||||
|
{{ progressPercentage }}% - {{ progressStatus }} - {{ $tc('message.executedQueries', queryCount) }}
|
||||||
|
</span>
|
||||||
|
<progress
|
||||||
|
class="progress d-block"
|
||||||
|
:value="progressPercentage"
|
||||||
|
max="100"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="column col-auto px-0">
|
||||||
|
<button class="btn btn-link" @click.stop="closeModal">
|
||||||
|
{{ completed ? $t('word.close') : $t('word.cancel') }}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<Teleport to="#window-content" />
|
||||||
|
</teleport>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
|
|
||||||
|
|
@ -1,68 +1,70 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="modal active">
|
<Teleport to="#window-content">
|
||||||
<a class="modal-overlay" @click.stop="closeModal" />
|
<div class="modal active">
|
||||||
<div class="modal-container p-0">
|
<a class="modal-overlay" @click.stop="closeModal" />
|
||||||
<div class="modal-header pl-2">
|
<div class="modal-container p-0">
|
||||||
<div class="modal-title h6">
|
<div class="modal-header pl-2">
|
||||||
<div class="d-flex">
|
<div class="modal-title h6">
|
||||||
<i class="mdi mdi-24px mdi-database-plus mr-1" />
|
<div class="d-flex">
|
||||||
<span class="cut-text">{{ $t('message.createNewSchema') }}</span>
|
<i class="mdi mdi-24px mdi-database-plus mr-1" />
|
||||||
|
<span class="cut-text">{{ $t('message.createNewSchema') }}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<a class="btn btn-clear c-hand" @click.stop="closeModal" />
|
||||||
|
</div>
|
||||||
|
<div class="modal-body pb-0">
|
||||||
|
<div class="content">
|
||||||
|
<form class="form-horizontal" @submit.prevent="createSchema">
|
||||||
|
<div class="form-group">
|
||||||
|
<div class="col-3">
|
||||||
|
<label class="form-label">{{ $t('word.name') }}</label>
|
||||||
|
</div>
|
||||||
|
<div class="col-9">
|
||||||
|
<input
|
||||||
|
ref="firstInput"
|
||||||
|
v-model="database.name"
|
||||||
|
class="form-input"
|
||||||
|
type="text"
|
||||||
|
required
|
||||||
|
:placeholder="$t('message.schemaName')"
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div v-if="customizations.collations" class="form-group">
|
||||||
|
<div class="col-3">
|
||||||
|
<label class="form-label">{{ $t('word.collation') }}</label>
|
||||||
|
</div>
|
||||||
|
<div class="col-9">
|
||||||
|
<select v-model="database.collation" class="form-select">
|
||||||
|
<option
|
||||||
|
v-for="collation in collations"
|
||||||
|
:key="collation.id"
|
||||||
|
:value="collation.collation"
|
||||||
|
>
|
||||||
|
{{ collation.collation }}
|
||||||
|
</option>
|
||||||
|
</select>
|
||||||
|
<small>{{ $t('message.serverDefault') }}: {{ defaultCollation }}</small>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<a class="btn btn-clear c-hand" @click.stop="closeModal" />
|
<div class="modal-footer">
|
||||||
</div>
|
<button
|
||||||
<div class="modal-body pb-0">
|
class="btn btn-primary mr-2"
|
||||||
<div class="content">
|
:class="{'loading': isLoading}"
|
||||||
<form class="form-horizontal" @submit.prevent="createSchema">
|
@click.stop="createSchema"
|
||||||
<div class="form-group">
|
>
|
||||||
<div class="col-3">
|
{{ $t('word.add') }}
|
||||||
<label class="form-label">{{ $t('word.name') }}</label>
|
</button>
|
||||||
</div>
|
<button class="btn btn-link" @click.stop="closeModal">
|
||||||
<div class="col-9">
|
{{ $t('word.close') }}
|
||||||
<input
|
</button>
|
||||||
ref="firstInput"
|
|
||||||
v-model="database.name"
|
|
||||||
class="form-input"
|
|
||||||
type="text"
|
|
||||||
required
|
|
||||||
:placeholder="$t('message.schemaName')"
|
|
||||||
>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div v-if="customizations.collations" class="form-group">
|
|
||||||
<div class="col-3">
|
|
||||||
<label class="form-label">{{ $t('word.collation') }}</label>
|
|
||||||
</div>
|
|
||||||
<div class="col-9">
|
|
||||||
<select v-model="database.collation" class="form-select">
|
|
||||||
<option
|
|
||||||
v-for="collation in collations"
|
|
||||||
:key="collation.id"
|
|
||||||
:value="collation.collation"
|
|
||||||
>
|
|
||||||
{{ collation.collation }}
|
|
||||||
</option>
|
|
||||||
</select>
|
|
||||||
<small>{{ $t('message.serverDefault') }}: {{ defaultCollation }}</small>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</form>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="modal-footer">
|
|
||||||
<button
|
|
||||||
class="btn btn-primary mr-2"
|
|
||||||
:class="{'loading': isLoading}"
|
|
||||||
@click.stop="createSchema"
|
|
||||||
>
|
|
||||||
{{ $t('word.add') }}
|
|
||||||
</button>
|
|
||||||
<button class="btn btn-link" @click.stop="closeModal">
|
|
||||||
{{ $t('word.close') }}
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</Teleport>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
|
|
||||||
|
|
@ -1,119 +1,121 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="modal active">
|
<Teleport to="#window-content">
|
||||||
<a class="modal-overlay" @click.stop="closeModal" />
|
<div class="modal active">
|
||||||
<div class="modal-container p-0">
|
<a class="modal-overlay" @click.stop="closeModal" />
|
||||||
<div class="modal-header pl-2">
|
<div class="modal-container p-0">
|
||||||
<div class="modal-title h6">
|
<div class="modal-header pl-2">
|
||||||
<div class="d-flex">
|
<div class="modal-title h6">
|
||||||
<i class="mdi mdi-24px mdi-playlist-plus mr-1" />
|
<div class="d-flex">
|
||||||
<span class="cut-text">{{ $t('message.addNewRow') }}</span>
|
<i class="mdi mdi-24px mdi-playlist-plus mr-1" />
|
||||||
|
<span class="cut-text">{{ $t('message.addNewRow') }}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<a class="btn btn-clear c-hand" @click.stop="closeModal" />
|
||||||
|
</div>
|
||||||
|
<div class="modal-body pb-0">
|
||||||
|
<div class="content">
|
||||||
|
<form class="form-horizontal">
|
||||||
|
<fieldset :disabled="isInserting">
|
||||||
|
<div
|
||||||
|
v-for="(field, key) in fields"
|
||||||
|
:key="field.name"
|
||||||
|
class="form-group"
|
||||||
|
>
|
||||||
|
<div class="col-4 col-sm-12">
|
||||||
|
<label class="form-label" :title="field.name">{{ field.name }}</label>
|
||||||
|
</div>
|
||||||
|
<div class="input-group col-8 col-sm-12">
|
||||||
|
<ForeignKeySelect
|
||||||
|
v-if="foreignKeys.includes(field.name)"
|
||||||
|
ref="formInput"
|
||||||
|
v-model="localRow[field.name]"
|
||||||
|
class="form-select"
|
||||||
|
:key-usage="getKeyUsage(field.name)"
|
||||||
|
:disabled="fieldsToExclude.includes(field.name)"
|
||||||
|
/>
|
||||||
|
<input
|
||||||
|
v-else-if="inputProps(field).mask"
|
||||||
|
ref="formInput"
|
||||||
|
v-model="localRow[field.name]"
|
||||||
|
v-mask="inputProps(field).mask"
|
||||||
|
class="form-input"
|
||||||
|
:type="inputProps(field).type"
|
||||||
|
:disabled="fieldsToExclude.includes(field.name)"
|
||||||
|
:tabindex="key+1"
|
||||||
|
>
|
||||||
|
<input
|
||||||
|
v-else-if="inputProps(field).type === 'file'"
|
||||||
|
ref="formInput"
|
||||||
|
class="form-input"
|
||||||
|
type="file"
|
||||||
|
:disabled="fieldsToExclude.includes(field.name)"
|
||||||
|
:tabindex="key+1"
|
||||||
|
@change="filesChange($event,field.name)"
|
||||||
|
>
|
||||||
|
<input
|
||||||
|
v-else-if="inputProps(field).type === 'number'"
|
||||||
|
ref="formInput"
|
||||||
|
v-model="localRow[field.name]"
|
||||||
|
class="form-input"
|
||||||
|
step="any"
|
||||||
|
:type="inputProps(field).type"
|
||||||
|
:disabled="fieldsToExclude.includes(field.name)"
|
||||||
|
:tabindex="key+1"
|
||||||
|
>
|
||||||
|
<input
|
||||||
|
v-else
|
||||||
|
ref="formInput"
|
||||||
|
v-model="localRow[field.name]"
|
||||||
|
class="form-input"
|
||||||
|
:type="inputProps(field).type"
|
||||||
|
:disabled="fieldsToExclude.includes(field.name)"
|
||||||
|
:tabindex="key+1"
|
||||||
|
>
|
||||||
|
<span class="input-group-addon" :class="typeCLass(field.type)">
|
||||||
|
{{ field.type }} {{ wrapNumber(fieldLength(field)) }}
|
||||||
|
</span>
|
||||||
|
<label class="form-checkbox ml-3" :title="$t('word.insert')">
|
||||||
|
<input
|
||||||
|
type="checkbox"
|
||||||
|
:checked="!field.autoIncrement"
|
||||||
|
@change.prevent="toggleFields($event, field)"
|
||||||
|
><i class="form-icon" />
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</fieldset>
|
||||||
|
</form>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<a class="btn btn-clear c-hand" @click.stop="closeModal" />
|
<div class="modal-footer">
|
||||||
</div>
|
<div class="input-group col-3 tooltip tooltip-right" :data-tooltip="$t('message.numberOfInserts')">
|
||||||
<div class="modal-body pb-0">
|
<input
|
||||||
<div class="content">
|
v-model="nInserts"
|
||||||
<form class="form-horizontal">
|
type="number"
|
||||||
<fieldset :disabled="isInserting">
|
class="form-input"
|
||||||
<div
|
min="1"
|
||||||
v-for="(field, key) in fields"
|
:disabled="isInserting"
|
||||||
:key="field.name"
|
>
|
||||||
class="form-group"
|
<span class="input-group-addon">
|
||||||
>
|
<i class="mdi mdi-24px mdi-repeat" />
|
||||||
<div class="col-4 col-sm-12">
|
</span>
|
||||||
<label class="form-label" :title="field.name">{{ field.name }}</label>
|
</div>
|
||||||
</div>
|
<div>
|
||||||
<div class="input-group col-8 col-sm-12">
|
<button
|
||||||
<ForeignKeySelect
|
class="btn btn-primary mr-2"
|
||||||
v-if="foreignKeys.includes(field.name)"
|
:class="{'loading': isInserting}"
|
||||||
ref="formInput"
|
@click.stop="insertRows"
|
||||||
v-model="localRow[field.name]"
|
>
|
||||||
class="form-select"
|
{{ $t('word.insert') }}
|
||||||
:key-usage="getKeyUsage(field.name)"
|
</button>
|
||||||
:disabled="fieldsToExclude.includes(field.name)"
|
<button class="btn btn-link" @click.stop="closeModal">
|
||||||
/>
|
{{ $t('word.close') }}
|
||||||
<input
|
</button>
|
||||||
v-else-if="inputProps(field).mask"
|
</div>
|
||||||
ref="formInput"
|
|
||||||
v-model="localRow[field.name]"
|
|
||||||
v-mask="inputProps(field).mask"
|
|
||||||
class="form-input"
|
|
||||||
:type="inputProps(field).type"
|
|
||||||
:disabled="fieldsToExclude.includes(field.name)"
|
|
||||||
:tabindex="key+1"
|
|
||||||
>
|
|
||||||
<input
|
|
||||||
v-else-if="inputProps(field).type === 'file'"
|
|
||||||
ref="formInput"
|
|
||||||
class="form-input"
|
|
||||||
type="file"
|
|
||||||
:disabled="fieldsToExclude.includes(field.name)"
|
|
||||||
:tabindex="key+1"
|
|
||||||
@change="filesChange($event,field.name)"
|
|
||||||
>
|
|
||||||
<input
|
|
||||||
v-else-if="inputProps(field).type === 'number'"
|
|
||||||
ref="formInput"
|
|
||||||
v-model="localRow[field.name]"
|
|
||||||
class="form-input"
|
|
||||||
step="any"
|
|
||||||
:type="inputProps(field).type"
|
|
||||||
:disabled="fieldsToExclude.includes(field.name)"
|
|
||||||
:tabindex="key+1"
|
|
||||||
>
|
|
||||||
<input
|
|
||||||
v-else
|
|
||||||
ref="formInput"
|
|
||||||
v-model="localRow[field.name]"
|
|
||||||
class="form-input"
|
|
||||||
:type="inputProps(field).type"
|
|
||||||
:disabled="fieldsToExclude.includes(field.name)"
|
|
||||||
:tabindex="key+1"
|
|
||||||
>
|
|
||||||
<span class="input-group-addon" :class="typeCLass(field.type)">
|
|
||||||
{{ field.type }} {{ wrapNumber(fieldLength(field)) }}
|
|
||||||
</span>
|
|
||||||
<label class="form-checkbox ml-3" :title="$t('word.insert')">
|
|
||||||
<input
|
|
||||||
type="checkbox"
|
|
||||||
:checked="!field.autoIncrement"
|
|
||||||
@change.prevent="toggleFields($event, field)"
|
|
||||||
><i class="form-icon" />
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</fieldset>
|
|
||||||
</form>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="modal-footer">
|
|
||||||
<div class="input-group col-3 tooltip tooltip-right" :data-tooltip="$t('message.numberOfInserts')">
|
|
||||||
<input
|
|
||||||
v-model="nInserts"
|
|
||||||
type="number"
|
|
||||||
class="form-input"
|
|
||||||
min="1"
|
|
||||||
:disabled="isInserting"
|
|
||||||
>
|
|
||||||
<span class="input-group-addon">
|
|
||||||
<i class="mdi mdi-24px mdi-repeat" />
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<button
|
|
||||||
class="btn btn-primary mr-2"
|
|
||||||
:class="{'loading': isInserting}"
|
|
||||||
@click.stop="insertRows"
|
|
||||||
>
|
|
||||||
{{ $t('word.insert') }}
|
|
||||||
</button>
|
|
||||||
<button class="btn btn-link" @click.stop="closeModal">
|
|
||||||
{{ $t('word.close') }}
|
|
||||||
</button>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</Teleport>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
|
|
||||||
|
|
@ -1,134 +1,136 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="modal active">
|
<Teleport to="#window-content">
|
||||||
<ModalProcessesListContext
|
<div class="modal active">
|
||||||
v-if="isContext"
|
<ModalProcessesListContext
|
||||||
:context-event="contextEvent"
|
v-if="isContext"
|
||||||
:selected-row="selectedRow"
|
:context-event="contextEvent"
|
||||||
:selected-cell="selectedCell"
|
:selected-row="selectedRow"
|
||||||
@copy-cell="copyCell"
|
:selected-cell="selectedCell"
|
||||||
@copy-row="copyRow"
|
@copy-cell="copyCell"
|
||||||
@kill-process="killProcess"
|
@copy-row="copyRow"
|
||||||
@close-context="closeContext"
|
@kill-process="killProcess"
|
||||||
/>
|
@close-context="closeContext"
|
||||||
<a class="modal-overlay" @click.stop="closeModal" />
|
/>
|
||||||
<div class="modal-container p-0 pb-4">
|
<a class="modal-overlay" @click.stop="closeModal" />
|
||||||
<div class="modal-header pl-2">
|
<div class="modal-container p-0 pb-4">
|
||||||
<div class="modal-title h6">
|
<div class="modal-header pl-2">
|
||||||
<div class="d-flex">
|
<div class="modal-title h6">
|
||||||
<i class="mdi mdi-24px mdi-memory mr-1" />
|
<div class="d-flex">
|
||||||
<span class="cut-text">{{ $t('message.processesList') }}: {{ connectionName }}</span>
|
<i class="mdi mdi-24px mdi-memory mr-1" />
|
||||||
</div>
|
<span class="cut-text">{{ $t('message.processesList') }}: {{ connectionName }}</span>
|
||||||
</div>
|
|
||||||
<a class="btn btn-clear c-hand" @click.stop="closeModal" />
|
|
||||||
</div>
|
|
||||||
<div class="processes-toolbar py-2 px-4">
|
|
||||||
<div class="workspace-query-buttons">
|
|
||||||
<div class="dropdown pr-1">
|
|
||||||
<div class="btn-group">
|
|
||||||
<button
|
|
||||||
class="btn btn-dark btn-sm mr-0 pr-1 d-flex"
|
|
||||||
:class="{'loading':isQuering}"
|
|
||||||
:title="`${$t('word.refresh')} (F5)`"
|
|
||||||
@click="getProcessesList"
|
|
||||||
>
|
|
||||||
<i v-if="!+autorefreshTimer" class="mdi mdi-24px mdi-refresh mr-1" />
|
|
||||||
<i v-else class="mdi mdi-24px mdi-history mdi-flip-h mr-1" />
|
|
||||||
</button>
|
|
||||||
<div class="btn btn-dark btn-sm dropdown-toggle pl-0 pr-0" tabindex="0">
|
|
||||||
<i class="mdi mdi-24px mdi-menu-down" />
|
|
||||||
</div>
|
|
||||||
<div class="menu px-3">
|
|
||||||
<span>{{ $t('word.autoRefresh') }}: <b>{{ +autorefreshTimer ? `${autorefreshTimer}s` : 'OFF' }}</b></span>
|
|
||||||
<input
|
|
||||||
v-model="autorefreshTimer"
|
|
||||||
class="slider no-border"
|
|
||||||
type="range"
|
|
||||||
min="0"
|
|
||||||
max="15"
|
|
||||||
step="0.5"
|
|
||||||
@change="setRefreshInterval"
|
|
||||||
>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="dropdown table-dropdown">
|
<a class="btn btn-clear c-hand" @click.stop="closeModal" />
|
||||||
<button
|
|
||||||
:disabled="isQuering"
|
|
||||||
class="btn btn-dark btn-sm dropdown-toggle d-flex mr-0 pr-0"
|
|
||||||
tabindex="0"
|
|
||||||
>
|
|
||||||
<i class="mdi mdi-24px mdi-file-export mr-1" />
|
|
||||||
<span>{{ $t('word.export') }}</span>
|
|
||||||
<i class="mdi mdi-24px mdi-menu-down" />
|
|
||||||
</button>
|
|
||||||
<ul class="menu text-left">
|
|
||||||
<li class="menu-item">
|
|
||||||
<a class="c-hand" @click="downloadTable('json')">JSON</a>
|
|
||||||
</li>
|
|
||||||
<li class="menu-item">
|
|
||||||
<a class="c-hand" @click="downloadTable('csv')">CSV</a>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="workspace-query-info">
|
<div class="processes-toolbar py-2 px-4">
|
||||||
<div v-if="sortedResults.length">
|
<div class="workspace-query-buttons">
|
||||||
{{ $t('word.processes') }}: <b>{{ sortedResults.length.toLocaleString() }}</b>
|
<div class="dropdown pr-1">
|
||||||
</div>
|
<div class="btn-group">
|
||||||
</div>
|
<button
|
||||||
</div>
|
class="btn btn-dark btn-sm mr-0 pr-1 d-flex"
|
||||||
<div class="modal-body py-0 workspace-query-results">
|
:class="{'loading':isQuering}"
|
||||||
<div
|
:title="`${$t('word.refresh')} (F5)`"
|
||||||
ref="tableWrapper"
|
@click="getProcessesList"
|
||||||
class="vscroll"
|
|
||||||
:style="{'height': resultsSize+'px'}"
|
|
||||||
>
|
|
||||||
<div ref="table" class="table table-hover">
|
|
||||||
<div class="thead">
|
|
||||||
<div class="tr">
|
|
||||||
<div
|
|
||||||
v-for="(field, index) in fields"
|
|
||||||
:key="index"
|
|
||||||
class="th c-hand"
|
|
||||||
>
|
>
|
||||||
<div ref="columnResize" class="column-resizable">
|
<i v-if="!+autorefreshTimer" class="mdi mdi-24px mdi-refresh mr-1" />
|
||||||
<div class="table-column-title" @click="sort(field)">
|
<i v-else class="mdi mdi-24px mdi-history mdi-flip-h mr-1" />
|
||||||
<span>{{ field.toUpperCase() }}</span>
|
</button>
|
||||||
<i
|
<div class="btn btn-dark btn-sm dropdown-toggle pl-0 pr-0" tabindex="0">
|
||||||
v-if="currentSort === field"
|
<i class="mdi mdi-24px mdi-menu-down" />
|
||||||
class="mdi sort-icon"
|
</div>
|
||||||
:class="currentSortDir === 'asc' ? 'mdi-sort-ascending':'mdi-sort-descending'"
|
<div class="menu px-3">
|
||||||
/>
|
<span>{{ $t('word.autoRefresh') }}: <b>{{ +autorefreshTimer ? `${autorefreshTimer}s` : 'OFF' }}</b></span>
|
||||||
|
<input
|
||||||
|
v-model="autorefreshTimer"
|
||||||
|
class="slider no-border"
|
||||||
|
type="range"
|
||||||
|
min="0"
|
||||||
|
max="15"
|
||||||
|
step="0.5"
|
||||||
|
@change="setRefreshInterval"
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="dropdown table-dropdown">
|
||||||
|
<button
|
||||||
|
:disabled="isQuering"
|
||||||
|
class="btn btn-dark btn-sm dropdown-toggle d-flex mr-0 pr-0"
|
||||||
|
tabindex="0"
|
||||||
|
>
|
||||||
|
<i class="mdi mdi-24px mdi-file-export mr-1" />
|
||||||
|
<span>{{ $t('word.export') }}</span>
|
||||||
|
<i class="mdi mdi-24px mdi-menu-down" />
|
||||||
|
</button>
|
||||||
|
<ul class="menu text-left">
|
||||||
|
<li class="menu-item">
|
||||||
|
<a class="c-hand" @click="downloadTable('json')">JSON</a>
|
||||||
|
</li>
|
||||||
|
<li class="menu-item">
|
||||||
|
<a class="c-hand" @click="downloadTable('csv')">CSV</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="workspace-query-info">
|
||||||
|
<div v-if="sortedResults.length">
|
||||||
|
{{ $t('word.processes') }}: <b>{{ sortedResults.length.toLocaleString() }}</b>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="modal-body py-0 workspace-query-results">
|
||||||
|
<div
|
||||||
|
ref="tableWrapper"
|
||||||
|
class="vscroll"
|
||||||
|
:style="{'height': resultsSize+'px'}"
|
||||||
|
>
|
||||||
|
<div ref="table" class="table table-hover">
|
||||||
|
<div class="thead">
|
||||||
|
<div class="tr">
|
||||||
|
<div
|
||||||
|
v-for="(field, index) in fields"
|
||||||
|
:key="index"
|
||||||
|
class="th c-hand"
|
||||||
|
>
|
||||||
|
<div ref="columnResize" class="column-resizable">
|
||||||
|
<div class="table-column-title" @click="sort(field)">
|
||||||
|
<span>{{ field.toUpperCase() }}</span>
|
||||||
|
<i
|
||||||
|
v-if="currentSort === field"
|
||||||
|
class="mdi sort-icon"
|
||||||
|
:class="currentSortDir === 'asc' ? 'mdi-sort-ascending':'mdi-sort-descending'"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<BaseVirtualScroll
|
||||||
|
ref="resultTable"
|
||||||
|
:items="sortedResults"
|
||||||
|
:item-height="22"
|
||||||
|
class="tbody"
|
||||||
|
:visible-height="resultsSize"
|
||||||
|
:scroll-element="scrollElement"
|
||||||
|
>
|
||||||
|
<template #default="{ items }">
|
||||||
|
<ModalProcessesListRow
|
||||||
|
v-for="row in items"
|
||||||
|
:key="row.id"
|
||||||
|
class="process-row"
|
||||||
|
:row="row"
|
||||||
|
@select-row="selectRow(row.id)"
|
||||||
|
@contextmenu="contextMenu"
|
||||||
|
@stop-refresh="stopRefresh"
|
||||||
|
/>
|
||||||
|
</template>
|
||||||
|
</BaseVirtualScroll>
|
||||||
</div>
|
</div>
|
||||||
<BaseVirtualScroll
|
|
||||||
ref="resultTable"
|
|
||||||
:items="sortedResults"
|
|
||||||
:item-height="22"
|
|
||||||
class="tbody"
|
|
||||||
:visible-height="resultsSize"
|
|
||||||
:scroll-element="scrollElement"
|
|
||||||
>
|
|
||||||
<template #default="{ items }">
|
|
||||||
<ModalProcessesListRow
|
|
||||||
v-for="row in items"
|
|
||||||
:key="row.id"
|
|
||||||
class="process-row"
|
|
||||||
:row="row"
|
|
||||||
@select-row="selectRow(row.id)"
|
|
||||||
@contextmenu="contextMenu"
|
|
||||||
@stop-refresh="stopRefresh"
|
|
||||||
/>
|
|
||||||
</template>
|
|
||||||
</BaseVirtualScroll>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</Teleport>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
|
|
||||||
|
|
@ -1,318 +1,320 @@
|
||||||
<template>
|
<template>
|
||||||
<div id="settings" class="modal active">
|
<Teleport to="#window-content">
|
||||||
<a class="modal-overlay c-hand" @click="closeModal" />
|
<div id="settings" class="modal active">
|
||||||
<div class="modal-container">
|
<a class="modal-overlay c-hand" @click="closeModal" />
|
||||||
<div class="modal-header pl-2">
|
<div class="modal-container">
|
||||||
<div class="modal-title h6">
|
<div class="modal-header pl-2">
|
||||||
<div class="d-flex">
|
<div class="modal-title h6">
|
||||||
<i class="mdi mdi-24px mdi-cog mr-1" />
|
<div class="d-flex">
|
||||||
<span class="cut-text">{{ $t('word.settings') }}</span>
|
<i class="mdi mdi-24px mdi-cog mr-1" />
|
||||||
|
<span class="cut-text">{{ $t('word.settings') }}</span>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<a class="btn btn-clear c-hand" @click="closeModal" />
|
||||||
</div>
|
</div>
|
||||||
<a class="btn btn-clear c-hand" @click="closeModal" />
|
<div class="modal-body p-0">
|
||||||
</div>
|
<div class="panel">
|
||||||
<div class="modal-body p-0">
|
<div class="panel-nav">
|
||||||
<div class="panel">
|
<ul class="tab tab-block">
|
||||||
<div class="panel-nav">
|
<li
|
||||||
<ul class="tab tab-block">
|
class="tab-item c-hand"
|
||||||
<li
|
:class="{'active': selectedTab === 'general'}"
|
||||||
class="tab-item c-hand"
|
@click="selectTab('general')"
|
||||||
:class="{'active': selectedTab === 'general'}"
|
>
|
||||||
@click="selectTab('general')"
|
<a class="tab-link">{{ $t('word.general') }}</a>
|
||||||
>
|
</li>
|
||||||
<a class="tab-link">{{ $t('word.general') }}</a>
|
<li
|
||||||
</li>
|
class="tab-item c-hand"
|
||||||
<li
|
:class="{'active': selectedTab === 'themes'}"
|
||||||
class="tab-item c-hand"
|
@click="selectTab('themes')"
|
||||||
:class="{'active': selectedTab === 'themes'}"
|
>
|
||||||
@click="selectTab('themes')"
|
<a class="tab-link">{{ $t('word.themes') }}</a>
|
||||||
>
|
</li>
|
||||||
<a class="tab-link">{{ $t('word.themes') }}</a>
|
<li
|
||||||
</li>
|
v-if="updateStatus !== 'disabled'"
|
||||||
<li
|
class="tab-item c-hand"
|
||||||
v-if="updateStatus !== 'disabled'"
|
:class="{'active': selectedTab === 'update'}"
|
||||||
class="tab-item c-hand"
|
@click="selectTab('update')"
|
||||||
:class="{'active': selectedTab === 'update'}"
|
>
|
||||||
@click="selectTab('update')"
|
<a class="tab-link" :class="{'badge badge-update': hasUpdates}">{{ $t('word.update') }}</a>
|
||||||
>
|
</li>
|
||||||
<a class="tab-link" :class="{'badge badge-update': hasUpdates}">{{ $t('word.update') }}</a>
|
<li
|
||||||
</li>
|
class="tab-item c-hand"
|
||||||
<li
|
:class="{'active': selectedTab === 'changelog'}"
|
||||||
class="tab-item c-hand"
|
@click="selectTab('changelog')"
|
||||||
:class="{'active': selectedTab === 'changelog'}"
|
>
|
||||||
@click="selectTab('changelog')"
|
<a class="tab-link">{{ $t('word.changelog') }}</a>
|
||||||
>
|
</li>
|
||||||
<a class="tab-link">{{ $t('word.changelog') }}</a>
|
<li
|
||||||
</li>
|
class="tab-item c-hand"
|
||||||
<li
|
:class="{'active': selectedTab === 'about'}"
|
||||||
class="tab-item c-hand"
|
@click="selectTab('about')"
|
||||||
:class="{'active': selectedTab === 'about'}"
|
>
|
||||||
@click="selectTab('about')"
|
<a class="tab-link">{{ $t('word.about') }}</a>
|
||||||
>
|
</li>
|
||||||
<a class="tab-link">{{ $t('word.about') }}</a>
|
</ul>
|
||||||
</li>
|
</div>
|
||||||
</ul>
|
<div v-show="selectedTab === 'general'" class="panel-body py-4">
|
||||||
</div>
|
<div class="container">
|
||||||
<div v-show="selectedTab === 'general'" class="panel-body py-4">
|
<form class="form-horizontal columns">
|
||||||
<div class="container">
|
<div class="column col-12 h6 text-uppercase mb-1">
|
||||||
<form class="form-horizontal columns">
|
{{ $t('word.application') }}
|
||||||
<div class="column col-12 h6 text-uppercase mb-1">
|
</div>
|
||||||
{{ $t('word.application') }}
|
<div class="column col-9 col-sm-12 mb-2">
|
||||||
</div>
|
<div class="form-group">
|
||||||
<div class="column col-9 col-sm-12 mb-2">
|
<div class="col-7 col-sm-12">
|
||||||
<div class="form-group">
|
<label class="form-label">
|
||||||
<div class="col-7 col-sm-12">
|
<i class="mdi mdi-18px mdi-translate mr-1" />
|
||||||
<label class="form-label">
|
{{ $t('word.language') }}
|
||||||
<i class="mdi mdi-18px mdi-translate mr-1" />
|
</label>
|
||||||
{{ $t('word.language') }}
|
</div>
|
||||||
</label>
|
<div class="col-5 col-sm-12">
|
||||||
</div>
|
<select
|
||||||
<div class="col-5 col-sm-12">
|
v-model="localLocale"
|
||||||
<select
|
class="form-select"
|
||||||
v-model="localLocale"
|
@change="changeLocale(localLocale)"
|
||||||
class="form-select"
|
|
||||||
@change="changeLocale(localLocale)"
|
|
||||||
>
|
|
||||||
<option
|
|
||||||
v-for="(locale, key) in locales"
|
|
||||||
:key="key"
|
|
||||||
:value="locale.code"
|
|
||||||
>
|
>
|
||||||
{{ locale.name }}
|
<option
|
||||||
</option>
|
v-for="(locale, key) in locales"
|
||||||
</select>
|
:key="key"
|
||||||
|
:value="locale.code"
|
||||||
|
>
|
||||||
|
{{ locale.name }}
|
||||||
|
</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<div class="form-group">
|
||||||
<div class="form-group">
|
<div class="col-7 col-sm-12">
|
||||||
<div class="col-7 col-sm-12">
|
<label class="form-label">
|
||||||
<label class="form-label">
|
{{ $t('message.dataTabPageSize') }}
|
||||||
{{ $t('message.dataTabPageSize') }}
|
</label>
|
||||||
</label>
|
</div>
|
||||||
</div>
|
<div class="col-5 col-sm-12">
|
||||||
<div class="col-5 col-sm-12">
|
<select
|
||||||
<select
|
v-model="localPageSize"
|
||||||
v-model="localPageSize"
|
class="form-select"
|
||||||
class="form-select"
|
@change="changePageSize(+localPageSize)"
|
||||||
@change="changePageSize(+localPageSize)"
|
|
||||||
>
|
|
||||||
<option
|
|
||||||
v-for="size in pageSizes"
|
|
||||||
:key="size"
|
|
||||||
>
|
>
|
||||||
{{ size }}
|
<option
|
||||||
</option>
|
v-for="size in pageSizes"
|
||||||
</select>
|
:key="size"
|
||||||
|
>
|
||||||
|
{{ size }}
|
||||||
|
</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="form-group mb-0">
|
||||||
|
<div class="col-7 col-sm-12">
|
||||||
|
<label class="form-label">
|
||||||
|
{{ $t('message.restorePreviourSession') }}
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
<div class="col-5 col-sm-12">
|
||||||
|
<label class="form-switch d-inline-block" @click.prevent="toggleRestoreSession">
|
||||||
|
<input type="checkbox" :checked="restoreTabs">
|
||||||
|
<i class="form-icon" />
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="form-group mb-0">
|
||||||
|
<div class="col-7 col-sm-12">
|
||||||
|
<label class="form-label">
|
||||||
|
{{ $t('message.disableBlur') }}
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
<div class="col-5 col-sm-12">
|
||||||
|
<label class="form-switch d-inline-block" @click.prevent="toggleDisableBlur">
|
||||||
|
<input type="checkbox" :checked="disableBlur">
|
||||||
|
<i class="form-icon" />
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<div class="col-7 col-sm-12">
|
||||||
|
<label class="form-label">
|
||||||
|
{{ $t('message.notificationsTimeout') }}
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
<div class="col-5 col-sm-12">
|
||||||
|
<div class="input-group">
|
||||||
|
<input
|
||||||
|
v-model="localTimeout"
|
||||||
|
class="form-input"
|
||||||
|
type="number"
|
||||||
|
min="1"
|
||||||
|
@focusout="checkNotificationsTimeout"
|
||||||
|
>
|
||||||
|
<span class="input-group-addon">{{ $t('word.seconds') }}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="form-group mb-0">
|
|
||||||
<div class="col-7 col-sm-12">
|
<div class="column col-12 h6 mt-4 text-uppercase mb-1">
|
||||||
<label class="form-label">
|
{{ $t('word.editor') }}
|
||||||
{{ $t('message.restorePreviourSession') }}
|
</div>
|
||||||
</label>
|
<div class="column col-9 col-sm-12">
|
||||||
|
<div class="form-group mb-0">
|
||||||
|
<div class="col-7 col-sm-12">
|
||||||
|
<label class="form-label">
|
||||||
|
{{ $t('word.autoCompletion') }}
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
<div class="col-5 col-sm-12">
|
||||||
|
<label class="form-switch d-inline-block" @click.prevent="toggleAutoComplete">
|
||||||
|
<input type="checkbox" :checked="selectedAutoComplete">
|
||||||
|
<i class="form-icon" />
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="col-5 col-sm-12">
|
<div class="form-group mb-0">
|
||||||
<label class="form-switch d-inline-block" @click.prevent="toggleRestoreSession">
|
<div class="col-7 col-sm-12">
|
||||||
<input type="checkbox" :checked="restoreTabs">
|
<label class="form-label">
|
||||||
<i class="form-icon" />
|
{{ $t('message.wrapLongLines') }}
|
||||||
</label>
|
</label>
|
||||||
|
</div>
|
||||||
|
<div class="col-5 col-sm-12">
|
||||||
|
<label class="form-switch d-inline-block" @click.prevent="toggleLineWrap">
|
||||||
|
<input type="checkbox" :checked="selectedLineWrap">
|
||||||
|
<i class="form-icon" />
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="form-group mb-0">
|
</form>
|
||||||
<div class="col-7 col-sm-12">
|
</div>
|
||||||
<label class="form-label">
|
</div>
|
||||||
{{ $t('message.disableBlur') }}
|
|
||||||
</label>
|
<div v-show="selectedTab === 'themes'" class="panel-body py-4">
|
||||||
</div>
|
<div class="container">
|
||||||
<div class="col-5 col-sm-12">
|
<div class="columns">
|
||||||
<label class="form-switch d-inline-block" @click.prevent="toggleDisableBlur">
|
<div class="column col-12 h6 text-uppercase mb-2">
|
||||||
<input type="checkbox" :checked="disableBlur">
|
{{ $t('message.applicationTheme') }}
|
||||||
<i class="form-icon" />
|
</div>
|
||||||
</label>
|
<div
|
||||||
|
class="column col-6 c-hand theme-block"
|
||||||
|
:class="{'selected': applicationTheme === 'dark'}"
|
||||||
|
@click="changeApplicationTheme('dark')"
|
||||||
|
>
|
||||||
|
<img src="../images/dark.png" class="img-responsive img-fit-cover s-rounded">
|
||||||
|
<div class="theme-name text-light">
|
||||||
|
<i class="mdi mdi-moon-waning-crescent mdi-48px" />
|
||||||
|
<div class="h6 mt-4">
|
||||||
|
{{ $t('word.dark') }}
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="form-group">
|
<div
|
||||||
<div class="col-7 col-sm-12">
|
class="column col-6 c-hand theme-block"
|
||||||
<label class="form-label">
|
:class="{'selected': applicationTheme === 'light'}"
|
||||||
{{ $t('message.notificationsTimeout') }}
|
@click="changeApplicationTheme('light')"
|
||||||
</label>
|
>
|
||||||
</div>
|
<img src="../images/light.png" class="img-responsive img-fit-cover s-rounded">
|
||||||
<div class="col-5 col-sm-12">
|
<div class="theme-name text-dark">
|
||||||
<div class="input-group">
|
<i class="mdi mdi-white-balance-sunny mdi-48px" />
|
||||||
<input
|
<div class="h6 mt-4">
|
||||||
v-model="localTimeout"
|
{{ $t('word.light') }}
|
||||||
class="form-input"
|
|
||||||
type="number"
|
|
||||||
min="1"
|
|
||||||
@focusout="checkNotificationsTimeout"
|
|
||||||
>
|
|
||||||
<span class="input-group-addon">{{ $t('word.seconds') }}</span>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="column col-12 h6 mt-4 text-uppercase mb-1">
|
<div class="columns mt-4">
|
||||||
{{ $t('word.editor') }}
|
<div class="column col-12 h6 text-uppercase mb-2 mt-4">
|
||||||
</div>
|
{{ $t('message.editorTheme') }}
|
||||||
<div class="column col-9 col-sm-12">
|
|
||||||
<div class="form-group mb-0">
|
|
||||||
<div class="col-7 col-sm-12">
|
|
||||||
<label class="form-label">
|
|
||||||
{{ $t('word.autoCompletion') }}
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
<div class="col-5 col-sm-12">
|
|
||||||
<label class="form-switch d-inline-block" @click.prevent="toggleAutoComplete">
|
|
||||||
<input type="checkbox" :checked="selectedAutoComplete">
|
|
||||||
<i class="form-icon" />
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="form-group mb-0">
|
<div class="column col-6 h5 mb-4">
|
||||||
<div class="col-7 col-sm-12">
|
<select
|
||||||
<label class="form-label">
|
v-model="localEditorTheme"
|
||||||
{{ $t('message.wrapLongLines') }}
|
class="form-select"
|
||||||
</label>
|
@change="changeEditorTheme(localEditorTheme)"
|
||||||
</div>
|
|
||||||
<div class="col-5 col-sm-12">
|
|
||||||
<label class="form-switch d-inline-block" @click.prevent="toggleLineWrap">
|
|
||||||
<input type="checkbox" :checked="selectedLineWrap">
|
|
||||||
<i class="form-icon" />
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</form>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div v-show="selectedTab === 'themes'" class="panel-body py-4">
|
|
||||||
<div class="container">
|
|
||||||
<div class="columns">
|
|
||||||
<div class="column col-12 h6 text-uppercase mb-2">
|
|
||||||
{{ $t('message.applicationTheme') }}
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
class="column col-6 c-hand theme-block"
|
|
||||||
:class="{'selected': applicationTheme === 'dark'}"
|
|
||||||
@click="changeApplicationTheme('dark')"
|
|
||||||
>
|
|
||||||
<img src="../images/dark.png" class="img-responsive img-fit-cover s-rounded">
|
|
||||||
<div class="theme-name text-light">
|
|
||||||
<i class="mdi mdi-moon-waning-crescent mdi-48px" />
|
|
||||||
<div class="h6 mt-4">
|
|
||||||
{{ $t('word.dark') }}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
class="column col-6 c-hand theme-block"
|
|
||||||
:class="{'selected': applicationTheme === 'light'}"
|
|
||||||
@click="changeApplicationTheme('light')"
|
|
||||||
>
|
|
||||||
<img src="../images/light.png" class="img-responsive img-fit-cover s-rounded">
|
|
||||||
<div class="theme-name text-dark">
|
|
||||||
<i class="mdi mdi-white-balance-sunny mdi-48px" />
|
|
||||||
<div class="h6 mt-4">
|
|
||||||
{{ $t('word.light') }}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="columns mt-4">
|
|
||||||
<div class="column col-12 h6 text-uppercase mb-2 mt-4">
|
|
||||||
{{ $t('message.editorTheme') }}
|
|
||||||
</div>
|
|
||||||
<div class="column col-6 h5 mb-4">
|
|
||||||
<select
|
|
||||||
v-model="localEditorTheme"
|
|
||||||
class="form-select"
|
|
||||||
@change="changeEditorTheme(localEditorTheme)"
|
|
||||||
>
|
|
||||||
<optgroup
|
|
||||||
v-for="group in editorThemes"
|
|
||||||
:key="group.group"
|
|
||||||
:label="group.group"
|
|
||||||
>
|
>
|
||||||
<option
|
<optgroup
|
||||||
v-for="theme in group.themes"
|
v-for="group in editorThemes"
|
||||||
:key="theme.name"
|
:key="group.group"
|
||||||
:value="theme.code"
|
:label="group.group"
|
||||||
:selected="editorTheme === theme.code"
|
|
||||||
>
|
>
|
||||||
{{ theme.name }}
|
<option
|
||||||
</option>
|
v-for="theme in group.themes"
|
||||||
</optgroup>
|
:key="theme.name"
|
||||||
</select>
|
:value="theme.code"
|
||||||
</div>
|
:selected="editorTheme === theme.code"
|
||||||
<div class="column col-6 mb-4">
|
>
|
||||||
<div class="btn-group btn-group-block">
|
{{ theme.name }}
|
||||||
<button
|
</option>
|
||||||
class="btn btn-dark cut-text"
|
</optgroup>
|
||||||
:class="{'active': editorFontSize === 'small'}"
|
</select>
|
||||||
@click="changeEditorFontSize('small')"
|
</div>
|
||||||
>
|
<div class="column col-6 mb-4">
|
||||||
{{ $t('word.small') }}
|
<div class="btn-group btn-group-block">
|
||||||
</button>
|
<button
|
||||||
<button
|
class="btn btn-dark cut-text"
|
||||||
class="btn btn-dark cut-text"
|
:class="{'active': editorFontSize === 'small'}"
|
||||||
:class="{'active': editorFontSize === 'medium'}"
|
@click="changeEditorFontSize('small')"
|
||||||
@click="changeEditorFontSize('medium')"
|
>
|
||||||
>
|
{{ $t('word.small') }}
|
||||||
{{ $t('word.medium') }}
|
</button>
|
||||||
</button>
|
<button
|
||||||
<button
|
class="btn btn-dark cut-text"
|
||||||
class="btn btn-dark cut-text"
|
:class="{'active': editorFontSize === 'medium'}"
|
||||||
:class="{'active': editorFontSize === 'large'}"
|
@click="changeEditorFontSize('medium')"
|
||||||
@click="changeEditorFontSize('large')"
|
>
|
||||||
>
|
{{ $t('word.medium') }}
|
||||||
{{ $t('word.large') }}
|
</button>
|
||||||
</button>
|
<button
|
||||||
|
class="btn btn-dark cut-text"
|
||||||
|
:class="{'active': editorFontSize === 'large'}"
|
||||||
|
@click="changeEditorFontSize('large')"
|
||||||
|
>
|
||||||
|
{{ $t('word.large') }}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="column col-12">
|
||||||
|
<BaseTextEditor
|
||||||
|
:model-value="exampleQuery"
|
||||||
|
mode="sql"
|
||||||
|
:workspace="workspace"
|
||||||
|
:read-only="true"
|
||||||
|
:height="270"
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
<div class="column col-12">
|
|
||||||
<BaseTextEditor
|
|
||||||
:model-value="exampleQuery"
|
|
||||||
mode="sql"
|
|
||||||
:workspace="workspace"
|
|
||||||
:read-only="true"
|
|
||||||
:height="270"
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
|
|
||||||
<div v-show="selectedTab === 'update'" class="panel-body py-4">
|
<div v-show="selectedTab === 'update'" class="panel-body py-4">
|
||||||
<ModalSettingsUpdate />
|
<ModalSettingsUpdate />
|
||||||
</div>
|
</div>
|
||||||
<div v-show="selectedTab === 'changelog'" class="panel-body py-4">
|
<div v-show="selectedTab === 'changelog'" class="panel-body py-4">
|
||||||
<ModalSettingsChangelog />
|
<ModalSettingsChangelog />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div v-show="selectedTab === 'about'" class="panel-body py-4">
|
<div v-show="selectedTab === 'about'" class="panel-body py-4">
|
||||||
<div class="text-center">
|
<div class="text-center">
|
||||||
<img src="../images/logo.svg" width="128">
|
<img src="../images/logo.svg" width="128">
|
||||||
<h4>{{ appName }}</h4>
|
<h4>{{ appName }}</h4>
|
||||||
<p class="mb-2">
|
<p class="mb-2">
|
||||||
{{ $t('word.version') }} {{ appVersion }}<br>
|
{{ $t('word.version') }} {{ appVersion }}<br>
|
||||||
<a class="c-hand" @click="openOutside('https://github.com/antares-sql/antares')"><i class="mdi mdi-github d-inline" /> GitHub</a> • <a class="c-hand" @click="openOutside('https://twitter.com/AntaresSQL')"><i class="mdi mdi-twitter d-inline" /> Twitter</a> • <a class="c-hand" @click="openOutside('https://antares-sql.app/')"><i class="mdi mdi-web d-inline" /> Website</a><br>
|
<a class="c-hand" @click="openOutside('https://github.com/antares-sql/antares')"><i class="mdi mdi-github d-inline" /> GitHub</a> • <a class="c-hand" @click="openOutside('https://twitter.com/AntaresSQL')"><i class="mdi mdi-twitter d-inline" /> Twitter</a> • <a class="c-hand" @click="openOutside('https://antares-sql.app/')"><i class="mdi mdi-web d-inline" /> Website</a><br>
|
||||||
<small>{{ $t('word.author') }} <a class="c-hand" @click="openOutside('https://github.com/Fabio286')">{{ appAuthor }}</a></small><br>
|
<small>{{ $t('word.author') }} <a class="c-hand" @click="openOutside('https://github.com/Fabio286')">{{ appAuthor }}</a></small><br>
|
||||||
</p>
|
</p>
|
||||||
<div class="mb-2">
|
<div class="mb-2">
|
||||||
<small class="d-block text-uppercase">{{ $t('word.contributors') }}:</small>
|
<small class="d-block text-uppercase">{{ $t('word.contributors') }}:</small>
|
||||||
<div class="d-block py-1">
|
<div class="d-block py-1">
|
||||||
<small v-for="(contributor, i) in otherContributors" :key="i">{{ i !== 0 ? ', ' : '' }}{{ contributor }}</small>
|
<small v-for="(contributor, i) in otherContributors" :key="i">{{ i !== 0 ? ', ' : '' }}{{ contributor }}</small>
|
||||||
|
</div>
|
||||||
|
<small>{{ $t('message.madeWithJS') }}</small>
|
||||||
</div>
|
</div>
|
||||||
<small>{{ $t('message.madeWithJS') }}</small>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</Teleport>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
|
|
||||||
|
|
@ -4,7 +4,7 @@
|
||||||
@mouseenter="clearTimeouts"
|
@mouseenter="clearTimeouts"
|
||||||
@mouseleave="rearmTimeouts"
|
@mouseleave="rearmTimeouts"
|
||||||
>
|
>
|
||||||
<transition-group tag="div" name="slide-fade">
|
<TransitionGroup tag="div" name="slide-fade">
|
||||||
<BaseNotification
|
<BaseNotification
|
||||||
v-for="notification in latestNotifications"
|
v-for="notification in latestNotifications"
|
||||||
:key="notification.uid"
|
:key="notification.uid"
|
||||||
|
|
@ -12,7 +12,7 @@
|
||||||
:status="notification.status"
|
:status="notification.status"
|
||||||
@close="removeNotification(notification.uid)"
|
@close="removeNotification(notification.uid)"
|
||||||
/>
|
/>
|
||||||
</transition-group>
|
</TransitionGroup>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -811,48 +811,5 @@ export default {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.workspace-query-results {
|
|
||||||
overflow: auto;
|
|
||||||
white-space: nowrap;
|
|
||||||
|
|
||||||
.table {
|
|
||||||
width: auto;
|
|
||||||
border-collapse: separate;
|
|
||||||
|
|
||||||
.th {
|
|
||||||
position: sticky;
|
|
||||||
top: 0;
|
|
||||||
border: 2px solid;
|
|
||||||
border-left: none;
|
|
||||||
border-bottom-width: 2px;
|
|
||||||
padding: 0;
|
|
||||||
font-weight: 700;
|
|
||||||
font-size: 0.7rem;
|
|
||||||
z-index: 1;
|
|
||||||
|
|
||||||
> div {
|
|
||||||
padding: 0.1rem 0.2rem;
|
|
||||||
min-width: -webkit-fill-available;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.td {
|
|
||||||
border-right: 2px solid;
|
|
||||||
border-bottom: 2px solid;
|
|
||||||
padding: 0 0.2rem;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
max-width: 200px;
|
|
||||||
white-space: nowrap;
|
|
||||||
overflow: hidden;
|
|
||||||
font-size: 0.7rem;
|
|
||||||
position: relative;
|
|
||||||
|
|
||||||
&:focus {
|
|
||||||
outline: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -152,7 +152,7 @@
|
||||||
</template>
|
</template>
|
||||||
<template #body>
|
<template #body>
|
||||||
<div class="mb-2">
|
<div class="mb-2">
|
||||||
<transition name="jump-down">
|
<Transition name="jump-down">
|
||||||
<div v-if="contentInfo.size">
|
<div v-if="contentInfo.size">
|
||||||
<img
|
<img
|
||||||
v-if="isImage"
|
v-if="isImage"
|
||||||
|
|
@ -173,7 +173,7 @@
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</transition>
|
</Transition>
|
||||||
<div class="editor-field-info">
|
<div class="editor-field-info">
|
||||||
<div>
|
<div>
|
||||||
<b>{{ $t('word.size') }}</b>: {{ formatBytes(editingContent.length) }}<br>
|
<b>{{ $t('word.size') }}</b>: {{ formatBytes(editingContent.length) }}<br>
|
||||||
|
|
|
||||||
|
|
@ -1,7 +1,7 @@
|
||||||
.table {
|
.table {
|
||||||
border-collapse: collapse;
|
border-collapse: collapse;
|
||||||
border-spacing: 0;
|
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
border-spacing: 0;
|
||||||
display: table;
|
display: table;
|
||||||
table-layout: fixed;
|
table-layout: fixed;
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -87,6 +87,50 @@ option:checked {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.workspace-query-results {
|
||||||
|
overflow: auto;
|
||||||
|
white-space: nowrap;
|
||||||
|
|
||||||
|
.table {
|
||||||
|
width: auto;
|
||||||
|
border-collapse: separate;
|
||||||
|
|
||||||
|
.th {
|
||||||
|
position: sticky;
|
||||||
|
top: 0;
|
||||||
|
border: 2px solid;
|
||||||
|
border-left: none;
|
||||||
|
border-bottom-width: 2px;
|
||||||
|
padding: 0;
|
||||||
|
font-weight: 700;
|
||||||
|
font-size: 0.7rem;
|
||||||
|
z-index: 1;
|
||||||
|
|
||||||
|
> div {
|
||||||
|
padding: 0.1rem 0.2rem;
|
||||||
|
min-width: -webkit-fill-available;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.td {
|
||||||
|
border-right: 2px solid;
|
||||||
|
border-bottom: 2px solid;
|
||||||
|
padding: 0 0.2rem;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
max-width: 200px;
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
|
font-size: 0.7rem;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
&:focus {
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.workspace-tabs {
|
.workspace-tabs {
|
||||||
align-content: baseline;
|
align-content: baseline;
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -181,37 +181,6 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.workspace-query-results {
|
|
||||||
.table {
|
|
||||||
.th {
|
|
||||||
border-color: darken($bg-color-light-gray, 80%);
|
|
||||||
background-color: $body-bg-dark;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tr {
|
|
||||||
background-color: darken($bg-color-light-gray, 80%);
|
|
||||||
|
|
||||||
.td:first-child {
|
|
||||||
border-left: 2px solid $body-bg-dark;
|
|
||||||
}
|
|
||||||
|
|
||||||
.td {
|
|
||||||
border-color: $body-bg-dark;
|
|
||||||
|
|
||||||
&:focus {
|
|
||||||
box-shadow: inset 0 0 0 2px darken($body-font-color-dark, 40%);
|
|
||||||
background-color: rgba($color: #000, $alpha: 0.3);
|
|
||||||
}
|
|
||||||
|
|
||||||
.editable-field {
|
|
||||||
box-shadow: inset 0 0 0 2px darken($body-font-color-dark, 40%);
|
|
||||||
background-color: rgba($color: #000, $alpha: 0.3);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.workspace-tabs {
|
.workspace-tabs {
|
||||||
.tab-block {
|
.tab-block {
|
||||||
background: $bg-color-light-dark;
|
background: $bg-color-light-dark;
|
||||||
|
|
@ -233,6 +202,37 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.workspace-query-results {
|
||||||
|
.table {
|
||||||
|
.th {
|
||||||
|
border-color: darken($bg-color-light-gray, 80%);
|
||||||
|
background-color: $body-bg-dark;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tr {
|
||||||
|
background-color: darken($bg-color-light-gray, 80%);
|
||||||
|
|
||||||
|
.td:first-child {
|
||||||
|
border-left: 2px solid $body-bg-dark;
|
||||||
|
}
|
||||||
|
|
||||||
|
.td {
|
||||||
|
border-color: $body-bg-dark;
|
||||||
|
|
||||||
|
&:focus {
|
||||||
|
box-shadow: inset 0 0 0 2px darken($body-font-color-dark, 40%);
|
||||||
|
background-color: rgba($color: #000, $alpha: 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.editable-field {
|
||||||
|
box-shadow: inset 0 0 0 2px darken($body-font-color-dark, 40%);
|
||||||
|
background-color: rgba($color: #000, $alpha: 0.3);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.connection-panel {
|
.connection-panel {
|
||||||
.panel {
|
.panel {
|
||||||
background: rgba($bg-color-light-dark, 50%);
|
background: rgba($bg-color-light-dark, 50%);
|
||||||
|
|
|
||||||
|
|
@ -217,33 +217,33 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.workspace-query-results {
|
.workspace-query-results {
|
||||||
.table {
|
.table {
|
||||||
.th {
|
.th {
|
||||||
background: $body-bg;
|
background: $body-bg;
|
||||||
border-color: lighten($bg-color-light-gray, 2%);
|
border-color: lighten($bg-color-light-gray, 2%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.tr {
|
||||||
|
background-color: lighten($bg-color-light-gray, 2%);
|
||||||
|
|
||||||
|
.td:first-child {
|
||||||
|
border-left: 2px solid $body-bg;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tr {
|
.td {
|
||||||
background-color: lighten($bg-color-light-gray, 2%);
|
border-color: $body-bg;
|
||||||
|
|
||||||
.td:first-child {
|
&:focus {
|
||||||
border-left: 2px solid $body-bg;
|
box-shadow: inset 0 0 0 2px lighten($body-font-color, 10%);
|
||||||
|
background-color: $body-font-color-dark;
|
||||||
}
|
}
|
||||||
|
|
||||||
.td {
|
.editable-field {
|
||||||
border-color: $body-bg;
|
box-shadow: inset 0 0 0 2px lighten($body-font-color, 10%);
|
||||||
|
background-color: $body-font-color-dark;
|
||||||
&:focus {
|
|
||||||
box-shadow: inset 0 0 0 2px lighten($body-font-color, 10%);
|
|
||||||
background-color: $body-font-color-dark;
|
|
||||||
}
|
|
||||||
|
|
||||||
.editable-field {
|
|
||||||
box-shadow: inset 0 0 0 2px lighten($body-font-color, 10%);
|
|
||||||
background-color: $body-font-color-dark;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue