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

Added snooze button to panel title

Browse source
This commit is contained in:
thepaperpilot 2024-05-27 14:56:29 -05:00
parent 9165b6ea4a
commit 6e2cee596d
5 changed files with 47 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
src/components/PanelTitle.vue
View file

@ -1,6 +1,9 @@
<template>
<div class="w-full flex mb-4">
<div class="text-3xl grow">{{ title }}</div>
<button class="mx-4" @click="emits('snooze')">
<FontAwesomeIcon class="w-6 h-6" :icon="faClockRotateLeft" />
</button>
<button @click="emits('toggleRead')">
<FontAwesomeIcon class="w-6 h-6" :icon="isRead ? faEnvelopeOpen : faCheck" />
</button>
@ -8,7 +11,7 @@
</template>
<script setup lang="ts">
import { faCheck, faEnvelopeOpen } from '@fortawesome/free-solid-svg-icons';
import { faCheck, faClockRotateLeft, faEnvelopeOpen } from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
defineProps<{
@ -18,6 +21,7 @@ defineProps<{
const emits = defineEmits<{
toggleRead: [];
snooze: [];
}>();
</script>

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

@ -15,12 +15,20 @@
</div>
</div>
<div class="hidden xl:flex bg-slate-200 ml-0 h-screen flex-col overflow-hidden" :class="showThread ? 'p-4 basis-6/12' : 'basis-0'">
<PanelTitle :title="threadTitle" :isRead="isRead" @toggleRead="toggleRead" />
<PanelTitle
:title="threadTitle"
:isRead="isRead"
@toggleRead="toggleRead"
@snooze="() => snoozeItem(selectedItem!.source, selectedItem!.sourceItem, selectedItem!.thread)" />
<Thread :source="selectedItem?.source ?? 0" :sourceItem="selectedItem?.sourceItem ?? 0" :thread="selectedItem?.thread ?? 0" :base-url="baseUrl" />
</div>
<Modal :model-value="showThread" class="block xl:hidden" @update:model-value="close">
<template v-slot:header>
<PanelTitle :title="threadTitle" :isRead="isRead" @toggleRead="toggleRead" />
<PanelTitle
:title="threadTitle"
:isRead="isRead"
@toggleRead="toggleRead"
@snooze="() => snoozeItem(selectedItem!.source, selectedItem!.sourceItem, selectedItem!.thread)" />
</template>
<template v-slot:body>
<Thread

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

@ -11,11 +11,21 @@
@deselect="close" />
</div>
<div class="hidden xl:flex bg-slate-200 ml-0 h-screen flex-col overflow-hidden" :class="showThread ? 'p-4 basis-6/12' : 'basis-0'">
<PanelTitle :title="threadTitle" :isRead="isRead" @toggleRead="toggleRead" />
<PanelTitle
:title="threadTitle"
:isRead="isRead"
@toggleRead="toggleRead"
@snooze="() => snoozeItem(sourceId, selectedItem!.sourceItem, selectedItem!.thread)" />
<Thread :source="selectedItem?.source ?? 0" :sourceItem="selectedItem?.sourceItem ?? 0" :thread="selectedItem?.thread ?? 0" :base-url="baseUrl" :highlighted="highlightedEvent" />
</div>
<Modal :model-value="showThread" class="block xl:hidden" @update:model-value="close">
<template v-slot:header><div class="text-3xl">{{ threadTitle }}</div></template>
<template v-slot:header>
<PanelTitle
:title="threadTitle"
:isRead="isRead"
@toggleRead="toggleRead"
@snooze="() => snoozeItem(sourceId, selectedItem!.sourceItem, selectedItem!.thread)" />
</template>
<template v-slot:body>
<Thread :source="selectedItem?.source ?? 0" :sourceItem="selectedItem?.sourceItem ?? 0" :thread="selectedItem?.thread ?? 0" :base-url="baseUrl" :highlighted="highlightedEvent" />
</template>

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

@ -11,11 +11,21 @@
@deselect="close" />
</div>
<div class="hidden xl:flex bg-slate-200 ml-0 h-screen flex-col overflow-hidden" :class="showThread ? 'p-4 basis-6/12' : 'basis-0'">
<PanelTitle :title="threadTitle" :isRead="isRead" @toggleRead="toggleRead" />
<PanelTitle
:title="threadTitle"
:isRead="isRead"
@toggleRead="toggleRead"
@snooze="() => snoozeItem(selectedItem!.source, selectedItem!.sourceItem, selectedItem!.thread)" />
<Thread :source="selectedItem?.source ?? 0" :sourceItem="selectedItem?.sourceItem ?? 0" :thread="selectedItem?.thread ?? 0" :base-url="baseUrl" />
</div>
<Modal :model-value="showThread" class="block xl:hidden" @update:model-value="close">
<template v-slot:header><div class="text-3xl">{{ threadTitle }}</div></template>
<template v-slot:header>
<PanelTitle
:title="threadTitle"
:isRead="isRead"
@toggleRead="toggleRead"
@snooze="() => snoozeItem(selectedItem!.source, selectedItem!.sourceItem, selectedItem!.thread)" />
</template>
<template v-slot:body><Thread :source="selectedItem?.source ?? 0" :sourceItem="selectedItem?.sourceItem ?? 0" :thread="selectedItem?.thread ?? 0" :base-url="baseUrl" /></template>
</Modal>
<SnoozeModal :snoozing="snoozing" :threadRef="snoozingItem" @close="stopSnoozing" />

10
src/utils.tsx
View file

@ -1,6 +1,8 @@
import { Ref, computed, ref, watch } from "vue";
import { RouteLocationNormalizedLoaded, Router, RouterLink } from "vue-router";
import { MessageEvent, SourceThread, ThreadRef, items, sources } from "./state";
import { faUpRightFromSquare } from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
// Modified from https://www.basedash.com/blog/how-to-merge-two-sorted-lists-in-javascript
export function mergeSortedLists<T>(arr1: Array<T>, arr2: Array<T>): Array<T> {
@ -29,6 +31,7 @@ export function setupSelectedThread(baseUrl: Ref<string>, route: RouteLocationNo
const selectedItem = ref<ThreadRef | undefined>();
const snoozingItem = ref<ThreadRef | undefined>();
const snoozing = ref(false);
const snoozed = ref<number | undefined>();
watch([() => route.params.source, () => route.params.sourceItem, () => route.params.thread], ([source, sourceItem, thread]) => {
const sourceInt = parseInt(Array.isArray(source) ? source[0] : source);
const sourceItemInt = parseInt(Array.isArray(sourceItem) ? sourceItem[0] : sourceItem);
@ -119,6 +122,7 @@ export function setupSelectedThread(baseUrl: Ref<string>, route: RouteLocationNo
function snoozeItem(source: number, sourceItem: number, thread: number) {
snoozingItem.value = { source, sourceItem, thread };
snoozing.value = true;
snoozed.value = items.value.find(item => item.source === source && item.sourceItem === sourceItem && thread in item.threads)?.threads[thread]?.snoozedUntil;
}
function close() {
@ -128,7 +132,9 @@ export function setupSelectedThread(baseUrl: Ref<string>, route: RouteLocationNo
}
function stopSnoozing() {
if (snoozingItem.value?.source === selectedItem.value?.source &&
const snoozedUntil = items.value.find(item => item.source === snoozingItem.value?.source && item.sourceItem === snoozingItem.value?.sourceItem && snoozingItem.value?.thread in item.threads)?.threads[snoozingItem.value?.thread ?? 0]?.snoozedUntil;
if (snoozed.value != snoozedUntil &&
snoozingItem.value?.source === selectedItem.value?.source &&
snoozingItem.value?.sourceItem === selectedItem.value?.sourceItem &&
(snoozingItem.value?.thread === -1 || snoozingItem.value?.thread === selectedItem.value?.thread)
) {
@ -194,7 +200,7 @@ export function parseString(message: string) {
parts.push(<span class="px-2 bg-emerald-200/25 rounded-2xl">
{ referencedMessage.message }
<RouterLink class="text-slate-600 pl-2 text-sm" to={`/source/${sourceId}/${sourceItemId}/${threadId}/${messageId}`}>
goto message
<FontAwesomeIcon icon={faUpRightFromSquare} />
</RouterLink>
</span>);
}