formatting
This commit is contained in:
ThatOneCalculator
parent
25b032e1aa
commit
64a96b8f67
|
|
@ -3,11 +3,19 @@
|
|||
<template #header><MkPageHeader /></template>
|
||||
<div class="mk-group-page">
|
||||
<div class="_section">
|
||||
<div class="_content" style="display: flex; gap: var(--margin); flex-wrap: wrap;">
|
||||
<div
|
||||
class="_content"
|
||||
style="display: flex; gap: var(--margin); flex-wrap: wrap"
|
||||
>
|
||||
<MkButton inline @click="invite()">{{ i18n.ts.invite }}</MkButton>
|
||||
<MkButton inline @click="renameGroup()">{{ i18n.ts.rename }}</MkButton>
|
||||
<MkButton inline @click="renameGroup()">{{
|
||||
i18n.ts.rename
|
||||
}}</MkButton>
|
||||
<MkButton inline @click="transfer()">{{ i18n.ts.transfer }}</MkButton>
|
||||
<MkButton inline @click="deleteGroup()">{{ i18n.ts.delete }}</MkButton>
|
||||
<MkButton inline @click="deleteGroup()">{{
|
||||
i18n.ts.delete
|
||||
}}
|
||||
</MkButton>
|
||||
</div>
|
||||
</div>
|
||||
<div class="_section members _gap">
|
||||
|
|
@ -20,7 +28,9 @@
|
|||
<MkAcct :user="user" class="acct" />
|
||||
</div>
|
||||
<div class="action">
|
||||
<button class="_button" @click="removeUser(user)"><i class="fas fa-times"></i></button>
|
||||
<button class="_button" @click="removeUser(user)">
|
||||
<i class="fas fa-times"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -31,18 +41,18 @@
|
|||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { computed, ref, watch } from 'vue';
|
||||
import MkButton from '@/components/MkButton.vue';
|
||||
import { definePageMetadata } from '@/scripts/page-metadata';
|
||||
import { i18n } from '@/i18n';
|
||||
import { useRouter } from '@/router';
|
||||
import * as os from '@/os';
|
||||
import { computed, ref, watch } from "vue";
|
||||
import MkButton from "@/components/MkButton.vue";
|
||||
import { definePageMetadata } from "@/scripts/page-metadata";
|
||||
import { i18n } from "@/i18n";
|
||||
import { useRouter } from "@/router";
|
||||
import * as os from "@/os";
|
||||
|
||||
const props = defineProps<{
|
||||
groupId: {
|
||||
type: string,
|
||||
required: true,
|
||||
}
|
||||
type: string;
|
||||
required: true;
|
||||
};
|
||||
}>();
|
||||
|
||||
const users = ref<any[]>([]);
|
||||
|
|
@ -50,18 +60,21 @@ const group = ref<any>();
|
|||
|
||||
const router = useRouter();
|
||||
|
||||
watch(() => props.groupId, () => {
|
||||
watch(
|
||||
() => props.groupId,
|
||||
() => {
|
||||
fetch();
|
||||
});
|
||||
}
|
||||
);
|
||||
|
||||
async function fetch() {
|
||||
os.api('users/groups/show', {
|
||||
os.api("users/groups/show", {
|
||||
groupId: props.groupId,
|
||||
}).then(gp => {
|
||||
}).then((gp) => {
|
||||
group.value = gp;
|
||||
os.api('users/show', {
|
||||
userIds: group.value.userIds
|
||||
}).then(us => {
|
||||
os.api("users/show", {
|
||||
userIds: group.value.userIds,
|
||||
}).then((us) => {
|
||||
users.value = us;
|
||||
});
|
||||
});
|
||||
|
|
@ -70,8 +83,8 @@ async function fetch() {
|
|||
fetch();
|
||||
|
||||
function invite() {
|
||||
os.selectUser().then(user => {
|
||||
os.apiWithDialog('users/groups/invite', {
|
||||
os.selectUser().then((user) => {
|
||||
os.apiWithDialog("users/groups/invite", {
|
||||
groupId: group.value.id,
|
||||
userId: user.id,
|
||||
});
|
||||
|
|
@ -79,32 +92,32 @@ function invite() {
|
|||
}
|
||||
|
||||
function removeUser(user) {
|
||||
os.api('users/groups/pull', {
|
||||
os.api("users/groups/pull", {
|
||||
groupId: group.value.id,
|
||||
userId: user.id
|
||||
userId: user.id,
|
||||
}).then(() => {
|
||||
users.value = users.value.filter(x => x.id !== user.id);
|
||||
users.value = users.value.filter((x) => x.id !== user.id);
|
||||
});
|
||||
}
|
||||
|
||||
async function renameGroup() {
|
||||
const { canceled, result: name } = await os.inputText({
|
||||
title: i18n.ts.groupName,
|
||||
default: group.value.name
|
||||
default: group.value.name,
|
||||
});
|
||||
if (canceled) return;
|
||||
|
||||
await os.api('users/groups/update', {
|
||||
await os.api("users/groups/update", {
|
||||
groupId: group.value.id,
|
||||
name: name
|
||||
name: name,
|
||||
});
|
||||
|
||||
group.value.name = name;
|
||||
}
|
||||
|
||||
function transfer() {
|
||||
os.selectUser().then(user => {
|
||||
os.apiWithDialog('users/groups/transfer', {
|
||||
os.selectUser().then((user) => {
|
||||
os.apiWithDialog("users/groups/transfer", {
|
||||
groupId: group.value.id,
|
||||
userId: user.id,
|
||||
});
|
||||
|
|
@ -113,22 +126,23 @@ function transfer() {
|
|||
|
||||
async function deleteGroup() {
|
||||
const { canceled } = await os.confirm({
|
||||
type: 'warning',
|
||||
text: i18n.t('removeAreYouSure', { x: group.value.name }),
|
||||
type: "warning",
|
||||
text: i18n.t("removeAreYouSure", { x: group.value.name }),
|
||||
});
|
||||
if (canceled) return;
|
||||
|
||||
await os.apiWithDialog('users/groups/delete', {
|
||||
await os.apiWithDialog("users/groups/delete", {
|
||||
groupId: group.value.id,
|
||||
});
|
||||
router.push('/my/groups');
|
||||
router.push("/my/groups");
|
||||
}
|
||||
|
||||
definePageMetadata(computed(() => ({
|
||||
definePageMetadata(
|
||||
computed(() => ({
|
||||
title: i18n.ts.members,
|
||||
icon: 'fas fa-users',
|
||||
})));
|
||||
|
||||
icon: "fas fa-users",
|
||||
}))
|
||||
);
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
|
@ -142,6 +156,9 @@ definePageMetadata(computed(() => ({
|
|||
> .members {
|
||||
> ._content {
|
||||
> .users {
|
||||
> ._panel {
|
||||
margin: 1rem 2rem;
|
||||
}
|
||||
> .user {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
|
|||
Loading…
Reference in New Issue