Form model

CHANGELOG.md

@@ -4,6 +4,7 @@ Yii Framework 2 gii extension Change Log
 2.2.4 under development
 -----------------------
 
+- Enh #431: Added form model generator (ahmadasjad)
 - Bug #467: Fix view `generators/crud/default/controller` (WinterSilence, cjrf)
 
 

src/FormModelAsset.php

@@ -0,0 +1,18 @@
+<?php
+
+namespace yii\gii;
+
+
+class FormModelAsset extends \yii\web\AssetBundle
+{
+    public $sourcePath = __DIR__;
+
+    public $js = [
+        'assets/js/add-remove.jquery.js',
+        'assets/js/accordion.js',
+    ];
+
+    public $depends = [
+        'yii\web\JqueryAsset',
+    ];
+}

src/Module.php

@@ -175,6 +175,7 @@ protected function coreGenerators()
             'model' => ['class' => 'yii\gii\generators\model\Generator'],
             'crud' => ['class' => 'yii\gii\generators\crud\Generator'],
             'controller' => ['class' => 'yii\gii\generators\controller\Generator'],
+            'formModel' => ['class' => 'yii\gii\generators\formModel\Generator'],
             'form' => ['class' => 'yii\gii\generators\form\Generator'],
             'module' => ['class' => 'yii\gii\generators\module\Generator'],
             'extension' => ['class' => 'yii\gii\generators\extension\Generator'],

src/assets/js/accordion.js

@@ -0,0 +1,17 @@
+(function ($) {
+    $(document).on('click', '[data-toggle="collapse-custom"]', function () {
+        var val = $(this).attr('data-target');
+        if ($(val).hasClass('displayed')) {
+            $(val).removeClass('displayed');
+        } else {
+            $('.card').removeClass('displayed');
+            $(val).addClass('displayed');
+        }
+    });
+
+    $(document).on("change", "input[data-update]", function () {
+        var destination = $(this).attr("data-update");
+        $(destination).html($(this).val());
+    });
+})(jQuery);
+

src/assets/js/add-remove.jquery.js

@@ -0,0 +1,124 @@
+(function ($) {
+
+    /**
+     * ReIndexes attributes such as id, name, etc.
+     * It indexes all element from 0 to total_elements-1
+     * For example, if we are cloning some element and it has an id value `example1`, then the element after this will have id `example2`
+     * @param rows_selector
+     */
+    var reIndexAttributes = function (rows_selector) {
+        var props = $(rows_selector);
+        var regex = /^(.+?)(\d+)$/i;
+        var name_regex = /^(.+?)(\d+)([\[\]]+)$/i;
+        var cur_index = 0;
+        props.each(function () {
+
+            var id = this.id || "";
+            var match = id.match(regex) || [];
+            if (match.length === 3) {
+                this.id = match[1] + (cur_index);
+            }
+
+            $(this).find("*")
+                .each(function () {
+                    var id = this.id || "";
+                    var match = id.match(regex) || [];
+                    if (match.length === 3) {
+                        this.id = match[1] + cur_index;
+                    }
+
+                    var target = $(this).attr('data-target') || "";
+                    match = target.match(regex) || [];
+                    if (match.length === 3) {
+                        $(this).attr('data-target', match[1] + cur_index);
+                    }
+
+                    target = $(this).attr('aria-labelledby') || "";
+                    match = target.match(regex) || [];
+                    if (match.length === 3) {
+                        $(this).attr('aria-labelledby', match[1] + cur_index);
+                    }
+
+                    target = $(this).attr('data-update') || "";
+                    match = target.match(regex) || [];
+                    if (match.length === 3) {
+                        $(this).attr('data-update', match[1] + cur_index);
+                    }
+
+                    target = $(this).attr('name') || "";
+                    match = target.match(name_regex) || [];
+                    if (match.length === 4) {
+                        $(this).attr('name', (match[1] + cur_index + match[3]));
+                    }
+
+                    target = $(this).attr('data-index') || "";
+                    if (target !== '') {
+                        $(this).attr('data-index', cur_index);
+                        if ($(this)[0].nodeName === 'SPAN') {
+                            $(this).html(cur_index);
+                        }
+                    }
+                });
+            cur_index++;
+            $('input[data-update]').trigger('change');
+        });
+    }
+
+    /**
+     * Removes values from all type of input element
+     * @param element
+     * @returns {*}
+     */
+    var truncateValues = function (element) {
+        $(element).find('input:text, input:password, input:file, select, textarea')
+            .each(function () {
+                $(this).val('');
+            });
+
+        $(element).find('input:radio, input:checkbox').each(function () {
+            console.log(this);
+            $(this).removeAttr('checked');
+            $(this).prop('checked', false);
+            $(this).removeAttr('selected');
+        });
+
+        return element;
+    }
+
+
+    /**
+     * Give an attribute to anchor tag 'data-js-add' and the value of that attribute
+     * to be his    parent selector which is to be copied and to be added after it.
+     * For example if you provide <a  data-js-add=".js-field_row">text</a>
+     * On click of this element will copy its parent element having class js-field_row
+     * and append after it.
+     */
+    $(document).on('click', 'a[data-js-add]', function () {
+        var element_to_clone_selector = $(this).attr('data-js-add');
+        var element_to_clone = $(this).parents(element_to_clone_selector);
+        var duplicate_element = element_to_clone.clone();
+        duplicate_element = truncateValues(duplicate_element);
+        element_to_clone.after(duplicate_element);
+        reIndexAttributes('.js-field_row');
+    });
+
+    /**
+     * Give an attribute to anchor tag 'data-js-remove' and the value of that attribute
+     * to be his    parent selector which is to be deleted.
+     * For example if you provide <a  data-js-remove=".js-field_row">text</a>
+     * On click of this element will remove its parent element having class js-field_row
+     */
+    $(document).on('click', 'a[data-js-remove]', function () {
+        var removable_element_selector = $(this).attr('data-js-remove');
+        var removable_element = $(this).parents(removable_element_selector);
+        //count all siblings, if its more than 1, delete the selected element.
+        var total_row = removable_element.siblings(removable_element_selector).length;
+        if (total_row > 0) {
+            removable_element.remove();
+            reIndexAttributes();
+        } else {
+            alert('There should be at least one row');
+        }
+    });
+
+})(jQuery);