aykhans/slash-e
1
0
Fork 0
mirror of https://github.com/aykhans/slash-e.git synced 2025-04-18 21:19:44 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

chore: update create shortcut dialog

Browse Source
This commit is contained in:
Steven 2023-07-21 20:30:16 +08:00
parent a1b633e4db
commit 014dd7d660
1 changed files with 43 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

67
web/src/components/CreateShortcutDialog.tsx
View File

@ -1,4 +1,4 @@
import { Button, Input, Modal, ModalDialog, Radio, RadioGroup } from "@mui/joy"; import { Button, Divider, Input, Modal, ModalDialog, Radio, RadioGroup } from "@mui/joy";
import { isUndefined } from "lodash-es"; import { isUndefined } from "lodash-es";
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
@ -31,24 +31,28 @@ const CreateShortcutDialog: React.FC<Props> = (props: Props) => {
tags: [], tags: [],
}, },
}); });
const [showDescriptionAndTag, setShowDescriptionAndTag] = useState<boolean>(false);
const [tag, setTag] = useState<string>(""); const [tag, setTag] = useState<string>("");
const requestState = useLoading(false); const requestState = useLoading(false);
const isCreating = isUndefined(shortcutId); const isCreating = isUndefined(shortcutId);
useEffect(() => { useEffect(() => {
if (shortcutId) { if (shortcutId) {
const shortcutTemp = shortcutService.getShortcutById(shortcutId); const shortcut = shortcutService.getShortcutById(shortcutId);
if (shortcutTemp) { if (shortcut) {
setState({ setState({
...state, ...state,
shortcutCreate: Object.assign(state.shortcutCreate, { shortcutCreate: Object.assign(state.shortcutCreate, {
name: shortcutTemp.name, name: shortcut.name,
link: shortcutTemp.link, link: shortcut.link,
description: shortcutTemp.description, description: shortcut.description,
visibility: shortcutTemp.visibility, visibility: shortcut.visibility,
}), }),
}); });
setTag(shortcutTemp.tags.join(" ")); setTag(shortcut.tags.join(" "));
if (shortcut.description !== "" || shortcut.tags.length > 0) {
setShowDescriptionAndTag(true);
}
} }
} }
}, [shortcutId]); }, [shortcutId]);
@ -157,30 +161,16 @@ const CreateShortcutDialog: React.FC<Props> = (props: Props) => {
</div> </div>
<div className="w-full flex flex-col justify-start items-start mb-3"> <div className="w-full flex flex-col justify-start items-start mb-3">
<span className="mb-2"> <span className="mb-2">
Link <span className="text-red-600">*</span> Destination URL <span className="text-red-600">*</span>
</span> </span>
<Input <Input
className="w-full" className="w-full"
type="text" type="text"
placeholder="The full URL of the page you want to get to" placeholder="e.g. https://github.com/boojack/slash"
value={state.shortcutCreate.link} value={state.shortcutCreate.link}
onChange={handleLinkInputChange} onChange={handleLinkInputChange}
/> />
</div> </div>
<div className="w-full flex flex-col justify-start items-start mb-3">
<span className="mb-2">Description</span>
<Input
className="w-full"
type="text"
placeholder="Something to describe the link"
value={state.shortcutCreate.description}
onChange={handleDescriptionInputChange}
/>
</div>
<div className="w-full flex flex-col justify-start items-start mb-3">
<span className="mb-2">Tags</span>
<Input className="w-full" type="text" placeholder="Separated by spaces" value={tag} onChange={handleTagsInputChange} />
</div>
<div className="w-full flex flex-col justify-start items-start mb-3"> <div className="w-full flex flex-col justify-start items-start mb-3">
<span className="mb-2"> <span className="mb-2">
Visibility <span className="text-red-600">*</span> Visibility <span className="text-red-600">*</span>
@ -196,6 +186,35 @@ const CreateShortcutDialog: React.FC<Props> = (props: Props) => {
{t(`shortcut.visibility.${state.shortcutCreate.visibility.toLowerCase()}.description`)} {t(`shortcut.visibility.${state.shortcutCreate.visibility.toLowerCase()}.description`)}
</p> </p>
</div> </div>
<Divider className="text-gray-500">Optional</Divider>
<div
className="w-full flex flex-row justify-between items-center my-3"
onClick={() => setShowDescriptionAndTag(!showDescriptionAndTag)}
>
<span className={`${showDescriptionAndTag ? "" : "text-gray-500"}`}>Description and tags</span>
<button className="w-7 h-7 p-1 rounded-md hover:bg-gray-100">
<Icon.ChevronDown className={`w-5 h-auto text-gray-500 ${showDescriptionAndTag ? "transform rotate-180" : ""}`} />
</button>
</div>
{showDescriptionAndTag && (
<>
<div className="w-full flex flex-col justify-start items-start mb-3">
<span className="mb-2">Description</span>
<Input
className="w-full"
type="text"
placeholder="Something to describe the url"
value={state.shortcutCreate.description}
onChange={handleDescriptionInputChange}
/>
</div>
<div className="w-full flex flex-col justify-start items-start mb-3">
<span className="mb-2">Tags</span>
<Input className="w-full" type="text" placeholder="Separated by spaces" value={tag} onChange={handleTagsInputChange} />
</div>
</>
)}
<div className="w-full flex flex-row justify-end items-center mt-4 space-x-2"> <div className="w-full flex flex-row justify-end items-center mt-4 space-x-2">
<Button color="neutral" variant="plain" disabled={requestState.isLoading} loading={requestState.isLoading} onClick={onClose}> <Button color="neutral" variant="plain" disabled={requestState.isLoading} loading={requestState.isLoading} onClick={onClose}>
Cancel Cancel