Frontend for pdf-export

Author: anders-nom

src/components/left-section/search/search-input/search-settings/SearchSettings.tsx

@@ -73,7 +73,7 @@ export const SearchSettings = () => {
                     </RadioGroup>
                 </div>
                 <UNSAFE_Combobox
-                    label={'Avgrens til valgte kategorier'}
+                    label={'Avgrens søket til valgte kategorier:'}
                     size={'small'}
                     className={style.categoriesSelector}
                     clearButton={true}

src/components/main-section/content-view/ContentView.tsx

@@ -7,6 +7,7 @@ import { ViewSelector, ViewState } from '../view-selector/ViewSelector';
 import { VersionSelector } from './version-selector/VersionSelector';
 import { Heading } from '@navikt/ds-react';
 import { CategoriesPath } from '../../common/categories-path/CategoriesPath';
+import { HtmlExporter } from './html-exporter/HtmlExporter';
 
 import style from './ContentView.module.css';
 
@@ -39,7 +40,12 @@ export const ContentView = ({ content }: Props) => {
                 <VersionSelector content={content} />
             </div>
             <XmlView xml={xmlAsString} hidden={viewState !== 'xml'} />
-            {html && <HtmlView html={html} versionKey={versionKey} hidden={viewState !== 'html'} />}
+            {html && (
+                <>
+                    <HtmlView html={html} versionKey={versionKey} hidden={viewState !== 'html'} />
+                    <HtmlExporter content={content} hidden={viewState !== 'export'} />
+                </>
+            )}
             {content.binaries && (
                 <FilesView binaries={content.binaries} hidden={viewState !== 'files'} />
             )}

src/components/main-section/content-view/html-exporter/HtmlExporter.module.css

@@ -0,0 +1,34 @@
+.exporter {
+    overflow-y: scroll;
+    height: 100%;
+    scrollbar-width: thin;
+}
+
+.hidden {
+    display: none;
+}
+
+.topRow {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    border-bottom: 1px solid var(--a-gray-400);
+    margin-bottom: 0.75rem;
+    padding: 0.5rem 0;
+}
+
+.downloadCurrent {
+    margin-right: 0.5rem;
+}
+
+.downloadCurrentIcon{
+    transform: rotate(-90deg);
+}
+
+.checkboxGroup {
+    margin-top: 1rem;
+
+    :global(.navds-checkbox__label) {
+        padding: 0.1875rem;
+    }
+}

src/components/main-section/content-view/html-exporter/HtmlExporter.tsx

@@ -0,0 +1,69 @@
+import React, { useState } from 'react';
+import { CmsContentDocument } from '../../../../../common/cms-documents/content';
+import { Button, Checkbox, CheckboxGroup, Heading } from '@navikt/ds-react';
+import { classNames } from '../../../../utils/classNames';
+import { useAppState } from '../../../../context/app-state/useAppState';
+import { ArrowDownRightIcon } from '@navikt/aksel-icons';
+
+import style from './HtmlExporter.module.css';
+
+type Props = {
+    content: CmsContentDocument;
+    hidden?: boolean;
+};
+
+export const HtmlExporter = ({ content, hidden }: Props) => {
+    const { appContext } = useAppState();
+    const { basePath } = appContext;
+
+    const [versionKeysSelected, setVersionKeysSelected] = useState<string[]>([]);
+
+    const pdfApi = `${basePath}/pdf`;
+
+    const { versionKey, versions } = content;
+
+    return (
+        <div className={classNames(style.exporter, hidden && style.hidden)}>
+            <div className={style.topRow}>
+                <Heading size={'small'} level={'3'}>
+                    {'Eksporter til PDF'}
+                </Heading>
+                <Button
+                    variant={'primary'}
+                    size={'small'}
+                    as={'a'}
+                    href={`${pdfApi}/single/${versionKey}`}
+                    icon={<ArrowDownRightIcon className={style.downloadCurrentIcon} />}
+                    iconPosition={'right'}
+                    className={style.downloadCurrent}
+                >
+                    {'Last ned denne versjonen'}
+                </Button>
+            </div>
+            <Button
+                variant={'primary'}
+                size={'small'}
+                as={'a'}
+                href={`${pdfApi}/multi/${versionKeysSelected.join(',')}`}
+                disabled={versionKeysSelected.length === 0}
+            >
+                {'Last ned valgte versjoner'}
+            </Button>
+            <CheckboxGroup
+                legend={'Last ned flere versjoner'}
+                size={'small'}
+                className={style.checkboxGroup}
+                onChange={setVersionKeysSelected}
+            >
+                {versions.map((version) => {
+                    const dateTime = new Date(version.timestamp).toLocaleString('no');
+                    return (
+                        <Checkbox value={version.key} size={'small'} key={version.key}>
+                            {`${version.title} - [${dateTime}]`}
+                        </Checkbox>
+                    );
+                })}
+            </CheckboxGroup>
+        </div>
+    );
+};

src/components/main-section/content-view/xml-view/XmlView.module.css

@@ -1,6 +1,7 @@
 .container {
     position: relative;
     overflow: hidden;
+    height: 100%;
 }
 
 .xmlContainer {

src/components/main-section/view-selector/ViewSelector.tsx

@@ -5,7 +5,7 @@ import { CmsContent } from '../../../../common/cms-documents/content';
 
 import style from './ViewSelector.module.css';
 
-export type ViewState = 'html' | 'xml' | 'files' | 'none';
+export type ViewState = 'html' | 'xml' | 'files' | 'export' | 'none';
 
 type Props = {
     content: CmsContent;
@@ -36,9 +36,10 @@ export const ViewSelector = ({ content, viewState, setViewState }: Props) => {
                         }
                     }}
                 >
-                    {'Vis nettside'}
+                    {'Nettside'}
                 </ToggleGroup.Item>
             </WithTooltip>
+            {html && <ToggleGroup.Item value={'export'}>{'Eksporter'}</ToggleGroup.Item>}
             <WithTooltip tooltip={filesCount === 0 ? 'Innholdet har ingen filer' : undefined}>
                 <ToggleGroup.Item
                     value={'files'}
@@ -49,10 +50,10 @@ export const ViewSelector = ({ content, viewState, setViewState }: Props) => {
                         }
                     }}
                 >
-                    {`Vis filer (${filesCount})`}
+                    {`Filer (${filesCount})`}
                 </ToggleGroup.Item>
             </WithTooltip>
-            <ToggleGroup.Item value={'xml'}>{'Vis XML'}</ToggleGroup.Item>
+            <ToggleGroup.Item value={'xml'}>{'XML'}</ToggleGroup.Item>
         </ToggleGroup>
     );
 };