ShowEasyFrontEnd/FrontEnd/pages/user/myBooking.vue

<template>
  <div class="myBooking xl:tw-max-w-[1246px] xl:tw-mx-auto">
    <div class="xl:tw-flex xl:tw-justify-between xl:tw-items-start">
      <userSidebar
        :userData="userData"
        :firstName="firstName"
        :lastName="lastName"
        class="tw-hidden xl:tw-block"
      >
      </userSidebar>
      <!-- <div class="xl:tw-hidden"></div> -->
      <div
        class="tw-bg-transparent xl:tw-bg-white xl:tw-p-[30px] xl:tw-rounded-[20px] xl:tw-min-w-[900px] xl:tw-max-w-[900px]"
      >
        <div
          class="tw-flex tw-flex-col md:tw-flex-row md:tw-justify-between md:tw-items-center tw-mb-[20px] md:tw-mb-[34px]"
        >
          <div
            class="tw-text-[20px] tw-font-bold tw-text-base-primary tw-mb-[20px] md:t24 md:tw-mb-0"
          >
            <two-dots class="tw-mr-[30px]"></two-dots>{{ $t("My Bookings") }}
          </div>
          <div class="tw-w-full md:tw-max-w-[320px]">
            <userSearchBar
              :input="{
                id: 'searchQuery',
                placeHolder: $t('Enter exhibitions, booking number ...'),
                type: 'text',
              }"
              :default="searchQuery"
              @search="change"
            ></userSearchBar>
          </div>
        </div>
        <bookingListContent
          :searchValue="searchValue"
          :width="width"
          :userData="userData"
        ></bookingListContent>
      </div>
    </div>
  </div>
</template>
<script>
import TwoDots from "@/components/TwoDots";
import bookingListContent from "@/components/user/bookingListContent.vue";
import userSidebar from "@/components/user/userSidebar.vue";
import userSearchBar from "@/components/user/userSearchBar.vue";
export default {
  name: "myBooking",
  layout: "profile_gray",

  components: {
    TwoDots,
    bookingListContent,
    userSidebar,
    userSearchBar
  },
  data() {
    return {
      firstName: "",
      lastName: "",
      userData: {},
      width: 0,
      youMightLikeList: [],
      countrycode: [],
      regionName: [],
      searchValue: "",
      searchQuery: "",
    };
  },
  created() {
    this.fetchUserData();
    if (process.browser) {
      window.addEventListener("resize", this.handleResize);
    }
    this.handleResize();
  },
  mounted() {
    this.$nextTick(() => {
      window.addEventListener("resize", this.onResize);
    });     
  },
  destroyed() {
    if (process.browser) {
      window.removeEventListener("resize", this.handleResize);
    }
  },
  methods: {
    //Get Member Info
    fetchUserData() {
      this.$axios
        .get(
          `/trending/api/Members/Info`
        )
        .then((response) => {
          //console.log(JSON.stringify(response));
          if(response && response.data && response.data.DATA && response.data.DATA.rel){
            let data = response.data.DATA.rel
            if(data){
              this.userData = data;
              this.firstName = this.userData.FirstName;
              this.lastName = this.userData.LastName;

            }
          }
        })
        .catch((error) => {
          console.log(error);
        });
    },

    logout() {
      this.$auth.$storage.removeUniversal("jwt");
      this.$auth.$storage.removeUniversal("userPicture");
      this.$auth.$storage.removeUniversal("userLastName");
      this.$auth.$storage.removeUniversal("userBeforePath");

      if (width < 1024) {
        this.$router.push(this.localePath("/"));
      } else {
        this.$router.push(this.localePath("/user"));
      }
      this.$auth.logout();
    },

    handleResize() {
      if (process.browser) {
        this.width = window.innerWidth;
      }
    },
    // query(value){
    //   this.searchValue = value;
    // },
    change(value){
      this.searchValue = value;
      console.log("shitValue:" + this.searchValue);

    }
  },
};
</script>

<style scoped lang="scss"></style>