github
/
nocodb
mirror of https://github.com/nocodb/nocodb
1
0
Fork 0
Code Issues Releases Wiki Activity
Browse Source

fix(gui-v2): directive usage warnings

pull/3211/head
braks 2 years ago
parent
a0bcf49b24
commit
69cbf765e7
3 changed files with 87 additions and 59 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 11
      packages/nc-gui-v2/components/dlg/QuickImport.vue
  2. 104
      packages/nc-gui-v2/pages/[projectType]/[projectId]/index/index.vue
  3. 23
      packages/nc-gui-v2/pages/[projectType]/[projectId]/index/index/index.vue

11
packages/nc-gui-v2/components/dlg/QuickImport.vue
Unescape View File

@ -24,9 +24,10 @@ interface Props {
modelValue: boolean
importType: 'csv' | 'json' | 'excel'
importOnly: boolean
files?: Record<string, any>[]
}
const { importType, importOnly, ...rest } = defineProps<Props>()
const { importType, importOnly, files: initialFiles = [], ...rest } = defineProps<Props>()
const emit = defineEmits(['update:modelValue'])
@ -53,7 +54,7 @@ const templateEditorModal = ref(false)
const useForm = Form.useForm
const importState = reactive({
fileList: [] as Record<string, any>[],
fileList: initialFiles as Record<string, any>[],
url: '',
jsonEditor: {},
parserConfig: {
@ -69,12 +70,10 @@ const isImportTypeCsv = computed(() => importType === 'csv')
const IsImportTypeExcel = computed(() => importType === 'excel')
const validators = computed(() => {
return {
const validators = computed(() => ({
url: [fieldRequiredValidator, importUrlValidator, isImportTypeCsv.value ? importCsvUrlValidator : importExcelUrlValidator],
maxRowsToParse: [fieldRequiredValidator],
}
})
}))
const { validate, validateInfos } = useForm(importState, validators)

104
packages/nc-gui-v2/pages/[projectType]/[projectId]/index/index.vue
Unescape View File

@ -1,28 +1,24 @@
<script setup lang="ts">
import type { TabItem } from '~/composables'
import { TabMetaInj, provide, ref, useDialog, useNuxtApp, useTabs, useUIPermission } from '#imports'
import DlgTableCreate from '~/components/dlg/TableCreate.vue'
import DlgAirtableImport from '~/components/dlg/AirtableImport.vue'
import DlgQuickImport from '~/components/dlg/QuickImport.vue'
import { TabType } from '~/composables'
import { TabMetaInj, useTabs, useUIPermission } from '#imports'
import MdiAirTableIcon from '~icons/mdi/table-large'
import MdiView from '~icons/mdi/eye-circle-outline'
import MdiAccountGroup from '~icons/mdi/account-group'
const { $e } = useNuxtApp()
const { tabs, activeTabIndex, activeTab, closeTab } = useTabs()
const { isUIAllowed } = useUIPermission()
const tableCreateDialog = ref(false)
const airtableImportDialog = ref(false)
const quickImportDialog = ref(false)
const importType = ref('')
const currentMenu = ref<string[]>(['addORImport'])
provide(TabMetaInj, activeTab)
function openQuickImportDialog(type: string) {
quickImportDialog.value = true
importType.value = type
}
const icon = (tab: TabItem) => {
switch (tab.type) {
case TabType.TABLE:
@ -33,6 +29,46 @@ const icon = (tab: TabItem) => {
return MdiAccountGroup
}
}
function openQuickImportDialog(type: string) {
$e(`a:actions:import-${type}`)
const { close } = useDialog(DlgQuickImport, {
'modelValue': true,
'importType': type,
'onUpdate:modelValue': closeDialog,
})
function closeDialog() {
close(1000)
}
}
function openTableCreateDialog() {
$e('a:actions:create-table')
const { close } = useDialog(DlgTableCreate, {
'modelValue': true,
'onUpdate:modelValue': closeDialog,
})
function closeDialog() {
close(1000)
}
}
function openAirtableImportDialog() {
$e('a:actions:import-airtable')
const { close } = useDialog(DlgAirtableImport, {
'modelValue': true,
'onUpdate:modelValue': closeDialog,
})
function closeDialog() {
close(1000)
}
}
</script>
<template>
@ -60,7 +96,7 @@ const icon = (tab: TabItem) => {
</template>
<a-menu-item-group v-if="isUIAllowed('addTable')">
<a-menu-item key="add-new-table" v-t="['a:actions:create-table']" @click="tableCreateDialog = true">
<a-menu-item key="add-new-table" @click="openTableCreateDialog">
<span class="flex items-center gap-2">
<MdiTable class="text-primary" />
<!-- Add new table -->
@ -70,24 +106,15 @@ const icon = (tab: TabItem) => {
</a-menu-item-group>
<a-menu-item-group title="QUICK IMPORT FROM">
<a-menu-item
v-if="isUIAllowed('airtableImport')"
key="quick-import-airtable"
v-t="['a:actions:import-airtable']"
@click="airtableImportDialog = true"
>
<a-menu-item v-if="isUIAllowed('airtableImport')" key="quick-import-airtable" @click="openAirtableImportDialog">
<span class="flex items-center gap-2">
<MdiTableLarge class="text-primary" />
<!-- TODO: i18n -->
Airtable
</span>
</a-menu-item>
<a-menu-item
v-if="isUIAllowed('csvImport')"
key="quick-import-csv"
v-t="['a:actions:import-csv']"
@click="openQuickImportDialog('csv')"
>
<a-menu-item v-if="isUIAllowed('csvImport')" key="quick-import-csv" @click="openQuickImportDialog('csv')">
<span class="flex items-center gap-2">
<MdiFileDocumentOutline class="text-primary" />
<!-- TODO: i18n -->
@ -95,12 +122,7 @@ const icon = (tab: TabItem) => {
</span>
</a-menu-item>
<a-menu-item
v-if="isUIAllowed('jsonImport')"
key="quick-import-json"
v-t="['a:actions:import-json']"
@click="openQuickImportDialog('json')"
>
<a-menu-item v-if="isUIAllowed('jsonImport')" key="quick-import-json" @click="openQuickImportDialog('json')">
<span class="flex items-center gap-2">
<MdiCodeJson class="text-primary" />
<!-- TODO: i18n -->
@ -108,12 +130,7 @@ const icon = (tab: TabItem) => {
</span>
</a-menu-item>
<a-menu-item
v-if="isUIAllowed('excelImport')"
key="quick-import-excel"
v-t="['a:actions:import-excel']"
@click="openQuickImportDialog('excel')"
>
<a-menu-item v-if="isUIAllowed('excelImport')" key="quick-import-excel" @click="openQuickImportDialog('excel')">
<span class="flex items-center gap-2">
<MdiFileExcel class="text-primary" />
<!-- TODO: i18n -->
@ -124,13 +141,13 @@ const icon = (tab: TabItem) => {
<a-menu-divider class="ma-0 mb-2" />
<a-menu-item
v-if="isUIAllowed('importRequest')"
key="add-new-table"
<a-menu-item v-if="isUIAllowed('importRequest')" key="add-new-table" class="ma-0 mt-3">
<a
v-t="['e:datasource:import-request']"
class="ma-0 mt-3"
href="https://github.com/nocodb/nocodb/issues/2052"
target="_blank"
class="prose-sm pa-0"
>
<a href="https://github.com/nocodb/nocodb/issues/2052" target="_blank" class="prose-sm pa-0">
<span class="flex items-center gap-2">
<MdiOpenInNew class="text-primary" />
<!-- TODO: i18n -->
@ -143,16 +160,11 @@ const icon = (tab: TabItem) => {
</template>
</a-tabs>
</div>
<div class="w-full min-h-[300px] flex-auto">
<NuxtPage />
</div>
</div>
<DlgTableCreate v-if="tableCreateDialog" v-model="tableCreateDialog" />
<DlgQuickImport v-if="quickImportDialog" v-model="quickImportDialog" :import-type="importType" />
<DlgAirtableImport v-if="airtableImportDialog" v-model="airtableImportDialog" />
</div>
</template>

23
packages/nc-gui-v2/pages/[projectType]/[projectId]/index/index/index.vue
Unescape View File

@ -1,12 +1,29 @@
<script lang="ts" setup>
import { ref, useDropZone } from '#imports'
import { ref, useDialog, useDropZone, useNuxtApp } from '#imports'
import DlgQuickImport from '~/components/dlg/QuickImport.vue'
const el = ref<HTMLDivElement>()
const { isOverDropZone } = useDropZone(el, onDrop)
function onDrop() {
console.log('onDrop')
const { $e } = useNuxtApp()
function onDrop(droppedFiles: File[] | null) {
console.log('onDrop', droppedFiles)
}
function openQuickImportDialog(type: string) {
$e(`a:actions:import-${type}`)
const { close } = useDialog(DlgQuickImport, {
'modelValue': true,
'importType': type,
'onUpdate:modelValue': closeDialog,
})
function closeDialog() {
close(1000)
}
}
</script>

Write Preview
Loading…
Cancel
Save