Add sort by payment type

endpoints/subscriptions/get.php

@@ -17,7 +17,7 @@
         $sql = "SELECT * FROM subscriptions ORDER BY next_payment ASC";
         if (isset($_COOKIE['sortOrder']) && $_COOKIE['sortOrder'] != "") {
           $sort = $_COOKIE['sortOrder'];
-          $allowedSortCriteria = ['name', 'id', 'next_payment', 'price', 'payer_user_id', 'category_id'];
+          $allowedSortCriteria = ['name', 'id', 'next_payment', 'price', 'payer_user_id', 'category_id', 'payment_method_id'];
           $order = "ASC";
           if ($sort == "price" || $sort == "id") {
             $order = "DESC";
@@ -50,6 +50,7 @@
           $print[$id]['next_payment'] = date('M d, Y', strtotime($subscription['next_payment']));
           $print[$id]['payment_method_icon'] = "images/uploads/icons/" . $payment_methods[$paymentMethodId]['icon'];
           $print[$id]['payment_method_name'] = $payment_methods[$paymentMethodId]['name'];
+          $print[$id]['payment_method_id'] = $paymentMethodId;
           $print[$id]['category_id'] = $subscription['category_id'];
           $print[$id]['payer_user_id'] = $subscription['payer_user_id'];
           $print[$id]['price'] = floatval($subscription['price']);

includes/list_subscriptions.php

@@ -63,6 +63,7 @@
 
         $currentCategory = 0;
         $currentPayerUserId = 0;
+        $currentPaymentMethodId = 0;
         foreach ($subscriptions as $subscription) {
             if ($sort == "category_id" && $subscription['category_id'] != $currentCategory) {
                 ?>
@@ -80,6 +81,14 @@
                 <?php
                 $currentPayerUserId = $subscription['payer_user_id'];
             }
+            if ($sort == "payment_method_id" && $subscription['payment_method_id'] != $currentPaymentMethodId) {
+                ?>
+                    <div class="subscription-list-title">
+                        <?= $subscription['payment_method_name'] ?>
+                    </div>
+                <?php
+                $currentPaymentMethodId = $subscription['payment_method_id'];
+            }
         ?>
             <div class="subscription" onClick="toggleOpenSubscription(<?= $subscription['id'] ?>)" data-id="<?= $subscription['id'] ?>">
                 <div class="subscription-main">

index.php

@@ -8,7 +8,7 @@
   $sql = "SELECT * FROM subscriptions ORDER BY next_payment ASC";
   if (isset($_COOKIE['sortOrder']) && $_COOKIE['sortOrder'] != "") {
     $sort = $_COOKIE['sortOrder'];
-    $allowedSortCriteria = ['name', 'id', 'next_payment', 'price', 'payer_user_id', 'category_id'];
+    $allowedSortCriteria = ['name', 'id', 'next_payment', 'price', 'payer_user_id', 'category_id', 'payment_method_id'];
     $order = "ASC";
     if ($sort == "price" || $sort == "id") {
       $order = "DESC";
@@ -57,6 +57,7 @@
               <li <?= $sort == "next_payment" ? 'class="selected"' : "" ?> onClick="setSortOption('next_payment')" id="sort-next_payment">Next payment</li>
               <li <?= $sort == "payer_user_id" ? 'class="selected"' : "" ?> onClick="setSortOption('payer_user_id')" id="sort-payer_user_id">Member</li>
               <li <?= $sort == "category_id" ? 'class="selected"' : "" ?> onClick="setSortOption('category_id')" id="sort-category_id">Category</li>
+              <li <?= $sort == "payment_method_id" ? 'class="selected"' : "" ?> onClick="setSortOption('payment_method_id')" id="sort-payment_method_id">Payment Method</li>
             </ul>
           </div>
         </div>
@@ -77,6 +78,7 @@
             $print[$id]['next_payment'] = date('M d, Y', strtotime($subscription['next_payment']));
             $print[$id]['payment_method_icon'] = "images/uploads/icons/" . $payment_methods[$paymentMethodId]['icon'];
             $print[$id]['payment_method_name'] = $payment_methods[$paymentMethodId]['name'];
+            $print[$id]['payment_method_id'] = $paymentMethodId;
             $print[$id]['category_id'] = $subscription['category_id'];
             $print[$id]['payer_user_id'] = $subscription['payer_user_id'];
             $print[$id]['price'] = floatval($subscription['price']);

styles/styles.css

@@ -918,6 +918,7 @@ input[type="checkbox"] {
   right: 0px;
   display: none;
   width: 144px;
+  width: max-content;
 }
 
 @media (max-width: 380px) {