mirror of https://github.com/nocodb/nocodb
Raju Udava
2 years ago
committed by
GitHub
35 changed files with 1045 additions and 463 deletions
@ -1,13 +1,167 @@ |
|||||||
<script lang="ts" setup> |
<script lang="ts" setup> |
||||||
import MdiOpenInNew from '~icons/mdi/open-in-new' |
import { useClipboard } from '@vueuse/core' |
||||||
import { useUIPermission } from '#imports' |
import { ViewTypes } from 'nocodb-sdk' |
||||||
|
import { computed } from 'vue' |
||||||
|
import { message } from 'ant-design-vue' |
||||||
|
import { useToast } from 'vue-toastification' |
||||||
|
import { useNuxtApp } from '#app' |
||||||
|
import { useSmartsheetStoreOrThrow } from '#imports' |
||||||
|
import { extractSdkResponseErrorMsg } from '~/utils/errorUtils' |
||||||
|
import MdiOpenInNewIcon from '~icons/mdi/open-in-new' |
||||||
|
import MdiCopyIcon from '~icons/mdi/content-copy' |
||||||
|
|
||||||
const { isUIAllowed } = useUIPermission() |
const { isUIAllowed } = useUIPermission() |
||||||
|
const { view, $api } = useSmartsheetStoreOrThrow() |
||||||
|
|
||||||
|
const { copy } = useClipboard() |
||||||
|
const { $e } = useNuxtApp() |
||||||
|
const toast = useToast() |
||||||
|
const { dashboardUrl } = useDashboard() |
||||||
|
|
||||||
|
let showShareModel = $ref(false) |
||||||
|
const passwordProtected = $ref(false) |
||||||
|
const shared = ref() |
||||||
|
|
||||||
|
const allowCSVDownload = computed({ |
||||||
|
get() { |
||||||
|
return !!(shared.value?.meta && typeof shared.value.meta === 'string' ? JSON.parse(shared.value.meta) : shared.value.meta) |
||||||
|
?.allowCSVDownload |
||||||
|
}, |
||||||
|
set(allow) { |
||||||
|
shared.value.meta = { allowCSVDownload: allow } |
||||||
|
saveAllowCSVDownload() |
||||||
|
}, |
||||||
|
}) |
||||||
|
|
||||||
|
const genShareLink = async () => { |
||||||
|
shared.value = await $api.dbViewShare.create(view.value.id as string) |
||||||
|
// shared.meta = shared.meta && typeof shared.meta === 'string' ? JSON.parse(shared.meta) : shared.meta; |
||||||
|
// // todo: url |
||||||
|
// shareLink = shared; |
||||||
|
// passwordProtect = shared.password !== null; |
||||||
|
// allowCSVDownload = shared.meta.allowCSVDownload; |
||||||
|
showShareModel = true |
||||||
|
} |
||||||
|
|
||||||
|
const sharedViewUrl = computed(() => { |
||||||
|
if (!shared.value) return |
||||||
|
let viewType |
||||||
|
|
||||||
|
switch (shared.value.type) { |
||||||
|
case ViewTypes.FORM: |
||||||
|
viewType = 'form' |
||||||
|
break |
||||||
|
case ViewTypes.KANBAN: |
||||||
|
viewType = 'kanban' |
||||||
|
break |
||||||
|
default: |
||||||
|
viewType = 'view' |
||||||
|
} |
||||||
|
|
||||||
|
// todo: get dashboard url |
||||||
|
return `${dashboardUrl?.value}/nc/${viewType}/${shared.value.uuid}` |
||||||
|
}) |
||||||
|
|
||||||
|
async function saveAllowCSVDownload() { |
||||||
|
try { |
||||||
|
const meta = shared.value.meta && typeof shared.value.meta === 'string' ? JSON.parse(shared.value.meta) : shared.value.meta |
||||||
|
|
||||||
|
// todo: update swagger |
||||||
|
await $api.dbViewShare.update(shared.value.id, { |
||||||
|
meta, |
||||||
|
} as any) |
||||||
|
toast.success('Successfully updated') |
||||||
|
} catch (e) { |
||||||
|
toast.error(await extractSdkResponseErrorMsg(e)) |
||||||
|
} |
||||||
|
if (allowCSVDownload?.value) { |
||||||
|
$e('a:view:share:enable-csv-download') |
||||||
|
} else { |
||||||
|
$e('a:view:share:disable-csv-download') |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
const saveShareLinkPassword = async () => { |
||||||
|
try { |
||||||
|
await $api.dbViewShare.update(shared.value.id, { |
||||||
|
password: shared.value.password, |
||||||
|
}) |
||||||
|
toast.success('Successfully updated') |
||||||
|
} catch (e) { |
||||||
|
toast.error(await extractSdkResponseErrorMsg(e)) |
||||||
|
} |
||||||
|
|
||||||
|
$e('a:view:share:enable-pwd') |
||||||
|
} |
||||||
|
|
||||||
|
const copyLink = () => { |
||||||
|
copy(sharedViewUrl?.value as string) |
||||||
|
message.success('Copied to clipboard') |
||||||
|
} |
||||||
</script> |
</script> |
||||||
|
|
||||||
<template> |
<template> |
||||||
<div v-t="['c:view:share']" class="nc-sidebar-right-item hover:after:bg-secondary/75 group"> |
<div> |
||||||
<MdiOpenInNew class="group-hover:(!text-white)" /> |
<a-button v-t="['c:view:share']" outlined class="nc-btn-share-view nc-toolbar-btn" size="small"> |
||||||
|
<div class="flex align-center gap-1" @click="genShareLink"> |
||||||
|
<MdiOpenInNewIcon class="text-grey" /> |
||||||
|
<!-- Share View --> |
||||||
{{ $t('activity.shareView') }} |
{{ $t('activity.shareView') }} |
||||||
</div> |
</div> |
||||||
|
</a-button> |
||||||
|
|
||||||
|
<!-- This view is shared via a private link --> |
||||||
|
<a-modal |
||||||
|
v-model:visible="showShareModel" |
||||||
|
size="small" |
||||||
|
:title="$t('msg.info.privateLink')" |
||||||
|
:footer="null" |
||||||
|
width="min(100vw,640px)" |
||||||
|
> |
||||||
|
<div class="share-link-box nc-share-link-box bg-primary-50"> |
||||||
|
<div class="flex-1 h-min text-xs">{{ sharedViewUrl }}</div> |
||||||
|
<!-- <v-spacer /> --> |
||||||
|
<a v-t="['c:view:share:open-url']" :href="sharedViewUrl" target="_blank"> |
||||||
|
<MdiOpenInNewIcon class="text-sm text-gray-500 mt-2" /> |
||||||
|
</a> |
||||||
|
<MdiCopyIcon class="text-gray-500 text-sm cursor-pointer" @click="copyLink" /> |
||||||
|
</div> |
||||||
|
|
||||||
|
<a-collapse ghost> |
||||||
|
<a-collapse-panel key="1" header="More Options"> |
||||||
|
<div class="mb-2"> |
||||||
|
<a-checkbox v-model:checked="passwordProtected" class="!text-xs">{{ $t('msg.info.beforeEnablePwd') }} </a-checkbox> |
||||||
|
<!-- todo: add password toggle --> |
||||||
|
<div v-if="passwordProtected" class="flex gap-2 mt-2 mb-4"> |
||||||
|
<a-input |
||||||
|
v-model:value="shared.password" |
||||||
|
size="small" |
||||||
|
class="!text-xs max-w-[250px]" |
||||||
|
type="password" |
||||||
|
:placeholder="$t('placeholder.password.enter')" |
||||||
|
/> |
||||||
|
<a-button size="small" class="!text-xs" @click="saveShareLinkPassword" |
||||||
|
>{{ $t('placeholder.password.save') }} |
||||||
|
</a-button> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div> |
||||||
|
<a-checkbox v-if="shared && shared.type === ViewTypes.GRID" v-model:checked="allowCSVDownload" class="!text-xs" |
||||||
|
>Allow Download |
||||||
|
</a-checkbox> |
||||||
|
</div> |
||||||
|
</a-collapse-panel> |
||||||
|
</a-collapse> |
||||||
|
</a-modal> |
||||||
|
</div> |
||||||
</template> |
</template> |
||||||
|
|
||||||
|
<style scoped> |
||||||
|
.share-link-box { |
||||||
|
@apply flex p-2 w-full items-center align-center gap-1 bg-gray-100 rounded; |
||||||
|
} |
||||||
|
|
||||||
|
:deep(.ant-collapse-header) { |
||||||
|
@apply !text-xs; |
||||||
|
} |
||||||
|
</style> |
||||||
|
|||||||
@ -0,0 +1,10 @@ |
|||||||
|
export function useDashboard() { |
||||||
|
const route = useRoute() |
||||||
|
const dashboardUrl = computed(() => { |
||||||
|
// todo: test in different scenarios
|
||||||
|
// get base path of app
|
||||||
|
return `${location.origin}${(location.pathname || '').replace(route.path, '')}` |
||||||
|
}) |
||||||
|
|
||||||
|
return { dashboardUrl } |
||||||
|
} |
||||||
@ -0,0 +1,53 @@ |
|||||||
|
import { computed } from '@vue/reactivity' |
||||||
|
import { createInjectionState } from '@vueuse/core' |
||||||
|
import type { TableType, ViewType } from 'nocodb-sdk' |
||||||
|
import type { Ref } from 'vue' |
||||||
|
import { useNuxtApp } from '#app' |
||||||
|
import { useProject } from '#imports' |
||||||
|
|
||||||
|
const [useProvideSmartsheetStore, useSmartsheetStore] = createInjectionState((view: Ref<ViewType>, meta: Ref<TableType>) => { |
||||||
|
const { $api } = useNuxtApp() |
||||||
|
const { sqlUi } = useProject() |
||||||
|
|
||||||
|
// state
|
||||||
|
// todo: move to grid view store
|
||||||
|
const search = reactive({ |
||||||
|
field: '', |
||||||
|
query: '', |
||||||
|
}) |
||||||
|
|
||||||
|
// getters
|
||||||
|
const isLocked = computed(() => (view?.value as any)?.lock_type === 'locked') |
||||||
|
const xWhere = computed(() => { |
||||||
|
let where |
||||||
|
const col = meta?.value?.columns?.find(({ id }) => id === search.field) || meta?.value?.columns?.find((v) => v.pv) |
||||||
|
if (!col) return |
||||||
|
|
||||||
|
if (!search.query.trim()) return |
||||||
|
if (['text', 'string'].includes(sqlUi.value.getAbstractType(col)) && col.dt !== 'bigint') { |
||||||
|
where = `(${col.title},like,%${search.query.trim()}%)` |
||||||
|
} else { |
||||||
|
where = `(${col.title},eq,${search.query.trim()})` |
||||||
|
} |
||||||
|
return where |
||||||
|
}) |
||||||
|
|
||||||
|
// actions
|
||||||
|
|
||||||
|
return { |
||||||
|
view, |
||||||
|
meta, |
||||||
|
isLocked, |
||||||
|
$api, |
||||||
|
search, |
||||||
|
xWhere, |
||||||
|
} |
||||||
|
}) |
||||||
|
|
||||||
|
export { useProvideSmartsheetStore } |
||||||
|
|
||||||
|
export function useSmartsheetStoreOrThrow() { |
||||||
|
const smartsheetStore = useSmartsheetStore() |
||||||
|
if (smartsheetStore == null) throw new Error('Please call `useSmartsheetStore` on the appropriate parent component') |
||||||
|
return smartsheetStore |
||||||
|
} |
||||||
@ -0,0 +1,112 @@ |
|||||||
|
import { Modal } from 'ant-design-vue' |
||||||
|
import type { LinkToAnotherRecordType, TableType } from 'nocodb-sdk' |
||||||
|
import { UITypes } from 'nocodb-sdk' |
||||||
|
import { useToast } from 'vue-toastification' |
||||||
|
import { useProject } from './useProject' |
||||||
|
import { TabType } from '~/composables/useTabs' |
||||||
|
import { extractSdkResponseErrorMsg } from '~/utils' |
||||||
|
import { useNuxtApp } from '#app' |
||||||
|
|
||||||
|
export function useTable(onTableCreate?: (tableMeta: TableType) => void) { |
||||||
|
const table = reactive<{ title: string; table_name: string; columns: string[] }>({ |
||||||
|
title: '', |
||||||
|
table_name: '', |
||||||
|
columns: ['id', 'title', 'created_at', 'updated_at'], |
||||||
|
}) |
||||||
|
|
||||||
|
const { $e, $api } = useNuxtApp() |
||||||
|
const toast = useToast() |
||||||
|
const { getMeta, removeMeta } = useMetas() |
||||||
|
const { loadTables } = useProject() |
||||||
|
const { closeTab } = useTabs() |
||||||
|
const { sqlUi, project, tables } = useProject() |
||||||
|
|
||||||
|
const createTable = async () => { |
||||||
|
if (!sqlUi?.value) return |
||||||
|
const columns = sqlUi?.value?.getNewTableColumns().filter((col) => { |
||||||
|
if (col.column_name === 'id' && table.columns.includes('id_ag')) { |
||||||
|
Object.assign(col, sqlUi?.value?.getDataTypeForUiType({ uidt: UITypes.ID }, 'AG')) |
||||||
|
col.dtxp = sqlUi?.value?.getDefaultLengthForDatatype(col.dt) |
||||||
|
col.dtxs = sqlUi?.value?.getDefaultScaleForDatatype(col.dt) |
||||||
|
return true |
||||||
|
} |
||||||
|
return table.columns.includes(col.column_name) |
||||||
|
}) |
||||||
|
|
||||||
|
const tableMeta = await $api.dbTable.create(project?.value?.id as string, { |
||||||
|
...table, |
||||||
|
columns, |
||||||
|
}) |
||||||
|
|
||||||
|
onTableCreate?.(tableMeta) |
||||||
|
} |
||||||
|
|
||||||
|
watch( |
||||||
|
() => table.title, |
||||||
|
(title) => { |
||||||
|
table.table_name = `${project?.value?.prefix || ''}${title}` |
||||||
|
}, |
||||||
|
) |
||||||
|
|
||||||
|
const generateUniqueTitle = () => { |
||||||
|
let c = 1 |
||||||
|
while (tables?.value?.some((t) => t.title === `Sheet${c}`)) { |
||||||
|
c++ |
||||||
|
} |
||||||
|
table.title = `Sheet${c}` |
||||||
|
} |
||||||
|
|
||||||
|
const deleteTable = (table: TableType) => { |
||||||
|
$e('c:table:delete') |
||||||
|
// 'Click Submit to Delete The table'
|
||||||
|
Modal.confirm({ |
||||||
|
title: `Click Yes to Delete The table : ${table.title}`, |
||||||
|
okText: 'Yes', |
||||||
|
okType: 'danger', |
||||||
|
cancelText: 'No', |
||||||
|
async onOk() { |
||||||
|
try { |
||||||
|
const meta = (await getMeta(table.id as string)) as TableType |
||||||
|
const relationColumns = meta?.columns?.filter((c) => c.uidt === UITypes.LinkToAnotherRecord) |
||||||
|
|
||||||
|
if (relationColumns?.length) { |
||||||
|
const refColMsgs = await Promise.all( |
||||||
|
relationColumns.map(async (c, i) => { |
||||||
|
const refMeta = (await getMeta( |
||||||
|
(c?.colOptions as LinkToAnotherRecordType)?.fk_related_model_id as string, |
||||||
|
)) as TableType |
||||||
|
return `${i + 1}. ${c.title} is a LinkToAnotherRecord of ${(refMeta && refMeta.title) || c.title}` |
||||||
|
}), |
||||||
|
) |
||||||
|
toast.info( |
||||||
|
h('div', { |
||||||
|
innerHTML: `<div style="padding:10px 4px">Unable to delete tables because of the following.
|
||||||
|
<br><br>${refColMsgs.join('<br>')}<br><br> |
||||||
|
Delete them & try again</div>`,
|
||||||
|
}), |
||||||
|
) |
||||||
|
return |
||||||
|
} |
||||||
|
|
||||||
|
await $api.dbTable.delete(table?.id as string) |
||||||
|
|
||||||
|
closeTab({ |
||||||
|
type: TabType.TABLE, |
||||||
|
id: table.id, |
||||||
|
title: table.title, |
||||||
|
}) |
||||||
|
|
||||||
|
await loadTables() |
||||||
|
|
||||||
|
removeMeta(table.id as string) |
||||||
|
toast.info(`Deleted table ${table.title} successfully`) |
||||||
|
$e('a:table:delete') |
||||||
|
} catch (e: any) { |
||||||
|
toast.error(await extractSdkResponseErrorMsg(e)) |
||||||
|
} |
||||||
|
}, |
||||||
|
}) |
||||||
|
} |
||||||
|
|
||||||
|
return { table, createTable, generateUniqueTitle, tables, project, deleteTable } |
||||||
|
} |
||||||
@ -1,52 +0,0 @@ |
|||||||
import type { TableType } from 'nocodb-sdk' |
|
||||||
import { UITypes } from 'nocodb-sdk' |
|
||||||
import { useProject } from './useProject' |
|
||||||
import { useNuxtApp } from '#app' |
|
||||||
|
|
||||||
export function useTableCreate(onTableCreate?: (tableMeta: TableType) => void) { |
|
||||||
const table = reactive<{ title: string; table_name: string; columns: string[] }>({ |
|
||||||
title: '', |
|
||||||
table_name: '', |
|
||||||
columns: ['id', 'title', 'created_at', 'updated_at'], |
|
||||||
}) |
|
||||||
|
|
||||||
const { sqlUi, project, tables } = useProject() |
|
||||||
const { $api } = useNuxtApp() |
|
||||||
|
|
||||||
const createTable = async () => { |
|
||||||
if (!sqlUi?.value) return |
|
||||||
const columns = sqlUi?.value?.getNewTableColumns().filter((col) => { |
|
||||||
if (col.column_name === 'id' && table.columns.includes('id_ag')) { |
|
||||||
Object.assign(col, sqlUi?.value?.getDataTypeForUiType({ uidt: UITypes.ID }, 'AG')) |
|
||||||
col.dtxp = sqlUi?.value?.getDefaultLengthForDatatype(col.dt) |
|
||||||
col.dtxs = sqlUi?.value?.getDefaultScaleForDatatype(col.dt) |
|
||||||
return true |
|
||||||
} |
|
||||||
return table.columns.includes(col.column_name) |
|
||||||
}) |
|
||||||
|
|
||||||
const tableMeta = await $api.dbTable.create(project?.value?.id as string, { |
|
||||||
...table, |
|
||||||
columns, |
|
||||||
}) |
|
||||||
|
|
||||||
onTableCreate?.(tableMeta) |
|
||||||
} |
|
||||||
|
|
||||||
watch( |
|
||||||
() => table.title, |
|
||||||
(title) => { |
|
||||||
table.table_name = `${project?.value?.prefix || ''}${title}` |
|
||||||
}, |
|
||||||
) |
|
||||||
|
|
||||||
const generateUniqueTitle = () => { |
|
||||||
let c = 1 |
|
||||||
while (tables?.value?.some((t) => t.title === `Sheet${c}`)) { |
|
||||||
c++ |
|
||||||
} |
|
||||||
table.title = `Sheet${c}` |
|
||||||
} |
|
||||||
|
|
||||||
return { table, createTable, generateUniqueTitle, tables, project } |
|
||||||
} |
|
||||||
@ -0,0 +1,35 @@ |
|||||||
|
import { UITypes } from 'nocodb-sdk' |
||||||
|
|
||||||
|
export const getSortDirectionOptions = (uidt: UITypes) => { |
||||||
|
switch (uidt) { |
||||||
|
case UITypes.Year: |
||||||
|
case UITypes.Number: |
||||||
|
case UITypes.Decimal: |
||||||
|
case UITypes.Rating: |
||||||
|
case UITypes.Count: |
||||||
|
case UITypes.AutoNumber: |
||||||
|
case UITypes.Time: |
||||||
|
case UITypes.Currency: |
||||||
|
case UITypes.Percent: |
||||||
|
case UITypes.Duration: |
||||||
|
case UITypes.PhoneNumber: |
||||||
|
case UITypes.Date: |
||||||
|
case UITypes.DateTime: |
||||||
|
case UITypes.CreateTime: |
||||||
|
case UITypes.LastModifiedTime: |
||||||
|
return [ |
||||||
|
{ text: '1 → 9', value: 'asc' }, |
||||||
|
{ text: '9 → 1', value: 'desc' }, |
||||||
|
] |
||||||
|
case UITypes.Checkbox: |
||||||
|
return [ |
||||||
|
{ text: '▢ → ✓', value: 'asc' }, |
||||||
|
{ text: '✓ → ▢', value: 'desc' }, |
||||||
|
] |
||||||
|
default: |
||||||
|
return [ |
||||||
|
{ text: 'A → Z', value: 'asc' }, |
||||||
|
{ text: 'Z → A', value: 'desc' }, |
||||||
|
] |
||||||
|
} |
||||||
|
} |
||||||
Loading…
Reference in new issue