多维表格
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

130 lines
3.5 KiB

<template>
<v-dialog v-model="localState" max-width="500">
<v-card class="elevation-20">
<v-card-title class="grey darken-2 subheading" style="height:30px" />
<v-card-text class="pt-4 pl-4">
<p class="headline">
{{ $t('general.create') }} <span class="text-capitalize">{{ typeAlias }}</span> {{ $t('objects.view') }}
</p>
<v-form ref="form" v-model="valid" @submit.prevent="createView">
<!-- label="View Name" -->
<v-text-field
ref="name"
v-model="view_name"
:label="$t('labels.viewName')"
:rules="[v=>!!v || 'View name required', v => viewsList.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('input',false)">
{{ $t('general.cancel') }}
</v-btn>
<v-btn
small
:loading="loading"
class="primary "
:disabled="!valid"
@click="createView"
>
{{ $t('general.submit') }}
</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
</template>
<script>
import { ViewTypes } from 'nocodb-sdk'
export default {
name: 'CreateViewDialog',
props: ['value', 'nodes', 'table', '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()
})
},
methods: {
async createView() {
if (!this.valid) {
return
feat: kanban view (#903) * feat: enable kanban button on nav drawer Signed-off-by: Wing-Kam Wong <wingkwong.code@gmail.com> * refak: move conditions to isKanban Signed-off-by: Wing-Kam Wong <wingkwong.code@gmail.com> * wip: add basic layout & integrate with view data Signed-off-by: Wing-Kam Wong <wingkwong.code@gmail.com> * fix: add missing components Signed-off-by: Wing-Kam Wong <wingkwong.code@gmail.com> * feat: emit expandForm Signed-off-by: Wing-Kam Wong <wingkwong.code@gmail.com> * feat: add boolean cell for kanban card Signed-off-by: Wing-Kam Wong <wingkwong.code@gmail.com> * fix: add :disable to boollean cell Signed-off-by: Wing-Kam Wong <wingkwong.code@gmail.com> * style: kanban card Signed-off-by: Wing-Kam Wong <wingkwong.code@gmail.com> * feat: enable kanban share view on drawer Signed-off-by: Wing-Kam Wong <wingkwong.code@gmail.com> * fix: share links Signed-off-by: Wing-Kam Wong <wingkwong.code@gmail.com> * wip: kanban shared page Signed-off-by: Wing-Kam Wong <wingkwong.code@gmail.com> * wip: implement updateBlock logic Signed-off-by: Wing-Kam Wong <wingkwong.code@gmail.com> * wip: reload kanban view after drag n drop Signed-off-by: Wing-Kam Wong <wingkwong.code@gmail.com> * refak: kanban view Signed-off-by: Wing-Kam Wong <wingkwong.code@gmail.com> * fix: update CsvExportImport path Signed-off-by: Wing-Kam Wong <wingkwong.code@gmail.com> * feat: add grouping field for kanban view Signed-off-by: Wing-Kam Wong <wingkwong.code@gmail.com> * feat: add uncategorized stack Signed-off-by: Wing-Kam Wong <wingkwong.code@gmail.com> * style: match stack title color with that of grouping field Signed-off-by: Wing-Kam Wong <wingkwong.code@gmail.com> * style: kanban view Signed-off-by: Wing-Kam Wong <wingkwong.code@gmail.com> * feat: implement groupingField change logic Signed-off-by: Wing-Kam Wong <wingkwong.code@gmail.com> * feat: watch data prop change Signed-off-by: Wing-Kam Wong <wingkwong.code@gmail.com> * style: fix center title n padding Signed-off-by: Wing-Kam Wong <wingkwong.code@gmail.com> * wip: add footer Signed-off-by: Wing-Kam Wong <wingkwong.code@gmail.com> * test(cypress): include kanban viewTest Signed-off-by: Wing-Kam Wong <wingkwong.code@gmail.com> * feat: add insertNewRow logic to kanban view Signed-off-by: Wing-Kam Wong <wingkwong.code@gmail.com> * feat: add new stack column Signed-off-by: Wing-Kam Wong <wingkwong.code@gmail.com> * feat: include loadTableData Signed-off-by: Wing-Kam Wong <wingkwong.code@gmail.com> * fix: reload issue Signed-off-by: Wing-Kam Wong <wingkwong.code@gmail.com> * wip: fetch data using api Signed-off-by: Wing-Kam Wong <wingkwong.code@gmail.com> * feat: add api filtering logic Signed-off-by: Wing-Kam Wong <wingkwong.code@gmail.com> * fix: inconsistent content Signed-off-by: Wing-Kam Wong <wingkwong.code@gmail.com> * chore: merge from upstream master Signed-off-by: Wing-Kam Wong <wingkwong.code@gmail.com> * chore: hide new stack button Signed-off-by: Wing-Kam Wong <wingkwong.code@gmail.com> * feat: populate the grouping field to new record for kanban Signed-off-by: Wing-Kam Wong <wingkwong.code@gmail.com> * chore: hide pagination in kanban view Signed-off-by: Wing-Kam Wong <wingkwong.code@gmail.com> * style: display add new record as an icon Signed-off-by: Wing-Kam Wong <wingkwong.code@gmail.com> * feat: add numbers of records under each stack Signed-off-by: Wing-Kam Wong <wingkwong.code@gmail.com> * fix: missing uncategorized records Signed-off-by: Wing-Kam Wong <wingkwong.code@gmail.com> * fix: kanban preset value issue Signed-off-by: Wing-Kam Wong <wingkwong.code@gmail.com> * fix: kanban layout & 0 record issue Signed-off-by: Wing-Kam Wong <wingkwong.code@gmail.com> * chore: set toast position Signed-off-by: Wing-Kam Wong <wingkwong.code@gmail.com> * fix: lint Signed-off-by: Wing-Kam Wong <wingkwong.code@gmail.com> * feat: add v-skeleton-loader Signed-off-by: Wing-Kam Wong <wingkwong.code@gmail.com> * chore: rm toast if there is no grouping column Signed-off-by: Wing-Kam Wong <wingkwong.code@gmail.com> * fix: remove :loading Signed-off-by: Wing-Kam Wong <wingkwong.code@gmail.com> * refak: move kanban logic to rowsXcDataTable Signed-off-by: Wing-Kam Wong <wingkwong.code@gmail.com> * refak: update kanban block logic Signed-off-by: Wing-Kam Wong <wingkwong.code@gmail.com> * refak: remove unused code Signed-off-by: Wing-Kam Wong <wingkwong.code@gmail.com> * fix: update kanban ui for status and grouping field Signed-off-by: Wing-Kam Wong <wingkwong.code@gmail.com> * refak: move set kanban logic to rowsXcDataTable Signed-off-by: Wing-Kam Wong <wingkwong.code@gmail.com> * fix: new kanban record issue Signed-off-by: Wing-Kam Wong <wingkwong.code@gmail.com> * feat: infinite scrolling on kanban view Signed-off-by: Wing-Kam Wong <wingkwong.code@gmail.com> * refak: remove updateKanbanBlock Signed-off-by: Wing-Kam Wong <wingkwong.code@gmail.com> * fix: splash issue Signed-off-by: Wing-Kam Wong <wingkwong.code@gmail.com> * fix: empty kanban view Signed-off-by: Wing-Kam Wong <wingkwong.code@gmail.com> * chore: move skeleton-loader to rowsXcDataTable.vue Signed-off-by: Wing-Kam Wong <wingkwong.code@gmail.com> * fix: avoid reload after saving in expanded form Signed-off-by: Wing-Kam Wong <wingkwong.code@gmail.com> * refak: remove unused clonedBlock Signed-off-by: Wing-Kam Wong <wingkwong.code@gmail.com> * fix: handle composite primary key Signed-off-by: Wing-Kam Wong <wingkwong.code@gmail.com> * fix: kanban refresh issue Signed-off-by: Wing-Kam Wong <wingkwong.code@gmail.com> * fix: update reload logic for kanban Signed-off-by: Wing-Kam Wong <wingkwong.code@gmail.com> * feat: add total number of records for each kanban stack Signed-off-by: Wing-Kam Wong <wingkwong.code@gmail.com> * fix: kanban display issue Signed-off-by: Wing-Kam Wong <wingkwong.code@gmail.com> * wip: kanban share view Signed-off-by: Wing-Kam Wong <wingkwong.code@gmail.com> * fix: insert new row issue Signed-off-by: Wing-Kam Wong <wingkwong.code@gmail.com> * fix: missing data after reload Signed-off-by: Wing-Kam Wong <wingkwong.code@gmail.com> * chore: temporarily disable share view for kanban view Signed-off-by: Wing-Kam Wong <wingkwong.code@gmail.com> * chore: disable kanban viewTest temporarily Signed-off-by: Wing-Kam Wong <wingkwong.code@gmail.com>
3 years ago
}
this.loading = true
try {
let data
switch (this.show_as) {
case ViewTypes.GRID:
data = (await this.$api.dbView.gridCreate(this.meta.id, {
title: this.view_name,
copy_from_id: this.selectedViewId
}))
break
case ViewTypes.GALLERY:
data = (await this.$api.dbView.galleryCreate(this.meta.id, {
title: this.view_name,
copy_from_id: this.selectedViewId
}))
break
case ViewTypes.FORM:
data = (await this.$api.dbView.formCreate(this.meta.id, {
title: this.view_name,
copy_from_id: this.selectedViewId
}))
break
}
this.$toast.success('View created successfully').goAway(3000)
this.$emit('created', data)
this.$emit('input', false)
} catch (e) {
this.$toast.error(e.message).goAway(3000)
}
this.loading = false
}
}
}
</script>
<style scoped>
</style>