mirror of
https://github.com/lana-k/sqliteviz.git
synced 2025-12-06 10:08:52 +08:00
add table to my queries
This commit is contained in:
lana-k
3
src/assets/images/copy.svg
Normal file
3
src/assets/images/copy.svg
Normal file
@@ -0,0 +1,3 @@
|
||||
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M14.25 15.75H6V5.25H14.25V15.75ZM14.25 3.75H6C5.60218 3.75 5.22064 3.90804 4.93934 4.18934C4.65804 4.47064 4.5 4.85218 4.5 5.25V15.75C4.5 16.1478 4.65804 16.5294 4.93934 16.8107C5.22064 17.092 5.60218 17.25 6 17.25H14.25C14.6478 17.25 15.0294 17.092 15.3107 16.8107C15.592 16.5294 15.75 16.1478 15.75 15.75V5.25C15.75 4.85218 15.592 4.47064 15.3107 4.18934C15.0294 3.90804 14.6478 3.75 14.25 3.75ZM12 0.75H3C2.60218 0.75 2.22064 0.908035 1.93934 1.18934C1.65804 1.47064 1.5 1.85218 1.5 2.25V12.75H3V2.25H12V0.75Z" fill="#A2B1C6"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 643 B |
3
src/assets/images/delete.svg
Normal file
3
src/assets/images/delete.svg
Normal file
@@ -0,0 +1,3 @@
|
||||
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M6.75 2.25V3H3V4.5H3.75V14.25C3.75 14.6478 3.90804 15.0294 4.18934 15.3107C4.47064 15.592 4.85218 15.75 5.25 15.75H12.75C13.1478 15.75 13.5294 15.592 13.8107 15.3107C14.092 15.0294 14.25 14.6478 14.25 14.25V4.5H15V3H11.25V2.25H6.75ZM5.25 4.5H12.75V14.25H5.25V4.5ZM6.75 6V12.75H8.25V6H6.75ZM9.75 6V12.75H11.25V6H9.75Z" fill="#A2B1C6"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 447 B |
3
src/assets/images/file-export.svg
Normal file
3
src/assets/images/file-export.svg
Normal file
@@ -0,0 +1,3 @@
|
||||
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M10.5 1.5H4.5C3.675 1.5 3 2.175 3 3V15C3 15.825 3.675 16.5 4.5 16.5H13.5C14.325 16.5 15 15.825 15 15V6L10.5 1.5ZM13.5 15H4.5V3H9.75V6.75H13.5V15ZM12 8.25V13.575L10.425 12L8.325 14.1L6.225 12L8.325 9.9L6.675 8.25H12Z" fill="#A2B1C6"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 346 B |
3
src/assets/images/rename.svg
Normal file
3
src/assets/images/rename.svg
Normal file
@@ -0,0 +1,3 @@
|
||||
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M10.545 6.75L11.25 7.455L4.44 14.25H3.75V13.56L10.545 6.75ZM13.245 2.25C13.0575 2.25 12.8625 2.325 12.72 2.4675L11.3475 3.84L14.16 6.6525L15.5325 5.28C15.825 4.9875 15.825 4.5 15.5325 4.2225L13.7775 2.4675C13.6275 2.3175 13.44 2.25 13.245 2.25ZM10.545 4.6425L2.25 12.9375V15.75H5.0625L13.3575 7.455L10.545 4.6425Z" fill="#A2B1C6"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 444 B |
77
src/assets/styles/tables.css
Normal file
77
src/assets/styles/tables.css
Normal file
@@ -0,0 +1,77 @@
|
||||
.rounded-bg {
|
||||
padding: 40px 5px 5px;
|
||||
background-color: white;
|
||||
border-radius: 5px;
|
||||
position: relative;
|
||||
border: 1px solid var(--color-border-light);
|
||||
}
|
||||
.header-container {
|
||||
overflow: hidden;
|
||||
position: absolute;
|
||||
top: -1px;;
|
||||
left: -1px;
|
||||
width: calc(100% + 2px);
|
||||
padding-left: 7px;
|
||||
box-sizing: border-box;
|
||||
background-color: var(--color-bg-dark);
|
||||
border-radius: 5px 5px 0 0;
|
||||
}
|
||||
|
||||
.header-container > div {
|
||||
display: flex;
|
||||
width: fit-content;
|
||||
padding-right: 10px;
|
||||
}
|
||||
.table-container {
|
||||
width: 100%;
|
||||
overflow: auto;
|
||||
}
|
||||
table {
|
||||
min-width: 100%;
|
||||
margin-top: -40px;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
thead th, .fixed-header {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
box-sizing: border-box;
|
||||
background-color: var(--color-bg-dark);
|
||||
color: var(--color-text-light);
|
||||
border-right: 1px solid var(--color-border-light);
|
||||
}
|
||||
tbody td {
|
||||
font-size: 13px;
|
||||
background-color:white;
|
||||
color: var(--color-text-base);
|
||||
box-sizing: border-box;
|
||||
border-bottom: 1px solid var(--color-border-light);
|
||||
border-right: 1px solid var(--color-border-light);
|
||||
}
|
||||
td, th, .fixed-header {
|
||||
padding: 12px 24px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
tbody tr td:last-child,
|
||||
thead tr th:last-child,
|
||||
.header-container div .fixed-header:last-child {
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
td > div.cell-data {
|
||||
width: -webkit-max-content;
|
||||
width: -moz-max-content;
|
||||
width: max-content;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.table-footer {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 6px 12px;
|
||||
}
|
||||
.table-footer-count {
|
||||
font-size: 11px;
|
||||
color: var(--color-text-base);
|
||||
}
|
||||
@@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<div>
|
||||
<div id="rounded-bg">
|
||||
<div id="header-container" ref="header-container">
|
||||
<div class="rounded-bg">
|
||||
<div class="header-container" ref="header-container">
|
||||
<div>
|
||||
<div
|
||||
v-for="(th, index) in header"
|
||||
@@ -14,7 +14,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
id="table-container"
|
||||
class="table-container"
|
||||
ref="table-container"
|
||||
@scroll="onScrollTable"
|
||||
:style="{height: `${height}px`}"
|
||||
@@ -107,80 +107,4 @@ export default {
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
#rounded-bg {
|
||||
padding: 40px 5px 5px;
|
||||
background-color: white;
|
||||
border-radius: 5px;
|
||||
position: relative;
|
||||
}
|
||||
#header-container {
|
||||
overflow: hidden;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
padding-left: 6px;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
background-color: var(--color-bg-dark);
|
||||
border-radius: 5px 5px 0 0;
|
||||
}
|
||||
|
||||
#header-container div {
|
||||
display: flex;
|
||||
width: fit-content;
|
||||
padding-right: 10px;
|
||||
}
|
||||
#table-container {
|
||||
width: 100%;
|
||||
overflow: auto;
|
||||
}
|
||||
table {
|
||||
min-width: 100%;
|
||||
margin-top: -40px;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
thead th, .fixed-header {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
box-sizing: border-box;
|
||||
background-color: var(--color-bg-dark);
|
||||
color: var(--color-text-light);
|
||||
border-right: 1px solid var(--color-border-light);
|
||||
}
|
||||
tbody td {
|
||||
font-size: 13px;
|
||||
background-color:white;
|
||||
color: var(--color-text-base);
|
||||
box-sizing: border-box;
|
||||
border-bottom: 1px solid var(--color-border-light);
|
||||
border-right: 1px solid var(--color-border-light);
|
||||
}
|
||||
td, th, .fixed-header {
|
||||
padding: 12px 24px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
tbody tr td:last-child,
|
||||
thead tr th:last-child,
|
||||
#header-container div .fixed-header:last-child {
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
td > div.cell-data {
|
||||
width: -webkit-max-content;
|
||||
width: -moz-max-content;
|
||||
width: max-content;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.table-footer {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 6px 12px;
|
||||
}
|
||||
.table-footer-count {
|
||||
font-size: 11px;
|
||||
color: var(--color-text-base);
|
||||
}
|
||||
</style>
|
||||
|
||||
21
src/components/svg/copy.vue
Normal file
21
src/components/svg/copy.vue
Normal file
@@ -0,0 +1,21 @@
|
||||
<template>
|
||||
<svg class="icon" width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M14.25 15.75H6V5.25H14.25V15.75ZM14.25 3.75H6C5.60218 3.75 5.22064 3.90804 4.93934 4.18934C4.65804 4.47064 4.5 4.85218 4.5 5.25V15.75C4.5 16.1478 4.65804 16.5294 4.93934 16.8107C5.22064 17.092 5.60218 17.25 6 17.25H14.25C14.6478 17.25 15.0294 17.092 15.3107 16.8107C15.592 16.5294 15.75 16.1478 15.75 15.75V5.25C15.75 4.85218 15.592 4.47064 15.3107 4.18934C15.0294 3.90804 14.6478 3.75 14.25 3.75ZM12 0.75H3C2.60218 0.75 2.22064 0.908035 1.93934 1.18934C1.65804 1.47064 1.5 1.85218 1.5 2.25V12.75H3V2.25H12V0.75Z" fill="#A2B1C6"/>
|
||||
</svg>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'CopyIcon'
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.icon {
|
||||
vertical-align: middle;
|
||||
margin: 0 12px;
|
||||
}
|
||||
.icon:hover path {
|
||||
fill: var(--color-accent);
|
||||
}
|
||||
</style>
|
||||
22
src/components/svg/delete.vue
Normal file
22
src/components/svg/delete.vue
Normal file
@@ -0,0 +1,22 @@
|
||||
<template>
|
||||
<svg class="icon" width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M6.75 2.25V3H3V4.5H3.75V14.25C3.75 14.6478 3.90804 15.0294 4.18934 15.3107C4.47064 15.592 4.85218 15.75 5.25 15.75H12.75C13.1478 15.75 13.5294 15.592 13.8107 15.3107C14.092 15.0294 14.25 14.6478 14.25 14.25V4.5H15V3H11.25V2.25H6.75ZM5.25 4.5H12.75V14.25H5.25V4.5ZM6.75 6V12.75H8.25V6H6.75ZM9.75 6V12.75H11.25V6H9.75Z" fill="#A2B1C6"/>
|
||||
</svg>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'DeleteIcon'
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.icon {
|
||||
vertical-align: middle;
|
||||
margin: 0 0 0 12px;
|
||||
}
|
||||
|
||||
.icon:hover path {
|
||||
fill: var(--color-accent);
|
||||
}
|
||||
</style>
|
||||
22
src/components/svg/export.vue
Normal file
22
src/components/svg/export.vue
Normal file
@@ -0,0 +1,22 @@
|
||||
<template>
|
||||
<svg class="icon" width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M10.5 1.5H4.5C3.675 1.5 3 2.175 3 3V15C3 15.825 3.675 16.5 4.5 16.5H13.5C14.325 16.5 15 15.825 15 15V6L10.5 1.5ZM13.5 15H4.5V3H9.75V6.75H13.5V15ZM12 8.25V13.575L10.425 12L8.325 14.1L6.225 12L8.325 9.9L6.675 8.25H12Z" fill="#A2B1C6"/>
|
||||
</svg>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'ExportIcon'
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.icon {
|
||||
vertical-align: middle;
|
||||
margin: 0 12px;
|
||||
}
|
||||
|
||||
.icon:hover path {
|
||||
fill: var(--color-accent);
|
||||
}
|
||||
</style>
|
||||
22
src/components/svg/rename.vue
Normal file
22
src/components/svg/rename.vue
Normal file
@@ -0,0 +1,22 @@
|
||||
<template>
|
||||
<svg class="icon" width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M10.545 6.75L11.25 7.455L4.44 14.25H3.75V13.56L10.545 6.75ZM13.245 2.25C13.0575 2.25 12.8625 2.325 12.72 2.4675L11.3475 3.84L14.16 6.6525L15.5325 5.28C15.825 4.9875 15.825 4.5 15.5325 4.2225L13.7775 2.4675C13.6275 2.3175 13.44 2.25 13.245 2.25ZM10.545 4.6425L2.25 12.9375V15.75H5.0625L13.3575 7.455L10.545 4.6425Z" fill="#A2B1C6"/>
|
||||
</svg>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'RenameIcon'
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.icon {
|
||||
vertical-align: middle;
|
||||
margin: 0 12px 0 6px;
|
||||
}
|
||||
|
||||
.icon:hover path {
|
||||
fill: var(--color-accent);
|
||||
}
|
||||
</style>
|
||||
@@ -8,6 +8,7 @@ import PlotlyEditor from 'react-chart-editor'
|
||||
import '@/assets/styles/variables.css'
|
||||
import '@/assets/styles/buttons.css'
|
||||
import '@/assets/styles/textFields.css'
|
||||
import '@/assets/styles/tables.css'
|
||||
|
||||
Vue.use(VueReact)
|
||||
Vue.react('PlotlyEditor', PlotlyEditor)
|
||||
|
||||
@@ -1,24 +1,145 @@
|
||||
<template>
|
||||
<div>
|
||||
My queries
|
||||
<div id="my-queries-content">
|
||||
<div class="rounded-bg">
|
||||
<div class="header-container">
|
||||
<div>
|
||||
<div class="fixed-header" ref="name-th">
|
||||
Name
|
||||
</div>
|
||||
<div class="fixed-header">
|
||||
Created at
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="table-container"
|
||||
ref="table-container"
|
||||
>
|
||||
<table ref="table">
|
||||
<tbody>
|
||||
<tr v-for="(query, index) in queries" :key="query.id" @click="openQuery(index)">
|
||||
<td ref="name-td">
|
||||
{{ query.name }}
|
||||
</td>
|
||||
<td>
|
||||
<div class="second-column">
|
||||
<div class="date-container">{{ query.createdAt }}</div>
|
||||
<div class="icons-container">
|
||||
<rename-icon />
|
||||
<copy-icon />
|
||||
<export-icon />
|
||||
<delete-icon />
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import RenameIcon from '@/components/svg/rename.vue'
|
||||
import CopyIcon from '@/components/svg/copy.vue'
|
||||
import ExportIcon from '@/components/svg/export.vue'
|
||||
import DeleteIcon from '@/components/svg/delete.vue'
|
||||
|
||||
export default {
|
||||
name: 'MyQueries',
|
||||
components: {
|
||||
RenameIcon,
|
||||
CopyIcon,
|
||||
ExportIcon,
|
||||
DeleteIcon
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
queries: []
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
},
|
||||
created () {
|
||||
// Get queries
|
||||
this.queries = JSON.parse(localStorage.getItem('myQueries'))
|
||||
},
|
||||
mounted () {
|
||||
new ResizeObserver(this.calcNameWidth).observe(this.$refs.table)
|
||||
this.calcNameWidth()
|
||||
},
|
||||
methods: {
|
||||
calcNameWidth () {
|
||||
this.$refs['name-th'].style = `width: ${this.$refs['name-td'][0].offsetWidth}px`
|
||||
},
|
||||
openQuery (index) {
|
||||
const tab = this.queries[index]
|
||||
tab.isUnsaved = false
|
||||
this.$store.commit('addTab', tab)
|
||||
this.$store.commit('setCurrentTabId', tab.id)
|
||||
this.$router.push('/editor')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
#my-queries-content {
|
||||
padding: 52px;
|
||||
}
|
||||
.rounded-bg {
|
||||
margin: 0 auto;
|
||||
max-width: 1500px;
|
||||
width: 100%;
|
||||
}
|
||||
table {
|
||||
margin-top: 0;
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
}
|
||||
tbody tr td {
|
||||
overflow: hidden;
|
||||
min-width: 0;
|
||||
text-overflow: ellipsis;
|
||||
padding: 0 24px;
|
||||
line-height: 40px;
|
||||
}
|
||||
|
||||
tbody tr td:first-child {
|
||||
width: 70%;
|
||||
max-width: 0;
|
||||
}
|
||||
tbody tr td:last-child {
|
||||
width: 30%;
|
||||
max-width: 0;
|
||||
}
|
||||
|
||||
tbody tr:hover td {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
tbody tr:hover td {
|
||||
color: var(--color-text-active);
|
||||
}
|
||||
|
||||
.second-column {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.icons-container {
|
||||
display: none;
|
||||
}
|
||||
.date-container {
|
||||
flex-shrink: 1;
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
tbody tr:hover .icons-container {
|
||||
display: block;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user