aykhans/slash-e
1
0
Fork 0
mirror of https://github.com/aykhans/slash-e.git synced 2025-07-03 12:17:55 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

chore: fix create shortcut view activity

Browse Source
This commit is contained in:
Steven
2023-12-24 00:22:03 +08:00
parent 546d87ca0b
commit 9259a85e69
12 changed files with 282 additions and 195 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
frontend/web/src/components/CreateCollectionDrawer.tsx
View File

@ -11,7 +11,6 @@ import { Shortcut } from "@/types/proto/api/v2/shortcut_service";
import { convertVisibilityFromPb } from "@/utils/visibility";
import useLoading from "../hooks/useLoading";
import Icon from "./Icon";
import ResourceNameInput from "./ResourceNameInput";
import ShortcutView from "./ShortcutView";
interface Props {
@ -83,10 +82,10 @@ const CreateCollectionDrawer: React.FC<Props> = (props: Props) => {
});
};
const handleNameChange = (name: string) => {
const handleNameInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
setPartialState({
collectionCreate: Object.assign(state.collectionCreate, {
name: name.replace(/\s+/g, "-"),
name: e.target.value.replace(/\s+/g, "-"),
}),
});
};
@ -162,7 +161,18 @@ const CreateCollectionDrawer: React.FC<Props> = (props: Props) => {
<ModalClose />
<DialogContent className="max-w-full sm:max-w-sm">
<div className="overflow-y-auto w-full mt-2 px-3 pb-4">
<ResourceNameInput name={state.collectionCreate.name} onChange={handleNameChange} />
<div className="w-full flex flex-col justify-start items-start mb-3">
<span className="mb-2">
Name <span className="text-red-600">*</span>
</span>
<Input
className="w-full"
type="text"
placeholder="The memorable name of the collection"
value={state.collectionCreate.name}
onChange={handleNameInputChange}
/>
</div>
<div className="w-full flex flex-col justify-start items-start mb-3">
<span className="mb-2">
Title <span className="text-red-600">*</span>
@ -206,7 +216,7 @@ const CreateCollectionDrawer: React.FC<Props> = (props: Props) => {
<p className="mb-2">
<span>Shortcuts</span>
<span className="opacity-60">({selectedShortcuts.length})</span>
{selectedShortcuts.length === 0 && <span className="ml-2 italic opacity-80 text-sm">Select a shortcut first</span>}
{selectedShortcuts.length === 0 && <span className="ml-2 italic opacity-80 text-sm">(Select a shortcut first)</span>}
</p>
<div className="w-full py-1 px-px flex flex-row justify-start items-start flex-wrap overflow-hidden gap-2">
{selectedShortcuts.map((shortcut) => {

31
frontend/web/src/components/CreateShortcutDrawer.tsx
View File

@ -22,7 +22,6 @@ import { Shortcut } from "@/types/proto/api/v2/shortcut_service";
import { convertVisibilityFromPb } from "@/utils/visibility";
import useLoading from "../hooks/useLoading";
import Icon from "./Icon";
import ResourceNameInput from "./ResourceNameInput";
interface Props {
shortcutId?: number;
@ -90,10 +89,10 @@ const CreateShortcutDrawer: React.FC<Props> = (props: Props) => {
});
};
const handleNameChange = (name: string) => {
const handleNameInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
setPartialState({
shortcutCreate: Object.assign(state.shortcutCreate, {
name: name.replace(/\s+/g, "-"),
name: e.target.value.replace(/\s+/g, "-"),
}),
});
};
@ -177,24 +176,25 @@ const CreateShortcutDrawer: React.FC<Props> = (props: Props) => {
};
const handleSaveBtnClick = async () => {
if (!state.shortcutCreate.name || !state.shortcutCreate.title || !state.shortcutCreate.link) {
if (!state.shortcutCreate.name || !state.shortcutCreate.link) {
toast.error("Please fill in required fields.");
return;
}
try {
const tags = tag.split(" ").filter(Boolean);
if (shortcutId) {
const originShortcut = shortcutStore.getShortcutById(shortcutId);
const updatingShortcut = {
...state.shortcutCreate,
id: shortcutId,
tags: tag.split(" ").filter(Boolean),
tags,
};
await shortcutStore.updateShortcut(updatingShortcut, getShortcutUpdateMask(originShortcut, updatingShortcut));
} else {
await shortcutStore.createShortcut({
...state.shortcutCreate,
tags: tag.split(" ").filter(Boolean),
tags,
});
}
@ -213,9 +213,20 @@ const CreateShortcutDrawer: React.FC<Props> = (props: Props) => {
<Drawer anchor="right" open={true} onClose={onClose}>
<DialogTitle>{isCreating ? "Create Shortcut" : "Edit Shortcut"}</DialogTitle>
<ModalClose />
<DialogContent className="max-w-full sm:max-w-sm">
<DialogContent className="w-full">
<div className="overflow-y-auto w-full mt-2 px-3 pb-4">
<ResourceNameInput name={state.shortcutCreate.name} onChange={handleNameChange} />
<div className="w-full flex flex-col justify-start items-start mb-3">
<span className="mb-2">
Name <span className="text-red-600">*</span>
</span>
<Input
className="w-full"
type="text"
placeholder="The memorable name of the shortcut"
value={state.shortcutCreate.name}
onChange={handleNameInputChange}
/>
</div>
<div className="w-full flex flex-col justify-start items-start mb-3">
<span className="mb-2">
Link <span className="text-red-600">*</span>
@ -229,9 +240,7 @@ const CreateShortcutDrawer: React.FC<Props> = (props: Props) => {
/>
</div>
<div className="w-full flex flex-col justify-start items-start mb-3">
<span className="mb-2">
Title <span className="text-red-600">*</span>
</span>
<span className="mb-2">Title</span>
<Input
className="w-full"
type="text"