mia/FoundKey
1
0
Fork 0
forked from FoundKeyGang/FoundKey
Code Issues Pull requests Projects Releases Packages Wiki Activity

make tab default to 'all' if not valid

Browse source
This commit is contained in:
Norm 2022-09-03 17:31:14 -04:00
parent 6565289bd9
commit 29e3d8175f
Signed by untrusted user: norm
GPG key ID: 7123E30E441E80DE
1 changed files with 58 additions and 58 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

116
packages/client/src/pages/notifications.vue
View file

@ -2,15 +2,15 @@
<MkStickyContainer>
<template #header><MkPageHeader v-model:tab="tab" :actions="headerActions" :tabs="headerTabs"/></template>
<MkSpacer :content-max="800">
<div v-if="tab === 'all' || tab === 'unread'">
<XNotifications class="notifications" :include-types="includeTypes" :unread-only="unreadOnly"/>
</div>
<div v-else-if="tab === 'mentions'">
<div v-if="tab === 'mentions'">
<XNotes :pagination="mentionsPagination"/>
</div>
<div v-else-if="tab === 'directNotes'">
<XNotes :pagination="directNotesPagination"/>
</div>
<div v-else>
<XNotifications class="notifications" :include-types="includeTypes" :unread-only="unreadOnly"/>
</div>
</MkSpacer>
</MkStickyContainer>
</template>
@ -24,60 +24,6 @@ import * as os from '@/os';
import { i18n } from '@/i18n';
import { definePageMetadata } from '@/scripts/page-metadata';
const props = withDefaults(defineProps<{
initialTab?: string;
}>(), {
initialTab: 'all',
});
let tab = $ref(props.initialTab);
let includeTypes = $ref<string[] | null>(null);
let unreadOnly = $computed(() => tab === 'unread');
const mentionsPagination = {
endpoint: 'notes/mentions' as const,
limit: 10,
};
const directNotesPagination = {
endpoint: 'notes/mentions' as const,
limit: 10,
params: {
visibility: 'specified',
},
};
function setFilter(ev) {
const typeItems = notificationTypes.map(t => ({
text: i18n.t(`_notification._types.${t}`),
active: includeTypes && includeTypes.includes(t),
action: () => {
includeTypes = [t];
},
}));
const items = includeTypes != null ? [{
icon: 'fas fa-times',
text: i18n.ts.clear,
action: () => {
includeTypes = null;
},
}, null, ...typeItems] : typeItems;
os.popupMenu(items, ev.currentTarget ?? ev.target);
}
const headerActions = $computed(() => [tab === 'all' ? {
text: i18n.ts.filter,
icon: 'fas fa-filter',
highlighted: includeTypes != null,
handler: setFilter,
} : undefined, tab === 'all' ? {
text: i18n.ts.markAllAsRead,
icon: 'fas fa-check',
handler: () => {
os.apiWithDialog('notifications/mark-all-as-read');
},
} : undefined].filter(x => x !== undefined));
const headerTabs = $computed(() => [{
key: 'all',
title: i18n.ts.all,
@ -94,6 +40,60 @@ const headerTabs = $computed(() => [{
icon: 'fas fa-envelope',
}]);
const props = withDefaults(defineProps<{
initialTab?: string;
}>(), {
initialTab: 'all',
});
let tab = $ref(headerTabs.some(({ key }) => key === props.initialTab) ? props.initialTab : 'all');
let includeTypes = $ref<string[] | null>(null);
let unreadOnly = $computed(() => tab === 'unread');
const mentionsPagination = {
endpoint: 'notes/mentions' as const,
limit: 10,
};
const directNotesPagination = {
endpoint: 'notes/mentions' as const,
limit: 10,
params: {
visibility: 'specified',
},
};
function setFilter(ev: Event): void {
const typeItems = notificationTypes.map(t => ({
text: i18n.t(`_notification._types.${t}`),
active: includeTypes && includeTypes.includes(t),
action: () => {
includeTypes = [t];
},
}));
const items = includeTypes != null ? [{
icon: 'fas fa-times',
text: i18n.ts.clear,
action: () => {
includeTypes = null;
},
}, null, ...typeItems] : typeItems;
os.popupMenu(items, ev.currentTarget ?? ev.target);
}
const headerActions = $computed(() => tab === 'all' ? [{
text: i18n.ts.filter,
icon: 'fas fa-filter',
highlighted: includeTypes != null,
handler: setFilter,
},{
text: i18n.ts.markAllAsRead,
icon: 'fas fa-check',
handler: () => {
os.apiWithDialog('notifications/mark-all-as-read');
},
}] : []);
definePageMetadata(computed(() => ({
title: i18n.ts.notifications,
icon: 'fas fa-bell',