usbharu
/
misskey
mirror of https://github.com/misskey-dev/misskey.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

support search

This commit is contained in:
samunohito 2024-02-07 07:57:25 +09:00
parent 273e3bd2e4
commit e892fbf000
1 changed files with 112 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

155
packages/frontend/src/pages/admin/custom-emojis-grid.local.list.vue
View File

@ -11,44 +11,53 @@
検索条件を詳細に設定します。 検索条件を詳細に設定します。
</template> </template>
<div :class="$style.searchArea"> <div class="_gaps">
<MkInput v-model="queryName" :debounce="true" type="search" autocapitalize="off" style="grid-column: 1 / 2; grid-row: 1 / 2"> <div :class="[[spMode ? $style.searchAreaSp : $style.searchArea]]">
<template #label>name</template> <MkInput v-model="queryName" :debounce="true" type="search" autocapitalize="off" class="col1 row1">
</MkInput> <template #label>name</template>
<MkInput v-model="queryCategory" :debounce="true" type="search" autocapitalize="off" style="grid-column: 2 / 3; grid-row: 1 / 2"> </MkInput>
<template #label>category</template> <MkInput
</MkInput> v-model="queryCategory" :debounce="true" type="search" autocapitalize="off" class="col2 row1"
<MkInput v-model="queryAlias" :debounce="true" type="search" autocapitalize="off" style="grid-column: 3 / 4; grid-row: 1 / 2"> >
<template #label>alias</template> <template #label>category</template>
</MkInput> </MkInput>
<MkInput
v-model="queryAlias" :debounce="true" type="search" autocapitalize="off" class="col3 row1"
>
<template #label>alias</template>
</MkInput>
<MkInput v-model="queryType" :debounce="true" type="search" autocapitalize="off" style="grid-column: 1 / 2; grid-row: 2 / 3"> <MkInput
<template #label>type</template> v-model="queryType" :debounce="true" type="search" autocapitalize="off" class="col1 row2"
</MkInput> >
<MkInput v-model="queryLicense" :debounce="true" type="search" autocapitalize="off" style="grid-column: 2 / 3; grid-row: 2 / 3"> <template #label>type</template>
<template #label>license</template> </MkInput>
</MkInput> <MkInput
v-model="queryLicense" :debounce="true" type="search" autocapitalize="off" class="col2 row2"
>
<template #label>license</template>
</MkInput>
<MkSelect v-model="querySensitive" class="col3 row2">
<template #label>sensitive</template>
<option :value="null">-</option>
<option :value="true">true</option>
<option :value="false">false</option>
</MkSelect>
<MkInput v-model="queryUpdatedAtFrom" :debounce="true" type="date" autocapitalize="off" style="grid-column: 1 / 2; grid-row: 3 / 4"> <MkSelect v-model="queryLocalOnly" class="col1 row3">
<template #label>updatedAt(from)</template> <template #label>localOnly</template>
</MkInput> <option :value="null">-</option>
<MkInput v-model="queryUpdatedAtTo" :debounce="true" type="date" autocapitalize="off" style="grid-column: 2 / 3; grid-row: 3 / 4"> <option :value="true">true</option>
<template #label>updatedAt(to)</template> <option :value="false">false</option>
</MkInput> </MkSelect>
<MkInput v-model="queryUpdatedAtFrom" :debounce="true" type="date" autocapitalize="off" class="col2 row3">
<MkSelect v-model="querySensitive" style="grid-column: 1 / 2; grid-row: 4 / 5"> <template #label>updatedAt(from)</template>
<template #label>sensitive</template> </MkInput>
<option :value="null">-</option> <MkInput v-model="queryUpdatedAtTo" :debounce="true" type="date" autocapitalize="off" class="col3 row3">
<option :value="true">true</option> <template #label>updatedAt(to)</template>
<option :value="false">false</option> </MkInput>
</MkSelect> </div>
<MkSelect v-model="queryLocalOnly" style="grid-column: 2 / 3; grid-row: 4 / 5"> <div :class="[[spMode ? $style.searchButtonsSp : $style.searchButtons]]">
<template #label>localOnly</template>
<option :value="null">-</option>
<option :value="true">true</option>
<option :value="false">false</option>
</MkSelect>
<div style="display:flex; justify-content: flex-end; align-items: flex-end; gap: 8px; grid-column: 3 / 4; grid-row: 4 / 5">
<MkButton primary @click="onSearchButtonClicked"> <MkButton primary @click="onSearchButtonClicked">
{{ i18n.ts.search }} {{ i18n.ts.search }}
</MkButton> </MkButton>
@ -78,7 +87,11 @@
<div class="_gaps"> <div class="_gaps">
<div :class="$style.buttons"> <div :class="$style.buttons">
<MkButton danger style="margin-right: auto" @click="onDeleteButtonClicked">{{ i18n.ts.delete }}</MkButton> <MkButton danger style="margin-right: auto" @click="onDeleteButtonClicked">{{ i18n.ts.delete }}</MkButton>
<MkButton primary :disabled="updateButtonDisabled" @click="onUpdateButtonClicked">{{ i18n.ts.update }}</MkButton> <MkButton primary :disabled="updateButtonDisabled" @click="onUpdateButtonClicked">
{{
i18n.ts.update
}}
</MkButton>
<MkButton @click="onGridResetButtonClicked">リセット</MkButton> <MkButton @click="onGridResetButtonClicked">リセット</MkButton>
</div> </div>
</div> </div>
@ -87,7 +100,7 @@
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { computed, onMounted, ref, toRefs, watch } from 'vue'; import { computed, onMounted, ref } from 'vue';
import * as Misskey from 'misskey-js'; import * as Misskey from 'misskey-js';
import * as os from '@/os.js'; import * as os from '@/os.js';
import { fromEmojiDetailedAdmin, GridItem, RequestLogItem } from '@/pages/admin/custom-emojis-grid.impl.js'; import { fromEmojiDetailedAdmin, GridItem, RequestLogItem } from '@/pages/admin/custom-emojis-grid.impl.js';
@ -112,8 +125,8 @@ import { misskeyApi } from '@/scripts/misskey-api.js';
import MkPagingButtons from '@/components/MkPagingButtons.vue'; import MkPagingButtons from '@/components/MkPagingButtons.vue';
import XRegisterLogs from '@/pages/admin/custom-emojis-grid.local.logs.vue'; import XRegisterLogs from '@/pages/admin/custom-emojis-grid.local.logs.vue';
import MkFolder from '@/components/MkFolder.vue'; import MkFolder from '@/components/MkFolder.vue';
import MkSwitch from '@/components/MkSwitch.vue';
import MkSelect from '@/components/MkSelect.vue'; import MkSelect from '@/components/MkSelect.vue';
import { deviceKind } from '@/scripts/device-kind.js';
const emptyStrToUndefined = (value: string | null) => value ? value : undefined; const emptyStrToUndefined = (value: string | null) => value ? value : undefined;
const emptyStrToNull = (value: string) => value === '' ? null : value; const emptyStrToNull = (value: string) => value === '' ? null : value;
@ -159,6 +172,8 @@ const gridItems = ref<GridItem[]>([]);
const originGridItems = ref<GridItem[]>([]); const originGridItems = ref<GridItem[]>([]);
const updateButtonDisabled = ref<boolean>(false); const updateButtonDisabled = ref<boolean>(false);
const spMode = computed(() => ['smartphone', 'tablet'].includes(deviceKind));
async function onUpdateButtonClicked() { async function onUpdateButtonClicked() {
const _items = gridItems.value; const _items = gridItems.value;
const _originItems = originGridItems.value; const _originItems = originGridItems.value;
@ -257,8 +272,10 @@ async function onDeleteButtonClicked() {
await os.promiseDialog( await os.promiseDialog(
action(), action(),
() => {}, () => {
() => {}, },
() => {
},
); );
} }
@ -398,8 +415,10 @@ async function refreshCustomEmojis() {
limit: limit, limit: limit,
page: currentPage.value, page: currentPage.value,
}), }),
() => {}, () => {
() => {}, },
() => {
},
); );
customEmojis.value = result.emojis; customEmojis.value = result.emojis;
@ -421,6 +440,36 @@ onMounted(async () => {
</script> </script>
<style lang="scss">
.row1 {
grid-row: 1 / 2;
}
.row2 {
grid-row: 2 / 3;
}
.row3 {
grid-row: 3 / 4;
}
.row4 {
grid-row: 4 / 5;
}
.col1 {
grid-column: 1 / 2;
}
.col2 {
grid-column: 2 / 3;
}
.col3 {
grid-column: 3 / 4;
}
</style>
<style module lang="scss"> <style module lang="scss">
.searchArea { .searchArea {
display: grid; display: grid;
@ -428,6 +477,26 @@ onMounted(async () => {
gap: 16px; gap: 16px;
} }
.searchAreaSp {
display: flex;
flex-direction: column;
gap: 8px;
}
.searchButtons {
display: flex;
justify-content: flex-end;
align-items: flex-end;
gap: 8px;
}
.searchButtonsSp {
display: flex;
justify-content: center;
align-items: center;
gap: 8px;
}
.gridArea { .gridArea {
overflow: scroll; overflow: scroll;
padding-top: 8px; padding-top: 8px;