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

fix: added restrictions

pull/6540/head
DarkPhoenix2704 1 year ago
parent
ce067b0382
commit
b7d4fdd4b0
1 changed files with 241 additions and 258 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. 95
      packages/nc-gui/components/smartsheet/details/Fields.vue

95
packages/nc-gui/components/smartsheet/details/Fields.vue
Unescape View File

@ -343,12 +343,21 @@ const onFieldAdd = (state: TableExplorerColumn) => {
}
const onMove = (_event: { moved: { newIndex: number; oldIndex: number } }) => {
const order = calculateOrderForIndex(_event.moved.newIndex, _event.moved.newIndex < _event.moved.oldIndex)
const field = fields.value[_event.moved.oldIndex]
const order = calculateOrderForIndex(_event.moved.newIndex, _event.moved.newIndex < _event.moved.oldIndex)
const op = ops.value.find((op) => compareCols(op.column, field))
if (op?.op === 'update') {
message.warning('You cannot move field that is being edited. Either save or discard changes first')
return
}
if (op?.op === 'delete') {
message.warning('You cannot move field that is deleted. Either save or discard changes first')
return
}
if (op) {
onFieldUpdate({
...op.column,
@ -556,25 +565,29 @@ onMounted(async () => {
</script>
<template>
<div class="flex flex-col items-center w-full p-4" style="height: calc(100vh - (var(--topbar-height) * 2))">
<div class="h-full max-w-250 w-full">
<div class="flex flex-col">
<div class="w-full p-4">
<div class="max-w-250 w-full mx-auto">
<div class="flex w-full justify-between py-2">
<div class="flex flex-1 items-center gap-2">
<h1 class="font-bold text-base">Fields</h1>
<div class="flex bg-gray-100 items-center mb-1.5 rounded-lg px-2">
<LazyGeneralEmojiPicker :emoji="selectedView?.meta?.icon" readonly size="xsmall">
<template #default>
<GeneralViewIcon :meta="{ type: selectedView?.type }" class="min-w-4.5 text-lg flex" />
<a-input v-model:value="searchQuery" class="!h-8 !px-1 !rounded-lg !w-72" placeholder="Search field">
<template #prefix>
<GeneralIcon icon="search" class="mx-1 h-3.5 w-3.5 text-gray-500 group-hover:text-black" />
</template>
</LazyGeneralEmojiPicker>
<span class="text-sm pl-1.25 text-gray-700">
{{ selectedView?.title }}
</span>
</div>
</div>
<template #suffix>
<GeneralIcon
v-if="searchQuery.length > 0"
icon="close"
class="mx-1 h-3.5 w-3.5 text-gray-500 group-hover:text-black"
@click="searchQuery = ''"
/>
</template>
</a-input>
<div class="flex gap-2">
<NcButton type="secondary" size="small" class="mr-1" :disabled="loading" @click="addField()">
<div class="flex items-center gap-2">
<GeneralIcon icon="plus" class="h-3.5 mb-1 w-3.5" />
New field
</div>
</NcButton>
<NcButton
type="secondary"
size="small"
@ -594,35 +607,12 @@ onMounted(async () => {
</NcButton>
</div>
</div>
<div class="flex justify-between max-w-[651px] pb-2 pr-1">
<a-input v-model:value="searchQuery" class="!h-8 !px-1 !rounded-lg !w-3/6" placeholder="Search field">
<template #prefix>
<GeneralIcon icon="search" class="mx-1 h-3.5 w-3.5 text-gray-500 group-hover:text-black" />
</template>
<template #suffix>
<GeneralIcon
v-if="searchQuery.length > 0"
icon="close"
class="mx-1 h-3.5 w-3.5 text-gray-500 group-hover:text-black"
@click="searchQuery = ''"
/>
</template>
</a-input>
<NcButton type="secondary" size="small" class="mr-1" :disabled="loading" @click="addField()">
<div class="flex items-center gap-2">
<GeneralIcon icon="plus" class="h-3.5 mb-1 w-3.5" />
New field
</div>
</NcButton>
</div>
<div class="flex-grow-1"></div>
<div class="flex gap-x-4">
<div class="flex flex-col flex-1">
<Draggable v-model="fields" item-key="id" class="nc-scrollbar-md overflow-y-scroll" @change="onMove($event)">
<div class="flex flex-row h-full border-1">
<Draggable v-model="fields" item-key="id" class="w-full h-full flex-grow-1" @change="onMove($event)">
<template #item="{ element: field }">
<div
v-if="field.title && field.title.toLowerCase().includes(searchQuery.toLowerCase()) && !field.pv"
class="flex px-2 mr-1 border-x-1 bg-white border-t-1 hover:bg-gray-100 first:rounded-t-lg last:border-b-1 last:rounded-b-lg last:mb-2 pl-5 group"
class="flex px-2 bg-white hover:bg-gray-100 first:rounded-t-lg border-b-1 pl-5 group"
:class="` ${compareCols(field, activeField) ? 'selected' : ''}`"
@click="changeField(field, $event)"
>
@ -678,12 +668,7 @@ onMounted(async () => {
>
Updated field
</NcBadge>
<NcBadge
v-if="!isColumnValid(field)"
color="yellow"
:border="false"
class="ml-1 bg-yellow-50 text-yellow-700"
>
<NcBadge v-if="!isColumnValid(field)" color="yellow" :border="false" class="ml-1 bg-yellow-50 text-yellow-700">
Incomplete configuration
</NcBadge>
</div>
@ -737,7 +722,7 @@ onMounted(async () => {
</template>
<template v-if="displayColumn && displayColumn.title.toLowerCase().includes(searchQuery.toLowerCase())" #header>
<div
class="flex px-2 mr-1 border-x-1 bg-white border-t-1 hover:bg-gray-100 first:rounded-t-lg last:border-b-1 last:rounded-b-lg pl-5 group"
class="flex px-2 bg-white hover:bg-gray-100 border-b-1 first:rounded-tl-lg last:border-b-1 pl-5 group"
:class="` ${compareCols(displayColumn, activeField) ? 'selected' : ''}`"
@click="changeField(displayColumn, $event)"
>
@ -802,12 +787,11 @@ onMounted(async () => {
</div>
</template>
</Draggable>
</div>
<Transition v-if="!changingField" name="slide-fade">
<div class="w-1/3">
<div class="!w-[25rem] border-gray-200 border-l-1 rounded-r-xl h-full">
<SmartsheetColumnEditOrAddProvider
v-if="activeField"
class="w-full border-gray-200 rounded-xl border-1 p-4"
class="w-full p-4"
:column="activeField"
:preload="fieldState(activeField)"
:table-explorer-columns="fields"
@ -816,7 +800,7 @@ onMounted(async () => {
@update="onFieldUpdate"
@add="onFieldAdd"
/>
<div v-else class="w-full border-1 border-gray-200 p-4 rounded-xl justify-start items-center">
<div v-else class="w-full flex flex-col justify-center p-4 items-center">
<img src="~assets/img/fieldPlaceholder.svg" class="!w-[18rem]" />
<div class="text-2xl text-gray-600 font-bold text-center pt-6">Select a field</div>
<div class="text-center text-sm px-2 text-gray-500 pt-6">
@ -828,7 +812,6 @@ onMounted(async () => {
</div>
</div>
</div>
</div>
</template>
<style lang="scss" scoped>

Write Preview
Loading…
Cancel
Save