Add search to front-end list view, adjust styles
authorLaury GvR <laury@gaslightmedia.com>
Tue, 18 Sep 2018 16:57:56 +0000 (12:57 -0400)
committerLaury GvR <laury@gaslightmedia.com>
Tue, 18 Sep 2018 16:57:56 +0000 (12:57 -0400)
css/front.css
models/front/staff/list.php
views/front/staff/list.html

index 4408933..df779db 100644 (file)
@@ -2,30 +2,40 @@
 .glm-staff-container {
     /* Parent element */
 }
-.paging-container {
+.glm-staff-container .paging-container {
     width: 100%;
     overflow: hidden;
 }
-.glm-staff-block-wrapper {
+.glm-staff-container .glm-staff-filters {
+    
+}
+.glm-staff-container .glm-staff-filters input,
+.glm-staff-container .glm-staff-filters select {
+    width: auto;
+}
+.glm-staff-container .filter-dropdowns {
+    display: block;
+}
+.glm-staff-container .glm-staff-block-wrapper {
     float: left;
     padding: 10px;
     width: 100%;
 }
 @media (min-width: 641px) and (max-width: 1024px) {
-    .glm-staff-block-wrapper {
+    .glm-staff-container .glm-staff-block-wrapper {
         float: left;
         padding: 10px;
         width: 50%;
     }   
 }
 @media (max-width: 640px) {
-    .glm-staff-block-wrapper {
+    .glm-staff-container .glm-staff-block-wrapper {
         float: left;
         padding: 10px;
         width: 50%;
     }   
 }
-.glm-staff-block {
+.glm-staff-container .glm-staff-block {
     border: 1px solid lightgrey;
     margin-bottom: 20px;
     width: 100%;
     padding: 20px;
     max-width: 600px;
 }
-.glm-staff-name {
+.glm-staff-container .glm-staff-name {
     font-weight: bold;
     text-transform: none;
     font-style: normal;
     font-size: 24px;
     text-decoration: none;
 }
-.glm-staff-title{
+.glm-staff-container .glm-staff-title{
     font-weight: bold;
 }
 
 
 /* Email Modal Styles */
-.required-field, .required-fail{
+/* .required-field, .required-fail{
     color: red;
 }
 #emailModal{
@@ -62,4 +72,4 @@
 }
 .modal-message-name{
     font-weight: bold;
-}
\ No newline at end of file
+} */
\ No newline at end of file
index ddbbaaa..044f2b0 100644 (file)
@@ -15,6 +15,8 @@
 
 // Load Contacts data abstract
 require_once GLM_MEMBERS_STAFF_PLUGIN_CLASS_PATH.'/data/dataStaff.php';
+require_once GLM_MEMBERS_STAFF_PLUGIN_CLASS_PATH.'/data/dataBuildings.php';
+require_once GLM_MEMBERS_STAFF_PLUGIN_CLASS_PATH.'/data/dataDepartments.php';
 
 class GlmMembersFront_staff_list extends GlmDatastaff
 {
@@ -109,14 +111,26 @@ class GlmMembersFront_staff_list extends GlmDatastaff
         $view_file = 'list';
         $view = 'list';
 
-        $where                = '';
-        $whereSep             = '';
-        $filterName           = false;
-        $haveFilter           = false;
-        $textSearch           = '';
+        $where              = '';
+        $whereSep           = '';
+        $filterName         = false;
+        $haveFilter         = false;
+        $textSearch         = '';
         $staffFound         = false;
         $filteredStaffFound = false;
-        $list                 = false;
+        $list               = false;
+
+        $buildings          = false;
+        $departments        = false;
+
+        $thisPage           = false;
+        $thisAction         = false;
+        $prevStart          = false;
+        $nextStart          = false;
+        $limit              = false;
+        $alphaSelected      = false;
+
+    
 
         // Paging Parameters
         $textSearch    = '';
@@ -167,6 +181,26 @@ class GlmMembersFront_staff_list extends GlmDatastaff
             $textSearch = stripslashes($textSearch);
         }
 
+
+        $Buildings = new GlmDataBuildings( $this->wpdb, $this->config );
+        $buildings = $Buildings->getList( '', 'name' );
+
+        $Departments = new GlmDataDepartments( $this->wpdb, $this->config );
+        $departments = $Departments->getList( '', 'name' );
+
+        if ( isset( $_REQUEST['filter_name'] ) && trim( $_REQUEST['filter_name'] ) != '' ) {
+             $name_search = addslashes(filter_var($_REQUEST['filter_name'], FILTER_SANITIZE_STRING, FILTER_FLAG_NO_ENCODE_QUOTES));
+             $where .= " (T.fname like '%$name_search%' OR T.lname like '%$name_search%' OR (T.fname like '%$name_search%' AND T.lname like '%$name_search%')  ) AND ";
+        }
+
+        if ( isset( $_REQUEST['filter_departments'] ) && $filter_departments = filter_var( $_REQUEST['filter_departments'], FILTER_VALIDATE_INT ) ) {
+            $where .= " T.department = $filter_departments AND ";
+        }
+
+        if ( isset( $_REQUEST['filter_buildings'] ) && $filter_building = filter_var( $_REQUEST['filter_buildings'], FILTER_VALIDATE_INT ) ) {
+            $where .= " T.building = $filter_building AND ";
+        }
+
         // Check if we're doing paging
         if (isset($_REQUEST['pageSelect'])) {
 
@@ -298,6 +332,9 @@ class GlmMembersFront_staff_list extends GlmDatastaff
             'alphaSelected'        => $alphaSelected,
             'view'                 => $view,
 
+            'departments'          => $departments,
+            'buildings'            => $buildings,
+
             // Paging parameters
             'filteredStaffFound' => $filteredStaffFound,
             'numbDisplayed'        => $numbDisplayed,
@@ -307,6 +344,10 @@ class GlmMembersFront_staff_list extends GlmDatastaff
             'nextStart'            => $nextStart,
             'start'                => $start,
             'limit'                => $limit,
+            'thisPage'             => $thisPage,
+            'thisAction'           => $thisAction,
+            'limit'                => $limit,
+            'alphaSelected'        => $alphaSelected,
         );
 
         // Return status, any suggested view, and any data to controller
index 9d4e29f..6d6bae4 100644 (file)
 <div class="glm-staff-container">
-    {if $staffData}
-        <div class="glm-alpha-links">
-            <a href="{$thisUrl}?glm_action=list&textSearch={$textSearch}&categorySearch={$catSearchSelected}&regionSearch={$regionSearchSelected}#glm-member-list-filters-button" class="glm-alpha-link{if !$alphaSelected} glm-alpha-link-selected{/if}">All</a>
-            {foreach $alphaList as $a}
-                <a href="{$thisUrl}?glm_action=list&alpha={$a.alpha}&textSearch={$textSearch}&categorySearch={$catSearchSelected}&regionSearch={$regionSearchSelected}#glm-member-list-filters-button" class="glm-alpha-link{if $a.default} glm-alpha-link-selected{/if}">{$a.alpha}</a>
-            {/foreach}
+    <form id="search_form" action="{$thisUrl}">
+        <input type="hidden" name="page" value="{$thisPage}" />
+        <input type="hidden" name="glm_action" value="{$thisAction}" />
+        <input type="hidden" name="prevStart" value="{$prevStart}">
+        <input type="hidden" name="nextStart" value="{$nextStart}">
+        <input type="hidden" name="limit" value="{$limit}">
+        <input type="hidden" name="savedAlpha" value="{$alphaSelected}">
+    
+        <div class="glm-staff-filters">
+            <input name="filter_name" value="{if isset($smarty.request.filter_name)}{$smarty.request.filter_name}{/if}" />
+            <div class="filter-dropdowns">
+                <select name="filter_departments">
+                    <option value="">All Departments</option>
+                    {if $departments}
+                        {foreach $departments as $depart}
+                            <option value="{$depart.id}"{if isset($smarty.request.filter_departments) && $smarty.request.filter_departments == $depart.id}selected{/if}>{$depart.name}</option>
+                        {/foreach}
+                    {/if}
+                </select>
+        
+                <select name="filter_buildings">
+                    <option value="">All Buildings</option>
+                    {if $buildings}
+                        {foreach $buildings as $build}
+                            <option value="{$build.id}"{if isset($smarty.request.filter_buildings) && $smarty.request.filter_buildings == $build.id}selected{/if}>{$build.name}</option>
+                        {/foreach}
+                    {/if}
+                </select>
+            </div>
+    
+            <input class="button" type="submit" value="Search" />
         </div>
 
-        <div class="paging-container">
-            {if $paging}
-                {if $prevStart || $nextStart}
-                    <br>
-                    <div class="paging-container">
-                        <a href="{$thisUrl}?glm_action=list&textSearch={$textSearch}&categorySearch={$catSearchSelected}&regionSearch={$regionSearchSelected}&pageSelect=Previous&prevStart={$prevStart}&nextStart={$nextStart}&limit={$limit}&alpha={$alphaSelected}#glm-member-list-filters-button" class="glm-alpha-link" {if !$prevStart} style="pointer-events: none; opacity: 0.5;"{/if}>< Previous page</a>
-                        <a href="{$thisUrl}?glm_action=list&textSearch={$textSearch}&categorySearch={$catSearchSelected}&regionSearch={$regionSearchSelected}&pageSelect=Next&prevStart={$prevStart}&nextStart={$nextStart}&limit={$limit}&alpha={$alphaSelected}#glm-member-list-filters-button" class="glm-alpha-link" {if !$nextStart} style="pointer-events: none; opacity: 0.5;"{/if}>Next page ></a>
-                    </div>
+        {if $staffData}
+            <div class="glm-alpha-links">
+                <a href="{$thisUrl}?glm_action=list&textSearch={$textSearch}&categorySearch={$catSearchSelected}&regionSearch={$regionSearchSelected}#glm-member-list-filters-button" class="glm-alpha-link{if !$alphaSelected} glm-alpha-link-selected{/if}">All</a>
+                {foreach $alphaList as $a}
+                    <a href="{$thisUrl}?glm_action=list&alpha={$a.alpha}&textSearch={$textSearch}&categorySearch={$catSearchSelected}&regionSearch={$regionSearchSelected}#glm-member-list-filters-button" class="glm-alpha-link{if $a.default} glm-alpha-link-selected{/if}">{$a.alpha}</a>
+                {/foreach}
+            </div>
+
+            <div class="paging-container">
+                {if $paging}
+                    {if $prevStart || $nextStart}
+                        <br>
+                        <div class="paging-container">
+                            <a href="{$thisUrl}?glm_action=list&textSearch={$textSearch}&categorySearch={$catSearchSelected}&regionSearch={$regionSearchSelected}&pageSelect=Previous&prevStart={$prevStart}&nextStart={$nextStart}&limit={$limit}&alpha={$alphaSelected}#glm-member-list-filters-button" class="glm-alpha-link" {if !$prevStart} style="pointer-events: none; opacity: 0.5;"{/if}>< Previous page</a>
+                            <a href="{$thisUrl}?glm_action=list&textSearch={$textSearch}&categorySearch={$catSearchSelected}&regionSearch={$regionSearchSelected}&pageSelect=Next&prevStart={$prevStart}&nextStart={$nextStart}&limit={$limit}&alpha={$alphaSelected}#glm-member-list-filters-button" class="glm-alpha-link" {if !$nextStart} style="pointer-events: none; opacity: 0.5;"{/if}>Next page ></a>
+                        </div>
+                        <br>
+                    {/if}
                     <br>
+                    showing {$start} through {$lastDisplayed} of {$filteredStaffFound}
                 {/if}
-                <br>
-                showing {$start} through {$lastDisplayed} of {$filteredStaffFound}
-            {/if}
-        </div>
-        
-        {foreach $staffData as $staffKey => $staffVal}
-            <div class="glm-staff-block-wrapper">
-                <div class="glm-staff-block">
-                    <div class="glm-staff-name">
-                        <span class="glm-staff-fname">
-                            {$staffVal.fname}
-                        </span>
-                        <span class="glm-staff-lname">
-                            {$staffVal.lname}
-                        </span>
-                    </div>
-
-                    <span class="glm-staff-email">
-                        <a href="mailto:{$staffVal.email}">{$staffVal.email}</a>
-                    </span>
+            </div>
+            
+            {foreach $staffData as $staffKey => $staffVal}
+                <div class="glm-staff-block-wrapper">
+                    <div class="glm-staff-block">
+                        <div class="glm-staff-name">
+                            <span class="glm-staff-fname">
+                                {$staffVal.fname}
+                            </span>
+                            <span class="glm-staff-lname">
+                                {$staffVal.lname}
+                            </span>
+                        </div>
 
-                    <br>
-                    
-                    <div class="glm-staff-location">
-                        <span class="glm-staff-extension-title glm-staff-title">
-                            Ext:
-                        </span>
-                        <span class="glm-staff-extension">
-                            {$staffVal.extension}
+                        <span class="glm-staff-email">
+                            <a href="mailto:{$staffVal.email}">{$staffVal.email}</a>
                         </span>
 
                         <br>
+                        
+                        <div class="glm-staff-location">
+                            <span class="glm-staff-extension-title glm-staff-title">
+                                Ext:
+                            </span>
+                            <span class="glm-staff-extension">
+                                {$staffVal.extension}
+                            </span>
 
-                        <span class="glm-staff-department-title glm-staff-title">
-                            Department:
-                        </span>
-                        <span class="glm-staff-department">
-                            {$staffVal.department}
-                        </span>
+                            <br>
 
-                        <br>
+                            <span class="glm-staff-department-title glm-staff-title">
+                                Department:
+                            </span>
+                            <span class="glm-staff-department">
+                                {$staffVal.department}
+                            </span>
 
-                        <span class="glm-staff-building-title glm-staff-title">
-                            Building:
-                        </span>
-                        <span class="glm-staff-building">
-                            {$staffVal.building}
-                        </span>
-                    </div>
+                            <br>
+
+                            <span class="glm-staff-building-title glm-staff-title">
+                                Building:
+                            </span>
+                            <span class="glm-staff-building">
+                                {$staffVal.building}
+                            </span>
+                        </div>
 
-                </div>
-            </div>
-        {/foreach}
-        {if $paging}
-            <div class="paging-container"></div>
-                {if $prevStart || $nextStart}
-                    <br>
-                    <div class="paging-container">
-                        <a href="{$thisUrl}?glm_action=list&textSearch={$textSearch}&categorySearch={$catSearchSelected}&regionSearch={$regionSearchSelected}&pageSelect=Previous&prevStart={$prevStart}&nextStart={$nextStart}&limit={$limit}&alpha={$alphaSelected}" class="glm-alpha-link" {if !$prevStart} style="pointer-events: none; opacity: 0.5;"{/if}>< Previous page</a>
-                        <a href="{$thisUrl}?glm_action=list&textSearch={$textSearch}&categorySearch={$catSearchSelected}&regionSearch={$regionSearchSelected}&pageSelect=Next&prevStart={$prevStart}&nextStart={$nextStart}&limit={$limit}&alpha={$alphaSelected}" class="glm-alpha-link" {if !$nextStart} style="pointer-events: none; opacity: 0.5;"{/if}>Next page ></a>
                     </div>
+                </div>
+            {/foreach}
+            {if $paging}
+                <div class="paging-container"></div>
+                    {if $prevStart || $nextStart}
+                        <br>
+                        <div class="paging-container">
+                            <a href="{$thisUrl}?glm_action=list&textSearch={$textSearch}&categorySearch={$catSearchSelected}&regionSearch={$regionSearchSelected}&pageSelect=Previous&prevStart={$prevStart}&nextStart={$nextStart}&limit={$limit}&alpha={$alphaSelected}" class="glm-alpha-link" {if !$prevStart} style="pointer-events: none; opacity: 0.5;"{/if}>< Previous page</a>
+                            <a href="{$thisUrl}?glm_action=list&textSearch={$textSearch}&categorySearch={$catSearchSelected}&regionSearch={$regionSearchSelected}&pageSelect=Next&prevStart={$prevStart}&nextStart={$nextStart}&limit={$limit}&alpha={$alphaSelected}" class="glm-alpha-link" {if !$nextStart} style="pointer-events: none; opacity: 0.5;"{/if}>Next page ></a>
+                        </div>
+                        <br>
+                    {/if}
                     <br>
-                {/if}
-                <br>
-                showing {$start} through {$lastDisplayed} of {$filteredStaffFound}
-            </div>
+                    showing {$start} through {$lastDisplayed} of {$filteredStaffFound}
+                </div>
+            {/if}
+        {else}
+            Sorry, no staff members found.
         {/if}
-    {else}
-        Sorry, no staff members found.
-    {/if}
+    </form>
 
 </div>
\ No newline at end of file