feat: ユーザーをcontextmenuからアンテナに追加できるようになど (#11206)
* feat: ユーザーをcontextmenuからアンテナに追加できるように close #11115 * MkAvatars.vue変更 * nanka iroiro * fix MkAvatars * ix * fix --------- Co-authored-by: tamaina <tamaina@hotmail.co.jp>
This commit is contained in:
yupix
GitHub
parent
239ea39d6f
commit
f4d1fcaf67
11 changed files with 144 additions and 77 deletions
|
|
@ -9,6 +9,7 @@ import XAntenna from './editor.vue';
|
|||
import { i18n } from '@/i18n';
|
||||
import { definePageMetadata } from '@/scripts/page-metadata';
|
||||
import { useRouter } from '@/router';
|
||||
import { antennasCache } from '@/cache';
|
||||
|
||||
const router = useRouter();
|
||||
|
||||
|
|
@ -26,13 +27,10 @@ let draft = $ref({
|
|||
});
|
||||
|
||||
function onAntennaCreated() {
|
||||
antennasCache.delete();
|
||||
router.push('/my/antennas');
|
||||
}
|
||||
|
||||
const headerActions = $computed(() => []);
|
||||
|
||||
const headerTabs = $computed(() => []);
|
||||
|
||||
definePageMetadata({
|
||||
title: i18n.ts.manageAntennas,
|
||||
icon: 'ti ti-antenna',
|
||||
|
|
|
|||
|
|
@ -10,6 +10,7 @@ import * as os from '@/os';
|
|||
import { i18n } from '@/i18n';
|
||||
import { useRouter } from '@/router';
|
||||
import { definePageMetadata } from '@/scripts/page-metadata';
|
||||
import { antennasCache } from '@/cache';
|
||||
|
||||
const router = useRouter();
|
||||
|
||||
|
|
@ -20,6 +21,7 @@ const props = defineProps<{
|
|||
}>();
|
||||
|
||||
function onAntennaUpdated() {
|
||||
antennasCache.delete();
|
||||
router.push('/my/antennas');
|
||||
}
|
||||
|
||||
|
|
@ -27,10 +29,6 @@ os.api('antennas/show', { antennaId: props.antennaId }).then((antennaResponse) =
|
|||
antenna = antennaResponse;
|
||||
});
|
||||
|
||||
const headerActions = $computed(() => []);
|
||||
|
||||
const headerTabs = $computed(() => []);
|
||||
|
||||
definePageMetadata({
|
||||
title: i18n.ts.manageAntennas,
|
||||
icon: 'ti ti-antenna',
|
||||
|
|
|
|||
|
|
@ -2,15 +2,20 @@
|
|||
<MkStickyContainer>
|
||||
<template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs"/></template>
|
||||
<MkSpacer :contentMax="700">
|
||||
<div class="ieepwinx">
|
||||
<MkButton :link="true" to="/my/antennas/create" primary class="add"><i class="ti ti-plus"></i> {{ i18n.ts.add }}</MkButton>
|
||||
<div>
|
||||
<div v-if="antennas.length === 0" class="empty">
|
||||
<div class="_fullinfo">
|
||||
<img :src="infoImageUrl" class="_ghost"/>
|
||||
<div>{{ i18n.ts.nothing }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="">
|
||||
<MkPagination v-slot="{items}" ref="list" :pagination="pagination">
|
||||
<MkA v-for="antenna in items" :key="antenna.id" class="ljoevbzj" :to="`/my/antennas/${antenna.id}`">
|
||||
<div class="name">{{ antenna.name }}</div>
|
||||
</MkA>
|
||||
</MkPagination>
|
||||
<MkButton :link="true" to="/my/antennas/create" primary :class="$style.add"><i class="ti ti-plus"></i> {{ i18n.ts.add }}</MkButton>
|
||||
|
||||
<div v-if="antennas.length > 0" class="_gaps">
|
||||
<MkA v-for="antenna in antennas" :key="antenna.id" :class="$style.antenna" :to="`/my/antennas/${antenna.id}`">
|
||||
<div class="name">{{ antenna.name }}</div>
|
||||
</MkA>
|
||||
</div>
|
||||
</div>
|
||||
</MkSpacer>
|
||||
|
|
@ -18,19 +23,31 @@
|
|||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { } from 'vue';
|
||||
import MkPagination from '@/components/MkPagination.vue';
|
||||
import MkButton from '@/components/MkButton.vue';
|
||||
import { i18n } from '@/i18n';
|
||||
import { definePageMetadata } from '@/scripts/page-metadata';
|
||||
import { antennasCache } from '@/cache';
|
||||
import { api } from '@/os';
|
||||
import { onActivated } from 'vue';
|
||||
import { infoImageUrl } from '@/instance';
|
||||
|
||||
const pagination = {
|
||||
endpoint: 'antennas/list' as const,
|
||||
noPaging: true,
|
||||
limit: 10,
|
||||
};
|
||||
const antennas = $computed(() => antennasCache.value.value ?? []);
|
||||
|
||||
const headerActions = $computed(() => []);
|
||||
function fetch() {
|
||||
antennasCache.fetch(() => api('antennas/list'));
|
||||
}
|
||||
|
||||
fetch();
|
||||
|
||||
const headerActions = $computed(() => [{
|
||||
asFullButton: true,
|
||||
icon: 'ti ti-refresh',
|
||||
text: i18n.ts.reload,
|
||||
handler: () => {
|
||||
antennasCache.delete();
|
||||
fetch();
|
||||
},
|
||||
}]);
|
||||
|
||||
const headerTabs = $computed(() => []);
|
||||
|
||||
|
|
@ -38,30 +55,30 @@ definePageMetadata({
|
|||
title: i18n.ts.manageAntennas,
|
||||
icon: 'ti ti-antenna',
|
||||
});
|
||||
|
||||
onActivated(() => {
|
||||
antennasCache.fetch(() => api('antennas/list'));
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.ieepwinx {
|
||||
<style lang="scss" module>
|
||||
.add {
|
||||
margin: 0 auto 16px auto;
|
||||
}
|
||||
|
||||
> .add {
|
||||
margin: 0 auto 16px auto;
|
||||
}
|
||||
.antenna {
|
||||
display: block;
|
||||
padding: 16px;
|
||||
border: solid 1px var(--divider);
|
||||
border-radius: 6px;
|
||||
|
||||
.ljoevbzj {
|
||||
display: block;
|
||||
padding: 16px;
|
||||
margin-bottom: 8px;
|
||||
border: solid 1px var(--divider);
|
||||
border-radius: 6px;
|
||||
|
||||
&:hover {
|
||||
border: solid 1px var(--accent);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
> .name {
|
||||
font-weight: bold;
|
||||
}
|
||||
&:hover {
|
||||
border: solid 1px var(--accent);
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
.name {
|
||||
font-weight: bold;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -3,38 +3,43 @@
|
|||
<template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs"/></template>
|
||||
<MkSpacer :contentMax="700">
|
||||
<div class="_gaps">
|
||||
<div v-if="items.length === 0" class="empty">
|
||||
<div class="_fullinfo">
|
||||
<img :src="infoImageUrl" class="_ghost"/>
|
||||
<div>{{ i18n.ts.nothing }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<MkButton primary rounded style="margin: 0 auto;" @click="create"><i class="ti ti-plus"></i> {{ i18n.ts.createList }}</MkButton>
|
||||
|
||||
<MkPagination v-slot="{items}" ref="pagingComponent" :pagination="pagination">
|
||||
<div class="_gaps">
|
||||
<MkA v-for="list in items" :key="list.id" class="_panel" :class="$style.list" :to="`/my/lists/${ list.id }`">
|
||||
<div style="margin-bottom: 4px;">{{ list.name }}</div>
|
||||
<MkAvatars :userIds="list.userIds"/>
|
||||
</MkA>
|
||||
</div>
|
||||
</MkPagination>
|
||||
<div v-if="items.length > 0" class="_gaps">
|
||||
<MkA v-for="list in items" :key="list.id" class="_panel" :class="$style.list" :to="`/my/lists/${ list.id }`">
|
||||
<div style="margin-bottom: 4px;">{{ list.name }}</div>
|
||||
<MkAvatars :userIds="list.userIds" :limit="10"/>
|
||||
</MkA>
|
||||
</div>
|
||||
</div>
|
||||
</MkSpacer>
|
||||
</MkStickyContainer>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { } from 'vue';
|
||||
import MkPagination from '@/components/MkPagination.vue';
|
||||
import { onActivated } from 'vue';
|
||||
import MkButton from '@/components/MkButton.vue';
|
||||
import MkAvatars from '@/components/MkAvatars.vue';
|
||||
import * as os from '@/os';
|
||||
import { i18n } from '@/i18n';
|
||||
import { definePageMetadata } from '@/scripts/page-metadata';
|
||||
import { userListsCache } from '@/cache';
|
||||
import { infoImageUrl } from '@/instance';
|
||||
|
||||
const pagingComponent = $shallowRef<InstanceType<typeof MkPagination>>();
|
||||
const items = $computed(() => userListsCache.value.value ?? []);
|
||||
|
||||
const pagination = {
|
||||
endpoint: 'users/lists/list' as const,
|
||||
noPaging: true,
|
||||
limit: 10,
|
||||
};
|
||||
function fetch() {
|
||||
userListsCache.fetch(() => os.api('users/lists/list'));
|
||||
}
|
||||
|
||||
fetch();
|
||||
|
||||
async function create() {
|
||||
const { canceled, result: name } = await os.inputText({
|
||||
|
|
@ -43,10 +48,18 @@ async function create() {
|
|||
if (canceled) return;
|
||||
await os.apiWithDialog('users/lists/create', { name: name });
|
||||
userListsCache.delete();
|
||||
pagingComponent.reload();
|
||||
fetch();
|
||||
}
|
||||
|
||||
const headerActions = $computed(() => []);
|
||||
const headerActions = $computed(() => [{
|
||||
asFullButton: true,
|
||||
icon: 'ti ti-refresh',
|
||||
text: i18n.ts.reload,
|
||||
handler: () => {
|
||||
userListsCache.delete();
|
||||
fetch();
|
||||
},
|
||||
}]);
|
||||
|
||||
const headerTabs = $computed(() => []);
|
||||
|
||||
|
|
@ -58,6 +71,10 @@ definePageMetadata({
|
|||
handler: create,
|
||||
},
|
||||
});
|
||||
|
||||
onActivated(() => {
|
||||
fetch();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" module>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue