Merge pull request #826 from digirati-co-uk/IDA-1124/User-research-2

Ida 1124/user research 2
digirati-co-uk · Apr 3, 2024 · 8a74191 · 8a74191
2 parents 9946c3e + f213878
commit 8a74191
Show file tree

Hide file tree

Showing 11 changed files with 230 additions and 44 deletions.
diff --git 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<any>(`/api/enrichment/entity/${slug}/?page=${page}`);
+  getEntities(slug: string, page?: number, order_by?: string) {
+    return this.api.request<any>(`/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
@@ -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<{
             <TextContainer data-list-item={list} style={{ alignSelf: 'flex-start' }}>
               <LocaleString as={ResultTitle}>{result.label}</LocaleString>
               <LocaleString as={Subtitle}>{result.resource_type}</LocaleString>
-              {snippet && !hideSnippet ? (
+              {snippet && !hideSnippet && !trunicateSnippet ? (
                 <div style={{ paddingBottom: '.8em', maxWidth: 600 }}>
                   <ResultText
                     key={snippet}
@@ -182,6 +205,15 @@ export const SearchItem: React.FC<{
                     }}
                   />
                 </div>
+              ) : snippet && trunicateSnippet ? (
+                <div style={{ paddingBottom: '.8em', maxWidth: 600 }}>
+                  <ResultTextTrunicate
+                    key={snippet}
+                    dangerouslySetInnerHTML={{
+                      __html: replaceBreaks(sanitizeLabel(snippet)),
+                    }}
+                  />
+                </div>
               ) : 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
@@ -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,14 +28,21 @@ 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<HTMLDivElement>(null);
   const [fullText, setFulltext] = React.useState('');
   const [isLoading, setIsLoading] = React.useState(false);
   const [selected, setSelected] = React.useState<AutoCompleteEntitySnippet | null>(null);
   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 (
+      <div>
+        <div
+          style={{
+            display: 'flex',
+            backgroundColor: 'rgba(197,232,197,0.32)',
+            padding: '0.5em',
+            borderRadius: '4px',
+          }}
+        >
+          <p> {t('Canvas tagged with')}: </p>
+          <TagPill style={{ alignSelf: 'end' }}>
+            <LocaleString>{selected.title}</LocaleString>
+          </TagPill>
+        </div>
+      </div>
+    );
+  }
+
   return (
     <div>
       {selected ? (
@@ -127,7 +155,7 @@ export const AddTagButton: React.FC<{
           </InputContainer>
           {isLoading || queryLoading ? (
             <EmptyState>
-              <Spinner /> ...{t('loading')}
+              <Spinner stroke="#000" />
             </EmptyState>
           ) : !pages || (pages[0].pagination.totalResults === 0 && fullText) ? (
             <TagResults>

diff --git a/services/madoc-ts/src/frontend/site/features/AddTopicButton.tsx b/services/madoc-ts/src/frontend/site/features/AddTopicButton.tsx
@@ -12,14 +12,16 @@ 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;
 `;
 export const AddTopicButton: React.FC<{
   statusLoading: boolean;
   onSelected: (slug: string | undefined) => void;
-}> = ({ onSelected, statusLoading }) => {
+  postSubmission: boolean;
+}> = ({ onSelected, statusLoading, postSubmission }) => {
   const container = useRef<HTMLDivElement>(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 (
+      <div>
+        <div
+          style={{
+            display: 'flex',
+            flexDirection: 'column',
+            gap: '5px',
+            backgroundColor: 'rgba(197,232,197,0.32)',
+            padding: '0.5em',
+            borderRadius: '4px',
+          }}
+        >
+          <p> {t('Canvas tagged with')}: </p>
+
+          <b> {t('Topic Type')}: </b>
+          <TopicPill style={{ alignSelf: 'start' }}>{selected.label}</TopicPill>
+
+          <b> {t('Tag')}: </b>
+          <TagPill style={{ alignSelf: 'start' }}>
+            <LocaleString>{selected.title}</LocaleString>
+          </TagPill>
+        </div>
+      </div>
+    );
+  }
+
   return (
     <div style={{ maxWidth: '100%' }}>
       <p>{t('Choose a topic type first')}</p>
@@ -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
@@ -16,13 +16,15 @@ interface SearchPageResultsProps {
   background?: string;
   grid?: boolean;
   snippet?: boolean;
+  trunSnippet?: boolean;
   textColor?: string;
   cardBorder?: string;
   imageStyle?: string;
 }
 
 export const SearchPageResults: React.FC<SearchPageResultsProps> = ({
   snippet,
+  trunSnippet,
   cardBorder,
   textColor,
   background,
@@ -89,6 +91,7 @@ export const SearchPageResults: React.FC<SearchPageResultsProps> = ({
                 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
@@ -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<string | undefined>(undefined);
 
   const [remove, removeStatus] = useMutation(async (id: string) => {
@@ -76,19 +76,33 @@ export const TaggingFormPannel = () => {
       <ModalButton
         style={{ fontWeight: '500', display: 'block', marginBottom: '0.5em' }}
         title={t('Tag this resource')}
-        render={() => <AddTopicButton onSelected={onSelect} statusLoading={addStatus.isLoading} />}
+        render={() => (
+          <AddTopicButton onSelected={onSelect} statusLoading={addStatus.isLoading} postSubmission={postSubmission} />
+        )}
         footerAlignRight
         renderFooter={({ close }) => (
           <ButtonRow $noMargin>
-            <Button
-              $primary
-              disabled={!selectedId}
-              onClick={() => {
-                addTag(selectedId).then(() => close());
-              }}
-            >
-              {t('Submit')}
-            </Button>
+            {postSubmission ? (
+              <Button
+                $primary
+                onClick={() => {
+                  setSelectedId(undefined);
+                  setPostSubmission(false);
+                }}
+              >
+                {t('Add another')}
+              </Button>
+            ) : (
+              <Button
+                $primary
+                disabled={!selectedId}
+                onClick={() => {
+                  addTag(selectedId).then(() => setPostSubmission(true));
+                }}
+              >
+                {t('Submit')}
+              </Button>
+            )}
             <Button
               onClick={() => {
                 setSelectedId(undefined);
@@ -100,7 +114,14 @@ export const TaggingFormPannel = () => {
           </ButtonRow>
         )}
       >
-        <Button>{t('Add new')}</Button>
+        <Button
+          onClick={() => {
+            setPostSubmission(false);
+            setSelectedId(undefined);
+          }}
+        >
+          {t('Add new')}
+        </Button>
       </ModalButton>
       {ResourceTags.length === 0 ? (
         <MetadataEmptyState style={{ marginTop: 100 }}>{t('No tags')}</MetadataEmptyState>
@@ -119,20 +140,34 @@ export const TaggingFormPannel = () => {
                   typeLabel={tagType.type}
                   onSelected={onSelect}
                   statusLoading={addStatus.isLoading}
+                  postSubmission={postSubmission}
                 />
               )}
               footerAlignRight
               renderFooter={({ close }) => (
                 <ButtonRow $noMargin>
-                  <Button
-                    $primary
-                    disabled={!selectedId}
-                    onClick={() => {
-                      addTag(selectedId).then(() => close());
-                    }}
-                  >
-                    {t('Submit')}
-                  </Button>
+                  {postSubmission ? (
+                    <Button
+                      $primary
+                      onClick={() => {
+                        setSelectedId(undefined);
+                        setPostSubmission(false);
+                      }}
+                    >
+                      {t('Add another')}
+                    </Button>
+                  ) : (
+                    <Button
+                      $primary
+                      disabled={!selectedId}
+                      onClick={() => {
+                        addTag(selectedId).then(() => setPostSubmission(true));
+                      }}
+                    >
+                      {t('Submit')}
+                    </Button>
+                  )}
+
                   <Button
                     onClick={() => {
                       setSelectedId(undefined);