Browse Source

refactor(gui-v2): change view create to ant design cmps

pull/2837/head
braks 2 years ago
parent
commit
3cb8e9e606
  1. 116
      packages/nc-gui-v2/components/dlg/ViewCreate.vue
  2. 15
      packages/nc-gui-v2/components/smartsheet/Sidebar.vue

116
packages/nc-gui-v2/components/dlg/ViewCreate.vue

@ -2,7 +2,7 @@
import { inject } from '@vue/runtime-core' import { inject } from '@vue/runtime-core'
import type { TableType } from 'nocodb-sdk' import type { TableType } from 'nocodb-sdk'
import { ViewTypes } from 'nocodb-sdk' import { ViewTypes } from 'nocodb-sdk'
import type { Ref } from '#imports' import type { Ref } from 'vue'
import { ActiveViewInj, MetaInj, ViewListInj } from '~/context' import { ActiveViewInj, MetaInj, ViewListInj } from '~/context'
import useViewCreate from '~/composables/useViewCreate' import useViewCreate from '~/composables/useViewCreate'
@ -13,8 +13,13 @@ const emit = defineEmits(['update:modelValue', 'created'])
const valid = ref(false) const valid = ref(false)
const viewList = inject(ViewListInj) const viewList = inject(ViewListInj)
const activeView = inject(ActiveViewInj) const activeView = inject(ActiveViewInj)
const inputEl = ref()
const form = ref()
const dialogShow = computed({ const dialogShow = computed({
get() { get() {
return modelValue return modelValue
@ -38,8 +43,6 @@ const typeAlias = computed(
}[type]), }[type]),
) )
const inputEl = ref<any>()
const form = ref<any>()
watch( watch(
() => modelValue, () => modelValue,
(v) => { (v) => {
@ -55,93 +58,28 @@ watch(
}, },
) )
/* name: 'CreateViewDialog', const onSubmit = () => {
props: [ const isValid = form.value.validate()
'value', if (isValid) {
'nodes', createView(view.type!)
'table', emit('update:modelValue', false)
'alias', }
'show_as', }
'viewsCount',
'primaryValueColumn',
'meta',
'copyView',
'viewsList',
'selectedViewId',
],
data: () => ({
valid: false,
view_name: '',
loading: false,
queryParams: {},
}),
computed: {
localState: {
get() {
return this.value;
},
set(v) {
this.$emit('input', v);
},
},
typeAlias() {
return {
[ViewTypes.GRID]: 'grid',
[ViewTypes.GALLERY]: 'gallery',
[ViewTypes.FORM]: 'form',
[ViewTypes.KANBAN]: 'kanban',
}[this.show_as];
},
},
mounted() {
try {
if (this.copyView && this.copyView.query_params) {
this.queryParams = { ...JSON.parse(this.copyView.query_params) };
}
} catch (e) {}
this.view_name = `${this.alias || this.table}${this.viewsCount}`;
this.$nextTick(() => {
const input = this.$refs.name.$el.querySelector('input');
input.setSelectionRange(0, this.view_name.length);
input.focus();
});
}, */
</script> </script>
<template> <template>
<v-dialog v-model="dialogShow" max-width="600" min-width="400"> <a-modal v-model:visible="dialogShow">
<v-card class="elevation-20"> <template #title>
<v-card-title class="grey darken-2 subheading" style="height: 30px" /> {{ $t('general.create') }} <span class="text-capitalize">{{ typeAlias }}</span> {{ $t('objects.view') }}
<v-card-text class="pt-4 pl-4"> </template>
<p class="headline"> <a-form ref="form" layout="vertical" :model="valid" name="createView" @finish="createView">
{{ $t('general.create') }} <span class="text-capitalize">{{ typeAlias }}</span> {{ $t('objects.view') }} <a-form-item
</p> :label="$t('labels.viewName')"
<v-form ref="form" v-model="valid" @submit.prevent="createView"> :name="$t('labels.viewName')"
<!-- label="View Name" --> :rules="[{ required: true, message: 'View name required' }]"
<v-text-field >
ref="inputEl" <a-input ref="inputEl" v-model:value="view.title" autofocus />
v-model="view.title" </a-form-item>
:label="$t('labels.viewName')" </a-form>
:rules="[ </a-modal>
(v) => !!v || 'View name required',
(v) => (viewList || []).every((v1) => (v1.alias || v1.title) !== v) || 'View name should be unique',
]"
autofocus
/>
</v-form>
</v-card-text>
<v-card-actions class="pa-4">
<v-spacer />
<v-btn class="" small @click="emit('update:modelValue', false)">
{{ $t('general.cancel') }}
</v-btn>
<v-btn small :loading="loading" class="primary" :disabled="!valid" @click="createView(type, activeView.id)">
{{ $t('general.submit') }}
</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
</template> </template>
<style scoped></style>

15
packages/nc-gui-v2/components/smartsheet/Sidebar.vue

@ -24,9 +24,11 @@ watch(
{ immediate: true }, { immediate: true },
) )
const toggleDrawer = $ref(false) const toggleDrawer = ref(false)
// todo: identify based on meta // todo: identify based on meta
const isView = $ref(false) const isView = ref(false)
const enableDummyFeat = ref(false)
let viewCreateType = $ref<ViewTypes>() let viewCreateType = $ref<ViewTypes>()
@ -80,23 +82,24 @@ function onViewCreate(view: GridType | FormType | KanbanType | GalleryType) {
<v-tooltip bottom> <v-tooltip bottom>
<template #activator="{ props }"> <template #activator="{ props }">
<v-list-item dense class="body-2 nc-create-grid-view" v-bind="props" @click="openCreateViewDlg(ViewTypes.GRID)"> <v-list-item dense class="body-2 nc-create-grid-view" v-bind="props" @click="openCreateViewDlg(ViewTypes.GRID)">
<!-- <v-list-item-icon class="mr-n1"> -->
<component :is="viewIcons[ViewTypes.GRID].icon" :class="`text-${viewIcons[ViewTypes.GRID].color} mr-1`" /> <component :is="viewIcons[ViewTypes.GRID].icon" :class="`text-${viewIcons[ViewTypes.GRID].color} mr-1`" />
<!-- </v-list-item-icon> -->
<v-list-item-title> <v-list-item-title>
<span class="font-weight-regular"> <span class="font-weight-regular">
<!-- Grid --> <!-- Grid -->
{{ $t('objects.viewType.grid') }} {{ $t('objects.viewType.grid') }}
</span> </span>
</v-list-item-title> </v-list-item-title>
<v-spacer /> <v-spacer />
<MdiPlusIcon class="mr-1" /> <MdiPlusIcon class="mr-1" />
<!-- <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('msg.info.addView.grid') }} {{ $t('msg.info.addView.grid') }}
</v-tooltip> </v-tooltip>
<v-tooltip bottom> <v-tooltip bottom>
<template #activator="{ props }"> <template #activator="{ props }">
<v-list-item <v-list-item
@ -154,6 +157,6 @@ function onViewCreate(view: GridType | FormType | KanbanType | GalleryType) {
</div> </div>
</div> </div>
<DlgViewCreate v-if="views" v-model="viewCreateDlg" :type="viewCreateType" @created="onViewCreate" /> <DlgViewCreate v-model="viewCreateDlg" :type="viewCreateType" @created="onViewCreate" />
</a-layout-sider> </a-layout-sider>
</template> </template>

Loading…
Cancel
Save