type info

src/market/scan/ScanResultTable.vue

@@ -3,7 +3,7 @@ import { SliderCheckbox } from '@/components';
 import { SortableHeader, useSort } from '@/components/table';
 import { formatIsk, percentFormater } from '@/formaters';
 import { MarketType, MarketTypeLabel, TaxInput, useMarketTaxStore } from "@/market";
-import { ShoppingCartIcon, TrashIcon } from '@heroicons/vue/24/outline';
+import { BookmarkSlashIcon, ShoppingCartIcon } from '@heroicons/vue/24/outline';
 import { useStorage } from '@vueuse/core';
 import { computed, ref } from 'vue';
 import { ScanResult, getHistoryQuartils } from '.';
@@ -23,6 +23,7 @@ type Result = {
 
 interface Props {
     items?: ScanResult[];
+    infoOnly?: boolean;
 }
 
 interface Emits {
@@ -35,7 +36,8 @@ const scoreFormater = new Intl.NumberFormat("en-US", {
 });
 
 const props = withDefaults(defineProps<Props>(), {
-    items: () => []
+    items: () => [],
+    infoOnly: false
 });
 defineEmits<Emits>();
 
@@ -69,7 +71,9 @@ const { sortedArray, headerProps } = useSort<Result>(computed(() => props.items
         defaultSortDirection: 'desc'
     })
 const getLineColor = (result: Result) => {
-    if (result.profit < (threshold.value / 100)) {
+    if (props.infoOnly) {
+        return '';
+    } else if (result.profit < (threshold.value / 100)) {
         return 'line-red';
     } else if (result.sell > 0 && result.sell <= result.q1) {
         return 'line-blue';
@@ -81,7 +85,7 @@ const getLineColor = (result: Result) => {
 </script>
 
 <template>
-    <div class="flex mb-2 mt-4">
+    <div v-if="!infoOnly" class="flex mb-2 mt-4">
         <div class="flex justify-self-end ms-auto">
             <TaxInput />
             <div class="end">
@@ -112,7 +116,7 @@ const getLineColor = (result: Result) => {
                 <SortableHeader v-bind="headerProps" sortKey="q3">Q3</SortableHeader>
                 <SortableHeader v-bind="headerProps" sortKey="profit">Profit</SortableHeader>
                 <SortableHeader v-bind="headerProps" sortKey="score">Score</SortableHeader>
-                <th></th>
+                <th v-if="!infoOnly"></th>
             </tr>
         </thead>
         <tbody>
@@ -127,9 +131,9 @@ const getLineColor = (result: Result) => {
                 <td class="text-right">{{ formatIsk(r.q3) }}</td>
                 <td class="text-right">{{ percentFormater.format(r.profit) }}</td>
                 <td class="text-right">{{ scoreFormater.format(r.score) }}</td>
-                <td class="text-right">
+                <td v-if="!infoOnly" class="text-right">
                     <button class="btn-icon me-1" @click="$emit('buy', r.type, r.buy, r.sell)"><ShoppingCartIcon /></button>
-                    <button class="btn-icon me-1" @click="$emit('remove', r.type)"><TrashIcon /></button>
+                    <button class="btn-icon me-1" @click="$emit('remove', r.type)"><BookmarkSlashIcon /></button>
                 </td>
             </tr>
         </tbody>

src/market/scan/scan.ts

@@ -1,4 +1,4 @@
-import { MarketOrderHistory, MarketType } from "@/market";
+import { MarketOrderHistory, MarketType, MarketTypePrice, getHistory, jitaId } from "@/market";
 import { usePocketBase, watchCollection } from "@/pocketbase";
 import { defineStore } from "pinia";
 import { RecordModel } from "pocketbase";
@@ -31,6 +31,16 @@ export const useMarketScanStore = defineStore(marketScans, () => {
             marketScan.value = await pb.collection(marketScans).create({ owner: pb.authStore.model!.id, types });
         }
     }
+    const addType = async (type: number) => {
+        if (!types.value.includes(type)) {
+            await setTypes([...types.value, type]);
+        }
+    }
+    const removeType = async (type: number) => {
+        if (types.value.includes(type)) {
+            await setTypes(types.value.filter(t => t !== type));
+        }
+    }
     
     watchCollection<MarketScan>(marketScans, '*', data => {
         if (data.action === 'delete') {
@@ -40,5 +50,7 @@ export const useMarketScanStore = defineStore(marketScans, () => {
         }
     });
     onMounted(async () => marketScan.value = await pb.collection(marketScans).getFirstListItem<MarketScan>('').catch(() => undefined));
-    return { types, setTypes };
-});
+    return { types, setTypes, addType, removeType };
+});
+
+export const createResult = async (id: number, price: MarketTypePrice): Promise<ScanResult> => ({ history: await getHistory(jitaId, id), ...price });

src/market/track/TrackQuantilsTooltip.vue

@@ -82,7 +82,7 @@ watchEffect(async () => {
         @apply btn-icon px-2;
     }
     &.open>:deep(div.header) {
-        @apply bg-slate-600 rounded-t;
+        @apply rounded-t-md bg-slate-600;
     }
 }
 </style>

src/market/type/MarketTypeInput.vue

@@ -45,20 +45,25 @@ const moveUp = () => {
     }
     scrollTo(currentIndex.value);
 }
-const select = (type: MarketType) => {
+const select = (type?: MarketType) => {
     log.debug('Select:', type);
     value.value = type;
     currentIndex.value = -1;
     suggestions.value = [];
+    isOpen.value = false;
+    name.value = type?.name ?? '';
+    if (document.activeElement instanceof HTMLElement) {
+        document.activeElement.blur();
+    }
 }
 const submit = async () => {
     if (currentIndex.value >= 0 && currentIndex.value < suggestions.value.length) {
         const v = suggestions.value[currentIndex.value];
     
-        value.value = v;
+        select(v);
         await nextTick();
     } else if (props.modelValue === undefined && suggestions.value.length > 0) {
-        value.value = suggestions.value[0];
+        select(suggestions.value[0]);
         await nextTick();
     }
 
@@ -108,7 +113,7 @@ watchEffect(async () => {
 
 <style scoped lang="postcss">
 .fake-input {
-    @apply w-96 flex border bg-slate-500 rounded px-1;
+    @apply w-96 flex border bg-slate-500 rounded px-1 py-0.5;
 
     &:has(> input:focus-visible) {
         outline: -webkit-focus-ring-color auto 1px;

src/market/type/MarketTypeLabel.vue

@@ -1,6 +1,5 @@
 <script setup lang="ts">
-import { copyToClipboard } from '@/utils';
-import { ClipboardIcon } from '@heroicons/vue/24/outline';
+import { ClipboardButton } from '@/components';
 
 
 interface Props {
@@ -21,7 +20,13 @@ withDefaults(defineProps<Props>(), {
         <img v-if="id" :src="`https://images.evetech.net/types/${id}/icon`" class="inline-block w-5 h-5 me-1" />
         <template v-if="name">
             {{ name }}
-            <button v-if="!hideCopy" class="btn-icon" @click="copyToClipboard(name)"><ClipboardIcon class="relative top-0.5 !w-4 !h-4" /></button>
+            <ClipboardButton v-if="!hideCopy" :value="name" />
         </template>
     </div>
-</template>
+</template>
+
+<style scoped lang="postcss">
+button:deep(>svg) {
+    @apply relative top-0.5 !w-4 !h-4;
+}
+</style>