seepur/resources/scripts/applications/home/views/settings.vue

<template>
  <div class="wrapper">
    <div class="loading" v-if="loading">Loading...</div>
    <div class v-else>
      <Modal
        title="Add A child"
        :isActive="enableChildModel"
        acceptText="Add"
        rejectText="Cancel"
        @accept="addChild()"
        @close="enableChildModel=false"
      >
        <form class="form register" id="form-register">
          <div class="field">
            <label class="label">Name</label>
            <div class="control has-icons-left">
              <input
                :class="['input']"
                required="true"
                name="name"
                type="text"
                placeholder="John Snow"
                :disabled="!childValidation.enableInput"
                v-model="childValidation.name"
              />
              <span class="icon is-small is-left">
                <i class="fa fa-id-card"></i>
              </span>
            </div>
            <p class="help is-danger">{{ 'Error' }}</p>
          </div>

          <div class="field">
            <label class="label">Birthday</label>
            <div class="control has-icons-left">
              <input
                :class="['input']"
                required="true"
                name="dob"
                type="date"
                :disabled="!childValidation.enableInput"
                v-model="childValidation.dob"
              />
              <span class="icon is-small is-left">
                <i class="fa fa-gift"></i>
              </span>
            </div>
            <p class="help is-danger">{{ 'Error' }}</p>
          </div>
          <file-select v-model="childValidation.avatar" accept="image/*" lable="Upload Avatar:"></file-select>
        </form>
      </Modal>
      <div class="has-text-centered">
        <h3 class="title">Settings</h3>
        <h4 class="subtitle">{{user.name}}</h4>
      </div>
      <div class="columns">
        <div class="column is-one-quarter">
          <figure class="image is-128x128 m-auto">
            <img class="is-rounded is-avatar" :src="user.avatar" />
          </figure>
          <div class="card m-t-lg">
            <header class="card-header">
              <p class="card-header-title">My Children</p>
            </header>
            <div class="card-content">
              <ChildCard v-for="child in user.children" :key="child.id" :child="child"></ChildCard>
            </div>
            <footer class="card-footer">
              <a
                :enabled="childValidation.enableInput"
                class="card-footer-item"
                @click="enableChildModel=true"
              >Add a New Child</a>
            </footer>
          </div>
        </div>
        <div class="column">
          <form class="form">
            <div class="field">
              <label class="label">Name</label>
              <div class="control">
                <input
                  :disabled="!childValidation.enableInput"
                  class="input"
                  type="text"
                  placeholder="Text input"
                  v-model="user.name"
                />
              </div>
            </div>
            <div class="field">
              <label class="label">Email</label>
              <div class="control">
                <input class="input" v-model="user.email" type="email" placeholder="Text input" />
              </div>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { mapActions, mapGetters } from "vuex";
import Modal from "../../shared/components/Modal/Modal.vue";
import ChildCard from "../components/Child_Card.vue";
import Services from "../../services";
import FileSelect from "../../shared/components/FileSelect/FileSelect.vue";
export default {
  components: {
    Modal,
    FileSelect,
    ChildCard
  },
  name: "Settings",
  async beforeCreate() {
    return true;
  },
  async created() {
    if (!this.user) {
      try {
        await this.getUser();
      } catch (e) {
        console.error("Failed to fetch user");
      }
    }

    this.loading = false;

    return true;
  },
  methods: {
    async addChild() {
      this.childValidation.enableInput = false;
      const childData = {
        name: this.childValidation.name,
        dob: this.childValidation.dob,
        avatar: this.childValidation.avatar
      };
      console.log(childData);
      const child = await Services.ApiService.createChild(
        childData.name,
        childData.dob,
        childData.avatar
      );
      if (childData.avatar) console.log(childData.avatar.length);
      this.childValidation.name = null;
      this.childValidation.dob = null;
      this.childValidation.avatar = null;
      this.childValidation.enableInput = true;

      this.enableChildModel = false;
      await this.getUser();
      // console.log(child);
      return true;
    },
    ...mapActions(["getUser"])
  },
  computed: {
    ...mapGetters(["user"])
  },
  data() {
    return {
      loading: true,
      childValidation: {
        enableInput: true,
        name: null,
        dob: null,
        avatar: null
      },
      enableChildModel: false
    };
  }
};
</script>