From b48ece743a56e1667c55f2a8ded371ea3ccdb0bc Mon Sep 17 00:00:00 2001 From: lorenzo venneri Date: Fri, 8 Sep 2023 17:06:14 +0200 Subject: [PATCH 01/22] Issue #569: start to create view --- .../src/components/DocumentTypeFields.tsx | 306 +++++++++--------- js-packages/admin-ui/src/graphql-generated.ts | 122 ++++++- 2 files changed, 266 insertions(+), 162 deletions(-) diff --git a/js-packages/admin-ui/src/components/DocumentTypeFields.tsx b/js-packages/admin-ui/src/components/DocumentTypeFields.tsx index e1c75abf5..270f6b361 100644 --- a/js-packages/admin-ui/src/components/DocumentTypeFields.tsx +++ b/js-packages/admin-ui/src/components/DocumentTypeFields.tsx @@ -4,14 +4,18 @@ import { FieldType, useCreateOrUpdateDocumentTypeFieldMutation, useDeleteDocumentTypeFieldMutation, + useDocTypeFieldsByParentQuery, useDocumentTypeFieldsQuery, } from "../graphql-generated"; import { formatName, TableWithSubFields } from "./Table"; import { useParams } from "react-router-dom"; import { DocumentTypeFieldsQuery } from "./SubFieldsDocumentType"; import { ClayToggle } from "@clayui/form"; -import { StyleToggle } from "./Form"; +import { ContainerFluid, StyleToggle } from "./Form"; import { ClayTooltipProvider } from "@clayui/tooltip"; +import ClayIcon from "@clayui/icon"; +import ClayList from "@clayui/list"; +import DropDown from "@clayui/drop-down"; gql` mutation DeleteDocumentTypeField($documentTypeId: ID!, $documentTypeFieldId: ID!) { @@ -21,12 +25,35 @@ gql` } `; +export const DocumentTypeFieldsParentQuery = gql` + query DocTypeFieldsByParent($searchText: String) { + docTypeFieldsByParent(parentId: 0, searchText: $searchText, first: 10) { + edges { + node { + id + name + fieldName + searchable + exclude + sortable + } + } + } + } +`; + export function DocumentTypeFields() { const { documentTypeId } = useParams(); const documentTypeFieldsQuery = useDocumentTypeFieldsQuery({ variables: { documentTypeId: documentTypeId! }, skip: !documentTypeId, }); + const documentTypeFieldsParentsQuery = useDocTypeFieldsByParentQuery({ + variables: { searchText: "" }, + skip: !documentTypeId, + }); + if (!documentTypeFieldsParentsQuery.loading) console.log(documentTypeFieldsParentsQuery.data?.docTypeFieldsByParent?.edges); + const [deleteDocumentTypeFieldMutate] = useDeleteDocumentTypeFieldMutation({ refetchQueries: [{ query: DocumentTypeFieldsQuery, variables: { documentTypeId: documentTypeId! } }], }); @@ -37,167 +64,124 @@ export function DocumentTypeFields() { return ( - data?.docTypeFieldsFromDocType, - }} - label="Document Type Fields" - onCreatePath="new" - onCreatePathSubFields="newSubFields" - onDelete={(documentTypeField) => { - if (documentTypeField?.id) { - deleteDocumentTypeFieldMutate({ variables: { documentTypeId: documentTypeId!, documentTypeFieldId: documentTypeField.id } }); - } - }} - id={documentTypeId} - columns={[ - { header: "Name", content: (documentTypeField) => formatName(documentTypeField) }, - { header: "Field Type", content: (documentTypeField) => documentTypeField?.fieldType }, - { header: "Boost", content: (documentTypeField) => documentTypeField?.boost }, - { - header: "Searchable", - content: (documentTypeField) => ( - - { - if ( - documentTypeField && - documentTypeField.id && - documentTypeField.fieldType && - documentTypeField.name && - documentTypeField.fieldName - ) { - updateDocumentTypeFieldMutate({ - variables: { - documentTypeFieldId: documentTypeField.id, - documentTypeId: documentTypeId, - searchable, - sortable: documentTypeField.sortable ?? false, - fieldType: documentTypeField.fieldType, - boost: documentTypeField.boost, - name: documentTypeField.name, - description: documentTypeField.description, - fieldName: documentTypeField.fieldName, - }, - }); - } - }} - /> - - - ), - }, - { - header: "Exclude", - content: (documentTypeField) => ( - { - if ( - documentTypeField && - documentTypeField.id && - documentTypeField.fieldType && - documentTypeField.name && - documentTypeField.fieldName && - typeof documentTypeField.searchable === "boolean" - ) { - updateDocumentTypeFieldMutate({ - variables: { - documentTypeFieldId: documentTypeField.id, - documentTypeId: documentTypeId, - exclude, - description: documentTypeField.description, - boost: documentTypeField.boost, - fieldType: documentTypeField.fieldType, - name: documentTypeField.name, - sortable: documentTypeField.sortable ?? false, - searchable: documentTypeField.searchable, - fieldName: documentTypeField.fieldName, - }, - }); - } - }} - /> - ), - }, - { - header: "Sortable", - content: (documentTypeField) => ( - - {documentTypeField?.fieldType !== FieldType.Date && documentTypeField?.fieldType !== FieldType.Keyword ? ( - - - { - if ( - (documentTypeField?.fieldType === FieldType.Date || documentTypeField?.fieldType === FieldType.Keyword) && - documentTypeField && - documentTypeField.id && - documentTypeField.fieldType && - documentTypeField.name && - documentTypeField.fieldName && - typeof documentTypeField.searchable === "boolean" - ) { - updateDocumentTypeFieldMutate({ - variables: { - documentTypeFieldId: documentTypeField.id, - documentTypeId: documentTypeId, - exclude: documentTypeField.exclude, - description: documentTypeField.description, - fieldType: documentTypeField.fieldType, - name: documentTypeField.name, - sortable, - searchable: documentTypeField.searchable, - boost: documentTypeField.boost, - fieldName: documentTypeField.fieldName, - }, - }); - } - }} - /> - - - ) : ( - { - if ( - documentTypeField && - documentTypeField.id && - documentTypeField.fieldType && - documentTypeField.name && - documentTypeField.fieldName && - typeof documentTypeField.searchable === "boolean" - ) { - updateDocumentTypeFieldMutate({ - variables: { - documentTypeFieldId: documentTypeField.id, - documentTypeId: documentTypeId, - exclude: documentTypeField.exclude, - description: documentTypeField.description, - fieldType: documentTypeField.fieldType, - name: documentTypeField.name, - sortable, - searchable: documentTypeField.searchable, - boost: documentTypeField.boost, - fieldName: documentTypeField.fieldName, - }, - }); + + + {documentTypeFieldsParentsQuery.data?.docTypeFieldsByParent?.edges?.map((documentType, index) => ( + + + + {formatName({ id: documentType?.node?.id, name: documentType?.node?.name })} + + + + alert("Clicked the trash!")} + symbol="plus" + /> + + + + } - }} - /> - )} - - ), - }, - ]} - /> + > + + +
+
+ +
+
+ { + // if (dataSource && dataSource.id && dataSource.name && dataSource.scheduling) + // updateDataSourceMutate({ + // variables: { + // id: dataSource.id, + // schedulable, + // name: dataSource.name, + // scheduling: dataSource.scheduling, + // jsonConfig: dataSource.jsonConfig ?? "{}", + // description: dataSource.description ?? "", + // reindex: dataSource.reindex || false, + // }, + // }); + }} + /> +
+
+ + + +
+
+ +
+
+ { + // if (dataSource && dataSource.id && dataSource.name && dataSource.scheduling) + // updateDataSourceMutate({ + // variables: { + // id: dataSource.id, + // schedulable, + // name: dataSource.name, + // scheduling: dataSource.scheduling, + // jsonConfig: dataSource.jsonConfig ?? "{}", + // description: dataSource.description ?? "", + // reindex: dataSource.reindex || false, + // }, + // }); + }} + /> +
+
+ + + + {" "} +
+
+ +
+
+ { + // if (dataSource && dataSource.id && dataSource.name && dataSource.scheduling) + // updateDataSourceMutate({ + // variables: { + // id: dataSource.id, + // schedulable, + // name: dataSource.name, + // scheduling: dataSource.scheduling, + // jsonConfig: dataSource.jsonConfig ?? "{}", + // description: dataSource.description ?? "", + // reindex: dataSource.reindex || false, + // }, + // }); + }} + /> +
+
+ + + + + + + + ))} + + ); } diff --git a/js-packages/admin-ui/src/graphql-generated.ts b/js-packages/admin-ui/src/graphql-generated.ts index be6554b22..8d9b1baaf 100644 --- a/js-packages/admin-ui/src/graphql-generated.ts +++ b/js-packages/admin-ui/src/graphql-generated.ts @@ -1322,7 +1322,9 @@ export type Mutation = { addLanguageToBucket?: Maybe; addRuleToQueryAnalysis?: Maybe; addSuggestionCategoryToBucket?: Maybe; + addSuggestionCategoryTranslation?: Maybe; addTabToBucket?: Maybe; + addTabTranslation?: Maybe; addTokenFilterToAnalyzer?: Maybe; addTokenTabToTab?: Maybe; analyzer?: Maybe; @@ -1360,7 +1362,9 @@ export type Mutation = { deleteRule?: Maybe; deleteSearchConfig?: Maybe; deleteSuggestionCategory?: Maybe; + deleteSuggestionCategoryTranslation?: Maybe; deleteTab?: Maybe; + deleteTabTranslation?: Maybe; deleteTokenFilter?: Maybe; deleteTokenTab?: Maybe; deleteTokenizer?: Maybe; @@ -1487,6 +1491,15 @@ export type MutationAddSuggestionCategoryToBucketArgs = { }; +/** Mutation root */ +export type MutationAddSuggestionCategoryTranslationArgs = { + key?: InputMaybe; + language?: InputMaybe; + suggestionCategoryId: Scalars['ID']; + value?: InputMaybe; +}; + + /** Mutation root */ export type MutationAddTabToBucketArgs = { id: Scalars['ID']; @@ -1494,6 +1507,15 @@ export type MutationAddTabToBucketArgs = { }; +/** Mutation root */ +export type MutationAddTabTranslationArgs = { + key?: InputMaybe; + language?: InputMaybe; + tabId: Scalars['ID']; + value?: InputMaybe; +}; + + /** Mutation root */ export type MutationAddTokenFilterToAnalyzerArgs = { id: Scalars['ID']; @@ -1743,12 +1765,28 @@ export type MutationDeleteSuggestionCategoryArgs = { }; +/** Mutation root */ +export type MutationDeleteSuggestionCategoryTranslationArgs = { + key?: InputMaybe; + language?: InputMaybe; + suggestionCategoryId: Scalars['ID']; +}; + + /** Mutation root */ export type MutationDeleteTabArgs = { tabId: Scalars['ID']; }; +/** Mutation root */ +export type MutationDeleteTabTranslationArgs = { + key?: InputMaybe; + language?: InputMaybe; + tabId: Scalars['ID']; +}; + + /** Mutation root */ export type MutationDeleteTokenFilterArgs = { tokenFilterId: Scalars['ID']; @@ -2189,6 +2227,7 @@ export type Query = { docTypeField?: Maybe; docTypeFieldNotInAnnotator?: Maybe; docTypeFields?: Maybe; + docTypeFieldsByParent?: Maybe; docTypeFieldsFromDocType?: Maybe; docTypeFieldsNotInTokenTab?: Maybe; docTypeTemplate?: Maybe; @@ -2370,6 +2409,18 @@ export type QueryDocTypeFieldsArgs = { }; +/** Query root */ +export type QueryDocTypeFieldsByParentArgs = { + after?: InputMaybe; + before?: InputMaybe; + first?: InputMaybe; + last?: InputMaybe; + parentId: Scalars['BigInteger']; + searchText?: InputMaybe; + sortByList?: InputMaybe>>; +}; + + /** Query root */ export type QueryDocTypeFieldsFromDocTypeArgs = { after?: InputMaybe; @@ -2937,6 +2988,7 @@ export type Scheduler = { }; export enum SchedulerStatus { + Cancelled = 'CANCELLED', Finished = 'FINISHED', Started = 'STARTED' } @@ -3059,6 +3111,7 @@ export type SuggestionCategory = { multiSelect: Scalars['Boolean']; name?: Maybe; priority?: Maybe; + translations?: Maybe>>; }; @@ -3091,6 +3144,7 @@ export type Tab = { priority?: Maybe; searchTokens?: Maybe; tokenTabs?: Maybe; + translations?: Maybe>>; }; @@ -3209,6 +3263,15 @@ export type TokenizerDtoInput = { type: Scalars['String']; }; +export type TranslationDto = { + __typename?: 'TranslationDTO'; + description?: Maybe; + key?: Maybe; + language?: Maybe; + name: Scalars['String']; + value?: Maybe; +}; + export type Tuple2_Analyzer_CharFilter = { __typename?: 'Tuple2_Analyzer_CharFilter'; left?: Maybe; @@ -3341,6 +3404,12 @@ export type Tuple2_SearchConfig_BigInteger = { right?: Maybe; }; +export type Tuple2_String_String = { + __typename?: 'Tuple2_String_String'; + left?: Maybe; + right?: Maybe; +}; + export type Tuple2_SuggestionCategory_DocTypeField = { __typename?: 'Tuple2_SuggestionCategory_DocTypeField'; left?: Maybe; @@ -4052,6 +4121,13 @@ export type DeleteDocumentTypeFieldMutationVariables = Exact<{ export type DeleteDocumentTypeFieldMutation = { __typename?: 'Mutation', removeDocTypeField?: { __typename?: 'Tuple2_DocType_BigInteger', right?: any | null } | null }; +export type DocTypeFieldsByParentQueryVariables = Exact<{ + searchText?: InputMaybe; +}>; + + +export type DocTypeFieldsByParentQuery = { __typename?: 'Query', docTypeFieldsByParent?: { __typename?: 'DefaultConnection_DocTypeField', edges?: Array<{ __typename?: 'DefaultEdge_DocTypeField', node?: { __typename?: 'DocTypeField', id?: string | null, name?: string | null, fieldName?: string | null, searchable: boolean, exclude?: boolean | null, sortable: boolean } | null } | null> | null } | null }; + export type DocumentTypeTemplateQueryVariables = Exact<{ id: Scalars['ID']; }>; @@ -8493,6 +8569,50 @@ export function useDeleteDocumentTypeFieldMutation(baseOptions?: Apollo.Mutation export type DeleteDocumentTypeFieldMutationHookResult = ReturnType; export type DeleteDocumentTypeFieldMutationResult = Apollo.MutationResult; export type DeleteDocumentTypeFieldMutationOptions = Apollo.BaseMutationOptions; +export const DocTypeFieldsByParentDocument = gql` + query DocTypeFieldsByParent($searchText: String) { + docTypeFieldsByParent(parentId: 0, searchText: $searchText, first: 10) { + edges { + node { + id + name + fieldName + searchable + exclude + sortable + } + } + } +} + `; + +/** + * __useDocTypeFieldsByParentQuery__ + * + * To run a query within a React component, call `useDocTypeFieldsByParentQuery` and pass it any options that fit your needs. + * When your component renders, `useDocTypeFieldsByParentQuery` returns an object from Apollo Client that contains loading, error, and data properties + * you can use to render your UI. + * + * @param baseOptions options that will be passed into the query, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options; + * + * @example + * const { data, loading, error } = useDocTypeFieldsByParentQuery({ + * variables: { + * searchText: // value for 'searchText' + * }, + * }); + */ +export function useDocTypeFieldsByParentQuery(baseOptions?: Apollo.QueryHookOptions) { + const options = {...defaultOptions, ...baseOptions} + return Apollo.useQuery(DocTypeFieldsByParentDocument, options); + } +export function useDocTypeFieldsByParentLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions) { + const options = {...defaultOptions, ...baseOptions} + return Apollo.useLazyQuery(DocTypeFieldsByParentDocument, options); + } +export type DocTypeFieldsByParentQueryHookResult = ReturnType; +export type DocTypeFieldsByParentLazyQueryHookResult = ReturnType; +export type DocTypeFieldsByParentQueryResult = Apollo.QueryResult; export const DocumentTypeTemplateDocument = gql` query DocumentTypeTemplate($id: ID!) { docTypeTemplate(id: $id) { @@ -12604,4 +12724,4 @@ export function useCreateYouTubeDataSourceMutation(baseOptions?: Apollo.Mutation export type CreateYouTubeDataSourceMutationHookResult = ReturnType; export type CreateYouTubeDataSourceMutationResult = Apollo.MutationResult; export type CreateYouTubeDataSourceMutationOptions = Apollo.BaseMutationOptions; -// Generated on 2023-07-24T16:47:12+02:00 +// Generated on 2023-09-08T16:53:01+02:00 From e077b5fe6eb7302e431bcbd82dda9e039fa7fc42 Mon Sep 17 00:00:00 2001 From: lorenzo venneri Date: Tue, 12 Sep 2023 10:01:15 +0200 Subject: [PATCH 02/22] Issue #569: add find level --- .../src/components/DocumentTypeFields.tsx | 310 +++++++++++------- js-packages/admin-ui/src/components/Table.tsx | 1 + js-packages/admin-ui/src/graphql-generated.ts | 16 +- 3 files changed, 202 insertions(+), 125 deletions(-) diff --git a/js-packages/admin-ui/src/components/DocumentTypeFields.tsx b/js-packages/admin-ui/src/components/DocumentTypeFields.tsx index 270f6b361..cdff261d6 100644 --- a/js-packages/admin-ui/src/components/DocumentTypeFields.tsx +++ b/js-packages/admin-ui/src/components/DocumentTypeFields.tsx @@ -1,7 +1,10 @@ import React from "react"; -import { gql } from "@apollo/client"; +import { QueryResult, gql } from "@apollo/client"; import { + DocTypeFieldsByParentQuery, + Exact, FieldType, + InputMaybe, useCreateOrUpdateDocumentTypeFieldMutation, useDeleteDocumentTypeFieldMutation, useDocTypeFieldsByParentQuery, @@ -16,6 +19,8 @@ import { ClayTooltipProvider } from "@clayui/tooltip"; import ClayIcon from "@clayui/icon"; import ClayList from "@clayui/list"; import DropDown from "@clayui/drop-down"; +import { apolloClient } from "./apolloClient"; +import { log } from "console"; gql` mutation DeleteDocumentTypeField($documentTypeId: ID!, $documentTypeFieldId: ID!) { @@ -26,8 +31,8 @@ gql` `; export const DocumentTypeFieldsParentQuery = gql` - query DocTypeFieldsByParent($searchText: String) { - docTypeFieldsByParent(parentId: 0, searchText: $searchText, first: 10) { + query DocTypeFieldsByParent($searchText: String, $parentId: BigInteger!) { + docTypeFieldsByParent(parentId: $parentId, searchText: $searchText, first: 10) { edges { node { id @@ -36,6 +41,10 @@ export const DocumentTypeFieldsParentQuery = gql` searchable exclude sortable + parent { + id + fieldName + } } } } @@ -44,144 +53,205 @@ export const DocumentTypeFieldsParentQuery = gql` export function DocumentTypeFields() { const { documentTypeId } = useParams(); - const documentTypeFieldsQuery = useDocumentTypeFieldsQuery({ - variables: { documentTypeId: documentTypeId! }, - skip: !documentTypeId, - }); + + const [allDocTypes, setAllDocTypes] = React.useState>([ + { + idParent: 0, + queryData: useDocTypeFieldsByParentQuery({ + variables: { searchText: "", parentId: 0 }, + skip: !documentTypeId, + }), + level: 0, + }, + ]); const documentTypeFieldsParentsQuery = useDocTypeFieldsByParentQuery({ - variables: { searchText: "" }, + variables: { searchText: "", parentId: 0 }, skip: !documentTypeId, }); - if (!documentTypeFieldsParentsQuery.loading) console.log(documentTypeFieldsParentsQuery.data?.docTypeFieldsByParent?.edges); - const [deleteDocumentTypeFieldMutate] = useDeleteDocumentTypeFieldMutation({ refetchQueries: [{ query: DocumentTypeFieldsQuery, variables: { documentTypeId: documentTypeId! } }], }); const [updateDocumentTypeFieldMutate] = useCreateOrUpdateDocumentTypeFieldMutation({ refetchQueries: [{ query: DocumentTypeFieldsQuery, variables: { documentTypeId: documentTypeId! } }], }); + + async function addElement({ parentId }: { parentId: number }) { + try { + const { data } = await apolloClient.query({ + query: DocumentTypeFieldsParentQuery, + variables: { searchText: "", parentId: parentId }, + }); + setAllDocTypes((prevAllDocTypes) => [ + ...prevAllDocTypes, + { + idParent: parentId, + queryData: data, + level: parentId, + }, + ]); + } catch (error) { + console.error("Errore nella query:", error); + } + } if (!documentTypeId) throw new Error(); return ( - {documentTypeFieldsParentsQuery.data?.docTypeFieldsByParent?.edges?.map((documentType, index) => ( - - - - {formatName({ id: documentType?.node?.id, name: documentType?.node?.name })} - - - - alert("Clicked the trash!")} - symbol="plus" - /> + {documentTypeFieldsParentsQuery.data?.docTypeFieldsByParent?.edges?.map((documentType, index) => { + return ( + + + + {formatName({ id: documentType?.node?.id, name: documentType?.node?.name })} + + + + alert("Clicked the trash!")} + symbol="plus" + /> - - - - } - > - - -
-
- -
-
- { - // if (dataSource && dataSource.id && dataSource.name && dataSource.scheduling) - // updateDataSourceMutate({ - // variables: { - // id: dataSource.id, - // schedulable, - // name: dataSource.name, - // scheduling: dataSource.scheduling, - // jsonConfig: dataSource.jsonConfig ?? "{}", - // description: dataSource.description ?? "", - // reindex: dataSource.reindex || false, - // }, - // }); - }} - /> -
-
- - - -
-
- + + + + } + > + + +
+
+ +
+
+ { + // if (dataSource && dataSource.id && dataSource.name && dataSource.scheduling) + // updateDataSourceMutate({ + // variables: { + // id: dataSource.id, + // schedulable, + // name: dataSource.name, + // scheduling: dataSource.scheduling, + // jsonConfig: dataSource.jsonConfig ?? "{}", + // description: dataSource.description ?? "", + // reindex: dataSource.reindex || false, + // }, + // }); + }} + /> +
-
- { - // if (dataSource && dataSource.id && dataSource.name && dataSource.scheduling) - // updateDataSourceMutate({ - // variables: { - // id: dataSource.id, - // schedulable, - // name: dataSource.name, - // scheduling: dataSource.scheduling, - // jsonConfig: dataSource.jsonConfig ?? "{}", - // description: dataSource.description ?? "", - // reindex: dataSource.reindex || false, - // }, - // }); - }} - /> + + + +
+
+ +
+
+ { + // if (dataSource && dataSource.id && dataSource.name && dataSource.scheduling) + // updateDataSourceMutate({ + // variables: { + // id: dataSource.id, + // schedulable, + // name: dataSource.name, + // scheduling: dataSource.scheduling, + // jsonConfig: dataSource.jsonConfig ?? "{}", + // description: dataSource.description ?? "", + // reindex: dataSource.reindex || false, + // }, + // }); + }} + /> +
-
- - - - {" "} -
-
- + + + + {" "} +
+
+ +
+
+ { + // if (dataSource && dataSource.id && dataSource.name && dataSource.scheduling) + // updateDataSourceMutate({ + // variables: { + // id: dataSource.id, + // schedulable, + // name: dataSource.name, + // scheduling: dataSource.scheduling, + // jsonConfig: dataSource.jsonConfig ?? "{}", + // description: dataSource.description ?? "", + // reindex: dataSource.reindex || false, + // }, + // }); + }} + /> +
-
- { - // if (dataSource && dataSource.id && dataSource.name && dataSource.scheduling) - // updateDataSourceMutate({ - // variables: { - // id: dataSource.id, - // schedulable, - // name: dataSource.name, - // scheduling: dataSource.scheduling, - // jsonConfig: dataSource.jsonConfig ?? "{}", - // description: dataSource.description ?? "", - // reindex: dataSource.reindex || false, - // }, - // }); - }} - /> -
-
- - - - - - - - ))} + + + + { + addElement({ parentId: Number(documentType?.node?.parent?.id || 0) }); + findLevel({ docTypes: allDocTypes, addedId: Number(documentType?.node?.parent?.id || 0) }); + }} + symbol="angle-right" + /> + + + + + ); + })} ); } + +type DocTypesType = { + idParent: number; + element: React.ReactNode; + level: number; +}; + +type DocTypesQueryType = { + idParent: number; + queryData: QueryResult< + DocTypeFieldsByParentQuery, + Exact<{ + searchText?: InputMaybe | undefined; + parentId: any; + }> + >; + level: number; +}; + +function removeElementsByLevels(elements: DocTypesType[], levelSelect: number): DocTypesType[] { + return elements.filter((elementInfo) => elementInfo.level <= levelSelect); +} + +function findLevel({ docTypes, addedId }: { docTypes: Array; addedId: number }): number { + const docElement = docTypes.find((document) => document.idParent === addedId); + console.log(docElement); + + return docElement?.level || -1; +} diff --git a/js-packages/admin-ui/src/components/Table.tsx b/js-packages/admin-ui/src/components/Table.tsx index d6643e367..e62b9db80 100644 --- a/js-packages/admin-ui/src/components/Table.tsx +++ b/js-packages/admin-ui/src/components/Table.tsx @@ -13,6 +13,7 @@ import { ClayToggle } from "@clayui/form"; import { ContainerFluid, ContainerFluidWithoutView, EmptySpace, MainTitle, StyleToggle } from "./Form"; import { ClassNameButton } from "../App"; import ClayIcon from "@clayui/icon"; +import { useDeleteDocumentTypeFieldMutation } from "../graphql-generated"; export function formatName(value: { id?: string | null; name?: string | null } | null | undefined) { return ( diff --git a/js-packages/admin-ui/src/graphql-generated.ts b/js-packages/admin-ui/src/graphql-generated.ts index 8d9b1baaf..9a4de2b67 100644 --- a/js-packages/admin-ui/src/graphql-generated.ts +++ b/js-packages/admin-ui/src/graphql-generated.ts @@ -4123,10 +4123,11 @@ export type DeleteDocumentTypeFieldMutation = { __typename?: 'Mutation', removeD export type DocTypeFieldsByParentQueryVariables = Exact<{ searchText?: InputMaybe; + parentId: Scalars['BigInteger']; }>; -export type DocTypeFieldsByParentQuery = { __typename?: 'Query', docTypeFieldsByParent?: { __typename?: 'DefaultConnection_DocTypeField', edges?: Array<{ __typename?: 'DefaultEdge_DocTypeField', node?: { __typename?: 'DocTypeField', id?: string | null, name?: string | null, fieldName?: string | null, searchable: boolean, exclude?: boolean | null, sortable: boolean } | null } | null> | null } | null }; +export type DocTypeFieldsByParentQuery = { __typename?: 'Query', docTypeFieldsByParent?: { __typename?: 'DefaultConnection_DocTypeField', edges?: Array<{ __typename?: 'DefaultEdge_DocTypeField', node?: { __typename?: 'DocTypeField', id?: string | null, name?: string | null, fieldName?: string | null, searchable: boolean, exclude?: boolean | null, sortable: boolean, parent?: { __typename?: 'DocTypeField', id?: string | null, fieldName?: string | null } | null } | null } | null> | null } | null }; export type DocumentTypeTemplateQueryVariables = Exact<{ id: Scalars['ID']; @@ -8570,8 +8571,8 @@ export type DeleteDocumentTypeFieldMutationHookResult = ReturnType; export type DeleteDocumentTypeFieldMutationOptions = Apollo.BaseMutationOptions; export const DocTypeFieldsByParentDocument = gql` - query DocTypeFieldsByParent($searchText: String) { - docTypeFieldsByParent(parentId: 0, searchText: $searchText, first: 10) { + query DocTypeFieldsByParent($searchText: String, $parentId: BigInteger!) { + docTypeFieldsByParent(parentId: $parentId, searchText: $searchText, first: 10) { edges { node { id @@ -8580,6 +8581,10 @@ export const DocTypeFieldsByParentDocument = gql` searchable exclude sortable + parent { + id + fieldName + } } } } @@ -8599,10 +8604,11 @@ export const DocTypeFieldsByParentDocument = gql` * const { data, loading, error } = useDocTypeFieldsByParentQuery({ * variables: { * searchText: // value for 'searchText' + * parentId: // value for 'parentId' * }, * }); */ -export function useDocTypeFieldsByParentQuery(baseOptions?: Apollo.QueryHookOptions) { +export function useDocTypeFieldsByParentQuery(baseOptions: Apollo.QueryHookOptions) { const options = {...defaultOptions, ...baseOptions} return Apollo.useQuery(DocTypeFieldsByParentDocument, options); } @@ -12724,4 +12730,4 @@ export function useCreateYouTubeDataSourceMutation(baseOptions?: Apollo.Mutation export type CreateYouTubeDataSourceMutationHookResult = ReturnType; export type CreateYouTubeDataSourceMutationResult = Apollo.MutationResult; export type CreateYouTubeDataSourceMutationOptions = Apollo.BaseMutationOptions; -// Generated on 2023-09-08T16:53:01+02:00 +// Generated on 2023-09-12T09:58:38+02:00 From fc2cf92b3e71262f832bbd94f7573a69fd71f377 Mon Sep 17 00:00:00 2001 From: lorenzo venneri Date: Tue, 12 Sep 2023 10:27:04 +0200 Subject: [PATCH 03/22] Issue #569: fix find level --- .../admin-ui/src/components/DocumentTypeFields.tsx | 14 +++++++------- js-packages/admin-ui/src/graphql-generated.ts | 2 +- 2 files changed, 8 insertions(+), 8 deletions(-) diff --git a/js-packages/admin-ui/src/components/DocumentTypeFields.tsx b/js-packages/admin-ui/src/components/DocumentTypeFields.tsx index cdff261d6..a616dd1a9 100644 --- a/js-packages/admin-ui/src/components/DocumentTypeFields.tsx +++ b/js-packages/admin-ui/src/components/DocumentTypeFields.tsx @@ -75,7 +75,7 @@ export function DocumentTypeFields() { refetchQueries: [{ query: DocumentTypeFieldsQuery, variables: { documentTypeId: documentTypeId! } }], }); - async function addElement({ parentId }: { parentId: number }) { + async function addElement({ parentId, level }: { parentId: number; level: number }) { try { const { data } = await apolloClient.query({ query: DocumentTypeFieldsParentQuery, @@ -86,7 +86,7 @@ export function DocumentTypeFields() { { idParent: parentId, queryData: data, - level: parentId, + level: level, }, ]); } catch (error) { @@ -210,8 +210,8 @@ export function DocumentTypeFields() { aria-label="View sub doc type fields" title="View sub doc type fields" onClick={() => { - addElement({ parentId: Number(documentType?.node?.parent?.id || 0) }); - findLevel({ docTypes: allDocTypes, addedId: Number(documentType?.node?.parent?.id || 0) }); + const level = findLevel({ docTypes: allDocTypes, addedId: Number(documentType?.node?.parent?.id || 0) }); + addElement({ parentId: Number(documentType?.node?.parent?.id || 0), level }); }} symbol="angle-right" /> @@ -251,7 +251,7 @@ function removeElementsByLevels(elements: DocTypesType[], levelSelect: number): function findLevel({ docTypes, addedId }: { docTypes: Array; addedId: number }): number { const docElement = docTypes.find((document) => document.idParent === addedId); - console.log(docElement); - - return docElement?.level || -1; + let nextLevel = 0; + if (docElement?.level === undefined) nextLevel = docTypes.reduce((max, doc) => (doc.level > max ? doc.level : max), 0); + return docElement?.level || nextLevel; } diff --git a/js-packages/admin-ui/src/graphql-generated.ts b/js-packages/admin-ui/src/graphql-generated.ts index 9a4de2b67..9b0567186 100644 --- a/js-packages/admin-ui/src/graphql-generated.ts +++ b/js-packages/admin-ui/src/graphql-generated.ts @@ -12730,4 +12730,4 @@ export function useCreateYouTubeDataSourceMutation(baseOptions?: Apollo.Mutation export type CreateYouTubeDataSourceMutationHookResult = ReturnType; export type CreateYouTubeDataSourceMutationResult = Apollo.MutationResult; export type CreateYouTubeDataSourceMutationOptions = Apollo.BaseMutationOptions; -// Generated on 2023-09-12T09:58:38+02:00 +// Generated on 2023-09-12T10:26:51+02:00 From 3c519d45e3c36153cf66c795ce7100f940e7baf3 Mon Sep 17 00:00:00 2001 From: lorenzo venneri Date: Tue, 12 Sep 2023 14:51:33 +0200 Subject: [PATCH 04/22] Issue #569: create components for create row --- .../src/components/DocumentTypeFields.tsx | 239 +++++++++--------- js-packages/admin-ui/src/graphql-generated.ts | 2 +- 2 files changed, 120 insertions(+), 121 deletions(-) diff --git a/js-packages/admin-ui/src/components/DocumentTypeFields.tsx b/js-packages/admin-ui/src/components/DocumentTypeFields.tsx index a616dd1a9..6165e6cc4 100644 --- a/js-packages/admin-ui/src/components/DocumentTypeFields.tsx +++ b/js-packages/admin-ui/src/components/DocumentTypeFields.tsx @@ -64,6 +64,9 @@ export function DocumentTypeFields() { level: 0, }, ]); + allDocTypes.forEach((all, index) => { + console.log(all, index); + }); const documentTypeFieldsParentsQuery = useDocTypeFieldsByParentQuery({ variables: { searchText: "", parentId: 0 }, skip: !documentTypeId, @@ -95,131 +98,127 @@ export function DocumentTypeFields() { } if (!documentTypeId) throw new Error(); + function CreateDocType( + documentType: { + __typename?: "DefaultEdge_DocTypeField" | undefined; + node?: + | { + __typename?: "DocTypeField" | undefined; + id?: string | null | undefined; + name?: string | null | undefined; + fieldName?: string | null | undefined; + searchable: boolean; + exclude?: boolean | null | undefined; + sortable: boolean; + parent?: + | { __typename?: "DocTypeField" | undefined; id?: string | null | undefined; fieldName?: string | null | undefined } + | null + | undefined; + } + | null + | undefined; + } | null + ): JSX.Element { + return ( + + + + {formatName({ id: documentType?.node?.id, name: documentType?.node?.name })} + + + + alert("Clicked the trash!")} + symbol="plus" + /> + + + + + } + > + + +
+
+ +
+
+ { + const documentTypeElement = documentType?.node; + if (documentTypeElement && documentTypeElement.id && documentTypeElement.name && documentTypeElement.parent) { + } + }} + /> +
+
+ + + +
+
+ +
+
+ { + const documentTypeElement = documentType?.node; + if (documentTypeElement && documentTypeElement.id && documentTypeElement.name && documentTypeElement.parent) { + } + }} + /> +
+
+ + + +
+
+ +
+
+ { + const documentTypeElement = documentType?.node; + if (documentTypeElement && documentTypeElement.id && documentTypeElement.name && documentTypeElement.parent) { + } + }} + /> +
+
+ + + + { + const level = findLevel({ docTypes: allDocTypes, addedId: Number(documentType?.node?.parent?.id || 0) }); + addElement({ parentId: Number(documentType?.node?.id || 0), level }); + }} + symbol="angle-right" + /> + + + + + ); + } + return ( {documentTypeFieldsParentsQuery.data?.docTypeFieldsByParent?.edges?.map((documentType, index) => { - return ( - - - - {formatName({ id: documentType?.node?.id, name: documentType?.node?.name })} - - - - alert("Clicked the trash!")} - symbol="plus" - /> - - - - - } - > - - -
-
- -
-
- { - // if (dataSource && dataSource.id && dataSource.name && dataSource.scheduling) - // updateDataSourceMutate({ - // variables: { - // id: dataSource.id, - // schedulable, - // name: dataSource.name, - // scheduling: dataSource.scheduling, - // jsonConfig: dataSource.jsonConfig ?? "{}", - // description: dataSource.description ?? "", - // reindex: dataSource.reindex || false, - // }, - // }); - }} - /> -
-
- - - -
-
- -
-
- { - // if (dataSource && dataSource.id && dataSource.name && dataSource.scheduling) - // updateDataSourceMutate({ - // variables: { - // id: dataSource.id, - // schedulable, - // name: dataSource.name, - // scheduling: dataSource.scheduling, - // jsonConfig: dataSource.jsonConfig ?? "{}", - // description: dataSource.description ?? "", - // reindex: dataSource.reindex || false, - // }, - // }); - }} - /> -
-
- - - - {" "} -
-
- -
-
- { - // if (dataSource && dataSource.id && dataSource.name && dataSource.scheduling) - // updateDataSourceMutate({ - // variables: { - // id: dataSource.id, - // schedulable, - // name: dataSource.name, - // scheduling: dataSource.scheduling, - // jsonConfig: dataSource.jsonConfig ?? "{}", - // description: dataSource.description ?? "", - // reindex: dataSource.reindex || false, - // }, - // }); - }} - /> -
-
- - - - { - const level = findLevel({ docTypes: allDocTypes, addedId: Number(documentType?.node?.parent?.id || 0) }); - addElement({ parentId: Number(documentType?.node?.parent?.id || 0), level }); - }} - symbol="angle-right" - /> - - - - - ); + return CreateDocType(documentType); })} diff --git a/js-packages/admin-ui/src/graphql-generated.ts b/js-packages/admin-ui/src/graphql-generated.ts index 9b0567186..b52ab04ad 100644 --- a/js-packages/admin-ui/src/graphql-generated.ts +++ b/js-packages/admin-ui/src/graphql-generated.ts @@ -12730,4 +12730,4 @@ export function useCreateYouTubeDataSourceMutation(baseOptions?: Apollo.Mutation export type CreateYouTubeDataSourceMutationHookResult = ReturnType; export type CreateYouTubeDataSourceMutationResult = Apollo.MutationResult; export type CreateYouTubeDataSourceMutationOptions = Apollo.BaseMutationOptions; -// Generated on 2023-09-12T10:26:51+02:00 +// Generated on 2023-09-12T11:17:51+02:00 From d63932381b23e3775913e6c8b5c71accf0fafe32 Mon Sep 17 00:00:00 2001 From: lorenzo venneri Date: Tue, 12 Sep 2023 15:37:47 +0200 Subject: [PATCH 05/22] Issue #569: add new sub field --- .../admin-ui/src/components/DocumentTypeFields.tsx | 11 ++++------- 1 file changed, 4 insertions(+), 7 deletions(-) diff --git a/js-packages/admin-ui/src/components/DocumentTypeFields.tsx b/js-packages/admin-ui/src/components/DocumentTypeFields.tsx index 6165e6cc4..58be9f1e0 100644 --- a/js-packages/admin-ui/src/components/DocumentTypeFields.tsx +++ b/js-packages/admin-ui/src/components/DocumentTypeFields.tsx @@ -11,7 +11,7 @@ import { useDocumentTypeFieldsQuery, } from "../graphql-generated"; import { formatName, TableWithSubFields } from "./Table"; -import { useParams } from "react-router-dom"; +import { Link, useParams } from "react-router-dom"; import { DocumentTypeFieldsQuery } from "./SubFieldsDocumentType"; import { ClayToggle } from "@clayui/form"; import { ContainerFluid, StyleToggle } from "./Form"; @@ -127,12 +127,9 @@ export function DocumentTypeFields() { - alert("Clicked the trash!")} - symbol="plus" - /> + + + Date: Thu, 21 Sep 2023 16:13:07 +0200 Subject: [PATCH 06/22] add remove doctypes level --- .../src/components/DocumentTypeFields.tsx | 365 +++++++++++------- 1 file changed, 226 insertions(+), 139 deletions(-) diff --git a/js-packages/admin-ui/src/components/DocumentTypeFields.tsx b/js-packages/admin-ui/src/components/DocumentTypeFields.tsx index 58be9f1e0..30697879b 100644 --- a/js-packages/admin-ui/src/components/DocumentTypeFields.tsx +++ b/js-packages/admin-ui/src/components/DocumentTypeFields.tsx @@ -16,11 +16,11 @@ import { DocumentTypeFieldsQuery } from "./SubFieldsDocumentType"; import { ClayToggle } from "@clayui/form"; import { ContainerFluid, StyleToggle } from "./Form"; import { ClayTooltipProvider } from "@clayui/tooltip"; +import { CategoricalChartFunc } from "recharts/types/chart/generateCategoricalChart"; import ClayIcon from "@clayui/icon"; import ClayList from "@clayui/list"; import DropDown from "@clayui/drop-down"; import { apolloClient } from "./apolloClient"; -import { log } from "console"; gql` mutation DeleteDocumentTypeField($documentTypeId: ID!, $documentTypeFieldId: ID!) { @@ -61,12 +61,15 @@ export function DocumentTypeFields() { variables: { searchText: "", parentId: 0 }, skip: !documentTypeId, }), - level: 0, }, ]); - allDocTypes.forEach((all, index) => { - console.log(all, index); - }); + + React.useEffect(() => { + console.log(allDocTypes); + }, [allDocTypes]); + // allDocTypes.forEach((all, index) => { + // console.log(all, index); + // }); const documentTypeFieldsParentsQuery = useDocTypeFieldsByParentQuery({ variables: { searchText: "", parentId: 0 }, skip: !documentTypeId, @@ -78,147 +81,233 @@ export function DocumentTypeFields() { refetchQueries: [{ query: DocumentTypeFieldsQuery, variables: { documentTypeId: documentTypeId! } }], }); - async function addElement({ parentId, level }: { parentId: number; level: number }) { + // async function addElement({ parentId, level }: { parentId: number; level: number }) { + // try { + // const { data } = await apolloClient.query({ + // query: DocumentTypeFieldsParentQuery, + // variables: { searchText: "", parentId: parentId }, + // }); + // setAllDocTypes((prevAllDocTypes) => [ + // ...prevAllDocTypes, + // { + // idParent: parentId, + // queryData: data, + // level: level, + // }, + // ]); + // } catch (error) { + // console.error("Errore nella query:", error); + // } + // } + + // const allLevels: ( + // | { + // __typename?: "DocTypeField" | undefined; + // id?: string | null | undefined; + // name?: string | null | undefined; + // fieldName?: string | null | undefined; + // searchable: boolean; + // exclude?: boolean | null | undefined; + // sortable: boolean; + // parent?: + // | { __typename?: "DocTypeField" | undefined; id?: string | null | undefined; fieldName?: string | null | undefined } + // | null + // | undefined; + // } + // | null + // | undefined + // )[][] = []; + // const firstLevel: ( + // | { + // __typename?: "DocTypeField" | undefined; + // id?: string | null | undefined; + // name?: string | null | undefined; + // fieldName?: string | null | undefined; + // searchable: boolean; + // exclude?: boolean | null | undefined; + // sortable: boolean; + // parent?: + // | { __typename?: "DocTypeField" | undefined; id?: string | null | undefined; fieldName?: string | null | undefined } + // | null + // | undefined; + // } + // | null + // | undefined + // )[] = []; + // documentTypeFieldsParentsQuery.data?.docTypeFieldsByParent?.edges?.forEach((element) => { + // // console.log(element?.node) + // firstLevel.push(element?.node); + // }); + // allLevels.push(firstLevel); + + async function addRemoveLevel({ parentId }: { parentId: number }) { try { const { data } = await apolloClient.query({ query: DocumentTypeFieldsParentQuery, variables: { searchText: "", parentId: parentId }, }); - setAllDocTypes((prevAllDocTypes) => [ - ...prevAllDocTypes, - { - idParent: parentId, - queryData: data, - level: level, - }, - ]); + + const queryResult = data?.docTypeFieldsByParent?.edges; + const allDocTypesLength = allDocTypes.length; + for (let index = allDocTypesLength - 1; index >= 0; index--) { + const parent = allDocTypes[index]; + const queryResultLength = queryResult.length; + if (queryResultLength === 0) { + allDocTypes.splice(index + 1, 1); + } + for (let i = 0; i < queryResultLength; i++) { + const son = queryResult[i].node; + if ( + parent.queryData.data?.docTypeFieldsByParent?.edges?.find((document) => document?.node?.id === son.parent.id) || + !parent.queryData.data + ) { + allDocTypes.splice(index + 1, 1); + } + } + } + const elementToAdd = { + idParent: parentId, + queryData: data, + }; + if (elementToAdd.queryData?.docTypeFieldsByParent?.edges.length > 0) { + // allDocTypes.push(elementToAdd); + // setAllDocTypes(allDocTypes); + setAllDocTypes((prevArray) => [...prevArray, elementToAdd]); + } + + console.log("allDocTypes", allDocTypes); } catch (error) { console.error("Errore nella query:", error); } } if (!documentTypeId) throw new Error(); - function CreateDocType( + function CreateDocType({ + documentType, + }: { documentType: { - __typename?: "DefaultEdge_DocTypeField" | undefined; - node?: - | { - __typename?: "DocTypeField" | undefined; - id?: string | null | undefined; - name?: string | null | undefined; - fieldName?: string | null | undefined; - searchable: boolean; - exclude?: boolean | null | undefined; - sortable: boolean; - parent?: - | { __typename?: "DocTypeField" | undefined; id?: string | null | undefined; fieldName?: string | null | undefined } - | null - | undefined; - } - | null - | undefined; - } | null - ): JSX.Element { + idParent: number; + queryData: QueryResult< + DocTypeFieldsByParentQuery, + Exact<{ + searchText?: InputMaybe | undefined; + parentId: any; + }> + >; + } | null; + }): JSX.Element { + const sameData = documentType?.queryData.data?.docTypeFieldsByParent?.edges; return ( - - - - {formatName({ id: documentType?.node?.id, name: documentType?.node?.name })} - - - - - - - - - - - } - > - - -
-
- -
-
- { - const documentTypeElement = documentType?.node; - if (documentTypeElement && documentTypeElement.id && documentTypeElement.name && documentTypeElement.parent) { - } - }} - /> -
-
- - - -
-
- -
-
- { - const documentTypeElement = documentType?.node; - if (documentTypeElement && documentTypeElement.id && documentTypeElement.name && documentTypeElement.parent) { - } - }} - /> -
-
- - - -
-
- -
-
- { - const documentTypeElement = documentType?.node; - if (documentTypeElement && documentTypeElement.id && documentTypeElement.name && documentTypeElement.parent) { - } - }} - /> -
-
- - - - { - const level = findLevel({ docTypes: allDocTypes, addedId: Number(documentType?.node?.parent?.id || 0) }); - addElement({ parentId: Number(documentType?.node?.id || 0), level }); - }} - symbol="angle-right" - /> - - - - +
{sameData?.map((sinlgeData) =>
{ + addRemoveLevel({ parentId: Number(sinlgeData?.node?.id || 0) }); + }}>{sinlgeData?.node?.name}
)}
+ // {sameData?.map((sinlgeData) => { + // return( + // + // + // {formatName({ id: sinlgeData?.node?.id, name: sinlgeData?.node?.name })} + // + // + // + // + // + // + + // + // + // + // } + // > + // + // + //
+ //
+ // + //
+ //
+ // { + // const documentTypeElement = sinlgeData?.node; + // if (documentTypeElement && documentTypeElement.id && documentTypeElement.name && documentTypeElement.parent) { + // } + // }} + // /> + //
+ //
+ // + // + // + //
+ //
+ // + //
+ //
+ // { + // const documentTypeElement = sinlgeData?.node; + // if (documentTypeElement && documentTypeElement.id && documentTypeElement.name && documentTypeElement.parent) { + // } + // }} + // /> + //
+ //
+ // + // + // + //
+ //
+ // + //
+ //
+ // { + // const documentTypeElement = sinlgeData?.node; + // if (documentTypeElement && documentTypeElement.id && documentTypeElement.name && documentTypeElement.parent) { + // } + // }} + // /> + //
+ //
+ // + // + // + // { + // addRemoveLevel({ parentId: Number(sinlgeData?.node?.id || 0) }); + // }} + // symbol="angle-right" + // /> + // + // + // + // ) + // })} + // ); } return ( - - - {documentTypeFieldsParentsQuery.data?.docTypeFieldsByParent?.edges?.map((documentType, index) => { - return CreateDocType(documentType); - })} - - + {allDocTypes.map((docType, index) => { + console.log(docType) + return ( +
+ + {index} + + + + +
+ ); + })} ); } @@ -226,7 +315,6 @@ export function DocumentTypeFields() { type DocTypesType = { idParent: number; element: React.ReactNode; - level: number; }; type DocTypesQueryType = { @@ -238,16 +326,15 @@ type DocTypesQueryType = { parentId: any; }> >; - level: number; }; -function removeElementsByLevels(elements: DocTypesType[], levelSelect: number): DocTypesType[] { - return elements.filter((elementInfo) => elementInfo.level <= levelSelect); -} +// function removeElementsByLevels(elements: DocTypesType[], levelSelect: number): DocTypesType[] { +// return elements.filter((elementInfo) => elementInfo.level <= levelSelect); +// } -function findLevel({ docTypes, addedId }: { docTypes: Array; addedId: number }): number { - const docElement = docTypes.find((document) => document.idParent === addedId); - let nextLevel = 0; - if (docElement?.level === undefined) nextLevel = docTypes.reduce((max, doc) => (doc.level > max ? doc.level : max), 0); - return docElement?.level || nextLevel; -} +// function findLevel({ docTypes, addedId }: { docTypes: Array; addedId: number }): number { +// const docElement = docTypes.find((document) => document.idParent === addedId); +// let nextLevel = 0; +// if (docElement?.level === undefined) nextLevel = docTypes.reduce((max, doc) => (doc.level > max ? doc.level : max), 0); +// return docElement?.level || nextLevel; +// } From ee4c16939b0d8023e16a42d2b35c9b5ec0bebb02 Mon Sep 17 00:00:00 2001 From: lorenzo venneri Date: Sun, 24 Sep 2023 13:48:12 +0200 Subject: [PATCH 07/22] Issue #569: add logic for create,remove doctypes --- .../src/components/DocumentTypeFields.tsx | 354 ++++-------------- 1 file changed, 83 insertions(+), 271 deletions(-) diff --git a/js-packages/admin-ui/src/components/DocumentTypeFields.tsx b/js-packages/admin-ui/src/components/DocumentTypeFields.tsx index 30697879b..4faa5ce07 100644 --- a/js-packages/admin-ui/src/components/DocumentTypeFields.tsx +++ b/js-packages/admin-ui/src/components/DocumentTypeFields.tsx @@ -1,5 +1,5 @@ import React from "react"; -import { QueryResult, gql } from "@apollo/client"; +import { QueryResult, gql, useQuery } from "@apollo/client"; import { DocTypeFieldsByParentQuery, Exact, @@ -54,287 +54,99 @@ export const DocumentTypeFieldsParentQuery = gql` export function DocumentTypeFields() { const { documentTypeId } = useParams(); - const [allDocTypes, setAllDocTypes] = React.useState>([ - { - idParent: 0, - queryData: useDocTypeFieldsByParentQuery({ - variables: { searchText: "", parentId: 0 }, - skip: !documentTypeId, - }), - }, - ]); + const [selectedDocumentId, setSelectedDocumentId] = React.useState(null); - React.useEffect(() => { - console.log(allDocTypes); - }, [allDocTypes]); - // allDocTypes.forEach((all, index) => { - // console.log(all, index); - // }); - const documentTypeFieldsParentsQuery = useDocTypeFieldsByParentQuery({ - variables: { searchText: "", parentId: 0 }, - skip: !documentTypeId, - }); - const [deleteDocumentTypeFieldMutate] = useDeleteDocumentTypeFieldMutation({ - refetchQueries: [{ query: DocumentTypeFieldsQuery, variables: { documentTypeId: documentTypeId! } }], - }); - const [updateDocumentTypeFieldMutate] = useCreateOrUpdateDocumentTypeFieldMutation({ - refetchQueries: [{ query: DocumentTypeFieldsQuery, variables: { documentTypeId: documentTypeId! } }], + const { data, loading, error } = useQuery(DocumentTypeFieldsParentQuery, { + variables: { + searchText: "", + parentId: 0, + }, }); - // async function addElement({ parentId, level }: { parentId: number; level: number }) { - // try { - // const { data } = await apolloClient.query({ - // query: DocumentTypeFieldsParentQuery, - // variables: { searchText: "", parentId: parentId }, - // }); - // setAllDocTypes((prevAllDocTypes) => [ - // ...prevAllDocTypes, - // { - // idParent: parentId, - // queryData: data, - // level: level, - // }, - // ]); - // } catch (error) { - // console.error("Errore nella query:", error); - // } - // } - - // const allLevels: ( - // | { - // __typename?: "DocTypeField" | undefined; - // id?: string | null | undefined; - // name?: string | null | undefined; - // fieldName?: string | null | undefined; - // searchable: boolean; - // exclude?: boolean | null | undefined; - // sortable: boolean; - // parent?: - // | { __typename?: "DocTypeField" | undefined; id?: string | null | undefined; fieldName?: string | null | undefined } - // | null - // | undefined; - // } - // | null - // | undefined - // )[][] = []; - // const firstLevel: ( - // | { - // __typename?: "DocTypeField" | undefined; - // id?: string | null | undefined; - // name?: string | null | undefined; - // fieldName?: string | null | undefined; - // searchable: boolean; - // exclude?: boolean | null | undefined; - // sortable: boolean; - // parent?: - // | { __typename?: "DocTypeField" | undefined; id?: string | null | undefined; fieldName?: string | null | undefined } - // | null - // | undefined; - // } - // | null - // | undefined - // )[] = []; - // documentTypeFieldsParentsQuery.data?.docTypeFieldsByParent?.edges?.forEach((element) => { - // // console.log(element?.node) - // firstLevel.push(element?.node); - // }); - // allLevels.push(firstLevel); - - async function addRemoveLevel({ parentId }: { parentId: number }) { - try { - const { data } = await apolloClient.query({ - query: DocumentTypeFieldsParentQuery, - variables: { searchText: "", parentId: parentId }, - }); - - const queryResult = data?.docTypeFieldsByParent?.edges; - const allDocTypesLength = allDocTypes.length; - for (let index = allDocTypesLength - 1; index >= 0; index--) { - const parent = allDocTypes[index]; - const queryResultLength = queryResult.length; - if (queryResultLength === 0) { - allDocTypes.splice(index + 1, 1); - } - for (let i = 0; i < queryResultLength; i++) { - const son = queryResult[i].node; - if ( - parent.queryData.data?.docTypeFieldsByParent?.edges?.find((document) => document?.node?.id === son.parent.id) || - !parent.queryData.data - ) { - allDocTypes.splice(index + 1, 1); - } - } - } - const elementToAdd = { - idParent: parentId, - queryData: data, - }; - if (elementToAdd.queryData?.docTypeFieldsByParent?.edges.length > 0) { - // allDocTypes.push(elementToAdd); - // setAllDocTypes(allDocTypes); - setAllDocTypes((prevArray) => [...prevArray, elementToAdd]); - } - - console.log("allDocTypes", allDocTypes); - } catch (error) { - console.error("Errore nella query:", error); - } + if (loading) { + return
Loading...
; } - if (!documentTypeId) throw new Error(); - function CreateDocType({ - documentType, - }: { - documentType: { - idParent: number; - queryData: QueryResult< - DocTypeFieldsByParentQuery, - Exact<{ - searchText?: InputMaybe | undefined; - parentId: any; - }> - >; - } | null; - }): JSX.Element { - const sameData = documentType?.queryData.data?.docTypeFieldsByParent?.edges; - return ( -
{sameData?.map((sinlgeData) =>
{ - addRemoveLevel({ parentId: Number(sinlgeData?.node?.id || 0) }); - }}>{sinlgeData?.node?.name}
)}
- // {sameData?.map((sinlgeData) => { - // return( - // - // - // {formatName({ id: sinlgeData?.node?.id, name: sinlgeData?.node?.name })} - // - // - // - // - // - // - - // - // - // - // } - // > - // - // - //
- //
- // - //
- //
- // { - // const documentTypeElement = sinlgeData?.node; - // if (documentTypeElement && documentTypeElement.id && documentTypeElement.name && documentTypeElement.parent) { - // } - // }} - // /> - //
- //
- // - // - // - //
- //
- // - //
- //
- // { - // const documentTypeElement = sinlgeData?.node; - // if (documentTypeElement && documentTypeElement.id && documentTypeElement.name && documentTypeElement.parent) { - // } - // }} - // /> - //
- //
- // - // - // - //
- //
- // - //
- //
- // { - // const documentTypeElement = sinlgeData?.node; - // if (documentTypeElement && documentTypeElement.id && documentTypeElement.name && documentTypeElement.parent) { - // } - // }} - // /> - //
- //
- // - // - // - // { - // addRemoveLevel({ parentId: Number(sinlgeData?.node?.id || 0) }); - // }} - // symbol="angle-right" - // /> - // - // - // - // ) - // })} - // - ); + if (error) { + return
Error: {error.message}
; } + const handleDocumentClick = (documentId: string) => { + setSelectedDocumentId(documentId); + }; + return ( - - {allDocTypes.map((docType, index) => { - console.log(docType) - return ( -
- - {index} - - - - -
- ); - })} - +
+ +
+ + {data.docTypeFieldsByParent.edges.map(({ node }: { node: { id: string; name: string } }) => ( + handleDocumentClick(node.id)} + style={{ cursor: "pointer" }} + className={node.id === selectedDocumentId ? "selected" : ""} + > + {node.name} - ID: {node.id} + + ))} + + {selectedDocumentId && } +
+ +
); } -type DocTypesType = { - idParent: number; - element: React.ReactNode; -}; +interface ChildListComponentProps { + documentId: string; +} -type DocTypesQueryType = { - idParent: number; - queryData: QueryResult< - DocTypeFieldsByParentQuery, - Exact<{ - searchText?: InputMaybe | undefined; - parentId: any; - }> - >; -}; +const ChildListComponent: React.FC = ({ documentId }) => { + const { data, loading, error } = useQuery(DocumentTypeFieldsParentQuery, { + variables: { + searchText: "", + parentId: Number(documentId), + }, + }); + + const [selectedChildDocumentId, setSelectedChildDocumentId] = React.useState(null); + + React.useEffect(() => { + setSelectedChildDocumentId(null); + }, [documentId]); -// function removeElementsByLevels(elements: DocTypesType[], levelSelect: number): DocTypesType[] { -// return elements.filter((elementInfo) => elementInfo.level <= levelSelect); -// } + if (loading) { + return
Loading...
; + } + + if (error) { + return
Error: {error.message}
; + } + + const childDocuments = data.docTypeFieldsByParent.edges; -// function findLevel({ docTypes, addedId }: { docTypes: Array; addedId: number }): number { -// const docElement = docTypes.find((document) => document.idParent === addedId); -// let nextLevel = 0; -// if (docElement?.level === undefined) nextLevel = docTypes.reduce((max, doc) => (doc.level > max ? doc.level : max), 0); -// return docElement?.level || nextLevel; -// } + const handleChildClick = (childId: string) => { + setSelectedChildDocumentId(childId); + }; + + return ( +
+
+ + {childDocuments.map(({ node }: { node: { id: string; name: string } }) => ( + handleChildClick(node.id)} + style={{ cursor: "pointer" }} + className={node.id === selectedChildDocumentId ? "selected" : ""} + > + {node.name} - ID: {node.id} + + ))} + + {selectedChildDocumentId && } +
+
+ ); +}; From 6cc7d415408059ac62c09e515e75c8325c2e81fe Mon Sep 17 00:00:00 2001 From: lorenzo venneri Date: Sun, 24 Sep 2023 14:37:42 +0200 Subject: [PATCH 08/22] Issue #569: fix link name and icon --- .../src/components/DocumentTypeFields.tsx | 171 ++++++++++++++++-- 1 file changed, 158 insertions(+), 13 deletions(-) diff --git a/js-packages/admin-ui/src/components/DocumentTypeFields.tsx b/js-packages/admin-ui/src/components/DocumentTypeFields.tsx index 4faa5ce07..4cb042bcb 100644 --- a/js-packages/admin-ui/src/components/DocumentTypeFields.tsx +++ b/js-packages/admin-ui/src/components/DocumentTypeFields.tsx @@ -62,7 +62,9 @@ export function DocumentTypeFields() { parentId: 0, }, }); - + const [updateDoctype] = useCreateOrUpdateDocumentTypeFieldMutation({ + refetchQueries: [DocumentTypeFieldsQuery, DocumentTypeFieldsParentQuery], + }); if (loading) { return
Loading...
; } @@ -80,16 +82,145 @@ export function DocumentTypeFields() {
- {data.docTypeFieldsByParent.edges.map(({ node }: { node: { id: string; name: string } }) => ( - handleDocumentClick(node.id)} - style={{ cursor: "pointer" }} - className={node.id === selectedDocumentId ? "selected" : ""} - > - {node.name} - ID: {node.id} - - ))} + {data.docTypeFieldsByParent.edges.map( + ({ + node, + }: { + node: { id: string; name: string; fieldName: string; searchable: boolean; exclude: boolean; sortable: boolean }; + }) => ( + +
+ {node?.id && ( + + {node.name} + + )} +
+
+ +
+
+ + + + } + > + + +
+
+ +
+
+ { + // if (node && node.id && node.name && node.exclude && node.fieldName && node.name) + // updateDoctype({ + // variables: { + // documentTypeId:node.id, + // name:node.name, + // fieldName:node.fieldName, + // searchable:node.searchable, + // sortable:node.sortable, + // }, + // }); + }} + /> +
+
+ + + +
+
+ +
+
+ { + // if (dataSource && dataSource.id && dataSource.name && dataSource.scheduling) + // updateDataSourceMutate({ + // variables: { + // id: dataSource.id, + // schedulable, + // name: dataSource.name, + // scheduling: dataSource.scheduling, + // jsonConfig: dataSource.jsonConfig ?? "{}", + // description: dataSource.description ?? "", + // reindex: dataSource.reindex || false, + // }, + // }); + }} + /> +
+
+ + + + {" "} +
+
+ +
+
+ { + // if (dataSource && dataSource.id && dataSource.name && dataSource.scheduling) + // updateDataSourceMutate({ + // variables: { + // id: dataSource.id, + // schedulable, + // name: dataSource.name, + // scheduling: dataSource.scheduling, + // jsonConfig: dataSource.jsonConfig ?? "{}", + // description: dataSource.description ?? "", + // reindex: dataSource.reindex || false, + // }, + // }); + }} + /> +
+
+ + + +
+
+ +
+
+
+ + ) + )} {selectedDocumentId && }
@@ -138,10 +269,24 @@ const ChildListComponent: React.FC = ({ documentId }) = handleChildClick(node.id)} - style={{ cursor: "pointer" }} + style={{ cursor: "pointer", padding: "8px 8px" }} className={node.id === selectedChildDocumentId ? "selected" : ""} > - {node.name} - ID: {node.id} + {node?.id && ( + + {node.name} + + )} ))} From 91427ae40de05c65ac2b203b53cdbf2624d23e60 Mon Sep 17 00:00:00 2001 From: lucac Date: Mon, 25 Sep 2023 10:34:30 +0200 Subject: [PATCH 09/22] view child from parent --- .../src/components/DocumentTypeFields.tsx | 37 +++++++++++-------- 1 file changed, 22 insertions(+), 15 deletions(-) diff --git a/js-packages/admin-ui/src/components/DocumentTypeFields.tsx b/js-packages/admin-ui/src/components/DocumentTypeFields.tsx index 4cb042bcb..5984c42af 100644 --- a/js-packages/admin-ui/src/components/DocumentTypeFields.tsx +++ b/js-packages/admin-ui/src/components/DocumentTypeFields.tsx @@ -272,21 +272,28 @@ const ChildListComponent: React.FC = ({ documentId }) = style={{ cursor: "pointer", padding: "8px 8px" }} className={node.id === selectedChildDocumentId ? "selected" : ""} > - {node?.id && ( - - {node.name} - - )} +
+ {node?.id && ( + + {node.name} + + )} +
+ +
+
))} From d1d5bddfeb6c81b72f02f4941e15aea12e52af9f Mon Sep 17 00:00:00 2001 From: lucac Date: Mon, 25 Sep 2023 15:09:12 +0200 Subject: [PATCH 10/22] add doc types field --- .../src/components/DocumentTypeFields.tsx | 252 ++++++++++++++---- 1 file changed, 200 insertions(+), 52 deletions(-) diff --git a/js-packages/admin-ui/src/components/DocumentTypeFields.tsx b/js-packages/admin-ui/src/components/DocumentTypeFields.tsx index 5984c42af..9454d220b 100644 --- a/js-packages/admin-ui/src/components/DocumentTypeFields.tsx +++ b/js-packages/admin-ui/src/components/DocumentTypeFields.tsx @@ -37,9 +37,13 @@ export const DocumentTypeFieldsParentQuery = gql` node { id name - fieldName + description + fieldType + boost searchable exclude + fieldName + jsonConfig sortable parent { id @@ -86,7 +90,18 @@ export function DocumentTypeFields() { ({ node, }: { - node: { id: string; name: string; fieldName: string; searchable: boolean; exclude: boolean; sortable: boolean }; + node: { + id: string; + name: string; + description: string; + fieldType: FieldType.Text; + boost: number; + searchable: boolean; + exclude: boolean; + fieldName: string; + jsonConfig: string; + sortable: boolean; + }; }) => (
@@ -107,14 +122,15 @@ export function DocumentTypeFields() { )}
- + + +
{ - // if (node && node.id && node.name && node.exclude && node.fieldName && node.name) - // updateDoctype({ - // variables: { - // documentTypeId:node.id, - // name:node.name, - // fieldName:node.fieldName, - // searchable:node.searchable, - // sortable:node.sortable, - // }, - // }); + console.log(searchable); + console.log(node); + // if (node && node.id && node.name && node.fieldName && node.fieldType) + // updateDoctype({ + // variables: { + // documentTypeId: node.id, + // documentTypeFieldId: node.id, + // name: node.name, + // description: node.description, + // fieldType: node.fieldType, + // boost: node.boost, + // searchable: searchable, + // exclude: node.exclude, + // fieldName: node.fieldName, + // jsonConfig: node.jsonConfig, + // sortable: node.sortable, + // }, + // }); }} />
@@ -162,7 +186,7 @@ export function DocumentTypeFields() {
{ + onToggle={(exclude) => { // if (dataSource && dataSource.id && dataSource.name && dataSource.scheduling) // updateDataSourceMutate({ // variables: { @@ -190,7 +214,7 @@ export function DocumentTypeFields() {
{ + onToggle={(sortable) => { // if (dataSource && dataSource.id && dataSource.name && dataSource.scheduling) // updateDataSourceMutate({ // variables: { @@ -265,37 +289,161 @@ const ChildListComponent: React.FC = ({ documentId }) =
- {childDocuments.map(({ node }: { node: { id: string; name: string } }) => ( - handleChildClick(node.id)} - style={{ cursor: "pointer", padding: "8px 8px" }} - className={node.id === selectedChildDocumentId ? "selected" : ""} - > -
- {node?.id && ( - - {node.name} - - )} -
- + {childDocuments.map( + ({ + node, + }: { + node: { + id: string; + name: string; + description: string; + fieldType: FieldType.Text; + boost: number; + searchable: boolean; + exclude: boolean; + fieldName: string; + jsonConfig: string; + sortable: boolean; + }; + }) => ( + +
+ {node?.id && ( + + {node.name} + + )} +
+
+ + + +
+
+ + + + } + > + + +
+
+ +
+
+ { + // if (node && node.id && node.name && node.exclude && node.fieldName && node.name) + // updateDoctype({ + // variables: { + // documentTypeId:node.id, + // name:node.name, + // fieldName:node.fieldName, + // searchable:node.searchable, + // sortable:node.sortable, + // }, + // }); + }} + /> +
+
+ + + +
+
+ +
+
+ { + // if (dataSource && dataSource.id && dataSource.name && dataSource.scheduling) + // updateDataSourceMutate({ + // variables: { + // id: dataSource.id, + // schedulable, + // name: dataSource.name, + // scheduling: dataSource.scheduling, + // jsonConfig: dataSource.jsonConfig ?? "{}", + // description: dataSource.description ?? "", + // reindex: dataSource.reindex || false, + // }, + // }); + }} + /> +
+
+ + + + {" "} +
+
+ +
+
+ { + // if (dataSource && dataSource.id && dataSource.name && dataSource.scheduling) + // updateDataSourceMutate({ + // variables: { + // id: dataSource.id, + // schedulable, + // name: dataSource.name, + // scheduling: dataSource.scheduling, + // jsonConfig: dataSource.jsonConfig ?? "{}", + // description: dataSource.description ?? "", + // reindex: dataSource.reindex || false, + // }, + // }); + }} + /> +
+
+ + + +
+
+ +
+
-
- - ))} + + ) + )} {selectedChildDocumentId && }
From 008bd7ab8a4c61f422d5f18b04cc22159342eff3 Mon Sep 17 00:00:00 2001 From: lorenzo venneri Date: Mon, 25 Sep 2023 17:56:32 +0200 Subject: [PATCH 11/22] Issue #569: add search doc type sub field --- js-packages/admin-ui/src/App.tsx | 9 + .../src/components/DocTypeFieldsSearch.tsx | 52 ++++ .../src/components/DocumentTypeField.tsx | 1 + .../src/components/DocumentTypeFields.tsx | 238 +++++++++++------- 4 files changed, 213 insertions(+), 87 deletions(-) create mode 100644 js-packages/admin-ui/src/components/DocTypeFieldsSearch.tsx diff --git a/js-packages/admin-ui/src/App.tsx b/js-packages/admin-ui/src/App.tsx index 7626eba19..a0b25db6c 100644 --- 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() { } /> + } + /> + } + /> } /> } /> diff --git a/js-packages/admin-ui/src/components/DocTypeFieldsSearch.tsx b/js-packages/admin-ui/src/components/DocTypeFieldsSearch.tsx new file mode 100644 index 000000000..73218bb0a --- /dev/null +++ b/js-packages/admin-ui/src/components/DocTypeFieldsSearch.tsx @@ -0,0 +1,52 @@ +import ClayToolbar from "@clayui/toolbar"; +import { ContainerFluidWithoutView } from "./Form"; +import { ClayButtonWithIcon } from "@clayui/button"; +import React from "react"; +import { useParams } from "react-router-dom"; +import useDebounced from "./useDebounced"; +import { useDocumentTypeFieldsQuery } from "../graphql-generated"; + +export function DocTypeFieldsSearch() { + const { documentTypeId = "new", searchText = "" } = useParams(); + const [searchTextDoc, setSearchTextDoc] = React.useState(searchText); + const searchTextDebounced = useDebounced(searchTextDoc); + const documentTypeFieldsQuery = useDocumentTypeFieldsQuery({ + variables: { documentTypeId: documentTypeId, searchText: searchTextDebounced }, + }); + + React.useEffect(() => { + documentTypeFieldsQuery.refetch({ documentTypeId, searchText: searchTextDebounced }); + }, [searchTextDebounced]); + + return ( + + + + +
+ { + setSearchTextDoc(event.currentTarget.value); + }} + /> + {searchText !== "" && ( + { + setSearchTextDoc(""); + }} + style={{ position: "absolute", right: "10px", top: "0px" }} + /> + )} +
+ + + + + ); +} diff --git a/js-packages/admin-ui/src/components/DocumentTypeField.tsx b/js-packages/admin-ui/src/components/DocumentTypeField.tsx index fbbf5d85c..feb4550f0 100644 --- a/js-packages/admin-ui/src/components/DocumentTypeField.tsx +++ b/js-packages/admin-ui/src/components/DocumentTypeField.tsx @@ -133,6 +133,7 @@ export function DocumentTypeField() { }, getValidationMessages: fromFieldValidators(createOrUpdateDocumentTypeFieldMutation.data?.docTypeField?.fieldValidators), }); + return ( diff --git a/js-packages/admin-ui/src/components/DocumentTypeFields.tsx b/js-packages/admin-ui/src/components/DocumentTypeFields.tsx index 9454d220b..b0eeb3f67 100644 --- a/js-packages/admin-ui/src/components/DocumentTypeFields.tsx +++ b/js-packages/admin-ui/src/components/DocumentTypeFields.tsx @@ -14,13 +14,17 @@ import { formatName, TableWithSubFields } from "./Table"; import { Link, useParams } from "react-router-dom"; import { DocumentTypeFieldsQuery } from "./SubFieldsDocumentType"; import { ClayToggle } from "@clayui/form"; -import { ContainerFluid, StyleToggle } from "./Form"; +import { ContainerFluid, ContainerFluidWithoutView, StyleToggle } from "./Form"; import { ClayTooltipProvider } from "@clayui/tooltip"; import { CategoricalChartFunc } from "recharts/types/chart/generateCategoricalChart"; import ClayIcon from "@clayui/icon"; import ClayList from "@clayui/list"; import DropDown from "@clayui/drop-down"; import { apolloClient } from "./apolloClient"; +import ClayToolbar from "@clayui/toolbar"; +import { ClayButtonWithIcon } from "@clayui/button"; +import { ClassNameButton } from "../App"; +import useDebounced from "./useDebounced"; gql` mutation DeleteDocumentTypeField($documentTypeId: ID!, $documentTypeFieldId: ID!) { @@ -59,10 +63,12 @@ export function DocumentTypeFields() { const { documentTypeId } = useParams(); const [selectedDocumentId, setSelectedDocumentId] = React.useState(null); + const [searchText, setSearchText] = React.useState(""); const { data, loading, error } = useQuery(DocumentTypeFieldsParentQuery, { variables: { searchText: "", + // parentId: Number(documentTypeId || "0"), parentId: 0, }, }); @@ -83,9 +89,44 @@ export function DocumentTypeFields() { return (
+ + + + +
+ { + setSearchText(event.currentTarget.value); + }} + /> + {searchText !== "" && ( + { + setSearchText(""); + }} + style={{ position: "absolute", right: "10px", top: "0px" }} + /> + )} +
+ + + + + + + + + + -
- +
+ {data.docTypeFieldsByParent.edges.map( ({ node, @@ -154,24 +195,22 @@ export function DocumentTypeFields() { { - console.log(searchable); - console.log(node); - // if (node && node.id && node.name && node.fieldName && node.fieldType) - // updateDoctype({ - // variables: { - // documentTypeId: node.id, - // documentTypeFieldId: node.id, - // name: node.name, - // description: node.description, - // fieldType: node.fieldType, - // boost: node.boost, - // searchable: searchable, - // exclude: node.exclude, - // fieldName: node.fieldName, - // jsonConfig: node.jsonConfig, - // sortable: node.sortable, - // }, - // }); + if (node && node.id && node.name && node.fieldName && node.fieldType && documentTypeId) + updateDoctype({ + variables: { + documentTypeId: documentTypeId, + documentTypeFieldId: node.id, + name: node.name, + description: node.description, + fieldType: node.fieldType, + boost: node.boost, + searchable: searchable, + exclude: node.exclude, + fieldName: node.fieldName, + jsonConfig: node.jsonConfig, + sortable: node.sortable, + }, + }); }} />
@@ -187,18 +226,22 @@ export function DocumentTypeFields() { { - // if (dataSource && dataSource.id && dataSource.name && dataSource.scheduling) - // updateDataSourceMutate({ - // variables: { - // id: dataSource.id, - // schedulable, - // name: dataSource.name, - // scheduling: dataSource.scheduling, - // jsonConfig: dataSource.jsonConfig ?? "{}", - // description: dataSource.description ?? "", - // reindex: dataSource.reindex || false, - // }, - // }); + if (node && node.id && node.name && node.fieldName && node.fieldType && documentTypeId) + updateDoctype({ + variables: { + documentTypeId: documentTypeId, + documentTypeFieldId: node.id, + name: node.name, + description: node.description, + fieldType: node.fieldType, + boost: node.boost, + searchable: node.searchable, + exclude: exclude, + fieldName: node.fieldName, + jsonConfig: node.jsonConfig, + sortable: node.sortable, + }, + }); }} />
@@ -206,7 +249,6 @@ export function DocumentTypeFields() { - {" "}
@@ -215,18 +257,22 @@ export function DocumentTypeFields() { { - // if (dataSource && dataSource.id && dataSource.name && dataSource.scheduling) - // updateDataSourceMutate({ - // variables: { - // id: dataSource.id, - // schedulable, - // name: dataSource.name, - // scheduling: dataSource.scheduling, - // jsonConfig: dataSource.jsonConfig ?? "{}", - // description: dataSource.description ?? "", - // reindex: dataSource.reindex || false, - // }, - // }); + if (node && node.id && node.name && node.fieldName && node.fieldType && documentTypeId) + updateDoctype({ + variables: { + documentTypeId: documentTypeId, + documentTypeFieldId: node.id, + name: node.name, + description: node.description, + fieldType: node.fieldType, + boost: node.boost, + searchable: node.searchable, + exclude: node.exclude, + fieldName: node.fieldName, + jsonConfig: node.jsonConfig, + sortable: sortable, + }, + }); }} />
@@ -246,7 +292,7 @@ export function DocumentTypeFields() { ) )} - {selectedDocumentId && } + {selectedDocumentId && }
@@ -255,9 +301,10 @@ export function DocumentTypeFields() { interface ChildListComponentProps { documentId: string; + documentTypeId: string | undefined; } -const ChildListComponent: React.FC = ({ documentId }) => { +const ChildListComponent: React.FC = ({ documentId, documentTypeId }) => { const { data, loading, error } = useQuery(DocumentTypeFieldsParentQuery, { variables: { searchText: "", @@ -265,6 +312,10 @@ const ChildListComponent: React.FC = ({ documentId }) = }, }); + const [updateDoctype] = useCreateOrUpdateDocumentTypeFieldMutation({ + refetchQueries: [DocumentTypeFieldsQuery, DocumentTypeFieldsParentQuery], + }); + const [selectedChildDocumentId, setSelectedChildDocumentId] = React.useState(null); React.useEffect(() => { @@ -288,7 +339,7 @@ const ChildListComponent: React.FC = ({ documentId }) = return (
- + {childDocuments.map( ({ node, @@ -361,16 +412,22 @@ const ChildListComponent: React.FC = ({ documentId }) = { - // if (node && node.id && node.name && node.exclude && node.fieldName && node.name) - // updateDoctype({ - // variables: { - // documentTypeId:node.id, - // name:node.name, - // fieldName:node.fieldName, - // searchable:node.searchable, - // sortable:node.sortable, - // }, - // }); + if (node && node.id && node.name && node.fieldName && node.fieldType && documentTypeId) + updateDoctype({ + variables: { + documentTypeId: documentTypeId, + documentTypeFieldId: node.id, + name: node.name, + description: node.description, + fieldType: node.fieldType, + boost: node.boost, + searchable: searchable, + exclude: node.exclude, + fieldName: node.fieldName, + jsonConfig: node.jsonConfig, + sortable: node.sortable, + }, + }); }} />
@@ -385,19 +442,23 @@ const ChildListComponent: React.FC = ({ documentId }) =
{ - // if (dataSource && dataSource.id && dataSource.name && dataSource.scheduling) - // updateDataSourceMutate({ - // variables: { - // id: dataSource.id, - // schedulable, - // name: dataSource.name, - // scheduling: dataSource.scheduling, - // jsonConfig: dataSource.jsonConfig ?? "{}", - // description: dataSource.description ?? "", - // reindex: dataSource.reindex || false, - // }, - // }); + onToggle={(exclude) => { + if (node && node.id && node.name && node.fieldName && node.fieldType && documentTypeId) + updateDoctype({ + variables: { + documentTypeId: documentTypeId, + documentTypeFieldId: node.id, + name: node.name, + description: node.description, + fieldType: node.fieldType, + boost: node.boost, + searchable: node.searchable, + exclude: exclude, + fieldName: node.fieldName, + jsonConfig: node.jsonConfig, + sortable: node.sortable, + }, + }); }} />
@@ -405,7 +466,6 @@ const ChildListComponent: React.FC = ({ documentId }) = - {" "}
@@ -413,19 +473,23 @@ const ChildListComponent: React.FC = ({ documentId }) =
{ - // if (dataSource && dataSource.id && dataSource.name && dataSource.scheduling) - // updateDataSourceMutate({ - // variables: { - // id: dataSource.id, - // schedulable, - // name: dataSource.name, - // scheduling: dataSource.scheduling, - // jsonConfig: dataSource.jsonConfig ?? "{}", - // description: dataSource.description ?? "", - // reindex: dataSource.reindex || false, - // }, - // }); + onToggle={(sortable) => { + if (node && node.id && node.name && node.fieldName && node.fieldType && documentTypeId) + updateDoctype({ + variables: { + documentTypeId: documentTypeId, + documentTypeFieldId: node.id, + name: node.name, + description: node.description, + fieldType: node.fieldType, + boost: node.boost, + searchable: node.searchable, + exclude: node.exclude, + fieldName: node.fieldName, + jsonConfig: node.jsonConfig, + sortable: sortable, + }, + }); }} />
@@ -445,7 +509,7 @@ const ChildListComponent: React.FC = ({ documentId }) = ) )} - {selectedChildDocumentId && } + {selectedChildDocumentId && }
); From 0ebabc03832a793ae6a4b0d56acce0b6dd94be45 Mon Sep 17 00:00:00 2001 From: lucac Date: Thu, 28 Sep 2023 10:07:39 +0200 Subject: [PATCH 12/22] Issue #569: add search result table --- .../src/components/DocTypeFieldsSearch.tsx | 124 ++++++++++++++---- 1 file changed, 95 insertions(+), 29 deletions(-) diff --git a/js-packages/admin-ui/src/components/DocTypeFieldsSearch.tsx b/js-packages/admin-ui/src/components/DocTypeFieldsSearch.tsx index 73218bb0a..4dc445c4d 100644 --- a/js-packages/admin-ui/src/components/DocTypeFieldsSearch.tsx +++ b/js-packages/admin-ui/src/components/DocTypeFieldsSearch.tsx @@ -1,10 +1,12 @@ import ClayToolbar from "@clayui/toolbar"; -import { ContainerFluidWithoutView } from "./Form"; +import { ContainerFluidWithoutView, EmptySpace } from "./Form"; import { ClayButtonWithIcon } from "@clayui/button"; +import ClayTable from "@clayui/table"; import React from "react"; -import { useParams } from "react-router-dom"; +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 = "new", searchText = "" } = useParams(); @@ -19,34 +21,98 @@ export function DocTypeFieldsSearch() { }, [searchTextDebounced]); return ( - - - - -
- { - setSearchTextDoc(event.currentTarget.value); - }} - /> - {searchText !== "" && ( - { - setSearchTextDoc(""); +
+ + + + +
+ { + setSearchTextDoc(event.currentTarget.value); }} - style={{ position: "absolute", right: "10px", top: "0px" }} /> - )} -
- - - - + {searchText !== "" && ( + { + setSearchTextDoc(""); + }} + style={{ position: "absolute", right: "10px", top: "0px" }} + /> + )} +
+ + + + + ( + + ), + EmptyPlaceholder: () => ( + + + + + + ), + }} + fixedHeaderContent={() => ( + + + Name + + + Description + + + )} + itemContent={(index) => { + const row = documentTypeFieldsQuery.data?.docTypeFieldsFromDocType?.edges?.[index]?.node ?? undefined; + return ( + + + {row?.id && ( + + {row.name} + + )} + + {row?.description} + + ); + }} + /> + ); } From cc134e5063f9243c47fdb9fcf1022c3f6c3427b9 Mon Sep 17 00:00:00 2001 From: lucac Date: Fri, 29 Sep 2023 12:41:36 +0200 Subject: [PATCH 13/22] Issue #569: add ContainerFluid --- .../src/components/DocTypeFieldsSearch.tsx | 122 +++++++++--------- 1 file changed, 60 insertions(+), 62 deletions(-) diff --git a/js-packages/admin-ui/src/components/DocTypeFieldsSearch.tsx b/js-packages/admin-ui/src/components/DocTypeFieldsSearch.tsx index 4dc445c4d..28b392fa7 100644 --- a/js-packages/admin-ui/src/components/DocTypeFieldsSearch.tsx +++ b/js-packages/admin-ui/src/components/DocTypeFieldsSearch.tsx @@ -1,5 +1,5 @@ import ClayToolbar from "@clayui/toolbar"; -import { ContainerFluidWithoutView, EmptySpace } from "./Form"; +import { ContainerFluid, ContainerFluidWithoutView, EmptySpace } from "./Form"; import { ClayButtonWithIcon } from "@clayui/button"; import ClayTable from "@clayui/table"; import React from "react"; @@ -51,68 +51,66 @@ export function DocTypeFieldsSearch() { - ( -
+ +
- ), - EmptyPlaceholder: () => ( - - - - - - ), - }} - fixedHeaderContent={() => ( - - - Name - - - Description - - - )} - itemContent={(index) => { - const row = documentTypeFieldsQuery.data?.docTypeFieldsFromDocType?.edges?.[index]?.node ?? undefined; - return ( - - - {row?.id && ( - - {row.name} - - )} + + ( +
- -
+ ), + EmptyPlaceholder: () => ( + + + + + + ), + }} + fixedHeaderContent={() => ( + + + Name + + + Description - {row?.description} - - ); - }} - /> + + )} + itemContent={(index) => { + const row = documentTypeFieldsQuery.data?.docTypeFieldsFromDocType?.edges?.[index]?.node ?? undefined; + return ( + + + {row?.id && ( + + {row.name} + + )} + + {row?.description} + + ); + }} + /> + ); } From 4eeaf37a3c3b30b7e89a212b4fb12796fb1d5822 Mon Sep 17 00:00:00 2001 From: lucac Date: Fri, 29 Sep 2023 12:43:06 +0200 Subject: [PATCH 14/22] Issue #569: add active class on list items --- .../src/components/DocumentTypeFields.tsx | 38 ++++++++++++++++--- 1 file changed, 33 insertions(+), 5 deletions(-) diff --git a/js-packages/admin-ui/src/components/DocumentTypeFields.tsx b/js-packages/admin-ui/src/components/DocumentTypeFields.tsx index b0eeb3f67..5e3f72f20 100644 --- a/js-packages/admin-ui/src/components/DocumentTypeFields.tsx +++ b/js-packages/admin-ui/src/components/DocumentTypeFields.tsx @@ -117,7 +117,7 @@ export function DocumentTypeFields() { - + @@ -126,7 +126,7 @@ export function DocumentTypeFields() {
- + {data.docTypeFieldsByParent.edges.map( ({ node, @@ -144,7 +144,23 @@ export function DocumentTypeFields() { sortable: boolean; }; }) => ( - + { + const currentTarget = event.currentTarget as any; + if (!currentTarget.classList.contains('active')) { + currentTarget.classList.add('active'); + } + }} + onMouseOut={(event) => { + const currentTarget = event.currentTarget as any; + if (currentTarget.classList.contains('active') && !currentTarget.classList.contains('selected')) { + currentTarget.classList.remove('active'); + } + }} + >
{node?.id && ( = ({ documentId, doc return (
- + {childDocuments.map( ({ node, @@ -360,7 +376,19 @@ const ChildListComponent: React.FC = ({ documentId, doc { + const currentTarget = event.currentTarget as any; + if (!currentTarget.classList.contains('active')) { + currentTarget.classList.add('active'); + } + }} + onMouseOut={(event) => { + const currentTarget = event.currentTarget as any; + if (currentTarget.classList.contains('active') && !currentTarget.classList.contains('selected')) { + currentTarget.classList.remove('active'); + } + }} >
{node?.id && ( From 90849086d9d41873e5cae5051731ddc6622f282b Mon Sep 17 00:00:00 2001 From: "N.Alivernini" Date: Fri, 29 Sep 2023 17:47:10 +0200 Subject: [PATCH 15/22] fix call + class css tabs --- .../components/DateRangePickerVertical.tsx | 73 ++++++++++--------- .../search-frontend/src/embeddable/Main.tsx | 1 + 2 files changed, 41 insertions(+), 33 deletions(-) diff --git a/js-packages/search-frontend/src/components/DateRangePickerVertical.tsx b/js-packages/search-frontend/src/components/DateRangePickerVertical.tsx index 76f3c6b31..5adb8c4bf 100644 --- a/js-packages/search-frontend/src/components/DateRangePickerVertical.tsx +++ b/js-packages/search-frontend/src/components/DateRangePickerVertical.tsx @@ -16,17 +16,21 @@ export function DataRangePickerVertical({ language, start, end, + classTab, }: { onChange(value: SearchDateRange): void; calendarDate: SearchDateRange; language: string; start?: any; end?: any; + classTab?: string; }) { const [startDate, setStartDate] = React.useState(null); const [focusedStartInput, setFocusedStartInput] = React.useState(false); const [endDate, setEndDate] = React.useState(null); const [focusedEndInput, setFocusedEndInput] = React.useState(false); + const [manageAccessibilityStart, setManageAccessibilityStart] = React.useState(false); + const [manageAccessibilityEnd, setManageAccessibilityEnd] = React.useState(false); React.useEffect(() => { onChange({ @@ -34,7 +38,7 @@ export function DataRangePickerVertical({ endDate: endDate?._d || undefined, keywordKey: undefined, }); - }, [endDate]); + }, [endDate, startDate]); const { t } = useTranslation(); const languageCalendar = mappingNameLanguage(language); @@ -42,7 +46,7 @@ export function DataRangePickerVertical({ return (
Dal ({t("gg/mm/aaaa")}):

- setStartDate(startDate)} - focused={focusedStartInput} - onFocusChange={(focus) => setFocusedStartInput(focus.focused)} - hideKeyboardShortcutsPanel - id="startDate" - showClearDate - showDefaultInputIcon - inputIconPosition="after" - isOutsideRange={() => false} - placeholder={t("start-day") || "Start day"} - openDirection="up" - /> +
setManageAccessibilityStart(!manageAccessibilityStart)} onKeyDown={(e) => e.key === 'Tab' ? setManageAccessibilityStart(false) : null}> + setStartDate(startDate)} + focused={manageAccessibilityStart ? focusedStartInput : false} + onFocusChange={(focus) => setFocusedStartInput(focus.focused)} + hideKeyboardShortcutsPanel + id="startDate" + showClearDate + showDefaultInputIcon + inputIconPosition="after" + isOutsideRange={() => false} + placeholder={t("start-day") || "Start day"} + openDirection="up" + /> +

Al ({t("gg/mm/aaaa")}):

- setEndDate(endDate)} - focused={focusedEndInput} - onFocusChange={(focus) => setFocusedEndInput(focus.focused)} - hideKeyboardShortcutsPanel - id="endDate" - showClearDate - showDefaultInputIcon - inputIconPosition="after" - disabled={startDate || endDate !== null ? false : true} - isOutsideRange={() => false} - placeholder={t("end-day") || "End day"} - openDirection="up" - /> +
setManageAccessibilityEnd(!manageAccessibilityEnd)} onKeyDown={(e) => e.key === 'Tab' ? setManageAccessibilityEnd(false) : null}> + setEndDate(endDate)} + focused={manageAccessibilityEnd ? focusedEndInput : false} + onFocusChange={(focus) => setFocusedEndInput(focus.focused)} + hideKeyboardShortcutsPanel + id="endDate" + showClearDate + showDefaultInputIcon + inputIconPosition="after" + isOutsideRange={() => false} + placeholder={t("end-day") || "End day"} + openDirection="up" + /> +
); diff --git a/js-packages/search-frontend/src/embeddable/Main.tsx b/js-packages/search-frontend/src/embeddable/Main.tsx index f4ca70ce0..9fe64a43a 100644 --- a/js-packages/search-frontend/src/embeddable/Main.tsx +++ b/js-packages/search-frontend/src/embeddable/Main.tsx @@ -491,6 +491,7 @@ export function Main({ language={languageSelect} start={configuration.dataRangePickerVertical?.start} end={configuration.dataRangePickerVertical?.end} + classTab={tabs[selectedTabIndex]?.label} /> , configuration.dataRangePickerVertical?.element !== undefined From 161d63b647567b0f21ca65b754c70109d652ed52 Mon Sep 17 00:00:00 2001 From: lorenzo venneri Date: Mon, 2 Oct 2023 15:23:19 +0200 Subject: [PATCH 16/22] Issue #619: add default value search --- js-packages/search-frontend/src/App.tsx | 30 +++++++++++-------- .../search-frontend/src/components/Search.tsx | 24 +++++++++++---- .../search-frontend/src/embeddable/Main.tsx | 1 + .../search-frontend/src/embeddable/entry.tsx | 1 + 4 files changed, 38 insertions(+), 18 deletions(-) diff --git a/js-packages/search-frontend/src/App.tsx b/js-packages/search-frontend/src/App.tsx index 8da6db825..4ccecea6f 100644 --- a/js-packages/search-frontend/src/App.tsx +++ b/js-packages/search-frontend/src/App.tsx @@ -377,19 +377,23 @@ export function App() { } `} >
-
openk9.updateConfiguration({ resultList: {element:element, changeOnOver:true} })} - css={css` - grid-area: result; - overflow-y: auto; - background-color: var( - --openk9-embeddable-search--primary-background-color - ); - border-radius: 8px; - border: 1px solid var(--openk9-embeddable-search--border-color); - `} - >
+
+ openk9.updateConfiguration({ + resultList: { element: element, changeOnOver: true }, + }) + } + css={css` + grid-area: result; + overflow-y: auto; + background-color: var( + --openk9-embeddable-search--primary-background-color + ); + border-radius: 8px; + border: 1px solid var(--openk9-embeddable-search--border-color); + `} + >
diff --git a/js-packages/search-frontend/src/components/Search.tsx b/js-packages/search-frontend/src/components/Search.tsx index e95448fd8..513137deb 100644 --- a/js-packages/search-frontend/src/components/Search.tsx +++ b/js-packages/search-frontend/src/components/Search.tsx @@ -39,6 +39,7 @@ type SearchProps = { isVisibleFilters: boolean; mobileVersion?: boolean; btnSearch?: boolean; + defaultValue?: string; isSearchOnInputChange?: boolean; saveSearchQuery?: React.Dispatch>; actionCloseMobileVersion?: @@ -58,6 +59,7 @@ export function Search({ actionCloseMobileVersion, isSearchOnInputChange = false, saveSearchQuery, + defaultValue, }: SearchProps) { const autoSelect = configuration.searchAutoselect; const replaceText = configuration.searchReplaceText; @@ -69,7 +71,9 @@ export function Search({ const clickAwayRef = React.useRef(null); useClickAway([clickAwayRef], () => setOpenedDropdown(null)); - const [textBtn, setTextBtn] = React.useState(); + const [textBtn, setTextBtn] = React.useState( + defaultValue, + ); const inputRef = React.useRef(null); const [adjustedSelection, setAdjustedSelection] = React.useState<{ selectionStart: number; @@ -81,6 +85,16 @@ export function Search({ inputRef.current.selectionEnd = adjustedSelection.selectionEnd; } }, [adjustedSelection]); + React.useEffect(() => { + if (defaultValue && btnSearch) { + selectionsDispatch({ + type: "set-text", + text: textBtn, + textOnchange: textBtn, + }); + } + }, [defaultValue]); + const { t } = useTranslation(); return ( @@ -342,11 +356,11 @@ export function Search({ } } else if (event.key === "Enter") { event.preventDefault(); - if(btnSearch) { - if (textBtn === "" ) { + if (btnSearch) { + if (textBtn === "") { selectionsDispatch({ type: "reset-search", - }) + }); } else { selectionsDispatch({ type: "set-text", @@ -356,7 +370,7 @@ export function Search({ } } option?.value ? setTextBtn(option?.value) : null; - + if (span) { if (isSearchOnInputChange) { selectionsDispatch({ diff --git a/js-packages/search-frontend/src/embeddable/Main.tsx b/js-packages/search-frontend/src/embeddable/Main.tsx index 9fe64a43a..97cc82c18 100644 --- a/js-packages/search-frontend/src/embeddable/Main.tsx +++ b/js-packages/search-frontend/src/embeddable/Main.tsx @@ -192,6 +192,7 @@ export function Main({ isVisibleFilters={isVisibleFilters} btnSearch={configuration.searchConfigurable?.btnSearch ?? false} isSearchOnInputChange={isSearchOnInputChange} + defaultValue={configuration.searchConfigurable?.defaultValue ?? ""} /> , configuration.searchConfigurable diff --git a/js-packages/search-frontend/src/embeddable/entry.tsx b/js-packages/search-frontend/src/embeddable/entry.tsx index 477081eae..beb73f422 100644 --- a/js-packages/search-frontend/src/embeddable/entry.tsx +++ b/js-packages/search-frontend/src/embeddable/entry.tsx @@ -225,6 +225,7 @@ type SearchProps = { element: Element | string | null; btnSearch: boolean; isShowSyntax?: boolean | undefined | null; + defaultValue?: string | undefined | null; }; type FilterProps = { From 8e559b5b9f6180f97c6177ac2ecaaf709591cb29 Mon Sep 17 00:00:00 2001 From: lorenzo venneri Date: Mon, 2 Oct 2023 16:58:30 +0200 Subject: [PATCH 17/22] Issue #620: fix rendering search --- js-packages/search-frontend/src/components/Search.tsx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/js-packages/search-frontend/src/components/Search.tsx b/js-packages/search-frontend/src/components/Search.tsx index 513137deb..846736597 100644 --- a/js-packages/search-frontend/src/components/Search.tsx +++ b/js-packages/search-frontend/src/components/Search.tsx @@ -89,9 +89,10 @@ export function Search({ if (defaultValue && btnSearch) { selectionsDispatch({ type: "set-text", - text: textBtn, - textOnchange: textBtn, + text: defaultValue, + textOnchange: defaultValue, }); + setTextBtn(defaultValue); } }, [defaultValue]); From f158f02d9e4f97d57b191aec3893a15f82c3eb99 Mon Sep 17 00:00:00 2001 From: lorenzo venneri Date: Tue, 3 Oct 2023 17:41:08 +0200 Subject: [PATCH 18/22] Issue #624: fix search --- .../search-frontend/src/components/Search.tsx | 18 ++++++++++++------ 1 file changed, 12 insertions(+), 6 deletions(-) diff --git a/js-packages/search-frontend/src/components/Search.tsx b/js-packages/search-frontend/src/components/Search.tsx index 846736597..98db7973e 100644 --- a/js-packages/search-frontend/src/components/Search.tsx +++ b/js-packages/search-frontend/src/components/Search.tsx @@ -86,12 +86,18 @@ export function Search({ } }, [adjustedSelection]); React.useEffect(() => { - if (defaultValue && btnSearch) { - selectionsDispatch({ - type: "set-text", - text: defaultValue, - textOnchange: defaultValue, - }); + if ((defaultValue !== null || defaultValue !== undefined) && btnSearch) { + if (defaultValue === "") { + selectionsDispatch({ + type: "reset-search", + }); + } else { + selectionsDispatch({ + type: "set-text", + text: defaultValue, + textOnchange: defaultValue, + }); + } setTextBtn(defaultValue); } }, [defaultValue]); From f7c0b2669fe0370202d1bc3e1b1c471e061ce57d Mon Sep 17 00:00:00 2001 From: lorenzo venneri Date: Wed, 4 Oct 2023 10:25:20 +0200 Subject: [PATCH 19/22] Issue #569: fix query sub doctypefiedls --- .../src/components/DocTypeFieldsSearch.tsx | 10 ++-- .../src/components/DocumentTypeField.tsx | 1 + .../src/components/DocumentTypeFields.tsx | 32 +++++++------ .../src/components/SubFieldsDocumentType.tsx | 4 +- js-packages/admin-ui/src/graphql-generated.ts | 46 +++++++++++++++---- 5 files changed, 63 insertions(+), 30 deletions(-) diff --git a/js-packages/admin-ui/src/components/DocTypeFieldsSearch.tsx b/js-packages/admin-ui/src/components/DocTypeFieldsSearch.tsx index 28b392fa7..79103eac8 100644 --- a/js-packages/admin-ui/src/components/DocTypeFieldsSearch.tsx +++ b/js-packages/admin-ui/src/components/DocTypeFieldsSearch.tsx @@ -9,11 +9,11 @@ import { useDocumentTypeFieldsQuery } from "../graphql-generated"; import { TableVirtuoso } from "react-virtuoso"; export function DocTypeFieldsSearch() { - const { documentTypeId = "new", searchText = "" } = useParams(); + const { documentTypeId = "new", searchText = "", parentId = "" } = useParams(); const [searchTextDoc, setSearchTextDoc] = React.useState(searchText); const searchTextDebounced = useDebounced(searchTextDoc); const documentTypeFieldsQuery = useDocumentTypeFieldsQuery({ - variables: { documentTypeId: documentTypeId, searchText: searchTextDebounced }, + variables: { documentTypeId: documentTypeId, searchText: searchTextDebounced, parentId: parentId }, }); React.useEffect(() => { @@ -53,9 +53,9 @@ export function DocTypeFieldsSearch() { (
+ +
)} itemContent={(index) => { - const row = documentTypeFieldsQuery.data?.docTypeFieldsFromDocType?.edges?.[index]?.node ?? undefined; + const row = documentTypeFieldsQuery.data?.docTypeFieldsFromDocTypeByParent?.edges?.[index]?.node ?? undefined; return ( diff --git a/js-packages/admin-ui/src/components/DocumentTypeField.tsx b/js-packages/admin-ui/src/components/DocumentTypeField.tsx index feb4550f0..3030ab7a7 100644 --- 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( () => ({ diff --git a/js-packages/admin-ui/src/components/DocumentTypeFields.tsx b/js-packages/admin-ui/src/components/DocumentTypeFields.tsx index 5e3f72f20..a5633a205 100644 --- a/js-packages/admin-ui/src/components/DocumentTypeFields.tsx +++ b/js-packages/admin-ui/src/components/DocumentTypeFields.tsx @@ -35,8 +35,8 @@ gql` `; export const DocumentTypeFieldsParentQuery = gql` - query DocTypeFieldsByParent($searchText: String, $parentId: BigInteger!) { - docTypeFieldsByParent(parentId: $parentId, searchText: $searchText, first: 10) { + query DocTypeFieldsByParent($searchText: String, $parentId: BigInteger!, $docTypeId: ID!) { + docTypeFieldsFromDocTypeByParent(parentId: $parentId, searchText: $searchText, first: 10, docTypeId: $docTypeId) { edges { node { id @@ -68,10 +68,11 @@ export function DocumentTypeFields() { const { data, loading, error } = useQuery(DocumentTypeFieldsParentQuery, { variables: { searchText: "", - // parentId: Number(documentTypeId || "0"), parentId: 0, + docTypeId: documentTypeId || 0, }, }); + const [updateDoctype] = useCreateOrUpdateDocumentTypeFieldMutation({ refetchQueries: [DocumentTypeFieldsQuery, DocumentTypeFieldsParentQuery], }); @@ -127,7 +128,7 @@ export function DocumentTypeFields() {
- {data.docTypeFieldsByParent.edges.map( + {data.docTypeFieldsFromDocTypeByParent.edges.map( ({ node, }: { @@ -150,14 +151,14 @@ export function DocumentTypeFields() { className={node.id === selectedDocumentId ? "active selected" : ""} onMouseOver={(event) => { const currentTarget = event.currentTarget as any; - if (!currentTarget.classList.contains('active')) { - currentTarget.classList.add('active'); - } + if (!currentTarget.classList.contains("active")) { + currentTarget.classList.add("active"); + } }} onMouseOut={(event) => { const currentTarget = event.currentTarget as any; - if (currentTarget.classList.contains('active') && !currentTarget.classList.contains('selected')) { - currentTarget.classList.remove('active'); + if (currentTarget.classList.contains("active") && !currentTarget.classList.contains("selected")) { + currentTarget.classList.remove("active"); } }} > @@ -325,6 +326,7 @@ const ChildListComponent: React.FC = ({ documentId, doc variables: { searchText: "", parentId: Number(documentId), + docTypeId: documentTypeId || 0, }, }); @@ -346,7 +348,7 @@ const ChildListComponent: React.FC = ({ documentId, doc return
Error: {error.message}
; } - const childDocuments = data.docTypeFieldsByParent.edges; + const childDocuments = data.docTypeFieldsFromDocTypeByParent.edges; const handleChildClick = (childId: string) => { setSelectedChildDocumentId(childId); @@ -379,14 +381,14 @@ const ChildListComponent: React.FC = ({ documentId, doc className={node.id === selectedChildDocumentId ? "active selected" : ""} onMouseOver={(event) => { const currentTarget = event.currentTarget as any; - if (!currentTarget.classList.contains('active')) { - currentTarget.classList.add('active'); - } + if (!currentTarget.classList.contains("active")) { + currentTarget.classList.add("active"); + } }} onMouseOut={(event) => { const currentTarget = event.currentTarget as any; - if (currentTarget.classList.contains('active') && !currentTarget.classList.contains('selected')) { - currentTarget.classList.remove('active'); + if (currentTarget.classList.contains("active") && !currentTarget.classList.contains("selected")) { + currentTarget.classList.remove("active"); } }} > diff --git a/js-packages/admin-ui/src/components/SubFieldsDocumentType.tsx b/js-packages/admin-ui/src/components/SubFieldsDocumentType.tsx index 92623aa64..203340497 100644 --- a/js-packages/admin-ui/src/components/SubFieldsDocumentType.tsx +++ b/js-packages/admin-ui/src/components/SubFieldsDocumentType.tsx @@ -21,8 +21,8 @@ import { CodeInput } from "./CodeInput"; import { ClassNameButton } from "../App"; export const DocumentTypeFieldsQuery = gql` - query DocumentTypeFields($documentTypeId: ID!, $searchText: String, $cursor: String) { - docTypeFieldsFromDocType(docTypeId: $documentTypeId, searchText: $searchText, first: 25, after: $cursor) { + query DocumentTypeFields($documentTypeId: ID!, $searchText: String, $cursor: String, $parentId: BigInteger!) { + docTypeFieldsFromDocTypeByParent(docTypeId: $documentTypeId, searchText: $searchText, first: 25, after: $cursor, parentId: $parentId) { edges { node { id diff --git a/js-packages/admin-ui/src/graphql-generated.ts b/js-packages/admin-ui/src/graphql-generated.ts index b52ab04ad..8b26388af 100644 --- a/js-packages/admin-ui/src/graphql-generated.ts +++ b/js-packages/admin-ui/src/graphql-generated.ts @@ -879,6 +879,7 @@ export type DocTypeField = { name?: Maybe; numeric: Scalars['Boolean']; parent?: Maybe; + path?: Maybe; searchable: Scalars['Boolean']; searchableAndAutocomplete: Scalars['Boolean']; searchableAndDate: Scalars['Boolean']; @@ -2229,6 +2230,7 @@ export type Query = { docTypeFields?: Maybe; docTypeFieldsByParent?: Maybe; docTypeFieldsFromDocType?: Maybe; + docTypeFieldsFromDocTypeByParent?: Maybe; docTypeFieldsNotInTokenTab?: Maybe; docTypeTemplate?: Maybe; docTypeTemplates?: Maybe; @@ -2434,6 +2436,20 @@ export type QueryDocTypeFieldsFromDocTypeArgs = { }; +/** Query root */ +export type QueryDocTypeFieldsFromDocTypeByParentArgs = { + after?: InputMaybe; + before?: InputMaybe; + docTypeId: Scalars['ID']; + first?: InputMaybe; + last?: InputMaybe; + notEqual?: InputMaybe; + parentId: Scalars['BigInteger']; + searchText?: InputMaybe; + sortByList?: InputMaybe>>; +}; + + /** Query root */ export type QueryDocTypeFieldsNotInTokenTabArgs = { after?: InputMaybe; @@ -4124,10 +4140,11 @@ export type DeleteDocumentTypeFieldMutation = { __typename?: 'Mutation', removeD export type DocTypeFieldsByParentQueryVariables = Exact<{ searchText?: InputMaybe; parentId: Scalars['BigInteger']; + docTypeId: Scalars['ID']; }>; -export type DocTypeFieldsByParentQuery = { __typename?: 'Query', docTypeFieldsByParent?: { __typename?: 'DefaultConnection_DocTypeField', edges?: Array<{ __typename?: 'DefaultEdge_DocTypeField', node?: { __typename?: 'DocTypeField', id?: string | null, name?: string | null, fieldName?: string | null, searchable: boolean, exclude?: boolean | null, sortable: boolean, parent?: { __typename?: 'DocTypeField', id?: string | null, fieldName?: string | null } | null } | null } | null> | null } | null }; +export type DocTypeFieldsByParentQuery = { __typename?: 'Query', docTypeFieldsFromDocTypeByParent?: { __typename?: 'DefaultConnection_DocTypeField', edges?: Array<{ __typename?: 'DefaultEdge_DocTypeField', node?: { __typename?: 'DocTypeField', id?: string | null, name?: string | null, description?: string | null, fieldType?: FieldType | null, boost?: number | null, searchable: boolean, exclude?: boolean | null, fieldName?: string | null, jsonConfig?: string | null, sortable: boolean, parent?: { __typename?: 'DocTypeField', id?: string | null, fieldName?: string | null } | null } | null } | null> | null } | null }; export type DocumentTypeTemplateQueryVariables = Exact<{ id: Scalars['ID']; @@ -4620,10 +4637,11 @@ export type DocumentTypeFieldsQueryVariables = Exact<{ documentTypeId: Scalars['ID']; searchText?: InputMaybe; cursor?: InputMaybe; + parentId: Scalars['BigInteger']; }>; -export type DocumentTypeFieldsQuery = { __typename?: 'Query', docTypeFieldsFromDocType?: { __typename?: 'DefaultConnection_DocTypeField', edges?: Array<{ __typename?: 'DefaultEdge_DocTypeField', node?: { __typename?: 'DocTypeField', id?: string | null, name?: string | null, description?: string | null, fieldType?: FieldType | null, boost?: number | null, searchable: boolean, exclude?: boolean | null, fieldName?: string | null, sortable: boolean, subFields?: { __typename?: 'DefaultConnection_DocTypeField', edges?: Array<{ __typename?: 'DefaultEdge_DocTypeField', node?: { __typename?: 'DocTypeField', id?: string | null, name?: string | null, description?: string | null, fieldType?: FieldType | null, boost?: number | null, searchable: boolean, exclude?: boolean | null, fieldName?: string | null, sortable: boolean } | null } | null> | null } | null } | null } | null> | null, pageInfo?: { __typename?: 'DefaultPageInfo', hasNextPage: boolean, endCursor?: string | null } | null } | null }; +export type DocumentTypeFieldsQuery = { __typename?: 'Query', docTypeFieldsFromDocTypeByParent?: { __typename?: 'DefaultConnection_DocTypeField', edges?: Array<{ __typename?: 'DefaultEdge_DocTypeField', node?: { __typename?: 'DocTypeField', id?: string | null, name?: string | null, description?: string | null, fieldType?: FieldType | null, boost?: number | null, searchable: boolean, exclude?: boolean | null, fieldName?: string | null, sortable: boolean, subFields?: { __typename?: 'DefaultConnection_DocTypeField', edges?: Array<{ __typename?: 'DefaultEdge_DocTypeField', node?: { __typename?: 'DocTypeField', id?: string | null, name?: string | null, description?: string | null, fieldType?: FieldType | null, boost?: number | null, searchable: boolean, exclude?: boolean | null, fieldName?: string | null, sortable: boolean } | null } | null> | null } | null } | null } | null> | null, pageInfo?: { __typename?: 'DefaultPageInfo', hasNextPage: boolean, endCursor?: string | null } | null } | null }; export type CreateOrUpdateDocumentTypeFieldMutationVariables = Exact<{ documentTypeId: Scalars['ID']; @@ -8571,15 +8589,24 @@ export type DeleteDocumentTypeFieldMutationHookResult = ReturnType; export type DeleteDocumentTypeFieldMutationOptions = Apollo.BaseMutationOptions; export const DocTypeFieldsByParentDocument = gql` - query DocTypeFieldsByParent($searchText: String, $parentId: BigInteger!) { - docTypeFieldsByParent(parentId: $parentId, searchText: $searchText, first: 10) { + query DocTypeFieldsByParent($searchText: String, $parentId: BigInteger!, $docTypeId: ID!) { + docTypeFieldsFromDocTypeByParent( + parentId: $parentId + searchText: $searchText + first: 10 + docTypeId: $docTypeId + ) { edges { node { id name - fieldName + description + fieldType + boost searchable exclude + fieldName + jsonConfig sortable parent { id @@ -8605,6 +8632,7 @@ export const DocTypeFieldsByParentDocument = gql` * variables: { * searchText: // value for 'searchText' * parentId: // value for 'parentId' + * docTypeId: // value for 'docTypeId' * }, * }); */ @@ -11174,12 +11202,13 @@ export type DeleteSearchConfigMutationHookResult = ReturnType; export type DeleteSearchConfigMutationOptions = Apollo.BaseMutationOptions; export const DocumentTypeFieldsDocument = gql` - query DocumentTypeFields($documentTypeId: ID!, $searchText: String, $cursor: String) { - docTypeFieldsFromDocType( + query DocumentTypeFields($documentTypeId: ID!, $searchText: String, $cursor: String, $parentId: BigInteger!) { + docTypeFieldsFromDocTypeByParent( docTypeId: $documentTypeId searchText: $searchText first: 25 after: $cursor + parentId: $parentId ) { edges { node { @@ -11232,6 +11261,7 @@ export const DocumentTypeFieldsDocument = gql` * documentTypeId: // value for 'documentTypeId' * searchText: // value for 'searchText' * cursor: // value for 'cursor' + * parentId: // value for 'parentId' * }, * }); */ @@ -12730,4 +12760,4 @@ export function useCreateYouTubeDataSourceMutation(baseOptions?: Apollo.Mutation export type CreateYouTubeDataSourceMutationHookResult = ReturnType; export type CreateYouTubeDataSourceMutationResult = Apollo.MutationResult; export type CreateYouTubeDataSourceMutationOptions = Apollo.BaseMutationOptions; -// Generated on 2023-09-12T11:17:51+02:00 +// Generated on 2023-10-04T10:22:46+02:00 From 9802d5c92e64fbe589dec12b42a02121d9a45bab Mon Sep 17 00:00:00 2001 From: lorenzo venneri Date: Wed, 4 Oct 2023 11:32:41 +0200 Subject: [PATCH 20/22] Issue #569: fix document type sub fields --- js-packages/admin-ui/src/components/DocumentTypeFields.tsx | 7 ++++--- js-packages/admin-ui/src/graphql-generated.ts | 2 +- 2 files changed, 5 insertions(+), 4 deletions(-) diff --git a/js-packages/admin-ui/src/components/DocumentTypeFields.tsx b/js-packages/admin-ui/src/components/DocumentTypeFields.tsx index a5633a205..ffb2f9e6c 100644 --- a/js-packages/admin-ui/src/components/DocumentTypeFields.tsx +++ b/js-packages/admin-ui/src/components/DocumentTypeFields.tsx @@ -126,8 +126,8 @@ export function DocumentTypeFields() { -
- +
+ {data.docTypeFieldsFromDocTypeByParent.edges.map( ({ node, @@ -162,6 +162,7 @@ export function DocumentTypeFields() { } }} > +
{node?.id && ( = ({ documentId, doc return (
- + {childDocuments.map( ({ node, diff --git a/js-packages/admin-ui/src/graphql-generated.ts b/js-packages/admin-ui/src/graphql-generated.ts index 8b26388af..9c6d7f93c 100644 --- a/js-packages/admin-ui/src/graphql-generated.ts +++ b/js-packages/admin-ui/src/graphql-generated.ts @@ -12760,4 +12760,4 @@ export function useCreateYouTubeDataSourceMutation(baseOptions?: Apollo.Mutation export type CreateYouTubeDataSourceMutationHookResult = ReturnType; export type CreateYouTubeDataSourceMutationResult = Apollo.MutationResult; export type CreateYouTubeDataSourceMutationOptions = Apollo.BaseMutationOptions; -// Generated on 2023-10-04T10:22:46+02:00 +// Generated on 2023-10-04T11:29:13+02:00 From 58a3def105af8d23d9b473ba1b10054a56cf8934 Mon Sep 17 00:00:00 2001 From: lorenzo venneri Date: Wed, 4 Oct 2023 11:39:06 +0200 Subject: [PATCH 21/22] Issue #569: fix search query --- js-packages/admin-ui/src/components/DocTypeFieldsSearch.tsx | 4 ++-- js-packages/admin-ui/src/graphql-generated.ts | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/js-packages/admin-ui/src/components/DocTypeFieldsSearch.tsx b/js-packages/admin-ui/src/components/DocTypeFieldsSearch.tsx index 79103eac8..eac7bf59e 100644 --- a/js-packages/admin-ui/src/components/DocTypeFieldsSearch.tsx +++ b/js-packages/admin-ui/src/components/DocTypeFieldsSearch.tsx @@ -9,11 +9,11 @@ import { useDocumentTypeFieldsQuery } from "../graphql-generated"; import { TableVirtuoso } from "react-virtuoso"; export function DocTypeFieldsSearch() { - const { documentTypeId = "new", searchText = "", parentId = "" } = useParams(); + 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: parentId }, + variables: { documentTypeId: documentTypeId, searchText: searchTextDebounced, parentId: 0 }, }); React.useEffect(() => { diff --git a/js-packages/admin-ui/src/graphql-generated.ts b/js-packages/admin-ui/src/graphql-generated.ts index 9c6d7f93c..410f90808 100644 --- a/js-packages/admin-ui/src/graphql-generated.ts +++ b/js-packages/admin-ui/src/graphql-generated.ts @@ -12760,4 +12760,4 @@ export function useCreateYouTubeDataSourceMutation(baseOptions?: Apollo.Mutation export type CreateYouTubeDataSourceMutationHookResult = ReturnType; export type CreateYouTubeDataSourceMutationResult = Apollo.MutationResult; export type CreateYouTubeDataSourceMutationOptions = Apollo.BaseMutationOptions; -// Generated on 2023-10-04T11:29:13+02:00 +// Generated on 2023-10-04T11:36:52+02:00 From ef4000908778165bb2afb54b8722acbe2d178a2e Mon Sep 17 00:00:00 2001 From: "N.Alivernini" Date: Wed, 4 Oct 2023 12:17:59 +0200 Subject: [PATCH 22/22] fix align calendar picker mobile/tablet --- .../search-frontend/src/components/dataRangePicker.css | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/js-packages/search-frontend/src/components/dataRangePicker.css b/js-packages/search-frontend/src/components/dataRangePicker.css index 28c12d439..e34ff9ac7 100644 --- a/js-packages/search-frontend/src/components/dataRangePicker.css +++ b/js-packages/search-frontend/src/components/dataRangePicker.css @@ -80,6 +80,16 @@ .DateRangePicker_picker{ @media (max-width:480px) { bottom: 30px !important; + left: 50% !important; + transform: translate(-50%, 0) !important; + } +} + +.DateRangePicker_picker { + @media (min-width: 481px) and (max-width: 768px) { + bottom: 30px !important; + left:50% !important; + transform: translate(-50%, 0) !important; } }