PMHx - Support for per-item comments

public/css/yemi.css

@@ -7,14 +7,14 @@
 [moe][relative] {
     position: relative;
 }
-[moe] form:not([show]) {
+[moe] [url]:not([show]) {
     z-index: 99999;
     position: absolute;
     background-color: white;
     padding: 10px;
     border: 1px solid gray;
 }
-[moe] form[right] {
+[moe] [url][right] {
     right: 0;
 }
 #moe-form-mask {

public/js/mc.js

@@ -144,7 +144,7 @@ function onFastLoaded(_data, _href, _history) {
     var content = $(_data).find('.stag-content');
     if (content && content.length) {
         content = content.html();
-        content += '<script src="/js/yemi.js?_=5"></script>';
+        content += '<script src="/js/yemi.js?_=6"></script>';
         targetParent.html(content);
         window.setTimeout(function() {
             initCreateNote();

public/js/yemi.js

@@ -299,7 +299,7 @@ var initMoes = function() {
                             hideMoeFormMask();
                             $(realForm).toggle(100);
                         }else{
-                            $(realForm)[0].reset();
+                            if($(realForm).is('form')) $(realForm)[0].reset();
                             showMoeFormMask();
                             setTimeout(function() {
                                 $('[moe]>form:visible').hide();
@@ -425,7 +425,7 @@ jQuery(document).ready(function () {
         if($(e.target).closest('[moe]').length || $(e.target).closest('#create-shortcut-form').length || $(e.target).is('#create-shortcut-form')){
             return;
         }
-        $('[moe] form:not([show])').hide();
+        $('[moe] [url]:not([show])').hide();
         hideMoeFormMask();
     });
 

resources/views/layouts/template.blade.php

@@ -32,7 +32,7 @@
     <script src="{{ asset('js/app.js') }}" type="application/javascript"></script>
     <script src="/js/jquery-3.5.1.min.js"></script>
     <script src="{{ asset('js/toastr.min.js') }}" type="application/javascript"></script>
-    <script src="/js/yemi.js?_=5" type="application/javascript"></script>
+    <script src="/js/yemi.js?_=6" type="application/javascript"></script>
 
     {{-- med ac --}}
     <link href='/css/autocomplete-lhc.min.css' rel="stylesheet">

storage/sections/pmhx/form.blade.php

@@ -126,11 +126,32 @@ $formID = rand(0, 100000);
                             <?php
                                 $fName = $head . '_' . sanitize_field_name($values[$k]);
                             ?>
-                             <label class="d-flex align-items-center mb-1">
-                                 <input type="checkbox" name="{{ $fName }}" {{ $contentData[$fName] ? 'checked' : '' }} class="m-0">
-                                 <span class="ml-2">{{ $values[$k] }}</span>
-                             </label>
-                        @endfor
+                            <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>
+                                </div>
+                            </label>
+                            @endfor
                     </div>
                 @endfor
             </div>
@@ -158,8 +179,29 @@ $formID = rand(0, 100000);
                             $fName = $head . '_' . sanitize_field_name($values[$k]);
                             ?>
                             <label class="d-flex align-items-center mb-1">
-                                <input type="checkbox" name="{{ $fName }}" {{ $contentData[$fName] ? 'checked' : '' }} class="m-0">
-                                <span class="ml-2">{{ $values[$k] }}</span>
+                                <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>
+                                </div>
                             </label>
                         @endfor
                     </div>
@@ -194,4 +236,22 @@ $formID = rand(0, 100000);
         $(_trigger).closest('.note-section').toggleClass('edit');
         return false;
     }
+    function onCommentChange_{{ $formID }}(_trigger) {
+        _trigger = $(_trigger);
+        var empty = $.trim(_trigger.val()) === '';
+        if(empty) {
+            _trigger.closest('[moe]').find('i').first().removeClass('fas').addClass('far');
+        }
+        else {
+            _trigger.closest('[moe]').find('i').first().removeClass('far').addClass('fas');
+        }
+    }
+    function onItemSelected_{{ $formID }}(_trigger) {
+        if(_trigger.checked) {
+            $(_trigger).siblings('[moe]').find('i').first().removeClass('d-none');
+        }
+        else {
+            $(_trigger).siblings('[moe]').find('i').first().addClass('d-none');
+        }
+    }
 </script>

storage/sections/pmhx/processor.php

@@ -55,6 +55,7 @@ for ($i = 0; $i < count($fields); $i++) {
         for($k = 0; $k < count($values); $k++) {
             $fName = $head . '_' . sanitize_field_name($values[$k]);
             $newContentData[$fName] = $request->get($fName);
+            $newContentData[$fName . '__comments'] = @$request->get($fName . '__comments');
         }
     }
 }
@@ -68,6 +69,7 @@ for ($i = 0; $i < count($customFields); $i++) {
         for($k = 0; $k < count($values); $k++) {
             $fName = $head . '_' . sanitize_field_name($values[$k]);
             $newContentData[$fName] = $request->get($fName);
+            $newContentData[$fName . '__comments'] = @$request->get($fName . '__comments');
         }
     }
 }

storage/sections/pmhx/summary.php

@@ -68,6 +68,9 @@ for ($i = 0; $i < count($fields); $i++) {
                     <?= ucwords($head) ?>
                     <i class="fa fa-arrow-right text-sm text-secondary"></i>
                     <span class="font-weight-bold"><?= $values[$k] ?></span>
+                    <?php if(@$newContentData[$fName . '__comments']): ?>
+                        <span class="text-sm ml-1 text-secondary">(<?= $newContentData[$fName . '__comments'] ?>)</span>
+                    <?php endif; ?>
                 </div>
             <?php }
         }
@@ -87,6 +90,9 @@ for ($i = 0; $i < count($customFields); $i++) {
                     <?= ucwords($head) ?>
                     <i class="fa fa-arrow-right text-sm text-secondary"></i>
                     <span class="font-weight-bold"><?= $values[$k] ?></span>
+                    <?php if(@$newContentData[$fName . '__comments']): ?>
+                        <span class="text-sm ml-1 text-secondary">(<?= $newContentData[$fName . '__comments'] ?>)</span>
+                    <?php endif; ?>
                 </div>
             <?php }
         }