cherrypick/src/client/pages/settings/registry.value.vue

<template>
<FormBase>
	<FormInfo warn>{{ $ts.editTheseSettingsMayBreakAccount }}</FormInfo>

	<template v-if="value">
		<FormGroup>
			<FormKeyValueView>
				<template #key>{{ $ts._registry.domain }}</template>
				<template #value>{{ $ts.system }}</template>
			</FormKeyValueView>
			<FormKeyValueView>
				<template #key>{{ $ts._registry.scope }}</template>
				<template #value>{{ scope.join('/') }}</template>
			</FormKeyValueView>
			<FormKeyValueView>
				<template #key>{{ $ts._registry.key }}</template>
				<template #value>{{ xKey }}</template>
			</FormKeyValueView>
		</FormGroup>

		<FormGroup>
			<FormTextarea tall v-model:value="valueForEditor" class="_monospace" style="tab-size: 2;">
				<span>{{ $ts.value }} (JSON)</span>
			</FormTextarea>
			<FormButton @click="save" primary><i class="fas fa-save"></i> {{ $ts.save }}</FormButton>
		</FormGroup>

		<FormKeyValueView>
			<template #key>{{ $ts.updatedAt }}</template>
			<template #value><MkTime :time="value.updatedAt" mode="detail"/></template>
		</FormKeyValueView>

		<FormButton danger @click="del"><i class="fas fa-trash"></i> {{ $ts.delete }}</FormButton>
	</template>
</FormBase>
</template>

<script lang="ts">
import { defineAsyncComponent, defineComponent } from 'vue';
import * as JSON5 from 'json5';
import FormInfo from '@client/components/form/info.vue';
import FormSwitch from '@client/components/form/switch.vue';
import FormSelect from '@client/components/form/select.vue';
import FormTextarea from '@client/components/form/textarea.vue';
import FormBase from '@client/components/form/base.vue';
import FormGroup from '@client/components/form/group.vue';
import FormButton from '@client/components/form/button.vue';
import FormKeyValueView from '@client/components/form/key-value-view.vue';
import * as os from '@client/os';
import * as symbols from '@client/symbols';

export default defineComponent({
	components: {
		FormInfo,
		FormBase,
		FormSelect,
		FormSwitch,
		FormButton,
		FormTextarea,
		FormGroup,
		FormKeyValueView,
	},

	props: {
		scope: {
			required: true
		},
		xKey: {
			required: true
		},
	},

	emits: ['info'],
	
	data() {
		return {
			[symbols.PAGE_INFO]: {
				title: this.$ts.registry,
				icon: 'fas fa-cogs'
			},
			value: null,
			valueForEditor: null,
		}
	},

	watch: {
		key() {
			this.fetch();
		},
	},

	mounted() {
		this.$emit('info', this[symbols.PAGE_INFO]);
		this.fetch();
	},

	methods: {
		fetch() {
			os.api('i/registry/get-detail', {
				scope: this.scope,
				key: this.xKey
			}).then(value => {
				this.value = value;
				this.valueForEditor = JSON5.stringify(this.value.value, null, '\t');
			});
		},

		save() {
			try {
				JSON5.parse(this.valueForEditor);
			} catch (e) {
				os.dialog({
					type: 'error',
					text: this.$ts.invalidValue
				});
				return;
			}

			os.dialog({
				type: 'warning',
				text: this.$ts.saveConfirm,
				showCancelButton: true
			}).then(({ canceled }) => {
				if (canceled) return;
				os.apiWithDialog('i/registry/set', {
					scope: this.scope,
					key: this.xKey,
					value: JSON5.parse(this.valueForEditor)
				});
			});
		},

		del() {
			os.dialog({
				type: 'warning',
				text: this.$ts.deleteConfirm,
				showCancelButton: true
			}).then(({ canceled }) => {
				if (canceled) return;
				os.apiWithDialog('i/registry/remove', {
					scope: this.scope,
					key: this.xKey
				});
			});
		}
	}
});
</script>