diff --git a/services/madoc-ts/src/extensions/enrichment/extension.ts b/services/madoc-ts/src/extensions/enrichment/extension.ts index dd12f82d4..638bf0bb1 100644 --- a/services/madoc-ts/src/extensions/enrichment/extension.ts +++ b/services/madoc-ts/src/extensions/enrichment/extension.ts @@ -148,8 +148,8 @@ export class EnrichmentExtension extends BaseDjangoExtension { } // Entity - List, filtered by chosen Entity Type - getEntities(slug: string, page?: number) { - return this.api.request(`/api/enrichment/entity/${slug}/?page=${page}`); + getEntities(slug: string, page?: number, order_by?: string) { + return this.api.request(`/api/enrichment/entity/${slug}/?page=${page}&order_by=${order_by}`); } // Entity - Retrieve diff --git a/services/madoc-ts/src/frontend/shared/components/SearchResults.tsx b/services/madoc-ts/src/frontend/shared/components/SearchResults.tsx index 1d10bd4d4..1004a0403 100644 --- a/services/madoc-ts/src/frontend/shared/components/SearchResults.tsx +++ b/services/madoc-ts/src/frontend/shared/components/SearchResults.tsx @@ -49,6 +49,16 @@ const ResultText = styled.span` text-decoration: none; line-height: 1.3em; `; +const ResultTextTrunicate = styled.div` + text-decoration: none; + line-height: 1.3em; + position: relative; + display: -webkit-box; + -webkit-line-clamp: 2; + -webkit-box-orient: vertical; + overflow: hidden; + text-overflow: ellipsis; +`; export const ResultTitle = styled.div` text-decoration: none; @@ -118,12 +128,25 @@ export const SearchItem: React.FC<{ search?: string; list?: boolean; hideSnippet?: boolean; + trunicateSnippet?: boolean; border?: string; textColor?: string; background?: string; imageStyle?: string; admin?: boolean; -}> = ({ result, size, search, list, border, textColor, background, imageStyle, hideSnippet, admin }) => { +}> = ({ + result, + size, + search, + list, + border, + textColor, + background, + imageStyle, + hideSnippet, + trunicateSnippet, + admin, +}) => { const things = ((result && result.contexts) || []).map(value => { return parseUrn(typeof value === 'string' ? value : value.id); }); @@ -173,7 +196,7 @@ export const SearchItem: React.FC<{ {result.label} {result.resource_type} - {snippet && !hideSnippet ? ( + {snippet && !hideSnippet && !trunicateSnippet ? (
+ ) : snippet && trunicateSnippet ? ( +
+ +
) : null} {/*{result.metadata && (*/} diff --git a/services/madoc-ts/src/frontend/site/features/AddTagButton.tsx b/services/madoc-ts/src/frontend/site/features/AddTagButton.tsx index a116cf6d3..5766e42b7 100644 --- a/services/madoc-ts/src/frontend/site/features/AddTagButton.tsx +++ b/services/madoc-ts/src/frontend/site/features/AddTagButton.tsx @@ -1,4 +1,4 @@ -import React, { useRef } from 'react'; +import React, { lazy, useEffect, useRef } from 'react'; import { Button } from '../../shared/navigation/Button'; import { CloseIcon } from '../../shared/icons/CloseIcon'; import { useApi } from '../../shared/hooks/use-api'; @@ -28,7 +28,8 @@ export const AddTagButton: React.FC<{ statusLoading: boolean; onSelected: (id: string | undefined) => void; hideTopic?: boolean; -}> = ({ typeSlug, typeLabel, onSelected, statusLoading, hideTopic }) => { + postSubmission: boolean; +}> = ({ typeSlug, typeLabel, onSelected, statusLoading, hideTopic, postSubmission }) => { const container = useRef(null); const [fullText, setFulltext] = React.useState(''); const [isLoading, setIsLoading] = React.useState(false); @@ -36,6 +37,12 @@ export const AddTagButton: React.FC<{ const api = useApi(); const { t } = useTranslation(); + useEffect(() => { + if (!postSubmission && selected) { + setSelected(null); + } + }, [postSubmission]); + const { data: pages, fetchMore, canFetchMore, isFetchingMore, isLoading: queryLoading } = useInfiniteQuery( ['topic-autocomplete', { fullText, typeSlug }], async (key, _, vars: { page?: number } = { page: 1 }) => { @@ -62,13 +69,34 @@ export const AddTagButton: React.FC<{ const startAutoComplete = (val: string) => { setIsLoading(true); setFulltext(val); - setIsLoading(false); + const timeout = setTimeout(() => setIsLoading(false), 1000); + return () => clearTimeout(timeout); }; // const { data } = useEnrichmentResource(); // const tags = data?.entity_tags; // const appliedTagIDs = tags?.map(tag => tag.entity.id); + if (selected && postSubmission) { + return ( +
+
+

{t('Canvas tagged with')}:

+ + {selected.title} + +
+
+ ); + } + return (
{selected ? ( @@ -127,7 +155,7 @@ export const AddTagButton: React.FC<{ {isLoading || queryLoading ? ( - ...{t('loading')} + ) : !pages || (pages[0].pagination.totalResults === 0 && fullText) ? ( diff --git a/services/madoc-ts/src/frontend/site/features/AddTopicButton.tsx b/services/madoc-ts/src/frontend/site/features/AddTopicButton.tsx index 88699f644..1b5746bba 100644 --- a/services/madoc-ts/src/frontend/site/features/AddTopicButton.tsx +++ b/services/madoc-ts/src/frontend/site/features/AddTopicButton.tsx @@ -12,6 +12,7 @@ import { TagPill } from '../hooks/canvas-menu/tagging-panel'; import { AutoCompleteEntitySnippet } from '../../../extensions/enrichment/types'; import { AddTagButton } from './AddTagButton'; import { useTranslation } from 'react-i18next'; +import { LocaleString } from '../../shared/components/LocaleString'; export const TopicPill = styled(TagPill)` border-color: orange; @@ -19,7 +20,8 @@ export const TopicPill = styled(TagPill)` export const AddTopicButton: React.FC<{ statusLoading: boolean; onSelected: (slug: string | undefined) => void; -}> = ({ onSelected, statusLoading }) => { + postSubmission: boolean; +}> = ({ onSelected, statusLoading, postSubmission }) => { const container = useRef(null); const [fullText, setFulltext] = React.useState(''); const [isLoading, setIsLoading] = React.useState(false); @@ -53,9 +55,37 @@ export const AddTopicButton: React.FC<{ const startAutoComplete = (val: string) => { setIsLoading(true); setFulltext(val); - setIsLoading(false); + const timeout = setTimeout(() => setIsLoading(false), 1000); + return () => clearTimeout(timeout); }; + if (selected && postSubmission) { + return ( +
+
+

{t('Canvas tagged with')}:

+ + {t('Topic Type')}: + {selected.label} + + {t('Tag')}: + + {selected.title} + +
+
+ ); + } + return (

{t('Choose a topic type first')}

@@ -78,6 +108,7 @@ export const AddTopicButton: React.FC<{ typeLabel={selected.label} statusLoading={statusLoading} onSelected={onSelected} + postSubmission={false} hideTopic /> diff --git a/services/madoc-ts/src/frontend/site/features/SearchPageResults.tsx b/services/madoc-ts/src/frontend/site/features/SearchPageResults.tsx index 26242a1c4..bb4062ba3 100644 --- a/services/madoc-ts/src/frontend/site/features/SearchPageResults.tsx +++ b/services/madoc-ts/src/frontend/site/features/SearchPageResults.tsx @@ -16,6 +16,7 @@ interface SearchPageResultsProps { background?: string; grid?: boolean; snippet?: boolean; + trunSnippet?: boolean; textColor?: string; cardBorder?: string; imageStyle?: string; @@ -23,6 +24,7 @@ interface SearchPageResultsProps { export const SearchPageResults: React.FC = ({ snippet, + trunSnippet, cardBorder, textColor, background, @@ -89,6 +91,7 @@ export const SearchPageResults: React.FC = ({ textColor={textColor} list={resultsView === 'list'} hideSnippet={snippet} + trunicateSnippet={trunSnippet} imageStyle={imageStyle} /> ) : null; @@ -107,12 +110,14 @@ blockEditorFor(SearchPageResults, { defaultProps: { background: '', snippet: '', + trunSnippet: '', textColor: '', cardBorder: '', imageStyle: 'fit', }, editor: { snippet: { type: 'checkbox-field', label: 'Snippet', inlineLabel: 'Hide snippet?' }, + trunSnippet: { type: 'checkbox-field', label: 'Trunicate Snippet', inlineLabel: 'Trunicate snippet?' }, background: { label: 'Card background color', type: 'color-field' }, textColor: { label: 'Card text color', type: 'color-field' }, cardBorder: { label: 'Card border', type: 'color-field' }, diff --git a/services/madoc-ts/src/frontend/site/features/TaggingFormPannel.tsx b/services/madoc-ts/src/frontend/site/features/TaggingFormPannel.tsx index 0e0a8c53b..5e49c1757 100644 --- a/services/madoc-ts/src/frontend/site/features/TaggingFormPannel.tsx +++ b/services/madoc-ts/src/frontend/site/features/TaggingFormPannel.tsx @@ -52,7 +52,7 @@ export const TaggingFormPannel = () => { const { canvasId } = useRouteContext(); const api = useApi(); const ResourceTags = useGetResourceTags(); - + const [postSubmission, setPostSubmission] = useState(false); const [selectedId, setSelectedId] = useState(undefined); const [remove, removeStatus] = useMutation(async (id: string) => { @@ -76,19 +76,33 @@ export const TaggingFormPannel = () => { } + render={() => ( + + )} footerAlignRight renderFooter={({ close }) => ( - + {postSubmission ? ( + + ) : ( + + )} + {ResourceTags.length === 0 ? ( {t('No tags')} @@ -119,20 +140,34 @@ export const TaggingFormPannel = () => { typeLabel={tagType.type} onSelected={onSelect} statusLoading={addStatus.isLoading} + postSubmission={postSubmission} /> )} footerAlignRight renderFooter={({ close }) => ( - + {postSubmission ? ( + + ) : ( + + )} +