fernandezekiel / yii2-dynamic-tabular-form-app

This is a small demonstration on how to implement dynamic tabular forms in Yii2. This is a very minimalistic example and doesn't really use any extensions on dynamically adding rows
Other
13 stars 8 forks source link

new form design snippet #3

Open unpaco opened 9 years ago

unpaco commented 9 years ago

I would like to contribute with a little something... a new form design for the fields and buttons. Pretty much no functionality was changed, just the layout of buttons with their fields, based on this project: https://github.com/wbraganca/yii2-dynamicform, hope he doesn't get mad about it... Since I'm too lazy to re-learn how github's pull request works at the moment, I'll post the new view snippet here if you don't mind...

<div class="receipt-form">

    <?php $form = ActiveForm::begin([
        'enableClientValidation' => false
    ]); ?>

    <?= $form->field($model, 'title')->textInput(['maxlength' => 255]) ?>
    <div class="panel panel-default">
        <div class="panel-heading">
            <div class="row">
                <div class="col-xs-1">
                    <div class="pull-left">
                        <?= Html::submitButton('<span class="glyphicon glyphicon-plus"></span>', [
                            'name' => 'addRow',
                            'value' => 'true',
                            'class' => 'btn btn-success btn-xs'
                        ]) ?>
                    </div>
                </div>
                <div class="col-xs-11">
                    <h4 class="panel-title pull-left">Details</h4>
                </div>
            </div>
            <div class="clearfix"></div>
        </div>
        <div class="panel-body">

            <?php foreach ($modelDetails as $i => $modelDetail) : ?>
                <div class="receipt-detail receipt-detail-<?= $i ?> panel panel-default">
                    <div class="panel-heading">
                        <h3 class="panel-title pull-left">Product/service</h3>

                        <div class="pull-right">
                            <?= Html::submitButton('<span class="glyphicon glyphicon-plus"></span>', ['name' => 'addRow', 'value' => 'true', 'class' => 'btn btn-success btn-xs']) ?>
                            <?= Html::button('<span class="glyphicon glyphicon-minus"></span>', ['class' => 'delete-button btn btn-danger btn-xs', 'data-target' => "receipt-detail-$i"]) ?>
                        </div>
                        <div class="clearfix"></div>
                    </div>
                    <div class="panel-body">
                        <div class="row">
                            <div class="col-sm-4">
                                <?= Html::activeHiddenInput($modelDetail, "[$i]id") ?>
                                <?= Html::activeHiddenInput($modelDetail, "[$i]updateType", ['class' => 'update-type']) ?>
                                <?= $form->field($modelDetail, "[$i]item_name") ?>
                            </div>
                        </div>
                    </div>
                </div>
            <?php endforeach; ?>

            <div class="form-group">
                <?= Html::submitButton($model->isNewRecord ? 'Create' : 'Update', ['class' => $model->isNewRecord ? 'btn btn-success' : 'btn btn-primary']) ?>
            </div>
        </div>
    </div>

    <?php ActiveForm::end(); ?>

</div>
fernandezekiel commented 9 years ago

well i like to keep it simple though, i don't think the appearance of it adds much for us, i wrote this just to show how to get it done