Skip to content

Commit

Permalink
feat(web): policy panel & log new UI (#624)
Browse files Browse the repository at this point in the history
  • Loading branch information
@kongwy229
kongwy229 authored Jan 13, 2023
1 parent fda7b0d commit dc5df96
Show file tree
Hide file tree
Showing 21 changed files with 810 additions and 165 deletions.
8 changes: 8 additions & 0 deletions web/src/components/FileTypeIcon/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,7 @@ export const FileType = {
npm: "npm",
db: "db",
bucket: "bucket",
policy: "policy",
};

export default function FileTypeIcon(props: { type: string }) {
Expand Down Expand Up @@ -64,6 +65,13 @@ export default function FileTypeIcon(props: { type: string }) {
</Icon>
);

case FileType.policy:
return (
<Icon viewBox="0 0 14 14" fontSize={14} className="align-middle">
<path d="M6.41667 0V1.75H7.58333V0H6.41667ZM2.46322 1.63835L1.63835 2.46322L2.87565 3.70052L3.70052 2.87565L2.46322 1.63835ZM11.5368 1.63835L10.2995 2.87565L11.1243 3.70052L12.3617 2.46322L11.5368 1.63835ZM7 2.91667C4.75164 2.91667 2.91667 4.75164 2.91667 7C2.91667 8.61454 3.88274 9.97631 5.25 10.6367V12.25C5.25 12.8876 5.77905 13.4167 6.41667 13.4167H7.58333C8.22095 13.4167 8.75 12.8876 8.75 12.25V10.6367C10.1173 9.97631 11.0833 8.61454 11.0833 7C11.0833 4.75164 9.24836 2.91667 7 2.91667ZM7 4.08333C8.61797 4.08333 9.91667 5.38203 9.91667 7C9.91667 8.2742 9.10311 9.34667 7.97184 9.74691L7.58333 9.88363V12.25H6.41667V9.88363L6.02816 9.74691C4.89689 9.34667 4.08333 8.2742 4.08333 7C4.08333 5.38203 5.38203 4.08333 7 4.08333ZM0 6.41667V7.58333H1.75V6.41667H0ZM12.25 6.41667V7.58333H14V6.41667H12.25ZM2.87565 10.2995L1.63835 11.5368L2.46322 12.3617L3.70052 11.1243L2.87565 10.2995ZM11.1243 10.2995L10.2995 11.1243L11.5368 12.3617L12.3617 11.5368L11.1243 10.2995Z" />
</Icon>
);

case FileType.bucket:
return (
<Icon viewBox="0 0 21 24" fontSize={14} className="align-middle">
Expand Down
4 changes: 3 additions & 1 deletion web/src/components/Panel/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,11 +7,13 @@ const Panel = (props: {
className?: string;
style?: React.CSSProperties;
children: React.ReactNode;
onClick?: () => void;
}) => {
const { className, style = {} } = props;
const { className, style = {}, onClick } = props;
return (
<div
style={style}
onClick={onClick}
className={clsx("bg-white rounded px-4 flex flex-col h-full w-full", className)}
>
{props.children}
Expand Down
1 change: 1 addition & 0 deletions web/src/components/SectionList/index.module.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@
&:hover,
&.active {
background-color: #eff9fa;
color: #008C7F;
}

&.active {
Expand Down
6 changes: 2 additions & 4 deletions web/src/pages/app/database/CollectionDataList/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,19 +5,17 @@ import { Button } from "@chakra-ui/react";
import CreateCollectionModal from "../mods/CreateCollectionModal";
import useDBMStore from "../store";

// import ColPannel from "./mods/ColPannel";
import DataPannel from "./mods/DataPannel";
// import IndexPannel from "./mods/IndexPannel";

export default function CollectionDataList() {
const { t } = useTranslation();
const store = useDBMStore((state) => state);
return (
<>
{store.currentDB === undefined ? (
<div className="h-full flex items-center justify-center">
<div className="flex h-full justify-center items-center">
<CreateCollectionModal>
<Button size="lg" variant="ghost" leftIcon={<AddIcon />}>
<Button size="md" className="w-40" variant="ghost" leftIcon={<AddIcon />}>
{t("CollectionPanel.CollectionAdd")}
</Button>
</CreateCollectionModal>
Expand Down
119 changes: 37 additions & 82 deletions web/src/pages/app/database/CollectionDataList/mods/DataPannel/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,20 +1,24 @@
import { useMemo, useState } from "react";
import SyntaxHighlighter from "react-syntax-highlighter";
import { AddIcon, EditIcon, Search2Icon } from "@chakra-ui/icons";
import { Button, HStack, Input, InputGroup, InputLeftElement, Text } from "@chakra-ui/react";
import clsx from "clsx";
import { AddIcon, Search2Icon } from "@chakra-ui/icons";
import { Button, HStack, Input, InputGroup, InputLeftElement } from "@chakra-ui/react";
import { debounce } from "lodash";

import JsonEditor from "@/components/Editor/JsonEditor";
import IconWrap from "@/components/IconWrap";
import Pagination from "@/components/Pagination";
import Panel from "@/components/Panel";
import getPageInfo from "@/utils/getPageInfo";

import { useAddDataMutation, useEntryDataQuery, useUpdateDataMutation } from "../../../service";
import RightPanelEditBox from "../../../RightComponent/EditBox";
import RightPanelList from "../../../RightComponent/List";
import {
useAddDataMutation,
useDeleteDataMutation,
useEntryDataQuery,
useUpdateDataMutation,
} from "../../../service";
import useDBMStore from "../../../store";

import DeleteButton from "./DeleteButton";
export default function DataPannel() {
const [currentData, setCurrentData] = useState<any>(undefined);

Expand Down Expand Up @@ -46,8 +50,12 @@ export default function DataPannel() {
setCurrentData({});
});
const addDataMutation = useAddDataMutation();

const updateDataMutation = useUpdateDataMutation();
const deleteDataMutation = useDeleteDataMutation({
onSuccess() {
setCurrentData(undefined);
},
});

const handleData = async () => {
if (currentData?._id) {
Expand All @@ -60,8 +68,8 @@ export default function DataPannel() {
};

return (
<Panel>
<Panel.Header>
<>
<Panel.Header className="w-full h-[55px]">
<div className="flex items-center">
<Button
disabled={store.currentDB === undefined}
Expand Down Expand Up @@ -112,82 +120,29 @@ export default function DataPannel() {
});
}}
/>
{/* <span>总数: {entryDataQuery.data?.total}</span> */}
</Panel.Header>

<div className="flex" style={{ height: "calc(100% - 60px)" }}>
<div className="overflow-y-auto flex-1 overflow-x-hidden">
{(entryDataQuery?.data?.list || [])?.map((item: any, index: number) => {
<div className="w-full flex overflow-hidden" style={{ height: "calc(100vh - 130px)" }}>
<RightPanelList
ListQuery={entryDataQuery?.data?.list}
setKey="_id"
isActive={(item: any) => currentData?._id === item._id}
onClick={(data: any) => {
setCurrentData(data);
}}
deleteRuleMutation={deleteDataMutation}
component={(item: any) => {
return (
<div
key={item._id}
className={clsx("border-2 p-2 rounded-xl relative group/item", {
"shadow-lg": currentData?._id === item._id,
"mb-2": index !== (entryDataQuery?.data?.list || []).length - 1,
})}
onClick={() => {
setCurrentData(item);
}}
>
<div
className={clsx(" absolute right-2 top-2 group-hover/item:block z-50 ", {
hidden: currentData?._id !== item._id,
})}
>
<div className="flex">
<DeleteButton data={item} fn={setCurrentData} />
<IconWrap
showBg
tooltip="编辑"
size={32}
className="ml-2 hover:bg-third-100 group/icon"
>
<EditIcon className="group-hover/icon:text-third-500" />
</IconWrap>
</div>
</div>
<SyntaxHighlighter language="json" customStyle={{ background: "#fff" }}>
{JSON.stringify(item, null, 2)}
</SyntaxHighlighter>
</div>
<SyntaxHighlighter language="json" customStyle={{ background: "#fff" }}>
{JSON.stringify(item, null, 2)}
</SyntaxHighlighter>
);
})}
</div>
<div
className="border-2 flex-col ml-2 mb-3 flex rounded-xl px-4"
style={{
flexBasis: "421px",
}}
/>
<RightPanelEditBox
title={currentData?._id ? "编辑" : "新增"}
isLoading={currentData?._id ? updateDataMutation.isLoading : addDataMutation.isLoading}
onSave={handleData}
>
<div className="flex justify-between item-center border-b-2 mb-4 py-2">
<Text fontSize="md" className="leading-loose font-semibold">
{currentData?._id ? "编辑" : "新增"}
</Text>
<div>
<Button
style={{ width: "56px" }}
colorScheme="primary"
fontSize="sm"
size="md"
isLoading={
currentData?._id ? updateDataMutation.isLoading : addDataMutation.isLoading
}
onClick={handleData}
>
保存
</Button>
{/* <Button
size={"xs"}
colorScheme="blue"
bgColor={"blue.600"}
borderRadius="2"
ml="3"
onClick={() => setCurrentData(undefined)}
>
取消
</Button> */}
</div>
</div>
<div className=" flex-1" style={{}}>
<JsonEditor
value={JSON.stringify(currentData || {}, null, 2)}
Expand All @@ -196,8 +151,8 @@ export default function DataPannel() {
}}
/>
</div>
</div>
</RightPanelEditBox>
</div>
</Panel>
</>
);
}
20 changes: 13 additions & 7 deletions web/src/pages/app/database/CollectionListPanel/MoreButton/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ export default function MoreButton(props: { data?: any; fn?: any }) {
closeOnBlur={true}
placement="bottom"
>
<IconWrap size={28} tooltip="更多操作">
<IconWrap size={25} tooltip="更多操作">
<PopoverTrigger>
<MoreIcon
fontSize={10}
Expand All @@ -29,12 +29,18 @@ export default function MoreButton(props: { data?: any; fn?: any }) {
/>
</PopoverTrigger>
</IconWrap>
<PopoverContent p="2" maxWidth={100}>
<div className="flex">
<IconWrap>
<CopyText text={data.name} tip="名称复制成功" />
</IconWrap>
<DeleteCollectionModal database={data} />
<PopoverContent p="2" maxWidth="100px">
<div className="flex justify-around">
<div>
<IconWrap>
<CopyText text={data.name} className="w-[28px]" tip="名称复制成功" />
</IconWrap>
复制
</div>
<div>
<DeleteCollectionModal database={data} />
删除
</div>
</div>
</PopoverContent>
</Popover>
Expand Down
13 changes: 9 additions & 4 deletions web/src/pages/app/database/CollectionListPanel/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,12 @@ export default function CollectionListPanel() {
const [search, setSearch] = useState("");

return (
<Panel>
<Panel
className="flex-grow"
onClick={() => {
store.setCurrentShow("DB");
}}
>
<Panel.Header
title="集合列表"
actions={[
Expand Down Expand Up @@ -61,13 +66,13 @@ export default function CollectionListPanel() {
</InputGroup>
</div>

<SectionList>
<SectionList style={{ height: "calc(100vh - 380px)", overflowY: "auto" }}>
{(collectionListQuery?.data?.data || [])
.filter((db: any) => db.name.indexOf(search) >= 0)
.map((db: any) => {
return (
<SectionList.Item
isActive={db.name === store.currentDB?.name}
isActive={store.currentShow === "DB" && db.name === store.currentDB?.name}
key={db.name}
onClick={() => {
store.setCurrentDB(db);
Expand All @@ -80,7 +85,7 @@ export default function CollectionListPanel() {
</div>
<div
className={clsx("flex group-hover:inline ", {
hidden: db.name !== store.currentDB?.name,
hidden: db.name !== store.currentDB?.name || store.currentShow !== "DB",
})}
>
<MoreButton data={db} />
Expand Down
Loading

0 comments on commit dc5df96

Please sign in to comment.