Browse Source

chore(gui-v2): fix eslint issues

# What's changed?

* transform some components to script setup
* fix linting issues
pull/2831/head
braks 2 years ago
parent
commit
6b447ceb38
  1. 2
      packages/nc-gui-v2/components/cell/Duration.vue
  2. 97
      packages/nc-gui-v2/components/cell/JsonEditableCell.vue
  3. 18
      packages/nc-gui-v2/components/cell/Time.vue
  4. 31
      packages/nc-gui-v2/components/dlg/TableCreate.vue
  5. 5
      packages/nc-gui-v2/components/smartsheet-header/VirtualCellIcon.vue
  6. 74
      packages/nc-gui-v2/components/smartsheet-toolbar/LockMenu.vue
  7. 12
      packages/nc-gui-v2/components/smartsheet-toolbar/MoreActions.vue
  8. 4
      packages/nc-gui-v2/components/smartsheet-toolbar/SortListMenu.vue
  9. 5
      packages/nc-gui-v2/components/virtual-cell/components/ListChildItems.vue
  10. 6
      packages/nc-gui-v2/components/virtual-cell/components/ListChildItemsModal.vue
  11. 3
      packages/nc-gui-v2/components/virtual-cell/components/ListItems.vue
  12. 7
      packages/nc-gui-v2/composables/useViewCreate.ts
  13. 6
      packages/nc-gui-v2/plugins/i18n.ts

2
packages/nc-gui-v2/components/cell/Duration.vue

@ -66,7 +66,7 @@ const submitDuration = () => {
@keypress="checkDurationFormat($event)"
@keydown.enter="submitDuration"
/>
<div v-if="showWarningMessage == true" class="duration-warning">
<div v-if="showWarningMessage" class="duration-warning">
<!-- TODO: i18n -->
Please enter a number
</div>

97
packages/nc-gui-v2/components/cell/JsonEditableCell.vue

@ -1,66 +1,47 @@
<script>
import MonacoJsonObjectEditor from '@/components/monaco/MonacoJsonObjectEditor'
const editEnabled = inject < boolean > 'editEnabled'
<script lang="ts" setup>
import MonacoJsonObjectEditor from '@/components/monaco/Editor.vue'
import { inject } from '#imports'
export default {
name: 'JsonEditableCell',
components: { MonacoJsonObjectEditor },
props: {
value: [String, Object],
isForm: Boolean,
},
data: () => ({
localState: '',
expand: false,
isValid: true,
error: undefined,
}),
computed: {
parentListeners() {
const $listeners = {}
interface Props {
modelValue: string | Record<string, any>
isForm: boolean
}
if (this.$listeners.blur) {
$listeners.blur = this.$listeners.blur
}
if (this.$listeners.focus) {
$listeners.focus = this.$listeners.focus
}
const props = defineProps<Props>()
return $listeners
},
},
watch: {
value(val) {
try {
this.localState = typeof val === 'string' ? JSON.parse(val) : val
} catch (e) {
// ignore parse error for invalid JSON
}
},
localState(val) {
if (this.isForm) {
this.$emit('input', JSON.stringify(val))
}
},
},
created() {
try {
this.localState = typeof this.value === 'string' ? JSON.parse(this.value) : this.value
} catch (e) {
// ignore parse error for invalid JSON
const emits = defineEmits(['update:modelValue', 'cancel'])
const editEnabled = inject('editEnabled')
let expand = $ref(false)
let isValid = $ref(true)
let error = $ref()
const localState = computed({
get: () => (typeof props.modelValue === 'string' ? JSON.parse(props.modelValue) : props.modelValue),
set: (val) => {
if (props.isForm) {
emits('update:modelValue', JSON.stringify(val))
}
},
mounted() {},
methods: {
save() {
this.expand = false
this.$emit('input', JSON.stringify(this.localState))
},
validate(n, e) {
this.isValid = n
this.error = e
},
},
})
function save() {
expand = false
emits('update:modelValue', JSON.stringify(props.modelValue))
}
function validate(n: boolean, e: any) {
isValid = n
error = e
}
</script>
<script lang="ts">
export default {
name: 'JsonEditableCell',
}
</script>

18
packages/nc-gui-v2/components/cell/Time.vue

@ -1,17 +1,27 @@
<script setup lang="ts">
import { inject } from 'vue'
interface Props {
modelValue: any
}
const props = defineProps<Props>()
const emits = defineEmits(['update:modelValue', 'save'])
const vModel = useVModel(props, 'modelValue', emits)
const editEnabled = inject<boolean>('editEnabled')
</script>
<template>
<v-menu>
<template #activator="{ on }">
<input v-model="localState" class="value" v-on="on" />
<template #activator="{ props: menuProps }">
<input v-model="vModel" class="value" v-bind="menuProps.onClick" />
</template>
<div class="d-flex flex-column justify-center" @click.stop>
<v-time-picker v-model="localState" v-on="parentListeners" />
<v-btn small color="primary" @click="$emit('save')">
<v-time-picker v-model="vModel" />
<v-btn small color="primary" @click="emits('save')">
<!-- Save -->
{{ $t('general.save') }}
</v-btn>

31
packages/nc-gui-v2/components/dlg/TableCreate.vue

@ -1,34 +1,34 @@
<script setup lang="ts">
import { onMounted } from '@vue/runtime-core'
import { useProject, useTableCreate, useTabs } from '#imports'
import type { ComponentPublicInstance } from '@vue/runtime-core'
import { onMounted, useProject, useTableCreate, useTabs } from '#imports'
import { validateTableName } from '~/utils/validation'
const { modelValue = false } = defineProps<{ modelValue?: boolean }>()
interface Props {
modelValue?: boolean
}
const props = defineProps<Props>()
const emit = defineEmits(['update:modelValue', 'create'])
const emit = defineEmits(['update:modelValue'])
const dialogShow = useVModel(props, 'modelValue', emit)
const idTypes = [
{ value: 'AI', text: 'Auto increment number' },
{ value: 'AG', text: 'Auto generated string' },
]
const dialogShow = computed({
get() {
return modelValue
},
set(v) {
emit('update:modelValue', v)
},
})
const valid = ref(false)
const isIdToggleAllowed = ref(false)
const isAdvanceOptVisible = ref(false)
const { addTab } = useTabs()
const { loadTables } = useProject()
const { table, createTable, generateUniqueTitle, tables, project } = useTableCreate(async (table) => {
await loadTables()
addTab({
id: table.id as string,
title: table.title,
@ -49,12 +49,13 @@ const validateDuplicate = (v: string) => {
return (tables?.value || []).every((t) => t.table_name.toLowerCase() !== (v || '').toLowerCase()) || 'Duplicate table name'
}
const inputEl = ref<any>()
const inputEl = ref<ComponentPublicInstance>()
onMounted(() => {
generateUniqueTitle()
nextTick(() => {
const el = inputEl?.value?.$el
const el = inputEl.value?.$el
el?.querySelector('input')?.focus()
el?.querySelector('input')?.select()
})

5
packages/nc-gui-v2/components/smartsheet-header/VirtualCellIcon.vue

@ -1,5 +1,6 @@
<script setup lang="ts">
import { LinkToAnotherRecordType, RelationTypes, UITypes } from "nocodb-sdk";
import type { LinkToAnotherRecordType } from 'nocodb-sdk'
import { RelationTypes, UITypes } from 'nocodb-sdk'
import { ColumnInj } from '~/context'
import GenericIcon from '~icons/mdi/square-rounded'
import HMIcon from '~icons/mdi/table-arrow-right'
@ -13,7 +14,7 @@ const column = inject(ColumnInj)
const icon = computed(() => {
switch (column?.uidt) {
case UITypes.LinkToAnotherRecord:
switch ((<LinkToAnotherRecordType>column?.colOptions)?.type) {
switch ((column?.colOptions as LinkToAnotherRecordType)?.type) {
case RelationTypes.MANY_TO_MANY:
return MMIcon
case RelationTypes.HAS_MANY:

74
packages/nc-gui-v2/components/smartsheet-toolbar/LockMenu.vue

@ -1,32 +1,60 @@
<script>
<script lang="ts" setup>
import { useToast } from 'vue-toastification'
interface Props {
modelValue?: LockType
}
const props = defineProps<Props>()
const emits = defineEmits(['update:modelValue'])
enum LockType {
Personal = 'personal',
Locked = 'locked',
Collaborative = 'collaborative',
}
const vModel = useVModel(props, 'modelValue', emits)
const { $e } = useNuxtApp()
const toast = useToast()
function changeLockType(type: LockType) {
$e('a:grid:lockmenu', { lockType: type })
if (type === 'personal') {
return toast.info('Coming soon', { timeout: 3000 })
}
vModel.value = type
toast.success(`Successfully Switched to ${type} view`, { timeout: 3000 })
}
</script>
<script lang="ts">
export default {
name: 'LockMenu',
props: ['value'],
data: () => ({}),
methods: {
changeLockType(type) {
this.$e('a:grid:lockmenu', { lockType: type })
if (type === 'personal') {
return this.$toast.info('Coming soon').goAway(3000)
}
this.$emit('input', type)
this.$toast.success(`Successfully Switched to ${type} view`).goAway(3000)
},
},
}
</script>
<template>
<v-menu offset-y max-width="350">
<template #activator="{ on }">
<v-icon v-if="value === 'locked'" small class="mx-1 nc-view-lock-menu" v-on="on"> mdi-lock-outline </v-icon>
<v-icon v-else-if="value === 'personal'" small class="mx-1 nc-view-lock-menu" v-on="on"> mdi-account </v-icon>
<v-icon v-else small class="mx-1 nc-view-lock-menu" v-on="on"> mdi-account-group-outline </v-icon>
<template #activator="{ props: menuProps }">
<v-icon v-if="vModel === LockType.Locked" small class="mx-1 nc-view-lock-menu" v-bind="menuProps.onClick">
mdi-lock-outline
</v-icon>
<v-icon v-else-if="vModel === LockType.Personal" small class="mx-1 nc-view-lock-menu" v-bind="menuProps.onClick">
mdi-account
</v-icon>
<v-icon v-else small class="mx-1 nc-view-lock-menu" v-bind="menuProps.onClick"> mdi-account-group-outline </v-icon>
</template>
<v-list maxc-width="350">
<v-list-item two-line class="pb-4" @click="changeLockType('collaborative')">
<v-list-item two-line class="pb-4" @click="changeLockType(LockType.Collaborative)">
<v-list-item-icon class="mr-1 align-self-center">
<v-icon v-if="!value || value === 'collaborative'" small> mdi-check-bold </v-icon>
<v-icon v-if="!vModel || vModel === LockType.Collaborative" small> mdi-check-bold </v-icon>
</v-list-item-icon>
<v-list-item-content class="pb-1">
<v-list-item-title>
@ -39,9 +67,9 @@ export default {
</v-list-item-subtitle>
</v-list-item-content>
</v-list-item>
<v-list-item two-line class="pb-4" @click="changeLockType('locked')">
<v-list-item two-line class="pb-4" @click="changeLockType(LockType.Locked)">
<v-list-item-icon class="mr-1 align-self-center">
<v-icon v-if="value === 'locked'" small> mdi-check-bold </v-icon>
<v-icon v-if="vModel === LockType.Locked" small> mdi-check-bold </v-icon>
</v-list-item-icon>
<v-list-item-content class="pb-1">
@ -56,9 +84,9 @@ export default {
<span class="caption mt-3"><v-icon class="mr-1 mt-n1" x-small color="#fcb401"> mdi-star</v-icon>Locked view.</span>
</v-list-item-content>
</v-list-item>
<v-list-item three-line @click="changeLockType('personal')">
<v-list-item three-line @click="changeLockType(LockType.Personal)">
<v-list-item-icon class="mr-1 align-self-center">
<v-icon v-if="value === 'personal'" small> mdi-check-bold </v-icon>
<v-icon v-if="vModel === LockType.Personal" small> mdi-check-bold </v-icon>
</v-list-item-icon>
<v-list-item-content>

12
packages/nc-gui-v2/components/smartsheet-toolbar/MoreActions.vue

@ -13,7 +13,6 @@ export default {
name: 'ExportImport',
components: {
WebhookSlider,
WebhookModal,
ColumnMappingModal,
DropOrSelectFileModal,
},
@ -26,6 +25,7 @@ export default {
isView: Boolean,
reqPayload: Object,
},
emits: ['reload', 'showAdditionalFeatOverlay'],
data() {
return {
importModal: false,
@ -206,19 +206,19 @@ export default {
const v = this.meta && this.meta.columns.find((c) => c.title === col.destCn)
let input = row[col.sourceCn]
// parse potential boolean values
if (v.uidt == UITypes.Checkbox) {
if (v.uidt === UITypes.Checkbox) {
input = input.replace(/["']/g, '').toLowerCase().trim()
if (input == 'false' || input == 'no' || input == 'n') {
if (input === 'false' || input === 'no' || input === 'n') {
input = '0'
} else if (input == 'true' || input == 'yes' || input == 'y') {
} else if (input === 'true' || input === 'yes' || input === 'y') {
input = '1'
}
} else if (v.uidt === UITypes.Number) {
if (input == '') {
if (input === '') {
input = null
}
} else if (v.uidt === UITypes.SingleSelect || v.uidt === UITypes.MultiSelect) {
if (input == '') {
if (input === '') {
input = null
}
}

4
packages/nc-gui-v2/components/smartsheet-toolbar/SortListMenu.vue

@ -62,7 +62,7 @@ watch(
class="caption nc-sort-field-select"
:columns="columns"
@click.stop
@update:modelValue="saveOrUpdate(sort, i)"
@update:model-value="saveOrUpdate(sort, i)"
/>
<v-select
v-model="sort.direction"
@ -73,7 +73,7 @@ watch(
variant="solo"
hide-details
@click.stop
@update:modelValue="saveOrUpdate(sort, i)"
@update:model-value="saveOrUpdate(sort, i)"
/>
<!-- <template #item="{ item }"> -->
<!-- <span class="caption font-weight-regular">{{ item.text }}</span> -->

5
packages/nc-gui-v2/components/virtual-cell/components/ListChildItems.vue

@ -36,6 +36,7 @@ export default {
type: String,
password: String,
},
emits: ['input', 'edit', 'delete', 'unlink', 'newRecord'],
data: () => ({
RelationTypes,
data: null,
@ -121,7 +122,7 @@ export default {
small
class="caption"
color="primary"
@click="$emit('new-record')"
@click="$emit('newRecord')"
>
<v-icon small> mdi-link </v-icon>&nbsp; Link to '{{ meta.title }}'
</v-btn>
@ -129,7 +130,7 @@ export default {
<v-card-text>
<div class="items-container pt-2 mb-n4" :class="{ 'mx-n2': isForm }">
<div v-if="!readOnly && (isPublic || _isUIAllowed('xcDatatableEditable'))" class="text-right mb-2 mt-n2 mx-2">
<v-btn v-if="isForm" x-small class="caption" color="primary" outlined @click="$emit('new-record')">
<v-btn v-if="isForm" x-small class="caption" color="primary" outlined @click="$emit('newRecord')">
<v-icon x-small> mdi-link </v-icon>&nbsp; Link to '{{ meta.title }}'
</v-btn>
</div>

6
packages/nc-gui-v2/components/virtual-cell/components/ListChildItemsModal.vue

@ -1,5 +1,5 @@
<script>
import ListChildItems from '~/components/project/spreadsheet/components/virtualCell/components/ListChildItems'
import ListChildItems from './ListChildItems.vue'
export default {
name: 'ListChildItemsModal',
@ -32,6 +32,7 @@ export default {
rowId: [String, Number],
column: Object,
},
emits: ['input'],
data: () => ({
data: null,
page: 1,
@ -50,7 +51,7 @@ export default {
methods: {
async loadData() {
if (this.$refs && this.$refs.child) {
this.$refs.child.loadData()
await this.$refs.child.loadData()
}
},
},
@ -79,7 +80,6 @@ export default {
:read-only="readOnly"
:is-public="isPublic"
:column="column"
v-on="$listeners"
/>
</v-dialog>
</template>

3
packages/nc-gui-v2/components/virtual-cell/components/ListItems.vue

@ -32,6 +32,7 @@ export default {
column: Object,
rowId: [Number, String],
},
emits: ['input', 'add', 'addNewRecord'],
data: () => ({
data: null,
page: 1,
@ -127,7 +128,7 @@ export default {
<v-spacer />
<v-icon small class="mr-1" @click="loadData()"> mdi-reload </v-icon>
<v-btn v-if="!isPublic" small class="caption mr-2" color="primary" @click="$emit('add-new-record')">
<v-btn v-if="!isPublic" small class="caption mr-2" color="primary" @click="$emit('addNewRecord')">
<v-icon small> mdi-plus </v-icon>&nbsp; New Record
</v-btn>
</v-card-title>

7
packages/nc-gui-v2/composables/useViewCreate.ts

@ -3,7 +3,7 @@ import { ViewTypes } from 'nocodb-sdk'
import type { Ref } from 'vue'
import { useToast } from 'vue-toastification'
import { useNuxtApp } from '#app'
import useMetas from '~/composables/useMetas'
// import useMetas from '~/composables/useMetas'
export default (meta: Ref<TableType>, onViewCreate?: (viewMeta: any) => void) => {
const view = reactive<{ title: string; type?: ViewTypes }>({
@ -14,7 +14,8 @@ export default (meta: Ref<TableType>, onViewCreate?: (viewMeta: any) => void) =>
const { $api } = useNuxtApp()
const toast = useToast()
const { metas } = useMetas()
// unused
// const { metas } = useMetas()
const createView = async (viewType: ViewTypes, selectedViewId = null) => {
loading.value = true
@ -53,7 +54,7 @@ export default (meta: Ref<TableType>, onViewCreate?: (viewMeta: any) => void) =>
}
toast.success('View created successfully')
onViewCreate?.(data)
} catch (e) {
} catch (e: any) {
toast.error(e.message)
}

6
packages/nc-gui-v2/plugins/i18n.ts

@ -1,10 +1,10 @@
import { defineNuxtPlugin } from 'nuxt/app'
import { createI18n } from 'vue-i18n'
import type en from '~/lang/en.json'
// import type en from '~/lang/en.json'
// Type-define 'en' as the master schema for the resource
type MessageSchema = typeof en
// todo: Type-define 'en' as the master schema for the resource
// type MessageSchema = typeof en
export const createI18nPlugin = async () =>
createI18n({

Loading…
Cancel
Save