Add YAML modal

3 files changed, 68 insertions, 17 deletions

diff --git a/components/editor/quest/modal/Yaml.vue b/components/editor/quest/modal/Yaml.vue
new file mode 100644
index 0000000..365055c
--- /dev/null
+++ b/components/editor/quest/modal/Yaml.vue
@@ -0,0 +1,59 @@
+<script setup lang="ts">
+import { stringify } from 'yaml';
+import { mapJsonQuestToYamlObject } from '~/lib/questsLoader';
+
+const emit = defineEmits(['delete']);
+const props = defineProps({
+  questId: {
+    required: true,
+    type: String
+  },
+});
+
+const session = useSessionStore();
+
+const showModal = ref(false);
+const yamlString = ref('');
+
+const open = () => {
+  const quest = session.getQuestById(props.questId);
+  if (!quest) {
+    return
+  }
+  const mappedObject = mapJsonQuestToYamlObject(quest);
+  yamlString.value = stringify(mappedObject);
+  showModal.value = true;
+}
+
+defineExpose({
+  open
+})
+</script>
+
+<template>
+  <Modal v-model="showModal">
+    <template v-slot:header>
+      <h2>YAML</h2>
+    </template>
+
+    <p>YAML file for <code>{{ props.questId }}</code></p>
+
+    <textarea rows="20" :value="yamlString" readonly />
+
+    <div id="confirm" class="control-group">
+      <Button type="solid" :icon="['fas', 'check']" :label="'Close'" @click="showModal = false"></Button>
+    </div>
+  </Modal>
+</template>
+
+<style scoped>
+#confirm {
+  display: flex;
+  justify-content: flex-end;
+  margin-top: 1rem;
+}
+
+textarea {
+  width: 100%;
+}
+</style>
\ No newline at end of file
diff --git a/components/editor/task/Configuration.vue b/components/editor/task/Configuration.vue
index a209b58..bda75f4 100644
--- a/components/editor/task/Configuration.vue
+++ b/components/editor/task/Configuration.vue
@@ -109,8 +109,8 @@ const deleteTaskType = (taskId: string) => {
           :type="(taskDefintion.configuration[fieldName].type as string)"
           @update="(newValue: any) => updateValue(fieldName, newValue)" @delete="() => deleteValue(fieldName)" />
         <div id="add-option">
-          <multiselect class="multiselect" :options="configKeysOptions" :searchable="true" @select="onAddOption"
-            placeholder="Add option...">
+          <multiselect class="configuration-multiselect" :options="configKeysOptions" :searchable="true"
+            @select="onAddOption" placeholder="Add option...">
           </multiselect>
         </div>
       </div>
@@ -173,12 +173,12 @@ const deleteTaskType = (taskId: string) => {
   border-top: 1px solid var(--color-border);
 }
 
-:deep(.multiselect) .multiselect__tags {
+:deep(.configuration-multiselect) .multiselect__tags {
   border: unset !important;
   border-radius: 0px !important;
 }
 
-:deep(.multiselect) .multiselect__select {
+:deep(.configuration-multiselect) .multiselect__select {
   background: unset !important;
 }
 </style>
diff --git a/components/editor/task/ConfigurationRow.vue b/components/editor/task/ConfigurationRow.vue
index 98a644c..666669d 100644
--- a/components/editor/task/ConfigurationRow.vue
+++ b/components/editor/task/ConfigurationRow.vue
@@ -76,12 +76,13 @@ const addValue = (searchQuery: any) => {
         <TrueFalseSwitch v-else-if="props.type === 'boolean'" :value="!!currentValue" @update="updateValue" />
 
         <!-- Data type 'material-list' -->
-        <multiselect v-else-if="props.type === 'material-list'" v-model="currentValue" :options="materials"
-          :multiple="true" :taggable="true" :searchable="true" placeholder="Enter material name" />
+        <multiselect v-else-if="props.type === 'material-list'" v-model="currentValue" class="configuration-multiselect"
+          :options="materials" :multiple="true" :taggable="true" :searchable="true" placeholder="Enter material name" />
 
         <!-- Data type 'string-list' -->
-        <multiselect v-else-if="props.type === 'string-list'" v-model="currentValue" :options="[]" @tag="addValue"
-          :multiple="true" :taggable="true" :searchable="true" placeholder="Enter string" />
+        <multiselect v-else-if="props.type === 'string-list'" v-model="currentValue" class="configuration-multiselect"
+          :options="[]" @tag="addValue" :multiple="true" :taggable="true" :searchable="true"
+          placeholder="Enter string" />
 
         <!-- Data type 'itemstack' -->
         <ItemStackPicker v-else-if="props.type === 'itemstack'" :value="currentValue" @update="updateValue" />
@@ -181,13 +182,4 @@ input {
 .error {
   color: var(--color-false);
 }
-
-:deep(.multiselect) .multiselect__tags {
-  border: unset !important;
-  border-radius: 0px !important;
-}
-
-:deep(.multiselect) .multiselect__select {
-  background: unset !important;
-}
 </style>
\ No newline at end of file