tarang19

Member Since 1 Year Ago

pune

Experience Points
17,780
Total
Experience

2,220 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,780 XP
Mar
24
2 weeks ago
Activity icon

Replied to Generate Image When User Click On Generate

I am using D3 to render my json data and after render i need to create a jpg file on request on user click

Mar
23
2 weeks ago
Activity icon

Started a new Conversation Generate Image When User Click On Generate

I wanted to generate a image depend on my json response and wanted to show to user on click as a .jpg

like https://www.myheritage.com/FP/family-tree-builder-charts.php

can print family generation farm

Any one know any plugin or code or trick ?

Mar
22
2 weeks ago
Activity icon

Replied to How To Get Geolocation Data In Object

Thank you but its paid i required free api and its ip address base i wanted on typing of city name

Activity icon

Started a new Conversation How To Get Geolocation Data In Object

I wanted to get geolocation data in object format but don't want to use paid application any one know which one is better or if i enter city name then this object need o be generate

e.g.

city: "Pune"
country_code: "IN"
country_name: "India"
latitude: 18.5333
longitude: 73.8667
postal: "411001"
state: "Maharashtra"
Mar
16
3 weeks ago
Activity icon

Started a new Conversation Bing Map Example Usisng Vue Js

Any one know bing map api with Autocomplete data example Using Vue js

Activity icon

Started a new Conversation Wanted To Show Autofill Data On Entered City Name

I am using leaflet js for autofill city name but autofill popup not coming any one tell me what i did wrong ?

<template>
  <div>
    <v-text-field
      v-model="address"
      class="search loupe"
      label="Search"
      id="search"
    ></v-text-field>
  <div id="map"></div>
  </div>
</template>

<script>
export default {
  name: "test.vue",

  data() {
    return {
      lat:'',
      lon:'',
      address:'',
      data:null,
    }
    },
  // mounted() {
  //   let map = L.map('map').setView([21.12, 82.77], 4);
  //
  //   L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  //     attribution: '&copy; <a href="https://osm.org/copyright">OpenStreetMap</a> contributors'
  //   }).addTo(map);
  //
  //   let searchControl = L.esri.Geocoding.geosearch().addTo(map);
  //
  //   let results = L.layerGroup().addTo(map);
  //
  //   searchControl.on('results', function(data) {
  //     results.clearLayers();
  //     for (let i = data.results.length - 1; i >= 0; i--) {
  //       results.addLayer(L.marker(data.results[i].latlng));
  //     }
  //   });
  // },
  mounted() {

  },

  watch:{
    address: function (val){
      new Autocomplete('search',{
        delay: 500,
        clearButton: true,
        selectFirst: true,
        howManyCharacters: 2,

        // onSearch
        onSearch: ({ currentValue }) => {
          //console.log('onserch',currentValue)
          // api
          const api = `https://nominatim.openstreetmap.org/search?format=geojson&limit=5&city=${encodeURI(currentValue)}`;
          //console.log(api)

          /**
           * axios
           */
          return this.$axios.$get(api)
            .then((response) => {
             this.data = response.features
            })
            .catch(error => {
              console.log(error);
            });
        },
      })
    },

    data:function (val){
      //console.log(val)
      const regex = new RegExp(this.address, 'gi');
      //console.log('regex', regex)
      //console.log(!_.isEmpty(val))
      return val === 0 ? template : this.data
        .map((element) => {
          //console.log('element',element)
          console.log('name',element.properties.display_name)
          return `
          <li class="loupe">
            <p>
              ${element.properties.display_name.replace(regex, (str) => `<b>${str}</b>`)}
            </p>
          </li> `;
        }).join('');
    }
  }


}
</script>

<style scoped>
@import '~/assets/autosuggest.min.css';
#map {
  height: 500px;
  width: 400px;
}

.search {
  position: relative;
  display: block;
  margin: 10px auto
}

.search input {
  font-size: 16px
}

.search input::-ms-clear {
  display: none
}

.search ul {
  list-style: none;
  border: 1px solid #858585;
  border-top: none;
  border-radius: 0 0 8px 8px;
  overflow: hidden;
  box-shadow: 0 2.8px 2.2px hsla(0, 0%, 87.5%, .034), 0 6.7px 5.3px hsla(0, 0%, 75.3%, .048), 0 1.5px 1px hsla(0, 0%, 56.5%, .06), 0 2.3px 1.9px rgba(92, 92, 92, .072), 0 2.8px 1px rgba(63, 63, 63, .086)
}

.search ul li {
  position: relative;
  cursor: pointer;
  margin: 0;
  padding: 10px
}

.search ul li:not(:last-child) {
  border-top: none
}

.search .expanded {
  border-radius: 8px 8px 0 0;
  border: 1px solid #858585;
  outline: none
}

.search.loupe:before {
  -webkit-filter: invert(20%);
  filter: invert(20%)
}

.search.auto-is-loading:after {
  content: "";
  box-sizing: border-box;
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  right: 12px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border-color: #d9d9d9 #008cff #008cff #d9d9d9;
  border-style: solid;
  border-width: 2px;
  -webkit-animation: spinner .6s linear infinite;
  animation: spinner .6s linear infinite
}

.search.auto-is-loading .auto-clear {
  display: none
}

.loupe .full-width {
  padding: 6px 45px 6px 40px
}

.loupe:before {
  content: "";
  width: 20px;
  height: 20px;
  left: 10px;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath fill='%23d3d3d3' d='M31.008 27.231l-7.58-6.447c-.784-.705-1.622-1.029-2.299-.998a11.954 11.954 0 002.87-7.787c0-6.627-5.373-12-12-12s-12 5.373-12 12 5.373 12 12 12c2.972 0 5.691-1.081 7.787-2.87-.031.677.293 1.515.998 2.299l6.447 7.58c1.104 1.226 2.907 1.33 4.007.23s.997-2.903-.23-4.007zM12 20a8 8 0 110-16 8 8 0 010 16z'/%3E%3C/svg%3E")
}

.auto-clear,
.loupe:before {
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto
}

.auto-clear {
  display: flex;
  justify-content: center;
  align-items: center;
  right: 0;
  width: 40px;
  height: auto;
  cursor: pointer;
  background-color: transparent;
  border: none
}

.autocomplete-item.loupe {
  padding-left: 40px;
}

.auto-clear:before {
  content: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18.984 6.422L13.406 12l5.578 5.578-1.406 1.406L12 13.406l-5.578 5.578-1.406-1.406L10.594 12 5.016 6.422l1.406-1.406L12 10.594l5.578-5.578z'/%3E%3C/svg%3E");
  line-height: 100%;
  height: 24px;
  width: 24px
}

.auto-clear span {
  display: none
}

.auto-output-search {
  display: none;
  background-color: #fff
}

.auto-output-search.auto-is-active {
  display: block;
  position: absolute;
  width: 100%;
  margin-top: -1px;
  z-index: 99999
}

.selected {
  background-color: #e6e6e6;
  transition: background-color .2s ease-out
}

.selected+li:before {
  border-top: none
}

.init-instruction {
  display: none
}

.auto-error {
  border: 1px solid #f33 !important
}

.auto-error::-webkit-input-placeholder {
  color: #f66;
  opacity: 1
}

.auto-error:-ms-input-placeholder {
  color: #f66;
  opacity: 1
}

.auto-error::-ms-input-placeholder {
  color: #f66;
  opacity: 1
}

.auto-error::placeholder {
  color: #f66;
  opacity: 1
}

.full-width {
  width: 100%;
  height: 48px;
  padding: 6px 45px 6px 10px;
  background-color: #fff;
  border: 1px solid #d7d7d7;
  border-radius: 10px;
  box-shadow: none;
  box-sizing: border-box
}

.full-width:focus {
  border: 1px solid #858585;
  outline: none
}

.hidden {
  display: none
}
</style>
Mar
12
4 weeks ago
Activity icon

Started a new Conversation Add Custom Input Box For Leaflet Autocomplete

I wanted to get current location (Autocomplete in input filed) how can i do this in vue js

Mar
05
1 month ago
Activity icon

Started a new Conversation User Can Add Multiple Markers In Leaflet.js Using Vue Js

I am using leaflet js to get user current location and he can add his family member location but i am not able o understand how to do this using vue js

Feb
25
1 month ago
Activity icon

Replied to What's The Best Way To Automatically Insert Slashes '/' In Date Fields

Is there any validation for date filter ?

for eg

13/13/2020 wrong date

Activity icon

Replied to What's The Best Way To Automatically Insert Slashes '/' In Date Fields

hi thanks for replay

i have keep text because user may enter full date / month - year / year only

Activity icon

Started a new Conversation What's The Best Way To Automatically Insert Slashes '/' In Date Fields

I'm trying to add functionality to input date fields so as when the users enters in digits, slashes "/" get automatically added. (text filed)

<v-text-field
                        v-model="a"
                        label="date *"
                        id="date"
                        required
                      ></v-text-field>

a: function (data){
      var text = this.a || "";
      text = text.replace(/\D/g, "");
      text = text.replace(/^(\d{2})(\d+)/g, "/");
      text = text.replace(/^(\d{2}\/\d{2})(\d{1,4})$/g, "/");
      if (/^[\d]{2}\/[\d]{2}\/[\d]{4}$/g.test(text)) {
        console.log(this.a)
        console.log(text.length)
        //this.a.maxLength = text.length;
      }
      this.a = text;
      return this.a
}

I am getting proper date like this 13/13/1212 but it is not validated can any one tell how to validate date

Feb
24
1 month ago
Activity icon

Started a new Conversation Autocomplete Date On Text Field

I have a textbox for get user birthdate when user start type number that textbox give him autocomplete date or year in vue

for eg: User can type full date or just year if user entered full year than its show date format (autocomplete date) or only year on same text filed

12/12/2020 or 2020

Any one how can i do this

Feb
23
1 month ago
Activity icon

Replied to Mapbox Vs Google Maps

Thank you for replay can you please tell me price compared for find and autocomplete address ( 10 Lack users) witch one is better ?

Activity icon

Started a new Conversation Mapbox Vs Google Maps

Can Any one tell me which one to use for search location and auto complete location for small project ?

Feb
09
2 months ago
Activity icon

Started a new Conversation D3 + Vue Render Data Without Refresh

I am new in D3 and i have created Family Tree but when i add a person i need to refresh the page to get new state (new JSON) but i wanted to done this without refresh (reactive) any one have any suggestion

my code (adding member form .vue)

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

  <div data-app>
    <v-card
      elevation="10"
      outlined
    >
      <v-toolbar color="cyan"
                 dark
                 flat>
        <v-toolbar-title>Add Family Member for {{ userInfo.name }}</v-toolbar-title>
      </v-toolbar>
      <v-tabs flat>
        <v-tab>
          <v-icon left>
            mdi-account
          </v-icon>
          Personal Details
        </v-tab>
        <v-tab>
          <v-icon left>
            mdi-lock
          </v-icon>
          Option 2
        </v-tab>
        <v-tab>
          <v-icon left>
            mdi-access-point
          </v-icon>
          Option 3
        </v-tab>

        <v-tab-item>
          <v-card flat>
            <v-card-text class="align-center" style="height: 400px;" v-if="!relationship">
              <radial-menu
                style="margin: auto; margin-top: 150px;background-color: white"
                :itemSize="60"
                :radius="120"
                :angle-restriction="360">
                <radial-menu-item
                  v-for="(item, index) in items"
                  :key="index"
                  class="shadow"
                  :style=[{backgroundColor:item.color}]
                  @click="() => handleClick(item)">
                  <v-tooltip bottom>
                    <template v-slot:activator="{ on, attrs }">
                      <span>
                      <v-icon
                        v-bind="attrs"
                        v-on="on"
                      >
                        {{ item.name }}
                      </v-icon>
                      </span>
                    </template>
                    <span :style={backgroundColor:item.color}> Add {{ item.info }}</span>
                  </v-tooltip>
                </radial-menu-item>
              </radial-menu>
            </v-card-text>
            <v-card-text v-else>
              <form method="POST" action="/family" @submit.prevent="onSubmit">
                <input type="hidden" class="form-control" id="active-node" name="demo">

                <v-row>
                  <v-col
                    cols="12"
                    md="4"
                  >
                    <v-text-field
                      v-model="name"
                      label="First name"
                      required
                    ></v-text-field>
                  </v-col>

                  <v-col
                    cols="12"
                    md="4"
                  >
                    <v-text-field
                      v-model="middelname"
                      label="Middle Name"
                    ></v-text-field>
                  </v-col>

                  <v-col
                    cols="12"
                    md="4"
                  >
                    <v-text-field
                      v-model="surname"
                      label="Surname"
                      required
                    ></v-text-field>
                  </v-col>

                  <v-col
                    cols="12"
                    sm="6"
                    md="6"
                  >
                    <v-radio-group
                      v-model="Living"
                      row
                    >
                      <v-radio
                        label="Living"
                        color="indigo"
                        value="living"
                      ></v-radio>

                      <v-radio
                        label="Dead"
                        color="indigo"
                        value="dead"
                      ></v-radio>

                    </v-radio-group>
                  </v-col>

                  <v-col
                    cols="12"
                    sm="6"
                    md="6"
                    v-show="Living === 'living'"
                    v-if="bodcheckbox"
                  >
                    <v-select
                      v-if="Living === 'living'"
                      v-model="bodOnlyYear"
                      label="year"
                      :items="years"
                    >
                    </v-select>
                  </v-col>

                  <v-col
                    cols="12"
                    sm="6"
                    md="6"
                    v-else
                  >
                    <v-menu
                      ref="menu"
                      v-model="menu"
                      :close-on-content-click="false"
                      transition="scale-transition"
                      offset-y
                      min-width="290px"
                    >
                      <template v-slot:activator="{ on, attrs }">
                        <v-text-field
                          :value="computedDateFormattedMomentjs"
                          label="Birth Date"
                          prepend-icon="mdi-calendar"
                          v-bind="attrs"
                          v-on="on"
                          clearable
                        ></v-text-field>
                      </template>
                      <v-date-picker
                        v-model="birthDate"
                        no-title
                        @input="menu = false"
                      >
                        <v-spacer></v-spacer>
                        <v-btn
                          text
                          color="primary"
                          @click="menu = false"
                        >
                          Cancel
                        </v-btn>
                        <v-btn
                          text
                          color="primary"
                          @click="$refs.menu.save(birthDate)"
                        >
                          OK
                        </v-btn>
                      </v-date-picker>
                    </v-menu>
                  </v-col>

                  <v-col
                    cols="12"
                    sm="4"
                    md="4"
                    v-show="Living === 'living'"
                    v-if="!dodcheckbox"
                  >
                    <v-text-field
                      v-model="placeOfBirth"
                      label="Birth Place"
                    ></v-text-field>
                  </v-col>

                  <v-col
                    cols="12"
                    sm="4"
                    md="4"
                    v-show="Living === 'living'"
                    v-if="!dodcheckbox"
                  >
                    <v-text-field
                      v-model="currentLocation"
                      label="Current Place"
                    ></v-text-field>
                  </v-col>

                  <v-col
                    cols="12"
                    sm="4"
                    md="4"
                    v-show="Living === 'living'"
                    v-if="!dodcheckbox"
                  >
                    <v-checkbox
                      v-model="bodcheckbox"
                      label = "Birth Year"
                      value=true
                    ></v-checkbox>
                  </v-col>

                  <v-col
                    cols="12"
                    sm="6"
                    md="6"
                    v-show="Living === 'dead'"
                    v-if="!dodcheckbox"
                  >
                    <v-text-field
                      v-model="placeOfBirth"
                      label="Birth Place"
                    ></v-text-field>
                  </v-col>

                  <v-col
                    cols="12"
                    sm="6"
                    md="6"
                    v-show="Living === 'dead'"
                    v-if="!dodcheckbox"
                  >
                    <v-text-field
                      v-model="deathPlace"
                      label="Death Place"
                    ></v-text-field>
                  </v-col>

                  <v-col
                    cols="12"
                    sm="6"
                    md="6"
                    style="padding-top: 0px !important;"
                    v-show="Living === 'dead'"
                    v-if="!dodcheckbox"
                  >
                    <v-menu
                      ref="menu1"
                      v-model="menu1"
                      :close-on-content-click="false"
                      transition="scale-transition"
                      offset-y
                      min-width="290px"
                    >
                      <template v-slot:activator="{ on, attrs }">
                        <v-text-field
                          :value="computedDateFormattedMoment"
                          label="Date of Death"
                          prepend-icon="mdi-calendar"
                          readonly
                          v-bind="attrs"
                          v-on="on"
                        ></v-text-field>
                      </template>
                      <v-date-picker
                        v-model="dod"
                        no-title
                        @input="menu1 = false"
                      >
                        <v-spacer></v-spacer>
                        <v-btn
                          text
                          color="primary"
                          @click="menu1 = false"
                        >
                          Cancel
                        </v-btn>
                        <v-btn
                          text
                          color="primary"
                          @click="$refs.menu.save(birthDate)"
                        >
                          OK
                        </v-btn>
                      </v-date-picker>
                    </v-menu>
                  </v-col>

                  <v-col
                    cols="12"
                    sm="6"
                    md="6"
                    v-else
                  >
                    <v-text-field
                      v-model="placeOfBirth"
                      label="Birth Place"
                    ></v-text-field>

                  </v-col>
                  <v-col
                    cols="12"
                    sm="6"
                    md="6"
                    v-show="Living === 'dead'"
                    v-if="dodcheckbox"
                  >
                    <v-text-field
                      v-model="deathPlace"
                      label="Death Place"
                    ></v-text-field>
                  </v-col>

                  <v-col
                    cols="12"
                    sm="6"
                    md="6"
                    style="padding-top: 0px !important;"
                    v-show="Living === 'dead'"
                    v-if="dodcheckbox"
                  >
                    <v-select
                      v-if="Living === 'dead'"
                      v-model="dodOnlyYear"
                      label="year"
                      :items="years"
                    >
                    </v-select>
                  </v-col>

                  <v-col
                    style="padding-top: 0px !important;"
                    v-if="Living === 'dead'">
                    <v-checkbox
                      v-model="dodcheckbox"
                      label = "Death Year"
                      value=true
                    ></v-checkbox>
                  </v-col>

                  <v-btn
                    color="deep-purple lighten-2"
                    text
                    type="submit"
                    :disabled="submitted"
                  >
                    Submit
                  </v-btn>
                </v-row>
              </form>
            </v-card-text>
          </v-card>
        </v-tab-item>
        <v-tab-item>
          <v-card flat>
            <v-card-text>
              <p>
                Morbi nec metus. Suspendisse faucibus, nunc et pellentesque egestas, lacus ante convallis tellus, vitae iaculis lacus elit id tortor. Sed mollis, eros et ultrices tempus, mauris ipsum aliquam libero, non adipiscing dolor urna a orci. Curabitur ligula sapien, tincidunt non, euismod vitae, posuere imperdiet, leo. Nunc sed turpis.
              </p>

              <p>
                Suspendisse feugiat. Suspendisse faucibus, nunc et pellentesque egestas, lacus ante convallis tellus, vitae iaculis lacus elit id tortor. Proin viverra, ligula sit amet ultrices semper, ligula arcu tristique sapien, a accumsan nisi mauris ac eros. In hac habitasse platea dictumst. Fusce ac felis sit amet ligula pharetra condimentum.
              </p>

              <p>
                Sed consequat, leo eget bibendum sodales, augue velit cursus nunc, quis gravida magna mi a libero. Nam commodo suscipit quam. In consectetuer turpis ut velit. Sed cursus turpis vitae tortor. Aliquam eu nunc.
              </p>

              <p>
                Etiam ut purus mattis mauris sodales aliquam. Ut varius tincidunt libero. Aenean viverra rhoncus pede. Duis leo. Fusce fermentum odio nec arcu.
              </p>

              <p class="mb-0">
                Donec venenatis vulputate lorem. Aenean viverra rhoncus pede. In dui magna, posuere eget, vestibulum et, tempor auctor, justo. Fusce commodo aliquam arcu. Suspendisse enim turpis, dictum sed, iaculis a, condimentum nec, nisi.
              </p>
            </v-card-text>
          </v-card>
        </v-tab-item>
        <v-tab-item>
          <v-card flat>
            <v-card-text>
              <p>
                Fusce a quam. Phasellus nec sem in justo pellentesque facilisis. Nam eget dui. Proin viverra, ligula sit amet ultrices semper, ligula arcu tristique sapien, a accumsan nisi mauris ac eros. In dui magna, posuere eget, vestibulum et, tempor auctor, justo.
              </p>

              <p class="mb-0">
                Cras sagittis. Phasellus nec sem in justo pellentesque facilisis. Proin sapien ipsum, porta a, auctor quis, euismod ut, mi. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nam at tortor in tellus interdum sagittis.
              </p>
            </v-card-text>
          </v-card>
        </v-tab-item>
      </v-tabs>
    </v-card>
  </div>

</template>

<script>
import { mapState } from "vuex";
import moment from 'moment'
import { RadialMenu,  RadialMenuItem } from 'vue-radial-menu'
export default {
  name: "form.vue",
  components: {
    RadialMenu,
    RadialMenuItem
  },
  data() {
    return {
      e1 : 1,
      loadinga: false,
      Living: '',
      selection: null,
      loading: false,
      birthYear: null,
      rootUser: "",
      menu: false,
      menu1: false,
      id: "",
      name: null,
      middelname: "",
      surname: "",
      gender: "",
      birthDate: "",
      dod: null,
      submitted: false,
      relationship: '',
      isSubmitted: false,
      errors: [],
      items: [
        {name:'mdi-human-male', value:'father', color: '#5C5CFF', info:'Father'},
        {name:'mdi-human-female', value:'mother', color: '#FF37A6', info: 'Mother'},
        {name:'mdi-human-female', value:'wife', color: '#FF37A6', info: 'Wife'},
        {name:'mdi-human-male', value:'husband', color: '#5C5CFF', info: 'Husband'},
        {name:'mdi-human-male', value:'brother', color: '#5C5CFF', info: 'Brother'},
        {name:'mdi-human-female', value:'sister', color: '#FF37A6', info: 'Sister'},
        {name:'mdi-human-child', value:'son', color: '#5C5CFF', info: 'Son'},
        {name:'mdi-human-female', value:'daughter', color: '#FF37A6', info: 'Daughter'}
      ],
      lastClicked: 'click on something!',
      emailRules: [
        v => /[email protected]+\..+/.test(v) || "E-mail must be valid"
      ],
      dodcheckbox: false,
      bodcheckbox: false,
      dodOnlyYear: null,
      bodOnlyYear: null,
      placeOfBirth: '',
      currentLocation: '',
      emailid: '',
      education: '',
      profession: '',
      deity: '',
      medical: '',
      community: '',
      subcommunity: '',
      isFatherSet: '',
      isMotherSet: '',
      deathPlace: '',
      highestEducations:[],
      educationaldetails: '',
      professions:[],
      communities: [],
      subCommunities: [],
      geneticdisorders: [],
    };
  },
  async mounted() {
    //this.rootUser = localStorage.getItem('rootUser')
    await this.personsDetails();
    if (sessionStorage.getItem("rootUser")) {
      this.rootUser = await sessionStorage.getItem("rootUser");
    } else {
      this.rootUser = this.familyTree.id;
    }
    //console.log(this.familyTree.data.lastname)
    this.surname = this.familyTree.data.lastname
    //console.log('individualInfo',this.familyTreeData.individualInfo)
    //this.isFatherSet = this.familyTreeData.individualInfo.parents
    //this.rootUser = await sessionStorage.getItem("rootUser")
    //console.log("rootUser", sessionStorage.getItem("rootUser"));

    //console.log(this.rootUser === localStorage.getItem('rootUser'))
  },

  watch: {
    name: function (newValue){
      this.name = this.capitalizeFirstLetter(newValue)
    },
    middelname: function (newValue){
      this.middelname = this.capitalizeFirstLetter(newValue)
    },
    surname: function (newValue){
      this.surname = this.capitalizeFirstLetter(newValue)
    },
    dod: function (val){
      // console.log('from watch',val)
      // console.log(val.toString().length)
      // console.log('length',this.dod.toString().length === 4)
      // console.log('dodcheck',!this.dodcheckbox)
      if (!!this.dodcheckbox){
        console.log('ok');
        this.dod = null
        this.dodOnlyYear = null
      }
    },
    birthDate: function (val){
      let currentUserDOB = this.familyTreeData.individualInfo.dob
      if (!!this.bodcheckbox){
        this.birthDate = null
        this.bodOnlyYear = null
      }
      if (!_.isNull(currentUserDOB)){
        if (this.relationship === 'father' || this.relationship === 'mother'){
          if (this.birthDate <= currentUserDOB){
            console.log(this.birthDate <= currentUserDOB)
            alert('BirtDate May be wrong')
          }
        }
      }
    },
    Living: function (data){
      if (data === 'living'){
        this.dod = null
        this.dodOnlyYear = null
      }
    },
    isFatherSet: function (data){
      console.log(data)
    },
  },

  computed: {
    computedDateFormattedMomentjs () {
      return this.birthDate ? moment(this.birthDate).format('DD/MM/YYYY') : ''
    },
    computedDateFormattedMoment () {
          return this.dod ? moment(this.dod).format('DD/MM/YYYY') : ''
    },
    ...mapState({ familyTree: state => state.familyTree.tree }),
    ...mapState({ familyTreeData: state => state.familyTree }),
    years () {
      const year = new Date().getFullYear()
      return Array.from({length: year - 1900}, (value, index) => 1901 + index)
    },
    userInfo(){
      return this.familyTreeData.individualInfo
    },

    checkParents: function () {
      let isMale, isFemale, isparent

      isMale = this.familyTreeData.individualInfo.gender === 'male' ? true : false;
      isFemale = this.familyTreeData.individualInfo.gender === 'female' ? true : false;
      isparent = _.isEmpty(this.familyTreeData.individualInfo.parents) ? true : false


      if (!_.isEmpty(this.familyTreeData.individualInfo.parents))
        {

          let hasFather, hasMother, isMale, isFemale, parents, filteredList;

          parents = this.familyTreeData.individualInfo.parents

          // if only 1 parent given
          if ( parents.length === 1 ) {
            hasFather = parents[0].gender === "male" ? true : false;
            hasMother = !hasFather;
          }

          // if both parents given
          if ( parents.length === 2 ) {
            hasFather = parents[0].gender === "male" || parents[1].gender === "male" ? true : false;
            hasMother = parents[0].gender === "female" || parents[1].gender === "female" ? true : false;
          }

          filteredList = _.filter( this.items, relation => {

              if ( relation.name === "Father" ) {
                  return !hasFather
              }

              if ( relation.name === "Mother" ) {
                  return !hasMother
              }

              // if ( relation.name === "Husband" ) {
              //   return isFemale
              // }
              //
              // if ( relation.name === "Wife" ) {
              //   return isMale
              // }

              return true;

          })

          // return
          return filteredList

        } else {

        let filteredList = _.filter( this.items, relation => {

          if ( relation.name === "Husband" ) {
            return isFemale
          }

          if ( relation.name === "Wife" ) {
            return isMale
          }

          if ( relation.name === "Brother" ) {
            return !isparent
          }

          if ( relation.name === "Sister" ) {
            return !isparent
          }

          return true;

        })

          return filteredList

        }
    }

  },

  created() {
    this.selectHeighesteducation()
    this.selectProfession()
    this.selectCommunity()
    this.selectSubommunity()
    this.selectMedicalhistory()
  },

  methods: {
      handleClick (item) {
        this.relationship = item.value;
      },
    reserve () {
      this.loadinga = true

      setTimeout(() => (this.loadinga = false), 2000)
    },
    selectHeighesteducation(){
      this.$axios
        .$get(process.env.BASE_URL + "/getHeighestEducation")
        .then((response) => {
          this.highestEducations = response
          this.loading = false
        })
    },
    selectProfession(){
      this.$axios
        .$get(process.env.BASE_URL + "/getProfession")
        .then((response) => {
          this.professions = response
          this.loading = false
        })
    },
    selectCommunity(){
      this.$axios
        .$get(process.env.BASE_URL + "/getCommunityData")
        .then((response) => {
          this.communities = response
          this.loading = false
        })
    },
    selectSubommunity(){
      this.$axios
        .$get(process.env.BASE_URL + "/getSubCommunity")
        .then((response) => {
          this.subCommunities = response
          this.loading = false
        })
    },
    selectMedicalhistory(){
      this.$axios
        .$get(process.env.BASE_URL + "/getMedicalHistory")
        .then((response) => {
          this.geneticdisorders = response
          this.loading = false
        })
    },
    closeDialog(){
      this.errors = [];
      this.name = "";
      this.middelname = "";
      this.surname = "";
      this.gender = "";
      this.dod = "";
      this.birthDate = "";
      $nuxt.$emit('open-dialog-form-close')
    },
    check(){
      if(this.relationship === 'Select Relation'){
        alert('Select Relationship')
      }
    },
    capitalizeFirstLetter(str){
      return str.charAt(0).toUpperCase() + str.slice(1)
    },
    async personsDetails() {
      await this.$store.dispatch("familyTree/callTree");
    },

    async onSubmit(value) {
      if (this.dodcheckbox && this.Living === 'dead'){
        let y= this.dodOnlyYear;
        let m= 1;
        let d= 1;
        let fullDate = `${this.dodOnlyYear}-01-01`
        this.dodOnlyYear = moment(fullDate).format('YYYY-DD-MM')
        this.dod = this.dodOnlyYear
      }
      if (this.bodcheckbox && this.Living === 'living'){
        let y= this.bodOnlyYear;
        let m= 1;
        let d= 1;
        let fullDate = `${this.bodOnlyYear}-01-01`
        this.bodOnlyYear = moment(fullDate).format('YYYY-DD-MM')
        this.birthDate = this.bodOnlyYear
      }
      this.submitted = true;
      // nullify previously set id
      this.check()

      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.relationship === "brother"
      ) {
        this.gender = "male";
      } else {
        this.gender = "female";
      }

      if (this.relationship === "husband" || this.relationship === "wife") {
        var user = {
          name: this.name,
          middlename: this.middelname,
          lastname: this.surname,
          gender: this.gender,
          dob: this.birthDate,
          dod: this.dod,
          placeOfBirth: this.placeOfBirth,
          currentlocation: this.currentLocation,
          email: this.emailid,
          educationaldetails: this.education,
          profession: this.profession,
          deity: this.deity,
          healthHistory: this.medical,
          community: this.community,
          subcommunity: this.subcommunity,
          externalTreeId: "demoId",
          alive: this.Living
        };
      } else {
        var user = {
          name: this.name,
          middlename: this.middelname,
          lastname: this.surname,
          gender: this.gender,
          dob: this.birthDate,
          dod: this.dod,
          placeOfBirth: this.placeOfBirth,
          currentlocation: this.currentLocation,
          email: this.emailid,
          educationaldetails: this.education,
          profession: this.profession,
          deity: this.deity,
          healthHistory: this.medical,
          community: this.community,
          subcommunity: this.subcommunity,
          alive: this.Living
        };
      }
      console.log('user', user)
      // ------------------------------------
      //   - 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");

        let activeNodeId = window.activenode;

        //console.log(activeNodeId)

        // 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( postUrl);
      await this.$axios
        .$post(postUrl, user, { timeout: 120000 })
        .then(response => {
          console.log('member resp',response)
          this.errors = [];
          this.name = "";
          this.middelname = "";
          this.surname = "";
          this.gender = "";
          this.birthDate = "";
          this.dod = "";
          $nuxt.$emit('open-dialog-form-close')
          //$.fancybox.close();
          //$("#modal-bloodline-info").modal("hide");
          if(response === 'date_validation'){
            alert('Please enter the correct date of birth. Your parents are always older than you !!')
          }
          // else if(process.browser){
          //   window.location.reload(true);
          // }
          //this.$router.push("/family");
          console.log("Working");
        })
        .catch(error => {
          this.errors = error.response.data.errors;
          this.submitted = false;
          console.log("somthing went wrong");

          if (error.response.status === 400) {
            console.log(this.errors);
          }
        });
    },
  }
};
</script>

<style scoped>
.v-chip.v-size--default {
  border-radius: 80px !important;
  font-size: 14px !important;
  height: 45px !important;
  width: 123px !important;
}
.v-chip{
  padding: 0 40px !important;
}
.toCapitalFirst{ text-transform: uppercase; }

.shadow{
  box-shadow: 10px 10px 29px -5px rgba(0,0,0,0.75);
  -webkit-box-shadow: 10px 10px 29px -5px rgba(0,0,0,0.75);
  -moz-box-shadow: 10px 10px 29px -5px rgba(0,0,0,0.75);
}

</style>

Render and view tree .vue

<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, mapGetters  } from "vuex";
import { Auth } from "aws-amplify";
import tippy from "tippy.js";
import 'tippy.js/dist/tippy.css'; // optional for styling
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,
      activeUserinfo: 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");

        console.log(this.spouseId);

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

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

  watch: {

  },

  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 = _.cloneDeep( this.familyTree.tree )
      //this.data = this.familyTree.tree;

      //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);

      const tippyTemplate = document.getElementById('bl-template');

      // tippy
      const blTippy = tippy(document.querySelectorAll('.action-edit'), {
        theme: 'bloodline',
        content: () => {

          let cloned = tippyTemplate.cloneNode(true);

          cloned.children.forEach( (action, index ) => {

            action.addEventListener('click', (event) => {

              if(index === 0) {

                let emitPromise = new Promise( (resolve, reject) => {
                   this.$axios.$get( process.env.BASE_URL+'/userInfo/' + window.activenode, {timeout: 120000 })
                    .then(response => {
                      //console.log(window.activenode)
                      console.log('userInfo',response)
                    })
                  console.log(window.activenode);
                  setTimeout(() => resolve("done!"), 0);
                })

                emitPromise.then( result => {
                  $nuxt.$emit('open-dialog-form')
                })

              }
              else if(index === 2) {
                alert('ok');
              }

            });

          });

          cloned.setAttribute( 'style', 'display:block;' );

          return cloned;
        },
        interactive: true,
        trigger: 'click',
        inertia: true,
        animation: 'scale-extreme',
        allowHTML: true,
        maxWidth: 'none',
      });


      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');
          //alert(window.activenode)


          //$("#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
      ////////////////////////////////////////////////
      let email;
      email = this.$store.state.auth.user.attributes.email
      console.log('jdhfjdfdgfhdgfhdgfhdgfhdgfhdfh',email)

      this.data = _.cloneDeep( this.familyTree.tree )
      //this.data = this.familyTree.tree;

      //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);

      const tippyTemplate = document.getElementById('bl-template');

      // tippy
      const blTippy = tippy(document.querySelectorAll('.action-edit'), {
        theme: 'bloodline',
        content: () => {

          let cloned = tippyTemplate.cloneNode(true);

          cloned.children.forEach( (action, index ) => {

            action.addEventListener('click', (event) => {

              if(index === 0) {

                let emitPromise = new Promise( (resolve, reject) => {
                  this.sendData(window.activenode);
                  setTimeout(() => resolve("done!"), 0);
                })

                emitPromise.then( result => {
                  $nuxt.$emit('open-dialog-form')
                })
              }

              else if(index === 1) {

                let emitPromise = new Promise( (resolve, reject) => {
                  this.sendData(window.activenode);
                  setTimeout(() => resolve("done!"), 0);
                })

                emitPromise.then( result => {
                  $nuxt.$emit('open-dialog-form-edit')
                })
              }
              else if(index === 2) {
                alert('ok');
              }

            });

          });

          cloned.setAttribute( 'style', 'display:block;' );

          return cloned;
        },
        interactive: true,
        trigger: 'click',
        inertia: true,
        animation: 'scale-extreme',
        allowHTML: true,
        maxWidth: 'none',
      });




      if (process.browser) {
        $("a.action-edit").on("click", event => {
          let id;
          window.activenode = event.currentTarget.getAttribute('data-id');
          // id = window.activenode;
          // console.log(id)
        });
      }
    },

    async sendData(value) {
      await this.$store.dispatch("familyTree/userInfo", value);
    },
  }
};
</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>
Jan
30
2 months ago
Activity icon

Started a new Conversation Onclick Set Dynamic Data In Vue

I wanted to show individual user information onClick and my axios call in vuex store

But now i am able to call only one user information not able to other any one tell me what to do ?

and my vuex code give me proper info per user

code

async mounted() {
    //this.rootUser = localStorage.getItem('rootUser')
    await this.personsDetails();
    if (sessionStorage.getItem("rootUser")) {
      this.rootUser = await sessionStorage.getItem("rootUser");
    } else {
      this.rootUser = this.familyTree.id;
    }
    this.surname = this.familyTree.data.lastname
    //this.p = this.familyTreeData.individualInfo
    console.log(this.check)
  },

  watch: {
    name: function (newValue){
      this.name = this.capitalizeFirstLetter(newValue)
    },
    middelname: function (newValue){
      this.middelname = this.capitalizeFirstLetter(newValue)
    },
    surname: function (newValue){
      this.surname = this.capitalizeFirstLetter(newValue)
    },
    dod: function (val){
      // console.log('from watch',val)
      // console.log(val.toString().length)
      // console.log('length',this.dod.toString().length === 4)
      // console.log('dodcheck',!this.dodcheckbox)
      if (!!this.dodcheckbox){
        console.log('ok');
        this.dod = null
        this.dodOnlyYear = null
      }
    },
    Living: function (data){
      if (data === 'living'){
        this.dod = null
        this.dodOnlyYear = null
      }
    },
    isFatherSet: function (data){
      console.log(data)
    },
    p: function (){}

  },

  computed: {
    computedDateFormattedMomentjs () {
      return this.birthDate ? moment(this.birthDate).format('DD/MM/YYYY') : ''
    },
    computedDateFormattedMoment () {
      return this.dod ? moment(this.dod).format('DD/MM/YYYY') : ''
    },
    ...mapState({ familyTree: state => state.familyTree.tree }),
    ...mapState({ familyTreeData: state => state.familyTree.individualInfo }),
    years () {
      const year = new Date().getFullYear()
      return Array.from({length: year - 1900}, (value, index) => 1901 + index)
    },

  },


  methods: {
    check(){
      this.p = this.familyTreeData
    },

my vuex code

import { Auth } from "aws-amplify";
export const state = () => ({
  tree: null,
  isSpouseSet: false,
  individualInfo: []
})

export const mutations = {
  SET(state, payload){
    state.tree = payload
  },
  TEST(state,payload){
    state.isSpouseSet = payload
  },
  indInfo(state,payload){
    state.individualInfo = payload
  }
}

export const actions = {
  async userInfo({ commit },value){
    let id;
    console.log('from store', value)
    await this.$axios.$get( process.env.BASE_URL+'/userInfo/' + window.activenode, {timeout: 120000 })
        .then(response => {
          //console.log(window.activenode)
          console.log('userInfo',response)
          id = response
        })
      commit('indInfo', id)
  },
  async callTree({ commit },spouseId){
    let id;
    // if (window.activenode !== undefined){
    //   await this.$axios.$get( process.env.BASE_URL+'/userInfo/' + window.activenode, {timeout: 120000 })
    //     .then(response => {
    //       //console.log(window.activenode)
    //       //console.log('userInfo',response)
    //       id = response
    //     })
    //   commit('indInfo', id)
    // }
   // 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;
      let set;
      await this.$axios.$get( process.env.BASE_URL+'/user/' + spid, {timeout: 120000 })
        .then(resp => {
          spouseTree = resp
          set = true
          // if (_.isEmpty(resp._parents)){
          //   alert('Add Any one Relation from this side')
          //
          // }else {
          //   console.log(resp._parents)
          //   commit('TEST', set)
          //   commit('SET', spouseTree)
          // }
        })
      commit('SET', spouseTree)
      commit('TEST', set)
    }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 trees;
      await this.$axios.$get( process.env.BASE_URL+'/user/' + userid, {timeout: 120000 })
        .then(response => {
          //console.log(window.activenode)
          //console.log('ddddddddddddddddddssssssssssssssssssssssss',response)
          trees = response
        })
      commit('SET', trees)
    }




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

  },
  async rootUser({commit}, root){
    console.log('dddddddddddddddd',root)
    let tree;
    await this.$axios.$get( process.env.BASE_URL+'/user/' + root, {timeout: 120000 })
      .then(response => {
        console.log('ddddddddddddddddddssssssssssssssssssssssss',response)
        //tree = response
      })
    //commit('SET', tree)
    //sessionStorage.clear()
  }
}
Jan
26
2 months 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
2 months 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
2 months 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
2 months 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
2 months 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 months 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
3 months 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
3 months 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
4 months 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
4 months 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
4 months 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
4 months 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
4 months 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
4 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
4 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
4 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
4 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
4 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
5 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
5 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
5 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
5 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
5 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
5 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
5 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
5 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
5 months ago