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="element tw-w-full md:tw-w-[320px]">
            <userSearchBar
              :input="{
                id: 'searchQuery',
                placeHolder: $t('Enter exhibitions, booking number ...'),
                type: 'text',
              }"
              :default="searchQuery"
              @change="searchQuery = $event"
            ></userSearchBar>
          </div>
        </div>
        <bookingListContent
          :searchQuery="searchQuery"
          :width="width"
        ></bookingListContent>
        <section class="step sercion-6 tw-w-full md:tw-px-0 xl:tw-col-span-2">
          <h2 class="title-icon-left t16 md:t20 xl:t18 xl:tw-font-bold">
            {{ $t("You might like ...") }}
          </h2>
          <userYouMightLike
            :list="youMightLikeList"
            :countrycode="countrycode"
            :regionName="regionName"
          >
          </userYouMightLike>
        </section>
      </div>
    </div>
  </div>
</template>
<script>
import TwoDots from "@/components/TwoDots";
import userSearchBar from "@/components/user/userSearchBar.vue";
import bookingListContent from "@/components/user/bookingListContent.vue";
import userYouMightLike from "@/components/user/userYouMightLike.vue";
import userSidebar from "@/components/user/userSidebar.vue";
export default {
  name: "myBooking",
  layout: "profile_gray",

  components: {
    TwoDots,
    userSearchBar,
    bookingListContent,
    userYouMightLike,
    userSidebar,
  },
  data() {
    return {
      firstName: "",
      lastName: "",
      userData: {},
      userCompanyId: [],
      userCompanyList: [],
      userAddNewCompanyList: [],
      userSavedExhibitionList: [],
      userVisibleSavedExhibitionList: [],
      yearOptions: [],
      monthOptions: [],
      dayOptions: [],
      yearSelect: "",
      monthSelect: "",
      daySelect: "",
      languageSelect: {
        en: "",
        zhtw: "",
      },
      phoneValid: false,
      width: 0,
      searchQuery: "",
      youMightLikeList: [],
      countrycode: [],
      regionName: [],
    };
  },
  created() {
    // this.fetchUserData();
    // this.getLocationName();
    // this.getYouMightLikeData();
    if (process.browser) {
      window.addEventListener("resize", this.handleResize);
    }
    this.handleResize();
  },
  mounted() {
    this.yearOptions = Array.from(new Array(103), (val, index) =>
      (index + 1920).toString()
    );
    this.monthOptions = Array.from(new Array(13), (val, index) => {
      if (index < 10 && index > 0) {
        return "0" + index.toString();
      }
      if (index >= 10) {
        return index.toString();
      }
    });
    this.dayOptions = Array.from(new Array(32), (val, index) => {
      if (index < 10 && index > 0) {
        return "0" + index.toString();
      }
      if (index >= 10) {
        return index.toString();
      }
    });
    this.$nextTick(() => {
      window.addEventListener("resize", this.onResize);
    });
  },
  destroyed() {
    if (process.browser) {
      window.removeEventListener("resize", this.handleResize);
    }
  },
  methods: {
    patchUserData() {
      if (this.width < 1366) {
        this.isEditInfoDialogActive = !this.isEditInfoDialogActive;
      }
      this.userData.prefer_country = JSON.stringify(this.languageSelect);
      if (this.width < 768) {
        this.userData.birth_date =
          this.yearSelect + "-" + this.monthSelect + "-" + this.daySelect;
        if (this.userData.birth_date.length < 10) {
          this.userData.birth_date = null;
        }
      }
      const patchData = JSON.parse(JSON.stringify(this.userData));
      delete patchData.LoginLog;
      delete patchData.UserCompany;
      delete patchData.UserSocialRelation;
      delete patchData.UserExhibition;
      this.$axios
        .put(
          `/member/users/${this.$route.params.id}?jwt=${
            this.$auth.$storage.getUniversal("jwt").token || ""
          }`,
          patchData
        )
        .then((res) => {
          this.successUpdate = !this.successUpdate;
          setTimeout(() => {
            this.successUpdate = !this.successUpdate;
          }, 1000);
          this.fetchUserData();
          this.$auth.$storage.setUniversal("userPicture", patchData.picture);
          this.$auth.$storage.setUniversal("userLastName", patchData.last_name);
          this.$store.dispatch("updatePicture");
        })
        .catch((err) => {
          console.log(err);
        });
    },
    fetchUserData() {
      this.$axios
        .get(
          `/member/users/${
            this.$auth.$storage.getUniversal("jwt").user_id
          }?jwt=${this.$auth.$storage.getUniversal("jwt").token}`
        )
        .then((res) => {
          this.userData = res.data;
          this.userCompanyId = res.data.UserCompany;
          this.firstName = res.data.first_name;

          this.lastName = res.data.last_name;
          this.userData.phone
            ? (this.phoneValid = true)
            : (this.phoneValid = false);
          !this.userData.prefer_country &&
          typeof this.userData.prefer_country === "object"
            ? this.userData.prefer_country
            : (this.languageSelect = JSON.parse(this.userData.prefer_country));
          if (
            !this.userData.birth_date &&
            typeof this.userData.birth_date === "object"
          ) {
            this.yearSelect = "";
            this.monthSelect = "";
            this.daySelect = "";
          } else {
            const date = this.userData.birth_date.split("-");
            this.yearSelect = date[0];
            this.monthSelect = date[1];
            this.daySelect = date[2];
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    handleImageUpdate(pictureURL) {
      this.userData.picture = pictureURL;
      this.patchUserData();
      this.closeCropDialog();
    },

    showCode(object) {
      this.userData.country_code = object.dialCode;
    },
    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();
    },
    async getLocationName() {
      this.$axios
        .get(
          `/t/exhibitions/locations?lang=${this.$i18n.localeProperties["langQuery"]}&sort=False`
        )
        .then((response) => {
          this.regionName = response.data.region_ori;
          this.countrycode = response.data.country_ori;
        })
        .catch((error) => console.log(error));
    },
    async getYouMightLikeData() {
      this.$axios
        .get(
          `https://dev-api-console.showeasy.com/user-services/advertisements?region=0&country=0&city=0&expo=0&counts=3&lang_code=${this.$i18n.localeProperties["langQuery"]}`
        )
        .then((res) => {
          this.youMightLikeList = res.data;
        })
        .catch((error) => console.log(error));
    },
    handleResize() {
      if (process.browser) {
        this.width = window.innerWidth;
      }
    },
  },
};
</script>

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