change phone number display

Reviewed-on: TFMM/silent-auction#4

.phpunit.result.cache

@@ -0,0 +1 @@
+{"version":2,"defects":{"Tests\\Feature\\MyWinningsTest::test_mywinnings_form_is_accessible":8,"Tests\\Feature\\MyWinningsTest::test_mywinnings_results_show_correct_data":8,"Tests\\Feature\\MyWinningsTest::test_mywinnings_invalid_bidder_shows_error":8},"times":{"Tests\\Unit\\PhoneFormattingTest::it_formats_a_10_digit_phone_number":0.018,"Tests\\Unit\\PhoneFormattingTest::it_strips_non_numeric_characters_before_formatting":0,"Tests\\Unit\\PhoneFormattingTest::it_returns_original_value_if_not_10_digits":0,"Tests\\Unit\\PhoneFormattingTest::bidder_model_accessor_formats_phone_number":0.003}}

app/Filament/Resources/BiddersResource.php

@@ -57,7 +57,8 @@ class BiddersResource extends Resource
                 TextColumn::make('bidder_city')->label('City')->sortable(),
                 TextColumn::make('bidder_state')->label('State')->sortable(),
                 TextColumn::make('bidder_zip')->label('Zip')->sortable(),
-                TextColumn::make('bidder_phone')->label('Phone Number')->sortable(),
+                TextColumn::make('bidder_phone')->label('Phone Number')->sortable()
+                    ->formatStateUsing(fn ($state) => \App\Helpers\PhoneHelper::format($state)),
                 TextColumn::make('bidder_email')->label('Email')->sortable(),
             ])
             ->filters([

app/Helpers/PhoneHelper.php

@@ -0,0 +1,14 @@
+<?php
+namespace App\Helpers;
+
+class PhoneHelper
+{
+    public static function format($phone)
+    {
+        $phone = preg_replace('/[^0-9]/', '', $phone);
+        if (strlen($phone) == 10) {
+            return preg_replace('/([0-9]{3})([0-9]{3})([0-9]{4})/', '$1-$2-$3', $phone);
+        }
+        return $phone;
+    }
+}

resources/views/bidderlist.blade.php

@@ -66,7 +66,7 @@
                 {{ $bidderlist_result->bidder_zip }}
               </td>
               <td>
-                {{ $bidderlist_result->bidder_phone }}
+                {{ \App\Helpers\PhoneHelper::format($bidderlist_result->bidder_phone) }}
               </td>
               <td>
                 {{ $bidderlist_result->bidder_email }}

resources/views/checkout.blade.php

@@ -33,7 +33,7 @@
                       Name: {{ $checkout_info_result->bidder_fname }} {{ $checkout_info_result->bidder_lname }}
                     </th>
                     <th colspan="2">
-                      Phone Number: {{ $checkout_info_result->bidder_phone }}
+                      Phone Number: {{ \App\Helpers\PhoneHelper::format($checkout_info_result->bidder_phone) }}
                     </th>
                   </tr>
                   <tr>

resources/views/checkout_complete.blade.php

@@ -51,7 +51,7 @@
                     Name: {{ $checkout_info_result->bidder_fname }} {{ $checkout_info_result->bidder_lname }}
                   </th>
                   <th colspan="2">
-                    Phone Number: {{ $checkout_info_result->bidder_phone }}
+                    Phone Number: {{ \App\Helpers\PhoneHelper::format($checkout_info_result->bidder_phone) }}
                   </th>
                 </tr>
                 <tr>

resources/views/checkout_complete_list.blade.php

@@ -70,7 +70,7 @@
                       {{ $checkout_complete_result->bidder_zip }}
                     </td>
                     <td>
-                      {{ $checkout_complete_result->bidder_phone }}
+                      {{ \App\Helpers\PhoneHelper::format($checkout_complete_result->bidder_phone) }}
                     </td>
                     <td>
                       {{ $checkout_complete_result->bidder_email }}

resources/views/checkout_select_form.blade.php

@@ -1,5 +1,22 @@
 @extends('layouts.app')
 
+@push('styles')
+<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
+<style>
+  .select2-container .select2-selection--single {
+    height: 34px;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+  }
+  .select2-container--default .select2-selection--single .select2-selection__rendered {
+    line-height: 34px;
+  }
+  .select2-container--default .select2-selection--single .select2-selection__arrow {
+    height: 32px;
+  }
+</style>
+@endpush
+
 @section('content')
 <div class="container">
   <div class="row">
@@ -32,3 +49,15 @@
   </div>
 </div>
 @endsection
+
+@push('scripts')
+<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
+<script>
+$(document).ready(function() {
+    $('#checkoutbiddernum').select2({
+        placeholder: "Select a bidder",
+        allowClear: true
+    });
+});
+</script>
+@endpush

resources/views/editwinners.blade.php

@@ -1,5 +1,22 @@
 @extends('layouts.app')
 
+@push('styles')
+<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
+<style>
+  .select2-container .select2-selection--single {
+    height: 34px;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+  }
+  .select2-container--default .select2-selection--single .select2-selection__rendered {
+    line-height: 34px;
+  }
+  .select2-container--default .select2-selection--single .select2-selection__arrow {
+    height: 32px;
+  }
+</style>
+@endpush
+
 @section('content')
 <div class="container">
   <div class="row">
@@ -13,7 +30,7 @@
               <label for=winneritemnum class="col-sm-3 col-sm-offset-1 control-label">
                 Item Number:
               </label>
-              <div class=col-sm-2>
+              <div class=col-sm-4>
                 <select name="winid" id="winid" required class=form-control>
                   <?php echo App\Helpers\WinningBidSelectList::winningBidShowNumbers(); ?>
                 </select>
@@ -23,7 +40,7 @@
               <label for=winnerbiddernum class="col-sm-3 col-sm-offset-1 control-label">
                 Bidder Number:
               </label>
-              <div class=col-sm-2>
+              <div class=col-sm-4>
                 <select name="winnerbiddernum" id="winnerbiddernum" required class=form-control>
                   <?php echo App\Helpers\BidderSelectList::bidderShowNumbers(); ?>
                 </select>
@@ -49,3 +66,19 @@
   </div>
 </div>
 @endsection
+
+@push('scripts')
+<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
+<script>
+$(document).ready(function() {
+    $('#winid').select2({
+        placeholder: "Select an item/winner",
+        allowClear: true
+    });
+    $('#winnerbiddernum').select2({
+        placeholder: "Select a bidder",
+        allowClear: true
+    });
+});
+</script>
+@endpush

resources/views/finaltally.blade.php

@@ -67,8 +67,7 @@
                   {{ $finaltally_result->bidder_zip }}
                 </td>
                 <td>
-                  {{ $finaltally_result->bidder_phone }}
-                </td>
+                  {{ \App\Helpers\PhoneHelper::format($finaltally_result->bidder_phone) }}                </td>
                 <td>
                   {{ $finaltally_result->bidder_email }}
                 </td>

resources/views/layouts/app.blade.php

@@ -12,6 +12,7 @@
 
   <!-- Styles -->
   <link href="{{ asset('css/app.css') }}" rel="stylesheet">
+  @stack('styles')
 </head>
 <body>
   <div id="app">
@@ -102,6 +103,11 @@
                     Winners by Item
                   </a>
                 </li>
+                <li>
+                  <a href="/mywinnings">
+                    Check My Winnings
+                  </a>
+                </li>                
               </ul>
             </li>
             <li class="dropdown">
@@ -202,11 +208,6 @@
                 Checkout Bidder
               </a>
             </li>
-            <li>
-              <a href="/mywinnings">
-                Check My Winnings
-              </a>
-            </li>
           </ul>
           <!-- Right Side Of Navbar -->
           <ul class="nav navbar-nav navbar-right">
@@ -244,5 +245,6 @@
 
 <!-- Scripts -->
 <script src="{{ asset('js/app.js') }}"></script>
+@stack('scripts')
 </body>
 </html>

resources/views/receiptpdf.blade.php

@@ -49,8 +49,7 @@
                     Name: {{ $checkout_info_result->bidder_fname }} {{ $checkout_info_result->bidder_lname }}
                   </td>
                   <td colspan="2">
-                    Phone Number: {{ $checkout_info_result->bidder_phone }}
-                  </td>
+                    Phone Number: {{ \App\Helpers\PhoneHelper::format($checkout_info_result->bidder_phone) }}                  </td>
                 </tr>
                 <tr>
                   <td>

resources/views/receiptpdf2.blade.php

@@ -49,8 +49,7 @@
                     Name: {{ $checkout_info_result->bidder_fname }} {{ $checkout_info_result->bidder_lname }}
                   </td>
                   <td colspan="2">
-                    Phone Number: {{ $checkout_info_result->bidder_phone }}
-                  </td>
+                    Phone Number: {{ \App\Helpers\PhoneHelper::format($checkout_info_result->bidder_phone) }}                  </td>
                 </tr>
                 <tr>
                   <td>

resources/views/reprint_receipt_form.blade.php

@@ -1,5 +1,22 @@
 @extends('layouts.app')
 
+@push('styles')
+<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
+<style>
+  .select2-container .select2-selection--single {
+    height: 34px;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+  }
+  .select2-container--default .select2-selection--single .select2-selection__rendered {
+    line-height: 34px;
+  }
+  .select2-container--default .select2-selection--single .select2-selection__arrow {
+    height: 32px;
+  }
+</style>
+@endpush
+
 @section('content')
 <div class="container">
   <div class="row">
@@ -15,7 +32,7 @@
                 Select Bidder Number:
               </label>
               <div class=col-sm-4>
-                <select name="reprintbiddernum" id="checkoutbiddernum" required class=form-control>
+                <select name="reprintbiddernum" id="reprintbiddernum" required class=form-control>
                   <?php echo App\Helpers\CheckoutBidderSelectList::checkoutBidderShowNumbers(); ?>
                 </select>
               </div>
@@ -32,3 +49,15 @@
   </div>
 </div>
 @endsection
+
+@push('scripts')
+<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
+<script>
+$(document).ready(function() {
+    $('#reprintbiddernum').select2({
+        placeholder: "Select a bidder",
+        allowClear: true
+    });
+});
+</script>
+@endpush

resources/views/showcarlist.blade.php

@@ -78,7 +78,7 @@
                 {{ $showcarlist_result->bidder_zip }}
               </td>
               <td>
-                {{ $showcarlist_result->bidder_phone }}
+                {{ \App\Helpers\PhoneHelper::format($showcarlist_result->bidder_phone) }}
               </td>
               <td>
                 {{ $showcarlist_result->bidder_email }}

resources/views/winners.blade.php

@@ -1,5 +1,22 @@
 @extends('layouts.app')
 
+@push('styles')
+<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
+<style>
+  .select2-container .select2-selection--single {
+    height: 34px;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+  }
+  .select2-container--default .select2-selection--single .select2-selection__rendered {
+    line-height: 34px;
+  }
+  .select2-container--default .select2-selection--single .select2-selection__arrow {
+    height: 32px;
+  }
+</style>
+@endpush
+
 @section('content')
 <div class="container">
   <div class="row">
@@ -14,7 +31,7 @@
               <label for=winneritemnum class="col-sm-3 col-sm-offset-1 control-label">
                 Item Number:
               </label>
-              <div class=col-sm-2>
+              <div class=col-sm-4>
                 <select name="winneritemnum" id="winneritemnum" required class=form-control>
                   <?php echo App\Helpers\ItemSelectList::itemShowNumbers(); ?>
                 </select>
@@ -24,7 +41,7 @@
               <label for=winnerbiddernum class="col-sm-3 col-sm-offset-1 control-label">
                 Bidder Number:
               </label>
-              <div class=col-sm-2>
+              <div class=col-sm-4>
                 <select name="winnerbiddernum" id="winnerbiddernum" required class=form-control>
                   <?php echo App\Helpers\BidderSelectList::bidderShowNumbers(); ?>
                 </select>
@@ -50,3 +67,20 @@
   </div>
 </div>
 @endsection
+
+@push('scripts')
+<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
+<script>
+$(document).ready(function() {
+    $('#winnerbiddernum').select2({
+        placeholder: "Select a bidder",
+        allowClear: true
+    });
+    // Also making item number searchable as it's generally expected for "typed in" lookups
+    $('#winneritemnum').select2({
+        placeholder: "Select an item",
+        allowClear: true
+    });
+});
+</script>
+@endpush

resources/views/winnertotal.blade.php

@@ -20,8 +20,7 @@
                 Name: {{ $winnertotal_info_result->bidder_fname }} {{ $winnertotal_info_result->bidder_lname }}
               </th>
               <th>
-                Phone Number: {{ $winnertotal_info_result->bidder_phone }}
-              </th>
+                Phone Number: {{ \App\Helpers\PhoneHelper::format($winnertotal_info_result->bidder_phone) }}              </th>
               <th>
                 Total: ${{ $winnertotal_info_result->total_cost }}
               </th>

resources/views/winnertotalform.blade.php

@@ -1,5 +1,22 @@
 @extends('layouts.app')
 
+@push('styles')
+<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
+<style>
+  .select2-container .select2-selection--single {
+    height: 34px;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+  }
+  .select2-container--default .select2-selection--single .select2-selection__rendered {
+    line-height: 34px;
+  }
+  .select2-container--default .select2-selection--single .select2-selection__arrow {
+    height: 32px;
+  }
+</style>
+@endpush
+
 @section('content')
 <div class="container">
   <div class="row">
@@ -32,3 +49,15 @@
   </div>
 </div>
 @endsection
+
+@push('scripts')
+<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
+<script>
+$(document).ready(function() {
+    $('#winnerbiddernum').select2({
+        placeholder: "Select a bidder",
+        allowClear: true
+    });
+});
+</script>
+@endpush

tests/Unit/PhoneFormattingTest.php

@@ -0,0 +1,31 @@
+<?php
+
+namespace Tests\Unit;
+
+use Tests\TestCase;
+use App\Models\Bidders;
+use App\Helpers\PhoneHelper;
+
+class PhoneFormattingTest extends TestCase
+{
+    /** @test */
+    public function it_formats_a_10_digit_phone_number()
+    {
+        $formatted = PhoneHelper::format('1234567890');
+        $this->assertEquals('123-456-7890', $formatted);
+    }
+
+    /** @test */
+    public function it_strips_non_numeric_characters_before_formatting()
+    {
+        $formatted = PhoneHelper::format('(123) 456-7890');
+        $this->assertEquals('123-456-7890', $formatted);
+    }
+
+    /** @test */
+    public function it_returns_original_value_if_not_10_digits()
+    {
+        $formatted = PhoneHelper::format('1234567');
+        $this->assertEquals('1234567', $formatted);
+    }
+}