Add search functionality to product listing and enable custom title editing

templates/products/main_view.php

@@ -25,6 +25,7 @@
         <thead>
           <tr>
             <th scope="col">Id</th>
+            <th scope="col">Id oferty</th>
             <th scope="col">Nazwa produktu</th>
             <th scope="col">Wyśw.</th>
             <th scope="col">Wyśw. (30 dni)</th>
@@ -66,6 +67,7 @@
         serverSide: true,
         columns: [
           { width: '100px', orderable: false },
+          { width: '100px', name: 'offer_id' },
           { width: 'auto', name: 'name' },
           { width: 'auto', name: 'impressions' },
           { width: 'auto', name: 'impressions_30' },
@@ -103,5 +105,102 @@
         }
       });
     });
+
+    $( 'body' ).on( 'click', '.edit-product-title', function(e)
+    {
+      $.confirm({
+        title: 'Edytuj tytuł',
+        content: '' +
+        '<form action="" class="formName">' +
+          '<div class="form-group">' +
+            '<input type="text" value="' + escapeHtml( $( this ).siblings( 'a' ).text().trim() ) + '" product_id="' + $( this ).attr( 'product_id' ) + '" class="name form-control" required />' +
+            '<small>0/150 znaków</small>' +
+          '</div>' +
+        '</form>',
+        columnClass: 'col-md-8 col-md-offset-2 col-12',
+        theme: 'modern',
+        draggable: true,
+        buttons: {
+          formSubmit: {
+            text: 'Zapisz',
+            btnClass: 'btn-blue',
+            action: function () {
+              var jc = this;
+              var product_id = this.$content.find( '.name' ).attr( 'product_id' );
+              var customTitle = this.$content.find('.name').val();
+
+              if ( !customTitle )
+              {
+                $.alert('Pole tytuł nie może być puste!');
+                return false;
+              }
+              else if (customTitle.length > 150)
+              {
+                $.alert('Pole tytuł nie może przekraczać 150 znaków!');
+                this.$content.find('.name').addClass('is-invalid');
+                return false;
+              }
+
+              jc.showLoading(true);
+
+              $.ajax({
+                url: '/products/save_custom_title/',
+                type: 'POST',
+                data: {
+                  product_id: product_id,
+                  custom_title: customTitle
+                },
+                success: function(response) {
+                  data = JSON.parse(response);
+                  jc.hideLoading();
+
+                  if  ( data.status == 'ok' )
+                  {
+                    $.alert( 'Tytuł został pomyślnie zapisany' );
+                    jc.close();
+                  }
+                  else
+                  {
+                    $.alert('Błąd: ' + response);
+                  }
+                },
+                error: function() {
+                  jc.hideLoading();
+                  $.alert('Wystąpił błąd podczas zapisywania tytułu. Spróbuj ponownie.');
+                }
+              });
+            }
+          },
+          cancel: {
+            text: 'Anuluj',
+            btnClass: 'btn-red',
+            action: function () {
+            }
+          },
+        },
+        onContentReady: function () {
+          var jc = this;
+
+          var inputField = this.$content.find('.name');
+          var charCount = this.$content.find('small');
+
+          inputField.on('input', function() {
+              var currentLength = $(this).val().length;
+              charCount.text(currentLength + '/150 znaków');
+
+              if (currentLength > 150) {
+                  $(this).addClass('is-invalid');
+              } else {
+                  $(this).removeClass('is-invalid');
+              }
+          });
+
+          this.$content.find('form').on('submit', function (e) {
+            e.preventDefault();
+            jc.$$formSubmit.trigger('click');
+          });
+        }
+      });
+    });
   });
 </script>