Document contact validation message added..

app/View/Components/SelectContactCard.php

@@ -35,13 +35,16 @@ class SelectContactCard extends Component
     /** @var string */
     public $textChooseDifferentContact;
 
+    /** @var $error  */
+    public $error;
+
     /**
      * Create a new component instance.
      *
      * @return void
      */
     public function __construct(
-        $type, $contact = false, $contacts = [], $search_route = '', $create_route = '',
+        $type, $contact = false, $contacts = [], $search_route = '', $create_route = '', string $error = '',
         $textAddContact = '', $textCreateNewContact = '', $textEditContact = '', $textContactInfo = '', $textChooseDifferentContact = ''
     )
     {
@@ -50,6 +53,7 @@ class SelectContactCard extends Component
         $this->contacts = $contacts;
         $this->search_route = $search_route;
         $this->create_route = $create_route;
+        $this->error = ($error) ?: "form.errors.get('contact_id')" ;
 
         $this->textAddContact = $this->getTextAddContact($type, $textAddContact);
         $this->textCreateNewContact = $this->getTextCreateNewContact($type, $textCreateNewContact);

resources/assets/js/components/AkauntingContactCard.vue

@@ -5,7 +5,7 @@
                 <div v-if="!show.contact_selected" class="document-contact-without-contact-box-contact-select fs-exclude">
                     <div class="aka-select aka-select--medium is-open" tabindex="0">
                         <div>
-                            <div class="aka-box aka-box--large">
+                            <div class="aka-box aka-box--large" :class="[{'aka-error': error}]">
                                 <div class="aka-box-content">
                                     <div class="document-contact-without-contact-box">
                                         <button type="button" class="btn-aka-link aka-btn--fluid document-contact-without-contact-box-btn" @click="onContactList">
@@ -14,6 +14,10 @@
                                     </div>
                                 </div>
                             </div>
+
+                            <div v-if="error" class="invalid-feedback d-block mt--2 mb-2"
+                                v-html="error">
+                            </div>
                         </div>
                         
                         <div class="aka-select-menu" v-if="show.contact_list">
@@ -163,6 +167,10 @@ export default {
             default: '',
             description: 'Contact create route'
         },
+        error: {
+            type: String,
+            description: "Input error (below input)"
+        },
         selected: {
             type: Object,
             default: function() {
@@ -324,6 +332,7 @@ export default {
 
             this.show.contact_list = false;
             this.show.contact_selected = true;
+            this.error = '';
 
             this.$emit('change', this.contact);
         },
@@ -618,3 +627,10 @@ export default {
     },
 };
 </script>
+
+<style>
+    .aka-error {
+        border-color: #ef3232 !important;
+        background-color: #fb634038;
+    }
+</style>

resources/views/components/documents/form/metadata.blade.php

@@ -8,6 +8,7 @@
                 :contacts="$contacts"
                 :search_route="$contactSearchRoute"
                 :create_route="$contactCreateRoute"
+                error="form.errors.get('contact_name')"
                 :text-add-contact="$textAddContact"
                 :text-create-new-contact="$textCreateNewContact"
                 :text-edit-contact="$textEditContact"

resources/views/components/select-contact-card.blade.php

@@ -27,6 +27,7 @@
             ]
         ]
     ])}}"
+    :error="{{ $error }}"
 
     @change="onChangeContactCard"
 ></akaunting-contact-card>