catalysts / cat-angular Goto Github PK

Right now all cat-angular cat-i18n keys look like this:

'cc.catalysts.cat-[breadcrumbs|menu|facets|paginated|sortable].[...whatever...]'.

Among all application-specific keys in our application, namespaced with the application's context, this strict naming convention is not elegant and we'd like to use our own prefix.
Therefore I'd like to propose a configurable prefix for cat-i18n to optionally replace 'cc.catalysts' from the above prefix by whatever is the application's context.

Reason:

• Currently ui-select2 is used to configure parts of cat-select.
• This violates the encapsulation, as ui-select2 is IMHO an implementation detail of cat-select.
• It would be nice to if all relevant settings would be provided as direct cat-select attributes, which could be forwarded to the ui-select2 internally.
• So the implementation switches to some other control internally later, the interface could stay stable.

The point on having the event listener is that each list can be refreshed on its own. Therefore the listener should be instantiated on cat-paginated's own scope.

NPM provides frontend dependency management features. Some libraries don't support bower (e.g. angular2). Having two frontend package management mechanisms would be an overkill for us, therefore we decided to go with npm only.
In order to be able to use cat-angular with npm, we need the dist folder to be part of the npm package.

At the moment cat-angular has a lot of hard-coded naming conventions throughout it's code. Especially for somebody who hasn't used it before these are quite daunting as they don't follow any particular pattern. (Note: this is not entirely true, and there have been reasons for all of the current conventions at the time, but it should still be cahnged)

A way to get rid of all these strange patterns would be to replace them by function calls to a dedicated service. This would mean that the only thing the user provides would be a single string at the entry point of listAndDetailView which will then be passed to different service methods.

function CatNamingService {
    /* State names */
    this.getListStateName = function(name, parents) {/**/};
    this.getDetailStateName= function(name, parents) {/**/};
    /* Template names */
    this.getDetailViewTemplate= function(name, parents) {/**/};
    /* Endpoint names */
    this.getEndpointName= function(name) {/**/};
    // ...
}

The above code is just a first idea of how it could look like (no real though has gone into it).
The actual implementation should be quite straight forward and probably don't transform the name at all and just use it as is, and concatenate with parent names where applicable.

For the legacy part i would just add a separate module cat-legacy-naming in cat-angular (but not part of the cat module dependencies) which decorates the service to provide the current naming conventions.

A more sophisticated approach could be to provide multiple naming strategies.

Improving on the single cat-naming-service one could even go a step further and split the different parts where the name is used into different services like cat-template-source, cat-state-service etc. which would probably better handle separation of concerns.

Furthermore we should get rid of all our ugly window.cat.util stuff ;)

The parameters multiple and readonly only work in a hard-coded manner. multiple="false" or readonly="false" still makes the component multi-selactable and readonly. The reason is in the wrapped select2 component.

For conditional tabs, if one edits an entity and saves it, the tabs are not refreshed (because the tab might become invisible because of property edit) only when manually refreshing the page.

In the case of background requests that are not directly related to user interaction the loading spinner shouldn't be shown and this should be configurable. (In our case also important for testability).

Currently it is only possible to add a MenuEntry or MenuGroup to a Menu.

It should also be possible to add another Menu (Submenu) to a Menu if there are to many Entries to display in the first Level or an additional hierarchy makes sense.

Currently window.cat.SearchRequests defaults to a page size of 100 - which is in many cases already too much. For any custom request utilizing such search requests this isn't really a problem but for list pages where the actual data is loaded via a hole lot of 'magic' configuration the page size can only be changed via decoration of the catListDataLoadingService.
This already requires some quite deep knowledge of the internal workings of cat-angular and doesn't provide a very good user experience.

A better way would be to have

• a service for 'global' defaults
• a configuration option during view configuration to specify a 'default' search-request for the list view

If several angular components have to refresh the same list at the same time, using the same catApi endpoint, several requests are made and all of them load the list of elements. This is a problem for the performance and could be resolved in different ways.

One possibility is to keep running (unresolved) promises until resolution (or rejection) and return it to all subsequent callers if they have the same Search request parameters.

Because of teh hard-coded 50ms start delay for the spinner the time cannot be configured.
The timeout should be customizable in the config phase.

we implemented such an operator into cat-main-menu.js , but because of the new way the visibility is evaluated, we have to add this operator somewhere again.

with the new visiblity service, we also can implement this for buttons and actions.

This is the old code of cat-main-menu.js

angular.module('cat.directives.menu')
    .directive('catMainMenu', ['$mainMenu', '$rootScope', '$location', function CatMainMenuDirective($mainMenu, $rootScope, $location) {
        return {
            restrict: 'E',
            scope: {},
            link: function CatMainMenuLink(scope) {
                scope.menus = $mainMenu.getMenus();
                scope.isVisible = function (entry) {
                    var visible = false;
                    if (entry.isMenu() || entry.isGroup()) {
                        _.forEach(entry.getEntries(), function (subEntry) {
                            visible = visible || scope.isVisible(subEntry);
                        });
                        if (entry.isMenu()) {
                            _.forEach(entry.getGroups(), function (groups) {
                                visible = visible || scope.isVisible(groups);
                            });
                        }
                    } else {
                        return scope.isAllowed(entry);
                    }
                    return visible;
                };
                scope.isAllowed = function (entry) {
                    var rights = entry.getOptions().rights;
                    var rightsOperator = entry.getOptions().rightsOperator || 'all';
                    if (!!rights) {
                        if (_.isArray(rights)) {
                            var allowed = true;
                            if ('all' === rightsOperator) {
                                for (var i = 0; i < rights.length; i++) {
                                    allowed = allowed && $rootScope.isAllowed(rights[i]);
                                }
                            } else if ('any' === rightsOperator) {
                                allowed = false;
                                for (var j = 0; j < rights.length; j++) {
                                    allowed = allowed || $rootScope.isAllowed(rights[j]);
                                }
                            }
                            return allowed;
                        }
                        return $rootScope.isAllowed(rights);
                    }
                    return true;
                };

                scope.isActive = function (path) {
                    return $location.path().substr(0, path.length) === path;
                };
            },
            templateUrl: 'template/cat-main-menu.tpl.html'
        };
    }]);

Reason:

• If you are using a UI which is quite dynamically composed by aggregation of multiple HTML templates (Some templates could even be provided by plugins).
• If these templates contain "cat-select" directives the definition of the "endpoint" would require an additional block of javascript code (Code-Behind).

Possible solutions:

• Add a "autocreate" option to cat-select, which will create none existing endponts.
• Add an attribute directive, which creates none existing endpoints.

Commit 8b6d8b52a broke the search filtering in our project. Why was this change necessary? Before you could pass an array or an object into the search and it rendered it into the url like param[]=12&param[]=34 for arrays and as param[asdf]=123 for objects. Now it serializes param=12&param=34 for arrays and param=[oject object] for objects.

There are several cat-paginated objects in the same DOM, fetching data from the same or from different endpoints. Because of the line directives/cat-paginated.js:131

    $rootScope.$broadcast('SearchChanged', search, DELAY_ON_SEARCH);

if the user changes the search request in one of them, all lists get refreshed with the same search request settings, not only the one that the user is manipulating.

We would need a default sorting parameter for cat-paginated with cat-sortable.
It seems that there's a plan to add directive configuration for default sorting.

As the title says cat-angular should be compatible to both, lodash 2.x and 3.x.

The cat-paginated element should support RefreshList event (or similar) so that a surrounding scope can broadcast it in case the data changed on the backend (this information comes from another channel). On such an event the same query should be fired and the result listed in the cat-paginated element.

We use now angular-bootstrap v1.1 so cat-angular has to support at least v0.14 because of some breaking changes (see https://github.com/angular-ui/bootstrap/wiki/Migration-guide-for-prefixes)

e.g. Gateway should be pluralized to Gateways not Gatewaies

The ngRoute with it's route based configuration makes it hard to handle sub routes and impossible to have multiple independent view parts on a single page.
Both would be easy to accomplish with ui.router

For the goal should be to make the transition for cat-angular users as easy as possible.

Further improvements utilizing the features of ui.router can follow later.

I get the following error when I try to run 'gulpw' on cloned cat-angular:

TypeError: Cannot assign to read only property '$methodName' of false at matchRegular (C:\catalysts\Apps\cat-angular\node_modules\gulp-ng-annotate\node_modules\ng-annotate\build\es5\ng-annotate-main.js:272:24) at match (C:\catalysts\Apps\cat-angular\node_modules\gulp-ng-annotate\node_modules\ng-annotate\build\es5\ng-annotate-main.js:32:10) at traverse.post (C:\catalysts\Apps\cat-angular\node_modules\gulp-ng-annotate\node_modules\ng-annotate\build\es5\ng-annotate-main.js:912:23) at visit (C:\catalysts\Apps\cat-angular\node_modules\gulp-ng-annotate\node_modules\ng-annotate\node_modules\ordered-ast-traverse\ordered-ast-traverse.js:50:13) at visit (C:\catalysts\Apps\cat-angular\node_modules\gulp-ng-annotate\node_modules\ng-annotate\node_modules\ordered-ast-traverse\ordered-ast-traverse.js:44:21) at visit (C:\catalysts\Apps\cat-angular\node_modules\gulp-ng-annotate\node_modules\ng-annotate\node_modules\ordered-ast-traverse\ordered-ast-traverse.js:44:21) at visit (C:\catalysts\Apps\cat-angular\node_modules\gulp-ng-annotate\node_modules\ng-annotate\node_modules\ordered-ast-traverse\ordered-ast-traverse.js:41:25) at visit (C:\catalysts\Apps\cat-angular\node_modules\gulp-ng-annotate\node_modules\ng-annotate\node_modules\ordered-ast-traverse\ordered-ast-traverse.js:44:21) at visit (C:\catalysts\Apps\cat-angular\node_modules\gulp-ng-annotate\node_modules\ng-annotate\node_modules\ordered-ast-traverse\ordered-ast-traverse.js:41:25) at visit (C:\catalysts\Apps\cat-angular\node_modules\gulp-ng-annotate\node_modules\ng-annotate\node_modules\ordered-ast-traverse\ordered-ast-traverse.js:44:21)

After some googling I found out that this can be solved by updating the version of gulp-ng-annotate.

Well, the update commant does not work as expected. But I found a way which really updates the package and solves the issue

1. manually change the version in package.json to "grunt-ng-annotate": "^1.0.1"
2. run npm install
3. Issue is solved.

Solution was found here

Reasons:

• Results visible for all
• Free to use
• Also supports autobuild on push, build on merge request

In catValidationMessageHandler rejection.data can be null: