Maltekstseksjon: Add status and status filter in 'Legg til eksisteren…

…de tekst' modal
navikt · Nov 7, 2024 · eb54e21 · eb54e21
1 parent d463c1b
commit eb54e21
Show file tree

Hide file tree

Showing 4 changed files with 76 additions and 37 deletions.
diff --git a/...nents/maltekstseksjoner/maltekstseksjon/draft/available-texts/available-texts-by-type.tsx b/...nents/maltekstseksjoner/maltekstseksjon/draft/available-texts/available-texts-by-type.tsx
@@ -1,4 +1,11 @@
+import { FilterDropdown } from '@app/components/filter-dropdown/filter-dropdown';
 import { SetMaltekstseksjonLanguage } from '@app/components/set-redaktoer-language/set-maltekstseksjon-language';
+import {
+  DEFAULT_STATUSES,
+  STATUS_OPTIONS,
+  type Status,
+  filterByStatus,
+} from '@app/components/smart-editor-texts/status-filter/status-filter';
 import { fuzzySearch } from '@app/components/smart-editor/gode-formuleringer/fuzzy-search';
 import { splitQuery } from '@app/components/smart-editor/gode-formuleringer/split-query';
 import { useRedaktoerLanguage } from '@app/hooks/use-redaktoer-language';
@@ -23,6 +30,7 @@ export const AvailableTextsByType = ({ onAdd, onRemove, usedIds, textType }: Ava
   const [sort, setSort] = useState<SortState>({ orderBy: SortKey.SCORE, direction: SortDirection.DESCENDING });
   const [filter, setFilter] = useState<string>('');
   const lang = useRedaktoerLanguage();
+  const [filteredStatuses, setFilteredStatuses] = useState<Status[]>(DEFAULT_STATUSES);
 
   const onSortChange = useCallback(
     (sortKey: string | undefined) => {
@@ -42,20 +50,25 @@ export const AvailableTextsByType = ({ onAdd, onRemove, usedIds, textType }: Ava
 
   // biome-ignore lint/complexity/noExcessiveCognitiveComplexity: ¯\_(ツ)_/¯
   const filteredAndSortedData = useMemo(() => {
-    const richTexts = data.filter(isRichtext);
-    let filtered: ScoredRichText[] = [];
+    const filtered: ScoredRichText[] = [];
 
-    if (filter.length === 0) {
-      filtered = richTexts.map((text) => ({ ...text, score: 100 }));
-    } else {
-      for (const text of richTexts) {
+    const hasTextFilter = filter.length > 0;
+
+    for (const text of data) {
+      if (!isRichtext(text) || !filterByStatus(filteredStatuses, text)) {
+        continue;
+      }
+
+      if (hasTextFilter) {
         const filterText = text.title + (getTextAsString(text.richText[lang] ?? []) ?? '');
 
         const score = fuzzySearch(splitQuery(filter), filterText);
 
         if (score > 0) {
           filtered.push({ ...text, score });
         }
+      } else {
+        filtered.push({ ...text, score: 100 });
       }
     }
 
@@ -94,7 +107,7 @@ export const AvailableTextsByType = ({ onAdd, onRemove, usedIds, textType }: Ava
     }
 
     return filtered;
-  }, [data, filter, lang, sort]);
+  }, [data, filter, lang, sort, filteredStatuses]);
 
   return (
     <Container>
@@ -128,6 +141,16 @@ export const AvailableTextsByType = ({ onAdd, onRemove, usedIds, textType }: Ava
                 >
                   Maltekstseksjoner
                 </Table.ColumnHeader>
+                <Table.HeaderCell>
+                  <FilterDropdown<Status>
+                    data-testid="filter-status"
+                    selected={filteredStatuses}
+                    options={STATUS_OPTIONS}
+                    onChange={setFilteredStatuses}
+                  >
+                    Status
+                  </FilterDropdown>
+                </Table.HeaderCell>
                 <Table.ColumnHeader>%</Table.ColumnHeader>
                 <Table.HeaderCell />
               </Table.Row>
@@ -173,6 +196,7 @@ const Container = styled.div`
 const TableWrapper = styled.div`
   position: relative;
   overflow-y: auto;
+  flex-grow: 1;
 `;
 
 const StyledTableHeader = styled(Table.Header)`

diff --git a/...rc/components/maltekstseksjoner/maltekstseksjon/draft/available-texts/available-texts.tsx b/...rc/components/maltekstseksjoner/maltekstseksjon/draft/available-texts/available-texts.tsx
@@ -21,7 +21,7 @@ export const AvailableTexts = ({ onAdd, onRemove, usedIds, textType }: Available
 
       <Modal
         header={{ heading: textType === RichTextTypes.MALTEKST ? 'Låste tekster' : 'Redigerbare tekster' }}
-        width={1200}
+        width={1500}
         open={open}
         onClose={onClose}
         closeOnBackdropClick

diff --git a/frontend/src/components/maltekstseksjoner/maltekstseksjon/draft/available-texts/body.tsx b/frontend/src/components/maltekstseksjoner/maltekstseksjon/draft/available-texts/body.tsx
@@ -1,3 +1,4 @@
+import { StatusTag } from '@app/components/maltekstseksjoner/status-tag';
 import { isoDateTimeToPretty } from '@app/domain/date';
 import type { IRichText } from '@app/types/texts/responses';
 import { Button, Table } from '@navikt/ds-react';
@@ -16,35 +17,49 @@ interface Props {
 export const Body = ({ texts, usedIds, onAdd, onRemove }: Props) => {
   const rows = useMemo(
     () =>
-      texts.map(({ title, modified, id, draftMaltekstseksjonIdList, publishedMaltekstseksjonIdList, score }) => {
-        const isUsed = usedIds.includes(id);
+      texts.map(
+        ({
+          title,
+          modified,
+          id,
+          draftMaltekstseksjonIdList,
+          publishedMaltekstseksjonIdList,
+          score,
+          published,
+          publishedDateTime,
+        }) => {
+          const isUsed = usedIds.includes(id);
 
-        return (
-          <Row
-            key={id}
-            textId={id}
-            draftMaltekstseksjonIdList={draftMaltekstseksjonIdList}
-            publishedMaltekstseksjonIdList={publishedMaltekstseksjonIdList}
-          >
-            <Table.HeaderCell>{title.length === 0 ? '<Ingen tittel>' : title}</Table.HeaderCell>
-            <Table.DataCell>
-              <time dateTime={modified}>{isoDateTimeToPretty(modified)}</time>
-            </Table.DataCell>
-            <Table.DataCell>
-              <RefCount
-                draftMaltekstseksjonIdList={draftMaltekstseksjonIdList}
-                publishedMaltekstseksjonIdList={publishedMaltekstseksjonIdList}
-              />
-            </Table.DataCell>
-            <Table.DataCell>{score.toFixed(2)} %</Table.DataCell>
-            <Table.DataCell>
-              <Button size="xsmall" variant="tertiary" onClick={() => (isUsed ? onRemove(id) : onAdd(id))}>
-                {isUsed ? 'Fjern' : 'Legg til'}
-              </Button>
-            </Table.DataCell>
-          </Row>
-        );
-      }),
+          return (
+            <Row
+              key={id}
+              textId={id}
+              draftMaltekstseksjonIdList={draftMaltekstseksjonIdList}
+              publishedMaltekstseksjonIdList={publishedMaltekstseksjonIdList}
+            >
+              <Table.HeaderCell>{title.length === 0 ? '<Ingen tittel>' : title}</Table.HeaderCell>
+              <Table.DataCell>
+                <time dateTime={modified}>{isoDateTimeToPretty(modified)}</time>
+              </Table.DataCell>
+              <Table.DataCell>
+                <RefCount
+                  draftMaltekstseksjonIdList={draftMaltekstseksjonIdList}
+                  publishedMaltekstseksjonIdList={publishedMaltekstseksjonIdList}
+                />
+              </Table.DataCell>
+              <Table.DataCell>
+                <StatusTag publishedDateTime={publishedDateTime} published={published} />
+              </Table.DataCell>
+              <Table.DataCell>{score.toFixed(2)} %</Table.DataCell>
+              <Table.DataCell>
+                <Button size="xsmall" variant="tertiary" onClick={() => (isUsed ? onRemove(id) : onAdd(id))}>
+                  {isUsed ? 'Fjern' : 'Legg til'}
+                </Button>
+              </Table.DataCell>
+            </Row>
+          );
+        },
+      ),
     [texts, usedIds, onRemove, onAdd],
   );
 

diff --git a/frontend/src/components/smart-editor-texts/status-filter/status-filter.tsx b/frontend/src/components/smart-editor-texts/status-filter/status-filter.tsx
@@ -40,7 +40,7 @@ const isStatus = (value: string): value is Status => STATUS_VALUES.some((status)
 
 const PARAM_KEY = 'status';
 
-const DEFAULT_STATUSES = [Status.PUBLISHED, Status.DRAFT];
+export const DEFAULT_STATUSES = [Status.PUBLISHED, Status.DRAFT];
 
 export const DEFAULT_STATUS_FILTER = `${PARAM_KEY}=${DEFAULT_STATUSES.join(encodeURIComponent(','))}`;