✨ Removable members

pkg/views/src/components/realms/RealmInvitation.vue

@@ -0,0 +1,54 @@
+<template>
+  <v-card prepend-icon="mdi-account-plus" title="Invite someone">
+    <v-form @submit.prevent="inviteMember">
+      <v-card-text>
+        <v-text-field
+          label="Username"
+          variant="outlined"
+          density="comfortable"
+          hint="Require username not the nickname"
+          v-model="targetName"
+        />
+      </v-card-text>
+      <v-card-actions>
+        <v-spacer></v-spacer>
+
+        <v-btn type="reset" color="grey-darken-3" @click="emits('close')">Cancel</v-btn>
+        <v-btn type="submit" :disabled="loading">Invite</v-btn>
+      </v-card-actions>
+    </v-form>
+  </v-card>
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue"
+import { request } from "@/scripts/request"
+import { getAtk } from "@/stores/userinfo"
+
+const props = defineProps<{item: any}>()
+const emits = defineEmits(["close", "error", "relist"])
+
+const loading = ref(false)
+
+const targetName = ref("")
+
+async function inviteMember(evt: SubmitEvent) {
+  const form = evt.target as HTMLFormElement
+
+  loading.value = true
+  const res = await request(`/api/realms/${props.item?.id}/invite`, {
+    method: "POST",
+    headers: { "Content-Type": "application/json", Authorization: `Bearer ${getAtk()}` },
+    body: JSON.stringify({
+        account_name: targetName.value
+    })
+  })
+  if (res.status !== 200) {
+    emits("error", await res.text())
+  } else {
+    form.reset()
+    emits("relist")
+  }
+  loading.value = false
+}
+</script>

pkg/views/src/components/realms/RealmMembers.vue

@@ -2,6 +2,7 @@
   <div>
     <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"
@@ -11,7 +12,16 @@
             :image="item?.account.avatar"
           />
         </template>
-        <template #subtitle>@{{ item.account.name }}</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>
 
@@ -25,25 +35,12 @@
           </template>
 
           <template #default="{ isActive }">
-            <v-card prepend-icon="mdi-account-plus" title="Invite someone">
+            <realm-invitation
-              <v-form @submit.prevent="inviteMember">
+              :item="props.item"
-                <v-card-text>
+              @relist="listMembers"
-                  <v-text-field
+              @error="(val) => (error = val)"
-                    label="Username"
+              @close="isActive.value = false"
-                    variant="outlined"
+            />
-                    density="comfortable"
-                    hint="Require username not the nickname"
-                    v-model="data.account_name"
-                  />
-                </v-card-text>
-                <v-card-actions>
-                  <v-spacer></v-spacer>
-
-                  <v-btn type="reset" color="grey-darken-3" @click="isActive.value = false">Cancel</v-btn>
-                  <v-btn type="submit" :disabled="loading">Invite</v-btn>
-                </v-card-actions>
-              </v-form>
-            </v-card>
           </template>
         </v-dialog>
       </div>
@@ -59,15 +56,12 @@ import { ref, watch } from "vue"
 import { request } from "@/scripts/request"
 import { getAtk, useUserinfo } from "@/stores/userinfo"
 import { computed } from "vue"
+import RealmInvitation from "@/components/realms/RealmInvitation.vue"
 
 const id = useUserinfo()
 
 const props = defineProps<{ item: any }>()
 
-const data = ref<any>({
-  account_name: ""
-})
-
 const members = ref<any[]>([])
 
 const isOwned = computed(() => {
@@ -99,24 +93,28 @@ async function listMembers(id: number) {
   loading.value = false
 }
 
-async function inviteMember(evt: SubmitEvent) {
+async function kickMember(item: any) {
-  const form = evt.target as HTMLFormElement
-  const payload = data.value
-
   loading.value = true
-  const res = await request(`/api/realms/${props.item?.id}/invite`, {
+  const res = await request(`/api/realms/${props.item?.id}/kick`, {
     method: "POST",
     headers: { "Content-Type": "application/json", Authorization: `Bearer ${getAtk()}` },
-    body: JSON.stringify(payload)
+    body: JSON.stringify({
+        account_name: item.account.name
+    })
   })
   if (res.status !== 200) {
     error.value = await res.text()
   } else {
-    form.reset()
     await listMembers(props.item?.id)
   }
   loading.value = false
 }
+
+function checkKickable(item: any) {
+  if (item.account?.id === id.userinfo.data?.id) return false
+  if (item.account?.id === props.item?.account_id) return false
+  return true
+}
 </script>
 
 <style>

pkg/views/src/views/realms/page.vue

@@ -25,7 +25,7 @@
       </v-card>
 
       <v-card class="mt-3 pb-3" title="Realm Members">
-        <realm-members :item="metadata" />
+        <realm-members class="mt-[-8px]" :item="metadata" />
       </v-card>
     </div>
   </v-container>