feat: allow sorting payment methods (ellite#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() {
@@ -948,4 +986,4 @@ var sortable = Sortable.create(el, {
  onEnd: function (evt) {
  saveCategorySorting();
  },
-});
+});

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;