Add error handling to `call-sign-description.vue` component.

2 files changed, 11 insertions, 22 deletions

diff --git a/resources/js/components/call-sign-description.vue b/resources/js/components/call-sign-description.vue
index 30cd37d..7ab8b64 100644
--- a/resources/js/components/call-sign-description.vue
+++ b/resources/js/components/call-sign-description.vue
@@ -2,7 +2,7 @@
   <div>
     <div class="form-group">
         <label for="special-call">Special Callsign:</label>
-        <select class="form-control" id="special-call" v-model="selected" name="scall" required>
+        <select class="form-control" :class="{ 'is-invalid': isInvalid }" id="special-call" v-model="selected" :name="name" required>
           <option v-for="option in options" :key="option.id" :value="option.sign" v-text="option.sign"></option>
         </select> 
     </div>
@@ -17,10 +17,16 @@
 
 <script>
 export default {
+  props: [ 'name', 'old', 'isInvalid' ],
   mounted() {
     this.$store.dispatch('pullSigns').then(() => {
       try {
-        this.$store.dispatch('setSelectedSign', this.$store.getters.getSigns[0].sign);
+        if (this.old) {
+          this.$store.dispatch('setSelectedSign', this.old);
+        }
+        else {
+          this.$store.dispatch('setSelectedSign', this.$store.getters.getSigns[0].sign);
+        }
       }
       catch {
         console.log('No call signs!');
diff --git a/resources/views/pages/reserve.blade.php b/resources/views/pages/reserve.blade.php
index d0253df..17cab9a 100644
--- a/resources/views/pages/reserve.blade.php
+++ b/resources/views/pages/reserve.blade.php
@@ -18,29 +18,13 @@
 <form action="{{ route('reserve') }}" method="POST">
   @csrf      
 
-  <call-sign-description></call-sign-description>
+  <!-- SPECIAL CALL -->
+  <call-sign-description name="scall" old="{{ old('scall') }}" @error('scall') is-invalid="true" @enderror >
+  </call-sign-description>
   @error('scall')
     <div class="alert alert-danger mt-2">{{ $message }}</div>
   @enderror
 
-  {{--<!-- SPECIAL CALL -->--}}
-{{--<div class="form-group">--}}
-  {{--<label for="special-call">Special Callsign:</label>--}}
-  {{--<select class="form-control @error('scall') is-invalid @enderror" id="special-call" name="scall" required>--}}
-    {{--@foreach ($signs as $sign)--}}
-      {{--<option value="{{ $sign->sign }}" {{ old('scall') == $sign->sign ? 'selected' : '' }}>{{ $sign->sign }}</option>--}}
-    {{--@endforeach--}}
-  {{--</select> --}}
-  {{--@error('scall')--}}
-    {{--<div class="alert alert-danger mt-2">{{ $message }}</div>--}}
-  {{--@enderror--}}
-{{--</div>--}}
-
-{{--<div class="card mb-3">--}}
-  {{--<div class="card-body pb-1">--}}
-    {{--<div class="card-text" id="call-desc"></div>--}}
-  {{--</div>--}}
-{{--</div>--}}
 
 @error('time')
   <div class="alert alert-danger mt-2">{{ $message }}</div>
@@ -169,5 +153,4 @@
       format: 'H:i'
     });
   </script>
-  {{--<script src="{{ asset('js/reserve.js') }}"></script>--}}
 @endsection