Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

alerts only on offers and focus on agreement element onclick #547

Merged
merged 5 commits into from
Dec 9, 2024
Merged

alerts only on offers and focus on agreement element onclick #547

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
fe212e1
alerts only on offers and focus on agreement element onclick
MariaBonde Dec 9, 2024
0a283ce
changed function style to eslint
MariaBonde Dec 9, 2024
faf1c78
better readability
MariaBonde Dec 9, 2024
05dcc8a
better readability
MariaBonde Dec 9, 2024
1578b7e
changed to useEffect
MariaBonde Dec 9, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
24 changes: 13 additions & 11 deletions frontend/src/components/Agreement/components/AgreementFileTable.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,52 +22,54 @@ export function AgreementFileTable({
<thead className="text-xs text-gray-700 bg-primary_darker/20 font-semibold rounded w-full ">
<tr>
{inEditIndex === i && <th className="px-2 text-transparent">f</th>}
<th className="pl-2 py-1 text-left font-semibold">Filnavn</th>
<th className="pl-2 py-1 text-left font-semibold">Opplastet</th>
<th className="pl-2 py-1 text-left font-semibold">Opplastet av</th>
<th className="pl-2 py-1 text-left large font-semibold">Filnavn</th>
<th className="pl-2 py-1 text-left large font-semibold">Opplastet</th>
<th className="pl-2 py-1 text-left large font-semibold">
Opplastet av
</th>
</tr>
</thead>
<tbody>
{agreement.files?.map((file, ind) => (
<Fragment key={file.blobName + ind}>
<tr
className={`border-b${
className={`py-2 border-b ${
inEditIndex === i
? ""
: " hover:bg-primary_darker/10 cursor-pointer"
: " hover:bg-primary_darker/10 cursor-pointer "
}`}
onClick={(e) => {
e.preventDefault();
download(file.blobName, file.fileName);
}}
>
{inEditIndex === i && (
<td className="flex justify-start px-2 pt-2 relative">
<td className=" p-2">
<button
type="button"
onClick={(e) => onDelete(e, file)}
className="absolute cursor-pointer h-5 pr-2 top-1.5 flex justify-center items-center"
className="cursor-pointer flex justify-center items-center p-1 py-2 rounded-lg hover:bg-primary hover:bg-opacity-10"
>
<InfoPill
variant="wide"
text=""
colors={"text-primary hover:text-primary_darker"}
colors={"text-primary "}
icon={<Trash2 size="16" />}
/>
</button>
</td>
)}
<td
className={`py-1 pl-2 border-b items-center ${
className={`py-1 pl-2 border-b large items-center ${
inEditIndex === i ? "hover:bg-primary_darker/10" : ""
}`}
>
{file.fileName}
</td>
<td className="py-1 px-2 border-b items-center">
<td className="py-1 px-2 border-b large items-center">
{format(file.uploadedOn, "dd.MM.yyyy")}
</td>
<td className="py-1 px-2 border-b items-center">
<td className="py-1 px-2 border-b large items-center">
{file.uploadedBy}
</td>
</tr>
Expand Down
26 changes: 25 additions & 1 deletion frontend/src/components/Agreement/components/EditDateInput.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,7 @@
import { format } from "date-fns";
import { on } from "events";
import { set } from "lodash";
import { useEffect, useLayoutEffect, useRef, useState } from "react";

export function EditDateInput({
value,
Expand All @@ -15,6 +18,26 @@ export function EditDateInput({
required?: boolean;
onClick?: (e?: any) => any;
}) {
const inputRef = useRef<HTMLInputElement | null>(null);
const [clicked, setClicked] = useState(false);

useEffect(() => {
if (!inEdit) {
setClicked(false);
}
}, [inEdit]);

function onInputClick(e: any) {
setClicked(true);
if (onClick) onClick(e);
}

useLayoutEffect(() => {
if (inEdit && inputRef.current && clicked) {
inputRef.current.focus();
}
}, [inEdit, clicked]);

return (
<div className="mb-4 pr-4">
{inEdit ? (
Expand All @@ -27,6 +50,7 @@ export function EditDateInput({
</label>
<input
id={name + label}
ref={inputRef}
name={name}
aria-label={label}
required={required}
Expand All @@ -44,7 +68,7 @@ export function EditDateInput({
{label}
</label>
<p
onClick={onClick}
onClick={(e) => onInputClick(e)}
className="mt-1 bg-primary/5 shadow-sm border border-primary/5 pr-10 p-2 rounded-md hover:bg-primary_darker/10"
>
{value?.toLocaleDateString("nb-NO")}
Expand Down
26 changes: 24 additions & 2 deletions frontend/src/components/Agreement/components/EditTextarea.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
import { useEffect, useLayoutEffect, useRef, useState } from "react";

export function EditTextarea({
value,
name,
Expand All @@ -11,6 +13,25 @@ export function EditTextarea({
inEdit: boolean;
onClick?: (e?: any) => any;
}) {
const inputRef = useRef<HTMLTextAreaElement | null>(null);
const [clicked, setClicked] = useState(false);

useEffect(() => {
if (!inEdit) {
setClicked(false);
}
}, [inEdit]);

function onInputClick(e: any) {
setClicked(true);
if (onClick) onClick(e);
}

useLayoutEffect(() => {
if (inEdit && inputRef.current && clicked) {
inputRef.current.focus();
}
}, [inEdit, clicked]);
return (
<div className="mb-7 pr-4">
{inEdit ? (
Expand All @@ -23,6 +44,7 @@ export function EditTextarea({
</label>
<textarea
id={name + label}
ref={inputRef}
rows={5}
cols={50}
name={name}
Expand All @@ -44,7 +66,7 @@ export function EditTextarea({
<div>
{value.split(/\r?\n/).map((line, index) => (
<p
onClick={onClick}
onClick={(e) => onInputClick(e)}
className="mt-1 px-2 hover:cursor-pointer"
key={index}
>
Expand All @@ -54,7 +76,7 @@ export function EditTextarea({
</div>
) : (
<p
onClick={onClick}
onClick={(e) => onInputClick(e)}
className="mt-1 px-2 italic text-text_light_black/50"
>
{"Legg til tekst her"}
Expand Down
5 changes: 4 additions & 1 deletion frontend/src/components/Staffing/ConsultantRow.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -157,7 +157,10 @@ export default function ConsultantRows({

function getAlert() {
const dates = consultant.detailedBooking
.filter((e) => e.bookingDetails.projectId > 0)
.filter(
(e) =>
e.bookingDetails.projectId > 0 && e.bookingDetails.type == "Offer",
)
.map((e) => e.bookingDetails.endDateAgreement);

if (dates.some((e) => e === null)) {
Expand Down
8 changes: 6 additions & 2 deletions frontend/src/components/Staffing/DetailedBookingRows.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -71,6 +71,7 @@ export function DetailedBookingRows(props: {
{ color: "green", text: "Avtale aktiv", icon: CheckCircle },
{ color: "red", text: "Ingen avtaler funnet", icon: AlertCircle },
{ color: "orange", text: "Avtale utgått", icon: AlertCircle },
{ color: "transparent", text: "", icon: AlertCircle },
];
const { setConsultants } = useContext(FilteredContext);

Expand Down Expand Up @@ -112,19 +113,22 @@ export function DetailedBookingRows(props: {
}, []);

async function getColorIcon() {
const bookingType = detailedBooking.bookingDetails.type;
const endDateString = detailedBooking.bookingDetails.endDateAgreement;
if (endDateString && endDateString !== null) {
const endDate = new Date(endDateString).getTime();

const today = new Date().getTime();
if (today > endDate) {
if (today > endDate && bookingType == "Offer") {
return setAlertColor(colors.find((c) => c.color == "orange"));
} else {
return setAlertColor(colors.find((c) => c.color == "green"));
}
} else {
if (endDateString === null) {
if (endDateString === null && bookingType == "Offer") {
return setAlertColor(colors.find((c) => c.color == "red"));
} else {
return setAlertColor(colors.find((c) => c.color == "transparent"));
}
}
}
Expand Down
Loading