elk/components/list/Lists.vue

54 lines
1.6 KiB
Vue
Raw Normal View History

2023-01-27 15:15:46 +00:00
<script lang="ts" setup>
const { userId } = defineProps<{
userId: string
}>()
const { client } = $(useMasto())
const paginator = client.v1.lists.list()
2024-01-09 08:56:15 +00:00
const listsWithUser = ref((await client.v1.accounts.$select(userId).lists.list()).map(list => list.id))
2023-01-27 15:15:46 +00:00
function indexOfUserInList(listId: string) {
return listsWithUser.value.indexOf(listId)
}
async function edit(listId: string) {
try {
const index = indexOfUserInList(listId)
if (index === -1) {
2024-01-09 08:56:15 +00:00
await client.v1.lists.$select(listId).accounts.create({ accountIds: [userId] })
2023-01-27 15:15:46 +00:00
listsWithUser.value.push(listId)
}
else {
2024-01-09 08:56:15 +00:00
await client.v1.lists.$select(listId).accounts.remove({ accountIds: [userId] })
2023-01-27 15:15:46 +00:00
listsWithUser.value = listsWithUser.value.filter(id => id !== listId)
}
}
catch (err) {
console.error(err)
}
}
</script>
<template>
<CommonPaginator :end-message="false" :paginator="paginator">
2023-01-27 15:15:46 +00:00
<template #default="{ item }">
<div p4 hover:bg-active block w="100%" flex justify-between items-center gap-4>
<p>{{ item.title }}</p>
<CommonTooltip
:content="indexOfUserInList(item.id) === -1 ? $t('list.add_account') : $t('list.remove_account')"
:hover="indexOfUserInList(item.id) === -1 ? 'text-green' : 'text-red'"
>
<button
2023-02-02 23:09:12 +00:00
text-sm p2 border-1 transition-colors
border-dark
btn-action-icon
@click="() => edit(item.id)"
>
<span :class="indexOfUserInList(item.id) === -1 ? 'i-ri:user-add-line' : 'i-ri:user-unfollow-line'" />
</button>
2023-01-27 15:15:46 +00:00
</CommonTooltip>
</div>
</template>
</CommonPaginator>
</template>