From 54f6876c9ca3265a39d14e0770fbfd0e5f40d05d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E3=81=9F=E3=83=BC=E3=81=B3=E3=82=93?= Date: Tue, 11 Apr 2023 07:42:27 +0900 Subject: [PATCH 1/8] =?UTF-8?q?feat:=20=E3=83=81=E3=83=A3=E3=83=B3?= =?UTF-8?q?=E3=83=8D=E3=83=AB=E3=81=AE=E6=A4=9C=E7=B4=A2=E7=94=A8=E3=83=9A?= =?UTF-8?q?=E3=83=BC=E3=82=B8=E3=81=A8API=E3=81=AE=E8=BF=BD=E5=8A=A0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * add channel search * move channel search to channel list page --------- Co-authored-by: tamaina Co-authored-by: syuilo Co-authored-by: atsuchan <83960488+atsu1125@users.noreply.github.com> Co-authored-by: Masaya Suzuki <15100604+massongit@users.noreply.github.com> Co-authored-by: Kagami Sascha Rosylight Co-authored-by: taiy <53635909+taiyme@users.noreply.github.com> Co-authored-by: xianon Co-authored-by: kabo2468 <28654659+kabo2468@users.noreply.github.com> Co-authored-by: YS <47836716+yszkst@users.noreply.github.com> Co-authored-by: Khsmty Co-authored-by: Soni L Co-authored-by: mei23 Co-authored-by: daima3629 <52790780+daima3629@users.noreply.github.com> Co-authored-by: Windymelt <1113940+windymelt@users.noreply.github.com> --- locales/en-US.yml | 2 + locales/ja-JP.yml | 2 + packages/backend/src/server/api/endpoints.ts | 2 + .../server/api/endpoints/channels/search.ts | 67 +++++++++++++++++++ .../client/src/components/MkChannelList.vue | 31 +++++++++ packages/client/src/pages/channels.vue | 62 ++++++++++++++++- 6 files changed, 163 insertions(+), 3 deletions(-) create mode 100644 packages/backend/src/server/api/endpoints/channels/search.ts create mode 100644 packages/client/src/components/MkChannelList.vue diff --git a/locales/en-US.yml b/locales/en-US.yml index 8da0af981f..7a23d2c99b 100644 --- a/locales/en-US.yml +++ b/locales/en-US.yml @@ -1282,6 +1282,8 @@ _channel: following: "Followed" usersCount: "{n} Participants" notesCount: "{n} Posts" + nameAndDescription: "Name and description" + nameOnly: "Name only" _messaging: dms: "Private" groups: "Groups" diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml index cb01fb564b..0eb17e5afb 100644 --- a/locales/ja-JP.yml +++ b/locales/ja-JP.yml @@ -1147,6 +1147,8 @@ _channel: following: "フォロー中" usersCount: "{n}人が参加中" notesCount: "{n}投稿があります" + nameAndDescription: "名前と説明" + nameOnly: "名前のみ" _messaging: dms: "プライベート" groups: "グループ" diff --git a/packages/backend/src/server/api/endpoints.ts b/packages/backend/src/server/api/endpoints.ts index 3f82eb7a73..3baa560a10 100644 --- a/packages/backend/src/server/api/endpoints.ts +++ b/packages/backend/src/server/api/endpoints.ts @@ -89,6 +89,7 @@ import * as ep___channels_featured from "./endpoints/channels/featured.js"; import * as ep___channels_follow from "./endpoints/channels/follow.js"; import * as ep___channels_followed from "./endpoints/channels/followed.js"; import * as ep___channels_owned from "./endpoints/channels/owned.js"; +import * as ep___channels_search from './endpoints/channels/search.js'; import * as ep___channels_show from "./endpoints/channels/show.js"; import * as ep___channels_timeline from "./endpoints/channels/timeline.js"; import * as ep___channels_unfollow from "./endpoints/channels/unfollow.js"; @@ -438,6 +439,7 @@ const eps = [ ["channels/follow", ep___channels_follow], ["channels/followed", ep___channels_followed], ["channels/owned", ep___channels_owned], + ['channels/search', ep___channels_search], ["channels/show", ep___channels_show], ["channels/timeline", ep___channels_timeline], ["channels/unfollow", ep___channels_unfollow], diff --git a/packages/backend/src/server/api/endpoints/channels/search.ts b/packages/backend/src/server/api/endpoints/channels/search.ts new file mode 100644 index 0000000000..a954ba224c --- /dev/null +++ b/packages/backend/src/server/api/endpoints/channels/search.ts @@ -0,0 +1,67 @@ +import { Inject, Injectable } from '@nestjs/common'; +import { Brackets } from 'typeorm'; +import { Endpoint } from '@/server/api/endpoint-base.js'; +import { QueryService } from '@/core/QueryService.js'; +import type { ChannelsRepository } from '@/models/index.js'; +import { ChannelEntityService } from '@/core/entities/ChannelEntityService.js'; +import { DI } from '@/di-symbols.js'; +import { sqlLikeEscape } from '@/misc/sql-like-escape.js'; + +export const meta = { + tags: ['channels'], + + requireCredential: false, + + res: { + type: 'array', + optional: false, nullable: false, + items: { + type: 'object', + optional: false, nullable: false, + ref: 'Channel', + }, + }, +} as const; + +export const paramDef = { + type: 'object', + properties: { + query: { type: 'string' }, + type: { type: 'string', enum: ['nameAndDescription', 'nameOnly'], default: 'nameAndDescription' }, + sinceId: { type: 'string', format: 'misskey:id' }, + untilId: { type: 'string', format: 'misskey:id' }, + limit: { type: 'integer', minimum: 1, maximum: 100, default: 5 }, + }, + required: ['query'], +} as const; + +// eslint-disable-next-line import/no-default-export +@Injectable() +export default class extends Endpoint { + constructor( + @Inject(DI.channelsRepository) + private channelsRepository: ChannelsRepository, + + private channelEntityService: ChannelEntityService, + private queryService: QueryService, + ) { + super(meta, paramDef, async (ps, me) => { + const query = this.queryService.makePaginationQuery(this.channelsRepository.createQueryBuilder('channel'), ps.sinceId, ps.untilId); + + if (ps.type === 'nameAndDescription') { + query.andWhere(new Brackets(qb => { qb + .where('channel.name ILIKE :q', { q: `%${ sqlLikeEscape(ps.query) }%` }) + .orWhere('channel.description ILIKE :q', { q: `%${ sqlLikeEscape(ps.query) }%` }); + })); + } else { + query.andWhere('channel.name ILIKE :q', { q: `%${ sqlLikeEscape(ps.query) }%` }); + } + + const channels = await query + .take(ps.limit) + .getMany(); + + return await Promise.all(channels.map(x => this.channelEntityService.pack(x, me))); + }); + } +} diff --git a/packages/client/src/components/MkChannelList.vue b/packages/client/src/components/MkChannelList.vue new file mode 100644 index 0000000000..408eab7399 --- /dev/null +++ b/packages/client/src/components/MkChannelList.vue @@ -0,0 +1,31 @@ + + + + + diff --git a/packages/client/src/pages/channels.vue b/packages/client/src/pages/channels.vue index 2d8eeefcfc..f243f93459 100644 --- a/packages/client/src/pages/channels.vue +++ b/packages/client/src/pages/channels.vue @@ -20,6 +20,24 @@ @swiper="setSwiperRef" @slide-change="onSlideChange" > + +
+
+ + + + + + + + {{ i18n.ts.search }} +
+ + + + +
+
- + diff --git a/packages/client/src/components/MkRenoteButton.vue b/packages/client/src/components/MkRenoteButton.vue index ea01fcdc0a..b70edda7d5 100644 --- a/packages/client/src/components/MkRenoteButton.vue +++ b/packages/client/src/components/MkRenoteButton.vue @@ -35,7 +35,7 @@ const buttonRef = ref(); const canRenote = computed( () => - ["public", "home","hidden"].includes(props.note.visibility) || + ["public", "home", "hidden"].includes(props.note.visibility) || props.note.userId === $i.id ); @@ -75,7 +75,10 @@ const renote = async (viaKeyboard = false, ev?: MouseEvent) => { let buttonActions = []; - if (props.note.visibility === "public" || props.note.visibility === "hidden") { + if ( + props.note.visibility === "public" || + props.note.visibility === "hidden" + ) { buttonActions.push({ text: i18n.ts.renote, textStyle: "font-weight: bold", @@ -102,7 +105,7 @@ const renote = async (viaKeyboard = false, ev?: MouseEvent) => { }); } - if (["public", "home","hidden"].includes(props.note.visibility)) { + if (["public", "home", "hidden"].includes(props.note.visibility)) { buttonActions.push({ text: `${i18n.ts.renote} (${i18n.ts._visibility.home})`, icon: "ph-house ph-bold ph-lg", diff --git a/packages/client/src/pages/channels.vue b/packages/client/src/pages/channels.vue index f243f93459..3fcda33d4d 100644 --- a/packages/client/src/pages/channels.vue +++ b/packages/client/src/pages/channels.vue @@ -23,18 +23,44 @@
- - + + - - - + + + - {{ i18n.ts.search }} + {{ i18n.ts.search }}
- - + +
@@ -96,12 +122,12 @@ import { computed, onMounted, defineComponent, inject, watch } from "vue"; import { Virtual } from "swiper"; import { Swiper, SwiperSlide } from "swiper/vue"; import MkChannelPreview from "@/components/MkChannelPreview.vue"; -import MkChannelList from '@/components/MkChannelList.vue'; +import MkChannelList from "@/components/MkChannelList.vue"; import MkPagination from "@/components/MkPagination.vue"; -import MkInput from '@/components/MkInput.vue'; -import MkRadios from '@/components/MkRadios.vue'; +import MkInput from "@/components/MkInput.vue"; +import MkRadios from "@/components/MkRadios.vue"; import MkButton from "@/components/MkButton.vue"; -import MkFoldableSection from '@/components/MkFoldableSection.vue'; +import MkFoldableSection from "@/components/MkFoldableSection.vue"; import { useRouter } from "@/router"; import { definePageMetadata } from "@/scripts/page-metadata"; import { deviceKind } from "@/scripts/device-kind"; @@ -120,14 +146,14 @@ const props = defineProps<{ query: string; type?: string; }>(); -let key = $ref(''); -let tab = $ref('search'); -let searchQuery = $ref(''); -let searchType = $ref('nameAndDescription'); +let key = $ref(""); +let tab = $ref("search"); +let searchQuery = $ref(""); +let searchType = $ref("nameAndDescription"); let channelPagination = $ref(); onMounted(() => { - searchQuery = props.query ?? ''; - searchType = props.type ?? 'nameAndDescription'; + searchQuery = props.query ?? ""; + searchType = props.type ?? "nameAndDescription"; }); const featuredPagination = { @@ -146,10 +172,10 @@ const ownedPagination = { async function search() { const query = searchQuery.toString().trim(); - if (query == null || query === '') return; + if (query == null || query === "") return; const type = searchType.toString().trim(); channelPagination = { - endpoint: 'channels/search', + endpoint: "channels/search", limit: 10, params: { query: searchQuery, @@ -173,9 +199,9 @@ const headerActions = $computed(() => [ const headerTabs = $computed(() => [ { - key: 'search', + key: "search", title: i18n.ts.search, - icon: 'ti ti-search', + icon: "ti ti-search", }, { key: "featured", From baef1b8ca9ad22d7146b5a56bcbc744bca371366 Mon Sep 17 00:00:00 2001 From: naskya Date: Sun, 7 May 2023 08:08:07 +0900 Subject: [PATCH 3/8] Use phosphor icons --- packages/client/src/pages/channels.vue | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/client/src/pages/channels.vue b/packages/client/src/pages/channels.vue index 3fcda33d4d..f188fb1daf 100644 --- a/packages/client/src/pages/channels.vue +++ b/packages/client/src/pages/channels.vue @@ -30,7 +30,7 @@ type="search" > [ { key: "search", title: i18n.ts.search, - icon: "ti ti-search", + icon: "ph-search ph-bold ph-lg", }, { key: "featured", From 27d1d96c9d3348ff9b41a239f84722b93a3e376c Mon Sep 17 00:00:00 2001 From: naskya Date: Sun, 7 May 2023 09:13:37 +0900 Subject: [PATCH 4/8] Modify backend for Calckey --- .../server/api/endpoints/channels/search.ts | 67 ++++++++----------- packages/client/src/pages/channels.vue | 17 ++--- 2 files changed, 36 insertions(+), 48 deletions(-) diff --git a/packages/backend/src/server/api/endpoints/channels/search.ts b/packages/backend/src/server/api/endpoints/channels/search.ts index 5527adb9b4..5758d81a67 100644 --- a/packages/backend/src/server/api/endpoints/channels/search.ts +++ b/packages/backend/src/server/api/endpoints/channels/search.ts @@ -1,9 +1,8 @@ -import { Inject, Injectable } from "@nestjs/common"; +import define from "../../define.js"; import { Brackets } from "typeorm"; import { Endpoint } from "@/server/api/endpoint-base.js"; -import { QueryService } from "@/core/QueryService.js"; -import type { ChannelsRepository } from "@/models/index.js"; -import { ChannelEntityService } from "@/core/entities/ChannelEntityService.js"; +import { makePaginationQuery } from "@/server/api/common/make-pagination-query.js"; +import { Channels } from "@/models/index.js"; import { DI } from "@/di-symbols.js"; import { sqlLikeEscape } from "@/misc/sql-like-escape.js"; @@ -41,44 +40,32 @@ export const paramDef = { required: ["query"], } as const; -// eslint-disable-next-line import/no-default-export -@Injectable() -export default class extends Endpoint { - constructor( - @Inject(DI.channelsRepository) - private channelsRepository: ChannelsRepository, +export default define(meta, paramDef, async (ps, me) => { + const query = makePaginationQuery( + Channels.createQueryBuilder("channel"), + ps.sinceId, + ps.untilId, + ); - private channelEntityService: ChannelEntityService, - private queryService: QueryService, - ) { - super(meta, paramDef, async (ps, me) => { - const query = this.queryService.makePaginationQuery( - this.channelsRepository.createQueryBuilder("channel"), - ps.sinceId, - ps.untilId, - ); - - if (ps.type === "nameAndDescription") { - query.andWhere( - new Brackets((qb) => { - qb.where("channel.name ILIKE :q", { - q: `%${sqlLikeEscape(ps.query)}%`, - }).orWhere("channel.description ILIKE :q", { - q: `%${sqlLikeEscape(ps.query)}%`, - }); - }), - ); - } else { - query.andWhere("channel.name ILIKE :q", { + if (ps.type === "nameAndDescription") { + query.andWhere( + new Brackets((qb) => { + qb.where("channel.name ILIKE :q", { + q: `%${sqlLikeEscape(ps.query)}%`, + }).orWhere("channel.description ILIKE :q", { q: `%${sqlLikeEscape(ps.query)}%`, }); - } - - const channels = await query.take(ps.limit).getMany(); - - return await Promise.all( - channels.map((x) => this.channelEntityService.pack(x, me)), - ); + }), + ); + } else { + query.andWhere("channel.name ILIKE :q", { + q: `%${sqlLikeEscape(ps.query)}%`, }); } -} + + const channels = await query.take(ps.limit).getMany(); + + return await Promise.all( + channels.map((x) => Channels.pack(x, me)), + ); +}); diff --git a/packages/client/src/pages/channels.vue b/packages/client/src/pages/channels.vue index f188fb1daf..5c87027878 100644 --- a/packages/client/src/pages/channels.vue +++ b/packages/client/src/pages/channels.vue @@ -22,7 +22,6 @@ >
-