<script lang="ts" setup> import { IBand } from "~/models/band"; import icon from "~/components/icon.vue"; import { subscriptions, bp } from "~/lib/client/listActions"; import { IUser } from "~/models/user"; const { data: bands } = (await useApiFetch<NonNullable<IBand[]>>( "/bands/all", )) as { data: Ref<IBand[]> }; const { data: rd }: { data: any } = useAuth(); const data = rd as { user: IUser }; const hider = subscriptions; if (bands.value == null) bands.value = []; </script> <template> <a-list v-model:data-source="bands" :grid="bp"> <template #renderItem="{ item }"> <a-list-item> <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="(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-row> </a-list-item> </template> </a-list> </template>