From 2fc7e4b79dd67136f09724c06c5a49a6c1c4b3e8 Mon Sep 17 00:00:00 2001
From: Luca Haid <luca@haid.in>
Date: Tue, 29 Oct 2024 15:52:49 +0100
Subject: [PATCH] added mobile view for preorder

---
 Layout/default/Preorder/Index.php         | 162 ++++++++++++++++++----
 Layout/default/Preordercampaign/Index.php | 135 +++++++++++++++---
 Layout/default/menu.php                   |   2 +-
 Layout/default/tpl/pagination.php         |   2 +-
 4 files changed, 253 insertions(+), 48 deletions(-)

diff --git a/Layout/default/Preorder/Index.php b/Layout/default/Preorder/Index.php
index dd23119ea..9b1f29ab0 100644
--- a/Layout/default/Preorder/Index.php
+++ b/Layout/default/Preorder/Index.php
@@ -4,8 +4,107 @@
   $pagination_entity_name = "Vorbestellungen";
   
 ?>
+
 <?php include(realpath(dirname(__FILE__)."/../../$mfLayoutPackage")."/header.php"); ?>
 
+<style>
+    .preorder-campaign-import {
+        display: flex;
+        gap: 8px;
+        justify-content: flex-start;
+    }
+
+    .preorder-campaign-header, .preorder-campaign-header-buttons {
+        display: flex;
+        justify-content: space-between;
+    }
+
+
+    @media (max-width: 576px) {
+        .preorder-campaign-import, .preorder-campaign-header {
+            display: grid;
+            grid-template-columns: 1fr;
+            grid-gap: 8px;
+        }
+
+        .preorder-campaign-table-wrapper {
+            overflow-x: auto;
+        }
+
+        .preorder-campaign-header h4 {
+            text-align: center;
+        }
+
+        .preorder-campaign-header-buttons {
+            display: grid;
+            grid-template-columns: 1fr 1fr;
+            grid-gap: 8px;
+        }
+
+        .preorder-campaign-table-actions {
+            display: grid;
+            grid-gap: 4px;
+            grid-template-columns: auto auto auto;
+        }
+
+        .preorder-campaign-table-actions a {
+            text-align: center;
+            font-size: 24px;
+        }
+
+        .preorder-campaign-table-actions a[title="Vorbestellkampagne Löschen"] {
+            grid-column: 3;
+        }
+
+    }
+</style>
+
+<script>
+    $(document).ready(function () {
+        if (window.matchMedia('(min-width: 576px)').matches) {
+            return;
+        }
+
+        // in ul.pagination
+        // if .page-item.disabled.text-secondary exists
+        // only keep the first 2 .page-item, the last 2 .page-item and the .page-item.disabled.text-secondary and the one before and the one after that
+
+        const pagination = $("ul.pagination");
+        const disabled = pagination.find(".page-item.disabled.points");
+
+        if (disabled.length) {
+            const first = pagination.find(".page-item").first();
+            const firstNext = first.next();
+            const last = pagination.find(".page-item").last();
+            const lastNext = last.prev();
+            const prev = disabled.prev();
+            const next = disabled.next();
+            const notToDelete = [first, firstNext, last, lastNext, prev, next, disabled];
+
+            // loop through pagination.find(".page-item") and remove all but the first, last, prev, next, firstNext, lastNext
+
+            pagination.find(".page-item").each(function (index, item) {
+                // if (!notToDelete.includes($(item))) {
+                //     $(item).remove();
+                // } fix this becaues of we need [0] of notToDelete to compare
+                let check = false;
+                notToDelete.forEach(function (n) {
+                    if (n[0] === item) {
+                        check = true;
+                    }
+                });
+
+                if (!check) {
+                    $(item).remove();
+                }
+
+            });
+
+
+        }
+    });
+</script>
+
     <!-- start page title -->
     <div class="row">
       <div class="col-12">
@@ -34,7 +133,7 @@
               <div class="row">
 
 
-                <div class="col-2">
+                <div class="col-sm-12 col-md-2">
                   <label class="form-label" for="filter_preordercampaign_id">Kampagne</label>
                   <select name="filter[preordercampaign_id]" id="filter_preordercampaign_id" class="form-control">
                     <option value="">Alle</option>
@@ -44,7 +143,7 @@
                   </select>
                 </div>
                 
-                <div class="col-2">
+                <div class="col-sm-12 col-md-2">
                   <label class="form-label" for="filter_status">Status</label>
                   <select name="filter[status][]" id="filter_status" class="form-control" multiple="multiple">
                     <?php foreach(PreorderstatusModel::getAll() as $status): ?>
@@ -53,7 +152,7 @@
                   </select>
                 </div>
                 
-                <div class="col-2">
+                <div class="col-sm-12 col-md-2">
                   <label class="form-label" for="filter_type">Bestelltyp</label>
                   <select name="filter[type][]" id="filter_type" class="form-control" multiple="multiple">
                     <option value="interest" <?=(isset($filter) && array_key_exists("type", $filter) && in_array("interest", $filter['type'])) ? "selected='selected'" : ""?>>Interessensbekundung</option>
@@ -62,7 +161,7 @@
                   </select>
                 </div>
                 
-                <div class="col-2">
+                <div class="col-sm-12 col-md-2">
                   <label class="form-label" for="filter_addon_services">Zusatzdienste</label>
                   <select name="filter[addon_services]" id="filter_addon_services" class="form-control">
                     <option></option>
@@ -71,27 +170,27 @@
                 </div>
               </div>
               <div class="row mt-2">
-                <div class="col-1">
+                <div class="col-sm-12 col-md-1">
                   <label class="form-label" for="filter_ucode">Bestellcode</label>
                   <input type="text" class="form-control" name="filter[ucode]" id="filter_ucode" value="<?=$filter['ucode'] ?? ""?>" />
                 </div>
                 
-                <div class="col-1">
+                <div class="col-sm-12 col-md-1">
                   <label class="form-label" for="filter_oaid">OAID</label>
                   <input type="text" class="form-control" name="filter[oaid]" id="filter_oaid" value="<?=$filter['oaid'] ?? ""?>" />
                 </div>
                 
-                <div class="col-2">
+                <div class="col-sm-12 col-md-2">
                   <label class="form-label" for="filter_address">Anschlussadresse</label>
                   <input type="text" class="form-control" name="filter[address]" id="filter_address" value="<?=$filter['address'] ?? ""?>" />
                 </div>
                 
-                <div class="col-2">
+                <div class="col-sm-12 col-md-2">
                   <label class="form-label" for="filter_kunde">Kunde</label>
                   <input type="text" class="form-control" name="filter[kunde]" id="filter_kunde" value="<?=$filter['kunde'] ?? ""?>" />
                 </div>
                 
-                <div class="col-2">
+                <div class="col-sm-12 col-md-2">
                   <label class="form-label" for="filter_magic_search">erweiterte Suche</label>
                   <input type="text" class="form-control" name="filter[magic_search]" id="filter_magic_search" value="<?=$filter['magic_search'] ?? ""?>" />
                 </div>
@@ -99,7 +198,7 @@
               </div>
 
               <div class="row mt-2">
-                <div class="col-1">
+                <div class="col-sm-12 col-md-1">
                   <label class="form-label" for="filter_unit_missing">Wohneinheit</label>
                   <select name="filter[unit_missing]" id="filter_unit_missing" class="form-control">
                     <option value=""></option>
@@ -108,7 +207,7 @@
                   </select>
                 </div>
                 
-                <div class="col-2">
+                <div class="col-sm-12 col-md-2">
                   <label class="form-label" for="filter_connection_count">Anzahl Anschlüsse</label>
                   <select name="filter[connection_count]" id="filter_connection_count" class="form-control">
                     <option value=""></option>
@@ -117,7 +216,7 @@
                   </select>
                 </div>
                 
-                <div class="col-1">
+                <div class="col-sm-12 col-md-1">
                   <label class="form-label" for="filter_rimo_workorder">Rimo Workorder</label>
                   <select name="filter[rimo_workorder]" id="filter_rimo_workorder" class="form-control">
                     <option value=""></option>
@@ -126,7 +225,7 @@
                   </select>
                 </div>
                 
-                <div class="col-2">
+                <div class="col-sm-12 col-md-2">
                   <label class="form-label" for="filter_rimo_workorder">Rimo Workorder Status</label>
                   <select name="filter[rimo_workorder_status]" id="filter_rimo_workorder_status" class="form-control">
                     <option value=""></option>
@@ -139,12 +238,12 @@
                   </select>
                 </div>
                 
-                <div class="col-2">
+                <div class="col-sm-12 col-md-2">
                   <label class="form-label" for="filter_workorder_name">Rimo Workorder Name</label>
                   <input type="text" class="form-control" name="filter[rimo_workorder_name]" id="filter_workorder_name" value="<?=$filter['workorder_name'] ?? ""?>" />
                 </div>
                 
-                <div class="col-2">
+                <div class="col-sm-12 col-md-2">
                   <label class="form-label" for="filter_rimo_workorder_team_id">Rimo Workorder Assigned Team</label>
                     <select name="filter[rimo_workorder_team_id]" id="filter_rimo_workorder_team_id" class="form-control">
                         <option value=""></option>
@@ -154,7 +253,7 @@
                     </select>
                 </div>
                 
-                <div class="col-2">
+                <div class="col-sm-12 col-md-2">
                   <label class="form-label" for="rimo_home_extref">Wohneinheit Rimo-Extref</label>
                   <select name="filter[rimo_home_extref]" id="filter_rimo_home_extref" class="form-control">
                     <option value=""></option>
@@ -166,7 +265,7 @@
               </div>
               
               <div class="row mt-2">
-                <div class="col">
+                  <div class="col preorder-campaign-header-buttons">
                   <button type="submit" class="btn btn-primary">Filter anwenden</button>
                   <?php if(isset($campaign) && $campaign->id): ?>
                     <a class="btn btn-secondary" href="<?=self::getUrl("Preorder", "", ['filter' => ['preordercampaign_id' => $campaign->id], "resetFilter" => 1])?>">Filter zurücksetzen</a>
@@ -203,23 +302,23 @@
         
         <div class="card">
           <div class="card-body mb-3">
-            <div class="row">
-              <div class="col-12">
-                <div class="float-left">
-                  <h4 class="header-title">Liste aller Vorbestellungen<?=(isset($campaign) && $campaign) ? " - ".$campaign->name : ""?></h4>
-                </div>
-                <?php if($filter['preordercampaign_id']): ?>
-                  <div class="float-right">
-                    <a class="btn btn-primary mb-2" href="<?=self::getUrl("Preorder", "add", ["preordercampaign_id" => $filter['preordercampaign_id']])?>"><i class="fas fa-plus"></i> Neue Vorbestellung anlegen</a>
-                  </div>
-                <?php endif; ?>
+
+              <div class="preorder-campaign-header">
+                  <h4 class="header-title">Liste aller Vorbestellungen<?= (isset($campaign) && $campaign) ? " - " . $campaign->name : "" ?></h4>
+                  <?php if ($filter['preordercampaign_id']): ?>
+                      <div class="float-right">
+                          <a class="btn btn-primary mb-2"
+                             href="<?= self::getUrl("Preorder", "add", ["preordercampaign_id" => $filter['preordercampaign_id']]) ?>"><i
+                                      class="fas fa-plus"></i> Neue Vorbestellung anlegen</a>
+                      </div>
+                  <?php endif; ?>
               </div>
-            </div>
             
             
 <?php include(realpath(dirname(__FILE__)."/../")."/tpl/pagination.php"); ?>
 <?php include(realpath(dirname(__FILE__)."/../")."/tpl/pagination-summary.php"); ?>
-            
+
+              <div class="preorder-campaign-table-wrapper">
             <table class="table table-striped table-hover">
               <tr>
                 <?php if(!$me->is(["preorderfront"]) && !$me->is("preorderreadonly")): ?>
@@ -295,10 +394,12 @@
                 <td><?php if($preorder->adb_wohneinheit_id && is_array($preorder->adb_wohneinheit->rimo_workorders) && count($preorder->adb_wohneinheit->rimo_workorders)):?><i class="fas fa-r" title="Rimo Workorder erstellt"></i><?php endif; ?></td>
                 <?php endif; ?>
                 <td style="text-align: left; letter-spacing: 4px; font-size: 1.1em;">
-                  <?php if(!$me->is(["preorderfront"]) && !$me->is("preorderreadonly")): ?>
+                    <div class="preorder-campaign-table-actions">
+                    <?php if(!$me->is(["preorderfront"]) && !$me->is("preorderreadonly")): ?>
                   <a href="<?=self::getUrl("Preorder", "edit", ["id" => $preorder->id])?>"><i class="far fa-edit"  title="Vorbestellung Bearbeiten"></i></a>
                   <a href="<?=self::getUrl("Preorder", "delete", ["id" => $preorder->id, "filter" => $filter])?>" class="text-danger" onclick="if(!confirm('Vorbestellung wirklich löschen?')) return false;" title="Vorbestellung Löschen"><i class="fas fa-trash"></i></a>
                   <?php endif; ?>
+                    </div>
                 </td>
               </tr>
               <?php if(!$me->is(["preorderfront"]) && !$me->is("preorderreadonly")): ?>
@@ -312,6 +413,7 @@
               
               <?php endforeach; ?>
             </table>
+              </div>
             
 <?php include(realpath(dirname(__FILE__)."/../")."/tpl/pagination-summary.php"); ?>            
 <?php include(realpath(dirname(__FILE__)."/../")."/tpl/pagination.php"); ?>
diff --git a/Layout/default/Preordercampaign/Index.php b/Layout/default/Preordercampaign/Index.php
index 49db23276..a0a88897e 100644
--- a/Layout/default/Preordercampaign/Index.php
+++ b/Layout/default/Preordercampaign/Index.php
@@ -3,8 +3,108 @@
   $pagination_baseurl_params = ["filter" => $filter];
   $pagination_entity_name = "Vorbestellkampagnen";
 ?>
+
 <?php include(realpath(dirname(__FILE__)."/../../$mfLayoutPackage")."/header.php"); ?>
 
+<style>
+    .preorder-campaign-import {
+        display: flex;
+        gap: 8px;
+        justify-content: flex-start;
+    }
+
+    .preorder-campaign-header, .preorder-campaign-header-buttons {
+        display: flex;
+        justify-content: space-between;
+    }
+
+
+    @media (max-width: 576px) {
+        .preorder-campaign-import, .preorder-campaign-header {
+            display: grid;
+            grid-template-columns: 1fr;
+            grid-gap: 8px;
+        }
+
+        .preorder-campaign-table-wrapper {
+            overflow-x: auto;
+        }
+
+        .preorder-campaign-header h4 {
+            text-align: center;
+        }
+
+        .preorder-campaign-header-buttons {
+            display:grid;
+            grid-template-columns: 1fr 1fr;
+            grid-gap: 8px;
+        }
+
+        .preorder-campaign-table-actions {
+            display: grid;
+            grid-gap: 4px;
+            grid-template-columns: auto auto auto;
+        }
+
+        .preorder-campaign-table-actions a {
+            text-align: center;
+            font-size: 24px;
+        }
+
+        .preorder-campaign-table-actions a[title="Vorbestellkampagne Löschen"] {
+            grid-column: 3;
+        }
+
+    }
+</style>
+
+<script>
+    $(document).ready(function () {
+        if (window.matchMedia('(min-width: 576px)').matches) {
+            return;
+        }
+
+        // in ul.pagination
+        // if .page-item.disabled.text-secondary exists
+        // only keep the first 2 .page-item, the last 2 .page-item and the .page-item.disabled.text-secondary and the one before and the one after that
+
+        const pagination = $("ul.pagination");
+        const disabled = pagination.find(".page-item.disabled.points");
+
+        if (disabled.length) {
+            const first = pagination.find(".page-item").first();
+            const firstNext = first.next();
+            const last = pagination.find(".page-item").last();
+            const lastNext = last.prev();
+            const prev = disabled.prev();
+            const next = disabled.next();
+            const notToDelete = [first, firstNext, last, lastNext, prev, next, disabled];
+
+            // loop through pagination.find(".page-item") and remove all but the first, last, prev, next, firstNext, lastNext
+
+            pagination.find(".page-item").each(function (index, item) {
+                // if (!notToDelete.includes($(item))) {
+                //     $(item).remove();
+                // } fix this becaues of we need [0] of notToDelete to compare
+                let check = false;
+                notToDelete.forEach(function (n) {
+                    if (n[0] === item) {
+                        check = true;
+                    }
+                });
+
+                if (!check) {
+                    $(item).remove();
+                }
+
+            });
+
+
+        }
+    });
+</script>
+
+
     <!-- start page title -->
     <div class="row">
       <div class="col-12">
@@ -31,7 +131,7 @@
             <form method="get" action="<?=self::getUrl("Preordercampaign")?>">
               <div class="row">
                 
-                <div class="col-2">
+                <div class="col-sm-12 col-md-2">
                   <label class="form-label" for="filter_network_id">Netzgebiet</label>
                   <select name="filter[network_id]" id="filter_network_id" class="form-control">
                     <option></option>
@@ -42,7 +142,7 @@
                 </div>
                 
                 <?php if($me->is("Admin")): ?>
-                <div class="col-2">
+                <div class="col-sm-12 col-md-2">
                   <label class="form-label" for="filter_netowner">Netzbesitzer</label>
                   <select name="filter[netowner]" id="filter_netowner" class="form-control">
                     <option></option>
@@ -53,19 +153,19 @@
                 </div>
                 <?php endif; ?>
                 
-                <div class="col-1">
+                <div class="col-sm-12 col-md-1">
                   <label class="form-label" for="filter_name">Name</label>
                   <input type="text" class="form-control" name="filter[name]" id="filter_name" value="<?=$filter['name'] ?? ""?>" />
                 </div>
                 
-                <div class="col-1">
+                <div class="col-sm-12 col-md-1">
                   <label class="form-label" for="filter_area">Gebiet</label>
                   <input type="text" class="form-control" name="filter[area]" id="filter_area" value="<?=$filter['area'] ?? ""?>" />
                 </div>
                 
               </div>
               <div class="row mt-2">
-                <div class="col">
+                <div class="col-sm-12 col-md-2">
                   <button type="submit" class="btn btn-primary">Filter anwenden</button>
                   <a class="btn btn-secondary" href="<?=self::getUrl("Preordercampaign")?>">Filter zurücksetzen</a>
                 </div>
@@ -78,7 +178,7 @@
 
           <?php if($me->address_id == 1 || $me->address_id == 4807): // xinon, rml ?>
           <div class="card">
-              <div class="card-body">
+              <div class="card-body preorder-campaign-import">
                   <a class="btn btn-purple" href="<?=self::getUrl("PreorderDiscount", "import")?>"><i class="fas fa-tags fa-fw"></i> Gutscheincodes importieren</a>
                   <a class="btn btn-purple ml-1" href="<?=self::getUrl("Preorder", "statusupdateimport")?>"><i class="fas fa-retweet fa-fw"></i> Statusupdates importieren</a>
               </div>
@@ -87,14 +187,13 @@
 
         <div class="card">
           <div class="card-body mb-3">
-            <div class="float-left">
-              <h4 class="header-title">Liste aller Vorbestellkampagnen</h4>
-            </div>
-            <div class="float-right">
-              <?php if($me->is("Admin")): ?>
-                <a class="btn btn-primary mb-2" href="<?=self::getUrl("Preordercampaign", "add")?>"><i class="fas fa-plus"></i> Neue Vorbestellkampagne anlegen</a>
-              <?php endif; ?>
-            </div>
+              <div class="preorder-campaign-header">
+                  <h4 class="header-title">Liste aller Vorbestellkampagnen</h4>
+                  <?php if ($me->is("Admin")): ?>
+                      <a class="btn btn-primary mb-2" href="<?= self::getUrl("Preordercampaign", "add") ?>"><i class="fas fa-plus"></i> Neue
+                          Vorbestellkampagne anlegen</a>
+                  <?php endif; ?>
+              </div>
             
 <div class="row">
   <div class="col">
@@ -102,8 +201,9 @@
 <?php include(realpath(dirname(__FILE__)."/../")."/tpl/pagination-summary.php"); ?>
   </div>
 </div>
-            
-            <table class="table table-striped table-hover">
+              <div class="preorder-campaign-table-wrapper">
+
+              <table class="table table-striped table-hover">
               <tr>
                 <th></th>
                 <th></th>
@@ -144,6 +244,7 @@
                 <td><?=date('d.m.Y',$camp->from)?></td>
                 <td><?=date('d.m.Y',$camp->to)?></td>
                 <td style="text-align: left; letter-spacing: 4px; font-size: 1.1em;">
+                    <div class="preorder-campaign-table-actions">
                   <a href="<?=self::getUrl("Preordercampaign", "downloadAddonServices", ["preordercampaign_id" => $camp->id])?>" title="Bestellte Zusatzdienste exportieren"><i class="far fa-sunset"></i></a>
                   <a href="<?=self::getUrl("Preordernotification", "Index", ["filter" => ["preordercampaign_id" => $camp->id]])?>" title="Email Aussendungen"><i class="far fa-envelope"></i></a>
                   <?php if($me->is("Admin")):  ?>
@@ -151,10 +252,12 @@
                     <a href="<?=self::getUrl("Preordercampaign", "admin", ["id" => $camp->id])?>"><i class="far fa-a"  title="Adminfunktionen"></i></a>
                     <a href="<?=self::getUrl("Preordercampaign", "delete", ["id" => $camp->id])?>" class="text-danger" onclick="if(!confirm('Vorbestellkampagne wirklich löschen?')) return false;" title="Vorbestellkampagne Löschen"><i class="fas fa-trash"></i></a>
                   <?php endif; ?>
+                    </div>
                 </td>
               </tr>
               <?php endforeach; ?>
             </table>
+              </div>
             
 <?php include(realpath(dirname(__FILE__)."/../")."/tpl/pagination-summary.php"); ?>            
 <?php include(realpath(dirname(__FILE__)."/../")."/tpl/pagination.php"); ?>
diff --git a/Layout/default/menu.php b/Layout/default/menu.php
index edcb0c6d3..daec7e863 100644
--- a/Layout/default/menu.php
+++ b/Layout/default/menu.php
@@ -174,7 +174,7 @@
           <?php endif; ?>
 
           <?php if($me->is(["Admin","netowner","salespartner"]) || $me->can(["Order", "Preorder"])): ?>
-          <li class="has-submenu mobile-hide">
+          <li class="has-submenu">
             <a href="#">
               <i class="fal fa-fw fa-money-bill-wave"></i>Verkauf <div class="arrow-down"></div>
             </a>
diff --git a/Layout/default/tpl/pagination.php b/Layout/default/tpl/pagination.php
index 8e83e2382..ea28cedcb 100644
--- a/Layout/default/tpl/pagination.php
+++ b/Layout/default/tpl/pagination.php
@@ -87,7 +87,7 @@ if(count($pagination_baseurl_params)) {
       </li>
       <?php foreach($mfPagination_pages as $mfPageIndex => $mfPage):?>
         <?php if($mfPage == "separator_before" || $mfPage == "separator_after"): ?>
-          <li class="page-item disabled font-weight-bold text-secondary"><a class="page-link">...</a></li>
+          <li class="page-item disabled font-weight-bold text-secondary points"><a class="page-link">...</a></li>
         <?php continue; endif; ?>
         <li class="page-item <?=($mfPage['current']) ? "disabled font-weight-bold text-secondary" : ""?>"><a class="page-link" href="<?=$mfPage['url']?>"><?=$mfPageIndex+1?></a></li>
       <?php endforeach; ?>