Skip to content

Commit

Permalink
feat: search form in all connections modal
Browse files Browse the repository at this point in the history
  • Loading branch information
@Fabio286
Fabio286 committed Jul 4, 2022
1 parent a703dcc commit ec5ab73
Show file tree
Hide file tree
Showing 7 changed files with 157 additions and 76 deletions.
189 changes: 118 additions & 71 deletions src/renderer/components/ModalAllConnections.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,60 +14,89 @@
</div>
<div class="modal-body py-0">
<div class="columns">
<div
v-for="connection in connections"
:key="connection.uid"
class="column col-md-6 col-lg-4 col-3 p-3"
>
<div class="panel">
<div class="panel-header text-center">
<figure class="avatar avatar-lg">
<i class="settingbar-element-icon dbi" :class="[`dbi-${connection.client}`]" />
</figure>
<div class="panel-title h6 mt-10">
{{ getConnectionName(connection.uid) }}
</div>
<div class="panel-subtitle">
{{ connection.client }}
</div>
<div class="connections-search column col-12 columns col-gapless">
<div class="column col-12 mt-2">
<div
ref="searchForm"
class="form-group has-icon-right p-2 m-0"
>
<input
v-model="searchTerm"
class="form-input"
type="text"
:placeholder="t('message.searchForConnections')"
@keypress.esc="searchTerm = ''"
>
<i v-if="!searchTerm" class="form-icon mdi mdi-magnify mdi-18px pr-4" />
<i
v-else
class="form-icon c-hand mdi mdi-backspace mdi-18px pr-4"
@click="searchTerm = ''"
/>
</div>
<div class="panel-body text-center">
<div v-if="connection.databasePath">
<div class="pl-1 text-break">
<span class="text-bold">PATH:</span> {{ connection.databasePath }}
</div>
</div>
<TransitionGroup name="fade" :duration="{enter: 200, leave: 200}">
<div
v-for="connection in filteredConnections"
:key="connection.uid"
class="connection-block column col-md-6 col-lg-4 col-3 p-3"
tabindex="0"
@click.stop="selectConnection(connection.uid)"
@keypress.stop.enter="selectConnection(connection.uid)"
>
<div class="panel">
<div class="panel-header p-2 text-center">
<figure class="avatar avatar-lg pt-1 mb-1">
<i class="settingbar-element-icon dbi" :class="[`dbi-${connection.client}`]" />
</figure>
<div class="panel-title h6 text-ellipsis">
{{ getConnectionName(connection.uid) }}
</div>
</div>
<div v-else>
<div class="pl-1 text-break">
<span class="text-bold">HOST:</span> {{ connection.host }}
<div class="panel-subtitle">
{{ clients.get(connection.client) || connection.client }}
</div>
</div>
<div v-if="connection.user">
<div class="pl-1 text-break">
<span class="text-bold">USER:</span> {{ connection.user }}
<div class="panel-body text-center">
<div v-if="connection.databasePath">
<div class="text-ellipsis" :title="connection.databasePath">
<i class="mdi mdi-database d-inline" /> <span class="text-bold">{{ connection.databasePath }}</span>
</div>
</div>
</div>
<div v-if="connection.schema">
<div class="pl-1 text-break">
<span class="text-bold">SCHEMA:</span> {{ connection.schema }}
<div v-else>
<div class="text-ellipsis" :title="`${connection.host}:${connection.port}`">
<i class="mdi mdi-server d-inline" /> <span class="text-bold">{{ connection.host }}:{{ connection.port }}</span>
</div>
</div>
</div>
<div v-if="connection.database">
<div class="pl-1 text-break">
<span class="text-bold">DATABASE:</span> {{ connection.database }}
<div v-if="connection.user">
<div class="text-ellipsis">
<i class="mdi mdi-account d-inline" /> <span class="text-bold">{{ connection.user }}</span>
</div>
</div>
<div v-if="connection.schema">
<div class="text-ellipsis">
<i class="mdi mdi-database d-inline" /> <span class="text-bold">{{ connection.schema }}</span>
</div>
</div>
<div v-if="connection.database">
<div class="text-ellipsis">
<i class="mdi mdi-database d-inline" /> <span class="text-bold">{{ connection.database }}</span>
</div>
</div>
</div>
</div>
<div class="panel-footer text-center py-0">
<div v-if="connection.ssl" class="chip bg-success mt-2">
SSL
</div>
<div v-if="connection.ssh" class="chip bg-success mt-2">
SSH
<div class="panel-footer text-center py-0">
<div v-if="connection.ssl" class="chip bg-success mt-2">
<i class="mdi mdi-lock mdi-18px mr-1" />
SSL
</div>
<div v-if="connection.ssh" class="chip bg-success mt-2">
<i class="mdi mdi-console-network mdi-18px mr-1" />
SSH
</div>
</div>
</div>
</div>
</div>
</TransitionGroup>
</div>
</div>
</div>
Expand All @@ -76,44 +105,61 @@
</template>

<script setup lang="ts">
import { computed, ref } from 'vue';
import { storeToRefs } from 'pinia';
import { useI18n } from 'vue-i18n';
import { useFocusTrap } from '@/composables/useFocusTrap';
import { useConnectionsStore } from '@/stores/connections';
import { useWorkspacesStore } from '@/stores/workspaces';
import { storeToRefs } from 'pinia';
const { t } = useI18n();
const connectionsStore = useConnectionsStore();
const workspacesStore = useWorkspacesStore();
const { connections } = storeToRefs(connectionsStore);
const { getConnectionName } = connectionsStore;
const { getWorkspace } = workspacesStore;
const { selectWorkspace } = workspacesStore;
const { trapRef } = useFocusTrap();
const emit = defineEmits(['close']);
const clients = new Map([
['mysql', 'MySQL'],
['maria', 'MariaDB'],
['pg', 'PostgreSQL'],
['sqlite', 'SQLite']
]);
const searchTerm = ref('');
const filteredConnections = computed(() => {
return connections.value.filter(connection => {
return connection.name?.toLocaleLowerCase().includes(searchTerm.value.toLocaleLowerCase()) ||
connection.host?.toLocaleLowerCase().includes(searchTerm.value.toLocaleLowerCase()) ||
connection.database?.toLocaleLowerCase().includes(searchTerm.value.toLocaleLowerCase()) ||
connection.databasePath?.toLocaleLowerCase().includes(searchTerm.value.toLocaleLowerCase()) ||
connection.schema?.toLocaleLowerCase().includes(searchTerm.value.toLocaleLowerCase()) ||
connection.user?.toLocaleLowerCase().includes(searchTerm.value.toLocaleLowerCase()) ||
String(connection.port)?.includes(searchTerm.value);
});
});
const closeModal = () => emit('close');
const onKey = (e:KeyboardEvent) => {
e.stopPropagation();
if (e.key === 'Escape')
closeModal();
const selectConnection = (uid: string) => {
selectWorkspace(uid);
closeModal();
};
const getStatusBadge = (uid: string) => {
if (getWorkspace(uid)) {
const status = getWorkspace(uid).connectionStatus;
switch (status) {
case 'connected':
return 'badge badge-connected';
case 'connecting':
return 'badge badge-connecting';
case 'failed':
return 'badge badge-failed';
default:
return '';
}
const onKey = (e:KeyboardEvent) => {
if (e.key === 'Escape') {
e.stopPropagation();
if ((e.target as HTMLInputElement).tagName === 'INPUT' && searchTerm.value.length > 0)
searchTerm.value = '';
else
closeModal();
}
};
Expand Down Expand Up @@ -146,11 +192,6 @@ window.addEventListener('keydown', onKey, { capture: true });
margin-left: 0.2rem;
}
.result-tabs {
background: transparent !important;
margin: 0;
}
.modal {
align-items: flex-start;
Expand All @@ -164,8 +205,14 @@ window.addEventListener('keydown', onKey, { capture: true });
}
}
.processes-toolbar {
display: flex;
justify-content: space-between;
.connections-search{
display: flex;
justify-content: space-around;
}
.connection-block{
cursor: pointer;
transition: all .2s;
border-radius: $border-radius;
}
</style>
13 changes: 13 additions & 0 deletions src/renderer/components/TheSettingBar.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -214,6 +214,19 @@ watch(unpinnedConnectionsArr, (newVal, oldVal) => {
}, 50);
}
});
watch(selectedWorkspace, (newVal, oldVal) => {
if (newVal !== oldVal) {
setTimeout(() => {
const element = document.querySelector<HTMLElement>('.settingbar-element.selected');
if (element) {
element.setAttribute('tabindex', '-1');
element.focus();
element.removeAttribute('tabindex');
}
}, 150);
}
});
</script>

<style lang="scss">
Expand Down
4 changes: 2 additions & 2 deletions src/renderer/components/WorkspaceAddConnectionPanel.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -411,12 +411,12 @@ const workspacesStore = useWorkspacesStore();
const { connectWorkspace, selectWorkspace } = workspacesStore;
const clients = ref([
const clients = [
{ name: 'MySQL', slug: 'mysql' },
{ name: 'MariaDB', slug: 'maria' },
{ name: 'PostgreSQL', slug: 'pg' },
{ name: 'SQLite', slug: 'sqlite' }
]);
];
const connection = ref({
name: '',
Expand Down
12 changes: 10 additions & 2 deletions src/renderer/components/WorkspaceEditConnectionPanel.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -253,6 +253,14 @@
>
</div>
</div>
<div class="form-group columns">
<div class="column col-4 col-sm-12" />
<div class="column col-8 col-sm-12">
<label class="form-checkbox form-inline">
<input v-model="localConnection.untrustedConnection" type="checkbox"><i class="form-icon" /> {{ t('message.untrustedConnection') }}
</label>
</div>
</div>
</fieldset>
</form>
</div>
Expand Down Expand Up @@ -416,12 +424,12 @@ const { editConnection } = useConnectionsStore();
const { addNotification } = useNotificationsStore();
const { connectWorkspace } = useWorkspacesStore();
const clients = ref([
const clients = [
{ name: 'MySQL', slug: 'mysql' },
{ name: 'MariaDB', slug: 'maria' },
{ name: 'PostgreSQL', slug: 'pg' },
{ name: 'SQLite', slug: 'sqlite' }
]);
];
const firstInput: Ref<HTMLInputElement> = ref(null);
const localConnection: Ref<ConnectionParams & { pgConnString: string }> = ref(null);
Expand Down
3 changes: 2 additions & 1 deletion src/renderer/i18n/en-US.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -294,7 +294,8 @@ module.exports = {
missingOrIncompleteTranslation: 'Missing or incomplete translation?',
findOutHowToContribute: 'Find out how to contribute',
disableFKChecks: 'Disable foreigh key checks',
allConnections: 'All connections'
allConnections: 'All connections',
searchForConnections: 'Search for connections'
},
faker: {
address: 'Address',
Expand Down
6 changes: 6 additions & 0 deletions src/renderer/scss/themes/dark-theme.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -256,6 +256,12 @@
}
}

.connection-block{
&:hover {
background: $bg-color-light-dark;
}
}

.bg-checkered {
background-image:
linear-gradient(to right, rgba(192, 192, 192, 0.75), rgba(192, 192, 192, 0.75)),
Expand Down
6 changes: 6 additions & 0 deletions src/renderer/scss/themes/light-theme.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -274,6 +274,12 @@
background: rgba($bg-color-light-gray, 100%);
}
}

.connection-block{
&:hover {
background: $bg-color-light-gray;
}
}

.context {
color: $body-font-color-dark;
Expand Down

0 comments on commit ec5ab73

Please sign in to comment.