salix/modules/item/front/botanical/index.html

<vn-watcher
    vn-id="watcher"
    data="$ctrl.botanical"
    form="form">
</vn-watcher>
<form name="form" ng-submit="$ctrl.onSubmit()" ng-cloak class="vn-w-md">
    <vn-card class="vn-pa-lg">
        <vn-horizontal>
            <vn-autocomplete
                label="Genus"
                ng-model="$ctrl.botanical.genusFk"
                url="Genera"
                show-field="name"
                value-field="id">
                <append>
                    <vn-icon-button
                        icon="add_circle"
                        vn-tooltip="New genus"
                        ng-click="$ctrl.showGenus($event)"
                        vn-acl="logisticBoss">
                    </vn-icon-button>
                </append>
            </vn-autocomplete>
            <vn-autocomplete
                label="Species"
                ng-model="$ctrl.botanical.specieFk"
                url="Species"
                show-field="name"
                value-field="id">
                <tpl-item>
                    <div>{{name}}</div>
                    <div class="text-caption text-secondary">
                        {{genus.name}}
                    </div>
                </tpl-item>
                <append>
                    <vn-icon-button
                        icon="add_circle"
                        vn-tooltip="New species"
                        ng-click="$ctrl.showSpecies($event)"
                        vn-acl="logisticBoss">
                    </vn-icon-button>
                </append>
            </vn-autocomplete>
        </vn-horizontal>
    </vn-card>
    <vn-button-bar>
        <vn-submit
            disabled="!watcher.dataChanged()"
            label="Save">
        </vn-submit>
        <!-- # #2680 Undo changes button bugs -->
        <!-- <vn-button
            class="cancel"
            label="Undo changes"
            disabled="!watcher.dataChanged()"
            ng-click="watcher.loadOriginalData()">
        </vn-button> -->
    </vn-button-bar>
</form>
<!-- Create new genus dialog -->
<vn-dialog class="edit" 
    vn-id="genus"
    on-accept="$ctrl.onGenusAccept()"
    message="New genus">
    <tpl-body>
        <vn-horizontal>
            <vn-textfield vn-one vn-focus
                label="Latin genus name"
                ng-model="$ctrl.data.name"
                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>
<!-- Create new species dialog -->
<vn-dialog class="edit" 
    vn-id="species"
    on-accept="$ctrl.onSpeciesAccept()"
    message="New species">
    <tpl-body>
        <vn-horizontal>
            <vn-textfield vn-one vn-focus
                label="Latin species name"
                ng-model="$ctrl.data.name"
                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>