@dvrd/dvr-controls 1.0.14 → 1.0.16

package/src/js/pdf/settings/invoiceTable/pdfInvoiceTableSettings.tsx

@@ -0,0 +1,141 @@
+/*
+ * Copyright (c) 2021. Dave van Rijn Development
+ */
+import './style/pdfInvoiceTableSettings.scss';
+
+import React, {PureComponent} from 'react';
+import PdfInvoiceTable from "../../invoiceTable/pdfInvoiceTable";
+import NumberInput from "../../../input/number/numberInput";
+import {debug} from "../../../util/miscUtil";
+import {ElementPosition} from "../../../util/interfaces";
+import {fontItems} from "../../../util/pdfUtil";
+import {ColorPicker, Select} from "../../../../../index";
+import IconButton, {IconButtonType} from "../buttons/iconButton";
+
+interface Props {
+    element: PdfInvoiceTable;
+}
+
+interface State {
+    widths: number[];
+    color: string;
+    colorPickerActive: boolean;
+    alignment?: ElementPosition;
+}
+
+const TITLES = ['Productnaam', 'Aantal', 'Prijs', 'BTW', 'Subtotaal'];
+
+export default class PdfInvoiceTableSettings extends PureComponent<Props, State> {
+    constructor(props: Props) {
+        super(props);
+        const settings = props.element.getSettings();
+        this.state = {
+            widths: settings.widths,
+            color: settings.color,
+            colorPickerActive: false,
+            alignment: settings.alignment,
+        };
+    }
+
+    onCloseColorPicker = () => {
+        this.setState({colorPickerActive: false});
+    };
+
+    onOpenColorPicker = () => {
+        this.setState({colorPickerActive: true});
+    };
+
+    onPickColor = (close: boolean = true) => (color: string) => {
+        const {element} = this.props;
+        if (close)
+            this.setState({colorPickerActive: false, color}, () => {
+                element.setSetting('color', color)
+            });
+        else this.setState({color}, () => {
+            element.setSetting('color', color, undefined, false);
+        });
+    };
+
+    onChangeWidth = (index: number) => (value: number) => {
+        const {element} = this.props, widths = element.getSettings().widths.slice(),
+            remainder = this.getRemainingWidth(index);
+        debug('Remainder', {remainder});
+        if (value > remainder) value = remainder;
+        widths[index] = value;
+        element.setSetting('widths', widths);
+        this.setState({widths});
+    };
+
+    onToggleAlignment = (type: IconButtonType) => () => {
+        const {alignment} = this.state, {element} = this.props;
+        let nextAlignment: ElementPosition | undefined;
+        if (type === IconButtonType.LEFT)
+            nextAlignment = alignment === ElementPosition.LEFT ? undefined : ElementPosition.LEFT;
+        else if (type === IconButtonType.CENTER)
+            nextAlignment = alignment === ElementPosition.CENTER ? undefined : ElementPosition.CENTER;
+        else if (type === IconButtonType.RIGHT)
+            nextAlignment = alignment === ElementPosition.RIGHT ? undefined : ElementPosition.RIGHT;
+        element.setSetting('alignment', nextAlignment, () => {
+            this.setState({alignment: nextAlignment});
+        });
+    }
+
+    getRemainingWidth = (excludeIndex: number): number => {
+        const {widths} = this.state;
+        let remainder: number = 100;
+        for (let i = 0; i < widths.length; i++) {
+            if (i === excludeIndex) continue;
+            remainder -= widths[i];
+        }
+        return remainder;
+    }
+
+    renderWidth = (value: number, index: number) => {
+        const title = TITLES[index];
+        return (
+            <NumberInput key={index} value={value.toString()} onChange={this.onChangeWidth(index)} label={title}
+                         ornaments={{
+                             element: <span style={{cursor: 'text'}}>%</span>,
+                             placement: ElementPosition.RIGHT,
+                             allowPropagation: true
+                         }} asNumber/>
+        );
+    };
+
+    render = () => {
+        const {widths, colorPickerActive, color, alignment} = this.state, {element} = this.props,
+            settings = element.getSettings();
+        return (
+            <div className='pdf-invoice-table-settings'>
+                <label className='settings-label'>Kolom breedtes</label>
+                <div className='center-btn'>
+                    <IconButton onClick={this.onToggleAlignment} active={alignment === ElementPosition.LEFT}
+                                type={IconButtonType.LEFT} title='Links'/>
+                    <IconButton onClick={this.onToggleAlignment} active={alignment === ElementPosition.CENTER}
+                                type={IconButtonType.CENTER} title='Centreren'/>
+                    <IconButton onClick={this.onToggleAlignment} active={alignment === ElementPosition.RIGHT}
+                                type={IconButtonType.RIGHT} title='Rechts'/>
+                </div>
+                {widths.map(this.renderWidth)}
+                <div className='divider'/>
+                <label className='settings-label'>Tekstgrootte</label>
+                <Select items={fontItems} value={settings.font} onSelect={element.changeSetting('font')}
+                        label='Lettertype' selectOnly unControlled itemsHeight='15rem' fullWidth/>
+                <NumberInput value={settings.fontSize.toString()} onChange={element.changeSetting('fontSize')} asNumber
+                             ornaments={{
+                                 element: <span style={{cursor: 'text'}}>px</span>,
+                                 placement: ElementPosition.RIGHT,
+                                 allowPropagation: true
+                             }} wholeNumbers unControlled/>
+                <div className='settings-color-picker'>
+                    <label className='picker-label'>Tekstkleur:</label>
+                    <div className='color-preview' style={{backgroundColor: color}}
+                         onClick={this.onOpenColorPicker}/>
+                    <ColorPicker onClose={this.onCloseColorPicker} onSubmit={this.onPickColor()} closeable={false}
+                                 onPreChange={this.onPickColor(false)} color={settings.color}
+                                 visible={colorPickerActive} className='text-color-picker' transparent/>
+                </div>
+            </div>
+        )
+    }
+}

package/src/js/pdf/settings/invoiceTable/style/pdfInvoiceTableSettings.scss

@@ -0,0 +1,38 @@
+/*!
+ * Copyright (c) 2021. Dave van Rijn Development
+ */
+
+@import '../../../../../style/variables';
+
+.pdf-invoice-table-settings {
+  display: grid;
+  grid-template-columns: repeat(2, calc(50% - .125rem));
+  grid-gap: .5rem;
+
+  .center-btn {
+    grid-column-start: span 2;
+    justify-items: start;
+  }
+
+  .settings-label {
+    grid-column-start: span 2;
+    font-weight: 500;
+  }
+
+  .divider {
+    grid-column-start: span 2;
+    width: 100%;
+    height: 1px;
+    background-color: $color-gray-4;
+    margin: .5rem 0;
+  }
+
+  @include break-lg-down {
+    grid-template-columns: auto;
+    grid-column-gap: 0;
+
+    .center-btn, .settings-label, .divider {
+      grid-column-start: unset;
+    }
+  }
+}

package/src/js/pdf/settings/pdfElementSettings.tsx

@@ -0,0 +1,86 @@
+/*
+ * Copyright (c) 2021. Dave van Rijn Development
+ */
+import './style/pdfElementSettings.scss';
+
+import React, {MouseEventHandler, PureComponent} from 'react';
+import {PdfElement} from "../element/pdfElement";
+import PdfText from "../text/pdfText";
+import {PDFElementPersist, PdfFont, PDFTextVariables} from "../../util/interfaces";
+import {Button, fontItems, Select, showDialog, stopPropagation} from "../../../../";
+import PdfTextSettings from "./text/pdfTextSettings";
+import PdfImage from "../image/pdfImage";
+import PdfImageSettings from "./image/pdfImageSettings";
+import PdfInvoiceTable from "../invoiceTable/pdfInvoiceTable";
+import PdfInvoiceTableSettings from "./invoiceTable/pdfInvoiceTableSettings";
+
+interface Props {
+    onReset: MouseEventHandler;
+    onChangeFont: (font: PdfFont) => void;
+    element: PdfElement | null;
+    customVariables?: PDFTextVariables;
+    font: PdfFont;
+    supportMultiPage: boolean;
+}
+
+export default class PdfElementSettings extends PureComponent<Props> {
+    onClickDelete = (evt: React.MouseEvent) => {
+        const {element} = this.props;
+        if (element) {
+            const persistence: PDFElementPersist = element.isPersistent();
+            if (persistence === PDFElementPersist.PERSISTENT) return;
+            else if (persistence === PDFElementPersist.CONFIRM) {
+                showDialog('We raden aan om dit element wel te tonen op de factuur. Weet je zeker dat je dit ' +
+                    'element wilt verwijderen?', 'Element verwijderen',
+                    ['Nee', {label: 'Ja', onClick: element.onClickDelete}]);
+            } else element.onClickDelete(evt);
+        }
+    };
+
+    getTitle = (): string => {
+        const {element} = this.props;
+        if (element instanceof PdfText) return 'Tekst opties';
+        if (element instanceof PdfImage) return 'Afbeelding opties';
+        if (element instanceof PdfInvoiceTable) return 'Factuurregel opties';
+        return 'Opties'
+    };
+
+    renderSettings = () => {
+        const {element, customVariables, supportMultiPage} = this.props;
+        if (element === null) return this.renderMainSettings();
+        if (element instanceof PdfText) return <PdfTextSettings element={element} customVariables={customVariables}
+                                                                supportMultiPage={supportMultiPage}/>;
+        if (element instanceof PdfImage) return <PdfImageSettings element={element}
+                                                                  supportMultiPage={supportMultiPage}/>;
+        if (element instanceof PdfInvoiceTable) return <PdfInvoiceTableSettings element={element}/>
+        return null;
+    };
+
+    renderMainSettings = () => {
+        const {font, onChangeFont} = this.props;
+        return (
+            <div className='main-settings'>
+                <Select items={fontItems} value={font} onSelect={onChangeFont} label='Standaard lettertype'
+                        selectOnly fullWidth/>
+            </div>
+        )
+    };
+
+    render = () => {
+        const {element, onReset} = this.props, deleteAble = element?.isPersistent() !== PDFElementPersist.PERSISTENT;
+        return (
+            <div className='pdf-element-settings' onClick={stopPropagation}>
+                <h2 className='settings-title'>{this.getTitle()}</h2>
+                {!element && <label className='empty-label'>Selecteer een element om opties te weergeven</label>}
+                {this.renderSettings()}
+                {element !== null && (
+                    <div className='buttons-container'>
+                        <Button onClick={onReset} label='Oké' className='reset-btn'/>
+                        {deleteAble &&
+                            <Button onClick={this.onClickDelete} label='Verwijderen' primary={false} textColor='red'/>}
+                    </div>
+                )}
+            </div>
+        );
+    }
+};

package/src/js/pdf/settings/style/pdfElementSettings.scss

@@ -0,0 +1,56 @@
+/*!
+ * Copyright (c) 2021. Dave van Rijn Development
+ */
+
+@import '../../../../style/variables';
+
+.pdf-element-settings {
+  background-color: white;
+  padding: 1rem;
+  border: 1px solid $color-gray-7;
+  border-radius: .5rem;
+  max-width: 30rem;
+
+  .settings-title {
+    margin-bottom: .5rem;
+  }
+
+  .empty-label {
+    font-size: .9rem;
+  }
+
+  .divider {
+    width: 100%;
+    height: 1px;
+    background-color: $color-gray-4;
+    margin: .5rem 0;
+  }
+
+  .buttons-container {
+    display: flex;
+    justify-content: space-between;
+    margin-top: .5rem;
+  }
+
+  .settings-color-picker {
+    display: flex;
+    align-items: center;
+    position: relative;
+
+    .picker-label {
+      margin-right: .5rem;
+    }
+
+    .color-preview {
+      width: 2rem;
+      height: 1rem;
+      cursor: pointer;
+      box-shadow: -2px -2px 5px rgba(0,0,0,.25) inset, 2px 2px 5px white inset;
+      border-radius: 10px;
+    }
+
+    .text-color-picker {
+      position: absolute;
+    }
+  }
+}

package/src/js/pdf/settings/text/pdfTextSettings.tsx

@@ -0,0 +1,202 @@
+/*
+ * Copyright (c) 2021. Dave van Rijn Development
+ */
+import './style/pdfTextSettings.scss';
+
+import React, {PureComponent} from 'react';
+import PdfText from "../../text/pdfText";
+import {
+    ElementPosition,
+    IndexedObject,
+    PDFDisplay,
+    PdfFont,
+    PDFTextParams,
+    PDFTextVariables,
+    SelectItemShape
+} from "../../../util/interfaces";
+import {ColorPicker, DvrdSelect, fontItems, getPdfVariables, NumberField, Select} from "../../../../../index";
+import classNames from 'classnames';
+import IconButton, {IconButtonType} from "../buttons/iconButton";
+
+interface Props {
+    element: PdfText;
+    customVariables?: PDFTextVariables;
+    supportMultiPage: boolean;
+}
+
+interface State extends IndexedObject<any> {
+    openVariables: keyof PDFTextVariables;
+    bold: boolean;
+    underline: boolean;
+    italic: boolean;
+    alignment?: ElementPosition;
+    font: PdfFont;
+    color: string;
+    colorPickerActive: boolean;
+    display: PDFDisplay;
+}
+
+const displayItems: SelectItemShape[] = [
+    {value: PDFDisplay.ALL_PAGES, label: 'Alle pagina\'s'},
+    {value: PDFDisplay.FIRST_PAGE, label: 'Alleen eerste pagina'},
+    {value: PDFDisplay.LAST_PAGE, label: 'Alleen laatste pagina'},
+]
+
+export default class PdfTextSettings extends PureComponent<Props, State> {
+    constructor(props: Props) {
+        super(props);
+        const settings = props.element.getSettings();
+        this.state = {
+            openVariables: 'company',
+            bold: settings.bold,
+            underline: settings.underline,
+            italic: settings.italic,
+            alignment: settings.alignment,
+            font: settings.font,
+            color: settings.color,
+            colorPickerActive: false,
+            display: settings.display ?? PDFDisplay.ALL_PAGES,
+        };
+    }
+
+    onChangeDisplay = (value: PDFDisplay) => {
+        const {element} = this.props;
+        element.setSetting('display', value, () => {
+            this.setState({display: value});
+        })
+    }
+
+    onCloseColorPicker = () => {
+        this.setState({colorPickerActive: false});
+    };
+
+    onOpenColorPicker = () => {
+        this.setState({colorPickerActive: true});
+    };
+
+    onPickColor = (close: boolean = true) => (color: string) => {
+        const {element} = this.props;
+        if (close)
+            this.setState({colorPickerActive: false, color}, () => {
+                element.setSetting('color', color)
+            });
+        else this.setState({color}, () => {
+            element.setSetting('color', color, undefined, false);
+        });
+    };
+
+    onClickVariablesTitle = (type: keyof PDFTextVariables) => () => {
+        this.setState({openVariables: type});
+    };
+
+    onClickTextVariable = (variable: string) => () => {
+        const {element} = this.props;
+        if (element instanceof PdfText) element.insertText(`{${variable}}`);
+    };
+
+    onToggleSetting = (type: IconButtonType) => () => {
+        const {element} = this.props, {bold, underline, italic} = this.state;
+        let value: boolean;
+        if (type === IconButtonType.BOLD) value = !bold;
+        else if (type === IconButtonType.UNDERLINE) value = !underline;
+        else value = !italic;
+        element.setSetting(type, value, () => {
+            this.setState({[type]: value});
+        });
+    };
+
+    onToggleAlignment = (type: IconButtonType) => () => {
+        const {alignment} = this.state, {element} = this.props;
+        let nextAlignment: ElementPosition | undefined;
+        if (type === IconButtonType.LEFT)
+            nextAlignment = alignment === ElementPosition.LEFT ? undefined : ElementPosition.LEFT;
+        else if (type === IconButtonType.CENTER)
+            nextAlignment = alignment === ElementPosition.CENTER ? undefined : ElementPosition.CENTER;
+        else if (type === IconButtonType.RIGHT)
+            nextAlignment = alignment === ElementPosition.RIGHT ? undefined : ElementPosition.RIGHT;
+        element.setSetting('alignment', nextAlignment, () => {
+            this.setState({alignment: nextAlignment});
+        });
+    }
+
+    renderTextVariables = () => {
+        const {customVariables} = this.props, variables: PDFTextVariables = getPdfVariables(customVariables),
+            {client, company, invoice} = variables;
+        return (
+            <div className='text-variables-container'>
+                <h3 className='variables-container-title'>Tekstvariabelen</h3>
+                <div className='variable-containers'>
+                    {this.renderVariables('company', 'Bedrijf', company)}
+                    {this.renderVariables('client', 'Klant', client)}
+                    {this.renderVariables('invoice', 'Factuur', invoice)}
+                </div>
+            </div>
+        )
+    };
+
+    renderVariables = (type: keyof PDFTextVariables, title: string, variables: IndexedObject<string>) => (
+        <div className={classNames('variables-container', this.state.openVariables === type && 'open')}>
+            <label className='variables-title' onClick={this.onClickVariablesTitle(type)}>{title}</label>
+            <div className='variables-main-container'>
+                <div className='variables'>
+                    {Object.keys(variables).map((key: string, index: number) => (
+                        <label key={index} className='text-variable'
+                               onClick={this.onClickTextVariable(key)}>{variables[key]}</label>
+                    ))}
+                </div>
+            </div>
+        </div>
+    );
+
+    render = () => {
+        const {element, supportMultiPage} = this.props,
+            {bold, underline, italic, alignment, colorPickerActive, color, display} = this.state,
+            settings: PDFTextParams = element.getSettings();
+        return (
+            <div className='pdf-text-settings'>
+                {supportMultiPage && <>
+                    <label className='settings-title'>Weergave</label>
+                    <DvrdSelect onChange={this.onChangeDisplay} value={display} items={displayItems}/>
+                </>}
+                <div className='divider'/>
+                <div className='text-settings'>
+                    <IconButton onClick={this.onToggleSetting} active={bold} type={IconButtonType.BOLD}
+                                title='Vet'/>
+                    <IconButton onClick={this.onToggleSetting} active={underline} type={IconButtonType.UNDERLINE}
+                                title='Onderstrepen'/>
+                    <IconButton onClick={this.onToggleSetting} active={italic} type={IconButtonType.ITALIC}
+                                title='Cursief'/>
+                    <IconButton onClick={this.onToggleAlignment} active={alignment === ElementPosition.LEFT}
+                                type={IconButtonType.LEFT} title='Links'/>
+                    <IconButton onClick={this.onToggleAlignment} active={alignment === ElementPosition.CENTER}
+                                type={IconButtonType.CENTER} title='Centreren'/>
+                    <IconButton onClick={this.onToggleAlignment} active={alignment === ElementPosition.RIGHT}
+                                type={IconButtonType.RIGHT} title='Rechts'/>
+                </div>
+                <div className='divider'/>
+                <div className='font-settings'>
+                    <Select items={fontItems} value={settings.font} onSelect={element.changeSetting('font')}
+                            label='Lettertype' selectOnly unControlled itemsHeight='15rem' fullWidth/>
+                    <NumberField value={settings.fontSize.toString()} onChange={element.changeSetting('fontSize')}
+                                 label='Tekstgrootte' className='font-size'
+                                 ornaments={{
+                                     element: <span style={{cursor: 'text'}}>px</span>,
+                                     placement: ElementPosition.RIGHT,
+                                     allowPropagation: true
+                                 }} wholeNumbers
+                                 asNumber unControlled/>
+                    <div className='settings-color-picker'>
+                        <label className='picker-label'>Tekstkleur:</label>
+                        <div className='color-preview' style={{backgroundColor: color}}
+                             onClick={this.onOpenColorPicker}/>
+                        <ColorPicker onClose={this.onCloseColorPicker} onSubmit={this.onPickColor()} closeable={false}
+                                     onPreChange={this.onPickColor(false)} color={settings.color}
+                                     visible={colorPickerActive} className='text-color-picker' transparent/>
+                    </div>
+                </div>
+                <div className='divider'/>
+                {!settings.disabled && this.renderTextVariables()}
+            </div>
+        )
+    };
+}

package/src/js/pdf/settings/text/style/pdfTextSettings.scss

@@ -0,0 +1,94 @@
+/*!
+ * Copyright (c) 2021. Dave van Rijn Development
+ */
+
+@import '../../../../../style/variables';
+
+.pdf-text-settings {
+  display: grid;
+  grid-template-columns: auto;
+  grid-row-gap: .5rem;
+  justify-items: start;
+  align-items: start;
+
+  .text-settings {
+    display: flex;
+    align-items: flex-end;
+  }
+
+  .font-settings {
+    display: grid;
+    grid-template-columns: auto;
+    grid-row-gap: .5rem;
+    width: 100%;
+
+    .font-size {
+      width: 6rem;
+    }
+  }
+
+  .text-variables-container {
+    .variables-container-title {
+      margin-bottom: .5rem;
+    }
+
+    .variable-containers {
+      display: grid;
+      grid-template-columns: auto;
+      grid-row-gap: .5rem;
+      align-items: start;
+
+      .variables-container {
+        display: flex;
+        flex-direction: column;
+
+        .variables-title {
+          border-bottom: 2px solid $color-gray-4;
+          cursor: pointer;
+          padding: .5rem .25rem;
+          font-weight: 500;
+          font-size: .9rem;
+        }
+
+        .variables-main-container {
+          height: 0;
+          overflow: hidden;
+
+          .variables {
+            padding: .5rem;
+            display: flex;
+            flex-wrap: wrap;
+            align-items: flex-start;
+
+            .text-variable {
+              @include backgroundShadow;
+              padding: .2rem .4rem;
+              border-radius: .5rem;
+              cursor: pointer;
+              margin-right: .5rem;
+              margin-bottom: .5rem;
+              white-space: nowrap;
+              user-select: none;
+              transition: background-color .2s ease-in-out;
+
+              &:last-child {
+                margin-right: 0;
+              }
+
+              &:hover {
+                background-color: $color-gray-7;
+              }
+            }
+          }
+        }
+
+        &.open {
+          .variables-main-container {
+            height: fit-content;
+            overflow: auto;
+          }
+        }
+      }
+    }
+  }
+}