Profile.vue

This is where the user can see their user profile and info.

import

// Importing Vue components for the NavigationBar and Footer
import NavigationBar from "../reusable-layout/NavigationBar.vue";
import Footer from "../reusable-layout/Footer.vue";
// Importing Axios for making HTTP requests
import axios from "axios";

Above, we are importing the NavigationBar and Footer component which is a reusable layout because navigation bars and footers are usually same for each page so instead of writing it for each page, it's better to write it in one Vue page and import it in each page as components

Next, is the "axios" package which is used to make API call to the backend (Laravel). It is important because this is like the key that allows us to communicate with the backend.

export default

// Exporting the Vue component
export default {}

Inside this is where we define data, methods, computed properties, and lifecycle hooks.

components

// Register the imported components
components: {
  NavigationBar,
  Footer,
}

The components option is used to register and make Vue external components available for use within this component

data

// Data properties of the component
data() {
  return {
    domainBackend: "",
    username: "",
    name: "",
    email: "",
    company: "",
    countBookmark: 0,
    countMap: 0,
    countPublishedMap: 0,
  };
}

The data method is used to initialize and define the data properties for this component. See the source code to know what each variable is used for.

mounted

// Lifecycle hook: Executed when the component is mounted to the DOM
mounted() {
  // Scroll to the top of the window when the component is mounted
  window.scrollTo(0, 0);
  // Initialize domainBackend, scroll to the top, and set up the initial UI state
  this.domainBackend = this.$store.state.domainBackend;
  // Initialize user profile and information retrieval
  this.getUserProfile();
  this.getUserInfo();
}

This is called mounted lifecycle hook. The mounted hook is called after the component has been added to the DOM, making it a good place to perform initial setup and actions.

To explain what this mounted hook does:

  1. It scrolls the window to the top so the user sees the content at the beginning of the page.

  2. It gets the backend domain from what is defined in the Vuex.

  3. It gets the user profile and user info from the backend.

methods

// Methods of the component
methods: {}

The methods option is used to define methods that can be called or triggered within a Vue component. These methods are typically used to define the behavior and functionality of the component

getUserInfo

// Method to retrieve user information like bookmark count, map count, and published map count.
getUserInfo() {
  // Prepare a request object with the user's ID obtained from cookies
  const request = {
    userId: this.$cookie.getCookie("L_userId"),
  };
  // Send a POST request to the server's "/api/getUserInfo" endpoint using Axios
  axios
    .post(this.domainBackend + "/api/getUserInfo", request)
    .then((response) => {
      // Handle the response from the server
      if (response.data.SUCCESS == 1) {
        // If the server indicates success, update the component's data properties
        this.countBookmark = response.data.BOOKMARK_COUNT;
        this.countPublishedMap = response.data.PUBLISHED_MAP_COUNT;
        this.countMap = response.data.MAP_COUNT;
      }
    });
}

To explain what this getUserInfo method does:

  1. It sends the user's ID to the backend.

  2. The backend will respond with the user's bookmark, published map, and map count.

getUserProfile

// Method to retrieve and display user profile information from cookies or API response
getUserProfile() {
  // Save a reference to the Vue instance to use inside nested functions
  const vue = this;
  // Check if certain profile information is not available in cookies
  if (!this.$cookie.isCookieAvailable("P_name")) {
    // Prepare a request object with the user's ID obtained from cookies
    const request = {
      userId: this.$cookie.getCookie("L_userId"),
    };
    // Send a POST request to the server's "/api/getUserProfile" endpoint using Axios
    axios
      .post(this.domainBackend + "/api/getUserProfile", request)
      .then((response) => {
        // Handle the response from the server
        if (response.data.SUCCESS == 1) {
          // If the server indicates success, update cookies with user profile information
          this.$cookie.setCookie("P_username", response.data.USERNAME);
          this.$cookie.setCookie("P_name", response.data.NAME);
          this.$cookie.setCookie("P_email", response.data.EMAIL);
          this.$cookie.setCookie("P_company", response.data.COMPANY);
          // Call the function to show the user profile
          showUserProfile();
        }
      });
  } else {
    // If profile information is already available in cookies, directly show the user profile
    showUserProfile();
  }
  // Function to update component data properties with user profile information from cookies
  function showUserProfile() {
    vue.username = vue.$cookie.getCookie("P_username");
    vue.name = vue.$cookie.getCookie("P_name");
    vue.email = vue.$cookie.getCookie("P_email");
    vue.company = vue.$cookie.getCookie("P_company");
  }
}

To explain what this getUserProfile method does:

  1. It checks whether the user's name saved to the cookie exists or not.

  2. If it does not exist, it will send the user's ID to the backend. The backend will respond with the user's username, name, email, and company. Then, the user's profile will be displayed.

  3. If it does exist, the user's profile will be displayed.

updateUserProfile

// Method to update user profile information, send a request to the server, and handle the response
updateUserProfile() {
  // Check if company is null, and if so, set it to an empty string
  if (this.company == null) {
    this.company = "";
  }
  // Check if name is null, and if so, set it to an empty string
  if (this.name == null) {
    this.name = "";
  }
  // Prepare a request object with the user's ID, name, and company obtained from cookies or data properties
  const request = {
    userId: this.$cookie.getCookie("L_userId"),
    name: this.name,
    company: this.company,
  };
  // Send a POST request to the server's "/api/updateUserProfile" endpoint using Axios
  axios
    .post(this.domainBackend + "/api/updateUserProfile", request)
    .then((response) => {
      // Handle the response from the server
      if (response.data.SUCCESS == 1) {
        // If the server indicates success, update cookies with the new name and company
        this.$cookie.setCookie("P_name", this.name);
        this.$cookie.setCookie("P_company", this.company);
        // Display an alert to notify the user that the profile has been updated
        alert("PROFILE UPDATED.");
      }
    });
}

To explain what this updateUserProfile method does:

  1. If the user's company and name variables are null, then it will initialize each of them with an empty string.

  2. Then, it will send the user's ID, name, and company to the backend.

  3. The backend will update the user's profile in the database.

PreviousNotification.vueNextPublishedMap.vue

Last updated