diff --git a/Build/Sources/TypeScript/workspaces/backend.ts b/Build/Sources/TypeScript/workspaces/backend.ts index 8135d8316f72..306849e2ab6e 100644 --- a/Build/Sources/TypeScript/workspaces/backend.ts +++ b/Build/Sources/TypeScript/workspaces/backend.ts @@ -49,14 +49,7 @@ enum Identifiers { } type Diff = { field: string, label: string, content: string, html: string }; -type Comment = { - user_comment: string; - previous_stage_title: string; - stage_title: string; - tstamp: number; - user_username: string; - user_avatar: string -} + type History = { differences: string | Diff[]; datetime: string; @@ -93,6 +86,7 @@ class Backend extends Workspaces { super(); topLevelModuleImport('@typo3/workspaces/renderable/send-to-stage-form.js'); + topLevelModuleImport('@typo3/workspaces/renderable/comment-view.js'); DocumentService.ready().then((): void => { this.getElements(); @@ -144,36 +138,11 @@ class Backend extends Workspaces { * @param {Object} comments * @return {$} */ - private static generateCommentView(comments: Comment[]): JQuery { - const $comments = $('
'); - - for (const comment of comments) { - const $panel = $('
', { class: 'panel panel-default' }); - - if (comment.user_comment.length > 0) { - $panel.append( - $('
', { class: 'panel-body' }).html(comment.user_comment), - ); - } - - $panel.append( - $('
', { class: 'panel-footer' }).append( - $('', { class: 'badge badge-success me-2' }).text(comment.previous_stage_title + ' > ' + comment.stage_title), - $('', { class: 'badge badge-info' }).text(comment.tstamp), - ), - ); - - $comments.append( - $('
', { class: 'media' }).append( - $('
', { class: 'media-left text-center' }).text(comment.user_username).prepend( - $('
').html(comment.user_avatar), - ), - $('
', { class: 'media-body' }).append($panel), - ), - ); - } + private static generateCommentView(comments: any[]): HTMLElement { + const commentView = document.createElement('typo3-workspaces-comment-view'); + commentView.comments = comments; - return $comments; + return commentView; } /** diff --git a/Build/Sources/TypeScript/workspaces/renderable/comment-view.ts b/Build/Sources/TypeScript/workspaces/renderable/comment-view.ts new file mode 100644 index 000000000000..f40736cc1433 --- /dev/null +++ b/Build/Sources/TypeScript/workspaces/renderable/comment-view.ts @@ -0,0 +1,78 @@ +/* + * This file is part of the TYPO3 CMS project. + * + * It is free software; you can redistribute it and/or modify it under + * the terms of the GNU General Public License, either version 2 + * of the License, or any later version. + * + * For the full copyright and license information, please read the + * LICENSE.txt file that was distributed with this source code. + * + * The TYPO3 project - inspiring people to share! + */ + +import { customElement, property } from 'lit/decorators'; +import { html, LitElement, nothing, TemplateResult } from 'lit'; +import { repeat } from 'lit/directives/repeat'; +import { unsafeHTML } from 'lit/directives/unsafe-html'; + +type Comment = { + user_comment: string; + previous_stage_title: string; + stage_title: string; + tstamp: number; + user_username: string; + user_avatar: string +} + +@customElement('typo3-workspaces-comment-view') +export class CommentViewElement extends LitElement { + @property({ type: Array }) + public comments: Comment[] = []; + + protected createRenderRoot(): HTMLElement | ShadowRoot { + // @todo Switch to Shadow DOM once Bootstrap CSS style can be applied correctly + return this; + } + + protected render(): TemplateResult { + return html` +
+ ${repeat(this.comments, (comment) => comment.tstamp, (comment) => this.renderComment(comment))} +
+ `; + } + + protected renderComment(comment: Comment): TemplateResult { + return html` +
+
+
+ ${unsafeHTML(comment.user_avatar)} +
+ ${comment.user_username} +
+
+ ${comment.user_comment ? html` +
+ ${comment.user_comment} +
+ ` : nothing} +
+ + ${comment.previous_stage_title} > ${comment.stage_title} + + + ${comment.tstamp} +
+
+
+ `; + } +} + +declare global { + interface HTMLElementTagNameMap { + 'typo3-workspaces-comment-view': CommentViewElement; + } +} diff --git a/typo3/sysext/workspaces/Resources/Public/JavaScript/backend.js b/typo3/sysext/workspaces/Resources/Public/JavaScript/backend.js index f59826f1ec5d..df8f96b69f58 100644 --- a/typo3/sysext/workspaces/Resources/Public/JavaScript/backend.js +++ b/typo3/sysext/workspaces/Resources/Public/JavaScript/backend.js @@ -10,4 +10,4 @@ * * The TYPO3 project - inspiring people to share! */ -import DocumentService from"@typo3/core/document-service.js";import $ from"jquery";import"@typo3/backend/element/icon-element.js";import{SeverityEnum}from"@typo3/backend/enum/severity.js";import"@typo3/backend/input/clearable.js";import"@typo3/workspaces/renderable/record-table.js";import Workspaces from"@typo3/workspaces/workspaces.js";import{default as Modal}from"@typo3/backend/modal.js";import Persistent from"@typo3/backend/storage/persistent.js";import Utility from"@typo3/backend/utility.js";import Wizard from"@typo3/backend/wizard.js";import SecurityUtility from"@typo3/core/security-utility.js";import windowManager from"@typo3/backend/window-manager.js";import RegularEvent from"@typo3/core/event/regular-event.js";import{topLevelModuleImport}from"@typo3/backend/utility/top-level-module-import.js";import{selector}from"@typo3/core/literals.js";import IconHelper from"@typo3/workspaces/utility/icon-helper.js";var Identifiers;!function(e){e.searchForm="#workspace-settings-form",e.searchTextField='#workspace-settings-form input[name="search-text"]',e.searchSubmitBtn='#workspace-settings-form button[type="submit"]',e.depthSelector='#workspace-settings-form [name="depth"]',e.languageSelector='#workspace-settings-form select[name="languages"]',e.stagesSelector='#workspace-settings-form select[name="stages"]',e.workspaceActions=".workspace-actions",e.chooseStageAction='.workspace-actions [name="stage-action"]',e.chooseSelectionAction='.workspace-actions [name="selection-action"]',e.chooseMassAction='.workspace-actions [name="mass-action"]',e.container="#workspace-panel",e.contentsContainer="#workspace-contents",e.noContentsContainer="#workspace-contents-empty",e.previewLinksButton=".t3js-preview-link",e.pagination="#workspace-pagination"}(Identifiers||(Identifiers={}));class Backend extends Workspaces{constructor(){super(),this.elements={},this.settings={dir:"ASC",id:TYPO3.settings.Workspaces.id,depth:1,language:"all",limit:30,query:"",sort:"label_Live",start:0,filterTxt:""},this.paging={currentPage:1,totalPages:1,totalItems:0},this.markedRecordsForMassAction=[],this.indentationPadding=26,this.handleCheckboxStateChanged=e=>{const t=$(e.target),a=t.parents("tr"),s=t.prop("checked"),n=a.data("table")+":"+a.data("uid")+":"+a.data("t3ver_oid");if(s)this.markedRecordsForMassAction.push(n);else{const e=this.markedRecordsForMassAction.indexOf(n);e>-1&&this.markedRecordsForMassAction.splice(e,1)}a.data("collectionCurrent")?Backend.changeCollectionChildrenState(a.data("collectionCurrent"),s):a.data("collection")&&(Backend.changeCollectionChildrenState(a.data("collection"),s),Backend.changeCollectionParentState(a.data("collection"),s)),this.elements.$chooseMassAction.prop("disabled",this.markedRecordsForMassAction.length>0)},this.viewChanges=e=>{e.preventDefault();const t=$(e.currentTarget).closest("tr");this.sendRemoteRequest(this.generateRemotePayload("getRowDetails",{stage:t.data("stage"),t3ver_oid:t.data("t3ver_oid"),table:t.data("table"),uid:t.data("uid"),filterFields:!0})).then((async e=>{const a=(await e.resolve())[0].result.data[0],s=$("
"),n=$("