Create ItemsView utility
This commit is contained in:
parent
bfd117ff20
commit
722ded6065
3 changed files with 115 additions and 193 deletions
109
src/components/pages/ItemsView.vue
Normal file
109
src/components/pages/ItemsView.vue
Normal file
|
|
@ -0,0 +1,109 @@
|
|||
<template>
|
||||
<div class="flex h-full">
|
||||
<div class="grow basis-6/12 p-4 overflow-x-hidden relative">
|
||||
<div class="text-3xl mb-4">{{ title }}</div>
|
||||
<div v-if="categories.length === 0" class="absolute center text-9xl">∅</div>
|
||||
<div v-for="category in categories">
|
||||
<CategoryHeader v-bind="category" />
|
||||
<ItemGroup
|
||||
:items="showSnoozed ? category.snoozedItems : category.activeItems"
|
||||
:selected-thread="showThread ? selectedItem : undefined"
|
||||
:show-snoozed="showSnoozed"
|
||||
@select-item="selectItem"
|
||||
@snooze-item="snoozeItem"
|
||||
@deselect="close" />
|
||||
</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" />
|
||||
<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: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" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed, ref, watch } from 'vue';
|
||||
import { useRoute, useRouter } from 'vue-router';
|
||||
import { ThreadRef, sources, Category } from '../../state';
|
||||
import CategoryHeader from "../CategoryHeader.vue";
|
||||
import ItemGroup from "../ItemGroup.vue";
|
||||
import Modal from '../Modal.vue';
|
||||
import PanelTitle from '../PanelTitle.vue';
|
||||
import SnoozeModal from '../SnoozeModal.vue';
|
||||
import Thread from '../Thread.vue';
|
||||
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
|
||||
const props = defineProps<{
|
||||
title: string;
|
||||
categories: Category[];
|
||||
baseUrl: string;
|
||||
showSnoozed?: boolean;
|
||||
}>();
|
||||
|
||||
const showThread = ref(false);
|
||||
const selectedItem = ref<ThreadRef | undefined>();
|
||||
const snoozingItem = ref<ThreadRef | undefined>();
|
||||
const snoozing = ref(false);
|
||||
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);
|
||||
const threadInt = parseInt(Array.isArray(thread) ? thread[0] : thread);
|
||||
if (!isNaN(sourceInt) && !isNaN(sourceItemInt) && !isNaN(threadInt)) {
|
||||
selectedItem.value = { source: sourceInt, sourceItem: sourceItemInt, thread: threadInt };
|
||||
showThread.value = true;
|
||||
} else {
|
||||
// Intentionally leave selectedItem so animations look right
|
||||
showThread.value = false;
|
||||
}
|
||||
}, { immediate: true });
|
||||
|
||||
const threadTitle = computed(() => {
|
||||
const selected = selectedItem.value;
|
||||
if (selected == null) {
|
||||
return "";
|
||||
}
|
||||
return sources.value[selected.source].items[selected.sourceItem].threads[selected.thread].title;
|
||||
});
|
||||
|
||||
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(`${props.baseUrl}/${source}/${sourceItem}/${thread}`);
|
||||
return true;
|
||||
}
|
||||
|
||||
function snoozeItem(source: number, sourceItem: number, thread: number) {
|
||||
snoozingItem.value = { source, sourceItem, thread };
|
||||
snoozing.value = true;
|
||||
}
|
||||
|
||||
function close() {
|
||||
console.log("closing thread")
|
||||
router.push(props.baseUrl);
|
||||
snoozing.value = false;
|
||||
}
|
||||
|
||||
function stopSnoozing() {
|
||||
if (snoozingItem.value?.source === selectedItem.value?.source &&
|
||||
snoozingItem.value?.sourceItem === selectedItem.value?.sourceItem &&
|
||||
(snoozingItem.value?.thread === -1 || snoozingItem.value?.thread === selectedItem.value?.thread)
|
||||
) {
|
||||
close();
|
||||
} else {
|
||||
snoozing.value = false;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -1,102 +1,8 @@
|
|||
<template>
|
||||
<div class="flex h-full">
|
||||
<div class="grow basis-6/12 p-4 overflow-x-hidden relative">
|
||||
<div class="text-3xl mb-4">Snoozed</div>
|
||||
<div v-if="snoozedCategories.length === 0" class="absolute center text-9xl">∅</div>
|
||||
<div v-for="category in snoozedCategories">
|
||||
<CategoryHeader v-bind="category" />
|
||||
<ItemGroup
|
||||
:items="category.snoozedItems"
|
||||
:selected-thread="showThread ? selectedItem : undefined"
|
||||
:show-snoozed="true"
|
||||
@select-item="selectItem"
|
||||
@snooze-item="snoozeItem"
|
||||
@deselect="close" />
|
||||
</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" />
|
||||
<Thread :source="selectedItem?.source ?? 0" :sourceItem="selectedItem?.sourceItem ?? 0" :thread="selectedItem?.thread ?? 0" base-url="/snoozed" />
|
||||
</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:body><Thread :source="selectedItem?.source ?? 0" :sourceItem="selectedItem?.sourceItem ?? 0" :thread="selectedItem?.thread ?? 0" base-url="/snoozed" /></template>
|
||||
</Modal>
|
||||
<SnoozeModal :snoozing="snoozing" :threadRef="snoozingItem" @close="stopSnoozing" />
|
||||
</div>
|
||||
<ItemsView base-url="/snoozed" :categories="snoozedCategories" title="Snoozed" :show-snoozed="true" />
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed, ref, watch } from 'vue';
|
||||
import { useRoute, useRouter } from 'vue-router';
|
||||
import { ThreadRef, sources, snoozedCategories } from '../../state';
|
||||
import CategoryHeader from "../CategoryHeader.vue";
|
||||
import ItemGroup from "../ItemGroup.vue";
|
||||
import Modal from '../Modal.vue';
|
||||
import PanelTitle from '../PanelTitle.vue';
|
||||
import SnoozeModal from '../SnoozeModal.vue';
|
||||
import Thread from '../Thread.vue';
|
||||
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
|
||||
const showThread = ref(false);
|
||||
const selectedItem = ref<ThreadRef | undefined>();
|
||||
const snoozingItem = ref<ThreadRef | undefined>();
|
||||
const snoozing = ref(false);
|
||||
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);
|
||||
const threadInt = parseInt(Array.isArray(thread) ? thread[0] : thread);
|
||||
if (!isNaN(sourceInt) && !isNaN(sourceItemInt) && !isNaN(threadInt)) {
|
||||
selectedItem.value = { source: sourceInt, sourceItem: sourceItemInt, thread: threadInt };
|
||||
showThread.value = true;
|
||||
} else {
|
||||
// Intentionally leave selectedItem so animations look right
|
||||
showThread.value = false;
|
||||
}
|
||||
}, { immediate: true });
|
||||
|
||||
const threadTitle = computed(() => {
|
||||
const selected = selectedItem.value;
|
||||
if (selected == null) {
|
||||
return "";
|
||||
}
|
||||
return sources.value[selected.source].items[selected.sourceItem].threads[selected.thread].title;
|
||||
});
|
||||
|
||||
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(`/snoozed/${source}/${sourceItem}/${thread}`);
|
||||
return true;
|
||||
}
|
||||
|
||||
function snoozeItem(source: number, sourceItem: number, thread: number) {
|
||||
snoozingItem.value = { source, sourceItem, thread };
|
||||
snoozing.value = true;
|
||||
}
|
||||
|
||||
function close() {
|
||||
console.log("closing thread")
|
||||
router.push("/snoozed");
|
||||
snoozing.value = false;
|
||||
}
|
||||
|
||||
function stopSnoozing() {
|
||||
if (snoozingItem.value?.source === selectedItem.value?.source &&
|
||||
snoozingItem.value?.sourceItem === selectedItem.value?.sourceItem &&
|
||||
(snoozingItem.value?.thread === -1 || snoozingItem.value?.thread === selectedItem.value?.thread)
|
||||
) {
|
||||
close();
|
||||
} else {
|
||||
snoozing.value = false;
|
||||
}
|
||||
}
|
||||
import { snoozedCategories } from '../../state';
|
||||
import ItemsView from './ItemsView.vue';
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,101 +1,8 @@
|
|||
<template>
|
||||
<div class="flex h-full">
|
||||
<div class="grow basis-6/12 p-4 overflow-x-hidden relative">
|
||||
<div class="text-3xl mb-4">Todo</div>
|
||||
<div v-if="todoCategories.length === 0" class="absolute center text-9xl">∅</div>
|
||||
<div v-for="category in todoCategories">
|
||||
<CategoryHeader v-bind="category" />
|
||||
<ItemGroup
|
||||
:items="category.activeItems"
|
||||
:selected-thread="showThread ? selectedItem : undefined"
|
||||
@select-item="selectItem"
|
||||
@snooze-item="snoozeItem"
|
||||
@deselect="close" />
|
||||
</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" />
|
||||
<Thread :source="selectedItem?.source ?? 0" :sourceItem="selectedItem?.sourceItem ?? 0" :thread="selectedItem?.thread ?? 0" base-url="/todo" />
|
||||
</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:body><Thread :source="selectedItem?.source ?? 0" :sourceItem="selectedItem?.sourceItem ?? 0" :thread="selectedItem?.thread ?? 0" base-url="/todo" /></template>
|
||||
</Modal>
|
||||
<SnoozeModal :snoozing="snoozing" :threadRef="snoozingItem" @close="stopSnoozing" />
|
||||
</div>
|
||||
<ItemsView base-url="/todo" :categories="todoCategories" title="Todo" />
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed, ref, watch } from 'vue';
|
||||
import { useRoute, useRouter } from 'vue-router';
|
||||
import { ThreadRef, sources, todoCategories } from '../../state';
|
||||
import CategoryHeader from "../CategoryHeader.vue";
|
||||
import ItemGroup from "../ItemGroup.vue";
|
||||
import Modal from '../Modal.vue';
|
||||
import PanelTitle from '../PanelTitle.vue';
|
||||
import SnoozeModal from '../SnoozeModal.vue';
|
||||
import Thread from '../Thread.vue';
|
||||
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
|
||||
const showThread = ref(false);
|
||||
const selectedItem = ref<ThreadRef | undefined>();
|
||||
const snoozingItem = ref<ThreadRef | undefined>();
|
||||
const snoozing = ref(false);
|
||||
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);
|
||||
const threadInt = parseInt(Array.isArray(thread) ? thread[0] : thread);
|
||||
if (!isNaN(sourceInt) && !isNaN(sourceItemInt) && !isNaN(threadInt)) {
|
||||
selectedItem.value = { source: sourceInt, sourceItem: sourceItemInt, thread: threadInt };
|
||||
showThread.value = true;
|
||||
} else {
|
||||
// Intentionally leave selectedItem so animations look right
|
||||
showThread.value = false;
|
||||
}
|
||||
}, { immediate: true });
|
||||
|
||||
const threadTitle = computed(() => {
|
||||
const selected = selectedItem.value;
|
||||
if (selected == null) {
|
||||
return "";
|
||||
}
|
||||
return sources.value[selected.source].items[selected.sourceItem].threads[selected.thread].title;
|
||||
});
|
||||
|
||||
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(`/todo/${source}/${sourceItem}/${thread}`);
|
||||
return true;
|
||||
}
|
||||
|
||||
function snoozeItem(source: number, sourceItem: number, thread: number) {
|
||||
snoozingItem.value = { source, sourceItem, thread };
|
||||
snoozing.value = true;
|
||||
}
|
||||
|
||||
function close() {
|
||||
console.log("closing thread")
|
||||
router.push("/todo");
|
||||
snoozing.value = false;
|
||||
}
|
||||
|
||||
function stopSnoozing() {
|
||||
if (snoozingItem.value?.source === selectedItem.value?.source &&
|
||||
snoozingItem.value?.sourceItem === selectedItem.value?.sourceItem &&
|
||||
(snoozingItem.value?.thread === -1 || snoozingItem.value?.thread === selectedItem.value?.thread)
|
||||
) {
|
||||
close();
|
||||
} else {
|
||||
snoozing.value = false;
|
||||
}
|
||||
}
|
||||
import { todoCategories } from '../../state';
|
||||
import ItemsView from './ItemsView.vue';
|
||||
</script>
|
||||
|
|
|
|||
Loading…
Reference in a new issue