usememos/memos
1
1
Fork 0
mirror of https://github.com/usememos/memos.git synced 2024-09-20 06:25:56 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: update search memo filter

Browse source
This commit is contained in:
Steven 2024-05-27 23:25:25 +08:00
parent ba0876a563
commit f0e5a72271
11 changed files with 216 additions and 77 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

27
server/router/api/v1/memo_service.go
View file

@ -883,6 +883,9 @@ func (s *APIV1Service) buildMemoFindWithFilter(ctx context.Context, find *store.
if find == nil { if find == nil {
find = &store.FindMemo{} find = &store.FindMemo{}
} }
if find.PayloadFind == nil {
find.PayloadFind = &store.FindMemoPayload{}
}
if filter != "" { if filter != "" {
filter, err := parseSearchMemosFilter(filter) filter, err := parseSearchMemosFilter(filter)
if err != nil { if err != nil {
@ -956,6 +959,15 @@ func (s *APIV1Service) buildMemoFindWithFilter(ctx context.Context, find *store.
if filter.IncludeComments { if filter.IncludeComments {
find.ExcludeComments = false find.ExcludeComments = false
} }
if filter.HasLink {
find.PayloadFind.HasLink = true
}
if filter.HasTaskList {
find.PayloadFind.HasTaskList = true
}
if filter.HasCode {
find.PayloadFind.HasCode = true
}
} }
user, err := s.GetCurrentUser(ctx) user, err := s.GetCurrentUser(ctx)
@ -1006,6 +1018,9 @@ var SearchMemosFilterCELAttributes = []cel.EnvOption{
cel.Variable("random", cel.BoolType), cel.Variable("random", cel.BoolType),
cel.Variable("limit", cel.IntType), cel.Variable("limit", cel.IntType),
cel.Variable("include_comments", cel.BoolType), cel.Variable("include_comments", cel.BoolType),
cel.Variable("has_link", cel.BoolType),
cel.Variable("has_task_list", cel.BoolType),
cel.Variable("has_code", cel.BoolType),
} }
type SearchMemosFilter struct { type SearchMemosFilter struct {
@ -1021,6 +1036,9 @@ type SearchMemosFilter struct {
Random bool Random bool
Limit *int Limit *int
IncludeComments bool IncludeComments bool
HasLink bool
HasTaskList bool
HasCode bool
} }
func parseSearchMemosFilter(expression string) (*SearchMemosFilter, error) { func parseSearchMemosFilter(expression string) (*SearchMemosFilter, error) {
@ -1090,6 +1108,15 @@ func findSearchMemosField(callExpr *expr.Expr_Call, filter *SearchMemosFilter) {
} else if idExpr.Name == "include_comments" { } else if idExpr.Name == "include_comments" {
value := callExpr.Args[1].GetConstExpr().GetBoolValue() value := callExpr.Args[1].GetConstExpr().GetBoolValue()
filter.IncludeComments = value filter.IncludeComments = value
} else if idExpr.Name == "has_link" {
value := callExpr.Args[1].GetConstExpr().GetBoolValue()
filter.HasLink = value
} else if idExpr.Name == "has_task_list" {
value := callExpr.Args[1].GetConstExpr().GetBoolValue()
filter.HasTaskList = value
} else if idExpr.Name == "has_code" {
value := callExpr.Args[1].GetConstExpr().GetBoolValue()
filter.HasCode = value
} }
return return
} }

9
store/db/mysql/memo.go
View file

@ -93,6 +93,15 @@ func (d *DB) ListMemos(ctx context.Context, find *store.FindMemo) ([]*store.Memo
if v.Tag != nil { if v.Tag != nil {
where, args = append(where, "JSON_CONTAINS(JSON_EXTRACT(`memo`.`payload`, '$.property.tags'), ?)"), append(args, fmt.Sprintf(`["%s"]`, *v.Tag)) where, args = append(where, "JSON_CONTAINS(JSON_EXTRACT(`memo`.`payload`, '$.property.tags'), ?)"), append(args, fmt.Sprintf(`["%s"]`, *v.Tag))
} }
if v.HasLink {
where = append(where, "JSON_EXTRACT(`memo`.`payload`, '$.property.hasLink') IS TRUE")
}
if v.HasTaskList {
where = append(where, "JSON_EXTRACT(`memo`.`payload`, '$.property.hasTaskList') IS TRUE")
}
if v.HasCode {
where = append(where, "JSON_EXTRACT(`memo`.`payload`, '$.property.hasCode') IS TRUE")
}
} }
if find.ExcludeComments { if find.ExcludeComments {
having = append(having, "`parent_id` IS NULL") having = append(having, "`parent_id` IS NULL")

9
store/db/postgres/memo.go
View file

@ -84,6 +84,15 @@ func (d *DB) ListMemos(ctx context.Context, find *store.FindMemo) ([]*store.Memo
if v.Tag != nil { if v.Tag != nil {
where, args = append(where, "memo.payload->'property'->'tags' @> "+placeholder(len(args)+1)), append(args, fmt.Sprintf(`["%s"]`, *v.Tag)) where, args = append(where, "memo.payload->'property'->'tags' @> "+placeholder(len(args)+1)), append(args, fmt.Sprintf(`["%s"]`, *v.Tag))
} }
if v.HasLink {
where = append(where, "(memo.payload->'property'->>'hasLink')::BOOLEAN IS TRUE")
}
if v.HasTaskList {
where = append(where, "(memo.payload->'property'->>'hasTaskList')::BOOLEAN IS TRUE")
}
if v.HasCode {
where = append(where, "(memo.payload->'property'->>'hasCode')::BOOLEAN IS TRUE")
}
} }
if find.ExcludeComments { if find.ExcludeComments {
where = append(where, "memo_relation.related_memo_id IS NULL") where = append(where, "memo_relation.related_memo_id IS NULL")

9
store/db/sqlite/memo.go
View file

@ -85,6 +85,15 @@ func (d *DB) ListMemos(ctx context.Context, find *store.FindMemo) ([]*store.Memo
if v.Tag != nil { if v.Tag != nil {
where, args = append(where, "JSON_EXTRACT(`memo`.`payload`, '$.property.tags') LIKE ?"), append(args, fmt.Sprintf(`%%"%s"%%`, *v.Tag)) where, args = append(where, "JSON_EXTRACT(`memo`.`payload`, '$.property.tags') LIKE ?"), append(args, fmt.Sprintf(`%%"%s"%%`, *v.Tag))
} }
if v.HasLink {
where = append(where, "JSON_EXTRACT(`memo`.`payload`, '$.property.hasLink') IS TRUE")
}
if v.HasTaskList {
where = append(where, "JSON_EXTRACT(`memo`.`payload`, '$.property.hasTaskList') IS TRUE")
}
if v.HasCode {
where = append(where, "JSON_EXTRACT(`memo`.`payload`, '$.property.hasCode') IS TRUE")
}
} }
if find.ExcludeComments { if find.ExcludeComments {
where = append(where, "`parent_id` IS NULL") where = append(where, "`parent_id` IS NULL")

7
store/memo.go
View file

@ -83,8 +83,11 @@ type FindMemo struct {
} }
type FindMemoPayload struct { type FindMemoPayload struct {
Raw *string Raw *string
Tag *string Tag *string
HasLink bool
HasTaskList bool
HasCode bool
} }
type UpdateMemo struct { type UpdateMemo struct {

112
web/src/components/MemoFilter.tsx
View file

@ -14,8 +14,14 @@ const MemoFilter = (props: Props) => {
const location = useLocation(); const location = useLocation();
const filterStore = useFilterStore(); const filterStore = useFilterStore();
const filter = filterStore.state; const filter = filterStore.state;
const { tag: tagQuery, text: textQuery, visibility } = filter; const showFilter = Boolean(
const showFilter = Boolean(tagQuery || textQuery || visibility); filter.tag ||
filter.text ||
filter.visibility ||
filter.memoPropertyFilter?.hasLink ||
filter.memoPropertyFilter?.hasTaskList ||
filter.memoPropertyFilter?.hasCode,
);
useEffect(() => { useEffect(() => {
filterStore.clearFilter(); filterStore.clearFilter();
@ -36,42 +42,72 @@ const MemoFilter = (props: Props) => {
<Icon.Filter className="w-4 h-auto mr-1" /> <Icon.Filter className="w-4 h-auto mr-1" />
<span>{t("common.filter")}:</span> <span>{t("common.filter")}:</span>
</div> </div>
<div {filter.tag && (
className={ <div
"max-w-xs flex flex-row justify-start items-center px-2 mr-2 cursor-pointer dark:text-gray-400 bg-gray-200 dark:bg-zinc-800 rounded whitespace-nowrap truncate hover:line-through " + className="max-w-xs flex flex-row justify-start items-center px-2 cursor-pointer dark:text-gray-400 bg-gray-200 dark:bg-zinc-800 rounded whitespace-nowrap truncate hover:line-through"
(tagQuery ? "" : "!hidden") onClick={() => {
} filterStore.setTagFilter(undefined);
onClick={() => { }}
filterStore.setTagFilter(undefined); >
}} <Icon.Hash className="w-4 h-auto mr-1 text-gray-500 dark:text-gray-400" /> {filter.tag}
> <Icon.X className="w-4 h-auto ml-1 opacity-40" />
<Icon.Hash className="w-4 h-auto mr-1 text-gray-500 dark:text-gray-400" /> {tagQuery} </div>
<Icon.X className="w-4 h-auto ml-1 opacity-40" /> )}
</div> {filter.visibility && (
<div <div
className={ className="max-w-xs flex flex-row justify-start items-center px-2 cursor-pointer dark:text-gray-400 bg-gray-200 dark:bg-zinc-800 rounded whitespace-nowrap truncate hover:line-through"
"max-w-xs flex flex-row justify-start items-center px-2 mr-2 cursor-pointer dark:text-gray-400 bg-gray-200 dark:bg-zinc-800 rounded whitespace-nowrap truncate hover:line-through " + onClick={() => {
(visibility ? "" : "!hidden") filterStore.setMemoVisibilityFilter(undefined);
} }}
onClick={() => { >
filterStore.setMemoVisibilityFilter(undefined); <Icon.Eye className="w-4 h-auto mr-1 text-gray-500 dark:text-gray-400" /> {filter.visibility}
}} <Icon.X className="w-4 h-auto ml-1 opacity-40" />
> </div>
<Icon.Eye className="w-4 h-auto mr-1 text-gray-500 dark:text-gray-400" /> {visibility} )}
<Icon.X className="w-4 h-auto ml-1 opacity-40" /> {filter.text && (
</div> <div
<div className="max-w-xs flex flex-row justify-start items-center px-2 cursor-pointer dark:text-gray-400 bg-gray-200 dark:bg-zinc-800 rounded whitespace-nowrap truncate hover:line-through"
className={ onClick={() => {
"max-w-xs flex flex-row justify-start items-center px-2 mr-2 cursor-pointer dark:text-gray-400 bg-gray-200 dark:bg-zinc-800 rounded whitespace-nowrap truncate hover:line-through " + filterStore.setTextFilter(undefined);
(textQuery ? "" : "!hidden") }}
} >
onClick={() => { <Icon.Search className="w-4 h-auto mr-1 text-gray-500 dark:text-gray-400" /> {filter.text}
filterStore.setTextFilter(undefined); <Icon.X className="w-4 h-auto ml-1 opacity-40" />
}} </div>
> )}
<Icon.Search className="w-4 h-auto mr-1 text-gray-500 dark:text-gray-400" /> {textQuery} {filter.memoPropertyFilter?.hasLink && (
<Icon.X className="w-4 h-auto ml-1 opacity-40" /> <div
</div> className="max-w-xs flex flex-row justify-start items-center px-2 cursor-pointer dark:text-gray-400 bg-gray-200 dark:bg-zinc-800 rounded whitespace-nowrap truncate hover:line-through"
onClick={() => {
filterStore.setMemoPropertyFilter({ hasLink: false });
}}
>
<Icon.Link className="w-4 h-auto mr-1 text-gray-500 dark:text-gray-400" /> Has Link
<Icon.X className="w-4 h-auto ml-1 opacity-40" />
</div>
)}
{filter.memoPropertyFilter?.hasTaskList && (
<div
className="max-w-xs flex flex-row justify-start items-center px-2 cursor-pointer dark:text-gray-400 bg-gray-200 dark:bg-zinc-800 rounded whitespace-nowrap truncate hover:line-through"
onClick={() => {
filterStore.setMemoPropertyFilter({ hasTaskList: false });
}}
>
<Icon.CheckCircle className="w-4 h-auto mr-1 text-gray-500 dark:text-gray-400" /> Has Task
<Icon.X className="w-4 h-auto ml-1 opacity-40" />
</div>
)}
{filter.memoPropertyFilter?.hasCode && (
<div
className="max-w-xs flex flex-row justify-start items-center px-2 cursor-pointer dark:text-gray-400 bg-gray-200 dark:bg-zinc-800 rounded whitespace-nowrap truncate hover:line-through"
onClick={() => {
filterStore.setMemoPropertyFilter({ hasCode: false });
}}
>
<Icon.Code2 className="w-4 h-auto mr-1 text-gray-500 dark:text-gray-400" /> Has Code
<Icon.X className="w-4 h-auto ml-1 opacity-40" />
</div>
)}
</div> </div>
); );
}; };

62
web/src/components/UserStatisticsView.tsx
View file

@ -1,6 +1,8 @@
import { Divider } from "@mui/joy";
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
import { memoServiceClient } from "@/grpcweb"; import { memoServiceClient } from "@/grpcweb";
import { useMemoStore, useTagStore } from "@/store/v1"; import { useFilterStore } from "@/store/module";
import { useMemoStore } from "@/store/v1";
import { User } from "@/types/proto/api/v1/user_service"; import { User } from "@/types/proto/api/v1/user_service";
import { useTranslate } from "@/utils/i18n"; import { useTranslate } from "@/utils/i18n";
import Icon from "./Icon"; import Icon from "./Icon";
@ -19,13 +21,12 @@ const UserStatisticsView = (props: Props) => {
const { user } = props; const { user } = props;
const t = useTranslate(); const t = useTranslate();
const memoStore = useMemoStore(); const memoStore = useMemoStore();
const tagStore = useTagStore(); const filterStore = useFilterStore();
const [memoAmount, setMemoAmount] = useState(0); const [memoAmount, setMemoAmount] = useState(0);
const [isRequesting, setIsRequesting] = useState(false); const [isRequesting, setIsRequesting] = useState(false);
const [memoStats, setMemoStats] = useState<UserMemoStats>({ links: 0, todos: 0, code: 0 }); const [memoStats, setMemoStats] = useState<UserMemoStats>({ links: 0, todos: 0, code: 0 });
const days = Math.ceil((Date.now() - user.createTime!.getTime()) / 86400000); const days = Math.ceil((Date.now() - user.createTime!.getTime()) / 86400000);
const memos = Object.values(memoStore.getState().memoMapByName); const memos = Object.values(memoStore.getState().memoMapByName);
const tags = tagStore.sortedTags().length;
useEffect(() => { useEffect(() => {
if (memos.length === 0) { if (memos.length === 0) {
@ -60,7 +61,7 @@ const UserStatisticsView = (props: Props) => {
<div className="w-full flex flex-row justify-between items-center"> <div className="w-full flex flex-row justify-between items-center">
<p className="text-sm font-medium leading-6 dark:text-gray-500">{t("common.statistics")}</p> <p className="text-sm font-medium leading-6 dark:text-gray-500">{t("common.statistics")}</p>
</div> </div>
<div className="w-full grid grid-cols-2 gap-x-4"> <div className="w-full grid grid-cols-1 gap-x-4">
<div className="w-full flex justify-between items-center"> <div className="w-full flex justify-between items-center">
<div className="w-auto flex justify-start items-center"> <div className="w-auto flex justify-start items-center">
<Icon.CalendarDays className="w-4 h-auto mr-1" /> <Icon.CalendarDays className="w-4 h-auto mr-1" />
@ -75,33 +76,38 @@ const UserStatisticsView = (props: Props) => {
</div> </div>
{isRequesting ? <Icon.Loader className="animate-spin w-4 h-auto text-gray-400" /> : <span className="">{memoAmount}</span>} {isRequesting ? <Icon.Loader className="animate-spin w-4 h-auto text-gray-400" /> : <span className="">{memoAmount}</span>}
</div> </div>
<div className="w-full flex justify-between items-center"> <Divider className="!my-1 opacity-50" />
<div className="w-auto flex justify-start items-center"> <div className="w-full mt-1 flex flex-row justify-start items-center gap-x-2 gap-y-1 flex-wrap">
<Icon.Hash className="w-4 h-auto mr-1" /> <div
<span className="block text-base sm:text-sm">{t("common.tags")}</span> className="w-auto border dark:border-zinc-800 px-1 rounded-md flex justify-between items-center cursor-pointer hover:opacity-80"
onClick={() => filterStore.setMemoPropertyFilter({ hasLink: true })}
>
<div className="w-auto flex justify-start items-center mr-1">
<Icon.Link className="w-4 h-auto mr-1" />
<span className="block text-sm">Links</span>
</div>
<span className="text-sm truncate">{memoStats.links}</span>
</div> </div>
<span>{tags}</span> <div
</div> className="w-auto border dark:border-zinc-800 px-1 rounded-md flex justify-between items-center cursor-pointer hover:opacity-80"
<div className="w-full flex justify-between items-center"> onClick={() => filterStore.setMemoPropertyFilter({ hasTaskList: true })}
<div className="w-auto flex justify-start items-center"> >
<Icon.Link className="w-4 h-auto mr-1" /> <div className="w-auto flex justify-start items-center mr-1">
<span className="block text-base sm:text-sm">Links</span> <Icon.CheckCircle className="w-4 h-auto mr-1" />
<span className="block text-sm">Todos</span>
</div>
<span className="text-sm truncate">{memoStats.todos}</span>
</div> </div>
<span className="">{memoStats.links}</span> <div
</div> className="w-auto border dark:border-zinc-800 px-1 rounded-md flex justify-between items-center cursor-pointer hover:opacity-80"
<div className="w-full flex justify-between items-center"> onClick={() => filterStore.setMemoPropertyFilter({ hasCode: true })}
<div className="w-auto flex justify-start items-center"> >
<Icon.CheckCircle className="w-4 h-auto mr-1" /> <div className="w-auto flex justify-start items-center mr-1">
<span className="block text-base sm:text-sm">Todos</span> <Icon.Code2 className="w-4 h-auto mr-1" />
<span className="block text-sm">Code</span>
</div>
<span className="text-sm truncate">{memoStats.code}</span>
</div> </div>
<span className="">{memoStats.todos}</span>
</div>
<div className="w-full flex justify-between items-center">
<div className="w-auto flex justify-start items-center">
<Icon.Code2 className="w-4 h-auto mr-1" />
<span className="block text-base sm:text-sm">Code</span>
</div>
<span className="">{memoStats.code}</span>
</div> </div>
</div> </div>
</div> </div>

3
web/src/hooks/useFilterWithUrlParams.ts
View file

@ -5,7 +5,7 @@ import { useFilterStore } from "@/store/module";
const useFilterWithUrlParams = () => { const useFilterWithUrlParams = () => {
const location = useLocation(); const location = useLocation();
const filterStore = useFilterStore(); const filterStore = useFilterStore();
const { tag, text } = filterStore.state; const { tag, text, memoPropertyFilter } = filterStore.state;
useEffect(() => { useEffect(() => {
const urlParams = new URLSearchParams(location.search); const urlParams = new URLSearchParams(location.search);
@ -38,6 +38,7 @@ const useFilterWithUrlParams = () => {
return { return {
tag, tag,
text, text,
memoPropertyFilter,
}; };
}; };

23
web/src/pages/Home.tsx
View file

@ -25,7 +25,7 @@ const Home = () => {
const memoList = useMemoList(); const memoList = useMemoList();
const [isRequesting, setIsRequesting] = useState(true); const [isRequesting, setIsRequesting] = useState(true);
const [nextPageToken, setNextPageToken] = useState<string>(""); const [nextPageToken, setNextPageToken] = useState<string>("");
const { tag: tagQuery, text: textQuery } = useFilterWithUrlParams(); const filter = useFilterWithUrlParams();
const sortedMemos = memoList.value const sortedMemos = memoList.value
.filter((memo) => memo.rowStatus === RowStatus.ACTIVE) .filter((memo) => memo.rowStatus === RowStatus.ACTIVE)
.sort((a, b) => getTimeStampByDate(b.displayTime) - getTimeStampByDate(a.displayTime)) .sort((a, b) => getTimeStampByDate(b.displayTime) - getTimeStampByDate(a.displayTime))
@ -34,20 +34,31 @@ const Home = () => {
useEffect(() => { useEffect(() => {
memoList.reset(); memoList.reset();
fetchMemos(""); fetchMemos("");
}, [tagQuery, textQuery]); }, [filter.tag, filter.text, filter.memoPropertyFilter]);
const fetchMemos = async (nextPageToken: string) => { const fetchMemos = async (nextPageToken: string) => {
setIsRequesting(true); setIsRequesting(true);
const filters = [`creator == "${user.name}"`, `row_status == "NORMAL"`, `order_by_pinned == true`]; const filters = [`creator == "${user.name}"`, `row_status == "NORMAL"`, `order_by_pinned == true`];
const contentSearch: string[] = []; const contentSearch: string[] = [];
if (textQuery) { if (filter.tag) {
contentSearch.push(JSON.stringify(textQuery)); contentSearch.push(JSON.stringify(filter.tag));
} }
if (contentSearch.length > 0) { if (contentSearch.length > 0) {
filters.push(`content_search == [${contentSearch.join(", ")}]`); filters.push(`content_search == [${contentSearch.join(", ")}]`);
} }
if (tagQuery) { if (filter.text) {
filters.push(`tag == "${tagQuery}"`); filters.push(`tag == "${filter.text}"`);
}
if (filter.memoPropertyFilter) {
if (filter.memoPropertyFilter.hasLink) {
filters.push(`has_link == true`);
}
if (filter.memoPropertyFilter.hasTaskList) {
filters.push(`has_task_list == true`);
}
if (filter.memoPropertyFilter.hasCode) {
filters.push(`has_code == true`);
}
} }
const response = await memoStore.fetchMemos({ const response = await memoStore.fetchMemos({
pageSize: DEFAULT_LIST_MEMOS_PAGE_SIZE, pageSize: DEFAULT_LIST_MEMOS_PAGE_SIZE,

10
web/src/store/module/filter.ts
View file

@ -1,6 +1,6 @@
import { Visibility } from "@/types/proto/api/v1/memo_service"; import { Visibility } from "@/types/proto/api/v1/memo_service";
import store, { useAppSelector } from ".."; import store, { useAppSelector } from "..";
import { setFilter } from "../reducer/filter"; import { MemoPropertyFilter, setFilter, setMemoPropertyFilter } from "../reducer/filter";
export const useFilterStore = () => { export const useFilterStore = () => {
const state = useAppSelector((state) => state.filter); const state = useAppSelector((state) => state.filter);
@ -16,6 +16,7 @@ export const useFilterStore = () => {
tag: undefined, tag: undefined,
text: undefined, text: undefined,
visibility: undefined, visibility: undefined,
memoPropertyFilter: undefined,
}), }),
); );
}, },
@ -40,5 +41,12 @@ export const useFilterStore = () => {
}), }),
); );
}, },
setMemoPropertyFilter: (memoPropertyFilter: Partial<MemoPropertyFilter>) => {
store.dispatch(
setMemoPropertyFilter({
...memoPropertyFilter,
}),
);
},
}; };
}; };

22
web/src/store/reducer/filter.ts
View file

@ -5,6 +5,13 @@ interface State {
tag?: string; tag?: string;
text?: string; text?: string;
visibility?: Visibility; visibility?: Visibility;
memoPropertyFilter?: MemoPropertyFilter;
}
export interface MemoPropertyFilter {
hasLink?: boolean;
hasTaskList?: boolean;
hasCode?: boolean;
} }
export type Filter = State; export type Filter = State;
@ -37,9 +44,22 @@ const filterSlice = createSlice({
...action.payload, ...action.payload,
}; };
}, },
setMemoPropertyFilter: (state, action: PayloadAction<Partial<MemoPropertyFilter>>) => {
if (JSON.stringify(action.payload) === state.memoPropertyFilter) {
return state;
}
return {
...state,
memoPropertyFilter: {
...state.memoPropertyFilter,
...action.payload,
},
};
},
}, },
}); });
export const { setFilter } = filterSlice.actions; export const { setFilter, setMemoPropertyFilter } = filterSlice.actions;
export default filterSlice.reducer; export default filterSlice.reducer;