Fix data reload, better demo

packages/data-table-view/src/data-table-view.js

@@ -19,6 +19,15 @@ class DataTableView extends LitElement {
         this.apiUrl = null;
         this.whitelist_cols = '*';
         this.blacklist_cols = '';
+        this.table_columns = []; // all possible columns, defined by API entity
+        this.show_columns = []; // all columns visible in table, defined by property whhitelist/blacklist
+        this.display_columns = []; // all possible columns, in desired order for the table
+        // datatable properties
+        this.table = null;
+        this.paging = 1;
+        this.searching = 1;
+        //
+        this.is_loading = false;
     }
 
     static get properties() {
@@ -30,6 +39,13 @@ class DataTableView extends LitElement {
             apiUrl: { type: String, attribute: false },
             whitelist_cols: { type: String, attribute: 'whitelisted-columns' },
             blacklist_cols: { type: String, attribute: 'blacklisted-columns' },
+            table_columns: { type: Array, attribute: false },
+            show_columns: { type: Array, attribute: false },
+            display_columns: { type: Array, attribute: false },
+            table: { type: Object, attribute: false },
+            paging: { type: String },
+            searching: { type: String },
+            is_loading: { type: Boolean },
         };
     }
 
@@ -40,12 +56,71 @@ class DataTableView extends LitElement {
         JSONLD.initialize(this.entryPointUrl, function (jsonld) {
             that.jsonld = jsonld;
             that.apiUrl = that.jsonld.getApiUrlForIdentifier("http://schema.org/" + that.value);
+            that.table_columns = that.jsonld.entities[that.value]['hydra:supportedProperty'].map(obj => obj['hydra:title']);
+
+            // display empty table
+            that.setup_columns();
+            let columns = [];
+            for (let i = 0; i < that.display_columns.length; ++i) {
+                columns[i] = {
+                    title: that.display_columns[i],
+                    visible: that.show_columns.indexOf(that.display_columns[i]) > -1
+                };
+            }
+            that.set_datatable(columns);
+            if (that.filter) {
+                that.loadWebPageElement();
+            }
         });
 
         // disabled, load first on toggle to visible
         window.addEventListener("vpu-auth-init", () => that.loadWebPageElement());
     }
 
+    setup_columns() {
+        //let cols = this.table_columns.slice();
+
+        if (this.whitelist_cols === '*') {
+            const blacklist_cols = this.blacklist_cols.split(' ');
+            this.show_columns = this.table_columns.filter(col => blacklist_cols.indexOf(col) === -1);
+        } else {
+            this.show_columns = this.whitelist_cols.split(' ');
+        }
+        this.display_columns = this.show_columns.slice();
+        for(let i=0; i < this.table_columns.length; ++i) {
+            if (this.display_columns.indexOf(this.table_columns[i]) === -1)
+                this.display_columns.push(this.table_columns[i]);
+        }
+
+    }
+
+    set_datatable(columns) {
+        const lang_de_url = 'https://cdn.datatables.net/plug-ins/1.10.19/i18n/German.json';
+        const lang_en_url = 'https://cdn.datatables.net/plug-ins/1.10.19/i18n/English.json';
+
+        this.table = $(this.shadowRoot.querySelector('#dt')).DataTable({
+            destroy: true,
+            language: {
+                url: this.lang === 'de' ? lang_de_url : lang_en_url,
+            },
+            columns: columns,
+            data: [],
+            paging: this.paging > 0,
+            searching: this.searching > 0,
+        });
+    }
+
+    update_datatable(columns, rows) {
+        //console.log('rows = ' + rows);
+        const that = this;
+        if (this.table) {
+            this.table.clear();
+            columns.forEach(function (item, index) { that.table.columns([index]).visible(item.visible === true); });
+            rows.forEach(row => this.table.row.add(row));
+            this.table.draw();
+        }
+    }
+
     loadWebPageElement() {
         if (window.VPUAuthToken === undefined || window.VPUAuthToken === "") {
             return;
@@ -57,7 +132,8 @@ class DataTableView extends LitElement {
         const apiUrlWithFilter = this.apiUrl + '?search=' + this.filter;
         console.log('apiUrlWithFilter = ' + apiUrlWithFilter);
 
-        var that = this;
+        const that = this;
+        this.is_loading = true;
 
         fetch(apiUrlWithFilter, {
             headers: {
@@ -68,44 +144,26 @@ class DataTableView extends LitElement {
             .then(res => res.json())
             .then(function (data) {
                 // TODO
-                console.log(data['hydra:member']);
-                const persons = data['hydra:member'];
-                let cols = [];
-                if (that.whitelist_cols === '*') {
-                    const blacklist_cols = that.blacklist_cols.split(' ');
-                    for (let i = 0; i < persons.length; ++i) {
-                        let new_cols = Object.keys(persons[i]);
-                        cols = cols.concat(new_cols.filter(item => (!~cols.indexOf(item) && !~blacklist_cols.indexOf(item))));
-                    }
-                } else {
-                    cols = that.whitelist_cols.split(' ');
-                }
-                console.log('cols = ' + cols);
+                that.setup_columns();
+
+                const items = data['hydra:member'];
                 let rows = [];
                 let columns = [];
-                for(let i=0; i < cols.length; ++i) {
-                    columns[i] = { title: cols[i] };
-                    for(let j=0; j < persons.length; ++j) {
+                for(let i=0; i < that.display_columns.length; ++i) {
+                    columns[i] = {
+                        title: that.display_columns[i],
+                        visible: that.show_columns.indexOf(that.display_columns[i]) > -1
+                    };
+                    for(let j=0; j < items.length; ++j) {
                         if (rows[j] === undefined) {
                             rows[j] = [];
                         }
-                        rows[j][i] = persons[j][cols[i]] || '';
+                        rows[j][i] = items[j][that.display_columns[i]] || '';
                     }
                 }
 
-                const lang_de_url = 'https://cdn.datatables.net/plug-ins/1.10.19/i18n/German.json';
-                const lang_en_url = 'https://cdn.datatables.net/plug-ins/1.10.19/i18n/English.json';
-
-                const table = $(that.shadowRoot.querySelector('#dt')).DataTable({
-                    destroy: true,
-                    language: {
-                        url: that.lang === 'de' ? lang_de_url : lang_en_url,
-                    },
-                    columns: columns,
-                    data: rows,
-                    }
-                );
-
+                that.update_datatable(columns, rows);
+                that.is_loading = false;
             })
             .catch();
     }
@@ -120,6 +178,8 @@ class DataTableView extends LitElement {
                 case "filter":
                 case "whitelist_cols":
                 case "blacklist_cols":
+                case "paging":
+                case "searching":
                     this.loadWebPageElement();
                     break;
                 case "value":
@@ -138,13 +198,26 @@ class DataTableView extends LitElement {
     }
 
     render() {
-        var dt_css = getAssetURL('datatables/css/jquery.dataTables.min.css')
+        let dt_css = getAssetURL('datatables/css/jquery.dataTables.min.css');
         return html`
             <link rel="stylesheet" href="${dt_css}">
             <style>
+                #cover {
+                    min-width: 100px;
+                    display: ${this.is_loading ? 'block' : 'none'};
+                    position: relative; height: 100%; width: 100%; top: 0; left: 0; background: #fff; z-index:9999;
+                }
+                #cover img {
+                    display: block;
+                    margin 0 auto;
+                }
             </style>
-            <table id="dt" class="display" style="width:100%">
-            </table>
+            <div id="dt-parent">
+                <div id="cover">
+                    <img src="data:image/gif;base64,R0lGODlhEAAQAPQAAP///wAAAPj4+Dg4OISEhAYGBiYmJtbW1qioqBYWFnZ2dmZmZuTk5JiYmMbGxkhISFZWVgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH+GkNyZWF0ZWQgd2l0aCBhamF4bG9hZC5pbmZvACH5BAAKAAAAIf8LTkVUU0NBUEUyLjADAQAAACwAAAAAEAAQAAAFUCAgjmRpnqUwFGwhKoRgqq2YFMaRGjWA8AbZiIBbjQQ8AmmFUJEQhQGJhaKOrCksgEla+KIkYvC6SJKQOISoNSYdeIk1ayA8ExTyeR3F749CACH5BAAKAAEALAAAAAAQABAAAAVoICCKR9KMaCoaxeCoqEAkRX3AwMHWxQIIjJSAZWgUEgzBwCBAEQpMwIDwY1FHgwJCtOW2UDWYIDyqNVVkUbYr6CK+o2eUMKgWrqKhj0FrEM8jQQALPFA3MAc8CQSAMA5ZBjgqDQmHIyEAIfkEAAoAAgAsAAAAABAAEAAABWAgII4j85Ao2hRIKgrEUBQJLaSHMe8zgQo6Q8sxS7RIhILhBkgumCTZsXkACBC+0cwF2GoLLoFXREDcDlkAojBICRaFLDCOQtQKjmsQSubtDFU/NXcDBHwkaw1cKQ8MiyEAIfkEAAoAAwAsAAAAABAAEAAABVIgII5kaZ6AIJQCMRTFQKiDQx4GrBfGa4uCnAEhQuRgPwCBtwK+kCNFgjh6QlFYgGO7baJ2CxIioSDpwqNggWCGDVVGphly3BkOpXDrKfNm/4AhACH5BAAKAAQALAAAAAAQABAAAAVgICCOZGmeqEAMRTEQwskYbV0Yx7kYSIzQhtgoBxCKBDQCIOcoLBimRiFhSABYU5gIgW01pLUBYkRItAYAqrlhYiwKjiWAcDMWY8QjsCf4DewiBzQ2N1AmKlgvgCiMjSQhACH5BAAKAAUALAAAAAAQABAAAAVfICCOZGmeqEgUxUAIpkA0AMKyxkEiSZEIsJqhYAg+boUFSTAkiBiNHks3sg1ILAfBiS10gyqCg0UaFBCkwy3RYKiIYMAC+RAxiQgYsJdAjw5DN2gILzEEZgVcKYuMJiEAOwAAAAAAAAAAAA==">
+                </div>
+                <table id="dt" class="display" style="width:100%"></table>
+            </div>
         `;
     }
 }

packages/data-table-view/src/demo.js

@@ -33,7 +33,6 @@ class DataTableViewDemo extends LitElement {
     }
 
     colsChange(e) {
-        alert('colsChange: ' + e.target.value);
         let datatable = this.shadowRoot.querySelector('#dt1');
         if (datatable === undefined) { alter('datatable not found'); return; }
         datatable.setAttribute('whitelisted-columns', e.target.value);
@@ -47,6 +46,11 @@ class DataTableViewDemo extends LitElement {
                     padding: 10px;
                     border: 1px solid orange;
                 }
+                .box2 {
+                    margin: 10px;
+                    padding: 10px;
+                    border: 1px solid green;
+                }
             </style>
             <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.min.css">
 
@@ -58,6 +62,7 @@ class DataTableViewDemo extends LitElement {
                     <vpu-auth lang="${this.lang}" client-id="${setting('keyCloakClientId')}" load-person force-login></vpu-auth>
                 </div>
                 <div class="content">
+                    <h4>DataTable: paging and searching</h4>
                     <p>
                         <label for="filter">Filter für die Suche:</label>
                         <input type="text" name="filter" id="filter" value="" placeholder="Geben Sie mindestens 3 Zeichen ein" @change="${this.filterChange}">
@@ -67,14 +72,32 @@ class DataTableViewDemo extends LitElement {
                         <input type="text" name="columns" id="columns" value="*" placeholder="Geben Sie einen Stern * für alle ein" @change="${this.colsChange}">
                     </p>
                     <div class="box">
-                    <vpu-data-table-view
-                        lang="${this.lang}"
-                        value="Person"
-                        filter=""
-                        whitelisted-columns="*"
-                        blacklisted-columns="@id @type functions roles accountTypes"
-                        id="dt1"
-                    ></vpu-data-table-view>
+                        <vpu-data-table-view
+                            lang="${this.lang}"
+                            value="Person"
+                            filter=""
+                            whitelisted-columns="*"
+                            blacklisted-columns="phoneExtension name"
+                            id="dt1"
+                            paging="1"
+                        ></vpu-data-table-view>
+                    </div>
+                </div>
+            </section>
+            <section class="section">
+                <div class="content">
+                <h4>DataTable: no paging, no searching</h4>
+                    <div class="box2">
+                        <vpu-data-table-view
+                            lang="${this.lang}"
+                            value="Person"
+                            filter="Ab"
+                            whitelisted-columns="name telephone email"
+                            blacklisted-columns=""
+                            id="dt2"
+                            paging="0"
+                            searching="0"
+                        ></vpu-data-table-view>
                     </div>
                 </div>
             </section>