Skip to content

Commit

Permalink
Merge pull request #66 from SH5H/main
Browse files Browse the repository at this point in the history 
Update dashboard component
  • Loading branch information
@vmatsiiako
vmatsiiako authored Dec 4, 2022
2 parents 20d8d25 + a5d509c commit 86b12b1
Show file tree
Hide file tree
Showing 3 changed files with 158 additions and 110 deletions.
48 changes: 30 additions & 18 deletions frontend/components/basic/buttons/Button.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,25 +1,28 @@
import React from "react";
import Image from "next/image";
import { IconProp } from "@fortawesome/fontawesome-svg-core";
import { FontAwesomeIcon, FontAwesomeIconProps } from "@fortawesome/react-fontawesome";
import {
FontAwesomeIcon,
FontAwesomeIconProps,
} from "@fortawesome/react-fontawesome";

var classNames = require("classnames");

type ButtonProps = {
text: string;
onButtonPressed: () => void;
loading: boolean;
loading?: boolean;
color: string;
size: string;
icon: IconProp;
active: boolean;
iconDisabled: string;
textDisabled: string;
}
icon?: IconProp;
active?: boolean;
iconDisabled?: string;
textDisabled?: string;
};

/**
* This is the main butto component in the app.
* @param {object} props
* @param {object} props
* @param {string} props.text - text inside the button
* @param {function} props.onButtonPressed - the action that happens when the button is clicked
* @param {boolean} props.loading - if a button is currently in the laoding state
Expand All @@ -29,21 +32,28 @@ type ButtonProps = {
* @param {boolean} props.active - if the button is active or disabled
* @param {FontAwesomeIconProps} props.text - the icon inside the button when it is disabled
* @param {string} props.textDisable - text inside the button when it is disabled
* @returns
* @returns
*/
export default function Button (props: ButtonProps): JSX.Element {
export default function Button(props: ButtonProps): JSX.Element {
// Check if the button show always be 'active' - then true;
// or if it should switch between 'active' and 'disabled' - then give the status
const activityStatus = props.active || (props.text != "" && props.textDisabled == undefined)

const activityStatus =
props.active || (props.text != "" && props.textDisabled == undefined);

let styleButton = classNames(
"group m-auto md:m-0 inline-block rounded-md duration-200",

// Setting background colors and hover modes
props.color == "mineshaft" && activityStatus && "bg-mineshaft-700 hover:bg-primary",
props.color == "mineshaft" &&
activityStatus &&
"bg-mineshaft-700 hover:bg-primary",
props.color == "mineshaft" && !activityStatus && "bg-mineshaft",
(props.color == "primary" || !props.color) && activityStatus && "bg-primary hover:opacity-80",
(props.color == "primary" || !props.color) && !activityStatus && "bg-primary",
(props.color == "primary" || !props.color) &&
activityStatus &&
"bg-primary hover:opacity-80",
(props.color == "primary" || !props.color) &&
!activityStatus &&
"bg-primary",
props.color == "red" && "bg-red",

// Changing the opacity when active vs when not
Expand Down Expand Up @@ -73,7 +83,7 @@ export default function Button (props: ButtonProps): JSX.Element {
"relative duration-200",

// Show the loading sign if the loading indicator is on
props.loading == true ? "opacity-0" : "opacity-100",
Boolean(props.loading) ? "opacity-0" : "opacity-100",
props.size == "md" && "text-sm",
props.size == "lg" && "text-lg"
);
Expand All @@ -100,7 +110,7 @@ export default function Button (props: ButtonProps): JSX.Element {
</div>
{props.icon && (
<FontAwesomeIcon
icon={props.icon as IconProp}
icon={props.icon}
className={`flex my-auto font-extrabold ${
props.size == "icon-sm" ? "text-sm" : "text-md"
} ${(props.text || props.textDisabled) && "mr-2"}`}
Expand All @@ -115,7 +125,9 @@ export default function Button (props: ButtonProps): JSX.Element {
/>
)}
{(props.text || props.textDisabled) && (
<p className={textStyle}>{activityStatus ? props.text : props.textDisabled}</p>
<p className={textStyle}>
{activityStatus ? props.text : props.textDisabled}
</p>
)}
</div>
</button>
Expand Down
128 changes: 73 additions & 55 deletions ...mponents/dashboard/DashboardInputField.js → ...ponents/dashboard/DashboardInputField.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,20 @@
import React, { useRef } from "react";
import React, { SyntheticEvent, useRef } from "react";
import { faCircle } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";

import guidGenerator from "../utilities/randomId";

const REGEX = /([$]{.*?})/g;

interface DashboardInputFieldProps {
index: number;
onChangeHandler: (value: string, index: number) => void;
value: string;
type: "varName" | "value";
blurred: boolean;
duplicates: string[];
}

/**
* This component renders the input fields on the dashboard
* @param {object} obj - the order number of a keyPair
Expand All @@ -14,51 +23,60 @@ const REGEX = /([$]{.*?})/g;
* @param {string} obj.type - whether the input field is for a Key Name or for a Key Value
* @param {string} obj.value - value of the InputField
* @param {boolean} obj.blurred - whether the input field should be blurred (behind the gray dots) or not; this can be turned on/off in the dashboard
* @param {string[]} obj.duplicates - list of all the suplicated key names on the dashboard
* @param {string[]} obj.duplicates - list of all the duplicated key names on the dashboard
* @returns
*/

const DashboardInputField = ({
index,
onChangeHandler,
type,
value,
blurred,
duplicates
}) => {
const ref = useRef(null);
const syncScroll = (e) => {
ref.current.scrollTop = e.target.scrollTop;
ref.current.scrollLeft = e.target.scrollLeft;
duplicates,
}: DashboardInputFieldProps) => {
const ref = useRef<HTMLDivElement | null>(null);
const syncScroll = (e: SyntheticEvent<HTMLDivElement>) => {
if (ref.current == null) return;

ref.current.scrollTop = e.currentTarget.scrollTop;
ref.current.scrollLeft = e.currentTarget.scrollLeft;
};

if (type === "varName") {
const startsWithNumber = !isNaN(value.charAt(0)) && value != "";
const startsWithNumber = !isNaN(Number(value.charAt(0))) && value != "";
const hasDuplicates = duplicates?.includes(value);
const error = startsWithNumber || hasDuplicates;

return (
<div className="flex-col w-full">
<div
className={`group relative flex flex-col justify-center w-full max-w-2xl border ${error ? "border-red" : "border-mineshaft-500"} rounded-md`}
className={`group relative flex flex-col justify-center w-full max-w-2xl border ${
error ? "border-red" : "border-mineshaft-500"
} rounded-md`}
>
<input
onChange={(e) => onChangeHandler(e.target.value.toUpperCase(), index)}
onChange={(e) =>
onChangeHandler(e.target.value.toUpperCase(), index)
}
type={type}
value={value}
className={`asolute z-10 peer font-mono ph-no-capture bg-bunker-800 rounded-md caret-white text-gray-400 text-md px-2 py-1.5 w-full min-w-16 outline-none focus:ring-2 ${error ? "focus:ring-red/50" : "focus:ring-primary/50"} duration-200`}
className={`absolute z-10 peer font-mono ph-no-capture bg-bunker-800 rounded-md caret-white text-gray-400 text-md px-2 py-1.5 w-full min-w-16 outline-none focus:ring-2 ${
error ? "focus:ring-red/50" : "focus:ring-primary/50"
} duration-200`}
spellCheck="false"
/>
</div>
{startsWithNumber &&
{startsWithNumber && (
<p className="text-red text-xs mt-0.5 mx-1 mb-2 max-w-xs">
Should not start with a number
</p>
}
{hasDuplicates && !startsWithNumber &&
)}
{hasDuplicates && !startsWithNumber && (
<p className="text-red text-xs mt-0.5 mx-1 mb-2 max-w-xs">
Secret names should be unique
</p>
}
)}
</div>
);
} else if (type === "value") {
Expand All @@ -78,61 +96,61 @@ const DashboardInputField = ({
} z-10 peer font-mono ph-no-capture bg-transparent rounded-md caret-white text-transparent text-md px-2 py-1.5 w-full min-w-16 outline-none focus:ring-2 focus:ring-primary/50 duration-200 no-scrollbar no-scrollbar::-webkit-scrollbar`}
spellCheck="false"
/>
<div
ref={ref}
<div
ref={ref}
className={`${
blurred
? "text-bunker-800 group-hover:text-gray-400 peer-focus:text-gray-400 peer-active:text-gray-400"
: ""
} absolute flex flex-row whitespace-pre font-mono z-0 ph-no-capture max-w-2xl overflow-x-scroll bg-bunker-800 h-9 rounded-md text-gray-400 text-md px-2 py-1.5 w-full min-w-16 outline-none focus:ring-2 focus:ring-primary/50 duration-100 no-scrollbar no-scrollbar::-webkit-scrollbar`}
>
{
value
.split(REGEX)
.map((word, id) => {
if (word.match(REGEX) !== null) {
return (
<span className="ph-no-capture text-yellow" key={id}>
{word.slice(0, 2)}
<span className="ph-no-capture text-yellow-200/80">
{word.slice(2, word.length - 1)}
</span>
{word.slice(word.length - 1, word.length) == "}" ? (
<span className="ph-no-capture text-yellow">
{word.slice(word.length - 1, word.length)}
</span>
) : (
<span className="ph-no-capture text-yellow-400">
{word.slice(word.length - 1, word.length)}
</span>
)}
{value.split(REGEX).map((word, id) => {
if (word.match(REGEX) !== null) {
return (
<span className="ph-no-capture text-yellow" key={id}>
{word.slice(0, 2)}
<span className="ph-no-capture text-yellow-200/80">
{word.slice(2, word.length - 1)}
</span>
);
} else {
return <span key={id} className="ph-no-capture">{word}</span>;
}
})
}
{word.slice(word.length - 1, word.length) == "}" ? (
<span className="ph-no-capture text-yellow">
{word.slice(word.length - 1, word.length)}
</span>
) : (
<span className="ph-no-capture text-yellow-400">
{word.slice(word.length - 1, word.length)}
</span>
)}
</span>
);
} else {
return (
<span key={id} className="ph-no-capture">
{word}
</span>
);
}
})}
</div>
{blurred && (
<div className="absolute flex flex-row items-center z-20 peer pr-2 bg-bunker-800 group-hover:hidden peer-hover:hidden peer-focus:hidden peer-active:invisible h-9 w-full max-w-2xl rounded-md text-gray-400/50 text-clip">
<div className="px-2 flex flex-row items-center overflow-x-scroll no-scrollbar no-scrollbar::-webkit-scrollbar">
{value
.split("")
.map(() => (
<FontAwesomeIcon
key={guidGenerator()}
className="text-xxs mx-0.5"
icon={faCircle}
/>
))}
{value.split("").map(() => (
<FontAwesomeIcon
key={guidGenerator()}
className="text-xxs mx-0.5"
icon={faCircle}
/>
))}
</div>
</div>
)}
)}
</div>
</div>
);
}

return <>Something Wrong</>;
};

export default React.memo(DashboardInputField);
Loading

0 comments on commit 86b12b1

Please sign in to comment.