Grid Overlay Customize

CustomGridOverlay.js

'use strict';
function CustomItemPickerOverlay($scope, localizationService) {
    $scope.groups = [];
    function onInit() {
        $scope.model.hideSubmitButton = true;
        if (!$scope.model.title) {
            localizationService.localize('defaultdialogs_selectItem').then(function (value) {
                $scope.model.title = value;
            });
        }
        if (!$scope.model.orderBy) {
            $scope.model.orderBy = 'name';
        }
        debugger;
        for (var i = 0; i < $scope.model.availableItems.length; i++) {
            if ($scope.groups.indexOf($scope.model.availableItems[i].config.searchClass) !== -1) {
                
            } else {
                $scope.groups.push($scope.model.availableItems[i].config.searchClass);
            }
        }
    }

    $scope.selectItem = function (item) {
        $scope.model.selectedItem = item;
        $scope.submitForm($scope.model);
    };
    onInit();
}
angular.module('umbraco').controller('Umbraco.Overlays.CustomItemPickerOverlay', CustomItemPickerOverlay);

(() => {
    function interceptor($q) {
        return {
            request: req => {
                if (req.url.toLowerCase().indexOf('itempicker.html') !== -1) {
                    if (location.hash.indexOf('content') !== -1) {
                        req.url = '../app_plugins/myplugins/views/customitemoverlay.html?v=11';
                    }
                }
                return req || $q.when(req);
            }
        };
    }

    angular.module('umbraco').factory('umbracoOverlayInterceptor', ['$q', interceptor]);
})();

(() => {
    'use strict';

    angular.module('umbraco')
        .config(function ($httpProvider) {
            $httpProvider.interceptors.push('umbracoOverlayInterceptor');
        });
})();

customitemoverlay.html

<div ng-controller="Umbraco.Overlays.CustomItemPickerOverlay" style="display:none;" class="umb-itempicker">
    <div ng-if="isEmptyObject(model.availableItems.config.searchClass)">
        <div class="form-search" ng-hide="model.filter === false" style="margin-bottom: 15px;">
            <i class="icon-search"></i>
            <input type="text"
                   ng-model="searchTerm"
                   class="umb-search-field search-query input-block-level -full-width-input"
                   localize="placeholder"
                   placeholder="@placeholders_filter"
                   umb-auto-focus
                   no-dirty-check />
        </div>

        <div class="umb-overlay__section-header" ng-if="(model.pasteItems | filter:searchTerm).length > 0">
            <h5><localize key="content_createFromClipboard">Paste from clipboard</localize></h5>
            <button ng-if="model.clickClearPaste" ng-click="model.clickClearPaste($event)" alt="Clear clipboard for entries accepted in this context.">
                <i class="icon-trash"></i>
            </button>
        </div>

        <ul class="umb-card-grid" ng-class="{'-three-in-row': model.availableItems.length < 7, '-four-in-row': model.availableItems.length >= 7}">
            <li ng-repeat="pasteItem in model.pasteItems | filter:searchTerm"
                ng-click="model.clickPasteItem(pasteItem)">
                <a class="umb-card-grid-item" href="" title="{{ pasteItem.name }}">
                    <span>
                        <i class="{{ pasteItem.icon }}"></i>
                        {{ pasteItem.name | truncate:true:36 }}
                    </span>
                </a>
            </li>
        </ul>

        <div class="umb-overlay__section-header" ng-if="model.pasteItems.length > 0 && (model.availableItems | filter:searchTerm).length > 0">
            <h5><localize key="content_createEmpty">Create new</localize></h5>
        </div>

        <ul class="umb-card-grid" ng-class="{'-three-in-row': model.availableItems.length < 7, '-four-in-row': model.availableItems.length >= 7}">
            <li ng-repeat="availableItem in model.availableItems | compareArrays:model.selectedItems:'alias' | orderBy:model.orderBy | filter:searchTerm"
                ng-click="selectItem(availableItem)">
                <a class="umb-card-grid-item" href="" title="{{ availableItem.name }}">
                    <span>
                        <i class="{{ availableItem.icon }}"></i>
                        {{ availableItem.name }}
                    </span>
                </a>
            </li>
        </ul>

    </div>
    <div ng-if="model.availableItems.config.searchClass != ''">
        <hr />
        <div style="float:left;margin-right:15px; ">
            <h4>Class</h4>
            <select id="SearchClass" ng-model="searchTerm.config.searchClass" ng-init="searchTerm.config.searchClass='Default'" size="20" style=" height:500px;">
                <option ng-repeat="g in groups" value="{{g}}">{{g}}</option>
            </select>
        </div>

        <div style="display:inline-block;">
            <h4>{{searchTerm.config.searchClass}} Controls</h4>
            <div style="overflow-y:scroll; margin-top:-10px; max-height:500px; width:600px;">
                <table class="umb-card-grid table">
                    <tr class="zBestPM-grid-item" ng-repeat="availableItem in model.availableItems |  orderBy:model.orderBy | filter:searchTerm"
                        ng-click="selectItem(availableItem)">
                        <td><i class="{{ availableItem.icon }}"></i></td>
                        <td style="width:100%;"><b>{{ availableItem.name }}</b><br>{{availableItem.config.remark}}</td>
                    </tr>
                </table>
            </div>
        </div>
    </div>
</div>

<script>
    setTimeout(function () {
        $("div .umb-overlay").css("width", "925px");
        $("div .umb-overlay").css("top", "100px");
        $("div .umb-overlay").css("left", "");
        $("div .umb-overlay").css("bottom", "");
        $(".umb-itempicker").css("display", "");
    }, 250);
</script>

package.manifest

{
  "javascript": [
    "/App_Plugins/myplugins/js/CustomGridOverlay.js"
  ]
}