chore: update user profile page

This commit is contained in:
Steven
2023-09-10 10:33:22 +08:00
parent 44be7201c0
commit 3df550927d
24 changed files with 74 additions and 195 deletions

View File

@ -1,4 +1,4 @@
import { Divider, Option, Select } from "@mui/joy";
import { Divider, IconButton, Radio, RadioGroup } from "@mui/joy";
import { useEffect, useState } from "react";
import { toast } from "react-hot-toast";
import * as api from "@/helpers/api";
@ -6,6 +6,7 @@ import { useGlobalStore } from "@/store/module";
import { useTranslate } from "@/utils/i18n";
import showCreateStorageServiceDialog from "../CreateStorageServiceDialog";
import { showCommonDialog } from "../Dialog/CommonDialog";
import Icon from "../Icon";
import LearnMore from "../LearnMore";
import showUpdateLocalStorageDialog from "../UpdateLocalStorageDialog";
import Dropdown from "../kit/Dropdown";
@ -58,23 +59,26 @@ const StorageSection = () => {
<div className="mt-4 mb-2 w-full flex flex-row justify-start items-center">
<span className="font-mono text-sm text-gray-400 mr-2">{t("setting.storage-section.current-storage")}</span>
</div>
<Select
className="w-full mb-4"
<RadioGroup
className="w-full"
value={storageServiceId}
onChange={(_, storageId) => {
handleActiveStorageServiceChanged(storageId ?? storageServiceId);
onChange={(event) => {
handleActiveStorageServiceChanged(Number(event.target.value));
}}
>
<Option value={0}>{t("setting.storage-section.type-database")}</Option>
<Option value={-1}>{t("setting.storage-section.type-local")}</Option>
<div className="w-full flex flex-row justify-start items-center gap-x-2">
<Radio value={"-1"} label={t("setting.storage-section.type-local")} />
<IconButton size="sm" onClick={() => showUpdateLocalStorageDialog(systemStatus.localStoragePath)}>
<Icon.PenBox className="w-4 h-auto" />
</IconButton>
</div>
<Radio value={"0"} label={t("setting.storage-section.type-database")} />
{storageList.map((storage) => (
<Option key={storage.id} value={storage.id}>
{storage.name}
</Option>
<Radio key={storage.id} value={storage.id} label={storage.name} />
))}
</Select>
<Divider />
<div className="mt-4 mb-2 w-full flex flex-row justify-start items-center gap-1">
</RadioGroup>
<Divider className="!my-4" />
<div className="mb-2 w-full flex flex-row justify-start items-center gap-1">
<span className="font-mono text-sm text-gray-400">{t("setting.storage-section.storage-services-list")}</span>
<LearnMore url="https://usememos.com/docs/storage" />
<button className="btn-normal px-2 py-0 ml-1" onClick={() => showCreateStorageServiceDialog(undefined, fetchStorageList)}>
@ -82,30 +86,6 @@ const StorageSection = () => {
</button>
</div>
<div className="mt-2 w-full flex flex-col">
<div
className={
storageServiceId !== -1 ? "hidden" : "py-2 w-full border-t dark:border-zinc-700 flex flex-row items-center justify-between"
}
>
<div className="flex flex-row items-center">
<p className="ml-2">{t("setting.storage-section.type-local")}</p>
</div>
<div className="flex flex-row items-center">
<Dropdown
actionsClassName="!w-28"
actions={
<>
<button
className="w-full text-left text-sm leading-6 py-1 px-3 cursor-pointer rounded hover:bg-gray-100 dark:hover:bg-zinc-600"
onClick={() => showUpdateLocalStorageDialog(systemStatus.localStoragePath)}
>
{t("common.edit")}
</button>
</>
}
/>
</div>
</div>
{storageList.map((storage) => (
<div
key={storage.id}