✨ Channels member manage

2024-03-31 01:18:19 +08:00
parent 73b1e376a3
commit fbf45dab57
7 changed files with 193 additions and 2 deletions
--- a/src/components/chat/channels/ChannelMembers.vue
+++ b/src/components/chat/channels/ChannelMembers.vue
@@ -0,0 +1,124 @@
+<template>
+  <v-card title="Channel members" class="min-h-[540px]">
+    <v-list density="comfortable" lines="one">
+      <v-list-item v-for="item in members" :title="item.account.nick">
+        <template #subtitle>@{{ item.account.name }}</template>
+        <template #prepend>
+          <v-avatar
+            color="grey-lighten-2"
+            icon="mdi-account-circle"
+            class="rounded-card me-2"
+            size="small"
+            :image="item?.account.avatar"
+          />
+        </template>
+        <template #append>
+          <v-btn
+            icon="mdi-account-remove"
+            size="x-small"
+            color="error"
+            variant="text"
+            :disabled="!checkKickable(item)"
+            @click="kickMember(item)"
+          />
+        </template>
+      </v-list-item>
+    </v-list>
+
+    <div v-if="isOwned">
+      <v-divider class="mt-2 mb-3 border-opacity-50 mx-[-1rem]" />
+
+      <div class="px-3">
+        <v-dialog class="max-w-[540px]">
+          <template #activator="{ props }">
+            <v-btn v-bind="props" block prepend-icon="mdi-account-plus" variant="plain"> Invite someone </v-btn>
+          </template>
+
+          <template #default="{ isActive }">
+            <channel-invitation
+              :item="props.item"
+              @relist="listMembers"
+              @error="(val) => (error = val)"
+              @close="isActive.value = false"
+            />
+          </template>
+        </v-dialog>
+      </div>
+    </div>
+
+    <!-- @vue-ignore -->
+    <v-snackbar v-model="error" :timeout="5000">Something went wrong... {{ error }}</v-snackbar>
+  </v-card>
+</template>
+
+<script setup lang="ts">
+import { ref, watch } from "vue"
+import { request } from "@/scripts/request"
+import { getAtk, useUserinfo } from "@/stores/userinfo"
+import { computed } from "vue"
+import ChannelInvitation from "@/components/chat/channels/ChannelInvitation.vue"
+
+const id = useUserinfo()
+
+const props = defineProps<{ item: any }>()
+
+const members = ref<any[]>([])
+
+const isOwned = computed(() => {
+  return id.userinfo.idSet?.messaging === props.item?.account_id
+})
+
+const loading = ref(false)
+const error = ref<string | null>(null)
+
+watch(
+  () => props.item,
+  (val) => {
+    if (val?.id) {
+      listMembers(val.id)
+    }
+  },
+  { deep: true, immediate: true }
+)
+
+async function listMembers(id: number) {
+  loading.value = true
+  const res = await request("messaging", `/api/channels/${id}/members`)
+  if (res.status !== 200) {
+    error.value = await res.text()
+  } else {
+    error.value = null
+    members.value = await res.json()
+  }
+  loading.value = false
+}
+
+async function kickMember(item: any) {
+  loading.value = true
+  const res = await request("messaging", `/api/channels/${props.item?.id}/kick`, {
+    method: "POST",
+    headers: { "Content-Type": "application/json", Authorization: `Bearer ${await getAtk()}` },
+    body: JSON.stringify({
+      account_name: item.account.name
+    })
+  })
+  if (res.status !== 200) {
+    error.value = await res.text()
+  } else {
+    await listMembers(props.item?.id)
+  }
+  loading.value = false
+}
+
+function checkKickable(item: any) {
+  if (item.account?.id === id.userinfo.idSet?.messaging) return false
+  if (item.account?.id === props.item?.account_id) return false
+  return true
+}
+</script>
+
+<style>
+.rounded-card {
+  border-radius: 8px;
+}
+</style>