137 lines
3.7 KiB
Vue
137 lines
3.7 KiB
Vue
<template>
|
|
<MkStickyContainer>
|
|
<template #header
|
|
><MkPageHeader :actions="headerActions" :display-back-button="true"
|
|
/></template>
|
|
<MkSpacer :content-max="800" :margin-min="20">
|
|
<MkButton
|
|
primary
|
|
style="margin: 0 auto var(--margin) auto"
|
|
@click="create"
|
|
><i class="ph-plus ph-bold ph-lg"></i>
|
|
{{ i18n.ts.createGroup }}</MkButton
|
|
>
|
|
<MkPagination
|
|
v-slot="{ items }"
|
|
ref="owned"
|
|
:pagination="ownedPagination"
|
|
>
|
|
<div v-for="group in items" :key="group.id" class="_card">
|
|
<div class="_title">
|
|
<MkA :to="`/my/groups/${group.id}`" class="_link">{{
|
|
group.name
|
|
}}</MkA>
|
|
</div>
|
|
<div class="_content">
|
|
<MagAvatars :user-ids="group.userIds" />
|
|
</div>
|
|
</div>
|
|
</MkPagination>
|
|
<MkPagination
|
|
v-slot="{ items }"
|
|
ref="joined"
|
|
:pagination="joinedPagination"
|
|
>
|
|
<div v-for="group in items" :key="group.id" class="_card">
|
|
<div class="_title">{{ group.name }}</div>
|
|
<div class="_content">
|
|
<MagAvatars :user-ids="group.userIds" />
|
|
</div>
|
|
<div class="_footer">
|
|
<MkButton danger @click="leave(group)">{{
|
|
i18n.ts.leaveGroup
|
|
}}</MkButton>
|
|
</div>
|
|
</div>
|
|
</MkPagination>
|
|
</MkSpacer>
|
|
</MkStickyContainer>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import { computed, ref } from "vue";
|
|
import MkPagination from "@/components/MkPagination.vue";
|
|
import MkButton from "@/components/MkButton.vue";
|
|
import MagAvatars from "@/components/MagAvatars.vue";
|
|
import * as os from "@/os";
|
|
import { definePageMetadata } from "@/scripts/page-metadata";
|
|
import { i18n } from "@/i18n";
|
|
import MkStickyContainer from "@/components/global/MkStickyContainer.vue";
|
|
|
|
const owned = ref("owned");
|
|
const joined = ref("joined");
|
|
|
|
const ownedPagination = {
|
|
endpoint: "users/groups/owned" as const,
|
|
limit: 10,
|
|
};
|
|
|
|
const joinedPagination = {
|
|
endpoint: "users/groups/joined" as const,
|
|
limit: 10,
|
|
};
|
|
|
|
const headerActions = $computed(() => [
|
|
{
|
|
icon: "ph-plus ph-bold ph-lg",
|
|
text: i18n.ts.createGroup,
|
|
handler: create,
|
|
},
|
|
]);
|
|
|
|
definePageMetadata(
|
|
computed(() => ({
|
|
title: i18n.ts.groups,
|
|
icon: "ph-users-three ph-bold ph-lg",
|
|
}))
|
|
);
|
|
|
|
async function create() {
|
|
const { canceled, result: name } = await os.inputText({
|
|
title: i18n.ts.groupName,
|
|
});
|
|
if (canceled) return;
|
|
await os.api("users/groups/create", { name: name });
|
|
owned.value.reload();
|
|
os.success();
|
|
}
|
|
|
|
async function leave(group) {
|
|
const { canceled } = await os.confirm({
|
|
type: "warning",
|
|
text: i18n.t("leaveGroupConfirm", { name: group.name }),
|
|
});
|
|
if (canceled) return;
|
|
os.apiWithDialog("users/groups/leave", {
|
|
groupId: group.id,
|
|
}).then(() => {
|
|
joined.value.reload();
|
|
});
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
._fullinfo {
|
|
display: none !important;
|
|
}
|
|
|
|
._card {
|
|
margin-bottom: 1rem;
|
|
._title {
|
|
font-size: 1.2rem;
|
|
font-weight: bold;
|
|
}
|
|
._content {
|
|
padding: 20px;
|
|
|
|
> .defgtij {
|
|
padding: 0;
|
|
}
|
|
}
|
|
._footer {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
}
|
|
}
|
|
</style>
|