feat: allow sorting payment methods (#217)

feat: don't allow to change currency code if in use

endpoints/payments/sort.php

@@ -0,0 +1,34 @@
+<?php
+
+require_once '../../includes/connect_endpoint.php';
+
+session_start();
+
+if (isset($_SESSION['loggedin']) && $_SESSION['loggedin'] === true) {
+    $paymentMethods = $_POST['paymentMethodIds'];
+    $order = 1;
+
+    foreach ($paymentMethods as $paymentMethodId) {
+        $sql = "UPDATE payment_methods SET `order` = :order WHERE id = :paymentMethodId";
+        $stmt = $db->prepare($sql);
+        $stmt->bindParam(':order', $order, SQLITE3_INTEGER);
+        $stmt->bindParam(':paymentMethodId', $paymentMethodId, SQLITE3_INTEGER);
+        $result = $stmt->execute();
+        $order++;
+    }
+
+    $response = [
+        "success" => true,
+        "message" => translate("sort_order_saved", $i18n)
+    ];
+    echo json_encode($response);    
+} else {
+    $response = [
+        "success" => false,
+        "errorMessage" => translate("session_expired", $i18n)
+    ];
+    echo json_encode($response);
+    die();
+}
+
+?>

includes/version.php

@@ -1,3 +1,3 @@
 <?php
-    $version = "v1.15.3";
+    $version = "v1.16.0";
 ?>

migrations/000011.php

@@ -0,0 +1,14 @@
+<?php
+    // This migration adds a "order" column to the payment_methods table so that they can be sorted and initializes all values to their id.
+
+    /** @noinspection PhpUndefinedVariableInspection */
+    $columnQuery = $db->query("SELECT * FROM pragma_table_info('payment_methods') WHERE name='order'");
+    $columnRequired = $columnQuery->fetchArray(SQLITE3_ASSOC) === false;
+
+    if ($columnRequired) {
+        $db->exec('ALTER TABLE payment_methods ADD COLUMN `order` INTEGER DEFAULT 0');
+        $db->exec('UPDATE payment_methods SET `order` = id');
+    }
+
+
+?>

scripts/settings.js

@@ -460,7 +460,7 @@ document.body.addEventListener('click', function(e) {
     if (targetElement.classList && targetElement.classList.contains('payments-payment')) {
       let targetChild = e.target;
       do {
-        if (targetChild.classList && targetChild.classList.contains('payment-name')) {
+        if (targetChild.classList && (targetChild.classList.contains('payment-name') || targetChild.classList.contains('drag-icon') )) {
           return;
         }
         targetChild = targetChild.parentNode;
@@ -680,6 +680,44 @@ function deletePaymentMethod(paymentId) {
     });
 }
 
+function savePaymentMethodsSorting() {
+  console.log("should save");
+  const paymentMethods = document.getElementById('payments-list');
+  const paymentMethodIds = Array.from(paymentMethods.children).map(paymentMethod => paymentMethod.dataset.paymentid);
+
+  const formData = new FormData();
+  paymentMethodIds.forEach(paymentMethodId => {
+      formData.append('paymentMethodIds[]', paymentMethodId);
+  });
+
+  fetch('endpoints/payments/sort.php', {
+    method: 'POST',
+    body: formData
+  })
+  .then(response => response.json())
+  .then(data => {
+      if (data.success) {
+          showSuccessMessage(data.message);
+      } else {
+          showErrorMessage(data.errorMessage);
+      }
+  })
+  .catch(error => {
+      showErrorMessage(translate('unknown_error'));
+  });
+}
+
+var el = document.getElementById('payments-list');
+var sortable = Sortable.create(el, {
+  handle: '.drag-icon',
+  ghostClass: 'sortable-ghost',
+  delay: 500,
+  delayOnTouchOnly: true,
+  touchStartThreshold: 5,
+  onEnd: function (evt) {
+    savePaymentMethodsSorting();
+  },
+});
 
 
 document.addEventListener('DOMContentLoaded', function() {

settings.php

@@ -357,7 +357,7 @@
                     <div class="form-group-inline" data-currencyid="<?= $currency['id'] ?>">
                         <input type="text" class="short" name="symbol" value="<?= $currency['symbol'] ?>" placeholder="$">
                         <input type="text" name="currency" value="<?= $currency['name'] ?>" placeholder="Currency Name">
-                        <input type="text" name="code" value="<?= $currency['code'] ?>" placeholder="Currency Code">
+                        <input type="text" name="code" value="<?= $currency['code'] ?>" placeholder="Currency Code" <?= !$canDelete ? 'disabled' : '' ?>>
                         <button class="image-button medium"  onClick="editCurrency(<?= $currency['id'] ?>)" name="save">
                             <img src="images/siteicons/save.png" title="<?= translate('save_currency', $i18n) ?>">
                         </button>
@@ -468,7 +468,7 @@
     </section>
 
     <?php
-        $sql = "SELECT * FROM payment_methods";
+        $sql = "SELECT * FROM payment_methods ORDER BY `order` ASC";
         $result = $db->query($sql);
 
         if ($result) {
@@ -500,6 +500,7 @@
                              data-in-use="<?= $inUse ? 'yes' : 'no' ?>"
                              data-paymentid="<?= $payment['id'] ?>"
                              title="<?= $inUse ? translate('cant_delete_payment_method_in_use', $i18n) : ($payment['enabled'] ? translate('disable', $i18n) : translate('enable', $i18n)) ?>">
+                            <div class="drag-icon" title=""></div>
                             <img src="<?= $paymentIconFolder.$payment['icon'] ?>"  alt="Logo" />
                             <span class="payment-name" contenteditable="true" title="<?= translate("rename_payment_method", $i18n) ?>"><?= $payment['name'] ?></span>
                             <?php

styles/styles.css

@@ -650,6 +650,12 @@ main > .contain {
   cursor: not-allowed;
 }
 
+.payments-list .payments-payment .drag-icon {
+  height: 20px;
+  width: 12px;
+  background-size: contain;
+}
+
 .payments-list .payments-payment > img {
   width: 32px;
   height: 32px;
@@ -853,6 +859,16 @@ input[type="checkbox"] {
   place-content: center;
 }
 
+button.disabled {
+  cursor: not-allowed;
+}
+
+input[type="text"]:disabled {
+  background-color: #f5f5f5;
+  border-color: #f5f5f5;
+  cursor: not-allowed;
+}
+
 @media (max-width: 768px) {
   input[type="checkbox"] {
       width: 20px;