|
|
@ -61,7 +61,9 @@ |
|
|
|
> |
|
|
|
> |
|
|
|
{{ viewIcons[view.type].icon }} |
|
|
|
{{ viewIcons[view.type].icon }} |
|
|
|
</v-icon> |
|
|
|
</v-icon> |
|
|
|
<v-icon v-else color="primary" small> mdi-table </v-icon> |
|
|
|
<v-icon v-else color="primary" small> |
|
|
|
|
|
|
|
mdi-table |
|
|
|
|
|
|
|
</v-icon> |
|
|
|
</v-list-item-icon> |
|
|
|
</v-list-item-icon> |
|
|
|
<v-list-item-title> |
|
|
|
<v-list-item-title> |
|
|
|
<v-tooltip bottom> |
|
|
|
<v-tooltip bottom> |
|
|
@ -77,7 +79,7 @@ |
|
|
|
@click.stop |
|
|
|
@click.stop |
|
|
|
@keydown.enter.stop="updateViewName(view, i)" |
|
|
|
@keydown.enter.stop="updateViewName(view, i)" |
|
|
|
@blur="updateViewName(view, i)" |
|
|
|
@blur="updateViewName(view, i)" |
|
|
|
/> |
|
|
|
> |
|
|
|
<template v-else> |
|
|
|
<template v-else> |
|
|
|
<span v-on="on">{{ |
|
|
|
<span v-on="on">{{ |
|
|
|
view.alias || view.title |
|
|
|
view.alias || view.title |
|
|
@ -183,7 +185,9 @@ |
|
|
|
@click="openCreateViewDlg(viewTypes.GRID)" |
|
|
|
@click="openCreateViewDlg(viewTypes.GRID)" |
|
|
|
> |
|
|
|
> |
|
|
|
<v-list-item-icon class="mr-n1"> |
|
|
|
<v-list-item-icon class="mr-n1"> |
|
|
|
<v-icon color="blue" x-small> mdi-grid-large </v-icon> |
|
|
|
<v-icon color="blue" x-small> |
|
|
|
|
|
|
|
mdi-grid-large |
|
|
|
|
|
|
|
</v-icon> |
|
|
|
</v-list-item-icon> |
|
|
|
</v-list-item-icon> |
|
|
|
<v-list-item-title> |
|
|
|
<v-list-item-title> |
|
|
|
<span class="font-weight-regular"> |
|
|
|
<span class="font-weight-regular"> |
|
|
@ -192,7 +196,9 @@ |
|
|
|
</span> |
|
|
|
</span> |
|
|
|
</v-list-item-title> |
|
|
|
</v-list-item-title> |
|
|
|
<v-spacer /> |
|
|
|
<v-spacer /> |
|
|
|
<v-icon class="mr-1" small> mdi-plus </v-icon> |
|
|
|
<v-icon class="mr-1" small> |
|
|
|
|
|
|
|
mdi-plus |
|
|
|
|
|
|
|
</v-icon> |
|
|
|
</v-list-item> |
|
|
|
</v-list-item> |
|
|
|
</template> |
|
|
|
</template> |
|
|
|
<!-- Add Grid View --> |
|
|
|
<!-- Add Grid View --> |
|
|
@ -207,7 +213,9 @@ |
|
|
|
@click="openCreateViewDlg(viewTypes.GALLERY)" |
|
|
|
@click="openCreateViewDlg(viewTypes.GALLERY)" |
|
|
|
> |
|
|
|
> |
|
|
|
<v-list-item-icon class="mr-n1"> |
|
|
|
<v-list-item-icon class="mr-n1"> |
|
|
|
<v-icon color="orange" x-small> mdi-camera-image </v-icon> |
|
|
|
<v-icon color="orange" x-small> |
|
|
|
|
|
|
|
mdi-camera-image |
|
|
|
|
|
|
|
</v-icon> |
|
|
|
</v-list-item-icon> |
|
|
|
</v-list-item-icon> |
|
|
|
<v-list-item-title> |
|
|
|
<v-list-item-title> |
|
|
|
<span class="font-weight-regular"> |
|
|
|
<span class="font-weight-regular"> |
|
|
@ -217,7 +225,9 @@ |
|
|
|
</v-list-item-title> |
|
|
|
</v-list-item-title> |
|
|
|
|
|
|
|
|
|
|
|
<v-spacer /> |
|
|
|
<v-spacer /> |
|
|
|
<v-icon class="mr-1" small> mdi-plus </v-icon> |
|
|
|
<v-icon class="mr-1" small> |
|
|
|
|
|
|
|
mdi-plus |
|
|
|
|
|
|
|
</v-icon> |
|
|
|
</v-list-item> |
|
|
|
</v-list-item> |
|
|
|
</template> |
|
|
|
</template> |
|
|
|
<!-- Add Gallery View --> |
|
|
|
<!-- Add Gallery View --> |
|
|
@ -251,7 +261,9 @@ |
|
|
|
</v-list-item-title> |
|
|
|
</v-list-item-title> |
|
|
|
|
|
|
|
|
|
|
|
<v-spacer /> |
|
|
|
<v-spacer /> |
|
|
|
<v-icon class="mr-1" small> mdi-plus </v-icon> |
|
|
|
<v-icon class="mr-1" small> |
|
|
|
|
|
|
|
mdi-plus |
|
|
|
|
|
|
|
</v-icon> |
|
|
|
</v-list-item> |
|
|
|
</v-list-item> |
|
|
|
</template> |
|
|
|
</template> |
|
|
|
<!-- Add Form View --> |
|
|
|
<!-- Add Form View --> |
|
|
@ -261,6 +273,10 @@ |
|
|
|
</template> |
|
|
|
</template> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div> |
|
|
|
|
|
|
|
<code-snippet :meta="meta" :view="selectedView" /> |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
|
|
<div |
|
|
|
<div |
|
|
|
v-if="time - $store.state.windows.miniSponsorCard > 15 * 60 * 1000" |
|
|
|
v-if="time - $store.state.windows.miniSponsorCard > 15 * 60 * 1000" |
|
|
|
class="pa-2 sponsor-wrapper" |
|
|
|
class="pa-2 sponsor-wrapper" |
|
|
@ -270,10 +286,10 @@ |
|
|
|
</v-icon> |
|
|
|
</v-icon> |
|
|
|
|
|
|
|
|
|
|
|
<!-- <extras />--> |
|
|
|
<!-- <extras />--> |
|
|
|
<v-divider/> |
|
|
|
<v-divider /> |
|
|
|
<extras class="pl-1"/> |
|
|
|
<extras class="pl-1" /> |
|
|
|
|
|
|
|
|
|
|
|
<!-- <sponsor-mini nav />--> |
|
|
|
<!-- <sponsor-mini nav />--> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<!--<div class="text-center"> |
|
|
|
<!--<div class="text-center"> |
|
|
|
<v-hover > |
|
|
|
<v-hover > |
|
|
@ -490,17 +506,18 @@ |
|
|
|
</template> |
|
|
|
</template> |
|
|
|
|
|
|
|
|
|
|
|
<script> |
|
|
|
<script> |
|
|
|
import draggable from "vuedraggable"; |
|
|
|
import draggable from 'vuedraggable' |
|
|
|
import { ViewTypes } from "nocodb-sdk"; |
|
|
|
import { ViewTypes } from 'nocodb-sdk' |
|
|
|
import CreateViewDialog from "@/components/project/spreadsheet/dialog/createViewDialog"; |
|
|
|
import CreateViewDialog from '@/components/project/spreadsheet/dialog/createViewDialog' |
|
|
|
import Extras from "~/components/project/spreadsheet/components/extras"; |
|
|
|
import Extras from '~/components/project/spreadsheet/components/extras' |
|
|
|
import viewIcons from "~/helpers/viewIcons"; |
|
|
|
import viewIcons from '~/helpers/viewIcons' |
|
|
|
import { copyTextToClipboard } from "~/helpers/xutils"; |
|
|
|
import { copyTextToClipboard } from '~/helpers/xutils' |
|
|
|
import SponsorMini from "~/components/sponsorMini"; |
|
|
|
import SponsorMini from '~/components/sponsorMini' |
|
|
|
|
|
|
|
import CodeSnippet from '~/components/project/spreadsheet/components/codeSnippet' |
|
|
|
|
|
|
|
|
|
|
|
export default { |
|
|
|
export default { |
|
|
|
name: "SpreadsheetNavDrawer", |
|
|
|
name: 'SpreadsheetNavDrawer', |
|
|
|
components: { SponsorMini, Extras, CreateViewDialog, draggable }, |
|
|
|
components: { CodeSnippet, SponsorMini, Extras, CreateViewDialog, draggable }, |
|
|
|
props: { |
|
|
|
props: { |
|
|
|
extraViewParams: Object, |
|
|
|
extraViewParams: Object, |
|
|
|
showAdvanceOptions: Boolean, |
|
|
|
showAdvanceOptions: Boolean, |
|
|
@ -509,7 +526,7 @@ export default { |
|
|
|
primaryValueColumn: [Number, String], |
|
|
|
primaryValueColumn: [Number, String], |
|
|
|
toggleDrawer: { |
|
|
|
toggleDrawer: { |
|
|
|
type: Boolean, |
|
|
|
type: Boolean, |
|
|
|
default: false, |
|
|
|
default: false |
|
|
|
}, |
|
|
|
}, |
|
|
|
nodes: Object, |
|
|
|
nodes: Object, |
|
|
|
table: String, |
|
|
|
table: String, |
|
|
@ -523,7 +540,7 @@ export default { |
|
|
|
sortList: [Object, Array], |
|
|
|
sortList: [Object, Array], |
|
|
|
load: { |
|
|
|
load: { |
|
|
|
default: true, |
|
|
|
default: true, |
|
|
|
type: Boolean, |
|
|
|
type: Boolean |
|
|
|
}, |
|
|
|
}, |
|
|
|
currentApiUrl: String, |
|
|
|
currentApiUrl: String, |
|
|
|
fieldsOrder: Array, |
|
|
|
fieldsOrder: Array, |
|
|
@ -532,23 +549,23 @@ export default { |
|
|
|
// coverImageField: String, |
|
|
|
// coverImageField: String, |
|
|
|
groupingField: String, |
|
|
|
groupingField: String, |
|
|
|
// showSystemFields: Boolean, |
|
|
|
// showSystemFields: Boolean, |
|
|
|
views: Array, |
|
|
|
views: Array |
|
|
|
}, |
|
|
|
}, |
|
|
|
data: () => ({ |
|
|
|
data: () => ({ |
|
|
|
drag: false, |
|
|
|
drag: false, |
|
|
|
dragOptions: { |
|
|
|
dragOptions: { |
|
|
|
animation: 200, |
|
|
|
animation: 200, |
|
|
|
group: "description", |
|
|
|
group: 'description', |
|
|
|
disabled: false, |
|
|
|
disabled: false, |
|
|
|
ghostClass: "ghost", |
|
|
|
ghostClass: 'ghost' |
|
|
|
}, |
|
|
|
}, |
|
|
|
time: Date.now(), |
|
|
|
time: Date.now(), |
|
|
|
sponsorMiniVisible: true, |
|
|
|
sponsorMiniVisible: true, |
|
|
|
enableDummyFeat: false, |
|
|
|
enableDummyFeat: false, |
|
|
|
searchQueryVal: "", |
|
|
|
searchQueryVal: '', |
|
|
|
showShareLinkPassword: false, |
|
|
|
showShareLinkPassword: false, |
|
|
|
passwordProtect: false, |
|
|
|
passwordProtect: false, |
|
|
|
sharedViewPassword: "", |
|
|
|
sharedViewPassword: '', |
|
|
|
overAdvShieldIcon: false, |
|
|
|
overAdvShieldIcon: false, |
|
|
|
overShieldIcon: false, |
|
|
|
overShieldIcon: false, |
|
|
|
viewIcons, |
|
|
|
viewIcons, |
|
|
@ -558,120 +575,120 @@ export default { |
|
|
|
showCreateView: false, |
|
|
|
showCreateView: false, |
|
|
|
loading: false, |
|
|
|
loading: false, |
|
|
|
viewTypeAlias: { |
|
|
|
viewTypeAlias: { |
|
|
|
[ViewTypes.GRID]: "grid", |
|
|
|
[ViewTypes.GRID]: 'grid', |
|
|
|
[ViewTypes.FORM]: "form", |
|
|
|
[ViewTypes.FORM]: 'form', |
|
|
|
[ViewTypes.GALLERY]: "gallery", |
|
|
|
[ViewTypes.GALLERY]: 'gallery' |
|
|
|
}, |
|
|
|
} |
|
|
|
}), |
|
|
|
}), |
|
|
|
computed: { |
|
|
|
computed: { |
|
|
|
viewsList: { |
|
|
|
viewsList: { |
|
|
|
set(v) { |
|
|
|
set(v) { |
|
|
|
this.$emit("update:views", v); |
|
|
|
this.$emit('update:views', v) |
|
|
|
}, |
|
|
|
}, |
|
|
|
get() { |
|
|
|
get() { |
|
|
|
return this.views; |
|
|
|
return this.views |
|
|
|
}, |
|
|
|
} |
|
|
|
}, |
|
|
|
}, |
|
|
|
viewTypes() { |
|
|
|
viewTypes() { |
|
|
|
return ViewTypes; |
|
|
|
return ViewTypes |
|
|
|
}, |
|
|
|
}, |
|
|
|
newViewParams() { |
|
|
|
newViewParams() { |
|
|
|
if (!this.showFields) { |
|
|
|
if (!this.showFields) { |
|
|
|
return {}; |
|
|
|
return {} |
|
|
|
} |
|
|
|
} |
|
|
|
const showFields = { ...this.showFields }; |
|
|
|
const showFields = { ...this.showFields } |
|
|
|
Object.keys(showFields).forEach((k) => { |
|
|
|
Object.keys(showFields).forEach((k) => { |
|
|
|
showFields[k] = true; |
|
|
|
showFields[k] = true |
|
|
|
}); |
|
|
|
}) |
|
|
|
return { showFields }; |
|
|
|
return { showFields } |
|
|
|
}, |
|
|
|
}, |
|
|
|
selectedViewIdLocal: { |
|
|
|
selectedViewIdLocal: { |
|
|
|
set(val) { |
|
|
|
set(val) { |
|
|
|
const view = (this.views || []).find((v) => v.id === val); |
|
|
|
const view = (this.views || []).find(v => v.id === val) |
|
|
|
this.$router.push({ |
|
|
|
this.$router.push({ |
|
|
|
query: { |
|
|
|
query: { |
|
|
|
...this.$route.query, |
|
|
|
...this.$route.query, |
|
|
|
view: view && view.id, |
|
|
|
view: view && view.id |
|
|
|
}, |
|
|
|
} |
|
|
|
}); |
|
|
|
}) |
|
|
|
}, |
|
|
|
}, |
|
|
|
get() { |
|
|
|
get() { |
|
|
|
let id; |
|
|
|
let id |
|
|
|
if (this.views) { |
|
|
|
if (this.views) { |
|
|
|
const view = this.views.find((v) => v.id === this.$route.query.view); |
|
|
|
const view = this.views.find(v => v.id === this.$route.query.view) |
|
|
|
id = (view && view.id) || ((this.views && this.views[0]) || {}).id; |
|
|
|
id = (view && view.id) || ((this.views && this.views[0]) || {}).id |
|
|
|
} |
|
|
|
} |
|
|
|
return id; |
|
|
|
return id |
|
|
|
}, |
|
|
|
} |
|
|
|
}, |
|
|
|
}, |
|
|
|
sharedViewUrl() { |
|
|
|
sharedViewUrl() { |
|
|
|
let viewType; |
|
|
|
let viewType |
|
|
|
|
|
|
|
|
|
|
|
switch (this.shareLink.type) { |
|
|
|
switch (this.shareLink.type) { |
|
|
|
case this.viewTypes.FORM: |
|
|
|
case this.viewTypes.FORM: |
|
|
|
viewType = "form"; |
|
|
|
viewType = 'form' |
|
|
|
break; |
|
|
|
break |
|
|
|
case this.viewTypes.KANBAN: |
|
|
|
case this.viewTypes.KANBAN: |
|
|
|
viewType = "kanban"; |
|
|
|
viewType = 'kanban' |
|
|
|
break; |
|
|
|
break |
|
|
|
default: |
|
|
|
default: |
|
|
|
viewType = "view"; |
|
|
|
viewType = 'view' |
|
|
|
} |
|
|
|
} |
|
|
|
return `${this.dashboardUrl}#/nc/${viewType}/${this.shareLink.uuid}`; |
|
|
|
return `${this.dashboardUrl}#/nc/${viewType}/${this.shareLink.uuid}` |
|
|
|
}, |
|
|
|
} |
|
|
|
}, |
|
|
|
}, |
|
|
|
watch: { |
|
|
|
watch: { |
|
|
|
async load(v) { |
|
|
|
async load(v) { |
|
|
|
if (v) { |
|
|
|
if (v) { |
|
|
|
await this.loadViews(); |
|
|
|
await this.loadViews() |
|
|
|
this.onViewIdChange(this.selectedViewIdLocal); |
|
|
|
this.onViewIdChange(this.selectedViewIdLocal) |
|
|
|
} |
|
|
|
} |
|
|
|
}, |
|
|
|
}, |
|
|
|
selectedViewIdLocal(id) { |
|
|
|
selectedViewIdLocal(id) { |
|
|
|
this.onViewIdChange(id); |
|
|
|
this.onViewIdChange(id) |
|
|
|
}, |
|
|
|
} |
|
|
|
}, |
|
|
|
}, |
|
|
|
async created() { |
|
|
|
async created() { |
|
|
|
if (this.load) { |
|
|
|
if (this.load) { |
|
|
|
await this.loadViews(); |
|
|
|
await this.loadViews() |
|
|
|
} |
|
|
|
} |
|
|
|
this.onViewIdChange(this.selectedViewIdLocal); |
|
|
|
this.onViewIdChange(this.selectedViewIdLocal) |
|
|
|
}, |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
methods: { |
|
|
|
async onMove(event) { |
|
|
|
async onMove(event) { |
|
|
|
if (this.viewsList.length - 1 === event.moved.newIndex) { |
|
|
|
if (this.viewsList.length - 1 === event.moved.newIndex) { |
|
|
|
this.$set( |
|
|
|
this.$set( |
|
|
|
this.viewsList[event.moved.newIndex], |
|
|
|
this.viewsList[event.moved.newIndex], |
|
|
|
"order", |
|
|
|
'order', |
|
|
|
this.viewsList[event.moved.newIndex - 1].order + 1 |
|
|
|
this.viewsList[event.moved.newIndex - 1].order + 1 |
|
|
|
); |
|
|
|
) |
|
|
|
} else if (event.moved.newIndex === 0) { |
|
|
|
} else if (event.moved.newIndex === 0) { |
|
|
|
this.$set( |
|
|
|
this.$set( |
|
|
|
this.viewsList[event.moved.newIndex], |
|
|
|
this.viewsList[event.moved.newIndex], |
|
|
|
"order", |
|
|
|
'order', |
|
|
|
this.viewsList[1].order / 2 |
|
|
|
this.viewsList[1].order / 2 |
|
|
|
); |
|
|
|
) |
|
|
|
} else { |
|
|
|
} else { |
|
|
|
this.$set( |
|
|
|
this.$set( |
|
|
|
this.viewsList[event.moved.newIndex], |
|
|
|
this.viewsList[event.moved.newIndex], |
|
|
|
"order", |
|
|
|
'order', |
|
|
|
(this.viewsList[event.moved.newIndex - 1].order + |
|
|
|
(this.viewsList[event.moved.newIndex - 1].order + |
|
|
|
this.viewsList[event.moved.newIndex + 1].order) / |
|
|
|
this.viewsList[event.moved.newIndex + 1].order) / |
|
|
|
2 |
|
|
|
2 |
|
|
|
); |
|
|
|
) |
|
|
|
} |
|
|
|
} |
|
|
|
await this.$api.dbView.update(this.viewsList[event.moved.newIndex].id, { |
|
|
|
await this.$api.dbView.update(this.viewsList[event.moved.newIndex].id, { |
|
|
|
title: this.viewsList[event.moved.newIndex].title, |
|
|
|
title: this.viewsList[event.moved.newIndex].title, |
|
|
|
order: this.viewsList[event.moved.newIndex].order, |
|
|
|
order: this.viewsList[event.moved.newIndex].order |
|
|
|
}); |
|
|
|
}) |
|
|
|
|
|
|
|
|
|
|
|
this.$e("a:view:reorder"); |
|
|
|
this.$e('a:view:reorder') |
|
|
|
}, |
|
|
|
}, |
|
|
|
onViewIdChange(id) { |
|
|
|
onViewIdChange(id) { |
|
|
|
const selectedView = this.views && this.views.find((v) => v.id === id); |
|
|
|
const selectedView = this.views && this.views.find(v => v.id === id) |
|
|
|
// const queryParams = {} |
|
|
|
// const queryParams = {} |
|
|
|
this.$emit("update:selectedViewId", id); |
|
|
|
this.$emit('update:selectedViewId', id) |
|
|
|
this.$emit("update:selectedView", selectedView); |
|
|
|
this.$emit('update:selectedView', selectedView) |
|
|
|
// if (selectedView.type === 'table') { |
|
|
|
// if (selectedView.type === 'table') { |
|
|
|
// return; |
|
|
|
// return; |
|
|
|
// } |
|
|
|
// } |
|
|
@ -694,52 +711,52 @@ export default { |
|
|
|
// } else { |
|
|
|
// } else { |
|
|
|
// this.$emit('mapFieldsAndShowFields') |
|
|
|
// this.$emit('mapFieldsAndShowFields') |
|
|
|
// } |
|
|
|
// } |
|
|
|
this.$emit("loadTableData"); |
|
|
|
this.$emit('loadTableData') |
|
|
|
}, |
|
|
|
}, |
|
|
|
hideMiniSponsorCard() { |
|
|
|
hideMiniSponsorCard() { |
|
|
|
this.$store.commit("windows/MutMiniSponsorCard", Date.now()); |
|
|
|
this.$store.commit('windows/MutMiniSponsorCard', Date.now()) |
|
|
|
}, |
|
|
|
}, |
|
|
|
openCreateViewDlg(type) { |
|
|
|
openCreateViewDlg(type) { |
|
|
|
const mainView = this.viewsList.find( |
|
|
|
const mainView = this.viewsList.find( |
|
|
|
(v) => v.type === "table" || v.type === "view" |
|
|
|
v => v.type === 'table' || v.type === 'view' |
|
|
|
); |
|
|
|
) |
|
|
|
try { |
|
|
|
try { |
|
|
|
this.copyViewRef = this.copyViewRef || { |
|
|
|
this.copyViewRef = this.copyViewRef || { |
|
|
|
query_params: JSON.stringify({ |
|
|
|
query_params: JSON.stringify({ |
|
|
|
...this.newViewParams, |
|
|
|
...this.newViewParams, |
|
|
|
fieldsOrder: JSON.parse(mainView.query_params).fieldsOrder, |
|
|
|
fieldsOrder: JSON.parse(mainView.query_params).fieldsOrder |
|
|
|
}), |
|
|
|
}) |
|
|
|
}; |
|
|
|
} |
|
|
|
} catch {} |
|
|
|
} catch {} |
|
|
|
this.createViewType = type; |
|
|
|
this.createViewType = type |
|
|
|
this.showCreateView = true; |
|
|
|
this.showCreateView = true |
|
|
|
this.$e("c:view:create", { view: type }); |
|
|
|
this.$e('c:view:create', { view: type }) |
|
|
|
}, |
|
|
|
}, |
|
|
|
isCentrallyAligned(col) { |
|
|
|
isCentrallyAligned(col) { |
|
|
|
return ![ |
|
|
|
return ![ |
|
|
|
"SingleLineText", |
|
|
|
'SingleLineText', |
|
|
|
"LongText", |
|
|
|
'LongText', |
|
|
|
"Attachment", |
|
|
|
'Attachment', |
|
|
|
"Date", |
|
|
|
'Date', |
|
|
|
"Time", |
|
|
|
'Time', |
|
|
|
"Email", |
|
|
|
'Email', |
|
|
|
"URL", |
|
|
|
'URL', |
|
|
|
"DateTime", |
|
|
|
'DateTime', |
|
|
|
"CreateTime", |
|
|
|
'CreateTime', |
|
|
|
"LastModifiedTime", |
|
|
|
'LastModifiedTime' |
|
|
|
].includes(col.uidt); |
|
|
|
].includes(col.uidt) |
|
|
|
}, |
|
|
|
}, |
|
|
|
onPasswordProtectChange() { |
|
|
|
onPasswordProtectChange() { |
|
|
|
if (!this.passwordProtect) { |
|
|
|
if (!this.passwordProtect) { |
|
|
|
this.shareLink.password = null; |
|
|
|
this.shareLink.password = null |
|
|
|
this.saveShareLinkPassword(); |
|
|
|
this.saveShareLinkPassword() |
|
|
|
} |
|
|
|
} |
|
|
|
}, |
|
|
|
}, |
|
|
|
async saveShareLinkPassword() { |
|
|
|
async saveShareLinkPassword() { |
|
|
|
try { |
|
|
|
try { |
|
|
|
await this.$api.dbViewShare.update(this.shareLink.id, { |
|
|
|
await this.$api.dbViewShare.update(this.shareLink.id, { |
|
|
|
password: this.shareLink.password, |
|
|
|
password: this.shareLink.password |
|
|
|
}); |
|
|
|
}) |
|
|
|
|
|
|
|
|
|
|
|
// await this.$store.dispatch('sqlMgr/ActSqlOp', [ |
|
|
|
// await this.$store.dispatch('sqlMgr/ActSqlOp', [ |
|
|
|
// { dbAlias: this.nodes.dbAlias }, |
|
|
|
// { dbAlias: this.nodes.dbAlias }, |
|
|
@ -749,14 +766,14 @@ export default { |
|
|
|
// password: this.shareLink.password |
|
|
|
// password: this.shareLink.password |
|
|
|
// } |
|
|
|
// } |
|
|
|
// ]) |
|
|
|
// ]) |
|
|
|
this.$toast.success("Successfully updated").goAway(3000); |
|
|
|
this.$toast.success('Successfully updated').goAway(3000) |
|
|
|
} catch (e) { |
|
|
|
} catch (e) { |
|
|
|
this.$toast |
|
|
|
this.$toast |
|
|
|
.error(await this._extractSdkResponseErrorMsg(e)) |
|
|
|
.error(await this._extractSdkResponseErrorMsg(e)) |
|
|
|
.goAway(3000); |
|
|
|
.goAway(3000) |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
this.$e("a:view:share:enable-pwd"); |
|
|
|
this.$e('a:view:share:enable-pwd') |
|
|
|
}, |
|
|
|
}, |
|
|
|
async loadViews() { |
|
|
|
async loadViews() { |
|
|
|
// this.viewsList = await this.sqlOp( |
|
|
|
// this.viewsList = await this.sqlOp( |
|
|
@ -772,8 +789,8 @@ export default { |
|
|
|
|
|
|
|
|
|
|
|
// this.viewsList = [] |
|
|
|
// this.viewsList = [] |
|
|
|
|
|
|
|
|
|
|
|
const views = (await this.$api.dbView.list(this.meta.id)).list; |
|
|
|
const views = (await this.$api.dbView.list(this.meta.id)).list |
|
|
|
this.$emit("update:views", views); |
|
|
|
this.$emit('update:views', views) |
|
|
|
}, |
|
|
|
}, |
|
|
|
// async onViewChange() { |
|
|
|
// async onViewChange() { |
|
|
|
// let query_params = {} |
|
|
|
// let query_params = {} |
|
|
@ -793,27 +810,27 @@ export default { |
|
|
|
// this.$emit('loadTableData'); |
|
|
|
// this.$emit('loadTableData'); |
|
|
|
// }, |
|
|
|
// }, |
|
|
|
copyapiUrlToClipboard() { |
|
|
|
copyapiUrlToClipboard() { |
|
|
|
copyTextToClipboard(this.currentApiUrl); |
|
|
|
copyTextToClipboard(this.currentApiUrl) |
|
|
|
this.clipboardSuccessHandler(); |
|
|
|
this.clipboardSuccessHandler() |
|
|
|
}, |
|
|
|
}, |
|
|
|
async updateViewName(view, index) { |
|
|
|
async updateViewName(view, index) { |
|
|
|
if (!view.edit) { |
|
|
|
if (!view.edit) { |
|
|
|
return; |
|
|
|
return |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
// const oldTitle = view.title |
|
|
|
// const oldTitle = view.title |
|
|
|
|
|
|
|
|
|
|
|
this.$set(view, "edit", false); |
|
|
|
this.$set(view, 'edit', false) |
|
|
|
if (view.title_temp === view.title) { |
|
|
|
if (view.title_temp === view.title) { |
|
|
|
return; |
|
|
|
return |
|
|
|
} |
|
|
|
} |
|
|
|
if ( |
|
|
|
if ( |
|
|
|
this.viewsList.some( |
|
|
|
this.viewsList.some( |
|
|
|
(v, i) => i !== index && (v.alias || v.title) === view.title_temp |
|
|
|
(v, i) => i !== index && (v.alias || v.title) === view.title_temp |
|
|
|
) |
|
|
|
) |
|
|
|
) { |
|
|
|
) { |
|
|
|
this.$toast.info("View name should be unique").goAway(3000); |
|
|
|
this.$toast.info('View name should be unique').goAway(3000) |
|
|
|
return; |
|
|
|
return |
|
|
|
} |
|
|
|
} |
|
|
|
try { |
|
|
|
try { |
|
|
|
// if (this.selectedViewIdLocal === view.id) { |
|
|
|
// if (this.selectedViewIdLocal === view.id) { |
|
|
@ -824,39 +841,39 @@ export default { |
|
|
|
// } |
|
|
|
// } |
|
|
|
// }) |
|
|
|
// }) |
|
|
|
// } |
|
|
|
// } |
|
|
|
this.$set(view, "title", view.title_temp); |
|
|
|
this.$set(view, 'title', view.title_temp) |
|
|
|
await this.$api.dbView.update(view.id, { |
|
|
|
await this.$api.dbView.update(view.id, { |
|
|
|
title: view.title, |
|
|
|
title: view.title, |
|
|
|
order: view.order, |
|
|
|
order: view.order |
|
|
|
}); |
|
|
|
}) |
|
|
|
this.$toast.success("View renamed successfully").goAway(3000); |
|
|
|
this.$toast.success('View renamed successfully').goAway(3000) |
|
|
|
} catch (e) { |
|
|
|
} catch (e) { |
|
|
|
this.$toast |
|
|
|
this.$toast |
|
|
|
.error(await this._extractSdkResponseErrorMsg(e)) |
|
|
|
.error(await this._extractSdkResponseErrorMsg(e)) |
|
|
|
.goAway(3000); |
|
|
|
.goAway(3000) |
|
|
|
} |
|
|
|
} |
|
|
|
}, |
|
|
|
}, |
|
|
|
showRenameTextBox(view, i) { |
|
|
|
showRenameTextBox(view, i) { |
|
|
|
this.$set(view, "edit", true); |
|
|
|
this.$set(view, 'edit', true) |
|
|
|
this.$set(view, "title_temp", view.title); |
|
|
|
this.$set(view, 'title_temp', view.title) |
|
|
|
this.$nextTick(() => { |
|
|
|
this.$nextTick(() => { |
|
|
|
const input = this.$refs[`input${i}`][0]; |
|
|
|
const input = this.$refs[`input${i}`][0] |
|
|
|
input.focus(); |
|
|
|
input.focus() |
|
|
|
input.setSelectionRange(0, input.value.length); |
|
|
|
input.setSelectionRange(0, input.value.length) |
|
|
|
}); |
|
|
|
}) |
|
|
|
this.$e("c:view:rename", { view: view.type }); |
|
|
|
this.$e('c:view:rename', { view: view.type }) |
|
|
|
}, |
|
|
|
}, |
|
|
|
async deleteView(view) { |
|
|
|
async deleteView(view) { |
|
|
|
try { |
|
|
|
try { |
|
|
|
await this.$api.dbView.delete(view.id); |
|
|
|
await this.$api.dbView.delete(view.id) |
|
|
|
this.$toast.success("View deleted successfully").goAway(3000); |
|
|
|
this.$toast.success('View deleted successfully').goAway(3000) |
|
|
|
await this.loadViews(); |
|
|
|
await this.loadViews() |
|
|
|
} catch (e) { |
|
|
|
} catch (e) { |
|
|
|
this.$toast |
|
|
|
this.$toast |
|
|
|
.error(await this._extractSdkResponseErrorMsg(e)) |
|
|
|
.error(await this._extractSdkResponseErrorMsg(e)) |
|
|
|
.goAway(3000); |
|
|
|
.goAway(3000) |
|
|
|
} |
|
|
|
} |
|
|
|
this.$e("a:view:delete", { view: view.type }); |
|
|
|
this.$e('a:view:delete', { view: view.type }) |
|
|
|
}, |
|
|
|
}, |
|
|
|
async genShareLink() { |
|
|
|
async genShareLink() { |
|
|
|
// const sharedViewUrl = await this.$store.dispatch('sqlMgr/ActSqlOp', [ |
|
|
|
// const sharedViewUrl = await this.$store.dispatch('sqlMgr/ActSqlOp', [ |
|
|
@ -883,44 +900,44 @@ export default { |
|
|
|
// password: this.sharedViewPassword |
|
|
|
// password: this.sharedViewPassword |
|
|
|
// } |
|
|
|
// } |
|
|
|
// ]) |
|
|
|
// ]) |
|
|
|
const shared = await this.$api.dbViewShare.create(this.selectedViewId); |
|
|
|
const shared = await this.$api.dbViewShare.create(this.selectedViewId) |
|
|
|
|
|
|
|
|
|
|
|
// todo: url |
|
|
|
// todo: url |
|
|
|
this.shareLink = shared; |
|
|
|
this.shareLink = shared |
|
|
|
this.showShareModel = true; |
|
|
|
this.showShareModel = true |
|
|
|
}, |
|
|
|
}, |
|
|
|
copyView(view, i) { |
|
|
|
copyView(view, i) { |
|
|
|
this.createViewType = view.type; |
|
|
|
this.createViewType = view.type |
|
|
|
this.showCreateView = true; |
|
|
|
this.showCreateView = true |
|
|
|
this.copyViewRef = view; |
|
|
|
this.copyViewRef = view |
|
|
|
this.$e("c:view:copy", { view: view.type }); |
|
|
|
this.$e('c:view:copy', { view: view.type }) |
|
|
|
}, |
|
|
|
}, |
|
|
|
async onViewCreate(viewMeta) { |
|
|
|
async onViewCreate(viewMeta) { |
|
|
|
this.copyViewRef = null; |
|
|
|
this.copyViewRef = null |
|
|
|
await this.loadViews(); |
|
|
|
await this.loadViews() |
|
|
|
this.selectedViewIdLocal = viewMeta.id; |
|
|
|
this.selectedViewIdLocal = viewMeta.id |
|
|
|
// await this.onViewChange(); |
|
|
|
// await this.onViewChange(); |
|
|
|
this.$e("a:view:create", { view: viewMeta.type }); |
|
|
|
this.$e('a:view:create', { view: viewMeta.type }) |
|
|
|
}, |
|
|
|
}, |
|
|
|
clipboard(str) { |
|
|
|
clipboard(str) { |
|
|
|
const el = document.createElement("textarea"); |
|
|
|
const el = document.createElement('textarea') |
|
|
|
el.addEventListener("focusin", (e) => e.stopPropagation()); |
|
|
|
el.addEventListener('focusin', e => e.stopPropagation()) |
|
|
|
el.value = str; |
|
|
|
el.value = str |
|
|
|
document.body.appendChild(el); |
|
|
|
document.body.appendChild(el) |
|
|
|
el.select(); |
|
|
|
el.select() |
|
|
|
document.execCommand("copy"); |
|
|
|
document.execCommand('copy') |
|
|
|
document.body.removeChild(el); |
|
|
|
document.body.removeChild(el) |
|
|
|
}, |
|
|
|
}, |
|
|
|
clipboardSuccessHandler() { |
|
|
|
clipboardSuccessHandler() { |
|
|
|
this.$toast.info("Copied to clipboard").goAway(1000); |
|
|
|
this.$toast.info('Copied to clipboard').goAway(1000) |
|
|
|
}, |
|
|
|
}, |
|
|
|
copyShareUrlToClipboard() { |
|
|
|
copyShareUrlToClipboard() { |
|
|
|
this.clipboard(this.sharedViewUrl); |
|
|
|
this.clipboard(this.sharedViewUrl) |
|
|
|
this.clipboardSuccessHandler(); |
|
|
|
this.clipboardSuccessHandler() |
|
|
|
this.$e("c:view:share:copy-url"); |
|
|
|
this.$e('c:view:share:copy-url') |
|
|
|
}, |
|
|
|
} |
|
|
|
}, |
|
|
|
} |
|
|
|
}; |
|
|
|
} |
|
|
|
</script> |
|
|
|
</script> |
|
|
|
|
|
|
|
|
|
|
|
<style scoped lang="scss"> |
|
|
|
<style scoped lang="scss"> |
|
|
|