rockfic/next
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(pages): add subscribe+unsubscribe buttons to bands page

Browse Source
This commit is contained in:
✑ ☙◦❀ The Tablet ☯ GamerGirlandCo ❀◦❧ 2023-10-11 13:23:08 -04:00
parent a5ca37b4b7
commit 681d90dc6f
Signed by: tablet
GPG Key ID: 924A5F6AF051E87C
1 changed files with 51 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

69
pages/bands.vue
View File

@ -1,36 +1,51 @@
<script lang="ts" setup> <script lang="ts" setup>
import { IBand } from '~/models/band'; import { IBand } from "~/models/band";
import icon from '~/components/icon.vue'; import icon from "~/components/icon.vue";
const {data} = await useApiFetch("/bands/all") import { subscriptions, bp } from "~/lib/client/listActions";
const bands = data as Ref<IBand[]> import { IUser } from "~/models/user";
const hider = (id: number) => (e) => {
bands.value.splice(bands.value.findIndex(a => a._id == id), 1) const { data: bands } = (await useApiFetch<NonNullable<IBand[]>>(
useApiFetch("/user/hide", { "/bands/all",
body: { )) as { data: Ref<IBand[]> };
authors: [],
bands: [id] const { data: rd }: { data: any } = useAuth();
}, const data = rd as { user: IUser };
method: "post"
}) const hider = subscriptions;
} if (bands.value == null) bands.value = [];
</script> </script>
<template> <template>
<a-list :grid="{ gutter: 5, xs: 1, sm: 2, md: 4, lg: 4, xl: 6, xxl: 7 }" v-model:data-source="bands"> <a-list v-model:data-source="bands" :grid="bp">
<template #renderItem="{ item } "> <template #renderItem="{ item }">
<a-list-item> <a-list-item>
<a-row :gutter="[10, 10]"> <a-row :gutter="[5, 5]">
<a-col> <a-col>
<NuxtLink :to="`/band/${item._id}`"> <nuxt-link :to="`/band/${item._id}`">
{{ item.name }} {{ item.name }}
</NuxtLink> </nuxt-link>
</a-col> </a-col>
<a-col> <!-- subscribe... -->
<a @click="hider(item._id)"> <a-col v-if="data && data.user?._id" style="margin-left: auto">
<icon :istyle="'regular'" name="eye-slash" :size="12"/> <a
</a> v-if="!data?.user.subscriptions.bands.includes(item._id)"
@click="(e) => hider(bands, item._id, 'subscribe', 'bands')"
>
<icon :istyle="'regular'" name="paper-plane" :size="12" />
</a>
<a
v-else
@click="(e) => hider(bands, item._id, 'unsubscribe', 'bands')"
>
<icon :istyle="'regular'" name="x" :size="12" />
</a>
</a-col>
<a-col v-if="data?.user._id">
<a @click="(e) => hider(bands, item._id, 'hide', 'bands')">
<icon :istyle="'regular'" name="eye-slash" :size="12" />
</a>
</a-col> </a-col>
</a-row> </a-row>
</a-list-item> </a-list-item>
</template> </template>
</a-list> </a-list>
</template> </template>