tarang19

Member Since 9 Months Ago

pune

Experience Points
17,180
Total
Experience

2,820 experience to go until the next level!

In case you were wondering, you earn Laracasts experience when you:

  • Complete a lesson — 100pts
  • Create a forum thread — 50pts
  • Reply to a thread — 10pts
  • Leave a reply that is liked — 50pts
  • Receive a "Best Reply" award — 500pts
Lessons Completed
110
Lessons
Completed
Best Reply Awards
1
Best Reply
Awards
  • start your engines Created with Sketch.

    Start Your Engines

    Earned once you have completed your first Laracasts lesson.

  • first-thousand Created with Sketch.

    First Thousand

    Earned once you have earned your first 1000 experience points.

  • 1-year Created with Sketch.

    One Year Member

    Earned when you have been with Laracasts for 1 year.

  • 2-years Created with Sketch.

    Two Year Member

    Earned when you have been with Laracasts for 2 years.

  • 3-years Created with Sketch.

    Three Year Member

    Earned when you have been with Laracasts for 3 years.

  • 4-years Created with Sketch.

    Four Year Member

    Earned when you have been with Laracasts for 4 years.

  • 5-years Created with Sketch.

    Five Year Member

    Earned when you have been with Laracasts for 5 years.

  • school-in-session Created with Sketch.

    School In Session

    Earned when at least one Laracasts series has been fully completed.

  • welcome-newcomer Created with Sketch.

    Welcome To The Community

    Earned after your first post on the Laracasts forum.

  • full-time-student Created with Sketch.

    Full Time Learner

    Earned once 100 Laracasts lessons have been completed.

  • pay-it-forward Created with Sketch.

    Pay It Forward

    Earned once you receive your first "Best Reply" award on the Laracasts forum.

  • subscriber Created with Sketch.

    Subscriber

    Earned if you are a paying Laracasts subscriber.

  • lifer Created with Sketch.

    Lifer

    Earned if you have a lifetime subscription to Laracasts.

  • evangelist Created with Sketch.

    Laracasts Evangelist

    Earned if you share a link to Laracasts on social media. Please email [email protected] with your username and post URL to be awarded this badge.

  • chatty-cathy Created with Sketch.

    Chatty Cathy

    Earned once you have achieved 500 forum replies.

  • lara-veteran Created with Sketch.

    Laracasts Veteran

    Earned once your experience points passes 100,000.

  • 10k-strong Created with Sketch.

    Ten Thousand Strong

    Earned once your experience points hits 10,000.

  • lara-master Created with Sketch.

    Laracasts Master

    Earned once 1000 Laracasts lessons have been completed.

  • laracasts-tutor Created with Sketch.

    Laracasts Tutor

    Earned once your "Best Reply" award count is 100 or more.

  • laracasts-sensei Created with Sketch.

    Laracasts Sensei

    Earned once your experience points passes 1 million.

  • top-50 Created with Sketch.

    Top 50

    Earned once your experience points ranks in the top 50 of all Laracasts users.

  • Community Pillar

    Earned once your experience points ranks in the top 10 of all Laracasts users.

Level 4
17,180 XP
Jan
26
1 day ago
Activity icon

Started a new Conversation Axios Header For Authorization

I am usisng Nuxt i have create axios plugin and add in plugin in nuxt config

import { Auth } from "aws-amplify";
let aws;

Auth.currentSession()
  .then(data => {
    aws = data
    //console.log(aws.accessToken.jwtToken)
  })
//accessToken.jwtToken

export default function ({ $axios, app, store }){
  $axios.onRequest(config => {
    config.headers.common['Authorization'] = aws.accessToken.jwtToken
  })
}

But now when i start with signup api call its give me error of accessToken not found and my data not send to backend

I want in some api send null headers or not include my axios plugin how can i do this ?

Jan
24
3 days ago
Activity icon

Started a new Conversation In Api Response If Value Present In Json Remove Item From Dropdown

Wanted to remove some value from dropdown when user added successfully. i am calling one api for checking that parents in josn or not if parents array not empty i want to remove that value from dropdown and show rest

my code

<v-chip v-for="items in checkParents" :key="items.value" :value="items.value">{{ items.name }}</v-chip>

in computed

checkParents: function (){
        if (!_.isEmpty(this.familyTreeData.individualInfo.parents))
        {
          console.log(this.familyTreeData.individualInfo.parents)
          if (!_.isNull(this.familyTreeData.individualInfo.parents[0].gender === 'male')){
            return _.remove(this.items, function (n){
              let c =  n.name !== 'Father'
              return c;
            })
          }
        }else {
          return this.items
        }
    }

For example i have added father then wanted to remove father array that is on parents[0] position and my mother in parents[1] position or if i add Mother & father both want to remove both from dropdown

i am using Lodash

Jan
20
1 week ago
Activity icon

Started a new Conversation Vue @click Doesn't Work On An Anchor Tag With Href Present

Not able to run method from my vue page with a tag what is my mistake

<div id="bl-template">
      <a href="#" @click.prevent="abc"><i data-feather="settings"></i></a>
      <a href="http://google.com"><i data-feather="edit-2"></i></a>
      <a href="http://google.com"><i data-feather="message-circle"></i></a>
      <a href="http://google.com"><i data-feather="trash"></i></a>
    </div>

methods: {
    async checkRootUser(){
      await this.$store.dispatch("ownerTreeFind/getOwnerDetails");
    },
    async abc(){
      alert('hi')
    }
  }
Jan
15
1 week ago
Activity icon

Started a new Conversation Number To Date Conversation Javascript

I have a dropdown for select year after selecting year value type of is number but in my database required Date

How can i convert number to Date base on selected year ?

Jan
14
1 week ago
Activity icon

Started a new Conversation Date Masking Jquery For Full Date Or Year

Wanted to get Full Date or Year in Sigle input. in my vue project any one can tell me how to do this using data masking

Jan
12
2 weeks ago
Activity icon

Started a new Conversation D3 On Hover Show Id

Wanted to show id on hover of node but i am getting undefine any one tell me where i done wrong i am using d3 + vue

my code in d3

let tooltip = d3.select("body")
      .append("div")
      .style("position", "absolute")
      .style("z-index", "10")
      .style("visibility", "hidden");
      //.text("a simple tooltip");

    // external tree
    let externalTree = enter
      .filter( descendant => {
        // filter children with extrernal tree
        return _.has( descendant, 'data.data.externalTreeId' ) && !_.isNull(descendant.data.data.externalTreeId);
      })
      .append('a')
      //.attr('id', 'check')
      .attr('href', 'javascript:;')
      .classed('external-tree', true)
      .attr('data-id', descendant => {
        //let url = 'http://localhost:3000/user/';
        return `${descendant.data.id}`;
      })
      .on("mouseover", function (event,d){
        tooltip.transition()
          .duration(200)
          .style("opacity", .9);
        tooltip.text(descendant => {
          console.log('descendant',descendant);
          return `${descendant.data.id}`;
        })
          .style("left", (event.pageX) + 'px')
          .style("top", (event.pageY -28) + 'px');
      })
      .on("mouseout", function (d){
        tooltip.transition()
          .duration(500)
          .style("opacity", 0);
  });
Jan
08
2 weeks ago
Activity icon

Replied to Dynamic Background-color Chnage If Current Page === "family"

Thank you for ans but i m using nuxt js so how can i do ?

Activity icon

Started a new Conversation Dynamic Background-color Chnage If Current Page === "family"

Wanted to change background color if active page is family but my dynamic class not working

my code

<v-app :class="page === 'family' ? 'treeColor': ''">
</u-app>

in mounted
this.page = $nuxt.$route.name


<style>
.treeColor{
  background-color: #263238 !important;;
}
</style>
Dec
30
4 weeks ago
Activity icon

Started a new Conversation Vuex - Do Not Mutate Vuex Store State Outside Mutation Handlers

Getting error but not find where and why ?

vue page

<template>
  <div id="wrapper-bloodline">
    <file-loader v-if="isLoadComplete"></file-loader>
    <family-controllers></family-controllers>
  </div>
</template>

<script>
import fileLoader from "~/components/fileLoader.vue";
import familyControllers from "~/components/familyControllers.vue";
import { bloodline } from "../plugins/bloodline";
import { treeJson } from "../plugins/tree";
import { mapActions, mapState } from "vuex";
import { Auth } from "aws-amplify";
export default {
  name: "familyTree.vue",
  components: {
    fileLoader: fileLoader,
    familyControllers: familyControllers
  },
  data() {
    return {
      isLoadComplete: true,
      bloodlineObj: null,
      bloodlineTree: null,
      data: null,
      rootUser: null,
      userEmail: null,
      test: "",
      spouseId: null
    };
  },

  async mounted() {
    //this.rootUser = localStorage.getItem('rootUser')
    await this.getAuthUserCognito();
    //await this.getUserConformation()
    await this.personsDetails();
    await this.treeRecord();
    this.isLoadComplete = false;
    if (process.client) {
      $("a.external-tree").on("click", event => {
        let spouse = $(event.currentTarget);

        this.spouseId = spouse.attr("data-id");

        this.getTreeSpouse();
      });
    }
  },

  computed: {
    ...mapState({ familyTree: state => state.familyTree.tree })
  },

  methods: {
    ...mapActions({
      callTree: "familyTree/callTree"
    }),
    getTreeSpouse() {
      this.sendspouseId();
    },
    async sendspouseId() {
      const spouseId = this.spouseId;
      if (process.browser) {
        window.location.reload(true);
      }
      //console.log('hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh',spouseId)
      await this.$store.dispatch("familyTree/callTree", spouseId);
      //var lastname = sessionStorage.getItem("spouseId");
      //console.log('spouseId',lastname)
      // this.data = this.familyTree
      this.data = this.familyTree;

      //console.log(this.rootUser)

      // crate bloodline instance
      this.bloodlineObj = bloodline.init("wrapper-bloodline");

      // create tree
      this.bloodlineTree = this.bloodlineObj.render(this.data);
      // this.bloodlineTree = this.bloodlineObj.render(treeJson);

      if (process.browser) {
        $("a.action-edit").on("click", event => {
          // action link
          //let actionLink = $(event.currentTarget);
          // set dynamic input hidden value
          //$("input#active-node").val(actionLink.attr("data-id"));
          window.activenode = event.currentTarget.getAttribute('data-id');
          $nuxt.$emit('open-dialog-form')
          //$("#modal-bloodline-info").modal("show");
        });
      }
    },

    // async getTreeSpouse(){
    //   await this.$axios.$get( process.env.BASE_URL+'/user/' + this.spouseId, {timeout: 120000 })
    //   .then(resp => {
    //     this.data = resp
    //
    //     //console.log(this.rootUser)
    //
    //     // crate bloodline instance
    //     this.bloodlineObj = bloodline.init( 'wrapper-bloodline' );
    //
    //     // create tree
    //     this.bloodlineTree = this.bloodlineObj.render( this.data );
    //     //this.bloodlineTree = this.bloodlineObj.render( treeJson );
    //
    //     // if (process.browser){
    //     //   $('a.action-edit').on( 'click', (event) => {
    //     //
    //     //     // action link
    //     //     let actionLink = $(event.currentTarget);
    //     //     // set dynamic input hidden value
    //     //     $('input#active-node').val(actionLink.attr('data-id'));
    //     //
    //     //     $('#modal-bloodline-info').modal('show');
    //     //   });
    //     // }
    //   })
    // },
    getAuthUserCognito() {
      Auth.currentUserInfo().then(data => {
        this.userEmail = data.attributes.email;
        //console.log(data.attributes.email)
      });
    },

    async personsDetails() {
      await this.$store.dispatch("familyTree/callTree");
    },

    async treeRecord() {
      /////////////////////////////////////////////////
      //using email id search tree from backend and display tree of user
      ////////////////////////////////////////////////

      this.data = this.familyTree;

      //console.log(this.rootUser)

      // crate bloodline instance
      this.bloodlineObj = bloodline.init("wrapper-bloodline");

      // create tree
      this.bloodlineTree = this.bloodlineObj.render(this.data);
      //this.bloodlineTree = this.bloodlineObj.render(treeJson);

      if (process.browser) {
        $("a.action-edit").on("click", event => {
          // action link
          //let actionLink = $(event.currentTarget);
          // set dynamic input hidden value
          //$("input#active-node").val(actionLink.attr("data-id"));
          //$("#modal-bloodline-info").modal("show");
          window.activenode = event.currentTarget.getAttribute('data-id');
          $nuxt.$emit('open-dialog-form')
        });
      }
    }
  }
};
</script>

<style scoped>
svg {
  display: block;
  width: 258px;
  height: 258px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.tree {
  fill: #e73e0d;
}

.circle-mask {
  transform-origin: 50% 90%;
  animation: scale 5s infinite ease-out;
}

.preloader {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  width: 100%;
  background: rgb(255, 255, 255);
  opacity: 1;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  transition: opacity 0.3s linear;
}

@keyframes scale {
  0%,
  100% {
    transform: scale(0);
  }
  7%,
  90% {
    transform: scale(0.4);
  }
  50% {
    transform: scale(1);
  }
}
</style>

Store page js(vuex)

import { Auth } from "aws-amplify";
export const state = () => ({
  tree: null,
  owner: null
})

export const mutations = {
  SET(state, payload){
    state.tree = payload
  },
}

export const actions = {

  async callTree({ commit },spouseId){
   // const spid = sessionStorage.getItem("spouseId")
    //console.log(spouseId)
    if (spouseId !== undefined){
       sessionStorage.setItem("spouseId", spouseId)
    }
    //console.log('hf',sessionStorage.getItem("spouseId"))

    if (sessionStorage.getItem("spouseId")){
      const spid = sessionStorage.getItem("spouseId")
     // console.log('check if run firt',process.env.BASE_URL+'/user/' + spid)
      let spouseTree;
      await this.$axios.$get( process.env.BASE_URL+'/user/' + spid, {timeout: 120000 })
        .then(resp => {
          spouseTree = resp

          //this.data = resp

          //console.log(this.rootUser)

          // crate bloodline instance
          //this.bloodlineObj = bloodline.init( 'wrapper-bloodline' );

          // create tree
          //bloodlineTree = this.bloodlineObj.render( this.data );
          //this.bloodlineTree = this.bloodlineObj.render( treeJson );

          // if (process.browser){
          //   $('a.action-edit').on( 'click', (event) => {
          //
          //     // action link
          //     let actionLink = $(event.currentTarget);
          //     // set dynamic input hidden value
          //     $('input#active-node').val(actionLink.attr('data-id'));
          //
          //     $('#modal-bloodline-info').modal('show');
          //   });
          // }
        })
      commit('SET', spouseTree)
    }else {
      let email = ''
      let userid = ''
      await Auth.currentUserInfo()
        .then(data => {
          email = data.attributes.email
          //console.log('ggggggggggggggggggggggggggggggggggggggg',this.state.ownerTreeFind.data[0].id)
        })

      await this.$axios.$get( process.env.BASE_URL+'/owner/' + email, {timeout: 120000 })
        .then(resp => {
          //console.log('callresponce',resp[0]._id)
          userid = resp[0]._id

          if (userid !== undefined){
            sessionStorage.setItem("rootUser", userid)
          }
          //console.log(resp)
          // if (typeof resp !== 'undefined' && resp.length > 0){
          //   this.rootUser = resp[0]._id
          // }else {
          //   this.rootUser = ''
          // }

        })
      //let a = this.state.ownerTreeFind.data[0]
      //console.log('this.state.ownerTreeFind.data[0].Id',this.state.ownerTreeFind.data.)
      // let email = ''
      // await Auth.currentUserInfo()
      //   .then(data => {
      //     email = data.attributes.email
      //     //console.log('ggggggggggggggggggggggggggggggggggggggg',this.state.ownerTreeFind.data[0].id)
      //   })
      //commit('setUser', email)
      //console.log(email)
      // let a = dispatch('ownerTreeFind/getOwnerDetails',null, { root: true })
      //  console.log(a)
      let tree;
      await this.$axios.$get( process.env.BASE_URL+'/user/' + userid, {timeout: 120000 })
        .then(response => {
          //console.log('ddddddddddddddddddssssssssssssssssssssssss',response)
          tree = response
        })
      commit('SET', tree)
    }

    // if (spouseId === undefined){
    //
    // }else {
    //
    // }

  }
}
Dec
05
1 month ago
Activity icon

Replied to How To Pass Child Ref To Parent Vue

I am using Vue 2 Wanted to open Dialog box on click event in paraent.vue and set value to my hidden input that is coming from child

Hidden input is in parent.vue and value is send by child.vue

Activity icon

Started a new Conversation How To Pass Child Ref To Parent Vue

I have ref in my child.vue wanted to send to parent.vue how can i do ?

child.vue

<div class="text-center" data-app>
    <v-dialog
      v-model="dialog"
      width="500"
      ref="h"
    >
    </v-dialog>
  </div>

parent.vue

console.log('this.$refs.h)

Show me undefine

Dec
04
1 month ago
Activity icon

Started a new Conversation Emit Event Not Working

I wanted to set hidden input value before my emit get call but its not working i am using a Promise for resolve but its not working

$('a.action-edit').on( 'click',  (event) => {
          let prms = new Promise((resolve, reject) => {
            // // action link
            let actionLink = $(event.currentTarget);
            // // set dynamic input hidden value
            //let c = $('input#active-node').val(actionLink.attr('data-id'));

            let x = $nuxt.$emit('open-relation-form', $('input#active-node').val(actionLink.attr('data-id')), resolve, reject )
            console.log(x)
          })
          prms.then((res) => {
            console.log(res)
          })

But i am not able to get value in hidden filed

Dec
03
1 month ago
Activity icon

Started a new Conversation Emit Is Not A Function

I have create event bus for open my form within two component but on closeting the form i am getting error

_vm.$nuxt.$emit.$off is not a function

code page.vue

created() {
    this.$nuxt.$on('open-relation-form', () => {
      this.dialog = true
    })

action.vue

<v-btn
          color="blue darken-1"
          text
          @click="$nuxt.$emit.$off('open-contact-form')"
        >
          Save
        </v-btn>

In Script 

if (process.browser){
        $('a.action-edit').on( 'click', (event) => {

         
          let actionLink = $(event.currentTarget);
          
          this.dialog = true
          $('input#active-node').val(actionLink.attr('data-id'));
          $nuxt.$emit('open-relation-form')
         

        });
      }
Dec
02
1 month ago
Activity icon

Started a new Conversation Vuetify Dialogs Set To Hide / Show

I have nuxt project in that i required v-dialog to complete user registration but my form is coming from parent component "Familform.vue"

<template>
<!--  <div class="modal fade" id="modal-bloodline-info" tabindex="-1" aria-labelledby="modal-add-person" aria-hidden="true">-->
<!--    <div class="modal-dialog">-->
<!--      <div class="modal-content">-->
<!--        <div class="modal-header">-->
<!--          <h5 class="modal-title" id="modal-add-person">Add Person</h5>-->
<!--          <button type="button" class="close" data-dismiss="modal" aria-label="Close">-->
<!--            <span aria-hidden="true">&times;</span>-->
<!--          </button>-->
<!--        </div>-->
<!--        <div class="modal-body">-->
<!--          <ancestor-descendant-form></ancestor-descendant-form>-->
<!--        </div>-->
<!--      </div>-->
<!--    </div>-->
<!--  </div>-->

  <div>
    <v-dialog
      v-model="dialog"
      width="500"
      id = 'bloodlineForm'
    >
      <ancestor-descendant-form></ancestor-descendant-form>
    </v-dialog>
  </div>
</template>

<script>
import ancestorDescendantForm from "~/components/ancestorDescendantForm.vue";

export default {
name: "familyForm.vue",
  components: {
    'ancestorDescendantForm': ancestorDescendantForm
  },

  data(){
    return{
      dialog: false
    }
  }
}
</script>

<style scoped>

</style>

and wanted to open my v-dialog on action-edit on click event that is in "familyTree.vue" (child component)

<template>
  <div id="wrapper-bloodline">
    <file-loader v-if='isLoadComplete'></file-loader>
    <family-controllers></family-controllers>
  </div>
</template>

<script>
import fileLoader from "~/components/fileLoader.vue"
import familyControllers from "~/components/familyControllers.vue";
import { bloodline } from '../plugins/bloodline';
import { treeJson } from '../plugins/tree';
import {mapActions, mapState} from 'vuex'
import { Auth } from "aws-amplify";
export default {
  name: "familyTree.vue",
  components: {
    'fileLoader': fileLoader,
    'familyControllers': familyControllers
  },
  data () {
    return {
      isLoadComplete: true,
      bloodlineObj: null,
      bloodlineTree: null,
      data: null,
      rootUser: null,
      userEmail: null,
      test: '',
      spouseId: null,
    }
  },

  async mounted () {

    //this.rootUser = localStorage.getItem('rootUser')
    await this.getAuthUserCognito()
    //await this.getUserConformation()
    await this.personsDetails()
    await this.treeRecord()
    this.isLoadComplete = false
    if (process.client){
      $("a.external-tree").on("click", (event) => {

        let spouse = $(event.currentTarget);

        this.spouseId = spouse.attr('data-id');

        this.getTreeSpouse();
      });
    }

  },

  computed: {
    ...mapState({ familyTree: (state) => state.familyTree.tree  })
  },

  methods:{
    ...mapActions({
      callTree: 'familyTree/callTree'
    }),
     getTreeSpouse(){
       this.sendspouseId()
    },
    async sendspouseId(){
      const spouseId = this.spouseId
      if (process.browser) {
        window.location.reload(true)
      }
      //console.log('hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh',spouseId)
      await this.$store.dispatch('familyTree/callTree', spouseId)
      //var lastname = sessionStorage.getItem("spouseId");
      //console.log('spouseId',lastname)
      this.data = this.familyTree

      //console.log(this.rootUser)

      // crate bloodline instance
      this.bloodlineObj = bloodline.init( 'wrapper-bloodline' );

      // create tree
      this.bloodlineTree = this.bloodlineObj.render( this.data );
      //this.bloodlineTree = this.bloodlineObj.render( treeJson );


      // if (process.browser){
      //       $('a.action-edit').on( 'click', (event) => {
      //
      //         // action link
      //         let actionLink = $(event.currentTarget);
      //         // set dynamic input hidden value
      //         $('input#active-node').val(actionLink.attr('data-id'));
      //
      //         $('#modal-bloodline-info').modal('show');
      //       });
      //     }
    },

    // async getTreeSpouse(){
    //   await this.$axios.$get( process.env.BASE_URL+'/user/' + this.spouseId, {timeout: 120000 })
    //   .then(resp => {
    //     this.data = resp
    //
    //     //console.log(this.rootUser)
    //
    //     // crate bloodline instance
    //     this.bloodlineObj = bloodline.init( 'wrapper-bloodline' );
    //
    //     // create tree
    //     this.bloodlineTree = this.bloodlineObj.render( this.data );
    //     //this.bloodlineTree = this.bloodlineObj.render( treeJson );
    //
    //     // if (process.browser){
    //     //   $('a.action-edit').on( 'click', (event) => {
    //     //
    //     //     // action link
    //     //     let actionLink = $(event.currentTarget);
    //     //     // set dynamic input hidden value
    //     //     $('input#active-node').val(actionLink.attr('data-id'));
    //     //
    //     //     $('#modal-bloodline-info').modal('show');
    //     //   });
    //     // }
    //   })
    // },
    getAuthUserCognito(){
      Auth.currentUserInfo()
        .then(data => {
          this.userEmail = data.attributes.email
          //console.log(data.attributes.email)
        })
    },

    async personsDetails() {
      await this.$store.dispatch('familyTree/callTree')
    },

    async treeRecord(){
      /////////////////////////////////////////////////
      //using email id search tree from backend and display tree of user
      ////////////////////////////////////////////////

      this.data = this.familyTree

      //console.log(this.rootUser)

      // crate bloodline instance
      this.bloodlineObj = bloodline.init( 'wrapper-bloodline' );

      // create tree
      this.bloodlineTree = this.bloodlineObj.render( this.data );
      //this.bloodlineTree = this.bloodlineObj.render( treeJson );

      if (process.browser){
        $('a.action-edit').on( 'click', (event) => {

          // action link
          let actionLink = $(event.currentTarget);
          // set dynamic input hidden value
          this.dialog = true
          $('input#active-node').val(actionLink.attr('data-id'));
          //$('#bloodlineForm').attr.on = true
          //console.log('jkk',$('#bloodlineForm').click.stop = "dialog = true")
          //$('#bloodlineForm').click.stop = "dialog = true"
          $('#bloodlineForm').stop = "dialog = true"
          //$('#modal-bloodline-info').modal('show');

        });
      }
    },

  }

}
</script>

<style scoped>
svg {
  display:block;
  width:258px;
  height:258px;
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
}

.tree {
  fill: #E73E0D;
}

.circle-mask {
  transform-origin: 50% 90%;
  animation: scale 5s infinite ease-out;
}

.preloader {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  width: 100%;
  background: rgb(255,255,255);
  opacity: 1;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  transition: opacity 0.3s linear;
}

@keyframes scale {
  0%, 100% {
    transform: scale(0.0);
  }
  7%, 90% {
    transform: scale(0.4);
  }
  50% {
    transform: scale(1);
  }
}
</style>

and close v-dialog after user fill the form in ancestor.vue that contain my form

<template>
  <!-- ------------------------------------
         - element : modal
         ------------------------------------ -->

  <div>
    <v-card>
      <v-card-title class="headline grey lighten-2">
        Privacy Policy
      </v-card-title>

      <v-card-text>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      </v-card-text>

      <v-divider></v-divider>

      <v-card-actions>
        <v-spacer></v-spacer>
        <v-btn
          color="primary"
          text
          @click="dialog = false"
        >
          I accept
        </v-btn>
      </v-card-actions>
    </v-card>
<!--    <form method="POST" action="/family" @submit.prevent="onSubmit">-->
<!--      <input type="hidden" class="form-control" placeholder="First name" id="active-node" name="demo">-->
<!--      <div class="form-group">-->
<!--        &lt;!&ndash; <label for="first_name">First Name</label> &ndash;&gt;-->
<!--        <input-->
<!--          type="text"-->
<!--          class="form-control"-->
<!--          placeholder="First name"-->
<!--          id="first_name"-->
<!--          name="first_name"-->
<!--          v-model="UserData.name"-->
<!--        />-->
<!--        &lt;!&ndash; <small id="emailHelp" class="form-text text-muted">First Name</small> &ndash;&gt;-->
<!--      </div>-->
<!--      <div class="form-group">-->
<!--        &lt;!&ndash; <label for="surname">Sir Name</label> sir name speeling mistake &ndash;&gt;-->
<!--        <input-->
<!--          type="text"-->
<!--          class="form-control"-->
<!--          placeholder="surname"-->
<!--          id="surname"-->
<!--          name="surname"-->
<!--          v-model="UserData.surname"-->
<!--        />-->
<!--        &lt;!&ndash; <small id="d" class="form-text text-muted">Last Name</small> &ndash;&gt;-->
<!--      </div>-->
<!--      <div class="form-group">-->
<!--        &lt;!&ndash; <label for="birthDate">Date of Birth</label>-->
<!--        indian format pending-->
<!--        &ndash;&gt;-->
<!--        <input-->
<!--          type="date"-->
<!--          class="form-control"-->
<!--          placeholder="birthDate"-->
<!--          id="birthDate"-->
<!--          name="birthDate"-->
<!--          v-model="UserData.birthDate"-->
<!--        />-->

<!--        &lt;!&ndash; <small id="c" class="form-text text-muted">Birth Date</small> &ndash;&gt;-->
<!--      </div>-->
<!--      <div class="form-group">-->
<!--        &lt;!&ndash; <label for="gender">Add</label> &ndash;&gt;-->
<!--        <select class="form-control" id="relationship" name="relationship" v-model="relationship">-->
<!--          &lt;!&ndash; <select-->
<!--          class="form-control"-->
<!--          id="gender"-->
<!--          name="gender"-->
<!--          v-model="UserData.gender"-->
<!--        > &ndash;&gt;-->
<!--          <option value="select" disabled>Select Relation</option>-->
<!--          <option value="father">Father</option>-->
<!--          <option value="mother">Mother</option>-->
<!--          <option value="wife">Wife</option>-->
<!--          <option value="husband">Husband</option>-->
<!--          <option value="son">Son</option>-->
<!--          <option value="daughter">Daughter</option>-->
<!--        </select>-->
<!--      </div>-->
<!--      <button type="submit" class="btn btn-primary">Submit</button>-->
<!--    </form>-->
  </div>

</template>

<script>
import {mapState} from "vuex";

export default {
  name: "form.vue",
  data() {
    return {
      loading: false,
      rootUser: '',
      id: '',
      UserData: {
        name: '',
        surname: '',
        gender: '',
        birthDate: '',
      },
      relationship: '',
      isSubmitted: false,
      errors: [],
    }

  },
  async mounted() {
    //this.rootUser = localStorage.getItem('rootUser')
    await this.personsDetails()
    if (sessionStorage.getItem("rootUser")){
      this.rootUser = await sessionStorage.getItem("rootUser")
      console.log('A')
    }else {
      this.rootUser = this.familyTree
      console.log('B')
    }
    //this.rootUser = await sessionStorage.getItem("rootUser")
    console.log('rootUser',sessionStorage.getItem("rootUser"))


    //console.log(this.rootUser === localStorage.getItem('rootUser'))
  },
  computed: {
    ...mapState({ familyTree: (state) => state.familyTree.tree.id  }),
  },

  methods:{
    async personsDetails() {
      await this.$store.dispatch('familyTree/callTree')
    },

    async onSubmit(){

      // nullify previously set id
      this.id = null;

      this.isSubmitted = true;
      this.loading = true;
      // ------------------------------------
      //   - Must store data in const variable so
      //     its conevrt in object in object
      //   ------------------------------------ -->

      if (
        this.relationship === 'father'
        || this.relationship === 'husband'
        || this.relationship === 'son'){

        this.UserData.gender = 'male';

      } else {

        this.UserData.gender = 'female';

      }

      if (
        this.relationship === 'husband'
        || this.relationship === 'wife' ){

        var user = {
          name: this.UserData.name,
          lastname: this.UserData.surname,
          gender: this.UserData.gender,
          dob: this.UserData.birthDate,
          externalTreeId: 'demoId'
        }

      } else {

        var user = {
          name: this.UserData.name,
          lastname: this.UserData.surname,
          gender: this.UserData.gender,
          dob: this.UserData.birthDate
        }

      }

      // ------------------------------------
      //   - Insert in Relationship
      //   - Member id + relationship + rootId
      //   - body add user { name, surname, gender, birthday }
      //   - gender render on if check depend on relationship
      //   ------------------------------------ -->

      let postUrlPromise = new Promise((resolve, reject) => {

        let hiddenInput = document.querySelector('#active-node');

        // set the id
        let activeNodeId = hiddenInput.getAttribute('value');

        // resolve
        if( activeNodeId ) resolve( `${process.env.BASE_URL}/member/${activeNodeId}/${this.relationship}/${this.rootUser}` );

      });

      // create post url
      let postUrl = await postUrlPromise;
      console.log(postUrl)
      // console.log( `${process.env.BASE_URL}/member/${this.id}/${this.relationship}/${this.rootUser}` );
      await this.$axios.$post( postUrl, user, {timeout: 120000 })
        .then( response => {

          this.errors = [];
          this.UserData.name = ''
          this.UserData.surname= ''
          this.UserData.gender = ''
          this.UserData.birthDate = ''

          $('#modal-bloodline-info').modal('hide');

          if (process.browser) {
            window.location.reload(true)
          }

          console.log('Working')

        })
        .catch((error) => {

          this.errors = error.response.data.errors;
          console.log('somthing went wrong');

          if (error.response.status === 400 ){
            console.log(this.errors)
          }

        });

    },

  }
}
</script>

<style scoped>

</style>

But i am not able to open this form on child (FamilyTree.vue) component any one tell me where i miss?

Dec
01
1 month ago
Activity icon

Started a new Conversation Gauges Plugin Using Javascript

I need gauges plugin JavaScript, CSS, html 5 anyone know any example

Just like https://www.speedtest.net/ circle plugin

Activity icon

Started a new Conversation Axios Header Set Globally On Nuxt

How can i set my header globally to access header on each call of axios ?

Nov
25
2 months ago
Activity icon

Started a new Conversation Nuxt.js Store, Dispatch Action To Other Store

How can i send my owner record to other store file {tree}

store/owner.js

import { Auth } from "aws-amplify";
export const state = () => ({
  data: []
})

export const mutations = {
  SET(state, owner){
    state.data = owner
    console.log('dadaaaa',this.data)
  }
}

export const actions = {
  async getOwnerDetails({ commit,dispatch }){
    let email = ''
    let owner = ''
    await Auth.currentUserInfo()
      .then(data => {
        email = data.attributes.email
      })

    await this.$axios.$get( process.env.BASE_URL+'/owner/' + email, {timeout: 120000 })
      .then(resp => {
        console.log(resp)
        owner = resp
        dispatch('familyTree/callTree',owner,{ root: true })
        //console.log(resp)
        // if (typeof resp !== 'undefined' && resp.length > 0){
        //   this.rootUser = resp[0]._id
        // }else {
        //   this.rootUser = ''
        // }

      })
    commit('SET', owner)
  }
}

tree.js

import store from './auth';
import * as auth from "@/store/auth";
import { Auth } from "aws-amplify";
export const state = () => ({
  tree: null,
  owner: null
})

export const mutations = {
  SET(state, payload){
    state.tree = payload
  },
  SETOwner(state, payload){
    state.owner = payload
  },
}

export const actions = {

  async callTree({ commit,dispatch }){
    let email = ''
    await Auth.currentUserInfo()
      .then(data => {
        email = data.attributes.email

      })
    //commit('setUser', email)
    //console.log(email)
    // let a = dispatch('ownerTreeFind/getOwnerDetails',null, { root: true })
    //  console.log(a)
    let tree;
    await this.$axios.$get( process.env.BASE_URL+'/user/' + email, {timeout: 120000 })
      .then(response => {
        //console.log(response)
        tree = response
      })
    commit('SET', tree)
  }
}

Wanted to send owner state to tree state how can i do this?

Nov
20
2 months ago
Activity icon

Started a new Conversation Why Does A Reload Return An Empty State In Nuxt

When i refresh page in nuxt application all state are get null any one what is the issue

store file

index.js

export const state = () => ({
    data: []
})

//payload hold all form details,
//coming from home.vue
//use spread operator to access all form details

export const mutations = {
  SET(state, data) {
    state.data = data
  }
}

export const actions = {
  async addRootUser({commit}, user){

    await this.$axios.$post( 'http://localhost:3001/owner',user ,{ header: {
        'content-type': 'application/x-www-form-urlencoded'
      } })
      .then(response => {
        console.log('hjfhjfh',response)
        this.$router.push("/family");
        //state.rootUsers = response
        commit('SET', response)
        if(process.browser){
          localStorage.setItem("rootUser", response._id);
          console.log('Set')
        }
        return response
      }).catch((error) => {
        console.log(error.response)
        //this.errors = error.response.data.errors;
        console.log('somthing went wrong.................')
      })
  }
}
Nov
17
2 months ago
Activity icon

Started a new Conversation 'isAuthenticated' Of Undefined Nuxt

Wanted to try if user Authenticated then only home page can be displayed but i am getting error Cannot read property 'isAuthenticated' of undefined

i have nuxt project and i have set one middleware to check the isAuthenticated

export default function ({ $auth }) {
  if ($auth.isAuthenticated === false) {
    return this.$router.push('/')
  }
}

i have store that state in auth.js

mport { Auth } from 'aws-amplify'

export const state = () => ({
  isAuthenticated: false,
  user: null,
  owner: null
})

how to access state that is store on different store file in nuxt to middleware

Nov
14
2 months ago
Activity icon

Started a new Conversation Authentication Forgot Password Submit Amplify-js

What is the expected response? Auth.forgotPassword() is sending the email with the code. I can update my password and login with my new password, but there's no response. Is this a bug?

methods: {
    // Send confirmation code to user's email
    validate () {
      //this.dialog = true
      Auth.forgotPassword(this.username)
        .then(data => this.dialog = true)
        .catch(err => console.log(err));
    },

    resetPassword(){
      // Collect confirmation code and new password, then
      console.log(this.username)
      console.log(this.code)
      console.log(this.new_password)
      Auth.forgotPasswordSubmit(this.username, this.code, this.new_password)
        .then(data => console.log(data))
        .catch(err => console.log(err));
    }
  },

my response

2019-03-20 07:57:24.005 { CodeDeliveryDetails: { AttributeName: 'email', DeliveryMedium: 'EMAIL', Destination: 't***@m***.com' } } 2019-03-20 07:57:52.905 forgot password submit: undefined 2019-03-20 07:57:52.907 undefined

Nov
13
2 months ago
Activity icon

Started a new Conversation Aws Amplify Reset Password Vue

Any one have working example for aws amplify reset password

Nov
11
2 months ago
Activity icon

Replied to Scale PDF To Fit IFrame

Wanted to create using Iframe no external plugin

Activity icon

Started a new Conversation Scale PDF To Fit IFrame

Wanted to show pdf in iframe

but responsive with iframe pdf with different screen size and browser

any one know hot create with css or vanilla JavaScript?

Nov
08
2 months ago
Activity icon

Started a new Conversation Axios Post Error

wanted to post data to my backend in following format with body

/member/:_id/:relation/:owner_id

my axios call

await this.$axios.$post( 'http://localhost:3001/member/' + this.id, + this.relationship, + this.rootUser, user,{timeout: 120000 })
        .then(response => {
            this.errors = [];
          this.$router.push("/family");
            console.log('Working')
        }).catch((error) => {
          this.errors = error.response.data.errors;
          console.log('somthing went wrong')
          if (error.response.status === 400 ){
            console.log(this.errors)
          }

        })

but its not working any one tell me where i miss

Nov
06
2 months ago
Activity icon

Started a new Conversation JQuery Is Not Defined Nuxt

I am using nuxt + D3 wanted to add bootstrap in d3 but i am getting error of jQuery is not defined

my d3 code

'use strict';

// -----------------------------------------
// -- jquery
// -----------------------------------------
  import $ from "jquery";
//  window.jQuery = $;

// // -----------------------------------------
// // -- bootstrap
// // -----------------------------------------
// import 'bootstrap';


// -----------------------------------------
// -- lodash
// -----------------------------------------
import _ from "lodash";

// -----------------------------------------
// -- d3
// -----------------------------------------
import * as d3 from "d3";


// -----------------------------------------
// -- bloodline
// -----------------------------------------

package .json

{
  "name": "kutumbh",
  "version": "1.0.0",
  "private": true,
  "scripts": {
    "dev": "nuxt",
    "build": "nuxt build",
    "start": "nuxt start",
    "generate": "nuxt generate"
  },
  "dependencies": {
    "@nuxtjs/axios": "^5.12.2",
    "aws-amplify": "^3.3.4",
    "aws-amplify-vue": "^2.1.2",
    "bootstrap": "^4.5.2",
    "core-js": "^3.6.5",
    "d3": "^6.2.0",
    "feather-icons": "^4.28.0",
    "jquery": "^3.5.1",
    "lodash": "^4.17.20",
    "nuxt": "^2.14.6",
    "nuxt-storage": "^1.2.2",
    "popper.js": "^1.16.1",
    "uuid": "^8.3.1",
    "vue": "^2.6.12",
    "vuetify": "^2.3.14",
    "vuex": "^3.5.1"
  },
  "devDependencies": {
    "@mdi/font": "^5.7.55",
    "@nuxt/types": "~2.14.0"
  }
}

any one know what to do

Nov
01
2 months ago
Activity icon

Started a new Conversation How To Assign Input Value To V-model

I am getting input value from d3.js in input value i wanted to assign that value to my v-model how can i do this ?

d3.js

console.log(d3.select(this).attr('data-id'));
        let id = d3.select(this).attr('data-id');
        $('#modal-bloodline').modal('show');
        let body = d3.select('#id')
          body.append('input')
            .attr('value', id)
            .attr('id', 'id')

my vue code

<div class="form-group">
        <label for="first_name">First Name</label>
        <input type="hidden" class="form-control" placeholder="First name" id="id" name="id"  v-model="id">
      </div>

My form get updated on click function and then i will get following value

<input value="5f9d6c7907b0af001ab5d0bb" id="id">
Oct
31
2 months ago
Activity icon

Started a new Conversation How To Send Id With Modal In Javascript

I wanted to send id with my modal how can i send

my modal is call only on click function

my code

in my code i am getting id in console but not able to send with modal

any one know how to send ?

.on( 'click', function () {
        console.log(d3.select(this).attr('data-id'));
        //let id = d3.select(this).attr('data-id');
        $('#modal-bloodline').modal('show');
        //$('#modalAddPerson').modal('show');
      });
Oct
30
2 months ago
Activity icon

Started a new Conversation Nuxt Getting Error Unexpected Token

Try to add mapMutations in home.vue from Store/tree.js but giving me an error Unexpected token on following code

methods: {
    mapMutations(
      {'header': ['setDates'] },
    ),
    onSubmit(){
      const user = {
        name: this.UserData.name,
        lastname: this.UserData.surname,
        gender: this.UserData.gender,
        dob: this.UserData.birthDate
      }
      this.addRootUser(user)
    },
  }

Store/ tree.js

export const state = () => ({
  rootUsers: []
})

//payload hold all form details,
//coming from home.vue
//use spread operator to access all form details

export const mutations = {
  async addRootUser(state, payload){
    let user = {
        ...payload
    }
    await this.$axios.$post( 'http://localhost:3001/owner',user ,{ header: {
        'content-type': 'application/x-www-form-urlencoded'
      } })
      .then(response => {
        state.rootUsers.push(response)
        console.log(response._id)
      }).catch((error) => {
        console.log(error.response)
        this.errors = error.response.data.errors;
        console.log('somthing went wrong')
      })
  }
}
Oct
29
2 months ago
Activity icon

Started a new Conversation Simple CRUD Operation Using Nuxt

Any one know any project or example for CRUD operation using Nuxt / Store

Oct
28
2 months ago
Activity icon

Replied to Submit Data Post Axios Using Specific Format

with this way

const user = {
          data:{
            name: this.UserData.name,
            lastname: this.UserData.surname,
            gender: this.UserData.gender,
            dob: this.UserData.birthDate
          }
      }

What will be the query in axios for post ?

Activity icon

Replied to Submit Data Post Axios Using Specific Format

yes i get all data but in database i use mangoDB so its give me 400 error wanted to know how to send JSON / Obj using axios

axios post request with json data

like this {"data":{"name":"cvc","lastname":"cv","gender":"Male","dob":"2020-10-27"}}

Activity icon

Replied to Submit Data Post Axios Using Specific Format

Anybody have any idea ?

Oct
27
3 months ago
Activity icon

Started a new Conversation Submit Data Post Axios Using Specific Format

wanted to post data using following format in mongoDB

{"_data":{"name":"cvc","lastname":"cv","gender":"Male","dob":"2020-10-27"}}

but when i post data its give me 400 error

vue file

 methods: {
    async onSubmit(){
      this.isSubmitted = true;
      this.loading = true;

      // ------------------------------------
      //   - Must store data in const variable so
      //     its conevrt in object in object
      //   ------------------------------------ -->

      const user = {
          _data:{
            name: this.UserData.name,
            lastname: this.UserData.surname,
            gender: this.UserData.gender,
            dob: this.UserData.birthDate
          }
      }

      // ------------------------------------
      //   - Insert in Owner API
      //   ------------------------------------ -->
      console.log(user)
      await this.$axios.$post( 'http://localhost:8000/owner',user,{timeout: 120000 })
        .then(response => {
          this.errors = [];
          this.snackbar = true;
          console.log(response)
        }).catch((error) => {
          console.log(error.response)
          this.errors = error.response.data.errors;
          console.log('somthing went wrong')
          if (error.response.status === 400 ){
            console.log(this.errors)
          }
        })
    },
Oct
23
3 months ago
Activity icon

Replied to Axios Show Status False

My backend code is in node js

exports.create = async (req, res) => {
  try {

    const response = await user.create(req.body)
    console.log('hi', response);
    if (response) {
      res.status(201).send(response)
      console.log(response)
    }
  } catch (e) {
    res.status(400).send(e)
  }
}
Activity icon

Replied to Axios Show Status False

i thing i am not getting status code from backend if it is backend issue how can i pass status from backend ?

{parents: Array(0), children: Array(0), spouses: Array(0), _id: "5f92d6e9a5ecbe28e8efe98d", name: "charli", …}
children: []
dob: "2020-11-11T00:00:00.000Z"
gender: "Male"
lastname: "angle"
name: "charli"
parents: []
spouses: []
__v: 0
_id: "5f92d6e9a5ecbe28e8efe98d"
__proto__: Object
Activity icon

Replied to Axios Show Status False

No any guideline?

Activity icon

Replied to Axios Show Status False

its show me undefined in console log

Activity icon

Replied to Axios Show Status False

This is updated code but even 200 or 201 both show false in console and error not get removed

this.$axios.$post( 'http://localhost:8000/user',user,{timeout: 120000 })
          .then(response => {
            console.log(response.status === 201)
            if (response.status === 201 ){
              this.errors = [];
              console.log('Working')
            }
          }).catch((error) => {
            this.errors = error.response.data.errors;
            console.log('somthing went wrong')
            console.log(this.errors)
          })
Activity icon

Started a new Conversation Axios Show Status False

Insert data in database successfully but axios response.status === 201 show false Network tab also show 201 status

any one know what i miss my code

onSubmit(){
      this.isSubmitted = true;
      this.loading = true;

    
      const user = {
        name: this.UserData.name,
        lastname: this.UserData.surname,
        gender: this.UserData.gender,
        dob: this.UserData.birthDate
      }

      //console.log(user)

      this.$axios.$post( 'http://localhost:8000/user',user,{timeout: 120000 })
          .then(response => {
            console.log(response.status === 200) // this show false but my data inserted in database
            if (response.status === 200 ){
              this.errors = [];
              console.log('Working')
            }
          }).catch((error) => {
            this.errors = error.response.data.errors;
            console.log('somthing went wrong')
            console.log(this.errors)
          })

    }
Activity icon

Started a new Conversation Vue + Axios Post Data Get Error FormData Is Not A Constructor

Code

methods:{
    onSubmit(){
      this.isSubmitted = true;
      this.loading = true;
      const formData = new formData();
      formData.append( 'living', this.living );
      formData.append( 'prefix', this.prefix);
      formData.append( 'first_name', this.first_name );
      formData.append( 'surname', this.surname );
      formData.append( 'suffix', this.suffix );
      formData.append( 'gender', this.gender );
      formData.append( 'birthDate', this.birthDate );
      formData.append( 'placeOfBirth', this.placeOfBirth );
      formData.append( 'additionalInfo', this.additionalInfo );

      console.log(formData);
      // this.$axios.$post( '/family', formData , {timeout: 120000 })
      //     .then(response => {
      //
      //     })

    }
  }

Any one know what is error

Oct
20
3 months ago
Activity icon

Started a new Conversation Facebook Sign In For Web Applications With AWS Amplify Vue CLI

How to add facbook And google sign in using Aws Amplify with Vue cli

Activity icon

Replied to Aws Amplify Facebook/ Google Login In Vuejs

Thank you for replay but i need Vue CLI code

is this can i use on Vue CLI?

Activity icon

Started a new Conversation Aws Amplify Facebook/ Google Login In Vuejs

Any one know any tutorial for Socal login using AWS amplify

if any one have please share links

Oct
16
3 months ago
Activity icon

Started a new Conversation How To Send JWT Key From Cognito To Heders

I want to send JWT Token from header but i am not able to do it i am using Vuex and Nuxt in login i can get all all data but not able to send in vuex store and heder

login.vue

async login() {
      try {
        await this.$store.dispatch('auth/login', this.form)
        nuxtStorage.localStorage.setData('email', this.form.email)
        console.log('userrr', this.$auth.user.attributes.email)
        if (this.$auth.user.challengeName === 'NEW_PASSWORD_REQUIRED') {
          this.$router.push('/register')
        } else {
          this.$router.push('/home')
        }
      } catch (error) {
        this.overlay = true
        this.error = error.message
        console.log(error.message)
      }
    },

i am getting user details from cognito but not able to dispatch in store/file.js and in heeder

Activity icon

Started a new Conversation How To Set Cognito JWT Token For In Header Using Vuex

I have create cognito login and wanted to store JWT token in header using Vuex in nuxt any one guide me how to do this

i have file.js in storage but not able to get JWT token in file.js but my Token is coming under local vue file but not in central storage

login.vue

async login() {
      try {
        await this.$store.dispatch('auth/login', this.form)
        nuxtStorage.localStorage.setData('email', this.form.email)
        console.log('userrr', this.$auth.user.attributes.email)
        if (this.$auth.user.challengeName === 'NEW_PASSWORD_REQUIRED') {
          this.$router.push('/register')
        } else {
          this.$router.push('/home')
        }
      } catch (error) {
        this.overlay = true
        this.error = error.message
        console.log(error.message)
      }
    },

i am getting user details from cognito but not able to dispatch in store/file.js

Oct
15
3 months ago
Activity icon

Replied to Eloquent. Infinite Children Into Usable Array And Render It To Nested Ul

In user model

<?php

namespace App;

use Illuminate\Contracts\Auth\MustVerifyEmail;
use Illuminate\Foundation\Auth\User as Authenticatable;
use Illuminate\Notifications\Notifiable;

class User extends Authenticatable
{
    use Notifiable;

    /**
     * The attributes that are mass assignable.
     *
     * @var array
     */
    protected $fillable = [
        'name', 'email', 'password',
    ];

    /**
     * The attributes that should be hidden for arrays.
     *
     * @var array
     */
    protected $hidden = [
        'password', 'remember_token',
    ];

    /**
     * The attributes that should be cast to native types.
     *
     * @var array
     */
    protected $casts = [
        'email_verified_at' => 'datetime',
    ];

    public function person()
    {
        return $this->hasMany('App\Person');
    }
}

Person model

<?php

namespace App;

use Illuminate\Database\Eloquent\Model;

class Person extends Model
{
    public function user()
    {
        return $this->belongsTo('App\User');
    }
}
Activity icon

Started a new Conversation Eloquent. Infinite Children Into Usable Array And Render It To Nested Ul

I have User table and Person table they are connected to each other with hasMany relationship wanted to display infinite children

and want to show stating of parent_id = 0 witch is come from User Table

example:

{
   "id":"root0",
   "target":"_self",
   "generation":0,
   "data":null,
   "children":[
      {
         "id":"g501",
         "target":"_self",
         "generation":50,
         "data":{
            "name":"Karamchand Gandhi",
            "gender":"male",
            "placeOfBirth":"india",
            "dob":"01-01-1870",
            "dod":"01-01-1940",
            "fatherId":null,
            "motherId":null,
            "spouse":[
               "g502"
            ]
         },
         "children":[
            {
               "id":"g511",
               "target":"_self",
               "generation":51,
               "data":{
                  "name":"Mohandas Gandhi",
                  "gender":"male",
                  "placeOfBirth":"india",
                  "dob":"01-01-1870",
                  "dod":"01-01-1940",
                  "fatherId":"g501",
                  "motherId":"g502",
                  "spouse":[
                     "g512"
                  ]
               },
               "children":[
                  {
                     "id":"g521",
                     "target":"_self",
                     "generation":52,
                     "data":{
                        "name":"Hiralal Gandhi",
                        "gender":"male",
                        "placeOfBirth":"india",
                        "dob":"01-01-1870",
                        "dod":"01-01-1940",
                        "fatherId":"g511",
                        "motherId":"g512",
                        "spouse":[
                           
                        ]
                     }
                  },
                  {
                     "id":"g521",
                     "target":"_self",
                     "generation":52,
                     "data":{
                        "name":"Manilal Gandhi",
                        "gender":"male",
                        "placeOfBirth":"india",
                        "dob":"01-01-1870",
                        "dod":"01-01-1940",
                        "fatherId":"g511",
                        "motherId":"g512",
                        "spouse":[
                           
                        ]
                     }
                  }
               ]
            },
            {
               "id":"g512",
               "target":"_blank",
               "generation":51,
               "data":{
                  "name":"Kasturba Gandhi",
                  "gender":"female",
                  "placeOfBirth":"india",
                  "dob":"01-01-1870",
                  "dod":"01-01-1940",
                  "fatherId":null,
                  "motherId":null,
                  "spouse":[
                     "g511"
                  ]
               }
            }
         ]
      },
      {
         "id":"g502",
         "target":"_self",
         "generation":50,
         "data":{
            "name":"Putlibai Gandhi",
            "gender":"female",
            "placeOfBirth":"india",
            "dob":"01-01-1870",
            "dod":"01-01-1940",
            "fatherId":null,
            "motherId":null,
            "spouse":[
               "g501"
            ]
         }
      }
   ]
}
Activity icon

Started a new Conversation Json Create Issue

I wanted to try to generate following json but getting different JSON any one tell me where i done mistake in my code ?

Actual JSON

{
	"id": "1",
	"data": {
		"name": "user",
		"gender": "male",
		"dob": "21-09-1985",
		"dod": null
	},
	"_parents": [

		{
			"id": "1.1",
			"data": {
				"name": "father",
				"gender": "male",
				"dob": "21-09-1985",
				"dod": null
			},
			"_parents": []
		},

		{
			"id": "1.2",
			"data": {
				"name": "mother",
				"gender": "female",
				"dob": "21-09-1985",
				"dod": null
			},
			"_parents": []
		}

	],

	"_children": [

		{
			"id": "1.3",
			"data": {
				"name": "son",
				"gender": "male",
				"dob": "21-09-1985",
				"dod": null
			},
			"_children": []
		},

		{
			"id": "1.4",
			"data": {
				"name": "daughter",
				"gender": "female",
				"dob": "21-09-1985",
				"dod": null
			},
			"_children": []
		}

	],

	"_spouses": [],

	"_siblings": []

}

Generated JSON

{
"id": 1,
"data": {
"name": "user",
"gender": "Male",
"dob": "11-02-2020",
"dod": null
},
"_father": [
{
"id": 1,
"first_name": "father",
"middle_name": "a",
"last_name": "a",
"birth_date": "12-12-12",
"alive": "Yes",
"sex": "Male",
"user_id": "1",
"relationship_id": "1",
"persone_type_id": "1"
}
],
"_mother": [
{
"id": 2,
"first_name": "Mother",
"middle_name": "a",
"last_name": "a",
"birth_date": "12-12-12",
"alive": "Yes",
"sex": "Female",
"user_id": "1",
"relationship_id": "5",
"persone_type_id": "1"
}
]
}

Controller Code

public function tree(User $user)
    {
        $user = Auth::user();
        $result = $user->person;

        //filter data saprate father, mother, etc

        $collection = collect($result);

        $father_data = [];
        $mother_data = [];

        //Father data
        $father = $collection->each(function ($value, $key) use(&$father_data) {

            if ($value->relationship_id == '1') {
                # code...
                $data['id'] = $value->id;
                $data['first_name'] = $value->first_name;
                $data['middle_name'] = $value->middle_name;
                $data['last_name'] = $value->last_name;
                $data['birth_date'] = $value->birth_date;
                $data['alive'] = $value->alive;
                $data['sex'] = $value->sex;
                $data['user_id'] = $value->user_id;
                $data['relationship_id'] = $value->relationship_id;
                $data['persone_type_id'] = $value->persone_type_id;
                array_push($father_data, $data);
            }
            
        });
        //return $father_data;

        //Mother data
        $mother = $collection->filter(function ($value, $key) use(&$mother_data) {
            if ($value->relationship_id == '5') {
                # code...
                $data['id'] = $value->id;
                $data['first_name'] = $value->first_name;
                $data['middle_name'] = $value->middle_name;
                $data['last_name'] = $value->last_name;
                $data['birth_date'] = $value->birth_date;
                $data['alive'] = $value->alive;
                $data['sex'] = $value->sex;
                $data['user_id'] = $value->user_id;
                $data['relationship_id'] = $value->relationship_id;
                $data['persone_type_id'] = $value->persone_type_id;
                array_push($mother_data, $data);
            }
        });
        //return $mother_data;

        return response()->json([
            'id' => $user->id,
            'data' => [
                "name" => $user->name,
                "gender" => $user->gender,
                "dob" => $user->dob,
                "dod" =>$user->dod
            ],
            "_father" => $father_data,
            "_mother" => $mother_data,

        ]);
    }