mirror of https://github.com/nocodb/nocodb
Pranav C
2 years ago
committed by
GitHub
7 changed files with 193 additions and 145 deletions
@ -0,0 +1,123 @@
|
||||
<script setup lang="ts"> |
||||
import { Modal as AModal } from 'ant-design-vue' |
||||
import Editor from '~/components/monaco/Editor.vue' |
||||
import FullScreenIcon from '~icons/cil/fullscreen' |
||||
import FullScreenExitIcon from '~icons/cil/fullscreen-exit' |
||||
import { inject } from '#imports' |
||||
import { EditModeInj } from '~/context' |
||||
|
||||
interface Props { |
||||
modelValue: string | Record<string, any> | undefined |
||||
} |
||||
|
||||
interface Emits { |
||||
(event: 'update:modelValue', model: string): void |
||||
} |
||||
|
||||
const props = defineProps<Props>() |
||||
|
||||
const emits = defineEmits<Emits>() |
||||
|
||||
const editEnabled = inject(EditModeInj, ref(false)) |
||||
|
||||
let vModel = $(useVModel(props, 'modelValue', emits)) |
||||
|
||||
let localValueState = $ref<string | undefined>(undefined) |
||||
let localValue = $( |
||||
computed<string | undefined>({ |
||||
get: () => localValueState, |
||||
set: (val: undefined | string | Record<string, any>) => { |
||||
localValueState = typeof val === 'object' ? JSON.stringify(val, null, 2) : val |
||||
}, |
||||
}), |
||||
) |
||||
|
||||
let error = $ref<string | undefined>(undefined) |
||||
let isExpanded = $ref(false) |
||||
|
||||
const clear = () => { |
||||
error = undefined |
||||
isExpanded = false |
||||
editEnabled.value = false |
||||
|
||||
localValue = vModel |
||||
} |
||||
|
||||
const formatJson = (json: string) => { |
||||
try { |
||||
return JSON.stringify(JSON.parse(json), null, 2) |
||||
} catch (e) { |
||||
return json |
||||
} |
||||
} |
||||
|
||||
const onSave = () => { |
||||
isExpanded = false |
||||
editEnabled.value = false |
||||
localValue = localValue ? formatJson(localValue) : localValue |
||||
vModel = localValue |
||||
} |
||||
|
||||
watch( |
||||
$$(vModel), |
||||
(val) => { |
||||
localValue = val |
||||
}, |
||||
{ immediate: true }, |
||||
) |
||||
|
||||
watch($$(localValue), (val) => { |
||||
try { |
||||
JSON.parse(val) |
||||
error = undefined |
||||
} catch (e: any) { |
||||
error = e |
||||
} |
||||
}) |
||||
|
||||
watch(editEnabled, () => { |
||||
isExpanded = false |
||||
localValue = vModel |
||||
}) |
||||
</script> |
||||
|
||||
<template> |
||||
<component :is="isExpanded ? AModal : 'div'" v-model:visible="isExpanded" :closable="false" centered :footer="null"> |
||||
<div v-if="editEnabled" class="flex flex-col w-full"> |
||||
<div class="flex flex-row justify-between pt-1 pb-2"> |
||||
<a-button type="text" size="small" @click="isExpanded = !isExpanded"> |
||||
<FullScreenExitIcon v-if="isExpanded" class="h-2.5" /> |
||||
<FullScreenIcon v-else class="h-2.5" /> |
||||
</a-button> |
||||
<div class="flex flex-row"> |
||||
<a-button type="text" size="small" :onclick="clear"><div class="text-xs">Cancel</div></a-button> |
||||
<a-button type="primary" size="small" :disabled="!!error || localValue === vModel"> |
||||
<div class="text-xs" :onclick="onSave">Save</div> |
||||
</a-button> |
||||
</div> |
||||
</div> |
||||
<Editor |
||||
:model-value="localValue" |
||||
class="min-w-full w-80" |
||||
:class="{ 'expanded-editor': isExpanded, 'editor': !isExpanded }" |
||||
:hide-minimap="true" |
||||
:disable-deep-compare="true" |
||||
@update:model-value="localValue = $event" |
||||
/> |
||||
<span v-if="error" class="text-xs w-full py-1 text-red-500"> |
||||
{{ error.toString() }} |
||||
</span> |
||||
</div> |
||||
<span v-else>{{ vModel }}</span> |
||||
</component> |
||||
</template> |
||||
|
||||
<style scoped lang="scss"> |
||||
.expanded-editor { |
||||
min-height: min(600px, 80vh); |
||||
} |
||||
|
||||
.editor { |
||||
min-height: min(200px, 10vh); |
||||
} |
||||
</style> |
||||
@ -1,119 +0,0 @@
|
||||
<script lang="ts" setup> |
||||
import MonacoJsonObjectEditor from '@/components/monaco/Editor.vue' |
||||
import { computed, inject } from '#imports' |
||||
import { EditModeInj } from '~/context' |
||||
|
||||
interface Props { |
||||
modelValue: string | Record<string, any> | null |
||||
isForm: boolean |
||||
} |
||||
|
||||
const props = defineProps<Props>() |
||||
|
||||
const emits = defineEmits(['update:modelValue', 'cancel']) |
||||
|
||||
const editEnabled = inject(EditModeInj) |
||||
|
||||
let expand = $ref(false) |
||||
|
||||
let isValid = $ref(true) |
||||
|
||||
let error = $ref() |
||||
|
||||
const vModel = computed({ |
||||
get: () => (typeof props.modelValue === 'string' ? JSON.parse(props.modelValue) : props.modelValue), |
||||
set: (val) => { |
||||
if (props.isForm) { |
||||
emits('update:modelValue', JSON.stringify(val)) |
||||
} |
||||
}, |
||||
}) |
||||
|
||||
function save() { |
||||
expand = false |
||||
emits('update:modelValue', JSON.stringify(vModel.value)) |
||||
} |
||||
|
||||
function validate(n: boolean, e: any) { |
||||
isValid = n |
||||
error = e |
||||
} |
||||
</script> |
||||
|
||||
<script lang="ts"> |
||||
export default { |
||||
name: 'JsonEditableCell', |
||||
} |
||||
</script> |
||||
|
||||
<template> |
||||
<v-dialog :is="expand ? 'v-dialog' : 'div'" v-model="expand" max-width="800px" class="cell-container" @keydown.stop.enter> |
||||
<div class="d-flex pa-1" :class="{ backgroundColor: expand }"> |
||||
<v-spacer /> |
||||
<v-icon small class="mr-2" @click="expand = !expand"> |
||||
{{ expand ? 'mdi-arrow-collapse' : 'mdi-arrow-expand' }} |
||||
</v-icon> |
||||
<template v-if="!isForm"> |
||||
<v-btn outlined x-small class="mr-1" @click="$emit('cancel')"> |
||||
<!-- Cancel --> |
||||
{{ $t('general.cancel') }} |
||||
</v-btn> |
||||
<v-btn x-small color="primary" :disabled="!isValid" @click="save"> |
||||
<!-- Save --> |
||||
{{ $t('general.save') }} |
||||
</v-btn> |
||||
</template> |
||||
<v-btn v-else-if="expand" x-small @click="expand = false"> |
||||
<!-- Close --> |
||||
{{ $t('general.close') }} |
||||
</v-btn> |
||||
</div> |
||||
<MonacoJsonObjectEditor |
||||
v-if="expand" |
||||
v-model="vModel" |
||||
class="text-left caption" |
||||
style="width: 300px; min-height: min(600px, 80vh); min-width: 100%" |
||||
@validate="validate" |
||||
/> |
||||
<MonacoJsonObjectEditor |
||||
v-else |
||||
v-model="vModel" |
||||
class="text-left caption" |
||||
style="width: 300px; min-height: 200px; min-width: 100%" |
||||
@validate="validate" |
||||
/> |
||||
<div v-show="error" class="px-2 py-1 text-left caption error--text"> |
||||
{{ error }} |
||||
</div> |
||||
</v-dialog> |
||||
</template> |
||||
|
||||
<style scoped> |
||||
.cell-container { |
||||
width: 100%; |
||||
} |
||||
</style> |
||||
<!-- |
||||
/** |
||||
* @copyright Copyright (c) 2021, Xgene Cloud Ltd |
||||
* |
||||
* @author Naveen MR <oof1lab@gmail.com> |
||||
* @author Pranav C Balan <pranavxc@gmail.com> |
||||
* |
||||
* @license GNU AGPL version 3 or any later version |
||||
* |
||||
* This program is free software: you can redistribute it and/or modify |
||||
* it under the terms of the GNU Affero General Public License as |
||||
* published by the Free Software Foundation, either version 3 of the |
||||
* License, or (at your option) any later version. |
||||
* |
||||
* This program is distributed in the hope that it will be useful, |
||||
* but WITHOUT ANY WARRANTY; without even the implied warranty of |
||||
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the |
||||
* GNU Affero General Public License for more details. |
||||
* |
||||
* You should have received a copy of the GNU Affero General Public License |
||||
* along with this program. If not, see <http://www.gnu.org/licenses/>. |
||||
* |
||||
*/ |
||||
--> |
||||
Loading…
Reference in new issue