mirror of https://github.com/usememos/memos
chore: remove shortcuts in frontend (#2071)
boojack
2 years ago
committed by
GitHub
parent
11abc45440
commit
d1b0b0da10
@ -1,293 +0,0 @@
|
|||||||
import { useCallback, useEffect, useState } from "react";
|
|
||||||
import { toast } from "react-hot-toast";
|
|
||||||
import { getNormalizedTimeString } from "@/helpers/datetime";
|
|
||||||
import { filterConsts, getDefaultFilter, relationConsts } from "@/helpers/filter";
|
|
||||||
import useLoading from "@/hooks/useLoading";
|
|
||||||
import { useShortcutStore, useTagStore } from "@/store/module";
|
|
||||||
import { useTranslate } from "@/utils/i18n";
|
|
||||||
import { generateDialog } from "./Dialog";
|
|
||||||
import Icon from "./Icon";
|
|
||||||
import Selector from "./kit/Selector";
|
|
||||||
import "@/less/create-shortcut-dialog.less";
|
|
||||||
|
|
||||||
interface Props extends DialogProps {
|
|
||||||
shortcutId?: ShortcutId;
|
|
||||||
}
|
|
||||||
|
|
||||||
const CreateShortcutDialog: React.FC<Props> = (props: Props) => {
|
|
||||||
const { destroy, shortcutId } = props;
|
|
||||||
const shortcutStore = useShortcutStore();
|
|
||||||
const [title, setTitle] = useState<string>("");
|
|
||||||
const [filters, setFilters] = useState<Filter[]>([]);
|
|
||||||
const requestState = useLoading(false);
|
|
||||||
const t = useTranslate();
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
if (shortcutId) {
|
|
||||||
const shortcutTemp = shortcutStore.getShortcutById(shortcutId);
|
|
||||||
if (shortcutTemp) {
|
|
||||||
setTitle(shortcutTemp.title);
|
|
||||||
const temp = JSON.parse(shortcutTemp.payload);
|
|
||||||
if (Array.isArray(temp)) {
|
|
||||||
setFilters(temp);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}, [shortcutId]);
|
|
||||||
|
|
||||||
const handleTitleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
|
||||||
const text = e.target.value as string;
|
|
||||||
setTitle(text);
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleSaveBtnClick = async () => {
|
|
||||||
if (!title) {
|
|
||||||
toast.error(t("shortcut-list.title-required"));
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
for (const filter of filters) {
|
|
||||||
if (!filter.value.value) {
|
|
||||||
toast.error(t("shortcut-list.value-required"));
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
try {
|
|
||||||
if (shortcutId) {
|
|
||||||
await shortcutStore.patchShortcut({
|
|
||||||
id: shortcutId,
|
|
||||||
title,
|
|
||||||
payload: JSON.stringify(filters),
|
|
||||||
});
|
|
||||||
} else {
|
|
||||||
await shortcutStore.createShortcut({
|
|
||||||
title,
|
|
||||||
payload: JSON.stringify(filters),
|
|
||||||
});
|
|
||||||
}
|
|
||||||
} catch (error: any) {
|
|
||||||
console.error(error);
|
|
||||||
toast.error(error.response.data.message);
|
|
||||||
}
|
|
||||||
destroy();
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleAddFilterBtnClick = () => {
|
|
||||||
if (filters.length > 0) {
|
|
||||||
const lastFilter = filters[filters.length - 1];
|
|
||||||
if (lastFilter.value.value === "") {
|
|
||||||
toast(t("shortcut-list.fill-previous"));
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
setFilters([...filters, getDefaultFilter()]);
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleFilterChange = useCallback((index: number, filter: Filter) => {
|
|
||||||
setFilters((filters) => {
|
|
||||||
const temp = [...filters];
|
|
||||||
temp[index] = filter;
|
|
||||||
return temp;
|
|
||||||
});
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
const handleFilterRemove = useCallback((index: number) => {
|
|
||||||
setFilters((filters) => {
|
|
||||||
const temp = filters.filter((_, i) => i !== index);
|
|
||||||
return temp;
|
|
||||||
});
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
<div className="dialog-header-container">
|
|
||||||
<p className="title-text">{shortcutId ? t("shortcut-list.edit-shortcut") : t("shortcut-list.create-shortcut")}</p>
|
|
||||||
<button className="btn close-btn" onClick={destroy}>
|
|
||||||
<Icon.X />
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
<div className="dialog-content-container">
|
|
||||||
<div className="form-item-container input-form-container">
|
|
||||||
<span className="normal-text">{t("common.title")}</span>
|
|
||||||
<input
|
|
||||||
className="title-input"
|
|
||||||
type="text"
|
|
||||||
placeholder={t("shortcut-list.shortcut-title")}
|
|
||||||
value={title}
|
|
||||||
onChange={handleTitleInputChange}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div className="form-item-container filter-form-container">
|
|
||||||
<span className="normal-text">{t("common.filter")}</span>
|
|
||||||
<div className="filters-wrapper">
|
|
||||||
{filters.map((f, index) => {
|
|
||||||
return (
|
|
||||||
<MemoFilterInputer
|
|
||||||
key={index}
|
|
||||||
index={index}
|
|
||||||
filter={f}
|
|
||||||
handleFilterChange={handleFilterChange}
|
|
||||||
handleFilterRemove={handleFilterRemove}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
<div className="create-filter-btn" onClick={handleAddFilterBtnClick}>
|
|
||||||
{t("filter.new-filter")}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="dialog-footer-container">
|
|
||||||
<div></div>
|
|
||||||
<div className="btns-container">
|
|
||||||
<button className={`btn-primary ${requestState.isLoading ? "requesting" : ""}`} onClick={handleSaveBtnClick}>
|
|
||||||
{t("common.save")}
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
interface MemoFilterInputerProps {
|
|
||||||
index: number;
|
|
||||||
filter: Filter;
|
|
||||||
handleFilterChange: (index: number, filter: Filter) => void;
|
|
||||||
handleFilterRemove: (index: number) => void;
|
|
||||||
}
|
|
||||||
|
|
||||||
const MemoFilterInputer: React.FC<MemoFilterInputerProps> = (props: MemoFilterInputerProps) => {
|
|
||||||
const { index, filter, handleFilterChange, handleFilterRemove } = props;
|
|
||||||
const t = useTranslate();
|
|
||||||
const tagStore = useTagStore();
|
|
||||||
const [value, setValue] = useState<string>(filter.value.value);
|
|
||||||
const tags = Array.from(tagStore.getState().tags);
|
|
||||||
const { type } = filter;
|
|
||||||
|
|
||||||
const typeDataSource = Object.values(filterConsts).map(({ text, value }) => ({ text: t(text), value }));
|
|
||||||
const operatorDataSource = Object.values(filterConsts[type as FilterType].operators).map(({ text, value }) => ({ text: t(text), value }));
|
|
||||||
const relationDataSource = Object.values(relationConsts).map(({ text, value }) => ({ text: t(text), value }));
|
|
||||||
|
|
||||||
const valueDataSource =
|
|
||||||
type === "TYPE"
|
|
||||||
? filterConsts["TYPE"].values.map(({ text, value }) => ({ text: t(text), value }))
|
|
||||||
: type === "VISIBILITY"
|
|
||||||
? filterConsts["VISIBILITY"].values.map(({ text, value }) => ({ text: t(text), value }))
|
|
||||||
: tags.sort().map((t) => {
|
|
||||||
return { text: t, value: t };
|
|
||||||
});
|
|
||||||
|
|
||||||
const maxDatetimeValue = getNormalizedTimeString("9999-12-31T23:59");
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
if (type === "DISPLAY_TIME") {
|
|
||||||
const nowDatetimeValue = getNormalizedTimeString();
|
|
||||||
handleValueChange(nowDatetimeValue);
|
|
||||||
} else {
|
|
||||||
setValue(filter.value.value);
|
|
||||||
}
|
|
||||||
}, [type]);
|
|
||||||
|
|
||||||
const handleRelationChange = (value: string) => {
|
|
||||||
if (["AND", "OR"].includes(value)) {
|
|
||||||
handleFilterChange(index, {
|
|
||||||
...filter,
|
|
||||||
relation: value as MemoFilterRelation,
|
|
||||||
});
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleTypeChange = (value: string) => {
|
|
||||||
if (filter.type !== value) {
|
|
||||||
const ops = Object.values(filterConsts[value as FilterType].operators);
|
|
||||||
handleFilterChange(index, {
|
|
||||||
...filter,
|
|
||||||
type: value as FilterType,
|
|
||||||
value: {
|
|
||||||
operator: ops[0].value,
|
|
||||||
value: "",
|
|
||||||
},
|
|
||||||
});
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleOperatorChange = (value: string) => {
|
|
||||||
handleFilterChange(index, {
|
|
||||||
...filter,
|
|
||||||
value: {
|
|
||||||
...filter.value,
|
|
||||||
operator: value,
|
|
||||||
},
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleValueChange = (value: string) => {
|
|
||||||
setValue(value);
|
|
||||||
handleFilterChange(index, {
|
|
||||||
...filter,
|
|
||||||
value: {
|
|
||||||
...filter.value,
|
|
||||||
value,
|
|
||||||
},
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleRemoveBtnClick = () => {
|
|
||||||
handleFilterRemove(index);
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="memo-filter-input-wrapper">
|
|
||||||
{index > 0 ? (
|
|
||||||
<Selector
|
|
||||||
className="relation-selector"
|
|
||||||
dataSource={relationDataSource}
|
|
||||||
value={filter.relation}
|
|
||||||
handleValueChanged={handleRelationChange}
|
|
||||||
/>
|
|
||||||
) : null}
|
|
||||||
<Selector className="type-selector" dataSource={typeDataSource} value={filter.type} handleValueChanged={handleTypeChange} />
|
|
||||||
<Selector
|
|
||||||
className="operator-selector"
|
|
||||||
dataSource={operatorDataSource}
|
|
||||||
value={filter.value.operator}
|
|
||||||
handleValueChanged={handleOperatorChange}
|
|
||||||
/>
|
|
||||||
{type === "TEXT" ? (
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
className="value-inputer"
|
|
||||||
value={value}
|
|
||||||
onChange={(event) => {
|
|
||||||
handleValueChange(event.target.value);
|
|
||||||
}}
|
|
||||||
placeholder={t("filter.text-placeholder")}
|
|
||||||
/>
|
|
||||||
) : type === "DISPLAY_TIME" ? (
|
|
||||||
<input
|
|
||||||
className="datetime-selector"
|
|
||||||
type="datetime-local"
|
|
||||||
value={value}
|
|
||||||
max={maxDatetimeValue}
|
|
||||||
onChange={(event) => {
|
|
||||||
handleValueChange(event.target.value);
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
) : (
|
|
||||||
<Selector className="value-selector" dataSource={valueDataSource} value={value} handleValueChanged={handleValueChange} />
|
|
||||||
)}
|
|
||||||
<Icon.X className="remove-btn" onClick={handleRemoveBtnClick} />
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default function showCreateShortcutDialog(shortcutId?: ShortcutId): void {
|
|
||||||
generateDialog(
|
|
||||||
{
|
|
||||||
className: "create-shortcut-dialog",
|
|
||||||
dialogName: "create-shortcut-dialog",
|
|
||||||
},
|
|
||||||
CreateShortcutDialog,
|
|
||||||
{ shortcutId }
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@ -1,169 +0,0 @@
|
|||||||
import { useEffect } from "react";
|
|
||||||
import { toast } from "react-hot-toast";
|
|
||||||
import { getTimeStampByDate } from "@/helpers/datetime";
|
|
||||||
import useLoading from "@/hooks/useLoading";
|
|
||||||
import useToggle from "@/hooks/useToggle";
|
|
||||||
import { useFilterStore, useShortcutStore } from "@/store/module";
|
|
||||||
import { useTranslate } from "@/utils/i18n";
|
|
||||||
import showCreateShortcutDialog from "./CreateShortcutDialog";
|
|
||||||
import Icon from "./Icon";
|
|
||||||
|
|
||||||
const ShortcutList = () => {
|
|
||||||
const t = useTranslate();
|
|
||||||
const filterStore = useFilterStore();
|
|
||||||
const shortcutStore = useShortcutStore();
|
|
||||||
const filter = filterStore.state;
|
|
||||||
const shortcuts = shortcutStore.state.shortcuts;
|
|
||||||
const loadingState = useLoading();
|
|
||||||
|
|
||||||
const pinnedShortcuts = shortcuts
|
|
||||||
.filter((s) => s.rowStatus === "ARCHIVED")
|
|
||||||
.sort((a, b) => getTimeStampByDate(b.createdTs) - getTimeStampByDate(a.createdTs));
|
|
||||||
const unpinnedShortcuts = shortcuts
|
|
||||||
.filter((s) => s.rowStatus === "NORMAL")
|
|
||||||
.sort((a, b) => getTimeStampByDate(b.createdTs) - getTimeStampByDate(a.createdTs));
|
|
||||||
const sortedShortcuts = pinnedShortcuts.concat(unpinnedShortcuts);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
shortcutStore
|
|
||||||
.getMyAllShortcuts()
|
|
||||||
.catch(() => {
|
|
||||||
// do nth
|
|
||||||
})
|
|
||||||
.finally(() => {
|
|
||||||
loadingState.setFinish();
|
|
||||||
});
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="flex flex-col justify-start items-start w-full mt-2 h-auto shrink-0 flex-nowrap hide-scrollbar">
|
|
||||||
<div className="flex flex-row justify-start items-center w-full px-4">
|
|
||||||
<span className="text-sm leading-6 font-mono text-gray-400">{t("common.shortcuts")}</span>
|
|
||||||
<button
|
|
||||||
className="flex flex-col justify-center items-center w-5 h-5 bg-gray-200 dark:bg-zinc-700 rounded ml-2 hover:shadow"
|
|
||||||
onClick={() => showCreateShortcutDialog()}
|
|
||||||
>
|
|
||||||
<Icon.Plus className="w-4 h-4 text-gray-400" />
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
<div className="flex flex-col justify-start items-start relative w-full h-auto flex-nowrap mb-2">
|
|
||||||
{sortedShortcuts.map((s) => {
|
|
||||||
return <ShortcutContainer key={s.id} shortcut={s} isActive={s.id === Number(filter?.shortcutId)} />;
|
|
||||||
})}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
interface ShortcutContainerProps {
|
|
||||||
shortcut: Shortcut;
|
|
||||||
isActive: boolean;
|
|
||||||
}
|
|
||||||
|
|
||||||
const ShortcutContainer: React.FC<ShortcutContainerProps> = (props: ShortcutContainerProps) => {
|
|
||||||
const { shortcut, isActive } = props;
|
|
||||||
const t = useTranslate();
|
|
||||||
const filterStore = useFilterStore();
|
|
||||||
const shortcutStore = useShortcutStore();
|
|
||||||
const [showConfirmDeleteBtn, toggleConfirmDeleteBtn] = useToggle(false);
|
|
||||||
|
|
||||||
const handleShortcutClick = () => {
|
|
||||||
if (isActive) {
|
|
||||||
filterStore.setMemoShortcut(undefined);
|
|
||||||
} else {
|
|
||||||
filterStore.setMemoShortcut(shortcut.id);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleDeleteMemoClick = async (event: React.MouseEvent) => {
|
|
||||||
event.stopPropagation();
|
|
||||||
|
|
||||||
if (showConfirmDeleteBtn) {
|
|
||||||
try {
|
|
||||||
await shortcutStore.deleteShortcutById(shortcut.id);
|
|
||||||
if (filterStore.getState().shortcutId === shortcut.id) {
|
|
||||||
// need clear shortcut filter
|
|
||||||
filterStore.setMemoShortcut(undefined);
|
|
||||||
}
|
|
||||||
} catch (error: any) {
|
|
||||||
console.error(error);
|
|
||||||
toast.error(error.response.data.message);
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
toggleConfirmDeleteBtn();
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleEditShortcutBtnClick = (event: React.MouseEvent) => {
|
|
||||||
event.stopPropagation();
|
|
||||||
showCreateShortcutDialog(shortcut.id);
|
|
||||||
};
|
|
||||||
|
|
||||||
const handlePinShortcutBtnClick = async (event: React.MouseEvent) => {
|
|
||||||
event.stopPropagation();
|
|
||||||
|
|
||||||
try {
|
|
||||||
const shortcutPatch: ShortcutPatch = {
|
|
||||||
id: shortcut.id,
|
|
||||||
rowStatus: shortcut.rowStatus === "ARCHIVED" ? "NORMAL" : "ARCHIVED",
|
|
||||||
};
|
|
||||||
await shortcutStore.patchShortcut(shortcutPatch);
|
|
||||||
} catch (error) {
|
|
||||||
// do nth
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleDeleteBtnMouseLeave = () => {
|
|
||||||
toggleConfirmDeleteBtn(false);
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
<div
|
|
||||||
className="relative group flex flex-row justify-between items-center w-full h-10 py-0 px-4 mt-px first:mt-2 rounded-lg text-base cursor-pointer select-none shrink-0 hover:bg-white dark:hover:bg-zinc-700"
|
|
||||||
onClick={handleShortcutClick}
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
className={`flex flex-row justify-start items-center truncate shrink leading-5 mr-1 text-black dark:text-gray-200 ${
|
|
||||||
isActive && "text-green-600"
|
|
||||||
}`}
|
|
||||||
>
|
|
||||||
<span className="truncate">{shortcut.title}</span>
|
|
||||||
</div>
|
|
||||||
<div className="flex-row justify-end items-center hidden group/btns group-hover:flex shrink-0">
|
|
||||||
<span className="flex flex-row justify-center items-center toggle-btn">
|
|
||||||
<Icon.MoreHorizontal className="w-4 h-auto" />
|
|
||||||
</span>
|
|
||||||
<div className="absolute top-4 right-0 flex-col justify-start items-start w-auto h-auto px-4 pt-3 hidden group-hover/btns:flex z-1">
|
|
||||||
<div className="flex flex-col justify-start items-start w-32 h-auto p-1 whitespace-nowrap rounded-md bg-white dark:bg-zinc-700 shadow">
|
|
||||||
<span
|
|
||||||
className="w-full text-sm leading-6 py-1 px-3 rounded text-left dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-zinc-800"
|
|
||||||
onClick={handlePinShortcutBtnClick}
|
|
||||||
>
|
|
||||||
{shortcut.rowStatus === "ARCHIVED" ? t("common.unpin") : t("common.pin")}
|
|
||||||
</span>
|
|
||||||
<span
|
|
||||||
className="w-full text-sm leading-6 py-1 px-3 rounded text-left dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-zinc-800"
|
|
||||||
onClick={handleEditShortcutBtnClick}
|
|
||||||
>
|
|
||||||
{t("common.edit")}
|
|
||||||
</span>
|
|
||||||
<span
|
|
||||||
className={`w-full text-sm leading-6 py-1 px-3 rounded text-left dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-zinc-800 text-orange-600 ${
|
|
||||||
showConfirmDeleteBtn && "font-black"
|
|
||||||
}`}
|
|
||||||
onClick={handleDeleteMemoClick}
|
|
||||||
onMouseLeave={handleDeleteBtnMouseLeave}
|
|
||||||
>
|
|
||||||
{t("common.delete")}
|
|
||||||
{showConfirmDeleteBtn ? "!" : ""}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default ShortcutList;
|
|
||||||
@ -1,101 +0,0 @@
|
|||||||
.create-shortcut-dialog {
|
|
||||||
@apply px-4;
|
|
||||||
|
|
||||||
> .dialog-container {
|
|
||||||
@apply w-180 max-w-full;
|
|
||||||
|
|
||||||
> .dialog-content-container {
|
|
||||||
@apply flex flex-col justify-start items-start;
|
|
||||||
|
|
||||||
> .form-item-container {
|
|
||||||
@apply w-full mt-2 py-1 flex sm:flex-row flex-col justify-start items-start;
|
|
||||||
|
|
||||||
> .normal-text {
|
|
||||||
@apply block shrink-0 w-12 mr-8 sm:text-right text-left text-sm leading-8;
|
|
||||||
color: gray;
|
|
||||||
}
|
|
||||||
|
|
||||||
> .title-input {
|
|
||||||
@apply w-full py-1 px-2 h-9 text-sm rounded border dark:border-zinc-700 dark:bg-zinc-800 shadow-inner;
|
|
||||||
}
|
|
||||||
|
|
||||||
> .filters-wrapper {
|
|
||||||
@apply w-full flex flex-col justify-start items-start;
|
|
||||||
|
|
||||||
> .create-filter-btn {
|
|
||||||
@apply text-sm py-1 px-2 rounded shadow flex flex-row sm:justify-start justify-center items-center border dark:border-zinc-700 cursor-pointer text-blue-500 hover:opacity-80 sm:min-w-0 min-w-full sm:mb-0 mb-1;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
> .dialog-footer-container {
|
|
||||||
@apply w-full mt-0 flex flex-row justify-between items-center;
|
|
||||||
|
|
||||||
> .btns-container {
|
|
||||||
@apply flex flex-row justify-start items-center;
|
|
||||||
|
|
||||||
> .tip-text {
|
|
||||||
@apply text-sm text-gray-400 mr-2;
|
|
||||||
}
|
|
||||||
|
|
||||||
> .btn {
|
|
||||||
@apply text-base px-4 py-1 leading-7 rounded shadow hover:opacity-80;
|
|
||||||
|
|
||||||
&.save-btn {
|
|
||||||
@apply bg-green-600 text-white;
|
|
||||||
|
|
||||||
&.requesting {
|
|
||||||
@apply cursor-wait opacity-80;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.memo-filter-input-wrapper {
|
|
||||||
@apply w-full mb-3 shrink-0 flex flex-row sm:justify-start justify-center items-center sm:flex-nowrap flex-wrap sm:gap-0 gap-3;
|
|
||||||
|
|
||||||
> .selector-wrapper {
|
|
||||||
@apply mr-1 h-9 grow-0 shrink-0 sm:min-w-0 min-w-full;
|
|
||||||
|
|
||||||
&.relation-selector {
|
|
||||||
@apply w-16;
|
|
||||||
@media only screen and (min-width: 640px) {
|
|
||||||
margin-left: -68px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.type-selector {
|
|
||||||
@apply w-1/4;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.operator-selector {
|
|
||||||
@apply w-1/5;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.value-selector {
|
|
||||||
@apply grow;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
> input.value-inputer {
|
|
||||||
@media only screen and (min-width: 640px) {
|
|
||||||
max-width: calc(100% - 152px);
|
|
||||||
}
|
|
||||||
@apply h-9 px-2 shrink-0 grow mr-1 text-sm rounded border bg-transparent hover:bg-gray-50 sm:min-w-0 min-w-full;
|
|
||||||
}
|
|
||||||
|
|
||||||
> input.datetime-selector {
|
|
||||||
@media only screen and (min-width: 640px) {
|
|
||||||
max-width: calc(100% - 152px);
|
|
||||||
}
|
|
||||||
@apply h-9 px-2 shrink-0 grow mr-1 text-sm rounded border bg-transparent sm:min-w-0 min-w-full;
|
|
||||||
}
|
|
||||||
|
|
||||||
> .remove-btn {
|
|
||||||
@apply w-4 h-auto ml-1 cursor-pointer opacity-60 hover:opacity-80;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,49 +0,0 @@
|
|||||||
import * as api from "@/helpers/api";
|
|
||||||
import store, { useAppSelector } from "../";
|
|
||||||
import { createShortcut, deleteShortcut, patchShortcut, setShortcuts } from "../reducer/shortcut";
|
|
||||||
|
|
||||||
const convertResponseModelShortcut = (shortcut: Shortcut): Shortcut => {
|
|
||||||
return {
|
|
||||||
...shortcut,
|
|
||||||
createdTs: shortcut.createdTs * 1000,
|
|
||||||
updatedTs: shortcut.updatedTs * 1000,
|
|
||||||
};
|
|
||||||
};
|
|
||||||
|
|
||||||
export const useShortcutStore = () => {
|
|
||||||
const state = useAppSelector((state) => state.shortcut);
|
|
||||||
return {
|
|
||||||
state,
|
|
||||||
getState: () => {
|
|
||||||
return store.getState().shortcut;
|
|
||||||
},
|
|
||||||
getMyAllShortcuts: async () => {
|
|
||||||
const { data } = await api.getShortcutList();
|
|
||||||
const shortcuts = data.map((s) => convertResponseModelShortcut(s));
|
|
||||||
store.dispatch(setShortcuts(shortcuts));
|
|
||||||
},
|
|
||||||
getShortcutById: (id: ShortcutId) => {
|
|
||||||
for (const s of state.shortcuts) {
|
|
||||||
if (s.id === id) {
|
|
||||||
return s;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
return null;
|
|
||||||
},
|
|
||||||
createShortcut: async (shortcutCreate: ShortcutCreate) => {
|
|
||||||
const { data } = await api.createShortcut(shortcutCreate);
|
|
||||||
const shortcut = convertResponseModelShortcut(data);
|
|
||||||
store.dispatch(createShortcut(shortcut));
|
|
||||||
},
|
|
||||||
patchShortcut: async (shortcutPatch: ShortcutPatch) => {
|
|
||||||
const { data } = await api.patchShortcut(shortcutPatch);
|
|
||||||
const shortcut = convertResponseModelShortcut(data);
|
|
||||||
store.dispatch(patchShortcut(shortcut));
|
|
||||||
},
|
|
||||||
deleteShortcutById: async (shortcutId: ShortcutId) => {
|
|
||||||
await api.deleteShortcutById(shortcutId);
|
|
||||||
store.dispatch(deleteShortcut(shortcutId));
|
|
||||||
},
|
|
||||||
};
|
|
||||||
};
|
|
||||||
@ -1,51 +0,0 @@
|
|||||||
import { createSlice, PayloadAction } from "@reduxjs/toolkit";
|
|
||||||
|
|
||||||
interface State {
|
|
||||||
shortcuts: Shortcut[];
|
|
||||||
}
|
|
||||||
|
|
||||||
const shortcutSlice = createSlice({
|
|
||||||
name: "memo",
|
|
||||||
initialState: {
|
|
||||||
shortcuts: [],
|
|
||||||
} as State,
|
|
||||||
reducers: {
|
|
||||||
setShortcuts: (state, action: PayloadAction<Shortcut[]>) => {
|
|
||||||
return {
|
|
||||||
...state,
|
|
||||||
shortcuts: action.payload,
|
|
||||||
};
|
|
||||||
},
|
|
||||||
createShortcut: (state, action: PayloadAction<Shortcut>) => {
|
|
||||||
return {
|
|
||||||
...state,
|
|
||||||
shortcuts: state.shortcuts.concat(action.payload).sort((a, b) => b.createdTs - a.createdTs),
|
|
||||||
};
|
|
||||||
},
|
|
||||||
patchShortcut: (state, action: PayloadAction<Partial<Shortcut>>) => {
|
|
||||||
return {
|
|
||||||
...state,
|
|
||||||
shortcuts: state.shortcuts.map((s) => {
|
|
||||||
if (s.id === action.payload.id) {
|
|
||||||
return {
|
|
||||||
...s,
|
|
||||||
...action.payload,
|
|
||||||
};
|
|
||||||
} else {
|
|
||||||
return s;
|
|
||||||
}
|
|
||||||
}),
|
|
||||||
};
|
|
||||||
},
|
|
||||||
deleteShortcut: (state, action: PayloadAction<ShortcutId>) => {
|
|
||||||
return {
|
|
||||||
...state,
|
|
||||||
shortcuts: [...state.shortcuts].filter((shortcut) => shortcut.id !== action.payload),
|
|
||||||
};
|
|
||||||
},
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
export const { setShortcuts, createShortcut, patchShortcut, deleteShortcut } = shortcutSlice.actions;
|
|
||||||
|
|
||||||
export default shortcutSlice.reducer;
|
|
||||||
@ -1,28 +0,0 @@
|
|||||||
type ShortcutId = number;
|
|
||||||
|
|
||||||
interface Shortcut {
|
|
||||||
id: ShortcutId;
|
|
||||||
|
|
||||||
rowStatus: RowStatus;
|
|
||||||
createdTs: TimeStamp;
|
|
||||||
updatedTs: TimeStamp;
|
|
||||||
|
|
||||||
title: string;
|
|
||||||
payload: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
interface ShortcutCreate {
|
|
||||||
title: string;
|
|
||||||
payload: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
interface ShortcutPatch {
|
|
||||||
id: ShortcutId;
|
|
||||||
title?: string;
|
|
||||||
payload?: string;
|
|
||||||
rowStatus?: RowStatus;
|
|
||||||
}
|
|
||||||
|
|
||||||
interface ShortcutFind {
|
|
||||||
creatorUsername?: string;
|
|
||||||
}
|
|
||||||
Loading…
Reference in New Issue