[O2B-1461] Export refactor

lib/public/components/common/dataExport/exportTriggerAndModal.js

@@ -0,0 +1,139 @@
+/**
+ * @license
+ * Copyright CERN and copyright holders of ALICE O2. This software is
+ * distributed under the terms of the GNU General Public License v3 (GPL
+ * Version 3), copied verbatim in the file "COPYING".
+ *
+ * See http://alice-o2.web.cern.ch/license for full licensing information.
+ *
+ * In applying this license CERN does not waive the privileges and immunities
+ * granted to it by virtue of its status as an Intergovernmental Organization
+ * or submit itself to any jurisdiction.
+ */
+
+import { DATA_EXPORT_TYPES } from '../../../domain/enums/DataExportTypes.js';
+import errorAlert from '../errorAlert.js';
+import spinner from '../spinner.js';
+import { h } from '/js/src/index.js';
+
+/**
+ * Export form component, containing the fields to export, the export type and the export button
+ *
+ * @param {DataExportModel} exportModel export model
+ * @param {ModalHandler} modalHandler The modal handler, used to dismiss modal after export
+ *
+ * @return {Component} the form component
+ */
+const exportForm = (exportModel, modalHandler) => {
+    const { selectedFields, selectedExportType, dataExportConfiguration } = exportModel;
+    const fields = Object.keys(dataExportConfiguration);
+
+    const fieldsSelected = selectedFields.length > 0;
+
+    const fieldsSelectionLabels = [
+        h('label.form-check-label.f4.mt1', { for: 'fields' }, 'Fields'),
+        h(
+            'label.form-check-label.f6',
+            { for: 'fields' },
+            'Select which fields to be exported. (CTRL + click for multiple selection)',
+        ),
+    ];
+
+    const fieldsSelection = h('select#fields.form-control', {
+        style: 'min-height: 20rem;',
+        multiple: true,
+        onchange: ({ target }) => exportModel.setSelectedFields(target.selectedOptions),
+    }, [
+        ...fields
+            .filter((name) => !['id', 'actions'].includes(name))
+            .map((name) => h('option', {
+                value: name,
+                selected: selectedFields.length ? selectedFields.includes(name) : false,
+            }, name)),
+    ]);
+
+    const exportTypeSelectionLabels = [
+        h('label.form-check-label.f4.mt1', 'Export type'),
+        h('label.form-check-label.f6', 'Select output format'),
+    ];
+
+    const exportTypeSelect = h('.flex-row.g3', DATA_EXPORT_TYPES.map((exportType) => {
+        const id = `data-export-type-${exportType}`;
+        return h('.form-check', [
+            h('input.form-check-input', {
+                id,
+                type: 'radio',
+                value: exportType,
+                checked: selectedExportType.length ? selectedExportType.includes(exportType) : false,
+                name: 'export-type',
+                onclick: () => exportModel.setSelectedExportType(exportType),
+            }),
+            h('label.form-check-label', {
+                for: id,
+            }, exportType),
+        ]);
+    }));
+
+    const exportBtn = h('button.shadow-level1.btn.btn-success.mt2#send', {
+        disabled: !fieldsSelected,
+        onclick: async () => {
+            await exportModel.createExport();
+            modalHandler.dismiss();
+        },
+    }, 'Export');
+
+    const dataLength = exportModel.items.match({ Success: ({ length } = {}) => length, Other: () => null });
+    const { totalExistingItemsCount } = exportModel;
+
+    const truncatedDataInfo = dataLength && dataLength < totalExistingItemsCount
+        ? h(
+            '#truncated-export-warning.warning',
+            `The data export is limited to ${dataLength} entries, only the most recent data will be exported`,
+        )
+        : null;
+
+    return [
+        truncatedDataInfo,
+        fieldsSelectionLabels,
+        fieldsSelection,
+        exportTypeSelectionLabels,
+        exportTypeSelect,
+        exportBtn,
+    ];
+};
+
+/**
+ * A function to construct the exports data screen
+ *
+ * @param {DataExportModel} exportModel export model
+ * @param {ModalHandler} modalHandler The modal handler, used to dismiss modal after export
+ * @return {Component} Return the view of the inputs
+ */
+const exportModal = (exportModel, modalHandler) => {
+    exportModel.callForData();
+
+    return h('div#export-data-modal', [
+        h('h2.w-50', 'Export data'),
+        exportModel.items.match({
+            NotAsked: () => errorAlert(),
+            Failure: (errors) => errorAlert(errors),
+            Loading: () => spinner({ size: 2, absolute: false }),
+            Other: () => exportForm(exportModel, modalHandler),
+        }),
+    ]);
+};
+
+/**
+ * Builds a button which will open popover for data export
+ *
+ * @param {DataExportModel} exportModel export model
+ * @param {ModalModel} modalModel modal model
+ * @param {object} [displayConfiguration] additional display options
+ * @param {boolean} [displayConfiguration.autoMarginLeft = true] if true margin left is set to auto, otherwise not
+ * @returns {Component} button
+ */
+export const exportTriggerAndModal = (exportModel, modalModel, { autoMarginLeft = true } = {}) =>
+    h(`button.btn.btn-primary${autoMarginLeft ? '.mlauto' : ''}#export-data-trigger`, {
+        disabled: exportModel.disabled,
+        onclick: () => modalModel.display({ content: (modalModel) => exportModal(exportModel, modalModel), size: 'medium' }),
+    }, 'Export data');

lib/public/domain/enums/DataExportTypes.js

@@ -0,0 +1,20 @@
+/**
+ * @license
+ * Copyright 2019-2020 CERN and copyright holders of ALICE O2.
+ * See http://alice-o2.web.cern.ch/copyright for details of the copyright holders.
+ * All rights not expressly granted are reserved.
+ *
+ * This software is distributed under the terms of the GNU General Public
+ * License v3 (GPL Version 3), copied verbatim in the file "COPYING".
+ *
+ * In applying this license CERN does not waive the privileges and immunities
+ * granted to it by virtue of its status as an Intergovernmental Organization
+ * or submit itself to any jurisdiction.
+ */
+
+export const DataExportTypes = Object.freeze({
+    JSON: 'JSON',
+    CSV: 'CSV',
+});
+
+export const DATA_EXPORT_TYPES = Object.values(DataExportTypes);

lib/public/models/DataExportModel.js

@@ -0,0 +1,196 @@
+/**
+ * @license
+ * Copyright CERN and copyright holders of ALICE O2. This software is
+ * distributed under the terms of the GNU General Public License v3 (GPL
+ * Version 3), copied verbatim in the file "COPYING".
+ *
+ * See http://alice-o2.web.cern.ch/license for full licensing information.
+ *
+ * In applying this license CERN does not waive the privileges and immunities
+ * granted to it by virtue of its status as an Intergovernmental Organization
+ * or submit itself to any jurisdiction.
+ */
+
+import { Observable } from '/js/src/index.js';
+import { createCSVExport, createJSONExport } from '../utilities/export.js';
+import pick from '../utilities/pick.js';
+import { DataExportTypes } from '../domain/enums/DataExportTypes.js';
+
+/**
+ * @typedef FieldExportConfiguration
+ *
+ * @property {function|null} exportFormat
+ */
+
+/**
+ * @typedef DataExportConfiguration
+ *
+ * @type {object<string, FieldExportConfiguration>} mapping: field name -> field export configuration
+ */
+
+/**
+ * Model handling export configuration and creation
+ */
+export class DataExportModel extends Observable {
+    /**
+     * Constructor
+     *
+     * @param {ObservableData<RemoteData<T[]>>} items$ observable data used as source for export
+     * @param {DataExportConfiguration} dataExportConfiguration defines selectable fields and their formatting
+     * @param {function} onDataNotAskedAction function to be called in case of missing data
+     */
+    constructor(items$, dataExportConfiguration, onDataNotAskedAction) {
+        super();
+
+        this._items$ = items$;
+        this._items$.bubbleTo(this);
+
+        this._selectedFields = [];
+
+        this._selectedExportType = DataExportTypes.JSON;
+
+        this._exportName = 'data';
+
+        this._dataExportConfiguration = dataExportConfiguration;
+        this._onDataNotAskedAction = onDataNotAskedAction;
+
+        this._disabled = null;
+
+        this._totalExistingItemsCount = null;
+    }
+
+    /**
+     * Get data export configuration
+     *
+     * @return {DataExportConfiguration} configuration
+     */
+    get dataExportConfiguration() {
+        return this._dataExportConfiguration;
+    }
+
+    /**
+     * Get total number of items that model knows they exist
+     *
+     * @return {number} totalExistingItemsCount
+     */
+    get totalExistingItemsCount() {
+        return this._totalExistingItemsCount;
+    }
+
+    /**
+     * Set total number of items that model should they exist
+     * @param {number} totalExistingItemsCount count
+     */
+    setTotalExistingItemsCount(totalExistingItemsCount) {
+        this._totalExistingItemsCount = totalExistingItemsCount;
+        this.notify();
+    }
+
+    /**
+     * State whether exporting is enabled
+     * @return {boolean} if true disabled, otherwise enabled
+     */
+    get disabled() {
+        return this._disabled;
+    }
+
+    /**
+     * Set whether exporting is enabled
+     * @param {boolean} disabled if true disabled, otherwise enabled
+     */
+    setDisabled(disabled) {
+        this._disabled = disabled;
+        this.notify();
+    }
+
+    /**
+     * If the model has no data to be exported, it calls for it via action function provided in constructor
+     * @return {Promise<void>|null} promise if data were not asked for, null otherwise
+     */
+    callForData() {
+        if (this._onDataNotAskedAction) {
+            return this.items.match({
+                NotAsked: () => this._onDataNotAskedAction(),
+                Other: () => null,
+            });
+        } else {
+            throw new Error('onDataNotAskedAction was not provided');
+        }
+    }
+
+    /**
+     * Return the current items remote data
+     *
+     * @return {RemoteData<T[]>} the items
+     */
+    get items() {
+        return this._items$.getCurrent();
+    }
+
+    /**
+     * Get export type selected by the user
+     *
+     * @return {string} export type
+     */
+    get selectedExportType() {
+        return this._selectedExportType;
+    }
+
+    /**
+     * Set export type
+     *
+     * @param {string} exportType export type
+     * @return {void}
+     */
+    setSelectedExportType(exportType) {
+        this._selectedExportType = exportType;
+        this.notify();
+    }
+
+    /**
+     * Get selected fields
+     *
+     * @return {string[]} selected fields
+     */
+    get selectedFields() {
+        return this._selectedFields;
+    }
+
+    /**
+     * Update selected fields from HTML options list
+     *
+     * @param {HTMLCollection|Array} selectedOptions options collection
+     * @return {void}
+     */
+    setSelectedFields(selectedOptions) {
+        this._selectedFields = Array.from(selectedOptions).map(({ value }) => value);
+        this.notify();
+    }
+
+    /**
+     * Create export using current items observable
+     *
+     * @return {Promise<void>} void
+     */
+    async createExport() {
+        this.items.apply({
+            Success: (items) => {
+                const { selectedFields } = this;
+
+                const formatted = items.map((item) => {
+                    const selectedEntries = Object.entries(pick(item, selectedFields));
+                    const mappedEntries = selectedEntries.map(([key, value]) => {
+                        const formatter = this.dataExportConfiguration[key]?.exportFormat || ((v) => v);
+                        return [key, formatter(value, item)];
+                    });
+
+                    return Object.fromEntries(mappedEntries);
+                });
+
+                this.selectedExportType === DataExportTypes.JSON
+                    ? createJSONExport(formatted, `${this._exportName}.json`, 'application/json')
+                    : createCSVExport(formatted, `${this._exportName}.csv`, 'text/csv;charset=utf-8;');
+            },
+        });
+    }
+}