Create converse-message-versions component

Enables re-use outside of the message versions modal.
This commit is contained in:
JC Brand 2021-08-10 10:48:50 +02:00
parent 82ade54caa
commit edd3b681c5
4 changed files with 33 additions and 11 deletions

View File

@ -5,6 +5,6 @@ import tpl_message_versions_modal from "./templates/message-versions.js";
export default BootstrapModal.extend({
id: "message-versions-modal",
toHTML () {
return tpl_message_versions_modal(this.model.toJSON());
return tpl_message_versions_modal(this.model);
}
});

View File

@ -1,12 +1,10 @@
import 'shared/components/message-versions.js';
import { __ } from 'i18n';
import { html } from "lit";
import { modal_close_button, modal_header_close_button } from "./buttons.js"
import { converse } from '@converse/headless/core';
const { dayjs } = converse.env;
export default (o) => html`
export default (model) => html`
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
@ -14,11 +12,7 @@ export default (o) => html`
${modal_header_close_button}
</div>
<div class="modal-body">
<h4>Older versions</h4>
${Object.keys(o.older_versions).map(k => html`<p class="older-msg"><time>${dayjs(k).format('MMM D, YYYY, HH:mm:ss')}</time>: ${o.older_versions[k]}</p>`) }
<hr/>
<h4>Current version</h4>
<p>${o.message}</p>
<converse-message-versions .model=${model}></converse-message-versions>
</div>
<div class="modal-footer">${modal_close_button}</div>
</div>

View File

@ -1,4 +1,4 @@
import 'shared/chat/unfurl';
import 'shared/chat/unfurl.js';
import { __ } from 'i18n';
import { html } from "lit";
import { renderAvatar } from 'shared/directives/avatar';

View File

@ -0,0 +1,28 @@
import { CustomElement } from './element.js';
import { api, converse } from '@converse/headless/core';
import { html } from 'lit';
const { dayjs } = converse.env;
export class MessageVersions extends CustomElement {
static get properties () {
return {
'model': { type: Object }
}
}
render () {
const older_versions = this.model.get('older_versions');
const message = this.model.get('message');
return html`
<h4>Older versions</h4>
${Object.keys(older_versions).map(k => html`<p class="older-msg"><time>${dayjs(k).format('MMM D, YYYY, HH:mm:ss')}</time>: ${older_versions[k]}</p>`) }
<hr/>
<h4>Current version</h4>
<p>${message}</p>`;
}
}
api.elements.define('converse-message-versions', MessageVersions);