ferngully-aurelia-tools/dist/native-modules/resources/customElements/form-schema-collection/form-schema-collection.html

Ferngully Tools for Aurelia

<template>
  <!--<require from="./form-schema-collection.css"/>-->

    <editable-inline-input view-model.ref="editableInlineInput" class-ex="form-control"></editable-inline-input>
    <editable-inline-textarea view-model.ref="editableInlineTextArea" class-ex="form-control"></editable-inline-textarea>
    <editable-inline-select view-model.ref="editableInlineSelect"></editable-inline-select>
    <editable-inline-dropdown-checkbox view-model.ref="editableInlineDropdownCheckbox"></editable-inline-dropdown-checkbox>
    <editable-inline-calendar view-model.ref="editableInlineCalendar"></editable-inline-calendar>

    <button id="newInstanceButton" if.bind="(handleCreate !== null) && !disableNew" class="btn btn-sm btn-primary nofocus" 
            click.delegate="createInstance()">${'CreateNew' & t}</button>

    <table ref="theTable" class="table formSchemaCollectionTable ${tableClass}" id="formSchemaCollectionTable">
        <thead>
            <tr>
                <th class="validationerror"></th>
                <th repeat.for="property of properties"
                    as-element="sort-column-header"
                    column-name.one-time="property.name"
                    value-resolver.one-time="property.sortValueResolver"
                    sort-column-service.one-time="sortColumnService"
                    data-type.one-time="property.sortDataType"
                    set-to-default.one-time="$first"
                    tie-breaker-column-name.one-time="property.sortTieBreakerColumnName"
                    tie-breaker-data-type.one-time="property.sortTieBreakerDataType"
                    ordinal-position-property-name="_ordinalPosition"
                    descending.one-time="false"
                    class="type_${property.type & oneTime}">
                    ${property.description}
                </th>
                <th if.one-time="!disableDelete" class="delete" tooltip="title-key:Delete">${ 'Delete' & t }</th>
            </tr>
        </thead>
        <tbody>
        <tr repeat.for="instance of instances | sort:sortColumnService.currentSortColumn"
            css="animation-duration: ${$parent.animationDuration & oneTime}s"
            class.one-time="(instance._newlyInserted !== undefined) ? 'newInstance' : null "
            id.one-time="instance[formSchema.key]">

            <td class="validationerror">
                <a if.one-way="instance._validationHtml"
                   role="button"
                   tabindex="1"
                   popover="title-key:ValidationErrors;
                               template.one-way:{content:instance._validationHtml,selectionPath:'div.validationMessagesPopup',bindingContext:$parent };
                               trigger:hover-modal;
                               html.one-time:true;
                               placement:right;"><i class="fa fa-exclamation-triangle"></i>
                </a>
            </td>

            <td repeat.for="property of properties" class="type_${property.type & oneTime}">

                <div class="fld">
                    <div if.one-time="!property.isKey && property.type==='string'"
                        editable-inline="target.two-way:instance[property.name] & validate:validationController;editable-inline-editor.one-way:editableInlineInput;container:table#formSchemaCollectionTable">
                        <span if.bind="property.required || (('' + instance[property.name]).trim() !== '')" textcontent.bind="instance[property.name] | ensureNotEmpty"></span>
                        <span style="display:inline-block; min-width: 100px;" if.bind="!property.required && (('' + instance[property.name]).trim() === '')">&nbsp;</span>
                    </div>

                    <div if.one-time="!property.isKey && property.type==='multiLineString'"
                            editable-inline="editor-data.one-way: property.multiLineStringConfiguration;target.two-way:instance[property.name] & validate:validationController;editable-inline-editor.one-way:editableInlineTextArea;container:table#formSchemaCollectionTable">
                        <span if.bind="property.required || (('' + instance[property.name]).trim() !== '')" innerhtml.bind="instance[property.name] | sanitizeHTML | crBr | ensureNotEmpty"></span>
                        <span style="display:inline-block; min-width: 100px;" if.bind="!property.required && (('' + instance[property.name]).trim() === '')">&nbsp;</span>
                    </div>

                    <div if.one-time="property.type==='boolean'">
                        <boolean-input target.two-way="instance[property.name] & validate:validationController" gray-on-false.one-time="true"></boolean-input>
                    </div>

                    <div if.one-time="!property.isKey && property.type==='integer'">
                        <number-input style="width: 80px;" target.two-way="instance[property.name] | ensureNotEmpty:property.required:'[???]' & debounce:1500 & validate:validationController" />
                    </div>

                    <div if.one-time="!property.isKey && property.type==='number'"
                         editable-inline="target.two-way:instance[property.name] | number & validate:validationController;editable-inline-editor.one-way:editableInlineInput;container:table#formSchemaCollectionTable">
                        <span if.bind="property.required || (instance[property.name] !== undefined)" textcontent.bind="instance[property.name] | number | ensureNotEmpty:true:'[???]'"></span>
                        <span style="display:inline-block; min-width: 100px;" if.bind="!property.required && (instance[property.name] === undefined)">&nbsp;</span>
                    </div>

                    <div if.one-time="property.type==='currency'"
                         editable-inline="target.two-way:instance[property.name] | currency & validate:validationController;editable-inline-editor.one-way:editableInlineInput;container:table#formSchemaCollectionTable">
                        <span if.bind="property.required || (instance[property.name] !== undefined)" textcontent.bind="instance[property.name] | currency | ensureNotEmpty:true:'[???]'"></span>
                        <span style="display:inline-block; min-width: 100px;" if.bind="!property.required && (instance[property.name] === undefined)">&nbsp;</span>
                    </div>

                    <div if.one-time="property.type==='calendar'"
                         editable-inline="editor-data.one-way: property.calendarConfiguration;target.two-way:instance[property.name] | dateStringConvert:property.calendarConfiguration.ViewmodelFormat:property.calendarConfiguration.DisplayFormat & validate:validationController;editable-inline-editor.one-way:editableInlineCalendar;container:table#formSchemaCollectionTable">
                        <span if.bind="property.required || (instance[property.name] !== undefined)" textcontent.bind="instance[property.name]  | dateStringConvert:property.calendarConfiguration.ViewmodelFormat:property.calendarConfiguration.DisplayFormat | ensureNotEmpty:true:'[???]'"></span>
                        <span style="display:inline-block; min-width: 100px;" if.bind="!property.required && (instance[property.name] === undefined)">&nbsp;</span>
                    </div>

                    <div if.one-time="property.type==='dropdown'">
                        <div editable-inline="editor-data.one-way: property.dropdownConfiguration.DropdownData;target.two-way:instance[property.name] | number & validate:validationController;editable-inline-editor.one-way:editableInlineSelect;container:table#formSchemaCollectionTable">
                            <span>${dropdownTextFromValue(property.dropdownConfiguration.DropdownData, instance[property.name])}</span>
                        </div>
                    </div>

                    <div if.one-time="property.type==='dropdown-checkbox'">
                        <div editable-inline="editor-data.one-way: property.dropdownCheckboxConfiguration.DropdownData;target.two-way:instance[property.name] & validate:validationController;editable-inline-editor.one-way:editableInlineDropdownCheckbox;container:table#formSchemaCollectionTable">
                            <span if.bind="property.required || (instance[property.name] !== undefined)" textcontent.bind="computeSelectedItemsString(property.dropdownCheckboxConfiguration.DropdownData, instance[property.name]) | ensureNotEmpty:true:'[???]'"></span>
                            <span style="display:inline-block; min-width: 100px;" if.bind="!property.required && (instance[property.name] === undefined)">${property.dropdownCheckboxConfiguration.NoItemsText || "[Select...]"}</span>
                        </div>
                    </div>

                    <div if.one-time="property.isKey">
                        ${instance[property.name]}
                    </div>
                </div>
            </td>
            <td if.one-time="!instance._pendingInsert && !disableDelete" class="delete" style="vertical-align: middle"><i class="fa fa-trash iconButton" click.delegate="deleteInstance(instance)"></i></td>

            <td if.one-way="instance._pendingInsert" style="vertical-align: middle"><save-cancel-row save.call="saveNewInstance(instance)"
                                                                                                     cancel.call="cancelNewInstance(instance)"
                                                                                                     save-enabled.one-way="!instance._validationHtml || (instance._validationHtml.length === 0)"></save-cancel-row></td>

        </tr>


        </tbody>
    </table>

</template>