Merge branch 'main' of https://git.smc.it/openk9/openk9 into 616-fix-…

…search-frontend
smclab · Oct 5, 2023 · d3f956b · d3f956b
2 parents d5e0724 + 766c123
commit d3f956b
Show file tree

Hide file tree

Showing 12 changed files with 810 additions and 210 deletions.
diff --git a/js-packages/admin-ui/src/App.tsx b/js-packages/admin-ui/src/App.tsx
@@ -89,6 +89,7 @@ import { TabTokenTabsAssociation } from "./components/TabTokenTabs";
 import { Languages } from "./components/Languages";
 import { BucketLanguage } from "./components/BucketLanguage";
 import { Language } from "./components/Language";
+import { DocTypeFieldsSearch } from "./components/DocTypeFieldsSearch";
 
 export default function App() {
   const [isSideMenuOpen, setIsSideMenuOpen] = React.useState(true);
@@ -276,6 +277,14 @@ export default function App() {
                         <Route path="document-type-fields" element={<DocumentTypeFields />} />
                       </Route>
                     </Route>
+                    <Route
+                      path="document-types/:documentTypeId/document-type-fields/search-document-type-field/search/"
+                      element={<DocTypeFieldsSearch />}
+                    />
+                    <Route
+                      path="document-types/:documentTypeId/document-type-fields/search-document-type-field/search/:searchText"
+                      element={<DocTypeFieldsSearch />}
+                    />
                     <Route path="search-configs">
                       <Route path="" element={<SearchConfigs />} />
                       <Route path=":searchConfigId/query-parsers/:queryParserConfigId" element={<QueryParserConfig />} />

diff --git a/js-packages/admin-ui/src/components/DocTypeFieldsSearch.tsx b/js-packages/admin-ui/src/components/DocTypeFieldsSearch.tsx
@@ -0,0 +1,116 @@
+import ClayToolbar from "@clayui/toolbar";
+import { ContainerFluid, ContainerFluidWithoutView, EmptySpace } from "./Form";
+import { ClayButtonWithIcon } from "@clayui/button";
+import ClayTable from "@clayui/table";
+import React from "react";
+import { Link, useParams } from "react-router-dom";
+import useDebounced from "./useDebounced";
+import { useDocumentTypeFieldsQuery } from "../graphql-generated";
+import { TableVirtuoso } from "react-virtuoso";
+
+export function DocTypeFieldsSearch() {
+  const { documentTypeId = "0", searchText = "", parentId = "" } = useParams();
+  const [searchTextDoc, setSearchTextDoc] = React.useState(searchText);
+  const searchTextDebounced = useDebounced(searchTextDoc);
+  const documentTypeFieldsQuery = useDocumentTypeFieldsQuery({
+    variables: { documentTypeId: documentTypeId, searchText: searchTextDebounced, parentId: 0 },
+  });
+
+  React.useEffect(() => {
+    documentTypeFieldsQuery.refetch({ documentTypeId, searchText: searchTextDebounced });
+  }, [searchTextDebounced]);
+
+  return (
+    <div>
+      <ClayToolbar light>
+        <ContainerFluidWithoutView>
+          <ClayToolbar.Nav>
+            <ClayToolbar.Item expand>
+              <div style={{ position: "relative" }}>
+                <ClayToolbar.Input
+                  placeholder="Search..."
+                  sizing="sm"
+                  value={searchTextDoc}
+                  onChange={(event) => {
+                    setSearchTextDoc(event.currentTarget.value);
+                  }}
+                />
+                {searchText !== "" && (
+                  <ClayButtonWithIcon
+                    aria-label=""
+                    symbol="times"
+                    className="component-action"
+                    onClick={() => {
+                      setSearchTextDoc("");
+                    }}
+                    style={{ position: "absolute", right: "10px", top: "0px" }}
+                  />
+                )}
+              </div>
+            </ClayToolbar.Item>
+          </ClayToolbar.Nav>
+        </ContainerFluidWithoutView>
+      </ClayToolbar>
+      <ContainerFluid>
+        <TableVirtuoso
+          totalCount={documentTypeFieldsQuery.data?.docTypeFieldsFromDocTypeByParent?.edges?.length}
+          style={{ height: "80vh" }}
+          data={documentTypeFieldsQuery.data?.docTypeFieldsFromDocTypeByParent?.edges as any}
+          components={{
+            Table: (props) => (
+              <table
+                {...props}
+                style={{ ...props.style, tableLayout: "fixed" }}
+                className="table table-hover show-quick-actions-on-Hover table-list"
+              />
+            ),
+            EmptyPlaceholder: () => (
+              <tbody>
+                <tr>
+                  <td colSpan={2} style={{ backgroundColor: "white" }}>
+                    <EmptySpace description="There are no matching entities" title="No entities" extraClass="c-empty-state-animation" />
+                  </td>
+                </tr>
+              </tbody>
+            ),
+          }}
+          fixedHeaderContent={() => (
+            <ClayTable.Row>
+              <ClayTable.Cell headingCell headingTitle>
+                <span className="text-truncate">Name</span>
+              </ClayTable.Cell>
+              <ClayTable.Cell headingCell headingTitle>
+                <span className="text-truncate">Description</span>
+              </ClayTable.Cell>
+            </ClayTable.Row>
+          )}
+          itemContent={(index) => {
+            const row = documentTypeFieldsQuery.data?.docTypeFieldsFromDocTypeByParent?.edges?.[index]?.node ?? undefined;
+            return (
+              <React.Fragment>
+                <ClayTable.Cell>
+                  {row?.id && (
+                    <Link
+                      style={{
+                        color: "#da1414",
+                        textDecoration: "none",
+                        font: "Helvetica",
+                        fontWeight: "700",
+                        fontSize: "15px",
+                        lineHeight: "44px",
+                      }}
+                      to={"/document-types/" + documentTypeId + "/document-type-fields/" + row.id}
+                    >
+                      {row.name}
+                    </Link>
+                  )}
+                </ClayTable.Cell>
+                <ClayTable.Cell>{row?.description}</ClayTable.Cell>
+              </React.Fragment>
+            );
+          }}
+        />
+      </ContainerFluid>
+    </div>
+  );
+}
diff --git a/js-packages/admin-ui/src/components/DocumentTypeField.tsx b/js-packages/admin-ui/src/components/DocumentTypeField.tsx
@@ -105,6 +105,7 @@ export function DocumentTypeField() {
       }
     },
   });
+
   const form = useForm({
     initialValues: React.useMemo(
       () => ({
@@ -133,6 +134,7 @@ export function DocumentTypeField() {
     },
     getValidationMessages: fromFieldValidators(createOrUpdateDocumentTypeFieldMutation.data?.docTypeField?.fieldValidators),
   });
+
   return (
     <React.Fragment>
       <ClayToolbar light>