create-ui5-freestyle-lr 0.2.0

package/src/templates/webapp/view/Worklist.view.xml.ejs

@@ -0,0 +1,173 @@
+<mvc:View controllerName="<%= appId %>.controller.Worklist"
+    xmlns:mvc="sap.ui.core.mvc"
+    xmlns="sap.uxap"
+    xmlns:m="sap.m"
+    xmlns:f="sap.f"
+    xmlns:fb="sap.ui.comp.filterbar"
+    xmlns:plugins="sap.m.plugins"
+    xmlns:columnmenu="sap.m.table.columnmenu"
+    xmlns:fl="sap.ui.fl.variants"
+    xmlns:core="sap.ui.core">
+
+    <f:DynamicPage id="page" showFooter="true" preserveHeaderStateOnScroll="true">
+        <f:title>
+            <f:DynamicPageTitle>
+                <f:heading>
+                    <m:HBox alignItems="Center" wrap="NoWrap">
+                        <m:Title text="{i18n>worklistTitle}" wrapping="false" class="sapUiSmallMarginEnd"/>
+                        <fl:VariantManagement id="variantMgmt"
+                            headerLevel="H4"
+                            showSetAsDefault="true"
+                            select=".onVariantSelect"
+                            save=".onVariantSave"
+                            manage=".onVariantManage"/>
+                    </m:HBox>
+                </f:heading>
+            </f:DynamicPageTitle>
+        </f:title>
+
+        <f:header>
+            <f:DynamicPageHeader>
+                <f:content>
+                    <fb:FilterBar id="filterbar" useToolbar="false" search=".onSearch">
+                        <fb:filterGroupItems>
+<% filters.forEach(function (filter) { -%>
+                            <fb:FilterGroupItem name="<%= filter.fieldName %>"
+                                label="{i18n>filter.<%= filter.fieldName %>}"
+                                groupName="main" visibleInFilterBar="true">
+                                <fb:control>
+                                    <%- helpers.filterControlFor(filter, { i18nKey: 'filter.' + filter.fieldName }) %>
+                                </fb:control>
+                            </fb:FilterGroupItem>
+<% }) -%>
+                        </fb:filterGroupItems>
+                    </fb:FilterBar>
+                </f:content>
+            </f:DynamicPageHeader>
+        </f:header>
+
+        <f:content>
+            <m:ScrollContainer height="100%" width="100%" vertical="true">
+                <m:Table id="worklistTable" class="lrTable"
+                    items="{path: 'worklistView>/rows'}"
+                    growing="false" alternateRowColors="true"
+                    autoPopinMode="true" contextualWidth="Auto"
+                    mode="MultiSelect" includeItemInSelection="false"
+                    selectionChange=".onSelectionChange"
+                    sticky="HeaderToolbar,ColumnHeaders,InfoToolbar"
+                    fixedLayout="{= ${worklistView>/rows}.length > 0 }"
+                    updateFinished=".onTableUpdateFinished">
+
+                    <m:headerToolbar>
+                        <m:OverflowToolbar>
+                            <m:Title text="{worklistView>/tableTitleCount}"/>
+                            <m:ToolbarSpacer/>
+                            <m:Button icon="sap-icon://sort" tooltip="{i18n>tooltip.sort}" press=".onSortDialog"/>
+                            <m:Button icon="sap-icon://group-2" tooltip="{i18n>tooltip.group}" press=".onGroupDialog"/>
+                            <m:Button icon="sap-icon://table-view" tooltip="{i18n>columnSettings}" press=".onColumnDialog"/>
+                            <m:Button icon="sap-icon://excel-attachment" tooltip="{i18n>tooltip.export}" press=".onExportToExcel"/>
+                            <m:ToggleButton icon="sap-icon://history" text="{= ${worklistView>/autoRefreshOn} ? ${i18n>autoRefresh.btnOn} : ${i18n>autoRefresh.btnOff} }" tooltip="{i18n>tooltip.autoRefresh}" pressed="{worklistView>/autoRefreshOn}" press=".onToggleAutoRefresh"/>
+                            <m:Button icon="sap-icon://synchronize" tooltip="{i18n>tooltip.refresh}" press=".onRefresh"/>
+                        </m:OverflowToolbar>
+                    </m:headerToolbar>
+
+                    <m:infoToolbar>
+                        <m:OverflowToolbar visible="{= ${worklistView>/infoBarVisible} || ${worklistView>/selectedCount} > 0 }">
+                            <m:Text text="{worklistView>/infoBarText}" class="infoBarText" visible="{worklistView>/infoBarVisible}"/>
+                            <m:ToolbarSpacer visible="{= ${worklistView>/selectedCount} > 0 &amp;&amp; ${worklistView>/infoBarVisible} }"/>
+                            <m:Text text="{= ${worklistView>/selectedCount} + ' ' + ${i18n>selectedCount} }" visible="{= ${worklistView>/selectedCount} > 0 }"/>
+                            <m:Button text="{i18n>bulkAction}" type="Emphasized" press=".onBulkAction" visible="{= ${worklistView>/selectedCount} > 0 }"/>
+                            <m:Button icon="sap-icon://decline" tooltip="{i18n>clearSelection}" press=".onClearSelection" visible="{= ${worklistView>/selectedCount} > 0 }"/>
+                        </m:OverflowToolbar>
+                    </m:infoToolbar>
+
+                    <m:dependents>
+                        <plugins:ColumnResizer/>
+                        <columnmenu:Menu id="columnHeaderMenu" beforeOpen=".onColumnMenuBeforeOpen">
+                            <columnmenu:quickActions>
+                                <columnmenu:QuickSort change=".onColumnQuickSort">
+                                    <columnmenu:items>
+                                        <columnmenu:QuickSortItem/>
+                                    </columnmenu:items>
+                                </columnmenu:QuickSort>
+                            </columnmenu:quickActions>
+                        </columnmenu:Menu>
+                    </m:dependents>
+
+                    <m:columns>
+<% columns.forEach(function (col, idx) { -%>
+                        <m:Column width="<%= helpers.columnWidthFor(col, idx === 0) %>" hAlign="<%= helpers.columnHAlignFor(col) %>" importance="<%= helpers.columnImportanceFor(col, idx, columns.length) %>" headerMenu="columnHeaderMenu">
+                            <m:customData>
+                                <core:CustomData key="fieldName" value="<%= col.name %>"/>
+                                <core:CustomData key="exportType" value="<%= helpers.exportTypeFor(col) %>"/>
+                            </m:customData>
+                            <m:Text text="{i18n>col.<%= col.name %>}"/>
+                        </m:Column>
+<% }) -%>
+                        <m:Column width="4rem" hAlign="Center" importance="High">
+                            <m:Text text="{i18n>col.info}"/>
+                        </m:Column>
+                    </m:columns>
+
+                    <!-- Empty state: shown when /rows is empty (and not loading). Replace the
+                         illustration type with one of the "sapIllus-*" set as needed. -->
+                    <m:noData>
+                        <m:IllustratedMessage
+                            illustrationType="sapIllus-NoSearchResults"
+                            title="{i18n>noDataIllustrationTitle}"
+                            description="{i18n>noDataIllustrationDesc}"/>
+                    </m:noData>
+
+                    <m:items>
+                        <!-- highlight = coloured bar on the row's left edge.
+                             To preview the visual without real status data, replace
+                             "formatStatusState" with "formatStatusStateDemo" below — every
+                             row gets a green bar. Switch back once the backend returns
+                             actual status codes.
+
+                             type="Active" + press = whole row is clickable → opens InfoPopover.
+                             includeItemInSelection on the Table is "false" so a row click does
+                             NOT toggle selection — only the checkbox column does. -->
+                        <m:ColumnListItem type="Active" press=".onItemPress"<% if (highlightField) { %> highlight="{path:'worklistView><%= highlightField %>', formatter:'.formatter.formatStatusState'}"<% } %>>
+                            <m:cells>
+<% columns.forEach(function (col, idx) { -%>
+                                <%- helpers.cellControlFor(col, { isFirstColumn: idx === 0 }) %>
+<% }) -%>
+                                <m:Link text="{i18n>link.info}" press=".onInfoLinkPress"/>
+                            </m:cells>
+                        </m:ColumnListItem>
+                    </m:items>
+                </m:Table>
+            </m:ScrollContainer>
+        </f:content>
+
+        <f:footer>
+            <m:OverflowToolbar>
+                <m:ObjectStatus text="{i18n>lastRefreshed.label}" state="Information" icon="sap-icon://information" visible="{= !!${worklistView>/lastRefreshedText} }" class="sapUiTinyMarginBegin"/>
+                <m:FormattedText htmlText="{worklistView>/lastRefreshedText}" class="sapUiTinyMarginBegin"/>
+                <m:ToolbarSpacer/>
+                <m:Text text="{i18n>rowsPerPage}"/>
+                <m:StepInput id="stepRowsPerPage" value="{worklistView>/top}"
+                    min="10" max="100" step="10" width="100px" textAlign="Center"
+                    change=".onStepChange"/>
+                <m:Button icon="sap-icon://close-command-field" press=".onFirstPage" enabled="{worklistView>/prevEnabled}">
+                    <m:layoutData><m:OverflowToolbarLayoutData priority="NeverOverflow"/></m:layoutData>
+                </m:Button>
+                <m:Button icon="sap-icon://navigation-left-arrow" press=".onPrevPage" enabled="{worklistView>/prevEnabled}">
+                    <m:layoutData><m:OverflowToolbarLayoutData priority="NeverOverflow"/></m:layoutData>
+                </m:Button>
+                <m:ComboBox id="pageSelect" width="4rem" selectedKey="{worklistView>/page}"
+                    items="{worklistView>/pageList}" change=".onPageSelect">
+                    <core:Item key="{worklistView>key}" text="{worklistView>text}"/>
+                </m:ComboBox>
+                <m:Text text="/ {worklistView>/totalPages}"/>
+                <m:Button icon="sap-icon://navigation-right-arrow" press=".onNextPage" enabled="{worklistView>/nextEnabled}">
+                    <m:layoutData><m:OverflowToolbarLayoutData priority="NeverOverflow"/></m:layoutData>
+                </m:Button>
+                <m:Button icon="sap-icon://open-command-field" press=".onLastPage" enabled="{worklistView>/nextEnabled}">
+                    <m:layoutData><m:OverflowToolbarLayoutData priority="NeverOverflow"/></m:layoutData>
+                </m:Button>
+            </m:OverflowToolbar>
+        </f:footer>
+    </f:DynamicPage>
+</mvc:View>

package/src/templates/webapp/view/fragments/GroupDialog.fragment.xml.ejs

@@ -0,0 +1,11 @@
+<core:FragmentDefinition
+    xmlns="sap.m"
+    xmlns:core="sap.ui.core">
+    <ViewSettingsDialog id="groupDialog" confirm=".onGroupDialogConfirm" resetGroups=".onGroupDialogReset">
+        <groupItems>
+<% columns.filter(c => c.sortable).forEach(col => { -%>
+            <ViewSettingsItem key="<%= col.name %>" text="{i18n>col.<%= col.name %>}"/>
+<% }) -%>
+        </groupItems>
+    </ViewSettingsDialog>
+</core:FragmentDefinition>

package/src/templates/webapp/view/fragments/InfoPopover.fragment.xml

@@ -0,0 +1,38 @@
+<core:FragmentDefinition
+    xmlns="sap.m"
+    xmlns:core="sap.ui.core"
+    xmlns:l="sap.ui.layout">
+
+    <!--
+      Demo popover for the "row -> link -> info" pattern.
+      Data is read from the "worklistView>/infoPopoverData" JSON model path, which is
+      populated by Worklist.controller.js -> onInfoPopoverPress before the popover opens.
+
+      Replace the labels and the fields to match whatever entity / fields you want to show.
+    -->
+    <Popover
+        id="infoPopover"
+        title="{i18n>infoPopoverTitle}"
+        placement="Auto"
+        contentWidth="22rem"
+        class="sapUiContentPadding">
+        <content>
+            <l:VerticalLayout class="sapUiSmallMargin">
+                <Label text="{i18n>infoPopoverKey}" design="Bold"/>
+                <Text text="{worklistView>/infoPopoverData/key}"/>
+
+                <Label text="{i18n>infoPopoverDetail}" design="Bold" class="sapUiSmallMarginTop"/>
+                <Text text="{worklistView>/infoPopoverData/detail}"/>
+
+                <Label text="{i18n>infoPopoverTimestamp}" design="Bold" class="sapUiSmallMarginTop"/>
+                <Text text="{path:'worklistView>/infoPopoverData/timestamp', formatter:'.formatter.formatDate'}"/>
+            </l:VerticalLayout>
+        </content>
+        <footer>
+            <OverflowToolbar>
+                <ToolbarSpacer/>
+                <Button text="{i18n>close}" press=".onInfoPopoverClose"/>
+            </OverflowToolbar>
+        </footer>
+    </Popover>
+</core:FragmentDefinition>

package/src/templates/webapp/view/fragments/SortDialog.fragment.xml.ejs

@@ -0,0 +1,11 @@
+<core:FragmentDefinition
+    xmlns="sap.m"
+    xmlns:core="sap.ui.core">
+    <ViewSettingsDialog id="sortDialog" confirm=".onSortDialogConfirm">
+        <sortItems>
+<% columns.filter(c => c.sortable).forEach(col => { -%>
+            <ViewSettingsItem key="<%= col.name %>" text="{i18n>col.<%= col.name %>}"/>
+<% }) -%>
+        </sortItems>
+    </ViewSettingsDialog>
+</core:FragmentDefinition>