Parent Child Table Progress

OHFLesvos · Jun 11, 2023 · b1a4faa · b1a4faa
1 parent cf290b8
commit b1a4faa
Show file tree

Hide file tree

Showing 5 changed files with 108 additions and 27 deletions.
diff --git a/app/Http/Controllers/Visitors/API/VisitorController.php b/app/Http/Controllers/Visitors/API/VisitorController.php
@@ -106,19 +106,16 @@ public function createParentChild($parentId, $childId)
         $parent = Visitor::findOrFail($parentId);
         $child = Visitor::findOrFail($childId);
 
+        $parentChild = new ParentChild();
         $parentChild->parent_id = $parent->id;
         $parentChild->child_id = $child->id;
 
         $parentChild->save();
         return;
     }
 
-    public function deleteParentChild($parentId, $childId) {
-        logger()->info('Deleting parent-child relationship', [
-            'parent_id' => $parentId,
-            'child_id' => $childId,
-        ]);
-
+    public function deleteParentChild($parentId, $childId) 
+    {   
         $parentChild = ParentChild::where('parent_id', $parentId)
             ->where('child_id', $childId)
             ->firstOrFail();
@@ -144,7 +141,7 @@ public function updateChildren(Visitor $visitor, StoreVisitor $request)
             $this->createParentChild($parentId, $childId);
         }
 
-        foreach ($createChildrenIds as $childId) {
+        foreach ($deleteChildrenIds as $childId) {
             $this->deleteParentChild($parentId, $childId);
         }
         return;
@@ -156,12 +153,17 @@ public function updateParents(Visitor $visitor, StoreVisitor $request)
 
         $parentIds = collect($request->input('parents', []))
             ->map(fn ($parent) => $parent['id']);
-        $existingParentIds = $visitor->children()->get()
+        $existingParentIds = $visitor->parents()->get()
             ->map(fn ($parent) => $parent->id);
 
         $childId = $visitor->id;
         $createParentIds = $parentIds->diff($existingParentIds);
-        $deleteParentIds = $existingParentIds->diff($parentIds);
+        logger()->info('Update', [
+            'Request parent ids' => $parentIds,
+            'Existing parent ids' => $existingParentIds,
+        ]);
+        $deleteParentIds = $existingParentIds->diff($parentIds); //Broken line???
+        // Error message: Call to a member function getKey() on int
 
         foreach ($createParentIds as $parentId) {
             $this->createParentChild($parentId, $childId);

diff --git a/app/Models/Visitors/ParentChild.php b/app/Models/Visitors/ParentChild.php
@@ -7,7 +7,7 @@
 
 class ParentChild extends Model
 {
-    protected $table = 'parent_child';
+    protected $table = 'parent_child'; //Visitor
 
     protected $fillable = [
         'parent_id',

diff --git a/app/Models/Visitors/Visitor.php b/app/Models/Visitors/Visitor.php
@@ -46,19 +46,23 @@ class Visitor extends Model
         'parental_consent_given' => 'boolean',
     ];
 
-    protected $appends = [
-        'parents',
-        'children',
-    ];
+    // protected $appends = [
+    //     'parents',
+    //     'children',
+    // ];
 
     public function checkins(): HasMany
     {
         return $this->hasMany(VisitorCheckin::class);
     }
 
+    // public function getParentsAttribute()
+    // {
+    //     return $this->parents()->get();
+    // }
+
     public function parents()
     {
-        //wanted to use hasMany and parent() function in ParentChild model
         return $this->hasManyThrough(
             Visitor::class,
             ParentChild::class, 
@@ -69,6 +73,11 @@ public function parents()
         );
     }
 
+    // public function getChildrenAttribute()
+    // {
+    //     return $this->parents()->get();
+    // }
+
     public function children()
     {
         return $this->hasManyThrough(

diff --git a/resources/js/components/visitors/VisitorDetails.vue b/resources/js/components/visitors/VisitorDetails.vue
@@ -128,7 +128,6 @@ export default {
         },
     },
     data() {
-        console.log(this.value)
         return {
             visitor: this.value,
             isBusy: false,

diff --git a/resources/js/components/visitors/VisitorForm.vue b/resources/js/components/visitors/VisitorForm.vue
@@ -154,24 +154,60 @@
                 <b-col>
                     <b-form-group :label="$t('Parents')">
                         <ul>
-                            <li v-for="(parent, index) in formData.parents" :key="parent.id">
+                            <li v-for="(parent, index) in formData.parents" :key="parent.id" class="p3">
                                 {{ parent.name }}
-                                <button @click="removeParent(index)">Remove</button>"
+                                <b-button size="sm" class="text-danger float-right" variant="link" @click="removeParent(index)">Remove</b-button>
                             </li>
                         </ul>
                     </b-form-group>
                 </b-col>
                 <b-col>
                     <b-form-group :label="$t('Children')">
                         <ul>
-                            <li v-for="(child, index) in formData.children" :key="child.id">
+                            <li v-for="(child, index) in formData.children" :key="child.id" class="p-1 align-items-center">
                                 {{ child.name }}
-                                <button @click="removeChild(index)">Remove</button>"
+                                <b-button size="sm" class="text-danger float-right" variant="link" @click="removeChild(index)">Remove</b-button>
                             </li>
                         </ul>
                     </b-form-group>
                 </b-col>
             </b-form-row>
+            <b-form-group>
+                <b-form-input
+                    v-model.trim="search"
+                    type="search"
+                    debounce="500"
+                    :placeholder="
+                        $t('Search for child or parent by name, ID number or date of birth…')
+                    "
+                    autofocus
+                    autocomplete="off"
+                />
+            </b-form-group>
+            <template v-if="searched">
+                <b-card
+                    v-for="visitor in visitors"
+                    :key="visitor.id"
+                    class="mb-3 shadow-sm"
+                >
+                    <VisitorDetails :value="visitor" />
+                    <template #footer>
+                        <b-button
+                            variant="primary"
+                            @click="addParent(visitor)"
+                        >
+                            {{ $t("Add Parent") }}
+                        </b-button>
+                        <b-button
+                            class="float-right"
+                            variant="primary"
+                            @click="addChild(visitor)"
+                            >
+                            {{ $t("Add Child") }}
+                        </b-button>
+                    </template>
+                </b-card>
+            </template>
             <div class="d-flex justify-content-between align-items-start">
                 <span>
                     <b-button
@@ -202,6 +238,8 @@
 </template>
 
 <script>
+import visitorsApi from "@/api/visitors";
+import VisitorDetails from "@/components/visitors/VisitorDetails.vue";
 import formValidationMixin from "@/mixins/formValidationMixin";
 import { mapState } from "vuex";
 import { calculateAge } from "@/utils";
@@ -211,6 +249,7 @@ export default {
     mixins: [formValidationMixin],
     components: {
         DateOfBirthInput,
+        VisitorDetails,
     },
     props: {
         value: {
@@ -241,6 +280,9 @@ export default {
                 { value: "female", text: this.$t("female") },
                 { value: "other", text: this.$t("other") },
             ],
+            search: "",
+            searched: false,
+            visitors: [],
         };
     },
     computed: {
@@ -257,12 +299,21 @@ export default {
         age() {
             return calculateAge(this.formData.date_of_birth)
         },
-        // children() {
-        //     return this.visitor.children;
-        // },
-        // parents() {
-        //     return this.visitor.parents;
-        // }
+    },
+    watch: {
+        search: {
+            immediate: true,
+            handler(value) {
+                console.log("search", value)
+                this.searched = false;
+                if (value.length > 0) {
+                    this.searchVisitors();
+                }
+                else {
+                    this.visitors = [];
+                }
+            }
+        },
     },
     mounted() {
         if (!this.value) {
@@ -299,7 +350,27 @@ export default {
         },
         removeParent(index) {
             this.formData.parents.splice(index, 1);
-        }
+        },
+        addChild(visitor) {
+            this.formData.children.push({ name: visitor.name, id: visitor.id });
+        },
+        addParent(visitor) {
+            this.formData.parents.push({ name: visitor.name, id: visitor.id });
+        },
+        async searchVisitors() {
+            this.errorText = null;
+            try {
+                let data = await visitorsApi.list({
+                    filter: this.search,
+                    limit: 3,
+                });
+                this.visitors = data.data;
+                this.totalRows = data.meta.total;
+                this.searched = true;
+            } catch (ex) {
+                this.errorText = ex;
+            }
+        },
     },
 };
 </script>