diff --git a/src/Lexical/Lazy.tsx b/src/Lexical/Lazy.tsx
new file mode 100644
index 0000000..c46a302
--- /dev/null
+++ b/src/Lexical/Lazy.tsx
@@ -0,0 +1,18 @@
+import { Spinner } from "@fluentui/react-components";
+import { lazy, Suspense } from "react";
+import type { ILexical } from "./Context/Setting";
+
+/**
+ * @author Aloento
+ * @since 1.2.0
+ * @version 0.1.0
+ */
+export function Lexical(props: ILexical) {
+ return (
+
}>
+
+
+ );
+}
+
+const Wrapper = lazy(() => import("./"));
diff --git a/src/Lexical/Nodes/Table/Component.tsx b/src/Lexical/Nodes/Table/Component.tsx
index 8fd0532..c0c75b2 100644
--- a/src/Lexical/Nodes/Table/Component.tsx
+++ b/src/Lexical/Nodes/Table/Component.tsx
@@ -1334,7 +1334,7 @@ function TableComponent({ nodeKey, rows: rawRows, theme, }: ITableComponent): JS
if (!cellEditor)
return null;
- const style = useStyle();
+ const style = useStyles();
return (
@@ -1387,7 +1387,7 @@ function TableComponent({ nodeKey, rows: rawRows, theme, }: ITableComponent): JS
);
}
-const useStyle = makeStyles({
+const useStyles = makeStyles({
box: { position: "relative" }
});
diff --git a/src/Lexical/Nodes/Table/TableCell.tsx b/src/Lexical/Nodes/Table/TableCell.tsx
index 5db8771..3a28504 100644
--- a/src/Lexical/Nodes/Table/TableCell.tsx
+++ b/src/Lexical/Nodes/Table/TableCell.tsx
@@ -78,7 +78,7 @@ export function TableCell({
setShowMenu(false);
}, [isEditing, isPrimarySelected]);
- const style = useStyle();
+ const style = useStyles();
return (
editor.isEditable());
const [isEditorEmpty, setIsEditorEmpty] = useState(true);
diff --git a/src/Lexical/Plugins/AutoLinkPlugin/index.tsx b/src/Lexical/Plugins/AutoLinkPlugin.tsx
similarity index 100%
rename from src/Lexical/Plugins/AutoLinkPlugin/index.tsx
rename to src/Lexical/Plugins/AutoLinkPlugin.tsx
diff --git a/src/Lexical/Plugins/ClickableLinkPlugin/index.ts b/src/Lexical/Plugins/ClickableLinkPlugin.ts
similarity index 100%
rename from src/Lexical/Plugins/ClickableLinkPlugin/index.ts
rename to src/Lexical/Plugins/ClickableLinkPlugin.ts
diff --git a/src/Lexical/Plugins/CodeActionMenuPlugin/CopyButton.tsx b/src/Lexical/Plugins/CodeActionMenuPlugin/CopyButton.tsx
index c0248a0..047572b 100644
--- a/src/Lexical/Plugins/CodeActionMenuPlugin/CopyButton.tsx
+++ b/src/Lexical/Plugins/CodeActionMenuPlugin/CopyButton.tsx
@@ -5,7 +5,7 @@ import { useDebounceFn } from "ahooks";
import { $getNearestNodeFromDOMNode, $getSelection, $setSelection, LexicalEditor } from "lexical";
import { useState } from "react";
-const useStyle = makeStyles({
+const useStyles = makeStyles({
green: {
color: tokens.colorPaletteLightGreenForeground3
}
@@ -50,7 +50,7 @@ export function CopyButton({ editor, getCodeDOMNode }: ICopyButton) {
}
}
- const style = useStyle();
+ const style = useStyles();
return : } />;
diff --git a/src/Lexical/Plugins/CodeActionMenuPlugin/index.tsx b/src/Lexical/Plugins/CodeActionMenuPlugin/index.tsx
index d13cb37..9c4424b 100644
--- a/src/Lexical/Plugins/CodeActionMenuPlugin/index.tsx
+++ b/src/Lexical/Plugins/CodeActionMenuPlugin/index.tsx
@@ -13,7 +13,7 @@ interface Position {
right: string;
}
-const useStyle = makeStyles({
+const useStyles = makeStyles({
container: {
height: "35.8px",
fontSize: "10px",
@@ -131,7 +131,7 @@ export function CodeActionMenuPlugin({ anchor = document.body }: { anchor?: HTML
});
const codeFriendlyName = getLanguageFriendlyName(lang);
- const style = useStyle();
+ const style = useStyles();
return (
diff --git a/src/Lexical/Plugins/CodeHighlightPlugin/index.ts b/src/Lexical/Plugins/CodeHighlightPlugin.ts
similarity index 100%
rename from src/Lexical/Plugins/CodeHighlightPlugin/index.ts
rename to src/Lexical/Plugins/CodeHighlightPlugin.ts
diff --git a/src/Lexical/Plugins/DraggableBlockPlugin/index.tsx b/src/Lexical/Plugins/DraggableBlockPlugin.tsx
similarity index 98%
rename from src/Lexical/Plugins/DraggableBlockPlugin/index.tsx
rename to src/Lexical/Plugins/DraggableBlockPlugin.tsx
index 54aaee7..0df2209 100644
--- a/src/Lexical/Plugins/DraggableBlockPlugin/index.tsx
+++ b/src/Lexical/Plugins/DraggableBlockPlugin.tsx
@@ -18,9 +18,9 @@ import {
useRef,
useState
} from "react";
-import { isHTMLElement } from "../../Utils/guard";
-import { Point } from "../../Utils/point";
-import { Rect } from "../../Utils/rect";
+import { isHTMLElement } from "../Utils/guard";
+import { Point } from "../Utils/point";
+import { Rect } from "../Utils/rect";
let prevIndex = Infinity;
@@ -298,7 +298,7 @@ function DraggableBlockMenu({ editor, anchor }: { editor: LexicalEditor; anchor:
hideTargetLine(targetLineRef.current);
}
- const style = useStyle();
+ const style = useStyles();
return (
@@ -316,7 +316,7 @@ function DraggableBlockMenu({ editor, anchor }: { editor: LexicalEditor; anchor:
);
}
-const useStyle = makeStyles({
+const useStyles = makeStyles({
meun: {
...shorthands.borderRadius("4px"),
...shorthands.padding("2px", "1px"),
diff --git a/src/Lexical/Plugins/FloatingLinkEditorPlugin/index.tsx b/src/Lexical/Plugins/FloatingLinkEditorPlugin.tsx
similarity index 96%
rename from src/Lexical/Plugins/FloatingLinkEditorPlugin/index.tsx
rename to src/Lexical/Plugins/FloatingLinkEditorPlugin.tsx
index e178565..1743aa5 100644
--- a/src/Lexical/Plugins/FloatingLinkEditorPlugin/index.tsx
+++ b/src/Lexical/Plugins/FloatingLinkEditorPlugin.tsx
@@ -18,9 +18,9 @@ import {
} from "lexical";
import { Dispatch, useCallback, useEffect, useRef, useState } from "react";
import { BaseCard, Col, Flex } from "~/Helpers/Styles";
-import { getSelectedNode } from "../../Utils/getSelectedNode";
-import { setFloatingElemPosition } from "../../Utils/setFloatingElemPosition";
-import { sanitizeUrl } from "../../Utils/url";
+import { getSelectedNode } from "../Utils/getSelectedNode";
+import { setFloatingElemPosition } from "../Utils/setFloatingElemPosition";
+import { sanitizeUrl } from "../Utils/url";
interface IFloatingLinkEditor {
editor: LexicalEditor;
@@ -150,7 +150,7 @@ function FloatingLinkEditor({ editor, isLink, setIsLink, anchor }: IFloatingLink
inputRef.current.focus();
}, [isEditMode]);
- const style = useStyle();
+ const style = useStyles();
return (
@@ -195,7 +195,7 @@ const box = {
...shorthands.padding("4px", "12px"),
}
-const useStyle = makeStyles({
+const useStyles = makeStyles({
editor: {
...BaseCard,
...Col,
diff --git a/src/Lexical/Plugins/FloatingTextFormatToolbarPlugin/index.tsx b/src/Lexical/Plugins/FloatingTextFormatToolbarPlugin.tsx
similarity index 97%
rename from src/Lexical/Plugins/FloatingTextFormatToolbarPlugin/index.tsx
rename to src/Lexical/Plugins/FloatingTextFormatToolbarPlugin.tsx
index b8d8f3c..3c0db8a 100644
--- a/src/Lexical/Plugins/FloatingTextFormatToolbarPlugin/index.tsx
+++ b/src/Lexical/Plugins/FloatingTextFormatToolbarPlugin.tsx
@@ -18,9 +18,9 @@ import {
} from "lexical";
import { useCallback, useEffect, useRef, useState } from "react";
import { BaseCard } from "~/Helpers/Styles";
-import { getDOMRangeRect } from "../../Utils/getDOMRangeRect";
-import { getSelectedNode } from "../../Utils/getSelectedNode";
-import { setFloatingElemPosition } from "../../Utils/setFloatingElemPosition";
+import { getDOMRangeRect } from "../Utils/getDOMRangeRect";
+import { getSelectedNode } from "../Utils/getSelectedNode";
+import { setFloatingElemPosition } from "../Utils/setFloatingElemPosition";
interface ITextFormatFloatingToolbar {
editor: LexicalEditor;
@@ -126,7 +126,7 @@ function TextFormatFloatingToolbar({
isLink && "link"
] as string[];
- const style = useStyle();
+ const style = useStyles();
return (
;
diff --git a/src/Lexical/Plugins/LinkPlugin/index.tsx b/src/Lexical/Plugins/LinkPlugin.tsx
similarity index 80%
rename from src/Lexical/Plugins/LinkPlugin/index.tsx
rename to src/Lexical/Plugins/LinkPlugin.tsx
index dc181bf..f040ed3 100644
--- a/src/Lexical/Plugins/LinkPlugin/index.tsx
+++ b/src/Lexical/Plugins/LinkPlugin.tsx
@@ -1,5 +1,5 @@
import { LinkPlugin as LexicalLinkPlugin } from "@lexical/react/LexicalLinkPlugin";
-import { validateUrl } from "../../Utils/url";
+import { validateUrl } from "../Utils/url";
export function LinkPlugin(): JSX.Element {
return ;
diff --git a/src/Lexical/Plugins/ListMaxIndentLevelPlugin/index.ts b/src/Lexical/Plugins/ListMaxIndentLevelPlugin.ts
similarity index 100%
rename from src/Lexical/Plugins/ListMaxIndentLevelPlugin/index.ts
rename to src/Lexical/Plugins/ListMaxIndentLevelPlugin.ts
diff --git a/src/Lexical/Plugins/TabFocusPlugin/index.tsx b/src/Lexical/Plugins/TabFocusPlugin.tsx
similarity index 100%
rename from src/Lexical/Plugins/TabFocusPlugin/index.tsx
rename to src/Lexical/Plugins/TabFocusPlugin.tsx
diff --git a/src/Lexical/Plugins/TablePlugin/index.tsx b/src/Lexical/Plugins/TablePlugin.tsx
similarity index 97%
rename from src/Lexical/Plugins/TablePlugin/index.tsx
rename to src/Lexical/Plugins/TablePlugin.tsx
index 6500794..fd69fe1 100644
--- a/src/Lexical/Plugins/TablePlugin/index.tsx
+++ b/src/Lexical/Plugins/TablePlugin.tsx
@@ -16,8 +16,8 @@ import {
createCommand
} from "lexical";
import { createContext, useContext, useEffect, useMemo, useState } from "react";
-import { IRow, TableNode, createCell, createRow } from "../../Nodes/Table";
-import { invariant } from "../../Utils/invariant";
+import { IRow, TableNode, createCell, createRow } from "../Nodes/Table";
+import { invariant } from "../Utils/invariant";
export type InsertTableCommandPayload = Readonly<{
columns: string | number;
diff --git a/src/Lexical/Plugins/ToolbarPlugin/Font.tsx b/src/Lexical/Plugins/ToolbarPlugin/Font.tsx
index 87dd7ab..af813f0 100644
--- a/src/Lexical/Plugins/ToolbarPlugin/Font.tsx
+++ b/src/Lexical/Plugins/ToolbarPlugin/Font.tsx
@@ -64,7 +64,7 @@ export function FontDropDown({ editor, value, style, disabled = false }: IFontDr
{(style === "font-family" ? FONT_FAMILY_OPTIONS : FONT_SIZE_OPTIONS).map(
- ([option, text]) =>
diff --git a/src/Lexical/Plugins/ToolbarPlugin/index.tsx b/src/Lexical/Plugins/ToolbarPlugin/index.tsx
index da33e25..33ea350 100644
--- a/src/Lexical/Plugins/ToolbarPlugin/index.tsx
+++ b/src/Lexical/Plugins/ToolbarPlugin/index.tsx
@@ -53,7 +53,7 @@ import { BlockFormat, BlockTypeToBlockName } from "./BlockFormat";
import { LexColorPicker } from "./ColorPopover";
import { FontDropDown } from "./Font";
-const useStyle = makeStyles({
+const useStyles = makeStyles({
box: {
columnGap: "1px",
backgroundColor: "#fff",
@@ -250,7 +250,7 @@ export function ToolbarPlugin(): JSX.Element {
[activeEditor, selectedElementKey]
);
- const style = useStyle();
+ const style = useStyles();
return (
- {CODE_LANGUAGE_OPTIONS.map(([value, name]) =>
-
diff --git a/src/Lexical/Themes/LexEditorTheme.ts b/src/Lexical/Theme.ts
similarity index 98%
rename from src/Lexical/Themes/LexEditorTheme.ts
rename to src/Lexical/Theme.ts
index a28ba9c..80e6966 100644
--- a/src/Lexical/Themes/LexEditorTheme.ts
+++ b/src/Lexical/Theme.ts
@@ -1,7 +1,7 @@
import { makeStyles, mergeClasses, shorthands } from "@fluentui/react-components";
import type { EditorThemeClasses } from "lexical";
-const useStyle = makeStyles({
+const useStyles = makeStyles({
ltr: { textAlign: "left" },
rtl: { textAlign: "right" },
paragraph: {
@@ -258,7 +258,7 @@ const useStyle = makeStyles({
marginLeft: "16px",
listStylePosition: "inside"
},
- listItem: { ...shorthands.margin(0, "32px") },
+ listItem: { ...shorthands.margin(0, "8px") },
tokenComment: { color: "slategray" },
tokenPunctuation: { color: "#999" },
tokenProperty: { color: "#905" },
@@ -274,7 +274,7 @@ const useStyle = makeStyles({
});
export function useLexEditorTheme(): EditorThemeClasses {
- const style = useStyle();
+ const style = useStyles();
return {
blockCursor: "LexEditor_blockCursor",
code: mergeClasses(style.code, "LexEditor_code"),
diff --git a/src/Lexical/UI/ContentEditable.tsx b/src/Lexical/UI/ContentEditable.tsx
index 2621a20..dbe62b3 100644
--- a/src/Lexical/UI/ContentEditable.tsx
+++ b/src/Lexical/UI/ContentEditable.tsx
@@ -2,7 +2,7 @@ import { makeStyles, mergeClasses, shorthands } from "@fluentui/react-components
import { ContentEditable } from "@lexical/react/LexicalContentEditable";
import { useLexical } from "../Context/Setting";
-const useStyle = makeStyles({
+const useStyles = makeStyles({
root: {
...shorthands.border(0),
fontSize: "15px",
@@ -35,7 +35,7 @@ const useStyle = makeStyles({
});
export function LexContentEditable({ className, table }: { className?: string, table?: true }): JSX.Element {
- const style = useStyle();
+ const style = useStyles();
const { Display } = useLexical();
return
@@ -306,7 +306,7 @@ export function ImageResizer({
);
}
-const useStyle = makeStyles({
+const useStyles = makeStyles({
button: {
minWidth: "unset",
fontWeight: "unset",
diff --git a/src/Lexical/UI/Placeholder.tsx b/src/Lexical/UI/Placeholder.tsx
index bb1d6d6..0c7d329 100644
--- a/src/Lexical/UI/Placeholder.tsx
+++ b/src/Lexical/UI/Placeholder.tsx
@@ -1,7 +1,7 @@
import { makeStyles, shorthands } from "@fluentui/react-components";
import { ReactNode } from "react";
-const useStyle = makeStyles({
+const useStyles = makeStyles({
box: {
fontSize: "15px",
color: "#999",
@@ -19,6 +19,6 @@ const useStyle = makeStyles({
});
export function Placeholder({ children, className }: { children: ReactNode; className?: string; }): JSX.Element {
- const style = useStyle();
+ const style = useStyles();
return {children}
;
}
diff --git a/src/Lexical/index.tsx b/src/Lexical/index.tsx
index 146464e..0df6e6e 100644
--- a/src/Lexical/index.tsx
+++ b/src/Lexical/index.tsx
@@ -6,7 +6,7 @@ import { LexicalContext, type ILexical } from "./Context/Setting";
import { LexEditor } from "./Editor";
import { LexicalNodes } from "./Nodes/LexicalNodes";
import { TableContext } from "./Plugins/TablePlugin";
-import { useLexEditorTheme } from "./Themes/LexEditorTheme";
+import { useLexEditorTheme } from "./Theme";
/**
* Lexical Editor
@@ -15,7 +15,7 @@ import { useLexEditorTheme } from "./Themes/LexEditorTheme";
* @since MusiLand 0.5.0
* @version 0.1.0
*/
-export function Lexical({
+function Lexical({
Namespace = Dic.Name,
Plugin = LexRichTextPreset,
Editable = true,
@@ -51,3 +51,6 @@ export function Lexical({
);
}
+
+/** @deprecated */
+export default Lexical;
diff --git a/src/Pages/Admin/Nav.tsx b/src/Pages/Admin/Nav.tsx
index 410849b..c73a0fe 100644
--- a/src/Pages/Admin/Nav.tsx
+++ b/src/Pages/Admin/Nav.tsx
@@ -7,7 +7,7 @@ import { Flex } from "~/Helpers/Styles";
* @since 0.1.0
* @version 0.1.0
*/
-const useStyle = makeStyles({
+const useStyles = makeStyles({
box: {
...Flex,
flexGrow: 1,
@@ -29,7 +29,7 @@ const useStyle = makeStyles({
* @version 0.1.1
*/
export function AdminTopNav() {
- const style = useStyle();
+ const style = useStyles();
const { Paths } = useRouter();
const path1 = Paths.at(0);
const path2 = Paths.at(1) || "Product";
diff --git a/src/Pages/Admin/Order/List.tsx b/src/Pages/Admin/Order/List.tsx
index f9d2ccc..17f6303 100644
--- a/src/Pages/Admin/Order/List.tsx
+++ b/src/Pages/Admin/Order/List.tsx
@@ -1,5 +1,5 @@
import { DataGridCell, DataGridHeaderCell, TableColumnDefinition, createTableColumn, makeStyles } from "@fluentui/react-components";
-import { DelegateDataGrid } from "~/Components/DataGrid/Delegate";
+import { DelegateDataGrid } from "~/Components/DataGrid";
import { ICartItem } from "~/Components/ShopCart";
/**
@@ -64,6 +64,6 @@ const columns: TableColumnDefinition[] = [
*/
export function AdminOrderList({ Items }: { Items?: ICartItem[] }) {
return (
-
+
)
}
diff --git a/src/Pages/Admin/Order/index.tsx b/src/Pages/Admin/Order/index.tsx
index 3f37bb3..f12195a 100644
--- a/src/Pages/Admin/Order/index.tsx
+++ b/src/Pages/Admin/Order/index.tsx
@@ -1,6 +1,6 @@
import { DataGridCell, DataGridHeaderCell, TableColumnDefinition, createTableColumn, makeStyles } from "@fluentui/react-components";
import { useRequest } from "ahooks";
-import { DelegateDataGrid } from "~/Components/DataGrid/Delegate";
+import { DelegateDataGrid } from "~/Components/DataGrid";
import { Logger } from "~/Helpers/Logger";
import { IOrderItem } from "~/Pages/History";
import { HistoryColumns } from "~/Pages/History/Columns";
@@ -93,6 +93,6 @@ export function AdminOrder() {
});
return (
-
+
)
}
diff --git a/src/Pages/Admin/Product/Add.tsx b/src/Pages/Admin/Product/Add.tsx
index a0f6a3d..a14802a 100644
--- a/src/Pages/Admin/Product/Add.tsx
+++ b/src/Pages/Admin/Product/Add.tsx
@@ -21,7 +21,7 @@ const log = new Logger("Admin", "Product", "AddButton");
/**
* @author Aloento
* @since 0.1.0
- * @version 0.3.2
+ * @version 0.3.3
*/
export function AdminProductAddButton() {
const { Nav, Paths } = useRouter();
@@ -33,7 +33,7 @@ export function AdminProductAddButton() {
const { dispatch, dispatchToast } = useErrorToast(log);
- const { run } = AdminHub.Product.Post.useCreate({
+ const { run, loading } = AdminHub.Product.Post.useCreate({
manual: true,
onError(e, params) {
dispatch({
@@ -52,6 +52,7 @@ export function AdminProductAddButton() {
);
Nav("Admin", data);
+ setName("");
}
});
@@ -82,7 +83,13 @@ export function AdminProductAddButton() {
-
+
diff --git a/src/Pages/Admin/Product/Combo/Detail.tsx b/src/Pages/Admin/Product/Combo/Detail.tsx
index a161812..1e8dd09 100644
--- a/src/Pages/Admin/Product/Combo/Detail.tsx
+++ b/src/Pages/Admin/Product/Combo/Detail.tsx
@@ -3,7 +3,7 @@ import { DismissRegular, EditRegular } from "@fluentui/react-icons";
import { useBoolean, useRequest } from "ahooks";
import { isInteger } from "lodash-es";
import { useState } from "react";
-import { DelegateDataGrid } from "~/Components/DataGrid/Delegate";
+import { DelegateDataGrid } from "~/Components/DataGrid";
import { Logger } from "~/Helpers/Logger";
import { Flex } from "~/Helpers/Styles";
import { useErrorToast } from "~/Helpers/useToast";
@@ -152,7 +152,7 @@ export function AdminProductComboDetail({ Id, ProdId, Combo, Stock, Refresh }: I
setCombo({ ...combo });
},
...x
- })) || []}
+ }))}
Columns={columns}
/>
diff --git a/src/Pages/Admin/Product/Combo/New.tsx b/src/Pages/Admin/Product/Combo/New.tsx
index 98748ec..7bc621b 100644
--- a/src/Pages/Admin/Product/Combo/New.tsx
+++ b/src/Pages/Admin/Product/Combo/New.tsx
@@ -3,7 +3,7 @@ import { AddRegular, DismissRegular } from "@fluentui/react-icons";
import { useBoolean, useRequest } from "ahooks";
import { isInteger } from "lodash-es";
import { useState } from "react";
-import { DelegateDataGrid } from "~/Components/DataGrid/Delegate";
+import { DelegateDataGrid } from "~/Components/DataGrid";
import { Logger } from "~/Helpers/Logger";
import { Flex } from "~/Helpers/Styles";
import { useErrorToast } from "~/Helpers/useToast";
@@ -140,7 +140,7 @@ export function AdminProductNewCombo({ ProdId, Refresh }: { ProdId: number; Refr
setCombo({ ...combo });
},
...x
- })) || []}
+ }))}
Columns={columns}
/>
diff --git a/src/Pages/Admin/Product/Combo/index.tsx b/src/Pages/Admin/Product/Combo/index.tsx
index 842f3e2..3bb31f0 100644
--- a/src/Pages/Admin/Product/Combo/index.tsx
+++ b/src/Pages/Admin/Product/Combo/index.tsx
@@ -1,6 +1,6 @@
import { DataGridCell, DataGridHeaderCell, Subtitle1, TableColumnDefinition, createTableColumn, makeStyles } from "@fluentui/react-components";
import { useRequest } from "ahooks";
-import { DelegateDataGrid } from "~/Components/DataGrid/Delegate";
+import { DelegateDataGrid } from "~/Components/DataGrid";
import { Logger } from "~/Helpers/Logger";
import { Flex } from "~/Helpers/Styles";
import { Hub } from "~/ShopNet";
@@ -132,7 +132,7 @@ export function AdminProductCombo({ ProdId }: { ProdId: number }) {
-
+
+
+
+
+
+
+ Are You Sure?
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ }>
+ Edit Product Description
+
+
+
+
+
+
+
+
+}
diff --git a/src/Pages/Admin/Product/Photo/Edit.tsx b/src/Pages/Admin/Product/Photo/Edit.tsx
index d7f1c0f..edc877c 100644
--- a/src/Pages/Admin/Product/Photo/Edit.tsx
+++ b/src/Pages/Admin/Product/Photo/Edit.tsx
@@ -1,6 +1,7 @@
-import { Button, Dialog, DialogBody, DialogContent, DialogSurface, DialogTitle, DialogTrigger, Field, Image, Input, Toast, ToastTitle, makeStyles, tokens } from "@fluentui/react-components";
+import { Button, Dialog, DialogBody, DialogContent, DialogSurface, DialogTitle, DialogTrigger, Field, Input, Toast, ToastTitle, makeStyles, tokens } from "@fluentui/react-components";
import { DismissRegular, EditRegular } from "@fluentui/react-icons";
import { useState } from "react";
+import { GuidImage } from "~/Helpers/GuidImage";
import { Logger } from "~/Helpers/Logger";
import { ColFlex, Cover, Flex } from "~/Helpers/Styles";
import { useErrorToast } from "~/Helpers/useToast";
@@ -44,7 +45,7 @@ const log = new Logger("Admin", "Product", "Detail", "Photo", "Edit");
/**
* @author Aloento
* @since 0.5.0
- * @version 0.3.2
+ * @version 0.3.3
*/
export function AdminProductPhotoEdit({ Photo: { Id, Cover, Caption }, Refresh }: IAdminProductPhotoEdit) {
const style = useStyles();
@@ -135,10 +136,11 @@ export function AdminProductPhotoEdit({ Photo: { Id, Cover, Caption }, Refresh }
-
diff --git a/src/Pages/Admin/Product/Photo/index.tsx b/src/Pages/Admin/Product/Photo/index.tsx
index b62911d..62c09f7 100644
--- a/src/Pages/Admin/Product/Photo/index.tsx
+++ b/src/Pages/Admin/Product/Photo/index.tsx
@@ -1,7 +1,8 @@
import { Button, DataGridCell, DataGridHeaderCell, Subtitle1, TableColumnDefinition, Toast, ToastTitle, createTableColumn, makeStyles } from "@fluentui/react-components";
import { AddRegular, ArrowDownRegular, ArrowUpRegular } from "@fluentui/react-icons";
import { useRequest } from "ahooks";
-import { DelegateDataGrid } from "~/Components/DataGrid/Delegate";
+import { useState } from "react";
+import { DelegateDataGrid } from "~/Components/DataGrid";
import { MakeCoverCol } from "~/Helpers/CoverCol";
import { Logger } from "~/Helpers/Logger";
import { Flex } from "~/Helpers/Styles";
@@ -111,11 +112,22 @@ let refreshCarousel: () => void;
/**
* @author Aloento
* @since 0.5.0
- * @version 0.3.2
+ * @version 0.4.0
*/
export function AdminProductPhoto({ ProdId }: { ProdId: number }) {
- const { data, run } = useRequest(() => Hub.Product.Get.Carousel(ProdId, log), {
- onError: log.error
+ const [list, setList] = useState([]);
+
+ const { run } = useRequest(() => Hub.Product.Get.PhotoList(ProdId, log), {
+ onError: log.error,
+ onSuccess([raw]) {
+ const map = raw.map(x => ({
+ Id: x.Order,
+ Cover: x.ObjectId,
+ Caption: x.Caption || "No Caption"
+ }));
+
+ setList(map);
+ }
});
refreshCarousel = run;
@@ -138,7 +150,7 @@ export function AdminProductPhoto({ ProdId }: { ProdId: number }) {
{ intent: "success" }
);
- refreshCarousel();
+ run();
}
});
@@ -165,6 +177,6 @@ export function AdminProductPhoto({ ProdId }: { ProdId: number }) {
-
+
}
diff --git a/src/Pages/Admin/Product/Row.tsx b/src/Pages/Admin/Product/Row.tsx
new file mode 100644
index 0000000..9c18e0c
--- /dev/null
+++ b/src/Pages/Admin/Product/Row.tsx
@@ -0,0 +1,69 @@
+import { DataGridRow, TableRowData } from "@fluentui/react-components";
+import { useAsyncEffect, useBoolean } from "ahooks";
+import { useState } from "react";
+import { Logger } from "~/Helpers/Logger";
+import { Hub } from "~/ShopNet";
+import { AdminHub } from "~/ShopNet/Admin";
+import { IProductItem } from ".";
+
+const log = new Logger("Admin", "Product", "Row");
+
+/**
+ * @author Aloento
+ * @since 1.3.0
+ * @version 0.1.0
+ */
+export function AdminProductRow({ item: id }: TableRowData) {
+ const [detail, setDetail] = useState(() => ({
+ Id: id,
+ Cover: "",
+ Name: "Loading..."
+ }));
+
+ const [block, { setTrue }] = useBoolean();
+
+ const hub = Hub.Product.Get;
+
+ useAsyncEffect(async () => {
+ const prod = await hub.Product(id).catch(log.error);
+
+ if (!prod) {
+ log.warn(`Product ${id} Not Found`);
+ return setTrue();
+ }
+
+ let item = {
+ ...detail,
+ Name: prod.Name,
+ Category: prod.Category || "Pending"
+ };
+
+ setDetail(item);
+
+ const [_, cover] = await hub.PhotoList(id, log);
+
+ if (!cover)
+ log.warn(`Product ${id} has no photo`);
+
+ setDetail(item = {
+ ...item,
+ Cover: cover
+ });
+
+ const count = await AdminHub.Product.Get.Count(id).catch(log.error);
+
+ count && setDetail({
+ ...item,
+ ...count
+ });
+ }, []);
+
+ if (block)
+ return null;
+
+ return (
+ key={id}>
+ {({ renderCell }) => renderCell(detail)}
+
+ );
+}
diff --git a/src/Pages/Admin/Product/Variant/Edit/index.tsx b/src/Pages/Admin/Product/Variant/Edit/index.tsx
index 305f661..10352d2 100644
--- a/src/Pages/Admin/Product/Variant/Edit/index.tsx
+++ b/src/Pages/Admin/Product/Variant/Edit/index.tsx
@@ -1,6 +1,6 @@
import { Button, DataGridCell, DataGridHeaderCell, Dialog, DialogActions, DialogBody, DialogContent, DialogSurface, DialogTitle, DialogTrigger, TableColumnDefinition, createTableColumn, makeStyles, tokens } from "@fluentui/react-components";
import { DismissRegular, EditRegular } from "@fluentui/react-icons";
-import { DelegateDataGrid } from "~/Components/DataGrid/Delegate";
+import { DelegateDataGrid } from "~/Components/DataGrid";
import { ColFlex } from "~/Helpers/Styles";
import { IVariantItem } from "..";
import { AdminProductTypeDelete } from "./Delete";
diff --git a/src/Pages/Admin/Product/Variant/index.tsx b/src/Pages/Admin/Product/Variant/index.tsx
index 0c1dd0e..37edcaf 100644
--- a/src/Pages/Admin/Product/Variant/index.tsx
+++ b/src/Pages/Admin/Product/Variant/index.tsx
@@ -1,6 +1,6 @@
import { DataGridCell, DataGridHeaderCell, Subtitle1, TableColumnDefinition, createTableColumn, makeStyles } from "@fluentui/react-components";
import { useRequest } from "ahooks";
-import { DelegateDataGrid } from "~/Components/DataGrid/Delegate";
+import { DelegateDataGrid } from "~/Components/DataGrid";
import { Logger } from "~/Helpers/Logger";
import { Flex } from "~/Helpers/Styles";
import { AdminHub } from "~/ShopNet/Admin";
@@ -149,6 +149,6 @@ export function AdminProductVariant({ ProdId }: { ProdId: number }) {