ayo/yolk
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: remove / add accounts to current list

Browse source
This commit is contained in:
Ayo Ayco 2025-04-25 19:55:00 +02:00
parent 219756d1db
commit 3d252c1984
1 changed files with 29 additions and 20 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

45
pages/[[server]]/list/[list]/index/accounts.vue
View file

@ -1,4 +1,5 @@
<script setup lang="ts"> <script setup lang="ts">
import type { mastodon } from 'masto'
import AccountSearchResult from '~/components/list/AccountSearchResult.vue' import AccountSearchResult from '~/components/list/AccountSearchResult.vue'
definePageMeta({ definePageMeta({
@ -13,10 +14,9 @@ defineExpose({
const params = useRoute().params const params = useRoute().params
const listId = computed(() => params.list as string) const listId = computed(() => params.list as string)
const $mastoList = useMastoClient().v1.lists.$select(listId.value).accounts const mastoListAccounts = useMastoClient().v1.lists.$select(listId.value).accounts
const paginator = $mastoList.list() const paginator = mastoListAccounts.list()
const accountsInList = ref((await useMastoClient().v1.lists.$select(listId.value).accounts.list({ limit: 0 })).map(account => account.id)) const accountsInList = ref((await useMastoClient().v1.lists.$select(listId.value).accounts.list({ limit: 1000 })))
// console.log('>>> acccounts', accountsInList.value)
const paginatorRef = ref() const paginatorRef = ref()
@ -30,7 +30,7 @@ const { focused } = useFocusWithin(el)
const index = ref(0) const index = ref(0)
function isInCurrentList(userId: string) { function isInCurrentList(userId: string) {
return accountsInList.value.includes(userId) return accountsInList.value.map(account => account.id).includes(userId)
} }
const results = computed(() => { const results = computed(() => {
@ -46,19 +46,29 @@ function shift(delta: number) {
return index.value = (index.value + delta % results.value.length + results.value.length) % results.value.length return index.value = (index.value + delta % results.value.length + results.value.length) % results.value.length
} }
const actionError = false function addAccount(account: mastodon.v1.Account) {
function addAccount(id: string) { try {
const newEntry = $mastoList.create({ accountIds: [id] }) mastoListAccounts.create({ accountIds: [account.id] })
accountsInList.value.push(id) accountsInList.value.push(account)
paginatorRef.value?.createEntry(newEntry) paginatorRef.value?.createEntry(account)
}
catch (err) {
console.error(err)
}
} }
function removeAccount(id: string) {
$mastoList.remove({ accountIds: [id] }) function removeAccount(account: mastodon.v1.Account) {
const index = accountsInList.value.indexOf(id) try {
mastoListAccounts.remove({ accountIds: [account.id] })
const accountIdsInList = accountsInList.value.map(account => account.id)
const index = accountIdsInList.indexOf(account.id)
if (index > -1) { if (index > -1) {
accountsInList.value.splice(index, 1) accountsInList.value.splice(index, 1)
paginatorRef.value?.removeEntry(id) paginatorRef.value?.removeEntry(account.id)
// console.log('remove', paginatorRef.value, id) }
}
catch (err) {
console.error(err)
} }
} }
</script> </script>
@ -70,8 +80,6 @@ function removeAccount(id: string) {
border="t base" border="t base"
p-4 w-full p-4 w-full
flex="~ wrap" relative gap-3 flex="~ wrap" relative gap-3
:aria-describedby="actionError ? 'create-list-error' : undefined"
:class="actionError ? 'border border-base border-rounded rounded-be-is-0 rounded-be-ie-0 border-b-unset border-$c-danger-active' : null"
> >
<div <div
bg-base border="~ base" flex-1 h10 ps-1 pe-4 rounded-2 w-full flex="~ row" bg-base border="~ base" flex-1 h10 ps-1 pe-4 rounded-2 w-full flex="~ row"
@ -94,6 +102,7 @@ function removeAccount(id: string) {
@keydown.down.prevent="shift(1)" @keydown.down.prevent="shift(1)"
@keydown.up.prevent="shift(-1)" @keydown.up.prevent="shift(-1)"
@keydown.esc.prevent="inputRef?.blur()" @keydown.esc.prevent="inputRef?.blur()"
@keydown.enter.prevent
> >
<button v-if="query.length" btn-action-icon text-secondary @click="query = ''; inputRef?.focus()"> <button v-if="query.length" btn-action-icon text-secondary @click="query = ''; inputRef?.focus()">
<span aria-hidden="true" class="i-ri:close-line" /> <span aria-hidden="true" class="i-ri:close-line" />
@ -126,7 +135,7 @@ function removeAccount(id: string) {
text-sm p2 border-1 transition-colors text-sm p2 border-1 transition-colors
border-dark border-dark
btn-action-icon btn-action-icon
@click=" () => isInCurrentList(result.id) ? removeAccount(result.id) : addAccount(result.id) " @click=" () => isInCurrentList(result.id) ? removeAccount(result.data) : addAccount(result.data) "
> >
<span :class="isInCurrentList(result.id) ? 'i-ri:user-unfollow-line' : 'i-ri:user-add-line'" /> <span :class="isInCurrentList(result.id) ? 'i-ri:user-unfollow-line' : 'i-ri:user-add-line'" />
</button> </button>