entity-browser-frontend/app/templates/data-view.html

<div>
    <div data-ng-show="!dataViewCtrl.isSearchExecuted">
        <h3 class="text-center">Press search button to find something.</h3>
    </div>
    <div data-ng-show="dataViewCtrl.isSearchExecuted">
        <h3 class="text-center" data-ng-show="!dataViewCtrl.pager.hasResults() && !dataViewCtrl.pager.error">
            Nothing was found</h3>
        <h4 class="text-center error" data-ng-show="dataViewCtrl.pager.error">{{dataViewCtrl.pager.error}}</h4>

        <div data-ng-show="dataViewCtrl.pager.hasResults()">
            <div class="row">
                <div class="col-md-6">
                    <div data-ng-show="dataViewCtrl.pager.hasPagination()">
                        <ul uib-pagination data-total-items="dataViewCtrl.pager.totalCount"
                                        data-ng-model="dataViewCtrl.pager.currentPage"
                                        data-ng-change="dataViewCtrl.pager.pageChanged()"
                                        data-items-per-page="{{dataViewCtrl.pageSize}}"
                                        max-size="5">
                        </ul>
                    </div>
                </div>
                <div class="col-md-6">
                    <h3 class="pull-right" style="margin-top: 5px;margin-bottom: 15px;">
                        Total records: {{dataViewCtrl.pager.totalCount}}
                    </h3>
                </div>
            </div>
            <div>

                <div class="panel panel-default" data-ng-repeat="item in dataViewCtrl.pager.items">
                    <div class="panel-heading clearfix">
                        <h4 class="panel-title pull-left" style="padding-top: 5.5px;">
                            {{item.label}}</h4>

                        <div class="btn-group pull-right" ng-if="!dataViewCtrl.fullDatabase.readonly">
                                <button class="btn btn-primary" data-ng-click="dataViewCtrl.edit(item)">
                                    <i class="fas fa-pencil-alt"></i>
                                </button>
                                <button class="btn btn-danger" data-ng-click="dataViewCtrl.deleteItem(item)">
                                    <i class="fas fa-trash"></i>
                                </button>
                        </div>

                        <div class="btn-group pull-right" ng-if="dataViewCtrl.fullDatabase.readonly">
                                <button class="btn btn-primary" data-ng-click="dataViewCtrl.edit(item)">
                                    <i class="fas fa-external-link-alt"></i>
                                </button>
                        </div>
                    </div>
                    <div class="panel-body">
                        <div>
                            <div data-ng-hide="item.properties.length">
                                No properties
                            </div>
                            <div data-ng-show="item.properties.length">
                                <table class="table table-striped table-condensed preview-entity-properties">
                                    <thead>
                                    <tr style="font-weight: bold">
                                        <td>Name</td>
                                        <td>Type</td>
                                        <td>Value</td>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    <tr data-ng-repeat="p in item.properties">
                                        <td>{{p.name}}</td>
                                        <td>{{p.type.displayName}}</td>
                                        <td>{{p.value}}</td>
                                    </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                        <div data-ng-hide="dataViewCtrl.pager.isExpanded(item)">
                            <a href data-ng-click="dataViewCtrl.pager.expand(item)"><i class="fa fa-bars"></i>
                                expand</a>
                        </div>

                    </div>
                    <ul data-ng-if="dataViewCtrl.pager.isExpanded(item)" class="list-group">
                        <li class="list-group-item search-extended-header">Links
                        </li>
                        <li class="list-group-item">
                            <div data-ng-show="!dataViewCtrl.hasLinksToDisplay(item)">
                                No links
                            </div>
                            <div data-ng-show="dataViewCtrl.hasLinksToDisplay(item)">
                                <table class="table table-striped table-condensed preview-entity-properties">
                                    <thead>
                                    <tr style="font-weight: bold">
                                        <td>Name</td>
                                        <td>Link</td>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    <tr data-ng-repeat="p in item.links">
                                        <td>{{p.name}}</td>
                                        <td class="linked-entities">
                                            <linked-entities-view
                                                    links-pager="p"
                                                    entity="item"
                                            ></linked-entities-view>
                                        </td>
                                    </tr>
                                    </tbody>
                                </table>
                            </div>

                        </li>
                        <li class="list-group-item search-extended-header">Blobs</li>
                        <li class="list-group-item">
                            <div data-ng-hide="item.blobs.length">
                                No blobs
                            </div>
                            <div data-ng-show="item.blobs.length">
                                <table class="table table-striped table-condensed preview-entity-properties">
                                    <thead>
                                    <tr style="font-weight: bold">
                                        <td>Name</td>
                                        <td>Download</td>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    <tr data-ng-repeat="p in item.blobs">
                                        <td>{{p.name}}</td>
                                        <td>
                                            <a class="btn btn-default" target="_self"
                                               data-ng-click="dataViewCtrl.downloadBlob(item, p)">
                                                Binary <i class="fas fa-arrow-circle-down"></i>
                                            </a>
                                            <a class="btn btn-default" target="_self"
                                               data-ng-click="dataViewCtrl.downloadBlobString(item, p)">
                                                UTF <i class="fas fa-arrow-circle-down"></i>
                                            </a>
                                        </td>
                                    </tr>
                                    </tbody>
                                </table>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>

            <div data-ng-show="dataViewCtrl.pager.hasPagination()">
                <ul uib-pagination data-total-items="dataViewCtrl.pager.totalCount"
                                data-ng-model="dataViewCtrl.pager.currentPage"
                                data-ng-change="dataViewCtrl.pager.pageChanged()"
                                data-items-per-page="{{dataViewCtrl.pageSize}}"
                                data-max-size="5">
                </ul>
            </div>
        </div>
    </div>

    <script type="text/ng-template" id="search-info.html">
        <div class="modal-header">
            <h3>Searching tutorial</h3>
        </div>

        <div class="modal-body">
            <section class="search-info-section">
                <h4>Supported cases</h4>
                <p>
                    <code>12</code> Passing any integer value to search input produces search by the id
                </p>
                <p>
                    <code>firstName = John</code> You can search by a property value
                </p>
                <p>
                    <code>firstName != John</code> You can search by a property inequality
                </p>
                <p>
                    <code>'first!Name' = 'J()hn'</code> Non alphanumeric characters keys and values should be wrapped
                    with single braces
                </p>
                <p>
                    <code>secondName = 'Mc''Clane'</code> Escape symbol for single brace is double single brace
                </p>
                <p>
                    <code>firstName = null</code> Use the <i>null</i> keyword to search by an absent value
                </p>
                <p>
                    <code>nickname = 'null'</code> Wrap the null with single braces to search by the "null" string
                    instead
                </p>
                <p>
                    <code>firstName ~ Jo</code> Use the <i>~</i> operand to search for all entities with the
                    <i>firstName</i>
                    property
                    that starts with "Jo" string
                </p>
                <p>
                    <code>age = [25,50]</code> Use square brackets to search for all entities with the <i>integer</i>
                    property <i>age</i>'s value
                    inside the specified interval. Wrap the interval with single braces to search by the "[25,50]"
                    string.
                </p>
                <p>
                    <code>@user = MyUser[18]</code> Search for all entities that have a link with the name <i>user</i>
                    on an
                    entity of type <i>MyType</i> with the <i>localId</i> = 18. You can use the <i>null</i> keyword as
                    the value
                    to search for entities with absent link. The search by the inequality <i>!=</i> is supported also.
                </p>
            </section>

            <section class="search-info-section">
                <h4>Combining searches</h4>
                <p>
                    You can use the <i>and</i> keyword to combine all of the cases above to construct a complex
                    condition
                </p>
                <code>fistName ~ Jo and 'last!Name' = null and @profile = Profile[19]</code>
            </section>

        </div>

        <div class="modal-footer">
            <button type="button" class="btn btn-primary" ng-click="closeInfo()"
                    data-dismiss="modal">Close
            </button>
        </div>
    </script>
</div>