ui5_easy_use/dist/ez5/templates/page-management/controller/Details_controller.js

CLI tool for SAP ui5 and SAPUI5 projects to initialize apps, generate pages, insert form and table components, manage routing, and automate i18n bindings

sap.ui.define([
    "sap/ui/core/mvc/Controller",
    "sap/ui/model/json/JSONModel"
], function (Controller, JSONModel) {
    "use strict";

    return Controller.extend("${ez5.appName}.controller.${ez5.controllerName}", {
        onInit: function () {
            this._initializeRouteState();
            this._initializeFlexibleLayoutControls();
            this._attachRouteMatched();
        },

        _initializeRouteState: function () {
            this._listRouteName = "Route${ez5.listPageName}";
            this._selfRouteName = "Route${ez5.controllerName}";
            this._oRouter = this.getOwnerComponent().getRouter();
            this._oModel = this.getOwnerComponent().getModel("fclModel");
        },

        _initializeFlexibleLayoutControls: function () {
            this._oExitButton = this.getView().byId("exitFullScreenBtn");
            this._oEnterButton = this.getView().byId("enterFullScreenBtn");
            this._attachFullScreenFocusDelegates([this._oExitButton, this._oEnterButton]);
        },

        _attachRouteMatched: function () {
            this._oRouter.getRoute(this._selfRouteName).attachPatternMatched(this._onRouteMatched, this);
        },

        // Keeps keyboard focus on the fullscreen button that triggered a layout change.
        _attachFullScreenFocusDelegates: function (buttons) {
            (buttons || []).forEach(function (button) {
                if (!button) {
                    return;
                }

                button.addEventDelegate({
                    onAfterRendering: function () {
                        if (this._bFocusFullScreenButton) {
                            this._bFocusFullScreenButton = false;
                            button.focus();
                        }
                    }.bind(this)
                });
            }, this);
        },

        handleItemPress: function () {
        },

        handleFullScreen: function () {
            this._navigateWithLayout("/actionButtonsInfo/midColumn/fullScreen", this._selfRouteName);
        },

        handleExitFullScreen: function () {
            this._navigateWithLayout("/actionButtonsInfo/midColumn/exitFullScreen", this._selfRouteName);
        },

        handleClose: function () {
            this._navigateToList();
        },

        handleCloseToList: function () {
            this._navigateToList();
        },

        _navigateWithLayout: function (layoutPath, routeName) {
            this._bFocusFullScreenButton = true;
            this._oRouter.navTo(routeName, {
                id: this._id,
                layout: this._oModel.getProperty(layoutPath)
            });
        },

        _navigateToList: function () {
            const nextUIState = this.getOwnerComponent().getHelper().getNextUIState(0);
            this._oRouter.navTo(this._listRouteName, {
                layout: nextUIState.layout
            });
        },

        _resolveNavigationId: function (oEvent) {
            const context = oEvent?.getSource?.().getBindingContext?.();
            const object = context?.getObject?.();

            if (object && (object.id || object.ID || object.Id)) {
                return object.id || object.ID || object.Id;
            }

            return this._id || "0";
        },

        _onRouteMatched: function (oEvent) {
            this._id = oEvent.getParameter("arguments").id || this._id || "0";
            this._syncSelectedEmployeeModel();
        },

        // Searches available models for the selected record so the detail page works with generated table data.
        _syncSelectedEmployeeModel: function () {
            const selectedEmployee = this._findSelectedEmployee();
            if (selectedEmployee) {
                this.getView().setModel(new JSONModel(selectedEmployee), "employeeModel");
            }
        },

        _findSelectedEmployee: function () {
            const models = this._collectCandidateModels();

            for (let index = 0; index < models.length; index += 1) {
                const selectedEmployee = this._findSelectedEmployeeInModel(models[index]);
                if (selectedEmployee) {
                    return selectedEmployee;
                }
            }

            return null;
        },

        _collectCandidateModels: function () {
            const component = this.getOwnerComponent();
            const componentModels = component?.oModels || {};
            const candidates = [];

            if (component?.getModel?.()) {
                candidates.push(component.getModel());
            }

            Object.keys(componentModels).forEach(function (modelName) {
                candidates.push(componentModels[modelName]);
            });

            return candidates.filter(Boolean);
        },

        _findSelectedEmployeeInModel: function (model) {
            return this._findSelectedEmployeeInValue(model?.getData?.());
        },

        _findSelectedEmployeeInValue: function (value) {
            if (Array.isArray(value)) {
                return this._findSelectedEmployeeInArray(value);
            }

            if (!value || typeof value !== "object") {
                return null;
            }

            if (this._matchesSelectedId(value)) {
                return value;
            }

            return this._findSelectedEmployeeInArray(Object.keys(value).map(function (key) {
                return value[key];
            }));
        },

        _findSelectedEmployeeInArray: function (values) {
            for (let index = 0; index < values.length; index += 1) {
                const selectedEmployee = this._findSelectedEmployeeInValue(values[index]);
                if (selectedEmployee) {
                    return selectedEmployee;
                }
            }

            return null;
        },

        _matchesSelectedId: function (value) {
            const candidates = [
                value.EmployeeId,
                value.employeeId,
                value.ID,
                value.Id,
                value.id
            ];

            return candidates.some(function (candidate) {
                return candidate !== undefined
                    && candidate !== null
                    && String(candidate) === String(this._id);
            }, this);
        },

        onExit: function () {
            if (this._oRouter) {
                this._oRouter.getRoute(this._selfRouteName).detachPatternMatched(this._onRouteMatched, this);
            }
        }
    });
});