diff options
Diffstat (limited to 'packages/frontend/src/pages')
| -rw-r--r-- | packages/frontend/src/pages/my-antennas/create.vue | 6 | ||||
| -rw-r--r-- | packages/frontend/src/pages/my-antennas/edit.vue | 6 | ||||
| -rw-r--r-- | packages/frontend/src/pages/my-antennas/index.vue | 89 | ||||
| -rw-r--r-- | packages/frontend/src/pages/my-lists/index.vue | 53 |
4 files changed, 92 insertions, 62 deletions
diff --git a/packages/frontend/src/pages/my-antennas/create.vue b/packages/frontend/src/pages/my-antennas/create.vue index 355d18fdb5..632c36bbf8 100644 --- a/packages/frontend/src/pages/my-antennas/create.vue +++ b/packages/frontend/src/pages/my-antennas/create.vue @@ -9,6 +9,7 @@ import XAntenna from './editor.vue'; import { i18n } from '@/i18n'; import { definePageMetadata } from '@/scripts/page-metadata'; import { useRouter } from '@/router'; +import { antennasCache } from '@/cache'; const router = useRouter(); @@ -26,13 +27,10 @@ let draft = $ref({ }); function onAntennaCreated() { + antennasCache.delete(); router.push('/my/antennas'); } -const headerActions = $computed(() => []); - -const headerTabs = $computed(() => []); - definePageMetadata({ title: i18n.ts.manageAntennas, icon: 'ti ti-antenna', diff --git a/packages/frontend/src/pages/my-antennas/edit.vue b/packages/frontend/src/pages/my-antennas/edit.vue index da9b2de48f..3fb9690ac1 100644 --- a/packages/frontend/src/pages/my-antennas/edit.vue +++ b/packages/frontend/src/pages/my-antennas/edit.vue @@ -10,6 +10,7 @@ import * as os from '@/os'; import { i18n } from '@/i18n'; import { useRouter } from '@/router'; import { definePageMetadata } from '@/scripts/page-metadata'; +import { antennasCache } from '@/cache'; const router = useRouter(); @@ -20,6 +21,7 @@ const props = defineProps<{ }>(); function onAntennaUpdated() { + antennasCache.delete(); router.push('/my/antennas'); } @@ -27,10 +29,6 @@ os.api('antennas/show', { antennaId: props.antennaId }).then((antennaResponse) = antenna = antennaResponse; }); -const headerActions = $computed(() => []); - -const headerTabs = $computed(() => []); - definePageMetadata({ title: i18n.ts.manageAntennas, icon: 'ti ti-antenna', diff --git a/packages/frontend/src/pages/my-antennas/index.vue b/packages/frontend/src/pages/my-antennas/index.vue index 2ca026b9a1..1e9136f1fa 100644 --- a/packages/frontend/src/pages/my-antennas/index.vue +++ b/packages/frontend/src/pages/my-antennas/index.vue @@ -2,15 +2,20 @@ <MkStickyContainer> <template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs"/></template> <MkSpacer :contentMax="700"> - <div class="ieepwinx"> - <MkButton :link="true" to="/my/antennas/create" primary class="add"><i class="ti ti-plus"></i> {{ i18n.ts.add }}</MkButton> + <div> + <div v-if="antennas.length === 0" class="empty"> + <div class="_fullinfo"> + <img :src="infoImageUrl" class="_ghost"/> + <div>{{ i18n.ts.nothing }}</div> + </div> + </div> + + <MkButton :link="true" to="/my/antennas/create" primary :class="$style.add"><i class="ti ti-plus"></i> {{ i18n.ts.add }}</MkButton> - <div class=""> - <MkPagination v-slot="{items}" ref="list" :pagination="pagination"> - <MkA v-for="antenna in items" :key="antenna.id" class="ljoevbzj" :to="`/my/antennas/${antenna.id}`"> - <div class="name">{{ antenna.name }}</div> - </MkA> - </MkPagination> + <div v-if="antennas.length > 0" class="_gaps"> + <MkA v-for="antenna in antennas" :key="antenna.id" :class="$style.antenna" :to="`/my/antennas/${antenna.id}`"> + <div class="name">{{ antenna.name }}</div> + </MkA> </div> </div> </MkSpacer> @@ -18,19 +23,31 @@ </template> <script lang="ts" setup> -import { } from 'vue'; -import MkPagination from '@/components/MkPagination.vue'; import MkButton from '@/components/MkButton.vue'; import { i18n } from '@/i18n'; import { definePageMetadata } from '@/scripts/page-metadata'; +import { antennasCache } from '@/cache'; +import { api } from '@/os'; +import { onActivated } from 'vue'; +import { infoImageUrl } from '@/instance'; -const pagination = { - endpoint: 'antennas/list' as const, - noPaging: true, - limit: 10, -}; +const antennas = $computed(() => antennasCache.value.value ?? []); + +function fetch() { + antennasCache.fetch(() => api('antennas/list')); +} -const headerActions = $computed(() => []); +fetch(); + +const headerActions = $computed(() => [{ + asFullButton: true, + icon: 'ti ti-refresh', + text: i18n.ts.reload, + handler: () => { + antennasCache.delete(); + fetch(); + }, +}]); const headerTabs = $computed(() => []); @@ -38,30 +55,30 @@ definePageMetadata({ title: i18n.ts.manageAntennas, icon: 'ti ti-antenna', }); -</script> - -<style lang="scss" scoped> -.ieepwinx { - > .add { - margin: 0 auto 16px auto; - } +onActivated(() => { + antennasCache.fetch(() => api('antennas/list')); +}); +</script> - .ljoevbzj { - display: block; - padding: 16px; - margin-bottom: 8px; - border: solid 1px var(--divider); - border-radius: 6px; +<style lang="scss" module> +.add { + margin: 0 auto 16px auto; +} - &:hover { - border: solid 1px var(--accent); - text-decoration: none; - } +.antenna { + display: block; + padding: 16px; + border: solid 1px var(--divider); + border-radius: 6px; - > .name { - font-weight: bold; - } + &:hover { + border: solid 1px var(--accent); + text-decoration: none; } } + +.name { + font-weight: bold; +} </style> diff --git a/packages/frontend/src/pages/my-lists/index.vue b/packages/frontend/src/pages/my-lists/index.vue index cee241c489..0f59ca0b36 100644 --- a/packages/frontend/src/pages/my-lists/index.vue +++ b/packages/frontend/src/pages/my-lists/index.vue @@ -3,38 +3,43 @@ <template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs"/></template> <MkSpacer :contentMax="700"> <div class="_gaps"> + <div v-if="items.length === 0" class="empty"> + <div class="_fullinfo"> + <img :src="infoImageUrl" class="_ghost"/> + <div>{{ i18n.ts.nothing }}</div> + </div> + </div> + <MkButton primary rounded style="margin: 0 auto;" @click="create"><i class="ti ti-plus"></i> {{ i18n.ts.createList }}</MkButton> - <MkPagination v-slot="{items}" ref="pagingComponent" :pagination="pagination"> - <div class="_gaps"> - <MkA v-for="list in items" :key="list.id" class="_panel" :class="$style.list" :to="`/my/lists/${ list.id }`"> - <div style="margin-bottom: 4px;">{{ list.name }}</div> - <MkAvatars :userIds="list.userIds"/> - </MkA> - </div> - </MkPagination> + <div v-if="items.length > 0" class="_gaps"> + <MkA v-for="list in items" :key="list.id" class="_panel" :class="$style.list" :to="`/my/lists/${ list.id }`"> + <div style="margin-bottom: 4px;">{{ list.name }}</div> + <MkAvatars :userIds="list.userIds" :limit="10"/> + </MkA> + </div> </div> </MkSpacer> </MkStickyContainer> </template> <script lang="ts" setup> -import { } from 'vue'; -import MkPagination from '@/components/MkPagination.vue'; +import { onActivated } from 'vue'; import MkButton from '@/components/MkButton.vue'; import MkAvatars from '@/components/MkAvatars.vue'; import * as os from '@/os'; import { i18n } from '@/i18n'; import { definePageMetadata } from '@/scripts/page-metadata'; import { userListsCache } from '@/cache'; +import { infoImageUrl } from '@/instance'; + +const items = $computed(() => userListsCache.value.value ?? []); -const pagingComponent = $shallowRef<InstanceType<typeof MkPagination>>(); +function fetch() { + userListsCache.fetch(() => os.api('users/lists/list')); +} -const pagination = { - endpoint: 'users/lists/list' as const, - noPaging: true, - limit: 10, -}; +fetch(); async function create() { const { canceled, result: name } = await os.inputText({ @@ -43,10 +48,18 @@ async function create() { if (canceled) return; await os.apiWithDialog('users/lists/create', { name: name }); userListsCache.delete(); - pagingComponent.reload(); + fetch(); } -const headerActions = $computed(() => []); +const headerActions = $computed(() => [{ + asFullButton: true, + icon: 'ti ti-refresh', + text: i18n.ts.reload, + handler: () => { + userListsCache.delete(); + fetch(); + }, +}]); const headerTabs = $computed(() => []); @@ -58,6 +71,10 @@ definePageMetadata({ handler: create, }, }); + +onActivated(() => { + fetch(); +}); </script> <style lang="scss" module> |