WebSVN – LeadersLinked - Backend – Diff – /module/LeadersLinked/view/leaders-linked/performance-evaluation-forms/index.phtml

     /**
      * Clicked add new section
      */
     $('#btn-add-section').click(function(e) {
-        $('#form-section #section-id').val('');
+        $('#form-section #id_section').val('');
-        $('#form-section #section-name').val('');
+        $('#form-section #name-section').val('');
-        $('#form-section #section-name').val('');
-        CKEDITOR.instances['section-text'].setData('');
+        $('#form-section #text-section').val('');
-        $('#form-section #section-type').val($('#form-section #section-type option:first').val());
+        $('#form-section #type-section').val($('#form-section #type-section option:first').val());
         $('#modal-section h4[class="modal-title"]').html('LABEL_ADD LABEL_SECTION');
         $('#modal-section').modal('show');
     });
     /**
     /**
      * Clicked save section
      */
     $('#btn-save-section').click(function(e) {
-        if($('#section-name').val()==''){
+        if($('#name-section').val()==''){
             $.fn.showError('Ingrese un nombre');
             return;
         }else{
-            if($('#section-id').val()==""){
+            if($('#id_section').val()==""){
                 addSection(
-                    $('#section-name').val(),
+                    $('#name-section').val(),
-                    $('#section-text').val(),
+                    $('#text-section').val(),
-                    $('#section-type').val(),
+                    $('#type-section').val(),
                     )
             }else{
                 editSection(
-                    $('#section-id').val(),
+                    $('#id_section').val(),
-                    $('#section-name').val(),
+                    $('#name-section').val(),
-                    $('#section-text').val(),
+                    $('#text-section').val(),
-                    $('#section-type').val()
+                    $('#type-section').val()
+                )
     /**
      * Render Sections data
      */
     const renderData= (data) => {
         console.log(data);
+        $("#rows").html($("#sectionTemplate").render(data);
+    }
     /**
      * Add Section to array
      */
     const addSection = (title, type, text) => {
         sections.push({
-            'id': new Date().getTime(),
+            'id_section': new Date().getTime(),
             'title': title,
             'type': type,
             'text': text,
             'options': []
     /**
      * Edit item behavior
      */
     const editSection = (id, title, type, text) => {
         sections.map((item) => {
-            if (item.id == id) {
+            if (item.id_section == id) {
                 item.title = title;
                 item.type = type;
                 item.text = text;
+            }
         });
+    }
     /**
      * Remove behavior
      */
     const removeSection = (id) => {
-        sections = sections.filter((item) => item.id != id);
+        sections = sections.filter((item) => item.id_section != id);
         renderData(sections);
+    }
+     /**
+     * Add Option to array
+     */
+    const addOption = (section, title) => {
+        sections.map((item) => {
+            if (item.id_option == section) {
+                item.options.push({
+                    'id_option': new Date().getTime(),
+                    'title': title,
+                });
+            }
+        });
+        renderData(sections);
+    }
+    /**
+    * Edit item Option
+    */
+    const editOption = (section, id, tilte) => {
+        sections.map((item) => {
+            if (item.id_section == section) {
+                item.options.map((opt)=>{
+                    if(opt.id_option == id){
+                        opt.title = title
+                    }
+                });
+            }
+        });
+        renderData(sections);
+    }
+    /**
+     * Remove Option
+     */
+    const removeOption = (section, id) => {
+        sections.map((item) => {
+            if (item.id_section == section) {
+                item.options = item.options.filter((opt) => opt.id_option != id) || []
+            }
+        });
         renderData(sections);
+    }
     /**
      * Clicked refresh button
      <!-- section Modal -->
     <div  id="modal-section" class="modal" tabindex="-1" role="dialog">
         <div class="modal-dialog modal-lg" role="document">
             <form action="#" name="form-section" id="form-section">
-                <input type="hidden" name="section-id" id="section-id" />
+                <input type="hidden" name="id_section" id="id_section" />
                 <div class="modal-content">
                     <div class="modal-header">
                         <h4 class="modal-title">LABEL_ADD LABEL_SECTION</h4>
                         <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                             <span aria-hidden="true">&times;</span>
                         </button>
                     </div>
                     <div class="modal-body">
                     <div class="form-group">
-                            <label for="section-name">LABEL_FIRST_NAME</label>
+                            <label for="name-section">LABEL_FIRST_NAME</label>
-                            <input type="text" name="section-name" id="section-name" class="form-control" maxlength="50" value="" />
+                            <input type="text" name="name-section" id="name-section" class="form-control" maxlength="50" value="" />
                         </div>
                         <div class="form-group">
-                            <label for="section-text">LABEL_TEXT</label>
-                            <!--  ckeditor -->
+                            <label for="text-section">LABEL_TEXT</label>
-                            <textarea  name="section-text" id="section-text" rows="5" class="ckeditor form-control"></textarea>
+                            <textarea  name="text-section" id="text-section" rows="5" class="form-control"></textarea>
                         </div>
                         <div class="form-group">
-                            <label for="section-type">LABEL_TYPE</label>
+                            <label for="type-section">LABEL_TYPE</label>
-                            <select name="section-type" id="section-type" class="form-control">
+                            <select name="type-section" id="type-section" class="form-control">
                                 <option value="simple">Simple</option>
                                 <option value="multiple">Multiple</option>
                             </select>
                         </div>
         </div>
     </div>
+    <!-- End Modal Options -->
+    <!---Template Sections --->
+    <script id="sectionTemplate" type="text/x-jsrender">
+    <div class="panel panel-default" id="panel-{{:id_section}}">
+        <div class="panel-heading">
+            <h4 class="panel-title">
+                <a class="accordion-toggle" data-toggle="collapse" aria-expanded="true" data-parent="#panel-{{:id_section}}" href="#collapse-{{:id_section}}">
+                    <span class="section-name{{:id_section}}">
+                        {{:name}}
+                    </span>
+                </a>
+            </h4>
+        </div>
+        <div id="collapse-{{:id_section}}" class="panel-collapse in collapse show">
+            <div class="panel-body">
+                <div class="table-responsive">
+                    <table class="table table-bordered">
+                        <thead>
+                            <tr>
+                                <th style="width: 10%;">LABEL_ELEMENT</th>
+                                <th style="width: 50%;">LABEL_TEXT</th>
+                                <th style="width: 10%;">LABEL_VALUE</th>
+                                <th style="width: 10%;">LABEL_TYPE</th>
+                                <th style="width: 20%;">LABEL_ACTIONS</th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            <tr class="tr-section">
+                                <td class="text-left">LABEL_SECTION</td>
+                                <td class="text-left">{{:title}}</td>
+                                <td>{{:value}}</td>
+                                <td>
+                                    {{if type == 'simple'}} Simple {{/if}}
+                                    {{if type == 'multiple'}} Multiple {{/if}}
+                                </td>
+                                <td>
+                                    <button type="button" class="btn btn-default btn-edit-section" data-section="{{:id_section}}" data-toggle="tooltip"  data-original-title="LABEL_EDIT LABEL_SECTION"><i class="fa fa-edit" aria-hidden="true"></i> LABEL_EDIT LABEL_SECTION </button>
+                                    <button  type="button"class="btn btn-default btn-delete-section" data-section="{{:id_section}}" data-toggle="tooltip"  data-original-title="LABEL_DELETE LABEL_SECTION"><i class="fa fa-ban" aria-hidden="true"></i> LABEL_DELETE LABEL_SECTION </button>
+                                     {{if type == 'multiple'}}
+                                    <button type="button" class="btn btn-default btn-add-option" data-section="{{:id_section}}" data-toggle="tooltip"  data-original-title="LABEL_ADD  LABEL_OPTION"><i class="fa fa-plus" aria-hidden="true"></i> LABEL_ADD  LABEL_OPTION </button>
+                                    {{/if}}
+                                </td>
+                            </tr>
+                            {{for options}}
+                            <tr >
+                                <td class="text-left">--LABEL_OPTION</td>
+                                <td class="text-left">
+                                    {{:text}}
+                                </td>
+                                <td></td>
+                                <td></td>
+                                <td>
+                                    <button type="button" class="btn btn-default btn-edit-option" data-section="{{:id_section}}" data-option="{{:id_option}}" data-toggle="tooltip"  data-original-title="LABEL_EDIT LABEL_OPTION"><i class="fa fa-edit" aria-hidden="true"></i> LABEL_EDIT LABEL_OPTION</button>
+                                    <button type="button" class="btn btn-default btn-delete-option" data-section="{{:id_section}}" data-option="{{:id_option}}" data-toggle="tooltip"  data-original-title="LABEL_DELETE LABEL_OPTION"><i class="fa fa-ban" aria-hidden="true"></i> LABEL_DELETE LABEL_OPTION</button>
+                                </td>
+                            </tr>
+                            {{/for}}
+                        </tbody>
+                    </table>
+                </div>
+            </div>
+        </div>
+    </div>
-    <!-- End Modal Options -->
+    </script>
 <!-- End Template Sections-->

Proyectos de Subversion LeadersLinked - Backend

(root)/module/LeadersLinked/view/leaders-linked/performance-evaluation-forms/index.phtml – Rev 1011 → 1012