Browse Source

chore: format code

Signed-off-by: Wing-Kam Wong <wingkwong.code@gmail.com>
pull/269/head
Wing-Kam Wong 3 years ago
parent
commit
a3f65a0953
  1. 1001
      packages/nc-gui/components/ProjectTreeView.vue
  2. 483
      packages/nc-gui/components/project/spreadsheet/components/spreadsheetNavDrawer.vue

1001
packages/nc-gui/components/ProjectTreeView.vue

File diff suppressed because it is too large Load Diff

483
packages/nc-gui/components/project/spreadsheet/components/spreadsheetNavDrawer.vue

@ -2,50 +2,55 @@
<v-navigation-drawer <v-navigation-drawer
class="views-navigation-drawer" class="views-navigation-drawer"
:style="{ :style="{
maxWidth:toggleDrawer ? '0': '220px', maxWidth: toggleDrawer ? '0' : '220px',
minWidth:toggleDrawer ? '0': '220px' minWidth: toggleDrawer ? '0' : '220px',
}"> }"
>
<v-container fluid class="h-100 py-0"> <v-container fluid class="h-100 py-0">
<div class="d-flex flex-column h-100"> <div class="d-flex flex-column h-100">
<div class="flex-grow-1" style="overflow: auto; min-height: 350px">
<div class="flex-grow-1" style="overflow: auto; min-height:350px">
<v-list dense> <v-list dense>
<v-list-item dense> <v-list-item dense>
<!-- Views --> <!-- Views -->
<span class="body-2 grey--text">{{ $t('nav_drawer.title') }}</span> <span class="body-2 grey--text">{{ $t('nav_drawer.title') }}</span>
</v-list-item> </v-list-item>
<v-list-item-group <v-list-item-group v-model="selectedViewIdLocal" color="primary">
v-model="selectedViewIdLocal" <v-list-item
color="primary" dense
> v-for="(view, i) in viewsList"
:key="i"
<v-list-item dense v-for="(view,i) in viewsList" :value="view.id"
:key="i" active-class="x-active--text"
:value="view.id" class="body-2 text-capitalize view"
active-class="x-active--text" >
class="body-2 text-capitalize view">
<v-list-item-icon class="mr-n1"> <v-list-item-icon class="mr-n1">
<v-icon color="primary" x-small v-if="viewIcons[view.show_as]" <v-icon
:color="viewIcons[view.show_as].color">{{ viewIcons[view.show_as].icon }} color="primary"
x-small
v-if="viewIcons[view.show_as]"
:color="viewIcons[view.show_as].color"
>{{ viewIcons[view.show_as].icon }}
</v-icon> </v-icon>
<v-icon color="primary" small v-else>mdi-table</v-icon> <v-icon color="primary" small v-else>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>
<template v-slot:activator="{on}"> <template v-slot:activator="{ on }">
<div class="font-weight-regular" style="overflow: hidden; text-overflow: ellipsis"> <div
class="font-weight-regular"
style="overflow: hidden; text-overflow: ellipsis"
>
<input <input
:ref="`input${i}`" :ref="`input${i}`"
v-model="view.title" v-model="view.title"
@click.stop v-if="view.edit" @click.stop
v-if="view.edit"
@keydown.enter.stop="updateViewName(view)" @keydown.enter.stop="updateViewName(view)"
@blur="updateViewName(view)" @blur="updateViewName(view)"
/>
<template v-else
><span v-on="on">{{ view.alias || view.title }}</span></template
> >
<template
v-else
><span v-on="on">{{ view.alias || view.title }}</span></template>
</div> </div>
</template> </template>
{{ view.alias || view.title }} {{ view.alias || view.title }}
@ -54,170 +59,205 @@
<v-spacer></v-spacer> <v-spacer></v-spacer>
<template v-if="_isUIAllowed('virtualViewsCreateOrEdit')"> <template v-if="_isUIAllowed('virtualViewsCreateOrEdit')">
<!-- Copy view --> <!-- Copy view -->
<x-icon v-if="view.type === 'vtable' && !view.edit" <x-icon
v-bind:tooltip="$t('nav_drawer.virtual_views.action.copy')" v-if="view.type === 'vtable' && !view.edit"
x-small color="primary" v-bind:tooltip="$t('nav_drawer.virtual_views.action.copy')"
@click.stop="copyView(view,i)" x-small
iconClass="view-icon"> color="primary"
@click.stop="copyView(view, i)"
iconClass="view-icon"
>
mdi-content-copy mdi-content-copy
</x-icon> </x-icon>
<!-- Rename view --> <!-- Rename view -->
<x-icon v-if="view.type === 'vtable' && !view.edit" <x-icon
v-bind:tooltip="$t('nav_drawer.virtual_views.action.rename')" v-if="view.type === 'vtable' && !view.edit"
x-small color="primary" v-bind:tooltip="$t('nav_drawer.virtual_views.action.rename')"
@click.stop="showRenameTextBox(view,i)" x-small
iconClass="view-icon"> color="primary"
@click.stop="showRenameTextBox(view, i)"
iconClass="view-icon"
>
mdi-pencil mdi-pencil
</x-icon> </x-icon>
<!-- Delete view" --> <!-- Delete view" -->
<x-icon v-if="view.type === 'vtable'" <x-icon
v-bind:tooltip="$t('nav_drawer.virtual_views.action.delete')" v-if="view.type === 'vtable'"
small color="error" @click.stop="deleteView(view)" v-bind:tooltip="$t('nav_drawer.virtual_views.action.delete')"
iconClass="view-icon"> small
color="error"
@click.stop="deleteView(view)"
iconClass="view-icon"
>
mdi-delete-outline mdi-delete-outline
</x-icon> </x-icon>
</template> </template>
<v-icon v-if="view.id === selectedViewId" small class="check-icon">mdi-check-bold</v-icon> <v-icon v-if="view.id === selectedViewId" small class="check-icon"
>mdi-check-bold</v-icon
>
</v-list-item> </v-list-item>
</v-list-item-group> </v-list-item-group>
</v-list> </v-list>
<template v-if="hideViews && _isUIAllowed('virtualViewsCreateOrEdit')"> <template v-if="hideViews && _isUIAllowed('virtualViewsCreateOrEdit')">
<v-divider class="advance-menu-divider"> <v-divider class="advance-menu-divider"> </v-divider>
</v-divider>
<v-list dense :class="{ <v-list
'advanced-border' : overShieldIcon dense
}"> :class="{
'advanced-border': overShieldIcon,
}"
>
<v-list-item dense> <v-list-item dense>
<!-- Create a View --> <!-- Create a View -->
<span class="body-2 grey--text" @dblclick="enableDummyFeat = true"> <span class="body-2 grey--text" @dblclick="enableDummyFeat = true">
{{ $t('nav_drawer.virtual_views.title')}} {{ $t('nav_drawer.virtual_views.title') }}
</span> </span>
<v-tooltip top> <v-tooltip top>
<template v-slot:activator="{ on }">
<template v-slot:activator="{on}"> <x-icon
<x-icon v-on="on" color="pink grey" v-on="on"
@mouseenter="overShieldIcon = true" color="pink grey"
@mouseleave="overShieldIcon = false" @mouseenter="overShieldIcon = true"
icon-class="ml-2" small>mdi-shield-lock-outline @mouseleave="overShieldIcon = false"
icon-class="ml-2"
small
>mdi-shield-lock-outline
</x-icon> </x-icon>
</template> </template>
<!-- Only visible to Creator --> <!-- Only visible to Creator -->
<span class="caption"> <span class="caption">
{{ $t('nav_drawer.virtual_views.caption')}} {{ $t('nav_drawer.virtual_views.caption') }}
</span> </span>
</v-tooltip> </v-tooltip>
</v-list-item> </v-list-item>
<v-tooltip bottom> <v-tooltip bottom>
<template v-slot:activator="{on}"> <template v-slot:activator="{ on }">
<v-list-item v-on="on" dense @click="openCreateViewDlg('grid')" <v-list-item v-on="on" dense @click="openCreateViewDlg('grid')" class="body-2">
class="body-2">
<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><span class="font-weight-regular"> <v-list-item-title
<!-- Grid --> ><span class="font-weight-regular">
{{ $t('nav_drawer.virtual_views.grid')}} <!-- Grid -->
</span></v-list-item-title> {{ $t('nav_drawer.virtual_views.grid') }}
</span></v-list-item-title
>
<v-spacer></v-spacer> <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 -->
{{ $t('nav_drawer.virtual_views.grid.create')}} {{ $t('nav_drawer.virtual_views.grid.create') }}
</v-tooltip> </v-tooltip>
<v-tooltip bottom> <v-tooltip bottom>
<template v-slot:activator="{on}"> <template v-slot:activator="{ on }">
<v-list-item v-on="on" dense @click="openCreateViewDlg('gallery')" <v-list-item v-on="on" dense @click="openCreateViewDlg('gallery')" class="body-2">
class="body-2">
<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><span class="font-weight-regular"> <v-list-item-title
<!-- Gallery --> ><span class="font-weight-regular">
<!-- Gallery -->
{{ $t('nav_drawer.virtual_views.gallery')}}
</span></v-list-item-title> {{ $t('nav_drawer.virtual_views.gallery') }}
</span></v-list-item-title
>
<v-spacer></v-spacer> <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 -->
{{ $t('nav_drawer.virtual_views.gallery.create')}} {{ $t('nav_drawer.virtual_views.gallery.create') }}
</v-tooltip> </v-tooltip>
<v-tooltip bottom> <v-tooltip bottom>
<template v-slot:activator="{on}"> <template v-slot:activator="{ on }">
<v-list-item v-on="on" dense @click="enableDummyFeat ? openCreateViewDlg('calendar') : comingSoon()" <v-list-item
class="body-2"> v-on="on"
dense
@click="enableDummyFeat ? openCreateViewDlg('calendar') : comingSoon()"
class="body-2"
>
<v-list-item-icon class="mr-n1"> <v-list-item-icon class="mr-n1">
<v-icon x-small>mdi-calendar</v-icon> <v-icon x-small>mdi-calendar</v-icon>
</v-list-item-icon> </v-list-item-icon>
<v-list-item-title><span class="font-weight-regular"> <v-list-item-title
<!-- Calendar --> ><span class="font-weight-regular">
{{ $t('nav_drawer.virtual_views.calendar')}} <!-- Calendar -->
</span></v-list-item-title> {{ $t('nav_drawer.virtual_views.calendar') }}
</span></v-list-item-title
>
<v-spacer></v-spacer> <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 Calendar View --> <!-- Add Calendar View -->
{{ $t('nav_drawer.virtual_views.calendar.create')}} {{ $t('nav_drawer.virtual_views.calendar.create') }}
</v-tooltip> </v-tooltip>
<v-tooltip bottom> <v-tooltip bottom>
<template v-slot:activator="{on}"> <template v-slot:activator="{ on }">
<v-list-item v-on="on" dense @click="enableDummyFeat ? openCreateViewDlg('kanban') : comingSoon()" <v-list-item
openClass="body-2"> v-on="on"
dense
@click="enableDummyFeat ? openCreateViewDlg('kanban') : comingSoon()"
openClass="body-2"
>
<v-list-item-icon class="mr-n1"> <v-list-item-icon class="mr-n1">
<v-icon x-small>mdi-tablet-dashboard</v-icon> <v-icon x-small>mdi-tablet-dashboard</v-icon>
</v-list-item-icon> </v-list-item-icon>
<v-list-item-title><span class="font-weight-regular"> <v-list-item-title
<!-- Kanban --> ><span class="font-weight-regular">
{{ $t('nav_drawer.virtual_views.kanban')}} <!-- Kanban -->
</span></v-list-item-title> {{ $t('nav_drawer.virtual_views.kanban') }}
</span></v-list-item-title
>
<v-spacer></v-spacer> <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 Kanban View --> <!-- Add Kanban View -->
{{ $t('nav_drawer.virtual_views.kanban.create')}} {{ $t('nav_drawer.virtual_views.kanban.create') }}
</v-tooltip> </v-tooltip>
<v-tooltip bottom> <v-tooltip bottom>
<template v-slot:activator="{on}"> <template v-slot:activator="{ on }">
<v-list-item v-on="on" dense @click="$toast.info('Coming soon').goAway(3000)" <v-list-item
class="body-2"> v-on="on"
dense
@click="$toast.info('Coming soon').goAway(3000)"
class="body-2"
>
<v-list-item-icon class="mr-n1"> <v-list-item-icon class="mr-n1">
<v-icon x-small class="mt-n1">mdi-form-select</v-icon> <v-icon x-small class="mt-n1">mdi-form-select</v-icon>
</v-list-item-icon> </v-list-item-icon>
<v-list-item-title><span class="font-weight-regular"> <v-list-item-title
<!-- Form --> ><span class="font-weight-regular">
<!-- Form -->
{{ $t('nav_drawer.virtual_views.form')}} {{ $t('nav_drawer.virtual_views.form') }}
</span></v-list-item-title> </span></v-list-item-title
>
<v-spacer></v-spacer> <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 -->
{{ $t('nav_drawer.virtual_views.form.create')}} {{ $t('nav_drawer.virtual_views.form.create') }}
</v-tooltip> </v-tooltip>
</v-list> </v-list>
</template> </template>
</div> </div>
<div class="pa-2 sponsor-wrapper" v-if="(time - $store.state.windows.miniSponsorCard) > (15 * 60 * 1000) "> <div
<v-icon small class="close-icon" @click="hideMiniSponsorCard">mdi-close-circle-outline</v-icon> class="pa-2 sponsor-wrapper"
v-if="time - $store.state.windows.miniSponsorCard > 15 * 60 * 1000"
>
<v-icon small class="close-icon" @click="hideMiniSponsorCard"
>mdi-close-circle-outline</v-icon
>
<sponsor-mini :nav="true"></sponsor-mini> <sponsor-mini :nav="true"></sponsor-mini>
</div> </div>
<!--<div class="text-center"> <!--<div class="text-center">
@ -235,25 +275,34 @@
--> -->
<div v-if="_isUIAllowed('table-advanced')"> <div v-if="_isUIAllowed('table-advanced')">
<v-divider></v-divider> <v-divider></v-divider>
<v-list dense :class="{ <v-list
'advanced-border' : overAdvShieldIcon dense
}"> :class="{
'advanced-border': overAdvShieldIcon,
}"
>
<v-list-item dense> <v-list-item dense>
<span class="body-2 grey--text" @dblclick="$emit('update:showAdvanceOptions', !showAdvanceOptions)">Advanced</span> <span
class="body-2 grey--text"
@dblclick="$emit('update:showAdvanceOptions', !showAdvanceOptions)"
>Advanced</span
>
<v-tooltip top> <v-tooltip top>
<template v-slot:activator="{ on }">
<template v-slot:activator="{on}"> <x-icon
<x-icon v-on="on" color="pink grey" v-on="on"
@mouseenter="overAdvShieldIcon = true" color="pink grey"
@mouseleave="overAdvShieldIcon = false" @mouseenter="overAdvShieldIcon = true"
icon-class="ml-2" small>mdi-shield-lock-outline @mouseleave="overAdvShieldIcon = false"
icon-class="ml-2"
small
>mdi-shield-lock-outline
</x-icon> </x-icon>
</template> </template>
<span class="caption"> <span class="caption">
<!-- Only visible to Creator --> <!-- Only visible to Creator -->
{{$t('nav_drawer.virtual_views.caption')}} {{ $t('nav_drawer.virtual_views.caption') }}
</span> </span>
</v-tooltip> </v-tooltip>
</v-list-item> </v-list-item>
<!-- <v-tooltip bottom>--> <!-- <v-tooltip bottom>-->
@ -261,22 +310,24 @@
<!-- <v-menu offset-x left>--> <!-- <v-menu offset-x left>-->
<!-- <template v-slot:activator="{on}">--> <!-- <template v-slot:activator="{on}">-->
<v-list-item <v-list-item
v-show="selectedView && (selectedView.type === 'view' || selectedView.type === 'table')" v-show="
selectedView && (selectedView.type === 'view' || selectedView.type === 'table')
"
v-if="_isUIAllowed('shareview')" v-if="_isUIAllowed('shareview')"
@click="genShareLink" @click="genShareLink"
> >
<v-icon x-small class="mr-2">mdi-open-in-new</v-icon> <v-icon x-small class="mr-2">mdi-open-in-new</v-icon>
<span class="caption"> <span class="caption">
<!-- Share View --> <!-- Share View -->
{{ $t('nav_drawer.advanced.title1') }} {{ $t('nav_drawer.advanced.title1') }}
</span> </span>
<v-spacer></v-spacer> <v-spacer></v-spacer>
<v-menu offset-y> <v-menu offset-y>
<template v-slot:activator="{on}"> <template v-slot:activator="{ on }">
<v-icon small @click.stop v-on="on">mdi-dots-vertical</v-icon> <v-icon small @click.stop v-on="on">mdi-dots-vertical</v-icon>
</template> </template>
<v-list dense> <v-list dense>
<v-list-item dense @click="$emit('showAdditionalFeatOverlay','shared-views')"> <v-list-item dense @click="$emit('showAdditionalFeatOverlay', 'shared-views')">
<v-list-item-title> <v-list-item-title>
<span class="font-weight-regular"> <span class="font-weight-regular">
<!-- Views List --> <!-- Views List -->
@ -311,9 +362,8 @@
<!-- </v-tooltip>--> <!-- </v-tooltip>-->
<v-tooltip bottom> <v-tooltip bottom>
<template v-slot:activator="{on}"> <template v-slot:activator="{ on }">
<v-list-item v-on="on" <v-list-item v-on="on" @click="copyapiUrlToClipboard">
@click="copyapiUrlToClipboard">
<v-icon x-small class="mr-2">mdi-content-copy</v-icon> <v-icon x-small class="mr-2">mdi-content-copy</v-icon>
<!-- Copy API URL --> <!-- Copy API URL -->
<span class="caption">{{ $t('nav_drawer.advanced.option1') }}</span> <span class="caption">{{ $t('nav_drawer.advanced.option1') }}</span>
@ -322,20 +372,15 @@
<!-- Copy API URL --> <!-- Copy API URL -->
{{ $t('nav_drawer.advanced.option1') }} {{ $t('nav_drawer.advanced.option1') }}
</v-tooltip> </v-tooltip>
<template <template v-if="_isUIAllowed('model')">
v-if="_isUIAllowed('model')">
<v-divider class="advance-menu-divider"></v-divider> <v-divider class="advance-menu-divider"></v-divider>
<slot></slot> <slot></slot>
</template> </template>
</v-list> </v-list>
</div> </div>
</div> </div>
</v-container> </v-container>
<create-view-dialog <create-view-dialog
v-if="showCreateView" v-if="showCreateView"
:nodes="nodes" :nodes="nodes"
@ -350,31 +395,24 @@
:alias="meta._tn" :alias="meta._tn"
></create-view-dialog> ></create-view-dialog>
<v-dialog v-model="showShareModel" max-width="650px">
<v-dialog v-model="showShareModel"
max-width="650px"
>
<v-card class="pa-3 backgroundColor"> <v-card class="pa-3 backgroundColor">
<v-container @click.stop> <v-container @click.stop>
<h3 class="title mb-3"> <h3 class="title mb-3">
<!-- This view is shared via a private link --> <!-- This view is shared via a private link -->
{{ $t('nav_drawer.share_view.title')}} {{ $t('nav_drawer.share_view.title') }}
</h3> </h3>
<p class="grey&#45;&#45;text body-2"> <p class="grey&#45;&#45;text body-2">
<!-- People with private link can only see cells visible in this view --> <!-- People with private link can only see cells visible in this view -->
</p> </p>
<div style="border-radius: 4px" <div style="border-radius: 4px" class="share-link-box body-2 pa-2 d-flex align-center">
class="share-link-box body-2 pa-2 d-flex align-center">
{{ shareLink.url }} {{ shareLink.url }}
<v-spacer> <v-spacer> </v-spacer>
</v-spacer>
<a :href="shareLink.url" style="text-decoration: none" target="_blank"> <a :href="shareLink.url" style="text-decoration: none" target="_blank">
<v-icon small class="mx-2">mdi-open-in-new</v-icon> <v-icon small class="mx-2">mdi-open-in-new</v-icon>
</a> </a>
<v-icon small <v-icon small class="pointer" @click="copyShareUrlToClipboard"
class="pointer" >mdi-content-copy
@click="copyShareUrlToClipboard"
>mdi-content-copy
</v-icon> </v-icon>
</div> </div>
@ -382,11 +420,11 @@
<template v-slot:label> <template v-slot:label>
<!-- Restrict access with a password --> <!-- Restrict access with a password -->
<span class="caption" v-show="!passwordProtect"> <span class="caption" v-show="!passwordProtect">
{{ $t('nav_drawer.share_view.toggle.option1')}} {{ $t('nav_drawer.share_view.toggle.option1') }}
</span> </span>
<!-- Access is password restricted --> <!-- Access is password restricted -->
<span class="caption" v-show="passwordProtect"> <span class="caption" v-show="passwordProtect">
{{ $t('nav_drawer.share_view.toggle.option2')}} {{ $t('nav_drawer.share_view.toggle.option2') }}
</span> </span>
</template> </template>
</v-switch> </v-switch>
@ -396,47 +434,45 @@
browser-autocomplete="new-password" browser-autocomplete="new-password"
class="password-field mr-2 caption" class="password-field mr-2 caption"
style="max-width: 230px" style="max-width: 230px"
:type="showShareLinkPassword ? 'text' : 'password'" :type="showShareLinkPassword ? 'text' : 'password'"
v-bind:hint="$t('nav_drawer.share_view.password.caption')" v-bind:hint="$t('nav_drawer.share_view.password.caption')"
persistent-hint persistent-hint
dense dense
v-model="shareLink.password" v-model="shareLink.password"
solo solo
flat> flat
>
<template v-slot:append> <template v-slot:append>
<v-icon small @click="showShareLinkPassword = !showShareLinkPassword"> <v-icon small @click="showShareLinkPassword = !showShareLinkPassword">
{{ showShareLinkPassword ? 'visibility_off' : 'visibility' }} {{ showShareLinkPassword ? 'visibility_off' : 'visibility' }}
</v-icon> </v-icon>
</template> </template>
</v-text-field> </v-text-field>
<v-btn color="primary" class="caption" small @click="saveShareLinkPassword"> <v-btn color="primary" class="caption" small @click="saveShareLinkPassword">
<!-- Save password --> <!-- Save password -->
{{ $t('nav_drawer.share_view.password.button')}} {{ $t('nav_drawer.share_view.password.button') }}
</v-btn> </v-btn>
</div> </div>
</v-container> </v-container>
</v-card> </v-card>
</v-dialog> </v-dialog>
</v-navigation-drawer> </v-navigation-drawer>
</template> </template>
<script> <script>
import CreateViewDialog from "@/components/project/spreadsheet/dialog/createViewDialog"; import CreateViewDialog from '@/components/project/spreadsheet/dialog/createViewDialog';
import SponsorMini from "@/components/sponsorMini"; import SponsorMini from '@/components/sponsorMini';
export default { export default {
name: "spreadsheetNavDrawer", name: 'spreadsheetNavDrawer',
components: {SponsorMini, CreateViewDialog}, components: { SponsorMini, CreateViewDialog },
props: { props: {
showAdvanceOptions: Boolean, showAdvanceOptions: Boolean,
hideViews: Boolean, hideViews: Boolean,
primaryValueColumn: [Number, String], primaryValueColumn: [Number, String],
toggleDrawer: { toggleDrawer: {
type: Boolean, type: Boolean,
default: false default: false,
}, },
nodes: Object, nodes: Object,
table: String, table: String,
@ -450,7 +486,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,
@ -469,11 +505,11 @@ export default {
overShieldIcon: false, overShieldIcon: false,
viewsList: [], viewsList: [],
viewIcons: { viewIcons: {
grid: {icon: 'mdi-grid-large', color: 'blue'}, grid: { icon: 'mdi-grid-large', color: 'blue' },
form: {icon: 'mdi-form-select', color: 'pink'}, form: { icon: 'mdi-form-select', color: 'pink' },
calendar: {icon: 'mdi-calendar', color: 'purple'}, calendar: { icon: 'mdi-calendar', color: 'purple' },
gallery: {icon: 'mdi-camera-image', color: 'orange'}, gallery: { icon: 'mdi-camera-image', color: 'orange' },
kanban: {icon: 'mdi-tablet-dashboard', color: 'green'}, kanban: { icon: 'mdi-tablet-dashboard', color: 'green' },
}, },
copyViewRef: null, copyViewRef: null,
shareLink: {}, shareLink: {},
@ -489,9 +525,10 @@ export default {
selectedViewIdLocal: { selectedViewIdLocal: {
get() { get() {
return this.selectedViewId; return this.selectedViewId;
}, set(id) { },
set(id) {
const selectedView = this.viewsList && this.viewsList.find(v => v.id === id); const selectedView = this.viewsList && this.viewsList.find(v => v.id === id);
let query_params = {} let query_params = {};
this.$emit('update:selectedViewId', id); this.$emit('update:selectedViewId', id);
this.$emit('update:selectedView', selectedView); this.$emit('update:selectedView', selectedView);
@ -514,15 +551,15 @@ export default {
this.$emit('mapFieldsAndShowFields'); this.$emit('mapFieldsAndShowFields');
} }
this.$emit('loadTableData'); this.$emit('loadTableData');
} },
} },
}, },
watch: { watch: {
async load(v) { async load(v) {
if (v) { if (v) {
await this.loadViews(); await this.loadViews();
} }
} },
}, },
methods: { methods: {
hideMiniSponsorCard() { hideMiniSponsorCard() {
@ -533,7 +570,8 @@ export default {
this.showCreateView = true; this.showCreateView = true;
}, },
isCentrallyAligned(col) { isCentrallyAligned(col) {
return !['SingleLineText', return ![
'SingleLineText',
'LongText', 'LongText',
'Attachment', 'Attachment',
'Date', 'Date',
@ -542,31 +580,40 @@ export default {
'URL', 'URL',
'DateTime', 'DateTime',
'CreateTime', 'CreateTime',
'LastModifiedTime'].includes(col.uidt) 'LastModifiedTime',
].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.$store.dispatch('sqlMgr/ActSqlOp', [{dbAlias: this.nodes.dbAlias}, 'updateSharedViewLinkPassword', { await this.$store.dispatch('sqlMgr/ActSqlOp', [
id: this.shareLink.id, { dbAlias: this.nodes.dbAlias },
password: this.shareLink.password 'updateSharedViewLinkPassword',
}]); {
id: this.shareLink.id,
password: this.shareLink.password,
},
]);
this.$toast.success('Successfully updated').goAway(3000); this.$toast.success('Successfully updated').goAway(3000);
} catch (e) { } catch (e) {
this.$toast.error(e.message).goAway(3000); this.$toast.error(e.message).goAway(3000);
} }
}, },
async loadViews() { async loadViews() {
this.viewsList = await this.sqlOp({ this.viewsList = await this.sqlOp(
dbAlias: this.nodes.dbAlias {
}, 'xcVirtualTableList', { dbAlias: this.nodes.dbAlias,
tn: this.table },
}); 'xcVirtualTableList',
{
tn: this.table,
}
);
this.selectedViewIdLocal = this.viewsList && this.viewsList[0] && this.viewsList[0].id; this.selectedViewIdLocal = this.viewsList && this.viewsList[0] && this.viewsList[0].id;
}, },
// async onViewChange() { // async onViewChange() {
@ -587,15 +634,16 @@ export default {
// this.$emit('loadTableData'); // this.$emit('loadTableData');
// }, // },
copyapiUrlToClipboard() { copyapiUrlToClipboard() {
this.$clipboard(this.currentApiUrl) this.$clipboard(this.currentApiUrl);
this.clipboardSuccessHandler() this.clipboardSuccessHandler();
}, async updateViewName(view) { },
async updateViewName(view) {
try { try {
await this.sqlOp({dbAlias: this.nodes.dbAlias}, 'xcVirtualTableRename', { await this.sqlOp({ dbAlias: this.nodes.dbAlias }, 'xcVirtualTableRename', {
id: view.id, id: view.id,
title: view.title, title: view.title,
alias: view.alias, alias: view.alias,
parent_model_title: this.meta._tn parent_model_title: this.meta._tn,
}); });
this.$toast.success('View renamed successfully').goAway(3000); this.$toast.success('View renamed successfully').goAway(3000);
} catch (e) { } catch (e) {
@ -608,39 +656,48 @@ export default {
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);
}); });
}, async deleteView(view) { },
async deleteView(view) {
try { try {
await this.sqlOp({dbAlias: this.nodes.dbAlias}, 'xcVirtualTableDelete', { await this.sqlOp({ dbAlias: this.nodes.dbAlias }, 'xcVirtualTableDelete', {
id: view.id, id: view.id,
title: view.alias || view.title, title: view.alias || view.title,
parent_model_title: this.table parent_model_title: this.table,
}); });
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.error(e.message).goAway(3000); this.$toast.error(e.message).goAway(3000);
} }
}, async genShareLink() { },
async genShareLink() {
this.showShareModel = true; this.showShareModel = true;
const sharedViewUrl = await this.$store.dispatch('sqlMgr/ActSqlOp', [{dbAlias: this.nodes.dbAlias}, 'createSharedViewLink', { const sharedViewUrl = await this.$store.dispatch('sqlMgr/ActSqlOp', [
model_name: this.table, { dbAlias: this.nodes.dbAlias },
meta: this.meta, 'createSharedViewLink',
query_params: { {
where: this.concatenatedXWhere, model_name: this.table,
sort: this.sort, meta: this.meta,
fields: Object.keys(this.showFields).filter(f => this.showFields[f]).join(',') query_params: {
where: this.concatenatedXWhere,
sort: this.sort,
fields: Object.keys(this.showFields)
.filter(f => this.showFields[f])
.join(','),
},
password: this.sharedViewPassword,
}, },
password: this.sharedViewPassword ]);
}])
this.shareLink = sharedViewUrl; this.shareLink = sharedViewUrl;
}, },
copyView(view, i) { copyView(view, i) {
this.createViewType = view.show_as; this.createViewType = view.show_as;
this.showCreateView = true; this.showCreateView = true;
this.copyViewRef = view; this.copyViewRef = view;
}, 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;
@ -656,26 +713,26 @@ export default {
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.shareLink.url) this.clipboard(this.shareLink.url);
this.clipboardSuccessHandler() this.clipboardSuccessHandler();
}, },
},
} };
}
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
::v-deep { ::v-deep {
.v-list-item--dense .v-list-item__icon, .v-list--dense .v-list-item .v-list-item__icon { .v-list-item--dense .v-list-item__icon,
.v-list--dense .v-list-item .v-list-item__icon {
margin-top: 4px; margin-top: 4px;
margin-bottom: 4px; margin-bottom: 4px;
} }
.v-list-item--dense, .v-list--dense .v-list-item { .v-list-item--dense,
.v-list--dense .v-list-item {
min-height: 32px; min-height: 32px;
} }
@ -685,12 +742,11 @@ export default {
border-style: dashed; border-style: dashed;
margin-top: 5px; margin-top: 5px;
margin-bottom: 5px; margin-bottom: 5px;
} }
.view .view-icon { .view .view-icon {
display: none; display: none;
transition: .3s display; transition: 0.3s display;
} }
.view:hover .view-icon { .view:hover .view-icon {
@ -707,7 +763,7 @@ export default {
.v-messages__message { .v-messages__message {
color: grey; color: grey;
font-size: .65rem; font-size: 0.65rem;
} }
} }
@ -729,8 +785,8 @@ export default {
bottom: 0; bottom: 0;
right: 0; right: 0;
background: var(--v-primary-base); background: var(--v-primary-base);
opacity: .2; opacity: 0.2;
content: ""; content: '';
z-index: 1; z-index: 1;
pointer-events: none; pointer-events: none;
} }
@ -739,7 +795,6 @@ export default {
border-left: 1px solid #80808033; border-left: 1px solid #80808033;
} }
.sponsor-wrapper { .sponsor-wrapper {
position: relative; position: relative;
@ -749,7 +804,7 @@ export default {
top: 10px; top: 10px;
z-index: 9; z-index: 9;
opacity: 0; opacity: 0;
transition: .4s opacity; transition: 0.4s opacity;
} }
&:hover .close-icon { &:hover .close-icon {

Loading…
Cancel
Save