Skip to content

Commit

Permalink
Fireback changes for react (#79)
Browse files Browse the repository at this point in the history
  • Loading branch information
torabian authored Nov 19, 2024
1 parent 948a261 commit 9da1dab
Show file tree
Hide file tree
Showing 159 changed files with 841 additions and 8,700 deletions.
4 changes: 3 additions & 1 deletion clients/fireback-react/src/sdk/fireback/core/react-tools.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -314,6 +314,7 @@ export function RemoteQueryProvider({
defaultExecFn,
socket,
credentialStorage,
prefix,
}: {
children: React.ReactNode;
remote?: string;
Expand All @@ -325,6 +326,7 @@ export function RemoteQueryProvider({
defaultExecFn?: any;
socket?: boolean;
credentialStorage?: CredentialStorage;
prefix?: string;
}) {
const [checked, setChecked] = useState(false);
const [session, setSession$] = useState<ContextSession>();
Expand Down Expand Up @@ -369,7 +371,7 @@ export function RemoteQueryProvider({
headers: {
authorization: token || session?.token,
},
prefix: remote,
prefix: remote + prefix,
};

if (selectedWorkspaceInternal) {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -314,6 +314,7 @@ export function RemoteQueryProvider({
defaultExecFn,
socket,
credentialStorage,
prefix,
}: {
children: React.ReactNode;
remote?: string;
Expand All @@ -325,6 +326,7 @@ export function RemoteQueryProvider({
defaultExecFn?: any;
socket?: boolean;
credentialStorage?: CredentialStorage;
prefix?: string;
}) {
const [checked, setChecked] = useState(false);
const [session, setSession$] = useState<ContextSession>();
Expand Down Expand Up @@ -369,7 +371,7 @@ export function RemoteQueryProvider({
headers: {
authorization: token || session?.token,
},
prefix: remote,
prefix: remote + prefix,
};

if (selectedWorkspaceInternal) {
Expand Down
10 changes: 10 additions & 0 deletions modules/workspaces/codegen/react-new/package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions modules/workspaces/codegen/react-new/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -47,6 +47,7 @@
"react-error-boundary": "^4.0.13",
"react-phone-input-2": "^2.15.1",
"react-query": "^3.39.3",
"react-resizable-panels": "^2.1.7",
"react-router-dom": "^6.9.0",
"react-scripts": "5",
"react-select": "^5.7.2",
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -10,22 +10,24 @@ import { RemoteQueryProvider as FirebackQueryProvider } from "../../sdk/core/rea
export function WithFireback({
children,
queryClient,
prefix,
mockServer,
config,
}: {
children: React.ReactNode;
queryClient: QueryClient;
config: AppConfig;
mockServer: any;
prefix?: string;
}) {
const { locale } = useLocale();

const t = useT();

return (
<FirebackQueryProvider
preferredAcceptLanguage={locale || config.interfaceLanguage}
identifier="fireback"
prefix={prefix}
queryClient={queryClient}
remote={process.env.REACT_APP_REMOTE_SERVICE}
/// #if process.env.REACT_APP_INACCURATE_MOCK_MODE == "true"
Expand Down
Original file line number Diff line number Diff line change
@@ -1,13 +1,13 @@
import { httpErrorHanlder } from "@/modules/fireback/hooks/api";
import { Toast } from "@/modules/fireback/hooks/toast";
import { useCommonEntityManager } from "@/modules/fireback/hooks/useCommonEntityManager";
import { IResponse } from "../../sdk/core/http-tools";
import { Formik, FormikHelpers, FormikProps } from "formik";
import { useEffect } from "react";
import { KeyboardAction } from "../../definitions/definitions";
import { useBackButton, useCommonCrudActions } from "../action-menu/ActionMenu";
import { QueryErrorView } from "../error-view/QueryError";
import { usePageTitle } from "../page-title/PageTitle";
import { IResponse } from "../../definitions/JSONStyle";

export interface CommonEntityManagerProps<T> {
data?: T | null;
Expand Down Expand Up @@ -100,6 +100,14 @@ export const CommonEntityManager = ({
}).catch((err) => httpErrorHanlder(err, t));
};

const formWorking =
getSingleHook?.query?.isLoading ||
false ||
postHook?.query?.isLoading ||
false ||
patchHook?.query?.isLoading ||
false;

useCommonCrudActions({
// onCancel: onCancel,
onSave() {
Expand Down Expand Up @@ -132,22 +140,24 @@ export const CommonEntityManager = ({
>
{/* <pre>{JSON.stringify(form.values, null, 2)}</pre> */}
{/* <ErrorsView errors={form.errors} /> */}
<div style={{ marginBottom: "15px" }}>
<QueryErrorView
query={
postHook?.mutation?.isError
? postHook.mutation
: patchHook?.mutation?.isError
? patchHook.mutation
: getSingleHook?.query?.isError
? getSingleHook.query
: null
}
/>
</div>
<Form isEditing={isEditing} form={form} />
{/* <ProductPlanForm form={form} /> */}
<button type="submit" className="d-none" />
<fieldset disabled={formWorking}>
<div style={{ marginBottom: "15px" }}>
<QueryErrorView
query={
postHook?.mutation?.isError
? postHook.mutation
: patchHook?.mutation?.isError
? patchHook.mutation
: getSingleHook?.query?.isError
? getSingleHook.query
: null
}
/>
</div>
<Form isEditing={isEditing} form={form} />
{/* <ProductPlanForm form={form} /> */}
<button type="submit" className="d-none" />
</fieldset>
</form>
)}
</Formik>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@ import Link from "../link/Link";
import { filtersToJsonQuery } from "./EnttityManagerHelper";
import { FlatListMode } from "./FlatListMode";
import { MapListMode } from "./MapListMode";
import { CopyCell } from "./CopyCell";

const media = matchMedia("(max-width: 600px)");

Expand Down Expand Up @@ -149,9 +150,12 @@ export const CommonListManager = ({
};

let UniqueIdCellRenderer = ({ value }: any) => (
<Link href={uniqueIdHrefHandler && uniqueIdHrefHandler(value)}>
{value}
</Link>
<div style={{ position: "relative" }}>
<Link href={uniqueIdHrefHandler && uniqueIdHrefHandler(value)}>
{value}
</Link>
<CopyCell value={value} />
</div>
);

let BooleanTypeProvider = (props: any) => (
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
import { Toast } from "../../hooks/toast";

export const CopyCell = ({ value }: { value?: string }) => {
const onCopy = (e: any) => {
e.stopPropagation();
navigator.clipboard
.writeText(value)
.then(() => {
Toast(`Copied ${value}`, { type: "info", autoClose: 600 });
})
.catch((err) => {
Toast(`Copy failed.`, { type: "error", autoClose: 600 });
});
};

return (
<div className="table-copy-btn" onClick={onCopy}>
<CopyIcon />
</div>
);
};

const CopyIcon = ({ size = 16, color = "silver", style = {} }) => (
<svg
width={size}
height={size}
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
style={style}
>
<path
d="M16 1H6C4.9 1 4 1.9 4 3V17H6V3H16V1ZM18 5H10C8.9 5 8 5.9 8 7V21C8 22.1 8.9 23 10 23H18C19.1 23 20 22.1 20 21V7C20 5.9 19.1 5 18 5ZM18 21H10V7H18V21Z"
fill={color}
/>
</svg>
);
Original file line number Diff line number Diff line change
@@ -0,0 +1,156 @@
import { useT } from "../../../hooks/useT";
import { useFileUploader } from "../../../modules/drive/DriveTools";

import { debounce } from "lodash";
import { useRef } from "react";
import { useFileListener } from "../../window-drop/WindowDrop";
import { useRemoteInformation } from "../../../hooks/useEnvironment";
import { FileEntity } from "@/modules/fireback/sdk/modules/workspaces/FileEntity";

export interface ImageAsset {
width?: number | undefined;
height?: number | undefined;
attachment?: FileEntity | undefined;
attachmentId?: string | undefined;
}

export interface ImageAssetPlaceholder {
width: number;
height: number;
title?: string;
description?: string;
}

interface FormImageAssetProps {
onChange?: (value: ImageAsset[]) => void;
value?: ImageAsset[];
label?: string;
hint?: string;
placeHolders: ImageAssetPlaceholder[];
}

export const FormImageAsset = ({
onChange,
value,
label,
placeHolders,
}: FormImageAssetProps) => {
const { directPath } = useRemoteInformation();
const readonly = !!onChange;
const { upload } = useFileUploader();
const data = useRef<FileEntity[]>([]);
const t = useT();
// Use debounced onChange
const onChangeDebounced = debounce(
(items: FileEntity[]) => {
// onChange && onChange(items);
},
250,
{ maxWait: 1000 }
);

const uploadFn = (files: File[]) => {
const items = upload(files);
items.forEach((item) => {
item.then((x) => {
data.current.push({ uniqueId: x } as any);
onChangeDebounced(data.current);
});
});

return items;
};

useFileListener({
enabled: !readonly,
label: "Attach documents about the payment",
extentions: ["*"],
onCaptureFile(files) {
Promise.all(uploadFn(files)).then((result) => {});
},
});

const onUploadDialog = () => {
var input = document.createElement("input");
input.type = "file";
input.multiple = true;

input.onchange = (e: any) => {
Promise.all(uploadFn(Array.from(e.target.files))).then((result) => {});
};

input.click();
};

const itemExtractor = (
items: ImageAsset[],
width: number,
height: number
) => {
return (items || []).find(
(item) => item.width === width && item.height === height
);
};

return (
<div>
{label && <label>{label}</label>}

<div className="image-assets">
{placeHolders.map((x) => {
const { width, height } = calculateProportionalSize(
x.width,
x.height
);

const item = itemExtractor(value, x.width, x.height);

if (item && item.attachment) {
return (
<div
className="image-asset-item"
style={{
fontSize: "11px",
display: "flex",
width: `${width}px`,
height: `${height}px`,
flexDirection: "column",
}}
key={`${x.width}_${x.height}`}
>
{x.width}x{x.height}
<img
style={{ width: "100%" }}
src={directPath(item.attachment as any)}
/>
</div>
);
}

return (
<div
className="image-asset-item"
style={{
width: `${width}px`,
height: `${height}px`,
}}
key={`${x.width}_${x.height}`}
>
{x.width}x{x.height}
</div>
);
})}
</div>
</div>
);
};

const MAX_SIZE = 180;

const calculateProportionalSize = (width, height) => {
const scaleFactor = MAX_SIZE / Math.max(width, height);
return {
width: Math.round(width * scaleFactor),
height: Math.round(height * scaleFactor),
};
};
Loading

0 comments on commit 9da1dab

Please sign in to comment.