Wednesday, July 7, 2021

Rating review code in vue js

data() {
    return {
      rating: 0,
      commentText: "",
      recentComments: [],
      ratingItems: [
        { id: 1, Scale: 5, Count: 0, bar_value: 0 },
        { id: 2, Scale: 4, Count: 0, bar_value: 0 },
        { id: 3, Scale: 3, Count: 0, bar_value: 0 },
        { id: 4, Scale: 2, Count: 0, bar_value: 0 },
        { id: 5, Scale: 1, Count: 0, bar_value: 0 },
      ],

      commentItems: [
        {
          id: 1,
          name: "Fahim Ahmed",
          image: "john.jpg",
          rating: 5,
          date: "02 June 2020",
          desc: "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.",
        },
        {
          id: 2,
          name: "Fahim Ahmed",
          image: "john.jpg",
          rating: 5,
          date: "02 June 2020",
          desc: "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.",
        },
      ],
    };
  },

computed: {
    totalPersonReted() {
      var total = 0;
      this.ratingItems.forEach((element) => {
        total += element.Count;
      });
      return total;
    },
    ratingTotalCount() {
      var total = 0;
      this.ratingItems.forEach((element) => {
        total += element.Count * element.Scale;
      });
      return total;

    },
    ratingAvg() {
      var avarage = (this.ratingTotalCount / this.totalPersonReted).toFixed(1);
      return parseFloat(avarage);
    },
  },
  
   methods: {
   // this method not needed any more
    submitcomments() {
      this.commentItems.unshift({
        id: this.commentItems.length + 1,
        name: "Md. Mobarak Ali",
        image: "",
        rating: this.rating,
        date: "02 June 2020",
        desc: this.commentText,
      });
      this.ratingItems.find((element) => {
        if (element.Scale == Math.ceil(this.rating)) {
          element.Count += 1;
        }
      });
      this.rating = 0;
      this.commentText = "";
    },
getBarTotal(item) {
      return Math.ceil((item.Count * 100) / this.totalPersonReted);
    },
   }