mirror of https://github.com/nocodb/nocodb
Pranav C
2 years ago
5 changed files with 185 additions and 126 deletions
@ -0,0 +1,116 @@ |
|||||||
|
<script setup lang="ts"> |
||||||
|
import { inject } from '@vue/runtime-core' |
||||||
|
import type { TableType, ViewTypes } from 'nocodb-sdk' |
||||||
|
import type { Ref } from '#imports' |
||||||
|
import { MetaInj, ViewListInj } from '~/components' |
||||||
|
import useViewCreate from '~/composables/useViewCreate' |
||||||
|
|
||||||
|
const { modelValue, type, selectedViewId } = defineProps<{ type: ViewTypes; modelValue: boolean; selectedViewId?:string }>() |
||||||
|
|
||||||
|
const emit = defineEmits(['update:modelValue', 'created']) |
||||||
|
|
||||||
|
const valid =ref(false) |
||||||
|
|
||||||
|
const viewList = inject(ViewListInj) |
||||||
|
|
||||||
|
const dialogShow = computed({ |
||||||
|
get() { |
||||||
|
return modelValue |
||||||
|
}, |
||||||
|
set(v) { |
||||||
|
emit('update:modelValue', v) |
||||||
|
}, |
||||||
|
}) |
||||||
|
|
||||||
|
const { view, createView, generateUniqueTitle, loading } = useViewCreate(inject(MetaInj) as Ref<TableType>, (view) => emit('created', view)) |
||||||
|
|
||||||
|
/* 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(); |
||||||
|
}); |
||||||
|
}, */ |
||||||
|
</script> |
||||||
|
|
||||||
|
<template> |
||||||
|
<v-dialog v-model="dialogShow" max-width="600" min-width="400"> |
||||||
|
<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">{{ type }}</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.title" |
||||||
|
:label="$t('labels.viewName')" |
||||||
|
:rules="[ |
||||||
|
(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, selectedViewId)"> |
||||||
|
{{ $t('general.submit') }} |
||||||
|
</v-btn> |
||||||
|
</v-card-actions> |
||||||
|
</v-card> |
||||||
|
</v-dialog> |
||||||
|
</template> |
||||||
|
|
||||||
|
<style scoped></style> |
@ -1,97 +0,0 @@ |
|||||||
<script setup lang="ts"> |
|
||||||
|
|
||||||
|
|
||||||
import { ViewTypes } from "nocodb-sdk"; |
|
||||||
import useViewCreate from "~/composables/useViewCreate"; |
|
||||||
|
|
||||||
const { modelValue, type } = defineProps<{ type: ViewTypes, modelValue: boolean }>(); |
|
||||||
|
|
||||||
const emit = defineEmits(["update:modelValue"]); |
|
||||||
|
|
||||||
const dialogShow = computed({ |
|
||||||
get() { |
|
||||||
return modelValue; |
|
||||||
}, |
|
||||||
set(v) { |
|
||||||
emit("update:modelValue", v); |
|
||||||
} |
|
||||||
}); |
|
||||||
|
|
||||||
const { view, createView, generateUniqueTitle } = useViewCreate(async () => { |
|
||||||
}); |
|
||||||
|
|
||||||
|
|
||||||
/*import inflection from 'inflection' |
|
||||||
|
|
||||||
export default { |
|
||||||
name: 'DlgViewCreate', |
|
||||||
props: ['value'], |
|
||||||
data() { |
|
||||||
return { |
|
||||||
view: { |
|
||||||
name: '', |
|
||||||
}, |
|
||||||
} |
|
||||||
}, |
|
||||||
computed: { |
|
||||||
dialogShow: { |
|
||||||
get() { |
|
||||||
return this.value |
|
||||||
}, |
|
||||||
set(v) { |
|
||||||
this.$emit('input', v) |
|
||||||
}, |
|
||||||
}, |
|
||||||
projectPrefix() { |
|
||||||
return this.$store.getters['project/GtrProjectPrefix'] |
|
||||||
}, |
|
||||||
}, |
|
||||||
watch: { |
|
||||||
'view.alias': function (v) { |
|
||||||
this.$set(this.view, 'name', `${this.projectPrefix || ''}${inflection.underscore(v)}`) |
|
||||||
}, |
|
||||||
}, |
|
||||||
mounted() { |
|
||||||
setTimeout(() => { |
|
||||||
this.$refs.input.$el.querySelector('input').focus() |
|
||||||
}, 100) |
|
||||||
}, |
|
||||||
}*/ |
|
||||||
</script> |
|
||||||
|
|
||||||
<template> |
|
||||||
<v-dialog v-model="dialogShow" 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.title" |
|
||||||
: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> |
|
||||||
|
|
||||||
<style scoped></style> |
|
Loading…
Reference in new issue