pengjunjie/document-server-integration
1
0
Fork 1
mirror of https://github.com/ONLYOFFICE/document-server-integration.git synced 2026-02-10 18:05:10 +08:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Serik Ibragimov
2024-05-22 16:21:24 +05:00
parent e9f298d073
commit 1ef1987010
3 changed files with 126 additions and 92 deletions
Download Patch File Download Diff File Expand all files Collapse all files

117
web/documentserver-example/php/assets/components/file-row.js Normal file
View File

@ -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;
}
}

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

@ -6,7 +6,7 @@ export class FileTable extends HTMLElement {
connectedCallback() {
const files = this.data.files;
const user = this.data.user;
const directUrl = this.data.directUrl ? "&directUrl=true&" : "";
const directUrl = this.data.directUrl
this.innerHTML = `
<div class="stored-list">
@ -33,97 +33,12 @@ export class FileTable extends HTMLElement {
<table cellspacing="0" cellpadding="0" width="100%">
<tbody>
${files.map(file =>`
<tr class="tableRow" title="${file.title} [1]">
<td class="contentCells">
<a class="stored-edit ${file.type}" href="editor?fileID=${file.title}&user=${user + directUrl}" target="_blank">
<span>${file.title}</span>
</a>
</td>
${file.editable ? `
<td class="contentCells contentCells-icon">
<a href="editor?fileID=${file.title}&user=${user + 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=${file.title}&user=${user + 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=${file.title}&user=${user + 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>
${file.type === "word" ? `
<td class="contentCells contentCells-icon">
<a href="editor?fileID=${file.title}&user=${user + 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=${file.title}&user=${user + 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>
`: ``}
${file.type === "cell" ? `
<td class="contentCells contentCells-icon">
<a href="editor?fileID=${file.title}&user=${user + 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>
`: ``}
${file.type !== "word" && file.type !== "cell" ? `<td class="contentCells contentCells-icon"></td><td class="contentCells contentCells-icon"></td>` : ``}
${file.fillable ? `
<td class="contentCells contentCells-shift contentCells-icon firstContentCellShift">
<a href="editor?fileID=${file.title}&user=${user + 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>`}
` : ``}
${file.fillable ? `
<td class="contentCells contentCells-icon">
<a href="editor?fileID=${file.title}&user=${user + 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=${file.title}&user=${user + 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=${file.title}&user=${user + 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=${file.title}&user=${user + 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=${file.title}&user=${user + 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=${file.title}">
<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="${file.title}">
<img class="icon-delete" src="assets/images/delete.svg" alt="Delete" title="Delete" />
</a>
</td>
</tr>
<tr
is="file-row"
data-file='${JSON.stringify(file)}'
data-user="${user}"
data-direct-url="${directUrl}"
></tr>
`).join("")}
</tbody>
</table>

2
web/documentserver-example/php/assets/components/web-components.js
View File

@ -1,2 +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);