refactor(php): use file-row component in files table

web/documentserver-example/php/assets/components/file-row.js

@@ -0,0 +1,117 @@
+export class FileRow extends HTMLTableRowElement {
+    constructor() {
+        super();
+    }
+
+    connectedCallback() {
+        const encodedTitle = encodeURIComponent(this.file.title);
+        const encodedUser = encodeURIComponent(this.user);
+        const directUrl = this.directUrl ? "&directUrl=true&" : "";
+
+        this.innerHTML = `
+            <td class="contentCells">
+                <a class="stored-edit ${this.file.type}" href="editor?fileID=${encodedTitle}&user=${encodedUser + directUrl}" target="_blank">
+                <span>${this.file.title}</span>
+                </a>
+            </td>
+            ${this.file.editable ? `
+                <td class="contentCells contentCells-icon">
+                <a href="editor?fileID=${encodedTitle}&user=${encodedUser + directUrl}&action=edit&type=desktop" target="_blank">
+                    <img src="assets/images/desktop.svg" alt="Open in editor for full size screens" title="Open in editor for full size screens"/>
+                </a>
+                </td>
+                <td class="contentCells contentCells-icon">
+                <a href="editor?fileID=${encodedTitle}&user=${encodedUser + directUrl}&action=edit&type=mobile" target="_blank">
+                    <img src="assets/images/mobile.svg" alt="Open in editor for mobile devices" title="Open in editor for mobile devices" />
+                </a>
+                </td>
+                <td class="contentCells contentCells-icon">
+                <a href="editor?fileID=${encodedTitle}&user=${encodedUser + directUrl}&action=comment&type=desktop" target="_blank">
+                    <img src="assets/images/comment.svg" alt="Open in editor for comment" title="Open in editor for comment" />
+                </a>
+                </td>
+                ${this.file.type === "word" ? `
+                <td class="contentCells contentCells-icon">
+                    <a href="editor?fileID=${encodedTitle}&user=${encodedUser + directUrl}&action=review&type=desktop" target="_blank">
+                    <img src="assets/images/review.svg" alt="Open in editor for review" title="Open in editor for review" />
+                    </a>
+                </td>
+                <td class="contentCells contentCells-icon ">
+                    <a href="editor?fileID=${encodedTitle}&user=${encodedUser + directUrl}&action=blockcontent&type=desktop" target="_blank">
+                    <img src="assets/images/block-content.svg" alt="Open in editor without content control modification" title="Open in editor without content control modification"
+                    </a>
+                </td>
+                `: ``}
+                ${this.file.type === "cell" ? `
+                <td class="contentCells contentCells-icon">
+                    <a href="editor?fileID=${encodedTitle}&user=${encodedUser + directUrl}&action=filter&type=desktop" target="_blank">
+                    <img src="assets/images/filter.svg" alt="Open in editor without access to change the filter" title="Open in editor without access to change the filter" />
+                    </a>
+                </td>
+                `: ``}
+                ${this.file.type !== "word" && this.file.type !== "cell" ? `<td class="contentCells  contentCells-icon"></td><td class="contentCells  contentCells-icon"></td>` : ``}
+                ${this.file.fillable ? `
+                <td class="contentCells contentCells-shift contentCells-icon firstContentCellShift">
+                    <a href="editor?fileID=${encodedTitle}&user=${encodedUser + directUrl}&action=fillForms&type=desktop" target="_blank">
+                    <img src="assets/images/fill-forms.svg" alt="Open in editor for filling in forms" title="Open in editor for filling in forms" />
+                    </a>
+                </td>
+                `: `<td class="contentCells contentCells-shift contentCells-iconfirstContentCellShift"></td>`}
+            ` : ``}
+            ${this.file.fillable ? `
+                <td class="contentCells contentCells-icon">
+                <a href="editor?fileID=${encodedTitle}&user=${encodedUser + directUrl}&action=fillForms&type=desktop" target="_blank">
+                    <img src="assets/images/mobile-fill-forms.svg" alt="Open in editor for filling in forms for mobile devices" title="Open in editor for filling in forms for mobile devices" />
+                </a>
+                </td>
+                <td class="contentCells contentCells-icon"></td>
+                <td class="contentCells contentCells-icon"></td>
+                <td class="contentCells contentCells-icon"></td>
+                <td class="contentCells contentCells-shift contentCells-icon firstContentCellShift">
+                <a href="editor?fileID=${encodedTitle}&user=${encodedUser + directUrl}&action=fillForms&type=desktop" target="_blank">
+                    <img src="assets/images/fill-forms.svg" alt="Open in editor for filling in forms" title="Open in editor for filling in forms"/>
+                </a>
+                </td>
+            ` : `<td class="contentCells contentCells-shift contentCells-icon contentCellsEmpty" colspan="6"></td>`}
+            <td class="contentCells contentCells-icon firstContentCellViewers">
+                <a href="editor?fileID=${encodedTitle}&user=${encodedUser + directUrl}&action=view&type=desktop" target="_blank">
+                <img src="assets/images/desktop.svg" alt="Open in viewer for full size screens" title="Open in viewer for full size screens" />
+                </a>
+            </td>
+            <td class="contentCells contentCells-icon">
+                <a href="editor?fileID=${encodedTitle}&user=${encodedUser + directUrl}&action=view&type=mobile" target="_blank">
+                <img src="assets/images/mobile.svg" alt="Open in viewer for mobile devices" title="Open in viewer for mobile devices" />
+                </a>
+            </td>
+            <td class="contentCells contentCells-icon contentCells-shift">
+                <a href="editor?fileID=${encodedTitle}&user=${encodedUser + directUrl}&action=embedded&type=embedded" target="_blank">
+                <img src="assets/images/embeded.svg" alt="Open in embedded mode" title="Open in embedded mode" />
+                </a>
+            </td>
+            <td class="contentCells contentCells-icon contentCells-shift  downloadContentCellShift">
+                <a href="download?fileName=${encodedTitle}">
+                <img class="icon-download" src="assets/images/download.svg"  alt="Download" title="Download"/>
+                </a>
+            </td>
+            <td class="contentCells contentCells-icon contentCells-shift">
+                <a class="delete-file" data="${encodedTitle}">
+                <img class="icon-delete" src="assets/images/delete.svg" alt="Delete" title="Delete" />
+                </a>
+            </td>
+        `;
+        this.classList.add("tableRow");
+        this.title = `${this.file.title} ${this.file.version}`;
+    }
+
+    get file() {
+        return JSON.parse(this.dataset.file || {});
+    }
+
+    get user() {
+        return this.dataset.user;
+    }
+
+    get directUrl() {
+        return this.dataset.directUrl;
+    }
+}

web/documentserver-example/php/assets/components/file-table.js

@@ -0,0 +1,54 @@
+export class FileTable extends HTMLElement {
+  constructor() {
+    super();
+  }
+
+  connectedCallback() {
+    const files = this.data.files;
+    const user = this.data.user;
+    const directUrl = this.data.directUrl
+
+    this.innerHTML = `
+      <div class="stored-list">
+        <div class="storedHeader">
+            <div class="storedHeaderText">
+                <span class="header-list">Your documents</span>
+            </div>
+            <div class="storedHeaderClearAll">
+                <div class="clear-all">Clear all</div>
+            </div>
+        </div>
+        <table class="tableHeader" cellspacing="0" cellpadding="0" width="100%">
+            <thead>
+            <tr>
+                <td class="tableHeaderCell tableHeaderCellFileName">Filename</td>
+                <td class="tableHeaderCell tableHeaderCellEditors contentCells-shift">Editors</td>
+                <td class="tableHeaderCell tableHeaderCellViewers">Viewers</td>
+                <td class="tableHeaderCell tableHeaderCellDownload">Download</td>
+                <td class="tableHeaderCell tableHeaderCellRemove">Remove</td>
+            </tr>
+            </thead>
+        </table>
+        <div class="scroll-table-body">
+            <table cellspacing="0" cellpadding="0" width="100%">
+                <tbody>
+                  ${files.map(file =>`
+                    <tr 
+                      is="file-row"
+                      data-file='${JSON.stringify(file)}'
+                      data-user="${user}"
+                      data-direct-url="${directUrl}"
+                    ></tr>
+                  `).join("")}
+                </tbody>
+            </table>
+        </div>
+      </div>
+    `;
+  }
+
+  get data() {
+    return JSON.parse(this.getAttribute("data")) || {}
+  }
+
+}

web/documentserver-example/php/assets/components/web-components.js

@@ -0,0 +1,4 @@
+import { FileRow } from "./file-row.js";
+import { FileTable } from "./file-table.js";
+customElements.define("file-row", FileRow, { extends: "tr" });
+customElements.define("file-table", FileTable);

web/documentserver-example/php/assets/js/jscript.js

@@ -19,8 +19,8 @@
 var directUrl;
 var formatManager;
 
-window.onload = function () {
-    fetch('formats')
+window.onload = async function () {
+    await fetch('formats')
         .then((response) => response.json())
         .then((data) => {
             if (data.formats) {
@@ -37,6 +37,36 @@ window.onload = function () {
                 formatManager = new FormatManager(formats);
             }
         })
+    let files = await fetchFilesList();
+    displayFilesList(files);
+}
+
+function fetchFilesList() {
+    return fetch('/files')
+    .then(response => response.json())
+    .then(files => {
+        files.forEach((file) => {
+            let format = this.formatManager.findByExtension(file.title.split('.').pop());
+            file.editable = format.isEditable();
+            file.fillable = format.isFillable();
+            file.type = format.type;
+        });
+        files = Array.isArray(files) && files.length ? files : null;
+        return files;
+    });
+}
+
+function displayFilesList(files) {
+    let fileTable = document.createElement("file-table");
+    if (files) {
+        fileTable.setAttribute("data", JSON.stringify({
+            user,
+            directUrl,
+            files
+        }))
+
+        document.getElementById("file-manager").appendChild(fileTable);
+    } 
 }
 
 if (typeof jQuery != "undefined") {
@@ -449,4 +479,4 @@ function getUrlVars() {
         vars[hash[0]] = hash[1];
     }
     return vars;
-};
+};

web/documentserver-example/php/templates/index.tpl

@@ -14,6 +14,7 @@
     <link rel="stylesheet" type="text/css" href="assets/css/stylesheet.css" />
     <link rel="stylesheet" type="text/css" href="assets/css/media.css">
     <link rel="stylesheet" type="text/css" href="assets/css/jquery-ui.css" />
+    <script type="module" src="assets/components/web-components.js"></script>
 </head>
 <body>
 <form id="form1">
@@ -124,9 +125,8 @@
                                         editing functions.
                                     </span>
                             {userDescr}
-                            </div>
-                            {storedList}
                         </div>
+                        <div id="file-manager" style="height:100%;"></div>
                 </td>
             </tr>
             </tbody>