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

<template>
  <div class="container is-fullwidth">
    <div class="loading" v-if="loading">
      <Loading />
    </div>
    <div class v-else>
      <!-- Profile Cover Modal -->
      <Modal
        title="Change Cover"
        :isActive="showCoverModal"
        acceptText="Change"
        rejectText="Cancel"
        @accept="changeCover()"
        @close="showCoverModal=false"
      >
        <ProfileHeader
          :title="child.name"
          :background="childCoverModalImage ? childCoverModalImage : child.profile_cover"
        />
        <file-select v-model="childCoverModalImage" accept="image/*" lable="Select Cover:"></file-select>
      </Modal>
      <!-- Change Avatar Modal -->
      <ChangeAvatarModal
        @onAvatarSelected="updateAvatar($event)"
        @onClose="showChangeAvatarModal=false"
        :isActive="showChangeAvatarModal"
        :defaultImage="child.avatar"
      />
      <!-- Add Connection Modal -->
      <AddConnectionModal
        @createNewConnection="addConnection($event)"
        @dismiss="showAddConnectionModal=false"
        :isActive="showAddConnectionModal"
        :childName="child.name"
      />
      <!-- Profile -->
      <ProfileHeader :title="child.name" :background="child.profile_cover" />
      <div class="columns is-fullheight m-t-md">
        <div class="column is-2">
          <div class="card">
            <div class="card-image p-md is-relative">
              <figure
                :class="`image is-1by1 is-light ${isParent ? 'editable-image' : ''}`"
                @click="onAvatarClicked()"
              >
                <img :src="child.avatar" class="is-rounded is-avatar" />
              </figure>
            </div>
            <div class="card-content">
              <div class="content">
                <p>Hi!</p>
                <p>Im {{age}}</p>
                <br />
              </div>
            </div>
            <footer v-if="isParent" class="card-footer">
              <a
                class="card-footer-item"
                @click="togleEditMode()"
              >{{inEditMode ? 'Cancel' : 'Edit'}}</a>
              <a class="card-footer-item is-danger" @click="onDeleteClicked()">Delete</a>
            </footer>
          </div>
        </div>
        <div class="column">
          <div class="card">
            <div class="card-content">
              <nav class="level">
                <!-- Left side -->
                <div class="level-left">
                  <div class="level-item">
                    <h1 class="title">{{`${child.name.split(' ')[0]}'s Room`}}</h1>
                  </div>
                </div>
              </nav>
              <nav class="level">
                <!-- Left side -->
                <div class="level-left">
                  <div class="level-item">
                    <h1 class="subtitle">Parents</h1>
                  </div>
                </div>

                <!-- Right side -->
                <div class="level-right">
                  <div class="level-item" v-if="isParent">
                    <button class="button" @click="showAddConnectionModal = true">
                      <i class="fa fa-fw fa-plus"></i> Add Connection
                    </button>
                  </div>
                </div>
              </nav>
              <div class="parents">
                <div class="is-flex">
                  <AvatarBadge
                    class="column"
                    v-for="parent in child.parents"
                    :key="parent.id"
                    :img="parent.avatar"
                    :text="parent.name"
                    :isLink="user.id === parent.id"
                    @onClick="goToUserProfile(parent)"
                  />
                </div>
              </div>
              <nav class="level">
                <!-- Left side -->
                <div class="level-left">
                  <div class="level-item">
                    <h1 class="subtitle">Connections</h1>
                  </div>
                </div>

                <!-- Right side -->
              </nav>
              <div class="columns">
                <AvatarBadge
                  class="column"
                  v-for="connection in child.connections"
                  :key="connection.id"
                  :img="connection.avatar"
                  :text="connection.name"
                  :isLink="user.id === connection.id"
                  @onClick="goToUserProfile(connection)"
                />
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { mapActions, mapGetters } from "vuex";
import ChildAvatar, { IChildAvatar } from "../components/child_avatar.vue";
import Services from "../../services/index";
import Loading from "../../shared/components/Loading/Loading.vue";
import ProfileHeader from "../components/ProfileHeader.vue";
import AddConnectionModal from "../components/AddConnectionModal.vue";
import FileSelect from "../../shared/components/FileSelect/FileSelect.vue";
import AvatarBadge from "../components/AvatarBadge.vue";
import Moment from "moment";
import Modal from "../../shared/components/Modal/Modal.vue";
import ChangeAvatarModal from "../components/ChangeAvatarModal.vue";
export default {
  name: "ChildProfile",
  components: {
    ChildAvatar,
    Loading,
    ProfileHeader,
    Modal,
    FileSelect,
    AvatarBadge,
    AddConnectionModal,
    ChangeAvatarModal
  },
  beforeCreate() {},
  async beforeDestroy() {
    await this.getUser();
    return true;
  },
  async created() {
    const response = await Services.ApiService.getChild(this.$route.params.id);
    this.loading = false;
    if (response.code === 0) {
      console.log(response);
      //Cool
      this.child = response.data;
      if (!this.user) await this.getUser();
      this.isParent = this.child.parents.reduce((isParent, parent) => {
        if (isParent) return true;
        return parent.id === this.user.id;
      }, this.isParent);
    } else {
      // notCool
      this.notify({ message: "Sorry, Child not found!", level: "danger" });
      this.$router.push({ path: `/` });
    }
    return true;
  },
  data() {
    return {
      loading: true,
      child: null,
      isParent: false,
      inEditMode: false,
      showCoverModal: false,
      showAddConnectionModal: false,
      showChangeAvatarModal: false,
      childCoverModalImage: null
    };
  },
  methods: {
    onDeleteClicked() {
      this.notify({ message: "Delete button clicked. Still not working" });
    },
    goToUserProfile(user) {
      if (this.user.id === user.id) {
        this.$router.push({ path: `/` });
      } else {
        this.$router.push({ path: `/user/${user.id}` });
      }
    },
    async addConnection(_connection) {
      try {
        this.loading = true;
        const connection = await Services.ApiService.createConnection({
          ..._connection,
          child_id: this.child.id
        });
        if (connection.code === 409) {
          this.loading = false;
          this.showAddConnectionModal = false;
          return this.notify({ message: connection.message, level: "warning" });
        } else if (connection.code !== 0) {
          this.loading = false;
          this.showAddConnectionModal = false;
          return this.notify({ message: connection.message, level: "danger" });
        }
        // debugger;
        this.notify({
          message: `Awesome!\n${connection.data.user.name} is connected to ${this.child.name}`,
          level: "success"
        });
        if (connection.data.is_parent) {
          this.child.parents.push(connection.data.user);
        } else {
          this.child.connections.push(connection.data.user);
        }
        await this.getUser();
      } catch (e) {
        console.error(e);
      }
      this.loading = false;
      this.showAddConnectionModal = false;
      return true;
    },
    onAvatarClicked() {
      if (this.isParent) {
        this.showChangeAvatarModal = true;
      }
    },
    async updateAvatar(event) {
      if (!event.isDefaultImage) {
        try {
          const response = await Services.ApiService.updateChild(
            this.child.id,
            {
              avatar: event.image
            }
          );
          if (response.code === 0) {
            this.notify({ message: "Updated Successfully!", level: "success" });
            this.child.avatar = response.data.child.avatar;
          }
        } catch (e) {
          console.error(e);
        }
      }
      this.showChangeAvatarModal = false;
      return true;
    },
    async changeCover() {
      if (this.childCoverModalImage) {
        this.loading = true;
        try {
          const response = await Services.ApiService.updateChild(
            this.child.id,
            {
              profile_cover: this.childCoverModalImage
            }
          );
          if (response.code === 0) {
            this.child.profile_cover = response.data.child.profile_cover;
          }
        } catch (error) {
          console.error(error.message);
        }
        this.loading = false;
      }
      this.showCoverModal = false;
      this.this.childCoverModalImage = null;
      return true;
    },
    togleEditMode() {
      this.inEditMode = !this.inEditMode;
      if (this.inEditMode) {
        this.showCoverModal = true;
      }
    },
    ...mapActions(["getUser", "notify"])
  },
  computed: {
    age() {
      const years = Moment().diff(this.child.dob, "years");
      const months = Moment().diff(this.child.dob, "months") % 12;
      const isNewBorn = !years && !months;
      let text = "a new boarn!";
      if (!isNewBorn) {
        text = "";
        if (years) text += `${years} years`;
        if (years && months) text += ` and`;
        if (months) text += ` ${months} months`;
        text += " old";
      }
      return `${text}`;
    },
    ...mapGetters(["user"])
  }
};
</script>