gourmetj-springboot/src/main/resources/META-INF/resources/shoppingList.xhtml

<?xml version="1.0"?>
<ui:composition template="/WEB-INF/layout/layout.xhtml"
    xmlns:h="http://xmlns.jcp.org/jsf/html"
    xmlns:f="http://xmlns.jcp.org/jsf/core"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:p="http://primefaces.org/ui"
    xmlns:c="http://xmlns.jcp.org/jstl"
>
    <ui:define name="title">Gourmet Recipe Manager - Shopping</ui:define>
    <ui:define name="content">
        <style>
.recipeTitle {
	font-size: larger;
	font-weight: bold;
}

.subtitle {
	font-size: large;
	font-weight: bold;
}

.ui-panelgrid-cell {
	border-width: 0;
	border-style: none;
}
</style>
        <h:messages />
        <h:form id="form1">
            <p:dataTable id="tblRecipes" style="width: 600px"
                value="#{shoppingListBean.recipeList}" var="item"
            >
                <p:column headerText="Recipe">
                    <h:outputText value="#{item.title}" />
                </p:column>
            </p:dataTable>
            <!-- ====== Ingredients ============================ -->
            <p:column id="ingredientsc"
                style="width: 25%; vertical-align: top;"
            >
                <p:dataTable id="tblShopIngredients"
                    style="width: 600px; margin-top: 10px"
                    value="#{shoppingListBean.ingredientList}"
                    sortBy="#{item.shopCat}" var="item"
                >
                    <f:facet name="header">
                        <h:outputText styleClass="subtitle"
                            value="Ingredients"
                        />
                    </f:facet>
                    <p:headerRow>
                        <p:column colspan="4">
                            <h:outputText value="#{item.shopCat}" />
                        </p:column>
                    </p:headerRow>
                    <p:column label="ingKey">
                        <h:outputText value="#{item.ingkey}" />
                    </p:column>
                    <p:column label="Amt"
                        style="width: 3em; text-align: right"
                    >
                        <h:outputText
                            value="#{item.displayAmount}"
                        />
                    </p:column>
                    <p:column label="Units" style="width: 5em">
                        <h:outputText value="#{item.unit}" />
                    </p:column>
                    <p:column label="Item" style="width: 20em">
                        <h:outputText value="#{item.item}" />
                    </p:column>
                </p:dataTable>
            </p:column>
            <p:commandButton id="doHome" value="Home"
                icon="ui-icon-home" ajax="false" immediate="true"
                action="main.jsf"
            />
            <p:dataTable id="tblShopcats" style="width: 300px"
                value="#{shoppingListBean.shopcatList}"
                sortBy="#{item.shopcategory}" var="item"
            >
                <f:facet name="header">
                    <h:outputText
                        value="Ingredient Keys/Shopping Categories"
                    />
                </f:facet>
                <p:headerRow>
                    <p:column>
                        <h:outputText id="ctlCatname"
                            value="#{item.shopcategory}"
                        />
                    </p:column>
                    <p:column style="width: 5em">
                        <p:commandButton id="ctlEditCat"
                            value="Rename"
                            action="#{shoppingListBean.doEditShopcat(item.id)}"
                            onclick="PF('dlgEditShopcat').show()"
                            update="frmEscat:pnlData"
                        />
                    </p:column>
                </p:headerRow>
                <p:column>
                    <h:outputText value="#{item.ingkey}"
                        onclick="clickIngkeyName()"
                    />
                </p:column>
                <p:column style="width: 5em">
                    <p:commandButton id="ctlEditIngkey"
                        value="Move"
                        action="#{shoppingListBean.doEditShopcat(item.id)}"
                        onclick="PF('dlgEditIngkey').show()"
                        update="frmIngkey:pnlData"
                    />
                </p:column>
            </p:dataTable>
        </h:form>
        <!--  -->
        <h:form id="frmEscat">
            <p:dialog id="dlgEditShopcat"
                widgetVar="dlgEditShopcat"
                header="Edit/Rename Shopping Category"
                closeOnEscape="true"
            >
                <p:panelGrid id="pnlData" columns="2"
                    styleClass="ui-panelgrid-blank"
                >
                    <p:outputLabel for="@next"
                        value="Shopping Category"
                    />
                    <p:inputText id="ctlDlgShopcatName"
                        label="Position" required="true"
                        value="#{shoppingListBean.editShopcat.shopcategory}"
                    />
                    <p:outputLabel for="@next" value="Position" />
                    <p:inputText id="ctlDlgShopcatPosition"
                        type="number" required="true" size="3"
                        value="#{shoppingListBean.editShopcat.position}"
                    />
                </p:panelGrid>
                <p:panelGrid columns="2" style="width: 100%"
                    styleClass="ui-panelgrid-blank"
                >
                    <p:commandButton id="scDlgOK" value="OK"
                        style="width: 6em"
                        action="#{shoppingListBean.ajaxOnClickShopcat}"
                        update="form1:tblShopcats"
                        process="@this pnlData"
                        oncomplete="PF('dlgEditShopcat').hide()"
                    />
                    <p:commandButton id="scDlgCan" value="Cancel"
                        style="width: 6em"
                        onclick="PF('dlgEditShopcat').hide()"
                    />
                </p:panelGrid>
            </p:dialog>
        </h:form>
        <!--  -->
        <h:form id="frmIngkey">
            <p:dialog id="dlgEditIngkey"
                widgetVar="dlgEditIngkey"
                header="Edit/Rename Shopping Category for Ingredient Key"
                closeOnEscape="true"
            >
                <p:panelGrid id="pnlData" columns="2"
                    styleClass="ui-panelgrid-blank"
                >
                    <p:outputLabel for="@next"
                        value="Ingredient Key"
                    />
                    <h:outputText id="ctlDlgIngKeyIngkey"
                        value="#{shoppingListBean.editShopcat.ingkey}"
                    />
                    <p:outputLabel for="@next"
                        value="Shopping Category"
                    />
                    <p:inputText id="ctlDlgIngkeyShopcatName"
                        label="Position" required="true"
                        value="#{shoppingListBean.editShopcat.shopcategory}"
                    />
                </p:panelGrid>
                <p:panelGrid columns="2" style="width: 100%"
                    styleClass="ui-panelgrid-blank"
                >
                    <p:commandButton id="ingkDlgOK" value="OK"
                        style="width: 6em"
                        action="#{shoppingListBean.ajaxOnClickShopcatIngkey}"
                        update="form1:tblShopcats"
                        process="@this pnlData"
                        oncomplete="PF('dlgEditIngkey').hide()"
                    />
                    <p:commandButton id="ingkDlgCan"
                        value="Cancel" style="width: 6em"
                        onclick="PF('dlgEditIngkey').hide()"
                    />
                </p:panelGrid>
            </p:dialog>
        </h:form>
    </ui:define>
</ui:composition>