mirror/myspeed
1
0
Fork 0
mirror of https://github.com/gnmyt/myspeed.git synced 2026-01-07 05:29:39 -06:00
Code Issues Packages Projects Releases Wiki Activity

Moved the entire integration item header -> IntegrationItem.jsx

Browse Source
This commit is contained in:
Mathias Wagner
2023-05-23 19:56:07 +02:00
parent be5894fec9
commit 8b59aefbc5
1 changed files with 7 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
client/src/common/components/IntegrationDialog/components/IntegrationItem/IntegrationItem.jsx
View File

@@ -1,10 +1,8 @@
import "./styles.sass";
import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
import i18n, {t} from "i18next";
import {faCheck, faChevronDown, faChevronUp, faFloppyDisk, faTrash, faTrashArrowUp} from "@fortawesome/free-solid-svg-icons";
import {useState} from "react";
import {deleteRequest, patchRequest, putRequest} from "@/common/utils/RequestUtil";
import {generateRelativeTime} from "@/pages/Home/components/LatestTest/utils";
import IntegrationItemHeader from "./components/IntegrationItemHeader";
import "./styles.sass";
export const IntegrationItem = ({integration, data, remove, isOpen}) => {
const [open, setOpen] = useState(isOpen);
@@ -77,39 +75,16 @@ export const IntegrationItem = ({integration, data, remove, isOpen}) => {
return (
<div className={"integration-item"+(changesConfirmed ? " green-border" : "")}>
<div className="integration-item-header">
<div className="integration-item-left">
<FontAwesomeIcon icon={integration.icon} className="integration-item-icon"/>
<div className="integration-title-container">
<h3>{displayName}</h3>
<div className="integration-item-activity">
<div className={"integration-item-activity-circle circle-"+(data.activityFailed ? "error"
: (data.lastActivity === null || !data.lastActivity ? "inactive" : "active"))} />
<p>{data.activityFailed ? t("failed") : (data.lastActivity === null || !data.lastActivity
? "Nie ausgeführt" : "Zuletzt vor " + generateRelativeTime(data.lastActivity))}</p>
</div>
</div>
<IntegrationItemHeader open={open} setOpen={setOpen} displayName={displayName}
changesConfirmed={changesConfirmed} deleteConfirmed={deleteConfirmed}
deleteIntegration={deleteIntegration} saveIntegration={saveIntegration}
unsavedChanges={unsavedChanges} integration={integration} data={data}/>
</div>
<div className="integration-item-right">
{unsavedChanges && !changesConfirmed && <FontAwesomeIcon icon={faFloppyDisk} onClick={saveIntegration}
className="integration-green" />}
{changesConfirmed && <FontAwesomeIcon icon={faCheck} className="icon-green" />}
{!deleteConfirmed && <FontAwesomeIcon icon={faTrash} className="integration-red" onClick={deleteIntegration} />}
{deleteConfirmed && <FontAwesomeIcon icon={faTrashArrowUp} className="integration-red" onClick={deleteIntegration} />}
<FontAwesomeIcon icon={open ? faChevronUp : faChevronDown} onClick={() => setOpen(!open)}
className="integration-green" />
</div>
</div>
{open && <div className="integration-body">
<div className="integration-field">
<p className="integration-field-title">{t(`integrations.display_name`)}</p>
<input className="integration-field-input" type="text" value={displayName}
onChange={updateDisplayName}
placeholder={t(`integrations.display_name`)}/>
onChange={updateDisplayName} placeholder={t(`integrations.display_name`)}/>
</div>
{integration.fields.map((field, index) => <div className="integration-field" key={index}>