Rain template: Notification Bar - not close if a p:command / p:commandLink is clicked?

[rider87]

I opened a question already in the old forum:
https://forum.primefaces.org/viewtopic.php?f=138&t=77789

I think with the new update from PF Rain it´s still not working.

I migrated also to PF13, because there was the
<p:menu appendTo="@this" implemented (see also primefaces/primefaces#9489 )

How can this be solved?

[rider87]

Any updates here?

[rider87]

Primetek? Any updates here?

[atakantepe]

Hi, firstly, I want to apologize for the late response. We are working on the feedback and will act on it to improve the support for the templates.
I want to help with your issue personally. It's been years since I used JSF, and, when I checked the rain template's gitLens, it's been more than four years, but I'll try my best.

I checked the forum and tried to understand what you wanted to achieve, so I created this example. In this example, you can add a command button, commandlink menu, or others, and when you click on them, they don't close unless you want them to. Also, the other items under the notification bell close the panel when clicked. I think this way, you can make it more customizable.

2024-03-23.14-37-05.mp4

Now, the code part:
This is the notification item inside the topbar.xhtml

<li class="topbar-item notifications">
            <a href="#">
              <i class="topbar-icon pi pi-bell"></i>
            </a>
            <ul>
              <li class="layout-submenu-header">
                <h6 class="header-text">Notifications</h6>
              </li>
              <li>
                <p:commandLink
                  actionListener="#{YourFunctions.turnRed}"
                  update="colorBoxPanel"
                  onclick="event.stopPropagation();"
                  oncomplete="$('.layout-topbar-actions').removeClass('active')"
                >
                  <i class="pi pi-shopping-cart"></i>
                  <div class="notification-item">
                    <div class="notification-summary">New Order</div>
                    <div class="notification-detail">
                      You have <strong>3</strong> new orders.
                    </div>
                    <p:outputPanel id="colorBoxPanel">
                      <div
                        id="colorBox"
                        style="
                          width: 50px;
                          height: 50px;
                          background-color: #{YourFunctions.boxColor};
                        "
                      ></div>
                    </p:outputPanel>
                  </div>
                </p:commandLink>
              </li>
              <li>
                <a tabindex="0">
                    <i class="pi pi-check-square"></i>
                    <div class="notification-item action-item">
                        <div class="notification-summary">Withdrawn Completed</div>
                        <p:outputPanel id="colorBoxPanel2">
                            <div
                              id="colorBox"
                              style="
                                width: 50px;
                                height: 50px;
                                background-color: #{YourFunctions.boxColor};
                              "
                            ></div>
                          </p:outputPanel>
                        <p:commandButton
                            id="btn"
                            type="button"
                            value="Open Menu"
                            styleClass="ui-button-primary"
                        />
                        <p:overlayPanel
                            for="btn"
                            my="left top"
                            at="left bottom"
                            showEffect="fade"
                            hideEffect="fade"
                        >
                            <p:menu appendTo="@this">
                                <p:menuitem
                                    value="Menu Item 1"
                                    actionListener="#{YourFunctions.turnRed}"
                                    update="colorBoxPanel2"
                                    onclick="event.stopPropagation();"
                                />
                                <p:menuitem
                                    value="Menu Item 2"
                                    actionListener="#{YourFunctions.turnGreen}"
                                    update="colorBoxPanel2"
                                    onclick="event.stopPropagation();"
                                />
                            </p:menu>
                        </p:overlayPanel>
                    </div>
                </a>
            </li>
              <li>
                <a tabindex="0">
                  <i class="pi pi-chart-line"></i>
                  <div class="notification-item">
                    <div class="notification-summary">Monthly Reports</div>
                    <div class="notification-detail">
                      New reports are ready.
                    </div>
                  </div>
                </a>
              </li>
              <li>
                <a tabindex="0">
                  <i class="pi pi-comment"></i>
                  <div class="notification-item">
                    <div class="notification-summary">Comments</div>
                    <div class="notification-detail">
                      <strong>2</strong> new comments.
                    </div>
                  </div>
                </a>
              </li>
              <li>
                <a tabindex="0">
                  <i class="pi pi-refresh"></i>
                  <div class="notification-item">
                    <div class="notification-summary">Chargeback Request</div>
                    <div class="notification-detail">
                      <strong>1</strong> to review.
                    </div>
                  </div>
                </a>
              </li>
            </ul>
          </li>

Now the functions are just simple ones for testing, but I am also adding them here so we can communicate well
package org.primefaces.rain.view;

import javax.enterprise.context.RequestScoped;
import javax.inject.Named;

@Named
@RequestScoped
public class YourFunctions {
    private String boxColor;

    public YourBean() {
        boxColor = "green"; // The box will be green initially
    }

    public void turnRed() {
        boxColor = "red"; // The box will turn red when turnRed is called
    }

    public void turnGreen() {
        boxColor = "green"; // The box will turn green when turnGreen is called
    }

    public String getBoxColor() {
        return boxColor;
    }
}

Now, this part is the one with customized itemclicks inside your bindTopbarEvents. As you can see, it checks if the click is for action-item .commandLink. You can add more or change it. The examples are for one with class and component.

this.topbarLinks.off("click.topbar").on("click.topbar", function (e) {
        var link = $(this),
            item = link.parent(),
            submenu = item.children("ul");
            $this.topbarItems
            .children("ul")
            .off("click.topbar")
            .on("click.topbar", function (e) {
                if ($(e.target).closest('.action-item, .commandLink').length) {
                    $this.topbarItemClicked = true;
                } else {
                    $this.topbarItemClicked = false;
                }
            });
            $this.topbarItems.children("li").off("click.topbar").on("click.topbar", function (e) {
                e.stopPropagation();
            });
        if ($this.isMobile()) {
            $this.removeTopbarClassFromAllItems(
                null,
                "active-topmenuitem",
                $this.topbarItems.filter(".active-topmenuitem").not(item)
            );
        } else {
            $this.removeTopbarClassFromAllItems(item, "active-topmenuitem");
        }
        $this.addTopbarClass(item, "active-topmenuitem");

        $this.topbarItemClicked = true;

        if (submenu.length) {
            e.preventDefault();
        }
    });

If I understand the issue correctly, you can use it whatever you want inside your notifications panel. If I didn't, please explain the exact thing you want to achieve. If possible, a code example would make it much easier for me to test and fix.

I hope this helps.

[rider87]

Thanks for your feedback.

But it seems it´s not working for me:
As soon I click:
<p:menuitem value="Alle als gelesen markieren" process="@this"
or
<p:menuitem value="Alle als ungelesen markieren"

-> the dialog closed...

I have changed this part in file: layout.js into:

` bindTopbarEvents: function() {
var $this = this;

	/* CUSTOMIZED PART */
    this.topbarLinks.off("click.topbar").on("click.topbar", function (e) {
        var link = $(this),
            item = link.parent(),
            submenu = item.children("ul");
            $this.topbarItems
            .children("ul")
            .off("click.topbar")
            .on("click.topbar", function (e) {
                if ($(e.target).closest('.action-item, .commandLink').length) {
                    $this.topbarItemClicked = true;
                } else {
                    $this.topbarItemClicked = false;
                }
            });
            $this.topbarItems.children("li").off("click.topbar").on("click.topbar", function (e) {
                e.stopPropagation();
            });
        if ($this.isMobile()) {
            $this.removeTopbarClassFromAllItems(
                null,
                "active-topmenuitem",
                $this.topbarItems.filter(".active-topmenuitem").not(item)
            );
        } else {
            $this.removeTopbarClassFromAllItems(item, "active-topmenuitem");
        }
        $this.addTopbarClass(item, "active-topmenuitem");

        $this.topbarItemClicked = true;

        if (submenu.length) {
            e.preventDefault();
        }
    });

    this.topbarSearchItemMenu.off('click.topbar').on('click.topbar', function(e) {
        $this.topbarItemClicked = true;
    });
},`

Here my JSF page:
`<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="jakarta.faces.html" xmlns:f="jakarta.faces.core"
xmlns:ui="jakarta.faces.facelets" xmlns:p="http://primefaces.org/ui"
xmlns:pe="http://primefaces.org/ui/extensions">

<li class="topbar-item notifications"><p:commandLink  
		update=":notificationTopbarForm, notificationTopbarCommandBadgeLink"
		actionListener="#{topbarNotificationSessionLoginEmployeeController.doOpenNotificationBar()}">

		<p:badge id="notificationTopbarCommandBadgeLink"
			value="#{topbarNotificationSessionLoginEmployeeController.numberOfUnreadNotification}"
			severity="#{topbarNotificationSessionLoginEmployeeController.numberOfUnreadNotification != 0 ? 'danger' : ''}"
			visible="#{topbarNotificationSessionLoginEmployeeController.hasNewNotification == true}">

			<h:outputText styleClass="pi pi-bell Fs25 White" />

		</p:badge>
	</p:commandLink>

	<ul style="width: 400px; min-height: 200px;">
		<li class="layout-submenu-header">
			<h6 class="header-text w-full">

				<div class="flex justify-content-between">
					<div>
						<h:outputText value="Benachrichtigungen" />
					</div>
					<div>
						<p:commandLink id="dynaButtonNotificationGeneral">
							<h:outputText styleClass="fa fa-ellipsis-h White" />
						</p:commandLink>

						<p:menu overlay="true" trigger="dynaButtonNotificationGeneral"
							my="left top" at="left bottom" style="width: 250px !important;">

							<p:menuitem value="Alle als gelesen markieren" onclick="event.stopPropagation();" process="@this"
								actionListener="#{actionNotificationController.changeAllNotificationFromLoginEmployeeToRead()}"
								update=":growl, :notificationTopbarForm" icon="fa fa-check" />


						</p:menu>

					</div>
				</div>

			</h6>
		</li>

		<h:form id="notificationTopbarForm">

			<p:outputPanel deferred="true"
				rendered="#{topbarNotificationController.showNotificationDatatable}"
				loaded="#{not empty notificationRequestDataScrollerByEmployeeNotLazyController.notificationList}">

				<p:ajax event="load" global="false" 
					listener="#{notificationRequestDataScrollerByEmployeeNotLazyController.init(50)}" />

				<f:facet name="loading">
					<div class="grid grid-nogutter" style="padding: 5px;">

						<ui:repeat var="o" value="#{of:createArray(6)}">

							<div class="col-fixed" style="width: 40px; padding: 5px;">
								<p:skeleton width="100%" height="40px" />
							</div>

							<div class="col" style="padding: 5px;">
								<p:skeleton width="100%" height="40px" />
							</div>

							<div class="EmptyBox5"></div>

						</ui:repeat>

					</div>
				</f:facet>

				<h:panelGroup layout="block"
					rendered="#{notificationRequestDataScrollerByEmployeeNotLazyController.notificationList == null or notificationRequestDataScrollerByEmployeeNotLazyController.notificationList.size() == 0}">

					<div class="notification-item" style="padding: 10px;">

						<div class="notification-summary">
							<h:outputText value="Keine Benachrichtigung vorhanden" />
						</div>

					</div>

				</h:panelGroup>


				<p:dataScroller id="notificationDataScroller"
					rendered="#{notificationRequestDataScrollerByEmployeeNotLazyController.notificationList != null}"
					styleClass="borderlessDatascroller"
					value="#{notificationRequestDataScrollerByEmployeeNotLazyController.notificationList}"
					var="notification" chunkSize="10" mode="inline" lazy="false"
					scrollHeight="300">

					<p:ajax event="load"
						listener="#{notificationRequestDataScrollerByEmployeeNotLazyController.onLoad}" />

					<f:facet name="loading">
						<div class="EmptyBox5"></div>
						<i class="fa fa-spinner fa-spin fa-fw"></i>
						<h:outputText value="Weitere Einträge laden..." />
					</f:facet>


					<div
						class="grid grid-nogutter #{notification.createDate > topbarNotificationSessionLoginEmployeeController.lastNotificationCheckDate ? 'WhiteBlueBack' : ''}"
						style="padding: 10px;">

						<div class="col-fixed" style="width: 30px">

							<h:outputText
								styleClass="#{notification.notificationType.icon} Fs20"
								rendered="#{notification.notificationType != null}" />

							<h:outputText
								styleClass="#{notification.customPortalNotificationIcon} Fs20"
								rendered="#{notification.notificationType == null}" />

						</div>

						<div class="col">

							<ui:include
								src="/gixxCommon/portal/notification/output/notificationTextOutputView.xhtml">

								<ui:param name="notification" value="#{notification}" />
								<ui:param name="notificationTextOutputCustomUrl"
									value="#{notificationTextOutputCustomUrl}" />

							</ui:include>

							<div class="EmptyBox5"></div>

							<h:outputText id="createDateInfo" styleClass="Blue Fs11"
								value="#{notification.createDate}">
								<f:converter converterId="prettyTimeCustomConverter" />
							</h:outputText>

							<p:tooltip for="createDateInfo" position="top">
								<h:outputText value="#{notification.createDate}">
									<f:convertDateTime type="localDateTime"
										pattern="#{loginBean.currentUser.dateFormat}" />
								</h:outputText>
								<h:outputText value=" um "
									rendered="#{notification.createDate != null}" />
								<h:outputText value="#{notification.createDate}">
									<f:convertDateTime type="localDateTime"
										pattern="#{loginBean.currentUser.timeFormat}" />
								</h:outputText>
								<h:outputText value=" Uhr"
									rendered="#{notification.createDate != null}" />
							</p:tooltip>

						</div>

						<div class="col-fixed" style="width: 30px">
							<p:commandLink id="dynaButtonNotificationSingle" appendTo="@this">
								<h:outputText styleClass="fa fa-dot-circle-o" />
							</p:commandLink>

							<p:menu overlay="true" trigger="dynaButtonNotificationSingle"
								appendTo="@this" my="left top" at="left bottom"
								style="width: 250px !important;">

								<p:menuitem value="Alle als gelesen markieren" process="@this"
									rendered="#{notification.readStatus == 'UNREAD'}"
									actionListener="#{actionNotificationController.changeStatusToRead(notification)}"
									update=":growl, @form:notificationDataScroller" onclick="event.stopPropagation();"
									icon="fa fa-check" />

								<p:menuitem value="Alle als ungelesen markieren"
									process="@this"
									rendered="#{notification.readStatus == 'READ'}"
									actionListener="#{actionNotificationController.changeStatusToUnread(notification)}"
									update=":growl, @form:notificationDataScroller" onclick="event.stopPropagation();"
									icon="fa fa-window-close-o" />

							</p:menu>
						</div>

					</div>


				</p:dataScroller>

				<h:panelGroup styleClass="text-center" layout="block"
					rendered="#{notificationRequestDataScrollerByEmployeeNotLazyController.notificationList.size() > 10}">

					<div class="EmptyBox5"></div>

					<p:link
						outcome="#{entityUrlController.findApplicationUrl('NOTIFICATION_LIST_BY_EMPLOYEE')}"
						value="Zu allen Benachrichtungen" />

				</h:panelGroup>

			</p:outputPanel>


		</h:form>

	</ul></li>

</ui:composition>`