|
| 1 | +<script setup lang="ts"> |
| 2 | +import Yaml from "js-yaml"; |
| 3 | +import { ref, watch } from "vue"; |
| 4 | +import { |
| 5 | + PhCheckCircle, |
| 6 | + PhEye, |
| 7 | + PhFileArrowUp, |
| 8 | + PhFloppyDisk, |
| 9 | + PhPencil, |
| 10 | + PhWarning, |
| 11 | +} from "@phosphor-icons/vue"; |
| 12 | +import { useLocalStorage, useToggle, watchDebounced } from "@vueuse/core"; |
| 13 | +import type { ErrorObject } from "ajv"; |
| 14 | +import { |
| 15 | + loadTemplateMemoized, |
| 16 | + loadValidatorOnce, |
| 17 | + ResourceType, |
| 18 | +} from "./metadataEditor"; |
| 19 | +import LayoutBox from "@/components/LayoutBox.vue"; |
| 20 | +import HelpBox from "@/components/HelpBox.vue"; |
| 21 | +import SyntaxHighlight from "@/components/SyntaxHighlight.vue"; |
| 22 | +import useMessenger from "@/message/messenger.composable"; |
| 23 | +import ActionButton from "@/components/ActionButton.vue"; |
| 24 | +import PageTitle from "@/components/PageTitle.vue"; |
| 25 | +import { downloadFile, handleFileInput, randomString } from "@/util"; |
| 26 | +import FileDropArea from "@/components/FileDropArea.vue"; |
| 27 | +
|
| 28 | +const { alertError } = useMessenger(); |
| 29 | +const yaml = useLocalStorage<string>("mink-metadata-editor-yaml", ""); |
| 30 | +const [isEditing, toggleEditing] = useToggle(true); |
| 31 | +
|
| 32 | +const fileInput = ref<HTMLInputElement>(); |
| 33 | +const validationErrors = ref<ErrorObject[]>(); |
| 34 | +const validatorPromise = loadValidatorOnce().catch(alertError); |
| 35 | +const selectedType = ref<ResourceType>(); |
| 36 | +
|
| 37 | +/** Load file content as raw YAML for editing. */ |
| 38 | +async function fileHandler(files: File[]): Promise<void> { |
| 39 | + yaml.value = await files[0]!.text(); |
| 40 | +} |
| 41 | +
|
| 42 | +/** Validate current YAML content against our JSON schema */ |
| 43 | +const validate = async () => { |
| 44 | + // Reset if no content. |
| 45 | + if (!yaml.value) { |
| 46 | + validationErrors.value = undefined; |
| 47 | + return; |
| 48 | + } |
| 49 | +
|
| 50 | + // Load YAML as data and validate it. |
| 51 | + const validator = (await validatorPromise)!; |
| 52 | + const data = Yaml.load(yaml.value, { schema: Yaml.JSON_SCHEMA }); |
| 53 | + validator(data); |
| 54 | +
|
| 55 | + // Store any validation errors. |
| 56 | + validationErrors.value = validator.errors || []; |
| 57 | +}; |
| 58 | +
|
| 59 | +/** Trigger download of current YAML content. */ |
| 60 | +function save() { |
| 61 | + // TODO Let user edit the resource id. |
| 62 | + const name = randomString(); |
| 63 | + downloadFile(yaml.value, `metadata_${name}.yaml`); |
| 64 | +} |
| 65 | +
|
| 66 | +// Validate while editing. |
| 67 | +watchDebounced(yaml, validate, { debounce: 200, immediate: true }); |
| 68 | +
|
| 69 | +// When selecting a template type, load the template. |
| 70 | +watch(selectedType, async () => { |
| 71 | + if (selectedType.value) { |
| 72 | + yaml.value = await loadTemplateMemoized(selectedType.value); |
| 73 | + selectedType.value = undefined; |
| 74 | + } |
| 75 | +}); |
| 76 | +</script> |
| 77 | + |
| 78 | +<template> |
| 79 | + <div> |
| 80 | + <PageTitle>{{ $t("metadata_editor") }}</PageTitle> |
| 81 | + |
| 82 | + <HelpBox class="my-4"> |
| 83 | + <i18n-t keypath="metadata_editor.help" scope="global"> |
| 84 | + <template #repository> |
| 85 | + <a :href="$t('metadata_editor.help.repository.url')" target="_blank"> |
| 86 | + {{ $t("metadata_editor.help.repository.label") }} |
| 87 | + </a> |
| 88 | + </template> |
| 89 | + <template #info> |
| 90 | + <a :href="$t('metadata_editor.help.info.url')" target="_blank"> |
| 91 | + {{ $t("metadata_editor.help.info.label") }} |
| 92 | + </a> |
| 93 | + </template> |
| 94 | + </i18n-t> |
| 95 | + </HelpBox> |
| 96 | + |
| 97 | + <div class="flex flex-wrap gap-4 items-start"> |
| 98 | + <LayoutBox class="w-xl grow" :title="$t('edit')"> |
| 99 | + <!-- Toolbar --> |
| 100 | + <div class="my-2 flex items-baseline gap-4"> |
| 101 | + <!-- Load local file --> |
| 102 | + <FileDropArea @drop="fileHandler"> |
| 103 | + <ActionButton |
| 104 | + @click="fileInput?.click()" |
| 105 | + :class="{ 'button-primary': !yaml }" |
| 106 | + > |
| 107 | + <PhFileArrowUp class="inline mb-1 mr-1" /> |
| 108 | + {{ $t("metadata_editor.load_file") }} |
| 109 | + </ActionButton> |
| 110 | + <input |
| 111 | + accept=".yaml,.yml" |
| 112 | + type="file" |
| 113 | + ref="fileInput" |
| 114 | + class="hidden" |
| 115 | + @change="handleFileInput($event, fileHandler)" |
| 116 | + /> |
| 117 | + </FileDropArea> |
| 118 | + |
| 119 | + <!-- Load template --> |
| 120 | + <div> |
| 121 | + <select v-model="selectedType"> |
| 122 | + <option :value="undefined" disabled> |
| 123 | + {{ $t("metadata_editor.load_template") }} |
| 124 | + </option> |
| 125 | + <option v-for="type in ResourceType" :key="type"> |
| 126 | + {{ type }} |
| 127 | + </option> |
| 128 | + </select> |
| 129 | + </div> |
| 130 | + |
| 131 | + <div class="flex-grow"></div> |
| 132 | + |
| 133 | + <!-- Toggle: Edit/View --> |
| 134 | + <ActionButton v-if="isEditing" @click="toggleEditing(false)"> |
| 135 | + <PhEye class="inline mb-0.5 mr-1" /> |
| 136 | + {{ $t("show") }} |
| 137 | + </ActionButton> |
| 138 | + <ActionButton v-else @click="toggleEditing(true)"> |
| 139 | + <PhPencil class="inline mb-0.5 mr-1" /> |
| 140 | + {{ $t("edit") }} |
| 141 | + </ActionButton> |
| 142 | + |
| 143 | + <!-- Save --> |
| 144 | + <ActionButton |
| 145 | + @click="save()" |
| 146 | + :class="{ 'button-primary': yaml && !validationErrors?.length }" |
| 147 | + > |
| 148 | + <PhFloppyDisk class="inline mb-0.5 mr-1" /> |
| 149 | + {{ $t("save") }} |
| 150 | + </ActionButton> |
| 151 | + </div> |
| 152 | + |
| 153 | + <!-- Either a textarea for editing... --> |
| 154 | + <SyntaxHighlight v-show="!isEditing" :code="yaml" language="yaml" /> |
| 155 | + |
| 156 | + <!-- ...or YAML output --> |
| 157 | + <textarea |
| 158 | + v-show="isEditing" |
| 159 | + v-model="yaml" |
| 160 | + class="w-full h-96 font-mono text-xs" |
| 161 | + ></textarea> |
| 162 | + </LayoutBox> |
| 163 | + |
| 164 | + <LayoutBox class="w-96 grow" :title="$t('schema.validate.validation')"> |
| 165 | + <HelpBox v-if="validationErrors && !validationErrors.length"> |
| 166 | + <PhCheckCircle class="inline mb-0.5 mr-1" /> |
| 167 | + {{ $t("schema.validate.ok") }} |
| 168 | + </HelpBox> |
| 169 | + <!-- A message for each validation error --> |
| 170 | + <HelpBox |
| 171 | + v-for="error in validationErrors" |
| 172 | + :key="error.instancePath + error.keyword" |
| 173 | + important |
| 174 | + > |
| 175 | + <PhWarning class="inline mb-1 mr-1" /> |
| 176 | + <i18n-t scope="global" keypath="schema.validate.error"> |
| 177 | + <template #path>{{ error.instancePath }}</template> |
| 178 | + <template #message>{{ error.message }}</template> |
| 179 | + </i18n-t> |
| 180 | + <div v-if="error.params"> |
| 181 | + <div v-for="(value, key) in error.params" :key="key"> |
| 182 | + <strong>{{ key }}:</strong> {{ value }} |
| 183 | + </div> |
| 184 | + </div> |
| 185 | + </HelpBox> |
| 186 | + </LayoutBox> |
| 187 | + </div> |
| 188 | + </div> |
| 189 | +</template> |
0 commit comments