thepaperpilot/gardening-app
1
0
Fork 0
Code Issues Pull requests Releases Activity Actions

Make items links

Browse source
This commit is contained in:
thepaperpilot 2024-05-27 20:27:20 -05:00
parent fdae71b132
commit cf3fb3e6ef
6 changed files with 39 additions and 54 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

51
src/components/Item.vue
View file

@ -1,11 +1,15 @@
<template>
<div v-if="Object.keys(sourceItem.threads).length === 1 && '0' in sourceItem.threads" class="relative">
<div
v-if="Object.keys(sourceItem.threads).length === 1 && '0' in sourceItem.threads"
class="relative"
:ref="isSelected(0) ? 'highlightedElement' : ''">
<a
draggable="false"
:style="style()"
:ref="isSelected(0) ? 'highlightedElement' : ''"
class="p-4 border-2 -mt-2px cursor-pointer bg-gray-200 border-gray-800 select-none relative z-20"
class="block p-4 border-2 -mt-2px cursor-pointer bg-gray-200 border-gray-800 select-none relative z-20"
:class="isSelected(0) ? 'selected shadow-md -mx-2' : ''"
@click="select(0)"
:href="isSelected(0) ? baseUrl : `${baseUrl}/${item.source}/${item.sourceItem}/0`"
@click="e => openThread(e, 0)"
@mousedown="e => startDrag(e)"
@touchstart="e => startDrag(e)">
<div class="flex items-center">
@ -30,7 +34,7 @@
class="mt-4 text-sm text-yellow-600">
Snoozed until {{ new Date(item.threads[0].snoozedUntil).toLocaleString() }}
</div>
</div>
</a>
<component :is="actionIndicators" />
</div>
<template v-else>
@ -51,18 +55,21 @@
</div>
<component :is="actionIndicators" />
</div>
<div v-for="(thread, id) in activeThreads" class="relative">
<div
class="p-4 border-2 -mt-2px cursor-pointer bg-slate-300 border-gray-800 select-none relative z-20"
:ref="isSelected(id) ? 'highlightedElement' : ''"
v-for="(thread, id) in activeThreads"
class="relative"
:ref="isSelected(id) ? 'highlightedElement' : ''">
<a
class="block p-4 border-2 -mt-2px cursor-pointer bg-slate-300 border-gray-800 select-none relative z-20"
:class="isSelected(id) ? 'selected shadow-md -mx-2 thread' : ''"
:style="style(parseInt(id as unknown as string))"
@click="select(parseInt(id as unknown as string))"
:href="isSelected(id) ? baseUrl : `${baseUrl}/${item.source}/${item.sourceItem}/${id}`"
@click="e => openThread(e, id)"
@mousemove="drag"
@mousedown="e => startDrag(e, id as unknown as string)"
@mousedown="(e: MouseEvent | TouchEvent) => startDrag(e, id as unknown as string)"
@mouseup="endDrag"
@touchmove="drag"
@touchstart="e => startDrag(e, id as unknown as string)"
@touchstart="(e: MouseEvent | TouchEvent) => startDrag(e, id as unknown as string)"
@touchend="endDrag">
<div class="flex items-center">
<Avatar v-if="getContact(id)" v-bind="getContact(id)!" class="mr-2" />
@ -84,7 +91,7 @@
class="mt-4 text-sm text-yellow-600">
Snoozed until {{ new Date(thread.snoozedUntil).toLocaleString() }}
</div>
</div>
</a>
<component :is="actionIndicators" />
</div>
</template>
@ -94,6 +101,7 @@
import { faCheck, faClockRotateLeft } from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
import { computed, ref, watch } from 'vue';
import { useRouter } from 'vue-router';
import type { Item, ItemThread, ThreadRef } from "../state";
import { items, sources } from '../state';
import { parseString } from '../utils';
@ -103,10 +111,10 @@ const props = defineProps<{
item: Item;
selectedThread?: ThreadRef;
showSnoozed?: boolean;
baseUrl: string;
}>();
const emits = defineEmits<{
select: [thread: number];
snoozeItem: [thread: number];
deselect: [];
}>();
@ -119,6 +127,8 @@ const activeThreads = computed(() => Object.keys(props.item.threads).reduce((acc
return acc;
}, {} as Record<number, ItemThread>));
const router = useRouter();
const dragging = ref(false);
const dragged = ref(false);
const draggingX = ref(0);
@ -214,12 +224,6 @@ function endDrag(e: MouseEvent | TouchEvent) {
window.onpointerleave = null;
}
function select(thread: number) {
if (!dragged.value) {
emits("select", thread);
}
}
function deleteItem() {
const index = items.value.findIndex(item => item.source === props.item.source && item.sourceItem === props.item.sourceItem);
const newItems = items.value.slice();
@ -232,6 +236,15 @@ function deleteItem() {
}
}
function openThread(e: MouseEvent | TouchEvent, index: number) {
e.preventDefault();
if (!dragged.value) {
router.push(
isSelected(index) ? props.baseUrl :
`${props.baseUrl}/${props.item.source}/${props.item.sourceItem}/${index}`);
}
}
const actionIndicators = () => <div class={{
absolute: true,
"top-0": true,

3
src/components/ItemGroup.vue
View file

@ -4,7 +4,7 @@
:item="item"
:selected-thread="selectedThread"
:show-snoozed="showSnoozed"
@select="thread => emits('selectItem', item.source, item.sourceItem, thread)"
:base-url="baseUrl"
@snoozeItem="thread => emits('snoozeItem', item.source, item.sourceItem, thread)"
@deselect="emits('deselect')" />
</div>
@ -24,5 +24,6 @@ defineProps<{
items: StateItem[];
selectedThread?: ThreadRef;
showSnoozed?: boolean;
baseUrl: string;
}>();
</script>

3
src/components/pages/ItemsView.vue
View file

@ -9,7 +9,7 @@
:items="showSnoozed ? category.snoozedItems : category.activeItems"
:selected-thread="showThread ? selectedItem : undefined"
:show-snoozed="showSnoozed"
@select-item="selectItem"
:base-url="baseUrl"
@snooze-item="snoozeItem"
@deselect="close" />
</div>
@ -67,7 +67,6 @@ const {
snoozingItem,
snoozing,
threadTitle,
selectItem,
snoozeItem,
close,
stopSnoozing,

15
src/components/pages/Source.vue
View file

@ -6,7 +6,7 @@
<Item v-for="item in items"
:item="item"
:selected-thread="showThread ? selectedItem : undefined"
@select="thread => selectItem(item.sourceItem, thread)"
base-url="/source"
@snoozeItem="thread => snoozeItem(sourceId, item.sourceItem, thread)"
@deselect="close" />
</div>
@ -90,19 +90,6 @@ const items = computed(() => Object.keys(source.value.items).map(item => {
}
}));
function selectItem(sourceItem: number, thread: number) {
const p = route.params;
const sourceItemInt = parseInt(Array.isArray(p.sourceItem) ? p.sourceItem[0] : p.sourceItem);
const threadInt = parseInt(Array.isArray(p.thread) ? p.thread[0] : p.thread);
if (sourceItem === sourceItemInt && thread === threadInt) {
close();
return false;
}
router.push(`${baseUrl.value}/${sourceItem}/${thread}`);
return true;
}
const {
showThread,
selectedItem,

3
src/components/pages/Unsorted.vue
View file

@ -6,7 +6,7 @@
<Item v-for="item in unsortedItems"
:item="item"
:selected-thread="showThread ? selectedItem : undefined"
@select="thread => selectItem(item.source, item.sourceItem, thread)"
:base-url="baseUrl"
@snoozeItem="thread => snoozeItem(item.source, item.sourceItem, thread)"
@deselect="close" />
</div>
@ -51,7 +51,6 @@ const {
snoozingItem,
snoozing,
threadTitle,
selectItem,
snoozeItem,
close,
stopSnoozing,

14
src/utils.tsx
View file

@ -106,19 +106,6 @@ export function setupSelectedThread(baseUrl: Ref<string>, route: RouteLocationNo
}
}
function selectItem(source: number, sourceItem: number, thread: number) {
const p = route.params;
const sourceInt = parseInt(Array.isArray(p.source) ? p.source[0] : p.source);
const sourceItemInt = parseInt(Array.isArray(p.sourceItem) ? p.sourceItem[0] : p.sourceItem);
const threadInt = parseInt(Array.isArray(p.thread) ? p.thread[0] : p.thread);
if (source === sourceInt && sourceItem === sourceItemInt && thread === threadInt) {
close();
return false;
}
router.push(`${baseUrl.value}/${source}/${sourceItem}/${thread}`);
return true;
}
function snoozeItem(source: number, sourceItem: number, thread: number) {
snoozingItem.value = { source, sourceItem, thread };
snoozing.value = true;
@ -150,7 +137,6 @@ export function setupSelectedThread(baseUrl: Ref<string>, route: RouteLocationNo
snoozingItem,
snoozing,
threadTitle,
selectItem,
snoozeItem,
close,
stopSnoozing,