🎉 Initial Commit(Migrated from Interactive)
This commit is contained in:
36
src/components/realms/RealmAction.vue
Normal file
36
src/components/realms/RealmAction.vue
Normal file
@@ -0,0 +1,36 @@
|
||||
<template>
|
||||
<v-menu>
|
||||
<template #activator="{ props }">
|
||||
<v-btn v-bind="props" icon="mdi-dots-vertical" variant="text" size="x-small" />
|
||||
</template>
|
||||
|
||||
<v-list density="compact" lines="one">
|
||||
<v-list-item disabled append-icon="mdi-flag" title="Report" />
|
||||
<v-list-item v-if="isOwned" append-icon="mdi-pencil" title="Edit" @click="editRealm" />
|
||||
<v-list-item v-if="isOwned" append-icon="mdi-delete" title="Delete" @click="deleteRealm" />
|
||||
</v-list>
|
||||
</v-menu>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { useRealms } from "@/stores/realms"
|
||||
import { useUserinfo } from "@/stores/userinfo"
|
||||
import { computed } from "vue"
|
||||
|
||||
const id = useUserinfo()
|
||||
const realms = useRealms()
|
||||
|
||||
const props = defineProps<{ item: any }>()
|
||||
|
||||
const isOwned = computed(() => props.item?.account_id === id.userinfo.data.id)
|
||||
|
||||
function editRealm() {
|
||||
realms.related.edit_to = props.item
|
||||
realms.show.editor = true
|
||||
}
|
||||
|
||||
function deleteRealm() {
|
||||
realms.related.delete_to = props.item
|
||||
realms.show.delete = true
|
||||
}
|
||||
</script>
|
||||
61
src/components/realms/RealmDeletion.vue
Normal file
61
src/components/realms/RealmDeletion.vue
Normal file
@@ -0,0 +1,61 @@
|
||||
<template>
|
||||
<v-card title="Delete a realm" :loading="loading">
|
||||
<template #text>
|
||||
You are deleting a realm
|
||||
<b>{{ realms.related.delete_to?.name }}</b> <br />
|
||||
All posts belonging to this domain will be deleted and never appear again. Are you confirm?
|
||||
</template>
|
||||
<template #actions>
|
||||
<div class="w-full flex justify-end">
|
||||
<v-btn color="grey-darken-3" @click="realms.show.delete = false">Not really</v-btn>
|
||||
<v-btn color="error" :disabled="loading" @click="deletePost">Yes</v-btn>
|
||||
</div>
|
||||
</template>
|
||||
</v-card>
|
||||
|
||||
<v-snackbar v-model="success" :timeout="3000">The realm has been deleted.</v-snackbar>
|
||||
|
||||
<!-- @vue-ignore -->
|
||||
<v-snackbar v-model="error" :timeout="5000">Something went wrong... {{ error }}</v-snackbar>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { request } from "@/scripts/request"
|
||||
import { useRealms } from "@/stores/realms"
|
||||
import { getAtk } from "@/stores/userinfo"
|
||||
import { useRoute, useRouter } from "vue-router"
|
||||
import { ref } from "vue"
|
||||
|
||||
const route = useRoute()
|
||||
const router = useRouter()
|
||||
const realms = useRealms()
|
||||
|
||||
const emits = defineEmits(["relist"])
|
||||
|
||||
const error = ref<string | null>(null)
|
||||
const success = ref(false)
|
||||
const loading = ref(false)
|
||||
|
||||
async function deletePost() {
|
||||
const target = realms.related.delete_to
|
||||
const url = `/api/realms/${target.id}`
|
||||
|
||||
loading.value = true
|
||||
const res = await request("interactive", url, {
|
||||
method: "DELETE",
|
||||
headers: { Authorization: `Bearer ${getAtk()}` }
|
||||
})
|
||||
if (res.status !== 200) {
|
||||
error.value = await res.text()
|
||||
} else {
|
||||
success.value = true
|
||||
realms.show.delete = false
|
||||
realms.related.delete_to = null
|
||||
emits("relist")
|
||||
if (route.name?.toString()?.startsWith("realm")) {
|
||||
router.push({ name: "explore" })
|
||||
}
|
||||
}
|
||||
loading.value = false
|
||||
}
|
||||
</script>
|
||||
90
src/components/realms/RealmEditor.vue
Normal file
90
src/components/realms/RealmEditor.vue
Normal file
@@ -0,0 +1,90 @@
|
||||
<template>
|
||||
<v-card title="Organize a realm" prepend-icon="mdi-account-multiple" :loading="loading">
|
||||
<v-form @submit.prevent="submit">
|
||||
<v-card-text>
|
||||
<v-text-field label="Name" variant="outlined" density="comfortable" v-model="data.name" />
|
||||
<v-textarea label="Description" variant="outlined" density="comfortable" v-model="data.description" />
|
||||
<v-select
|
||||
label="Realm type"
|
||||
item-title="label"
|
||||
item-value="value"
|
||||
variant="outlined"
|
||||
density="comfortable"
|
||||
:items="realmTypeOptions"
|
||||
v-model="data.realm_type"
|
||||
/>
|
||||
</v-card-text>
|
||||
<v-card-actions>
|
||||
<v-spacer></v-spacer>
|
||||
|
||||
<v-btn type="reset" color="grey-darken-3" @click="realms.show.editor = false">Cancel</v-btn>
|
||||
<v-btn type="submit" :disabled="loading">Save</v-btn>
|
||||
</v-card-actions>
|
||||
</v-form>
|
||||
</v-card>
|
||||
|
||||
<!-- @vue-ignore -->
|
||||
<v-snackbar v-model="error" :timeout="5000">Something went wrong... {{ error }}</v-snackbar>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, watch } from "vue"
|
||||
import { getAtk } from "@/stores/userinfo"
|
||||
import { useRealms } from "@/stores/realms"
|
||||
import { request } from "@/scripts/request"
|
||||
|
||||
const emits = defineEmits(["relist"])
|
||||
|
||||
const realms = useRealms()
|
||||
|
||||
const realmTypeOptions = [
|
||||
{ label: "Public Realm", value: 0 },
|
||||
{ label: "Restricted Realm", value: 1 },
|
||||
{ label: "Private Realm", value: 2 }
|
||||
]
|
||||
|
||||
const error = ref<null | string>(null)
|
||||
const loading = ref(false)
|
||||
|
||||
const data = ref({
|
||||
name: "",
|
||||
description: "",
|
||||
realm_type: 0
|
||||
})
|
||||
|
||||
async function submit(evt: SubmitEvent) {
|
||||
const form = evt.target as HTMLFormElement
|
||||
const payload = data.value
|
||||
if (!payload.name) return
|
||||
|
||||
const url = realms.related.edit_to ? `/api/realms/${realms.related.edit_to?.id}` : "/api/realms"
|
||||
const method = realms.related.edit_to ? "PUT" : "POST"
|
||||
|
||||
loading.value = true
|
||||
const res = await request("interactive", url, {
|
||||
method: method,
|
||||
headers: { "Content-Type": "application/json", Authorization: `Bearer ${getAtk()}` },
|
||||
body: JSON.stringify(payload)
|
||||
})
|
||||
if (res.status !== 200) {
|
||||
error.value = await res.text()
|
||||
} else {
|
||||
emits("relist")
|
||||
form.reset()
|
||||
realms.done = true
|
||||
realms.show.editor = false
|
||||
realms.related.edit_to = null
|
||||
}
|
||||
loading.value = false
|
||||
}
|
||||
|
||||
watch(
|
||||
realms.related,
|
||||
(val) => {
|
||||
if (val.edit_to) {
|
||||
data.value = JSON.parse(JSON.stringify(val.edit_to))
|
||||
}
|
||||
},
|
||||
{ immediate: true }
|
||||
)
|
||||
</script>
|
||||
54
src/components/realms/RealmInvitation.vue
Normal file
54
src/components/realms/RealmInvitation.vue
Normal file
@@ -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("interactive", `/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>
|
||||
39
src/components/realms/RealmList.vue
Normal file
39
src/components/realms/RealmList.vue
Normal file
@@ -0,0 +1,39 @@
|
||||
<template>
|
||||
<v-list density="comfortable">
|
||||
<v-list-subheader>
|
||||
Realms
|
||||
<v-badge color="warning" content="Alpha" inline />
|
||||
</v-list-subheader>
|
||||
|
||||
<v-list-item
|
||||
v-for="item in realms.available"
|
||||
exact
|
||||
prepend-icon="mdi-account-multiple"
|
||||
:to="{ name: 'realms.page', params: { realmId: item.id } }"
|
||||
:title="item.name"
|
||||
/>
|
||||
|
||||
<v-divider v-if="realms.available.length > 0" class="border-opacity-75 my-2" />
|
||||
|
||||
<v-list-item
|
||||
prepend-icon="mdi-plus"
|
||||
title="Create a realm"
|
||||
:disabled="!id.userinfo.isLoggedIn"
|
||||
@click="createRealm"
|
||||
/>
|
||||
</v-list>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { useUserinfo } from "@/stores/userinfo"
|
||||
import { useRealms } from "@/stores/realms"
|
||||
|
||||
const id = useUserinfo()
|
||||
const realms = useRealms()
|
||||
|
||||
function createRealm() {
|
||||
realms.related.edit_to = null
|
||||
realms.related.delete_to = null
|
||||
realms.show.editor = true
|
||||
}
|
||||
</script>
|
||||
124
src/components/realms/RealmMembers.vue
Normal file
124
src/components/realms/RealmMembers.vue
Normal file
@@ -0,0 +1,124 @@
|
||||
<template>
|
||||
<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"
|
||||
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 }">
|
||||
<realm-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>
|
||||
</div>
|
||||
</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 RealmInvitation from "@/components/realms/RealmInvitation.vue"
|
||||
|
||||
const id = useUserinfo()
|
||||
|
||||
const props = defineProps<{ item: any }>()
|
||||
|
||||
const members = ref<any[]>([])
|
||||
|
||||
const isOwned = computed(() => {
|
||||
return id.userinfo.data?.id === 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("interactive", `/api/realms/${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("interactive", `/api/realms/${props.item?.id}/kick`, {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json", Authorization: `Bearer ${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.data?.id) return false
|
||||
if (item.account?.id === props.item?.account_id) return false
|
||||
return true
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.rounded-card {
|
||||
border-radius: 8px;
|
||||
}
|
||||
</style>
|
||||
16
src/components/realms/RealmTools.vue
Normal file
16
src/components/realms/RealmTools.vue
Normal file
@@ -0,0 +1,16 @@
|
||||
<template>
|
||||
<v-dialog v-model="realms.show.editor" class="max-w-[540px]">
|
||||
<realm-editor @relist="realms.list" />
|
||||
</v-dialog>
|
||||
<v-dialog v-model="realms.show.delete" class="max-w-[540px]">
|
||||
<realm-deletion @relist="realms.list" />
|
||||
</v-dialog>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { useRealms } from "@/stores/realms"
|
||||
import RealmEditor from "@/components/realms/RealmEditor.vue"
|
||||
import RealmDeletion from "./RealmDeletion.vue"
|
||||
|
||||
const realms = useRealms()
|
||||
</script>
|
||||
Reference in New Issue
Block a user