1 files changed, 66 insertions, 27 deletions
diff --git a/components/editor/task/EditorTaskConfiguration.vue b/components/editor/task/EditorTaskConfiguration.vue
index 5313767..dab5888 100644
--- a/components/editor/task/EditorTaskConfiguration.vue
+++ b/components/editor/task/EditorTaskConfiguration.vue
@@ -13,14 +13,21 @@ const taskType = computed(() => props.quest.tasks[props.taskId].config.type);
 const taskDefintion = computed(() => sessionStore.getTaskDefinitionByTaskType(taskType.value));
 
 const taskConfig = computed(() => {
-  return Object.keys(props.quest.tasks[props.taskId].config).filter((fieldName) => fieldName !== 'type').reduce((acc, fieldName) => {
-    acc[fieldName] = props.quest.tasks[props.taskId].config[fieldName];
-    return acc;
-  }, {} as { [key: string]: any });
+  return Object.keys(props.quest.tasks[props.taskId].config)
+    .filter((fieldName) => fieldName !== 'type')
+    .reduce(
+      (acc, fieldName) => {
+        acc[fieldName] = props.quest.tasks[props.taskId].config[fieldName];
+        return acc;
+      },
+      {} as { [key: string]: any }
+    );
 });
 
 const requiredFields = computed(() => {
-  return Object.keys(taskDefintion.value.configuration).filter((fieldName) => taskDefintion.value.configuration[fieldName].required);
+  return Object.keys(taskDefintion.value.configuration).filter(
+    (fieldName) => taskDefintion.value.configuration[fieldName].required
+  );
 });
 
 // const givenRequiredFields = computed(() => {
@@ -32,13 +39,20 @@ const requiredFields = computed(() => {
 // });
 
 const remainingGivenFields = computed(() => {
-  return Object.keys(taskConfig.value).filter((fieldName) => !requiredFields.value.includes(fieldName) && fieldName in taskDefintion.value.configuration);
+  return Object.keys(taskConfig.value).filter(
+    (fieldName) =>
+      !requiredFields.value.includes(fieldName) && fieldName in taskDefintion.value.configuration
+  );
 });
 
-const configKeysOptions = computed(() => Object.keys(taskDefintion.value.configuration).filter((key) => !Object.keys(taskConfig.value).some((fieldName) => fieldName === key)));
+const configKeysOptions = computed(() =>
+  Object.keys(taskDefintion.value.configuration).filter(
+    (key) => !Object.keys(taskConfig.value).some((fieldName) => fieldName === key)
+  )
+);
 // const configKeysOptions = computed(() => {
 //   const keys = Object.keys(taskDefintion.value.configuration).filter((key) => !Object.keys(taskConfig.value).some((fieldName) => fieldName === key));
-// 
+//
 //   return keys.map((key) => {
 //     return {
 //       value: key,
@@ -49,7 +63,8 @@ const configKeysOptions = computed(() => Object.keys(taskDefintion.value.configu
 // });
 
 const onAddOption = (option: any) => {
-  sessionStore.getQuestById(props.quest.id)!.tasks[props.taskId].config[option] = taskDefintion.value.configuration[option].default || null;
+  sessionStore.getQuestById(props.quest.id)!.tasks[props.taskId].config[option] =
+    taskDefintion.value.configuration[option].default || null;
 };
 
 const updateValue = (fieldName: string, value: any) => {
@@ -64,14 +79,14 @@ const showChangeModal = ref(false);
 
 const updateTaskType = (newType: string) => {
   sessionStore.getQuestById(props.quest.id)!.tasks[props.taskId].config = {
-    type: newType
+    type: newType,
   };
   showChangeModal.value = false;
-}
+};
 
 const deleteTaskType = (taskId: string) => {
   delete sessionStore.getQuestById(props.quest.id)!.tasks[taskId];
-}
+};
 </script>
 
 <template>
@@ -82,43 +97,68 @@ const deleteTaskType = (taskId: string) => {
           {{ props.taskId }}
         </span>
         <code>
-          (<font-awesome-icon v-if="taskDefintion" id="task-icon" :icon="[taskDefintion.icon.style, taskDefintion.icon.name]" />{{ taskType }})
+          (<font-awesome-icon
+            v-if="taskDefintion"
+            id="task-icon"
+            :icon="[taskDefintion.icon.style, taskDefintion.icon.name]"
+          />{{ taskType }})
         </code>
       </p>
       <div id="task-controls" class="control-group">
         <Button :icon="['fas', 'pen']" :label="'Change'" @click="showChangeModal = true"></Button>
-        <Button :icon="['fas', 'trash']" :label="'Delete'" @click="deleteTaskType(props.taskId)"></Button>
+        <Button
+          :icon="['fas', 'trash']"
+          :label="'Delete'"
+          @click="deleteTaskType(props.taskId)"
+        ></Button>
       </div>
     </div>
     <div id="task-configuration">
       <div v-if="!taskDefintion" class="error">
         <font-awesome-icon id="error-icon" :icon="['fas', 'triangle-exclamation']" />
         <p id="error-message">
-          Unable to edit task <code>{{ props.taskId }}</code>.
+          Unable to edit task <code>{{ props.taskId }}</code
+          >.
         </p>
         <p id="error-description">
-          The quests web editor does not know how to configure task
-          type <code>{{ taskType }}</code> as it has no task definition.
+          The quests web editor does not know how to configure task type
+          <code>{{ taskType }}</code> as it has no task definition.
         </p>
       </div>
 
       <div v-if="taskDefintion">
-        <EditorTaskConfigurationRow v-for="fieldName in [...requiredFields, ...remainingGivenFields]"
-          :key="`${quest.id}-${props.taskId}-${taskType}-${fieldName}`" :required="requiredFields.includes(fieldName)"
-          :configKey="fieldName" :initialValue="taskConfig[fieldName]" :taskType="taskType"
-          :type="(taskDefintion.configuration[fieldName].type as string)"
-          @update="(newValue: any) => updateValue(fieldName, newValue)" @delete="() => deleteValue(fieldName)" />
+        <EditorTaskConfigurationRow
+          v-for="fieldName in [...requiredFields, ...remainingGivenFields]"
+          :key="`${quest.id}-${props.taskId}-${taskType}-${fieldName}`"
+          :required="requiredFields.includes(fieldName)"
+          :configKey="fieldName"
+          :initialValue="taskConfig[fieldName]"
+          :taskType="taskType"
+          :type="taskDefintion.configuration[fieldName].type as string"
+          @update="(newValue: any) => updateValue(fieldName, newValue)"
+          @delete="() => deleteValue(fieldName)"
+        />
         <div id="add-option">
-          <multiselect class="configuration-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>
     </div>
   </div>
 
-  <EditorTaskModalChange v-model="showChangeModal" :taskId="props.taskId" :currentTaskType="taskType"
-    :key="`change-task-${props.taskId}`" @update="updateTaskType" />
+  <EditorTaskModalChange
+    v-model="showChangeModal"
+    :taskId="props.taskId"
+    :currentTaskType="taskType"
+    :key="`change-task-${props.taskId}`"
+    @update="updateTaskType"
+  />
 </template>
 
 <style scoped>
@@ -133,7 +173,6 @@ const deleteTaskType = (taskId: string) => {
   #error-message {
     font-weight: 700;
   }
-
 }
 
 #task-configuration-table {