ソースを参照

PMHX custom items big UX improvement

Vijayakrishnan Krishnan 4 年 前
コミット
d81eb99d85
1 ファイル変更105 行追加74 行削除
  1. 105 74
      storage/sections/pmhx/form.blade.php

+ 105 - 74
storage/sections/pmhx/form.blade.php

@@ -127,7 +127,7 @@ $formID = rand(0, 100000);
         </div>
     </div>
 
-    <div class="row">
+    <div class="row mb-3">
         @for ($i = 0; $i < count($fields); $i++)
             <div class="col-md-3">
                 @for($j = 0; $j < count($fields[$i]); $j++)
@@ -137,41 +137,39 @@ $formID = rand(0, 100000);
                         if(!empty($parts[0])) $head = $parts[0];
                         $values = explode("|", $parts[1]);
                     ?>
-                    <div class="mb-3">
-                        @if($head !== 'custom')
-                            <div class="font-weight-bold mb-2">{{ $head }}</div>
-                        @endif
-                        @for($k = 0; $k < count($values); $k++)
-                            <?php
-                                $fName = $head . '_' . sanitize_field_name($values[$k]);
-                            ?>
-                            <label class="d-flex align-items-center mb-1">
-                                <input type="checkbox" name="{{ $fName }}" class="m-0"
-                                       onchange="onItemSelected_{{ $formID }}(this)"
-                                       {{ $contentData[$fName] ? 'checked' : '' }}>
-                                <span class="mx-2">{{ $values[$k] }}</span>
-                                <div moe>
-                                    <a href="#" start show>
-                                        <i class="<?= trim(@$contentData[$fName . '__comments']) === '' ? 'far' : 'fas' ?> <?= $contentData[$fName] ? '' : 'd-none' ?> fa-comment"></i>
-                                    </a>
-                                    <div url="/nop">
-                                        <div class="mb-2">
-                                            <textarea name="{{ $fName }}__comments"
-                                                      onchange="onCommentChange_{{ $formID }}(this)"
-                                                      onkeyup="onCommentChange_{{ $formID }}(this)"
-                                                      onpaste="onCommentChange_{{ $formID }}(this)"
-                                                      class="form-control form-control-sm ns-custom-comment"
-                                            >{{ @$contentData[$fName . '__comments'] }}</textarea>
-                                        </div>
-                                        <div class="">
-                                            <button type="button" class="btn btn-sm btn-primary" cancel>Close
-                                            </button>
-                                        </div>
+                    @if($head !== 'custom')
+                        <div class="font-weight-bold mb-2">{{ $head }}</div>
+                    @endif
+                    @for($k = 0; $k < count($values); $k++)
+                        <?php
+                            $fName = $head . '_' . sanitize_field_name($values[$k]);
+                        ?>
+                        <label class="d-flex align-items-center mb-1">
+                            <input type="checkbox" name="{{ $fName }}" class="m-0"
+                                   onchange="onItemSelected_{{ $formID }}(this)"
+                                   {{ $contentData[$fName] ? 'checked' : '' }}>
+                            <span class="mx-2">{{ $values[$k] }}</span>
+                            <div moe>
+                                <a href="#" start show>
+                                    <i class="<?= trim(@$contentData[$fName . '__comments']) === '' ? 'far' : 'fas' ?> <?= $contentData[$fName] ? '' : 'd-none' ?> fa-comment"></i>
+                                </a>
+                                <div url="/nop">
+                                    <div class="mb-2">
+                                        <textarea name="{{ $fName }}__comments"
+                                                  onchange="onCommentChange_{{ $formID }}(this)"
+                                                  onkeyup="onCommentChange_{{ $formID }}(this)"
+                                                  onpaste="onCommentChange_{{ $formID }}(this)"
+                                                  class="form-control form-control-sm ns-custom-comment"
+                                        >{{ @$contentData[$fName . '__comments'] }}</textarea>
+                                    </div>
+                                    <div class="">
+                                        <button type="button" class="btn btn-sm btn-primary" cancel>Close
+                                        </button>
                                     </div>
                                 </div>
-                            </label>
-                            @endfor
-                    </div>
+                            </div>
+                        </label>
+                    @endfor
                 @endfor
             </div>
         @endfor
@@ -184,7 +182,7 @@ $formID = rand(0, 100000);
                 <span class="mx-2 text-secondary">|</span>
                 <div moe>
                     <a href="#" start show>Add</a>
-                    <div url="/api/sectionTemplateCustomItem/create">
+                    <div custom-item-form url="/api/sectionTemplateCustomItem/create">
                         <div class="mb-2">
                             <input type="text" placeholder="Label" class="form-control form-control-sm label_new_custom_item">
                         </div>
@@ -199,10 +197,9 @@ $formID = rand(0, 100000);
             </div>
 
             @if($customFields && count($customFields))
-
-                <div class="row">
+                <div class="row mb-3">
                     @for ($i = 0; $i < count($customFields); $i++)
-                        <div class="col-md-3">
+                        <div class="col-md-3 custom-field-column" data-column="{{ $i + 1 }}">
                             @for($j = 0; $j < count($customFields[$i]); $j++)
                                 <?php
                                 $parts = explode(":::", $customFields[$i][$j]);
@@ -210,46 +207,47 @@ $formID = rand(0, 100000);
                                 if(!empty($parts[0])) $head = $parts[0];
                                 $values = explode("|", $parts[1]);
                                 ?>
-                                <div class="mb-3">
-                                    @if($head !== 'custom')
-                                        <div class="font-weight-bold mb-2">{{ $head }}</div>
-                                    @endif
-                                    @for($k = 0; $k < count($values); $k++)
-                                        <?php
-                                        $fName = $head . '_' . sanitize_field_name($values[$k]);
-                                        ?>
-                                        <label class="d-flex align-items-center mb-1">
-                                            <input type="checkbox" name="{{ $fName }}" class="m-0"
-                                                   onchange="onItemSelected_{{ $formID }}(this)"
-                                                {{ $contentData[$fName] ? 'checked' : '' }}>
-                                            <span class="mx-2">{{ $values[$k] }}</span>
-                                            <div moe>
-                                                <a href="#" start show>
-                                                    <i class="<?= trim(@$contentData[$fName . '__comments']) === '' ? 'far' : 'fas' ?> <?= $contentData[$fName] ? '' : 'd-none' ?> fa-comment"></i>
-                                                </a>
-                                                <div url="/nop">
-                                                    <div class="mb-2">
-                                            <textarea name="{{ $fName }}__comments"
-                                                      onchange="onCommentChange_{{ $formID }}(this)"
-                                                      onkeyup="onCommentChange_{{ $formID }}(this)"
-                                                      onpaste="onCommentChange_{{ $formID }}(this)"
-                                                      class="form-control form-control-sm ns-custom-comment"
-                                            >{{ @$contentData[$fName . '__comments'] }}</textarea>
-                                                    </div>
-                                                    <div class="">
-                                                        <button type="button" class="btn btn-sm btn-primary" cancel>Close
-                                                        </button>
-                                                    </div>
+                                @if($head !== 'custom')
+                                    <div class="font-weight-bold mb-2">{{ $head }}</div>
+                                @endif
+                                @for($k = 0; $k < count($values); $k++)
+                                    <?php
+                                    $fName = $head . '_' . sanitize_field_name($values[$k]);
+                                    ?>
+                                    <label class="d-flex align-items-center mb-1">
+                                        <input type="checkbox" name="{{ $fName }}" class="m-0"
+                                               onchange="onItemSelected_{{ $formID }}(this)"
+                                            {{ $contentData[$fName] ? 'checked' : '' }}>
+                                        <span class="mx-2">{{ $values[$k] }}</span>
+                                        <div moe>
+                                            <a href="#" start show>
+                                                <i class="<?= trim(@$contentData[$fName . '__comments']) === '' ? 'far' : 'fas' ?> <?= $contentData[$fName] ? '' : 'd-none' ?> fa-comment"></i>
+                                            </a>
+                                            <div url="/nop">
+                                                <div class="mb-2">
+                                        <textarea name="{{ $fName }}__comments"
+                                                  onchange="onCommentChange_{{ $formID }}(this)"
+                                                  onkeyup="onCommentChange_{{ $formID }}(this)"
+                                                  onpaste="onCommentChange_{{ $formID }}(this)"
+                                                  class="form-control form-control-sm ns-custom-comment"
+                                        >{{ @$contentData[$fName . '__comments'] }}</textarea>
+                                                </div>
+                                                <div class="">
+                                                    <button type="button" class="btn btn-sm btn-primary" cancel>Close
+                                                    </button>
                                                 </div>
                                             </div>
-                                        </label>
-                                    @endfor
-                                </div>
+                                        </div>
+                                    </label>
+                                @endfor
                             @endfor
                         </div>
                     @endfor
                 </div>
-
+            @else
+                <div class="row mb-3">
+                    <div class="col-md-3 custom-field-column" data-column="1"></div>
+                </div>
             @endif
         </div>
     </div>
@@ -307,8 +305,16 @@ $formID = rand(0, 100000);
             sectionTemplateUid: '{{ $section->sectionTemplate->uid }}',
             label: label
         }, function(_data) {
-            fastReload();
-        });
+            hideMask();
+            if(_data && _data.success) {
+                appendCustomItem(label);
+                hideMoeFormMask();
+                $('[custom-item-form]').hide();
+            }
+            else {
+                toastr.error(_data.message);
+            }
+        }, 'json');
         return false;
     }
     function cancelCustomItem_{{ $formID }}(_moe) {
@@ -316,4 +322,29 @@ $formID = rand(0, 100000);
         $('div[moe]').hide();
         return false;
     }
+    function appendCustomItem(_name) {
+        let sanitized = 'custom_' + _name.toLowerCase().replace(/[^0-9a-z]/ig, '_');
+        let html = '<label class="d-flex align-items-center mb-1">' +
+            '<input type="checkbox" name="' + sanitized + '" class="m-0" onchange="onItemSelected_{{ $formID }}(this)">' +
+                '<span class="mx-2">' + _name + '</span>' +
+                '<div moe>' +
+                    '<a href="#" start show><i class="far d-none fa-comment"></i></a>' +
+                    '<div url="/nop">' +
+                        '<div class="mb-2">' +
+                            '<textarea name="' + _name + '__comments" onchange="onCommentChange_{{ $formID }}(this)" onkeyup="onCommentChange_{{ $formID }}(this)" onpaste="onCommentChange_{{ $formID }}(this)" class="form-control form-control-sm ns-custom-comment"></textarea>' +
+                        '</div>' +
+                        '<div class=""><button type="button" class="btn btn-sm btn-primary" cancel>Close</button></div>' +
+                    '</div>' +
+                '</div>' +
+            '</label>';
+        let targetColumn = $('.custom-field-column').first(), numItems = -1;
+        $('.custom-field-column').each(function() {
+            if(numItems === -1 || numItems > $(this).find('>label').length) {
+                numItems = $(this).find('>label').length;
+                targetColumn = $(this);
+            }
+        });
+        targetColumn.append(html);
+        initMoes();
+    }
 </script>