zynfly/sqliteviz
1
0
Fork 0
mirror of https://github.com/lana-k/sqliteviz.git synced 2025-12-06 18:18:53 +08:00
Code Issues Projects Releases Wiki Activity

add NO found msg #83; fix checkbox behaviour #84

Browse Source
This commit is contained in:
lana-k
2021-08-22 15:00:34 +02:00
parent e6bef139f1
commit fe11d446f3
2 changed files with 105 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

81
src/views/Main/Inquiries/index.vue
View File

@@ -1,12 +1,12 @@
<template>
<div>
<div id="start-guide" v-if="showedInquiries.length === 0">
<div id="start-guide" v-if="allInquiries.length === 0">
You don't have saved inquiries so far.
<span class="link" @click="$root.$emit('createNewInquiry')">Create</span>
the one from scratch or
<span @click="importInquiries" class="link">import</span> from a file.
</div>
<div id="my-inquiries-content" ref="my-inquiries-content" v-show="showedInquiries.length > 0">
<div id="my-inquiries-content" ref="my-inquiries-content" v-show="allInquiries.length > 0">
<div id="my-inquiries-toolbar">
<div id="toolbar-buttons">
<button id="toolbar-btns-import" class="toolbar" @click="importInquiries">
@@ -33,7 +33,13 @@
<text-field placeholder="Search inquiry by name" width="300px" v-model="filter"/>
</div>
</div>
<div class="rounded-bg">
<div v-show="showedInquiries.length === 0" id="inquiries-not-found">
No inquiries found
</div>
<div v-show="showedInquiries.length > 0" class="rounded-bg">
<div class="header-container">
<div>
<div class="fixed-header" ref="name-th">
@@ -200,6 +206,11 @@ export default {
}
return showedInquiries
},
showedInquiriesIds () {
return this.showedInquiries.map(inquiry => inquiry.id)
},
allInquiries () {
return this.predefinedInquiries.concat(this.inquiries)
},
@@ -224,6 +235,22 @@ export default {
return `Are you sure you want to delete ${deleteItem}?`
}
},
watch: {
showedInquiries () {
this.selectedInquiriesIds = new Set(this.showedInquiries
.filter(inquiry => this.selectedInquiriesIds.has(inquiry.id))
.map(inquiry => inquiry.id)
)
this.selectedInquiriesCount = this.selectedInquiriesIds.size
this.selectedNotPredefinedCount = ([...this.selectedInquiriesIds]
.filter(id => !this.predefinedInquiriesIds.has(id))).length
if (this.selectedInquiriesIds.size < this.showedInquiries.length) {
this.$refs.mainCheckBox.checked = false
this.selectAll = false
}
}
},
created () {
storedInquiries.readPredefinedInquiries()
.then(inquiries => {
@@ -264,7 +291,7 @@ export default {
},
methods: {
calcNameWidth () {
const nameWidth = this.$refs['name-td']
const nameWidth = this.$refs['name-td'] && this.$refs['name-td'][0]
? this.$refs['name-td'][0].getBoundingClientRect().width
: 0
this.$refs['name-th'].style = `width: ${nameWidth}px`
@@ -312,10 +339,6 @@ export default {
},
duplicateInquiry (index) {
const newInquiry = storedInquiries.duplicateInquiry(this.showedInquiries[index])
if (this.selectAll) {
this.selectedInquiriesIds.add(newInquiry.id)
this.selectedInquiriesCount = this.selectedInquiriesIds.size
}
this.inquiries.push(newInquiry)
storedInquiries.updateStorage(this.inquiries)
},
@@ -337,14 +360,14 @@ export default {
this.$store.commit('deleteTab', tabIndex)
}
// Clear checkboxes
// Clear checkbox
if (this.selectedInquiriesIds.has(this.processedInquiryId)) {
this.selectedInquiriesIds.delete(this.processedInquiryId)
}
} else {
this.inquiries = this.selectAll
? []
: this.inquiries.filter(inquiry => !this.selectedInquiriesIds.has(inquiry.id))
this.inquiries = this.inquiries.filter(
inquiry => !this.selectedInquiriesIds.has(inquiry.id)
)
// Close deleted inquiries if it was opened
const tabs = this.$store.state.tabs
@@ -368,37 +391,36 @@ export default {
fu.exportToFile(jsonStr, fileName)
},
exportSelectedInquiries () {
const inquiryList = this.selectAll
? this.allInquiries
: this.allInquiries.filter(inquiry => this.selectedInquiriesIds.has(inquiry.id))
const inquiryList = this.allInquiries.filter(
inquiry => this.selectedInquiriesIds.has(inquiry.id)
)
this.exportToFile(inquiryList, 'My sqliteviz inquiries.json')
},
importInquiries () {
storedInquiries.importInquiries()
.then(importedInquiries => {
if (this.selectAll) {
importedInquiries.forEach(inquiry => {
this.selectedInquiriesIds.add(inquiry.id)
})
this.selectedInquiriesCount = this.selectedInquiriesIds.size
}
this.inquiries = this.inquiries.concat(importedInquiries)
storedInquiries.updateStorage(this.inquiries)
})
},
toggleSelectAll (checked) {
this.selectAll = checked
this.$refs.rowCheckBox.forEach(item => { item.checked = checked })
this.selectedInquiriesIds = checked
? new Set(this.allInquiries.map(inquiry => inquiry.id))
? new Set(this.showedInquiries.map(inquiry => inquiry.id))
: new Set()
this.selectedInquiriesCount = this.selectedInquiriesIds.size
this.selectedNotPredefinedCount = checked ? this.inquiries.length : 0
this.selectedNotPredefinedCount = checked
? ([...this.selectedInquiriesIds].filter(id => !this.predefinedInquiriesIds.has(id)))
.length
: 0
},
toggleRow (checked, id) {
const isPredefined = this.predefinedInquiriesIds.has(id)
if (checked) {
@@ -407,7 +429,7 @@ export default {
this.selectedNotPredefinedCount += 1
}
} else {
if (this.selectedInquiriesIds.size === this.allInquiries.length) {
if (this.selectedInquiriesIds.size === this.showedInquiries.length) {
this.$refs.mainCheckBox.checked = false
this.selectAll = false
}
@@ -433,6 +455,15 @@ export default {
text-align: center;
}
#inquiries-not-found {
padding: 35px 5px;
border-radius: 5px;
border: 1px solid var(--color-border-light);
color: var(--color-text-base);
font-size: 14px;
text-align: center;
}
#my-inquiries-content {
padding: 52px;
height: 100%;

54
tests/views/Main/Inquiries/Inquiries.spec.js
View File

@@ -27,7 +27,7 @@ describe('Inquiries.vue', () => {
expect(wrapper.find('#start-guide').exists()).to.equal(true)
})
it('Renders the list on saved or predefined inquiries', async () => {
it('Renders the list of saved and predefined inquiries', async () => {
sinon.stub(storedInquiries, 'readPredefinedInquiries').resolves([
{
id: 0,
@@ -125,6 +125,49 @@ describe('Inquiries.vue', () => {
expect(rows.at(0).findAll('td').at(1).text()).to.contains('3 November 2020 20:57')
})
it('Shows No found message when filter returns nothing', async () => {
sinon.stub(storedInquiries, 'readPredefinedInquiries').resolves([
{
id: 0,
name: 'hello_world',
query: '',
viewType: 'chart',
viewOptions: [],
createdAt: '2020-03-08T19:57:56.299Z'
}
])
sinon.stub(storedInquiries, 'getStoredInquiries').returns([
{
id: 1,
name: 'foo',
query: '',
viewType: 'chart',
viewOptions: [],
createdAt: '2020-11-03T19:57:56.299Z'
},
{
id: 2,
name: 'bar',
query: '',
viewType: 'chart',
viewOptions: [],
createdAt: '2020-12-04T18:53:56.299Z'
}
])
const state = {
predefinedInquiries: []
}
const store = new Vuex.Store({ state, mutations })
const wrapper = mount(Inquiries, { store })
await wrapper.find('#toolbar-search input').setValue('baz')
await wrapper.vm.$nextTick()
expect(wrapper.find('#inquiries-not-found').text()).to.equal('No inquiries found')
expect(wrapper.find('#start-guide').exists()).to.equal(false)
expect(wrapper.find('tbody').isVisible()).to.equal(false)
})
it('Predefined inquiry has a badge', async () => {
sinon.stub(storedInquiries, 'readPredefinedInquiries').resolves([
{
@@ -231,7 +274,7 @@ describe('Inquiries.vue', () => {
).to.equals(true)
})
it('Makes the copy of the inquiry selected if all inquiries were selected before duplication',
it('The copy of the inquiry is not selected if all inquiries were selected before duplication',
async () => {
sinon.stub(storedInquiries, 'readPredefinedInquiries').resolves([])
const inquiryInStorage = {
@@ -267,7 +310,7 @@ describe('Inquiries.vue', () => {
const checkboxes = wrapper.findAllComponents({ ref: 'rowCheckBox' })
expect(checkboxes.at(0).vm.checked).to.equals(true)
expect(checkboxes.at(1).vm.checked).to.equals(true)
expect(checkboxes.at(1).vm.checked).to.equals(false)
})
it('Opens an inquiry', async () => {
@@ -478,7 +521,7 @@ describe('Inquiries.vue', () => {
)).to.equals(true)
})
it('Imported inquiries are selected if master check box is checked', async () => {
it('Imported inquiries are not selected if master check box was checked', async () => {
sinon.stub(storedInquiries, 'readPredefinedInquiries').resolves([])
const inquiryInStorage = {
id: 1,
@@ -516,8 +559,9 @@ describe('Inquiries.vue', () => {
await wrapper.find('#toolbar-btns-import').trigger('click')
const checkboxes = wrapper.findAllComponents({ ref: 'rowCheckBox' })
expect(wrapper.findComponent({ ref: 'mainCheckBox' }).vm.checked).to.equals(false)
expect(checkboxes.at(0).vm.checked).to.equals(true)
expect(checkboxes.at(1).vm.checked).to.equals(true)
expect(checkboxes.at(1).vm.checked).to.equals(false)
})
it('Deletion is not available for predefined inquiries', async () => {