Mizah/mizzkey
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

list multiple select

Browse source
This commit is contained in:
mattyatea 2024-01-14 03:39:43 +09:00
parent 1dce38dfed
commit 693efb99a0
3 changed files with 41 additions and 15 deletions
Download patch file Download diff file Expand all files Collapse all files

15
packages/frontend/src/components/MkUserSelectDialog.vue
View file

@ -7,7 +7,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<MkModalWindow
ref="dialogEl"
:withOkButton="true"
:okButtonDisabled="selected == null"
:okButtonDisabled="(!selected && multipleSelected.length < 1)"
@click="cancel()"
@close="cancel()"
@ok="ok()"
@ -27,9 +27,10 @@ SPDX-License-Identifier: AGPL-3.0-only
</MkInput>
</FormSplit>
</div>
<div v-if="username != '' || host != ''" :class="[$style.result, { [$style.hit]: users.length > 0 }]">
<div v-if="users.length > 0" :class="$style.users">
<div v-for="user in users" :key="user.id" class="_button" :class="[$style.user, { [$style.selected]: selected && selected.id === user.id }]" @click="selected = user" @dblclick="ok()">
<div v-for="user in users" :key="user.id" class="_button" :class="[$style.user, { [$style.selected]: selected && selected.id === user.id || multipleSelected.includes(user)}]" @click="multiple ? (multipleSelected.includes(user) ? multipleSelected.splice(multipleSelected.indexOf(user), 1) : multipleSelected.push(user)) : selected = user" @dblclick="ok()">
<MkAvatar :user="user" :class="$style.avatar" indicator/>
<div :class="$style.userBody">
<MkUserName :user="user" :class="$style.userName"/>
@ -43,7 +44,7 @@ SPDX-License-Identifier: AGPL-3.0-only
</div>
<div v-if="username == '' && host == ''" :class="$style.recent">
<div :class="$style.users">
<div v-for="user in recentUsers" :key="user.id" class="_button" :class="[$style.user, { [$style.selected]: selected && selected.id === user.id }]" @click="selected = user" @dblclick="ok()">
<div v-for="user in recentUsers" :key="user.id" class="_button" :class="[$style.user, { [$style.selected]: selected && selected.id === user.id || multipleSelected.includes(user) }]" @click="multiple ? (multipleSelected.includes(user) ? multipleSelected.splice(multipleSelected.indexOf(user), 1) : multipleSelected.push(user)) : selected = user" @dblclick="ok()">
<MkAvatar :user="user" :class="$style.avatar" indicator/>
<div :class="$style.userBody">
<MkUserName :user="user" :class="$style.userName"/>
@ -67,6 +68,7 @@ import { defaultStore } from '@/store.js';
import { i18n } from '@/i18n.js';
import { $i } from '@/account.js';
import { hostname } from '@/config.js';
import { multipleSelectUser } from '@/os.js';
const emit = defineEmits<{
(ev: 'ok', selected: Misskey.entities.UserDetailed): void;
@ -76,6 +78,7 @@ const emit = defineEmits<{
const props = defineProps<{
includeSelf?: boolean;
multiple?: boolean;
}>();
const username = ref('');
@ -83,6 +86,7 @@ const host = ref('');
const users = ref<Misskey.entities.UserDetailed[]>([]);
const recentUsers = ref<Misskey.entities.UserDetailed[]>([]);
const selected = ref<Misskey.entities.UserDetailed | null>(null);
const multipleSelected = ref<Misskey.entities.UserDetailed[]>([]);
const dialogEl = ref();
const search = () => {
@ -101,11 +105,12 @@ const search = () => {
};
const ok = () => {
if (selected.value == null) return;
emit('ok', selected.value);
if ((!selected.value && multipleSelected.value.length < 1)) return;
emit('ok', selected.value ?? multipleSelected.value);
dialogEl.value.close();
// 最近使ったユーザー更新
if (multipleSelected.value.length < 0) return;
let recents = defaultStore.state.recentlyUsedUsers;
recents = recents.filter(x => x !== selected.value.id);
recents.unshift(selected.value.id);