fixing multi upload

This commit is contained in:
rizky 2024-08-11 01:01:37 -07:00
parent fa6ceae3af
commit a4a4785ca4
3 changed files with 37 additions and 11 deletions

View File

@ -101,7 +101,7 @@ export const Field: FC<FieldProp> = (arg) => {
)} )}
ref={typeof arg.field_ref === "function" ? arg.field_ref : undefined} ref={typeof arg.field_ref === "function" ? arg.field_ref : undefined}
> >
{showlabel !== "n" && <Label field={field} fm={fm} />} {showlabel !== "n" && field.label && <Label field={field} fm={fm} />}
<div className={cx("field-input c-flex c-flex-1 c-flex-col")}> <div className={cx("field-input c-flex c-flex-1 c-flex-col")}>
<FieldInput <FieldInput
field={field} field={field}

View File

@ -44,7 +44,20 @@ export const FieldRichText: FC<{
}, []); }, []);
let value: any = fm.data[field.name]; let value: any = fm.data[field.name];
return ( return (
<div className="c-flex c-flex-col c-w-full"> <div
className={cx(
"c-flex c-flex-col c-w-full",
css`
.ql-toolbar,
.ql-container {
border: 0px !important;
}
.ql-container {
border-top: 1px solid #cecece !important;
}
`
)}
>
<div <div
ref={(e) => (local.ref = e)} ref={(e) => (local.ref = e)}
className={cx(css` className={cx(css`

View File

@ -2,14 +2,11 @@ import { useLocal } from "@/utils/use-local";
import { Spinner } from "lib/comps/ui/field-loading"; import { Spinner } from "lib/comps/ui/field-loading";
import { Tooltip } from "lib/comps/ui/tooltip"; import { Tooltip } from "lib/comps/ui/tooltip";
import get from "lodash.get"; import get from "lodash.get";
import { Check, Trash2, Upload } from "lucide-react"; import { Star, Trash2, Upload } from "lucide-react";
import { ChangeEvent, FC } from "react"; import { ChangeEvent, FC } from "react";
import { FMLocal, FieldLocal, FieldProp } from "../../typings"; import { FMLocal, FieldLocal, FieldProp } from "../../typings";
import { ThumbPreview } from "./FilePreview"; import { ThumbPreview } from "./FilePreview";
import { PropTypeInput } from "./TypeInput"; import { PropTypeInput } from "./TypeInput";
const w = window as unknown as {
serverurl: string;
};
export const FieldUploadMulti: FC<{ export const FieldUploadMulti: FC<{
field: FieldLocal; field: FieldLocal;
@ -19,8 +16,9 @@ export const FieldUploadMulti: FC<{
arg: FieldProp; arg: FieldProp;
on_change: (e: any) => void | Promise<void>; on_change: (e: any) => void | Promise<void>;
}> = ({ field, fm, prop, on_change, arg }) => { }> = ({ field, fm, prop, on_change, arg }) => {
let value: string = (fm.data[field.name] || "").trim(); let value: string = (fm.data[field.name] || "").trim();
// let type_upload =
const input = useLocal({ const input = useLocal({
value: 0 as any, value: 0 as any,
display: false as any, display: false as any,
@ -133,6 +131,13 @@ export const FieldUploadMulti: FC<{
<div <div
className={cx( className={cx(
"c-relative", "c-relative",
css`
&:hover {
.upload-star {
border: 1px solid gray;
}
}
`,
fm.data[cover.field] === value && fm.data[cover.field] === value &&
css` css`
.thumb-preview { .thumb-preview {
@ -195,7 +200,10 @@ export const FieldUploadMulti: FC<{
</div> </div>
{cover.field && ( {cover.field && (
<Tooltip content={`Mark as ${cover.text}`} placement="right"> <Tooltip
content={`Mark as ${cover.text}`}
placement="right"
>
<div <div
onClick={(e) => { onClick={(e) => {
e.preventDefault(); e.preventDefault();
@ -209,17 +217,22 @@ export const FieldUploadMulti: FC<{
fm.render(); fm.render();
}} }}
className={cx( className={cx(
"c-flex c-flex-row c-items-center c-px-1 c-rounded c-bg-white c-cursor-pointer hover:c-bg-blue-100 transition-all", "c-flex c-flex-row c-items-center c-px-1 c-rounded c-bg-white c-cursor-pointer hover:c-bg-blue-100 transition-all upload-star",
css` css`
border: 1px solid black; border: 1px solid transparent;
width: 25px; width: 25px;
height: 25px; height: 25px;
&:hover {
border: 1px solid #1c4ed8;
outline: 1px solid #1c4ed8;
}
` `
)} )}
> >
{value === fm.data[cover.field] && ( {value === fm.data[cover.field] && (
<> <>
<Check /> <Star fill="#1c4ed8" stroke="#1c4ed8" />
</> </>
)} )}
</div> </div>