salix/modules/item/front/basic-data/index.html

<mg-ajax 
    path="Items/{{patch.params.id}}" 
    options="vnPatch" 
    override="{filter: {include: [{relation: 'itemType'}, {relation: 'origin'}, {relation: 'ink'}, {relation: 'producer'}, {relation: 'expense'}]}}">
</mg-ajax>
<vn-watcher
    vn-id="watcher"
    data="$ctrl.item"
    form="form"
    save="patch">
</vn-watcher>
<vn-crud-model
    auto-load="true"
    url="Origins"
    data="originsData"
    order="name"
    vn-id="origin-model">
</vn-crud-model>
<form name="form" ng-submit="watcher.submit()" ng-cloak class="vn-w-md">
    <vn-card class="vn-pa-lg">
        <vn-horizontal>
            <vn-textfield
                vn-one
                label="Name"
                ng-model="$ctrl.item.name"
                rule
                vn-focus>
            </vn-textfield>
            <vn-textfield 
                vn-one label="Full name" 
                ng-model="$ctrl.item.longName"
                rule
                info="Full name calculates based on tags 1-3. Is not recommended to change it manually">
            </vn-textfield>
            <vn-autocomplete vn-one
                url="ItemTypes"
                label="Type"
                show-field="name"
                value-field="id"
                ng-model="$ctrl.item.typeFk"
                initial-data="$ctrl.item.itemType"
                fields="['categoryFk']"
                include="'category'">
                <tpl-item>
                    <div>{{name}}</div>
                    <div class="text-caption text-secondary">
                        {{category.name}}
                    </div>
                </tpl-item>
            </vn-autocomplete>
        </vn-horizontal>
        <vn-horizontal>
            <vn-autocomplete vn-one
                url="Intrastats"
                label="Intrastat"
                show-field="description"
                value-field="id"
                ng-model="$ctrl.item.intrastatFk"
                search-function="{or: [{id: {like: $search +'%'}}, {description: {like: '%'+ $search +'%'}}]}"
                initial-data="$ctrl.item.intrastat">
                <tpl-item style="display: flex;">
                    <div style="width: 6em; text-align: right; padding-right: 1em;">{{::id}}</div>
                    <div>{{::description}}</div>
                </tpl-item>
                <append>
                    <vn-icon-button
                        icon="add_circle"
                        vn-tooltip="New intrastat"
                        ng-click="$ctrl.showIntrastat($event)">
                    </vn-icon-button>
                </append>
            </vn-autocomplete>
            <vn-autocomplete vn-one
                url="Expenses"
                label="Expense"
                ng-model="$ctrl.item.expenseFk"
                initial-data="$ctrl.item.expense">
            </vn-autocomplete>
            <vn-autocomplete vn-one
                data="originsData"
                label="Origin"
                show-field="name"
                value-field="id"
                ng-model="$ctrl.item.originFk"
                initial-data="$ctrl.item.origin">
            </vn-autocomplete>
            <vn-textfield
                vn-one
                label="Reference"
                ng-model="$ctrl.item.comment"
                rule>
            </vn-textfield>
        </vn-horizontal>
        <vn-horizontal>
            <vn-input-number
                vn-one
                min="0"
                label="Relevancy" 
                ng-model="$ctrl.item.relevancy"
                rule>
            </vn-input-number>
            <vn-input-number
                vn-one
                min="0"
                label="Size"
                ng-model="$ctrl.item.size"
                rule>
            </vn-input-number>
            <vn-input-number
                vn-one
                min="0" 
                label="stems" 
                ng-model="$ctrl.item.stems"
                rule>
            </vn-input-number>
            <vn-input-number
                vn-one
                min="0"
                label="Multiplier" 
                ng-model="$ctrl.item.stemMultiplier">
            </vn-input-number>
        </vn-horizontal>
        <vn-horizontal>
            <vn-input-number
                vn-one
                min="0"
                step="0.01"
                label="Density" 
                ng-model="$ctrl.item.density"
                rule>
            </vn-input-number>
            <vn-autocomplete
                vn-one
                label="Generic"
                url="Items/withName"
                ng-model="$ctrl.item.genericFk"
                show-field="name"
                value-field="id"
                search-function="$ctrl.itemSearchFunc($search)"
                order="id DESC"
                tabindex="1">
                <tpl-item>
                    {{::id}} - {{::name}}
                </tpl-item>
                <append>
                    <vn-icon-button
                        icon="filter_alt"
                        vn-click-stop="$ctrl.showFilterDialog($ctrl.item)"
                        vn-tooltip="Filter...">
                    </vn-icon-button>
                </append>
            </vn-autocomplete>
        </vn-horizontal>
        <vn-horizontal>
            <vn-textarea
                vn-one
                label="Description"
                ng-model="$ctrl.item.description"
                rule>
            </vn-textarea>
        </vn-horizontal>
        <vn-horizontal>
            <vn-check
                vn-one
                label="Active"
                ng-model="$ctrl.item.isActive">
            </vn-check>
            <vn-check
                vn-one
                label="Price in kg"
                ng-model="$ctrl.item.hasKgPrice">
            </vn-check>
            <vn-check
                vn-one
                label="Fragile"
                ng-model="$ctrl.item.isFragile"
                info="Is shown at website, app that this item cannot travel (wreath, palms, ...)">
            </vn-check>
        </vn-horizontal>
    </vn-card>
    <vn-button-bar>
        <vn-submit
            disabled="!watcher.dataChanged()"
            label="Save">
        </vn-submit>
        <vn-button
            class="cancel"
            label="Undo changes"
            disabled="!watcher.dataChanged()"
            ng-click="watcher.loadOriginalData()">
        </vn-button>
    </vn-button-bar>
</form>

<!-- Create custom agent dialog -->
<vn-dialog class="edit" 
    vn-id="intrastat"
    on-accept="$ctrl.onIntrastatAccept()"
    message="New intrastat">
    <tpl-body>
        <vn-horizontal>
            <vn-input-number vn-one vn-focus
                label="Identifier"
                ng-model="$ctrl.newIntrastat.intrastatId"
                required="true">
            </vn-input-number>
        </vn-horizontal>
        <vn-horizontal>
            <vn-textfield vn-one
                label="Description"
                ng-model="$ctrl.newIntrastat.description"
                required="true">
            </vn-textfield>
        </vn-horizontal>
    </tpl-body>
    <tpl-buttons>
        <input type="button" response="cancel" translate-attr="{value: 'Cancel'}"/>
        <button response="accept" translate>Create</button>
    </tpl-buttons>
</vn-dialog>

<!-- Filter item dialog -->
<vn-dialog
    vn-id="filterDialog"
    message="Filter item">
    <tpl-body class="itemFilter">
        <vn-horizontal>
            <vn-textfield
                label="Name" 
                ng-model="$ctrl.itemFilterParams.name"
                vn-focus>
            </vn-textfield>
            <vn-textfield
                label="Size" 
                ng-model="$ctrl.itemFilterParams.size">
            </vn-textfield>
            <vn-autocomplete
                label="Producer"
                ng-model="$ctrl.itemFilterParams.producerFk"
                url="Producers"
                show-field="name"
                value-field="id">
            </vn-autocomplete>
            <vn-autocomplete
                label="Type"
                ng-model="$ctrl.itemFilterParams.typeFk"
                url="ItemTypes"
                show-field="name"
                value-field="id">
            </vn-autocomplete>
            <vn-autocomplete
                label="Color"
                ng-model="$ctrl.itemFilterParams.inkFk"
                url="Inks"
                show-field="name"
                value-field="id">
            </vn-autocomplete>
        </vn-horizontal>
        <vn-horizontal class="vn-mb-md">
            <vn-button vn-none
                label="Search"
                ng-click="$ctrl.filter()">
            </vn-button>
        </vn-horizontal>
        <vn-crud-model
            vn-id="itemsModel" 
            url="Items/withName"
            filter="$ctrl.itemFilter"
            data="items"
            limit="10">
        </vn-crud-model>
        <vn-data-viewer
        model="itemsModel"
        class="vn-w-lg">
            <vn-table class="scrollable">
                <vn-thead>
                    <vn-tr>
                        <vn-th shrink>ID</vn-th>
                        <vn-th expand>Item</vn-th>
                        <vn-th number>Size</vn-th>
                        <vn-th expand>Producer</vn-th>
                        <vn-th>Color</vn-th>
                    </vn-tr>
                </vn-thead>
                <vn-tbody>
                    <a ng-repeat="item in items"
                    class="clickable vn-tr search-result"
                    ng-click="$ctrl.selectItem(item.id)">
                        <vn-td shrink>
                            <span
                                vn-click-stop="itemDescriptor.show($event, item.id)"
                                class="link">
                                {{::item.id}}
                            </span>
                        </vn-td>
                        <vn-td expand>{{::item.name}}</vn-td>
                        <vn-td number>{{::item.size}}</vn-td>
                        <vn-td expand>{{::item.producer.name}}</vn-td>
                        <vn-td>{{::item.ink.name}}</vn-td>
                    </a>
                </vn-tbody>
            </vn-table>
        </vn-data-viewer>
        <vn-item-descriptor-popover
            vn-id="item-descriptor"
            warehouse-fk="$ctrl.vnConfig.warehouseFk">
        </vn-item-descriptor-popover>
    </tpl-body>
</vn-dialog>