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

IX input panel as adyacent panel instead over the PDF #6918

Merged
merged 3 commits into from
Jun 24, 2024
Merged

IX input panel as adyacent panel instead over the PDF #6918

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
abbe13f
IX input panel as adyacent panel instead over the PDF
konzz Jun 19, 2024
6f19fc2
removed unnecesary import
konzz Jun 24, 2024
db13dfd
Merge branch 'development' into 6864-ix-input-panel-update
konzz Jun 24, 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
1 change: 0 additions & 1 deletion app/react/V2/Components/Forms/MultiselectList.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,6 @@ const MultiselectList = ({
singleSelect = false,
allowSelelectAll = false,
}: MultiselectListProps) => {
console.log(value);
const [selectedItems, setSelectedItems] = useState<string[]>(value || []);
const [showAll, setShowAll] = useState<boolean>(true);
const [searchTerm, setSearchTerm] = useState('');
Expand Down
25 changes: 5 additions & 20 deletions app/react/V2/Routes/Settings/IX/components/PDFSidepanel.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
/* eslint-disable max-lines */
/* eslint-disable react/jsx-props-no-spreading */
/* eslint-disable max-statements */
import React, { useEffect, useRef, useState } from 'react';
import React, { useEffect, useState } from 'react';
import { useForm } from 'react-hook-form';
import { useSetAtom, useAtomValue } from 'jotai';
import { ChevronDownIcon, ChevronUpIcon } from '@heroicons/react/24/outline';
Expand Down Expand Up @@ -135,9 +135,7 @@ const PDFSidepanel = ({
onEntitySave,
property,
}: PDFSidepanelProps) => {
const pdfContainerRef = useRef<HTMLDivElement>(null);
const [pdf, setPdf] = useState<FileType>();
const [pdfContainerHeight, setPdfContainerHeight] = useState(0);
const [selectedText, setSelectedText] = useState<TextSelection>();
const [selectionError, setSelectionError] = useState<string>();
const [highlights, setHighlights] = useState<Highlights>();
Expand Down Expand Up @@ -210,11 +208,6 @@ const PDFSidepanel = ({
);
}

if (pdfContainerRef.current) {
const { height } = pdfContainerRef.current.getBoundingClientRect();
setPdfContainerHeight(height);
}

return () => {
setSelectedText(undefined);
setSelectionError(undefined);
Expand All @@ -224,13 +217,6 @@ const PDFSidepanel = ({
};
}, [pdf, setValue, showSidepanel, suggestion]);

useEffect(() => {
if (pdfContainerRef.current) {
const { height } = pdfContainerRef.current.getBoundingClientRect();
setPdfContainerHeight(height);
}
}, [labelInputIsOpen, pdfContainerRef.current]);

const onSubmit = async (value: {
field: PropertyValueSchema | PropertyValueSchema[] | undefined;
}) => {
Expand Down Expand Up @@ -311,7 +297,7 @@ const PDFSidepanel = ({
}
const inputType = type === 'numeric' ? 'number' : type;
return (
<div className={`relative flex gap-2 px-4 pb-4 grow ${labelInputIsOpen ? '' : 'hidden'}`}>
<div className={`relative flex gap-2 px-4 pb-4 grow ${labelInputIsOpen ? '' : 'hidden'}`}>
<div className="grow">
<InputField
clearFieldAction={() => {
Expand Down Expand Up @@ -416,13 +402,13 @@ const PDFSidepanel = ({
title={entity?.title}
closeSidepanelFunction={() => setShowSidepanel(false)}
>
<div className="flex-grow">
<div className="flex-grow overflow-y-scroll">
<form
id="ixpdfform"
className="flex flex-col h-full gap-4 p-0"
onSubmit={handleSubmit(onSubmit)}
>
<div ref={pdfContainerRef} className="w-full md:m-auto grow">
<div className="w-full md:m-auto grow">
{pdf && (
<PDF
fileUrl={`/api/files/${pdf.filename}`}
Expand All @@ -437,7 +423,6 @@ const PDFSidepanel = ({
}
}}
size={{
height: `${pdfContainerHeight - 90}px`,
width: '100%',
}}
scrollToPage={!selectedText ? Object.keys(highlights || {})[0] : undefined}
Expand All @@ -447,7 +432,7 @@ const PDFSidepanel = ({
</form>{' '}
</div>
<Sidepanel.Footer
className={`absolute max-h-[40%] ${labelInputIsOpen && ['select', 'multiselect', 'relationship'].includes(property?.type || '') ? 'h-[40%]' : ''}`}
className={`max-h-[40%] ${labelInputIsOpen && ['select', 'multiselect', 'relationship'].includes(property?.type || '') ? 'h-[40%]' : ''}`}
>
<div className="relative flex flex-col h-full py-0 border border-b-0 border-l-0 border-r-0 border-gray-200 border-t-1">
<div className="sticky top-0 flex px-4 py-2 bg-white">
Expand Down
Loading