Skip to content

Commit

Permalink
Merge pull request CloudOrc#197 from xjm11/dev
Browse files Browse the repository at this point in the history 
 Pre-set Background Image
  • Loading branch information
@dlimeng
dlimeng authored Oct 9, 2023
2 parents 8884cb3 + 50159de commit e152301
Show file tree
Hide file tree
Showing 2 changed files with 174 additions and 40 deletions.
17 changes: 15 additions & 2 deletions solidui-web/src/apis/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -83,6 +83,16 @@ const project = {
ApiService.put<T>(`/solidui/projects/${id}?projectName=${name}`),

load: <T>(id: string) => ApiService.get<T>(`/solidui/projects/${id}`),
changeBgImage: <T>(id: string, backgroundImage: string) =>
ApiService.put<T>(
`/solidui/projects/${id}`,
{ backgroundImage },
{
headers: {
"Content-Type": "application/x-www-form-urlencoded",
},
},
),
};

const datasource = {
Expand Down Expand Up @@ -132,7 +142,10 @@ const datasource = {
`/solidui/metadataQuery/queryDatabases?dataSourceName=${params.dataSourceName}&typeName=${params.typeName}`,
),
tables: <T>(
params: { dataSourceName: string | undefined; database: string | undefined } = {
params: {
dataSourceName: string | undefined;
database: string | undefined;
} = {
dataSourceName: "",
database: "",
},
Expand All @@ -144,7 +157,7 @@ const datasource = {
params: { dataSourceName: string; database: string; tableName: string } = {
dataSourceName: "",
database: "",
tableName: ""
tableName: "",
},
) =>
ApiService.get<T>(
Expand Down
197 changes: 159 additions & 38 deletions solidui-web/src/pages/Project/_components/ProjectCard.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ import {
message,
} from "antd";
import { UserOutlined } from "@ant-design/icons";
import { Delete, Editor, Close } from "@icon-park/react";
import { Delete, Editor, Close, Pic } from "@icon-park/react";
import classNames from "classnames";
import Apis from "@/apis";
import { ProjectDataType } from "@/types";
Expand All @@ -50,11 +50,12 @@ export interface ProjectCardProps {
}

export default function ProjectCard(props: ProjectCardProps) {
const inputRef = useRef<HTMLInputElement>()
const inputRef = useRef<HTMLInputElement>();

const navigate = useNavigate();
const [form] = Form.useForm();
const [editOpen, setEditOpen] = useState<boolean>(false);
const [picOpen, setPicOpen] = useState<boolean>(false);

const {
className,
Expand Down Expand Up @@ -98,40 +99,37 @@ export default function ProjectCard(props: ProjectCardProps) {

const clazzName = classNames("solidui-card__project", className);

const [showText, setShowText] = useState(true)
const [text, setText] = useState(item.projectName)
const [inputValue, setInputValue] = useState('')
const [showText, setShowText] = useState(true);
const [text, setText] = useState(item.projectName);

const [inputValue, setInputValue] = useState("");
const onDoubleClick = () => {
setShowText(false)
setInputValue(text)
setShowText(false);
setInputValue(text);
// console.log('inputRef', inputRef)
setTimeout(() => {
inputRef.current?.focus()
inputRef.current?.focus();
}, 100);
}
};
const onConfirm = () => {
// console.log('确定')
setShowText(true)
setText(inputValue)
setShowText(true);
setText(inputValue);
// console.log(text != inputValue)
if(text != inputValue){
if (text != inputValue) {
onFinish(inputValue);
}
}
};
const onCancel = () => setShowText(true);

const onFinish = async (values) => {
const res = await Apis.project.update(
`${item.id}`,
values,
);
const res = await Apis.project.update(`${item.id}`, values);
if (res.ok) {
message.success("rename ok");
setEditOpen(false);
onUpdate();
}
}
};
const [isHovered, setIsHovered] = useState(false);

const textHoverStyle = {
Expand All @@ -149,9 +147,9 @@ export default function ProjectCard(props: ProjectCardProps) {
width: "100%",
height: "2px",
backgroundColor: "blue",
content: '""'
};
content: '""',
};

return (
<div
className={clazzName}
Expand All @@ -165,7 +163,9 @@ export default function ProjectCard(props: ProjectCardProps) {
>
<div className="card-content">
{/* <div className="content-title">{item.projectName}</div> */}
<div className="content-title" />
<div className="content-title">
{item.image && <img src={item.image} alt="" />}
</div>
{popup ? (
<div className="content-mask">
<div className="mask-icons">
Expand Down Expand Up @@ -211,6 +211,19 @@ export default function ProjectCard(props: ProjectCardProps) {
strokeLinecap="square"
onClick={__handleDelete}
/>
<Pic
className="solidui-icon-btn"
theme="outline"
size="18"
fill="#f1f1f1"
strokeWidth={2}
strokeLinejoin="miter"
strokeLinecap="square"
onClick={() => {
setPicOpen(true);
// form.setFieldValue("name", item.projectName);
}}
/>
{/* <Editor
className="solidui-icon-btn"
theme="outline"
Expand Down Expand Up @@ -280,21 +293,49 @@ export default function ProjectCard(props: ProjectCardProps) {
<Avatar size={44} icon={<UserOutlined rev={1} />} />
</Col>
<Col flex="auto">
<div style={textHoverStyle}
onMouseEnter={() => setIsHovered(true)}
onMouseLeave={() => setIsHovered(false)} >
{
showText ? <p onDoubleClick={onDoubleClick} style={{width:200}}>{item.projectName}</p > : ''
}
{
isHovered ? <span style={underlineStyle} /> : ''
}


<div style={{display: !showText ? 'block' : 'none' ,paddingTop:10}}>
<input ref={(ref) => { inputRef.current = ref }} type="text" value={inputValue} onChange={(e) => setInputValue(e.target.value)} onBlur={onConfirm} style={{width:'100%', color: '#ffffff', outline: 'none' ,borderTop: 'none',borderLeft: 'none',borderRight: 'none',borderBottomColor:'blue',backgroundColor:'#6c6c6c'}} onKeyDown={(e) => { if (e.keyCode === 13) onConfirm() }}/>

</div>
<div
style={textHoverStyle}
onMouseEnter={() => setIsHovered(true)}
onMouseLeave={() => setIsHovered(false)}
>
{showText ? (
<p onDoubleClick={onDoubleClick} style={{ width: 200 }}>
{item.projectName}
</p>
) : (
""
)}
{isHovered ? <span style={underlineStyle} /> : ""}

<div
style={{
display: !showText ? "block" : "none",
paddingTop: 10,
}}
>
<input
ref={(ref) => {
inputRef.current = ref;
}}
type="text"
value={inputValue}
onChange={(e) => setInputValue(e.target.value)}
onBlur={onConfirm}
style={{
width: "100%",
color: "#ffffff",
outline: "none",
borderTop: "none",
borderLeft: "none",
borderRight: "none",
borderBottomColor: "blue",
backgroundColor: "#6c6c6c",
}}
onKeyDown={(e) => {
if (e.keyCode === 13) onConfirm();
}}
/>
</div>
</div>
<div>{item.userName}</div>
<div>{item.updateTime}</div>
Expand Down Expand Up @@ -382,6 +423,86 @@ export default function ProjectCard(props: ProjectCardProps) {
</div>
</div>
</Modal>
<Modal
title={null}
footer={null}
width={400}
closable={false}
bodyStyle={{ padding: 0 }}
open={picOpen}
modalRender={(modal: any) => modal}
>
<div className="solidui-modal">
<div className="solidui-modal__header">
Change background image
<span className="solidui-modal__close-btn">
<Close
theme="outline"
size="16"
fill="rgba(0, 0, 0, 0.65)"
strokeWidth={2}
strokeLinejoin="miter"
strokeLinecap="square"
onClick={() => {
setPicOpen(false);
}}
/>
</span>
</div>
<div
className="solidui-modal__content"
style={{
height: 100,
}}
>
<div className="modal-content__form">
<Form
layout="vertical"
form={form}
initialValues={{ layout: "vertical" }}
onFinish={async (values) => {
const res = await Apis.project.changeBgImage(
`${item.id}`,
values.backgroundImage,
);
if (res.ok) {
message.success("rename ok");
setPicOpen(false);
onUpdate();
}
}}
>
<Form.Item
label="background image link"
name="backgroundImage"
required
rules={[
{
required: true,
message: "Please input background image link",
},
]}
>
<Input placeholder="input background image link" autoFocus />
</Form.Item>
</Form>
</div>
</div>
<div className="solidui-modal__footer">
<Button
type="default"
size="small"
style={{ marginRight: 10 }}
onClick={() => setPicOpen(false)}
>
Cancel
</Button>
<Button type="primary" size="small" onClick={() => form.submit()}>
Save
</Button>
</div>
</div>
</Modal>
</div>
);
}

0 comments on commit e152301

Please sign in to comment.