2 files changed, 19 insertions, 3 deletions
diff --git a/components/base/ItemStack/ItemStackModal.vue b/components/base/ItemStack/ItemStackModal.vue
index 7cf4db9..865c054 100644
--- a/components/base/ItemStack/ItemStackModal.vue
+++ b/components/base/ItemStack/ItemStackModal.vue
@@ -3,12 +3,11 @@ import { computed, ref } from 'vue';
 import materials from '@/lib/materials';
 
 const model = defineModel();
-
 const emit = defineEmits(['confirm']);
-
 const props = defineProps<{
   value: any
 }>();
+const session = useSessionStore();
 
 //TODO unshitify
 const value = ref<any>(props.value);
@@ -42,6 +41,17 @@ const selectedType = ref(
 const noTypeSelected = computed(() => selectedType.value === '');
 const noValue = computed(() => !isQuestItem.value && !isItemStack.value && !isMaterial.value);
 
+const selectedQuestItem = computed({
+  get() {
+    return value.value?.['quest-item'];
+  },
+  set(newValue: string) {
+    value.value = {}
+    value.value['quest-item'] = newValue;
+  }
+})
+const knownQuestItems = computed(() => { return session.session.items.map((item) => item.id) });
+
 const setSelectedType = (type: string) => {
   if (type === 'questitem') {
     value.value = {};
@@ -98,6 +108,11 @@ const confirm = () => {
         <ItemStackForm v-model="value" />
       </div>
 
+      <div id="quest-item" class="option-group" v-if="selectedType === 'questitem'">
+        <label for="quest-item">Quest Item</label>
+        <multiselect v-model="selectedQuestItem" :options="knownQuestItems" :searchable="true"
+          placeholder="Enter quest item" />
+      </div>
 
       <div id="confirm" class="control-group">
         <Button :icon="['fas', 'times']" :label="'Cancel'" @click="model = false"></Button>
diff --git a/components/base/ItemStack/ItemStackPicker.vue b/components/base/ItemStack/ItemStackPicker.vue
index bb0b84d..2dc35d3 100644
--- a/components/base/ItemStack/ItemStackPicker.vue
+++ b/components/base/ItemStack/ItemStackPicker.vue
@@ -49,7 +49,8 @@ const update = (newValue: any) => {
 <template>
   <div class="itemstack" @click="showItemStackModal = true">
     <span v-if="empty" class="empty">ItemStack...</span>
-    <span v-if="isQuestItem" class="item"><font-awesome-icon :icon="['fas', 'tag']" /> Quest Item</span>
+    <span v-if="isQuestItem" class="item"><font-awesome-icon :icon="['fas', 'tag']" /> Quest Item: {{
+    value['quest-item'] }}</span>
     <span v-if="isItemStack" class="item"><font-awesome-icon :icon="['fas', 'cube']" /> ItemStack: {{ value.type ||
     value.item || value.material }}</span>
     <span v-if="isMaterial" class="item"><font-awesome-icon :icon="['fas', 'apple-whole']" /> {{ value }}</span>