Browse Source

refactor(gui): useCellUrlConfig composable

pull/3381/head
Denis 2 years ago
parent
commit
1615ee0eab
  1. 15
      packages/nc-gui/components/cell/Url.vue
  2. 1
      packages/nc-gui/composables/index.ts
  3. 48
      packages/nc-gui/composables/useCellUrlConfig.ts
  4. 7
      packages/nc-gui/context/index.ts
  5. 21
      packages/nc-gui/pages/[projectType]/view/[viewId].vue

15
packages/nc-gui/components/cell/Url.vue

@ -2,7 +2,7 @@
import type { VNodeRef } from '@vue/runtime-core'
import { message } from 'ant-design-vue'
import { useI18n } from 'vue-i18n'
import { CellUrlConfigInj, CellUrlDisableOverlayInj, ColumnInj, EditModeInj, computed, inject, isValidURL, ref } from '#imports'
import { CellUrlDisableOverlayInj, ColumnInj, EditModeInj, computed, inject, isValidURL, ref } from '#imports'
import MiCircleWarning from '~icons/mi/circle-warning'
const { modelValue: value } = defineProps<Props>()
@ -16,7 +16,6 @@ const column = inject(ColumnInj)!
const editEnabled = inject(EditModeInj)!
const config = inject(CellUrlConfigInj, {})
const disableOverlay = inject(CellUrlDisableOverlayInj)
// Used in the logic of when to display error since we are not storing the url if its not valid
const localState = ref(value)
@ -41,17 +40,7 @@ const url = computed(() => {
return `https://${value}`
})
const urlOptions = computed(() => {
const { behavior, overlay, rules } = config
const options = { behavior, overlay }
if (rules && (!behavior || !overlay)) {
for (const [regex, value] of rules) {
if (url.value.match(regex)) return Object.assign(options, value)
}
}
return options
})
const urlOptions = useCellUrlConfig(url)
const focus: VNodeRef = (el) => (el as HTMLInputElement)?.focus()

1
packages/nc-gui/composables/index.ts

@ -24,3 +24,4 @@ export * from './useSmartsheetStore'
export * from './useLTARStore'
export * from './useExpandedFormStore'
export * from './useSharedFormViewStore'
export * from './useCellUrlConfig'

48
packages/nc-gui/composables/useCellUrlConfig.ts

@ -0,0 +1,48 @@
import type { ComputedRef } from 'vue'
import { useRoute } from '#imports'
export interface CellUrlOptions {
behavior?: string
overlay?: string
}
const parseUrlRules = (serialized: string | undefined): Array<[RegExp, CellUrlOptions]> | undefined => {
if (!serialized) return undefined
try {
const rules: Array<[RegExp, {}]> = Object.entries(JSON.parse(serialized)).map(([key, value]) => [
new RegExp(key),
value as {},
])
return rules
} catch (err) {
console.error(err)
return undefined
}
}
const [useProvideCellUrlConfig, useCellUrlGeneralConfig] = useInjectionState(() => {
const route = useRoute()
return {
behavior: route.query.url_behavior as string | undefined,
overlay: route.query.url_overlay as string | undefined,
rules: parseUrlRules(route.query.url_rules as string),
}
}, 'cell-url-config')
export { useProvideCellUrlConfig }
export function useCellUrlConfig(url: ComputedRef<string>) {
const config = useCellUrlGeneralConfig()
if (!config) return undefined
return computed(() => {
const { behavior, overlay, rules } = config
const options = { behavior, overlay }
if (rules && (!behavior || !overlay)) {
for (const [regex, value] of rules) {
if (url.value.match(regex)) return Object.assign(options, value)
}
}
return options
})
}

7
packages/nc-gui/context/index.ts

@ -5,11 +5,6 @@ import type { useViewData } from '#imports'
import type { Row } from '~/composables'
import type { TabItem } from '~/composables/useTabs'
export interface CellUrlOptions {
behavior?: string
overlay?: string
}
export const ActiveCellInj: InjectionKey<Ref<boolean>> = Symbol('active-cell')
export const IsPublicInj: InjectionKey<Ref<boolean>> = Symbol('is-public')
export const RowInj: InjectionKey<Ref<Row>> = Symbol('row')
@ -32,6 +27,4 @@ export const FieldsInj: InjectionKey<Ref<any[]>> = Symbol('fields-injection')
export const ViewListInj: InjectionKey<Ref<ViewType[]>> = Symbol('view-list-injection')
export const EditModeInj: InjectionKey<Ref<boolean>> = Symbol('edit-mode-injection')
export const SharedViewPasswordInj: InjectionKey<Ref<string | null>> = Symbol('shared-view-password-injection')
export const CellUrlConfigInj: InjectionKey<CellUrlOptions & { rules?: Array<[RegExp, CellUrlOptions]> }> =
Symbol('cell-url-config')
export const CellUrlDisableOverlayInj: InjectionKey<Ref<boolean>> = Symbol('cell-url-disable-url')

21
packages/nc-gui/pages/[projectType]/view/[viewId].vue

@ -1,7 +1,6 @@
<script setup lang="ts">
import { message } from 'ant-design-vue'
import {
CellUrlConfigInj,
ReadonlyInj,
ReloadViewDataHookInj,
createEventHook,
@ -9,6 +8,7 @@ import {
extractSdkResponseErrorMsg,
provide,
ref,
useProvideCellUrlConfig,
useRoute,
useSharedView,
} from '#imports'
@ -25,24 +25,7 @@ const reloadEventHook = createEventHook<void>()
provide(ReloadViewDataHookInj, reloadEventHook)
provide(ReadonlyInj, true)
const parseUrlRules = (serialized: string | undefined) => {
if (!serialized) return undefined
try {
const rules: Array<[RegExp, {}]> = Object.entries(JSON.parse(serialized)).map(([key, value]) => [
new RegExp(key),
value as {},
])
return rules
} catch (err) {
console.error(err)
return undefined
}
}
provide(CellUrlConfigInj, {
behavior: route.query.url_behavior as string,
overlay: route.query.url_overlay as string,
rules: parseUrlRules(route.query.url_rules as string),
})
useProvideCellUrlConfig()
const { loadSharedView } = useSharedView()
const showPassword = ref(false)

Loading…
Cancel
Save