Stream Pro - Full Datetime in stream

[Kharg]

Hello,

I wrote a small extension to replace the datetime-short with just datetime in the stream as I always hated not seeing the full datetime and editing the original note.js is not upgrade safe.
It works by replacing the text with the text shown by hovering the mouse, so it's upgrade safe.
I tested it on various instances with different post types, it works on every version from 6.0 up to 7.2.
Let me know what do you think if you try it!

https://github.com/Kharg/stream-pro/releases

[Kharg]

Updated to 2.2.5 with custom setting to expand stream updates and an option to enable/disable the full datetime.

https://github.com/Kharg/stream-pro/releases

[esforim]

For the curious:

Setting location: /#Admin/StreamPro


After install. Before install it doesn't show the Time, only date.



If you enable the "Stream Expand". This is quite cool, in v6 I manually add this feature but ever since v7 I didn't want to go find the guide/tutorial to do it again. Finally I can add this back easily thanks to Kharg. Basically it auto open the "down arrow".

Another interesting thing is he manage to do a "Force" refresh all page/tab once you save the setting. I remember a thread of someone asking how it can be done (maybe it him!), whoever you are, look through this extension to learn how-to.

[Kharg]

Thank you for your comment esforim
It is using this function to refresh all the tabs

        broadcastUpdate: function () {
            this.getHelper().broadcastChannel.postMessage('reload');
        }​ 

[khopper]

Does this work on version 8.2.2?

[Kharg]

yes, it does.

[bandtank]

This module installs itself into the wrong locations. The files should be in custom/Espo/Modules and client/custom/modules, but the files are installed in application/Espo/Modules and client/modules. Reference

[Kharg]

Yes, I need to update it.

It was built when that was still the only location for extensions

[crmclients]

Yes, I need to update it.

It was built when that was still the only location for extensions

I love this! Installed in my local EspoCRM in WIndows, wish I could install in the Cloud!
Great work!

[Kharg]

I love this! Installed in my local EspoCRM in WIndows, wish I could install in the Cloud!
Great work!

You can use this in the cloud version with a small trick, a Tampermonkey/Greasemonkey script, however this will only be applied in your browser, other users would have to do the same.

// ==UserScript==
// @name         EspoCRM Stream Pro (Full Datetime)
// @namespace    https://github.com/Kharg/stream-pro
// @version      1.0.0
// @description  Replace short relative datetime in EspoCRM stream notes with the full datetime from the title attribute. Tampermonkey port of stream-pro.
// @author       Kharg
// @match        *://your-espocrm-domain.tld/*
// @grant        none
// @run-at       document-idle
// ==/UserScript==

(function () {
    'use strict';

    // Mirrors the original extension's selector exactly:
    // $("div.stream-date-container a span").text(function() { return $(this).attr('title'); });
    const SELECTOR = 'div.stream-date-container a span[title]';

    // Marker so we don't reprocess the same node on every mutation tick.
    const FLAG = 'data-stream-pro-applied';

    function apply(span) {
        const full = span.getAttribute('title');
        if (!full) return;
        if (span.getAttribute(FLAG) === full) return; // already applied for this title value
        if (span.textContent !== full) {
            span.textContent = full;
        }
        span.setAttribute(FLAG, full);
    }

    function scan(root) {
        const scope = (root && root.querySelectorAll) ? root : document;
        scope.querySelectorAll(SELECTOR).forEach(apply);
    }

    scan(document);

    // Espo renders stream items asynchronously (initial load, infinite scroll, view re-renders,
    // and periodic title refresh as relative time ticks). One observer covers all of it.
    const observer = new MutationObserver((mutations) => {
        for (const m of mutations) {
            if (m.type === 'childList') {
                for (const node of m.addedNodes) {
                    if (node.nodeType !== 1) continue;
                    if (node.matches && node.matches(SELECTOR)) {
                        apply(node);
                    } else {
                        scan(node);
                    }
                }
            } else if (m.type === 'attributes' && m.attributeName === 'title') {
                const t = m.target;
                if (t.matches && t.matches(SELECTOR)) {
                    apply(t);
                }
            }
        }
    });

    observer.observe(document.body, {
        childList: true,
        subtree: true,
        attributes: true,
        attributeFilter: ['title']
    });
})();

[crmclients]

Thanks so much Kharg! I have a client in finance and Today never works if they have to look at the calendar to get the date Not aware of Tamper... but will be fun to try it!

[Kharg]

It's super easy, you just need a browser extension and this script and you are set