ShowEasyFrontEnd/FrontEnd/components/exhibition/ExhibitionReviews.vue

<template>
  <v-row class="mb-6">
    <v-col cols="12">
      <div style="font-size: 1.5em">
        <samp style="color: #ee9546">{{ exhibition.rating }}</samp>
        <span class="mdi mdi-star" style="color: #ee9546"></span>
        <samp style="color: #9c9c9c"
          >({{ exhibition.reviewCount }} reviews)</samp
        >
      </div>
      <div
        style="
          background: rgba(248, 248, 248, 0.4);
          border-radius: 15px;
          padding: 15px;
          font-size: 1.2em;
          position: relative;
        "
      >
        <div
          style="
            position: absolute;
            border-radius: 15px;
            width: 100%;
            height: 100%;
            top: 0px;
            left: 0px;
            background: rgba(248, 248, 248, 0.69);
          "
        ></div>
        <div class="reviewLogin">
          <v-btn
            color="warning"
            class="
              recommend-tag
              no-text-transform
              text-space-1
              rounded-lg
              ml-2
              mt-2
            "
          >
            Log in / Sign up
          </v-btn>
        </div>

        <div>
          <div>Write a review</div>
          <p></p>
          <div>
            <v-rating dense half-increments readonly size="24"></v-rating>
          </div>
          <div>
            <v-radio-group>
              <v-radio label="Visitor" value="radio-1"> </v-radio>
              <v-radio label="Exhibitor" value="radio-1"> </v-radio>
            </v-radio-group>
          </div>
          <div>
            <v-btn
              outlined
              class="
                warning--text
                recommend-tag
                no-text-transform
                text-space-1
                rounded-lg
                ml-4
                mt-2
              "
            >
              Variety of Products
            </v-btn>
            <v-btn
              outlined
              class="
                warning--text
                recommend-tag
                no-text-transform
                text-space-1
                rounded-lg
                ml-4
                mt-2
              "
            >
              Great Network Opportunity
            </v-btn>
            <v-btn
              outlined
              class="
                warning--text
                recommend-tag
                no-text-transform
                text-space-1
                rounded-lg
                ml-4
                mt-2
              "
            >
              Good Quality of Participants
            </v-btn>
          </div>
          <p></p>
          <div style="background: #f8f8f8; border-radius: 15px">
            <div style="color: #9c9c9c; padding: 15px; height: 124px">
              Tell us what do you think ...
            </div>
          </div>
          <div class="addReviewsBtn">
            <div class="addReviewsLeftBtn">
              <v-btn
                style="border-style: solid; border-color: #7997ff"
                class="
                  primary--text
                  recommend-tag
                  no-text-transform
                  text-space-1
                  rounded-lg
                  ml-2
                  mt-2
                "
              >
                <v-icon>mdi-plus</v-icon>
                Add Photo
              </v-btn>
            </div>
            <div class="addReviewsRightBtn">
              <v-btn
                class="
                  warning--text
                  recommend-tag
                  no-text-transform
                  text-space-1
                  rounded-lg
                  ml-2
                  mt-2
                "
              >
                Clear
              </v-btn>
              <v-btn
                color="warning"
                class="
                  recommend-tag
                  no-text-transform
                  text-space-1
                  rounded-lg
                  ml-2
                  mt-2
                "
              >
                Post
              </v-btn>
            </div>
          </div>
        </div>
      </div>
      <div class="reviewsSelect">
        <div class="reviewsFilterSelect">
          <div>Filter</div>
          <div>
            <v-select
              v-model="filterName"
              style="width: 170px"
              :items="filter"
              dense
              outlined
            ></v-select>
          </div>
        </div>
        <div class="reviewsSortbySelect">
          <div>Sort by</div>
          <div>
            <v-select
              v-model="sortByName"
              style="width: 260px"
              :items="sortBy"
              dense
              outlined
            ></v-select>
          </div>
        </div>
      </div>
      <!--div v-if="Array.isArray(exhibition.reviews.users)" v-for="item in exhibition.reviews.users" :key="item.id">
        <div class="usersReviewsArea">
          <div class="usersPeoplePic">
            <div class="usersPeoplePhoto">
              <v-avatar size="100">
                <v-img :src="item.user.avatar"></v-img>
              </v-avatar>
            </div>
            <p></p>
            <div class="reviewsUsersName">
              <div></div>
              <div style="font-size: 1.5em">
                <b>{{ item.user.name }}</b>
              </div>
              <div></div>
            </div>
            <div style="color: #9c9c9c" class="usersHeadline">
              <div></div>
              <div style="font-size: 1.5em">{{ item.user.headline }}</div>
              <div></div>
            </div>
          </div>
          <div class="usersReviewsDetail">
            <div class="usersReviewsStarTitleArea">
              <div class="usersReviewsStar">
                <v-rating
                  :value="item.rating"
                  color="amber"
                  dense
                  :length="starLength"
                  half-increments
                  readonly
                  size="15"
                ></v-rating>
              </div>
              <div class="usersReviewsTitle">
                &nbsp;&nbsp;<b>{{ getstarLength(item.title) }}</b>
              </div>
            </div>
            <div class="col-md-12 col-md-offset-3 usersReviewsBtn">
              <v-btn
                v-for="array in item.tags"
                :key="array.id"
                outlined
                class="
                  warning--text
                  recommend-tag
                  no-text-transform
                  text-space-1
                  rounded-lg
                  mt-2
                "
              >
                {{ array.name }}
              </v-btn>
            </div>
            <div>
              <v-col>{{ item.comment }}</v-col>
            </div>
            <div>
              <v-col>
                <v-img
                  v-for="array in item.images"
                  :key="array.images"
                  :src="array"
                  width="90px"
                  height="90px"
                  style="display: inline-block; margin-left: 10px"
                ></v-img>
              </v-col>
            </div>
            <div style="color: #9c9c9c">
              <v-col>
                {{ item.date }}
              </v-col>
            </div>
          </div>
        </div>
      </div-->
    </v-col>
  </v-row>
</template>

<script>
export default {
  name: "ExhibitionReviews",
  props: {
    exhibition: {
      type: Object,
      default: () => ({
        rating: "",
        reviewCount: "",
        reviews: {},
      }),
    },
  },
  data() {
    return {
      filterName: "For Everyone",
      filter: ["For Everyone", "For Exhibitor", "For Visitor"],
      sortByName: "Date:Newest to Oldest",
      sortBy: [
        "With Photo",
        "Date:Newest to Oldest",
        "Rating(High to Low)",
        "Rating(Low to High)",
      ],
      starLength: 0,
    };
  },
  methods: {
    getstarLength: function (title) {
      switch (title) {
        case "Highly recommended":
          this.starLength = 5;
          break;
        case "Worth going":
          this.starLength = 4;
          break;
        case "Good":
          this.starLength = 3;
          break;
        default:
          this.starLength = 0;
          break;
      }
      return title;
    },
    dateFormat: function (date) {
      return date.replaceAll("-", "/");
    },
  },
};
</script>

<style>
.reviewLogin {
  position: absolute;
  top: 40%;
  left: 40%;
}
.addReviewsLeftBtn {
  grid-area: addReviewsLeftBtn;
  text-align: left;
}
.addReviewsRightBtn {
  grid-area: addReviewsRightBtn;
  text-align: right;
}
.addReviewsBtn {
  display: grid;
  grid-template-areas: "addReviewsLeftBtn addReviewsRightBtn";
}
.reviewsFilterSelect {
  grid-area: reviewsFilterSelect;
}
.reviewsSortbySelect {
  grid-area: reviewsSortbySelect;
}
.reviewsSelect {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas: "reviewsFilterSelect reviewsSortbySelect";
}

.usersPeoplePic {
  grid-area: usersPeoplePic;
  text-align: center;
}
.usersReviewsDetail {
  grid-area: usersReviewsDetail;
  background: #f8f8f8;
  border-radius: 15px;
  padding: 15px;
  margin-left: 50px;
}
.usersReviewsArea {
  display: grid;
  grid-template-columns: 1fr 5fr;
  grid-template-areas: "usersPeoplePic usersReviewsDetail";
}
.usersReviewsStar {
  grid-area: usersReviewsStar;
  margin-left: 10px;
}
.usersReviewsTitle {
  grid-area: usersReviewsTitle;
}
.usersReviewsStarTitleArea {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas: "usersReviewsStar usersReviewsTitle";
}
@media only screen and (min-width: 0px) and (max-width: 899px) {
  .usersPeoplePhoto {
    grid-area: usersPeoplePhoto;
  }
  .reviewsUsersName {
    grid-area: reviewsUsersName;
    vertical-align: middle;
    margin-left: 30px;
    display: grid;
    grid-template-rows: repeat(3);
  }
  .usersHeadline {
    grid-area: usersHeadline;
    vertical-align: middle;
    margin-left: 20px;
    display: grid;
    grid-template-rows: repeat(3);
  }
  .usersReviewsBtn {
    display: none;
  }
  .usersPeoplePic {
    grid-area: usersPeoplePic;
    text-align: left;
    padding: 50px;
    margin-left: 10px;
    display: grid;
    grid-template-columns: auto auto 1fr;
    grid-template-areas: "usersPeoplePhoto reviewsUsersName usersHeadline";
  }
  .usersReviewsDetail {
    grid-area: usersReviewsDetail;
    background: #f8f8f8;
    border-radius: 15px;
    padding: 5px;
  }
  .usersReviewsArea {
    display: grid;
    grid-template-areas:
      "usersPeoplePic usersPeoplePic"
      "usersReviewsDetail usersReviewsDetail";
  }
  .usersReviewsStar {
    grid-area: usersReviewsStar;
    font-size: 1.5em;
  }
  .usersReviewsTitle {
    grid-area: usersReviewsTitle;
    font-size: 1.5em;
  }
}
</style>