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

<div>
    <div data-ng-controller="FormViewController as formViewCtrl">

        <div class="row entity-actions">
            <button class="btn btn-primary pull-left" data-ng-click="cancel()">Back to search</button>

            <div class="pull-right" data-ng-show="editMode && !formViewCtrl.fullDatabase.readonly">
                <button class="btn btn-primary action-button" data-ng-click="formViewCtrl.save()">Save</button>
                <button class="btn btn-danger action-button" data-ng-click="formViewCtrl.revert()">Revert</button>
            </div>
            <div class="pull-right" data-ng-hide="editMode || formViewCtrl.fullDatabase.readonly">
                <button class="btn btn-primary action-button" data-ng-click="toggleView()">Edit</button>
            </div>
        </div>

        <div ng-if="state">
            <div>
                <div class="panel panel-default" data-ng-controller="PropertiesController as propertiesCtrl">
                    <div class="panel-heading clearfix">
                        <h4 class="panel-title pull-left">Properties</h4>
                    </div>
                    <div class="panel-body">
                        <div ng-show="propertiesCtrl.properties.length === 0">
                            <div ng-show="!editMode">
                                No properties
                            </div>
                            <div ng-show="editMode && !formViewCtrl.fullDatabase.readonly">
                                Add property
                                <a class="btn btn-primary" data-ng-click="propertiesCtrl.newProperty()">
                                    <i class="fa fa-plus"></i>
                                </a>
                            </div>

                        </div>

                        <form class="form-horizontal" name="propsForm" novalidate>
                            <div class="row" style="font-weight: bold" data-ng-show="propertiesCtrl.properties.length">
                                <div class="col-md-3">
                                    Name
                                </div>
                                <div class="col-md-2">
                                    Type
                                </div>
                                <div class="col-md-7">
                                    Value
                                </div>
                            </div>
                            <div class="row" data-ng-repeat="property in propertiesCtrl.properties">
                                <div class="col-md-3">
                                    <div data-ng-class="{'has-error':  hasError('propsForm', $index + 'name' )}">
                                        <input name="{{$index + 'name'}}"
                                               data-ng-type="text"
                                               class="form-control"
                                               data-ng-required="true"
                                               data-ng-model="property.name"
                                               data-ng-disabled="!editMode || formViewCtrl.fullDatabase.readonly"
                                               data-ng-change="propertiesCtrl.checkDuplicates(property)"
                                               placeholder="Enter name"
                                               data-uib-tooltip="{{getMessage('propsForm', $index + 'name')}}"
                                               data-uib-tooltip-trigger="mouseenter">
                                    </div>
                                </div>
                                <div class="col-md-2">
                                    <ui-select data-ng-model="property.type"
                                               data-theme="bootstrap"
                                               data-ng-disabled="!editMode  || formViewCtrl.fullDatabase.readonly"
                                               data-ng-change="propertiesCtrl.removeValue(property)">
                                        <ui-select-match placeholder="Select property type">
                                            {{$select.selected.displayName}}
                                        </ui-select-match>
                                        <ui-select-choices
                                                repeat="type in propertiesCtrl.allPropertyTypes track by type.displayName">
                                            <small data-ng-bind="type.displayName"></small>
                                        </ui-select-choices>
                                    </ui-select>
                                </div>
                                <div class="col-md-7">
                                    <div class="form-group col-md-10"
                                         data-ng-class="{'has-error':  hasError('propsForm', $index + 'value' )}">
                                        <div>
                                            <input name="{{$index + 'value'}}"
                                                   class="form-control"
                                                   data-ng-pattern="property.type.validation.pattern"
                                                   data-ng-model="property.value"
                                                   data-ng-required="true"
                                                   placeholder="Enter value"
                                                   data-ng-change="propertiesCtrl.validateType(property)"
                                                   data-ng-disabled="!editMode || property.type.readonly  || formViewCtrl.fullDatabase.readonly"
                                                   data-uib-tooltip="{{getMessage('propsForm', $index + 'value')}}"
                                                   data-uib-tooltip-trigger="mouseenter">
                                        </div>
                                    </div>
                                    <div class="col-md-2" data-ng-show="editMode && !formViewCtrl.fullDatabase.readonly">
                                        <div data-ng-show="$index + 1 !== propertiesCtrl.properties.length">
                                            <a class="btn btn-danger"
                                               data-ng-click="propertiesCtrl.removeProperty(property)">
                                                <i class="fa fa-trash"></i>
                                            </a>
                                        </div>
                                        <div class="btn-group"
                                             data-ng-show="$index + 1 === propertiesCtrl.properties.length">
                                            <a class="btn btn-danger"
                                               data-ng-click="propertiesCtrl.removeProperty(property)">
                                                <i class="fa fa-trash"></i>
                                            </a>
                                            <a class="btn btn-primary" data-ng-click="propertiesCtrl.newProperty()">
                                                <i class="fa fa-plus"></i>
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
            <div>
                <div class="panel panel-default" data-ng-controller="LinksController as linksCtrl">
                    <div class="panel-heading clearfix">
                        <h4 class="panel-title pull-left">Links</h4>
                    </div>
                    <div class="panel-body">

                        <div class="row" style="font-weight: bold"
                             ng-show="(editMode || linksCtrl.currentLinks().length) && !formViewCtrl.fullDatabase.readonly">
                            <div class="col-md-3">
                                Name
                            </div>
                            <div class="col-md-9">
                                Value
                            </div>
                        </div>
                        <div class="row add-link-section" ng-show="editMode && !formViewCtrl.fullDatabase.readonly">
                            <form class="form-horizontal" name="linksForm" novalidate>
                                <div class="col-md-3">
                                    <div data-ng-class="{'has-error':  hasError('linksForm', 'name' )}">
                                        <input name="name" data-ng-type="text" class="form-control"
                                               placeholder="Enter name"
                                               data-ng-required="true"
                                               data-ng-model="linksCtrl.newLink.name"
                                               data-uib-tooltip="{{getMessage('linksForm', 'name')}}"
                                               data-uib-tooltip-trigger="mouseenter">
                                    </div>
                                </div>
                                <div class="col-md-2">
                                    <ui-select data-ng-model="linksCtrl.newLink.type"
                                               data-theme="bootstrap"
                                               data-ng-change="linksCtrl.resetNewEntityType()">
                                        <ui-select-match placeholder="Select type">
                                            {{$select.selected.name}}
                                        </ui-select-match>
                                        <ui-select-choices
                                                repeat="type in linksCtrl.allEntityTypes | filter: $select.search track by type.id"
                                                class="ui-select-choices-form-view">
                                            <small data-ng-bind="type.name"></small>
                                        </ui-select-choices>
                                    </ui-select>
                                </div>
                                <div class="col-md-7">
                                    <div class="form-group col-md-10"
                                         data-ng-class="{'has-error':  hasError('linksForm', 'value' )}">
                                        <div>
                                            <ui-select data-ng-model="linksCtrl.newLink.value"
                                                       data-theme="bootstrap"
                                                       data-ng-required="true"
                                                       name="value">
                                                <ui-select-match placeholder="Search entity">
                                                    {{$select.selected.label}}
                                                </ui-select-match>
                                                <ui-select-choices repeat="entity in linksCtrl.entities"
                                                                   refresh="linksCtrl.searchEntities($select.search)"
                                                                   refresh-delay="500">
                                                    <small data-ng-bind="entity.label"></small>
                                                </ui-select-choices>
                                            </ui-select>
                                        </div>
                                    </div>
                                    <div class="col-md-2" data-ng-show="editMode">
                                        <a class="btn btn-primary"
                                           data-ng-click="linksCtrl.addNewLink(linksCtrl.newLink, formViewCtrl.linkChanges)">
                                            Add link
                                        </a>
                                    </div>
                                </div>
                            </form>
                            <hr>
                        </div>
                        <div data-ng-show="linksCtrl.currentLinks().length === 0">
                            <div data-ng-class="{'no-link-text' : editMode}">
                                No links
                            </div>
                        </div>
                        <div class="row form-view-link-row" data-ng-repeat="link in linksCtrl.currentLinks()">
                            <div class="col-md-3">
                                {{link.name}}
                            </div>
                            <div class="col-md-9">
                                <div class="col-md-10" style="padding: 0; margin-right: -30px;">
                                    <linked-entities-view
                                            links-pager="link"
                                            entity="entity()"
                                            on-remove="linksCtrl.onRemoveLink(formViewCtrl.linkChanges)"
                                            is-edit-mode="editMode"
                                    ></linked-entities-view>
                                </div>
                                <div class="col-md-2 pull-right" data-ng-show="editMode && !formViewCtrl.fullDatabase.readonly">
                                    <a class="btn btn-danger"
                                       data-ng-click="linksCtrl.totallyRemoveLink(link.name, formViewCtrl.linkChanges)">
                                        <i class="fa fa-trash"></i>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div>
                <div class="panel panel-default" data-ng-controller="BlobsController as blobs">
                    <div class="panel-heading clearfix">
                        <h4 class="panel-title pull-left">Blobs</h4>
                    </div>
                    <div class="panel-body">
                        <div data-ng-show="uiBlobs.length === 0">
                            No blobs
                        </div>
                        <div class="row" style="font-weight: bold" data-ng-show="uiBlobs.length">
                            <div class="col-md-3">
                                Name
                            </div>
                            <div class="col-md-2">
                                Size
                            </div>
                            <div class="col-md-7">
                                Action
                            </div>
                        </div>
                        <div class="row form-view-link-row" data-ng-repeat="blob in uiBlobs">
                            <div class="col-md-3">
                                {{blob.name}}
                            </div>
                            <div class="col-md-2">
                                {{blob.blobSize}}
                            </div>
                            <div class="col-md-7">
                                <a class="btn btn-default" target="_self"
                                   data-ng-click="blobs.downloadBlob(blob)">
                                    Binary <i class="fas fa-arrow-circle-down"></i>
                                </a>
                                <a class="btn btn-default" target="_self"
                                   data-ng-click="blobs.downloadBlobString(blob)">
                                    UTF <i class="fas fa-arrow-circle-down"></i>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>