<script lang="ts" setup> import { IBand } from "@models/band"; import icon from "~/components/icon.vue"; import { subscriptions, bp } from "@client/listActions"; import { IUser } from "@models/user"; const { data: bands } = (await useApiFetch<NonNullable<IBand[]>>("/band/all")) as unknown as { data: Ref<IBand[]> }; const { data: { value: rd }, getSession, } = useAuth(); await getSession({ force: true }); let inc = ref<number>(1); const data = ref(rd); const refresh = async () => { await useAuth().getSession({ force: true }); data.value = useAuth().data.value; //inc.value += 1; }; const hider = subscriptions; if (bands.value == null) bands.value = []; useHead({ title: "Bands", }); </script> <template> <a-list v-model:data-source="bands" :grid="bp"> <template #renderItem="{ item }"> <a-list-item :key="item._id + inc"> <a-row :gutter="[5, 5]"> <a-col> <nuxt-link :to="`/band/${item._id}`"> {{ item.name }} </nuxt-link> </a-col> <!-- subscribe... --> <a-col v-if="data && data.user?._id" style="margin-left: auto"> <a v-if="!data?.user.subscriptions.bands.includes(item._id)" @click=" async (e) => { await hider(bands, item._id, 'subscribe', 'bands'); await refresh(); } " > <icon :istyle="'regular'" name="paper-plane" :size="12" /> </a> <a v-else @click=" async (e) => { await hider(bands, item._id, 'unsubscribe', 'bands'); await refresh(); } " > <icon :istyle="'regular'" name="x" :size="12" /> </a> </a-col> <a-col v-if="data?.user._id"> <a @click=" async (e) => { await hider(bands, item._id, 'hide', 'bands'); await refresh(); } " > <icon :istyle="'regular'" name="eye-slash" :size="12" /> </a> </a-col> </a-row> </a-list-item> </template> </a-list> </template>