cubash-archive/frontend/src/components/routes/MarketplaceItem.vue

<style>
.limit{
  margin-top: 0.5rem;
  word-break: break-all;
}
.onsale {
  text-decoration: line-through;
}
</style>
<template>
  <main>
    <section v-if='$store.state.experimentsStore.marketplace' class="hero is-info">
      <div class="hero-body" style="padding: 1rem 1rem !important;">
        <div class="mobile-container">
          <div class="container">
            <p style="text-align: center;">The Marketplace is currently in development, expect missing features.</p>
          </div>
        </div>
      </div>
    </section>
    <div v-if="$store.state.experimentsStore.marketplace" class='route_container user_route'>
      <div class="section profile-heading card">
        <div class="columns is-mobile is-multiline">
          <div class="column is-3">
            <figure class="image is-512 is-centered">
              <img v-if="user.picture !== 'default' && user.approved" width="128px" height="128px" :src="'http://localhost/marketplace/avatars/' + user.previewFile + '.png'">
              <img v-if="$store.state.theme === 'light' && !user.approved" width="128px" height="128px" src="http://localhost/marketplace/pending-light.png">
              <img v-if="$store.state.theme === 'dark' && !user.approved" width="128px" height="128px" src="http://localhost/marketplace/pending-dark.png">
              <img v-if="!$store.state.theme && !user.approved" width="128px" height="128px" src="http://localhost/marketplace/pending-light.png">
            </figure>
          </div>
          <div class="column is-7">
            <p>
              <span class="title is-bold limit">{{user.name}}</span><br>
              <span class="subtitle limit">Created by <router-link :to="'/u/' + user.User.username"> @{{user.User.username}}</router-link></span>
              <br>
            </p>
            <p class="limit">
              {{user.description}}
              <br>
              Asset uploaded at {{user.createdAt | formatDate}}
            </p>
            <b-button class="is-danger" @click="remove()" v-if="$store.state.admin">
              Remove Item
            </b-button>
            <b-button @click="reRender()" v-if="$store.state.admin">
              Re-Render Preview
            </b-button>
          </div>
          <div class="column" style="float: right">
            <p v-if="!user.saleEnabled" style="float: right;">This item costs <b>{{user.price}} Koins</b></p>
            <p v-if="user.saleEnabled" style="float: right;">This item costs <b class="onsale">{{user.price}}</b><b> {{user.salePrice}} Koins</b></p><br>
            <p v-if="user.saleEnabled && !user.salePrice" style="float: right;">This item is on sale and is free</p><br>
            <b-button @click="buyItem()" v-if="!purchased && !loading && !failStatus" style="float: right;">Buy item</b-button>
            <b-button disabled v-if="loading && !failStatus" style="float: right;">Loading purchase status</b-button>
            <b-button disabled v-if="purchased && !loading && !failStatus" style="float: right;">Item Owned</b-button>
            <b-button v-if="user.UserId === $store.state.UserId" style="float: right;">Edit Item</b-button>
            <b-button disabled v-if="failStatus" style="float: right;">Failed to load status</b-button>
            <b-tooltip v-if="user.limited && purchased && !loading && !failStatus" style="float: right;" label="You own this item, if you don't want it anymore, you can sell it and put it on the market, this is only available for Limited Edition items">
              <b-button @click="sellItem()" style="float: right;">Sell item</b-button>
            </b-tooltip>
          </div>
        </div>
      </div>
      <br>
      <div class="column">
        <b-button v-if="user.limited" class="menu_button" :key='"user-menu-item-wall"' @click='$router.push(`/m/${user.id}/auction`)'>
          Auction
        </b-button>
        <b-tooltip v-if="!user.limited" label="Only limited edition items support auctioning">
          <b-button disabled="disabled" class="menu_button disabled" :key='"user-menu-item-wall"'>
            Auction
          </b-button>
        </b-tooltip>
        <br/> <br/>
        <div class="column box">
          <router-view :username='username'></router-view>
        </div>
      </div>
    </div>
  </main>
</template>

<script>
  import MenuButton from '../MenuButton'
  import AjaxErrorHandler from "@/assets/js/errorHandler";

export default {
  name: 'MarketplaceItem',
  // eslint-disable-next-line vue/no-unused-components
  components: {MenuButton},
  data () {
    return {
      menuItems: [
        /* { name: 'Wall', route: 'wall' }, */
        { name: 'Posts', route: 'posts' },
        { name: 'Threads', route: 'threads' },
        /* { name: 'Friends', route: 'friends' } */
      ],
      selected: 0,

      username: "unknown",
      buy: {
        loading: false
      },
      user: null,
      purchased: false,
      loading: true,
      failStatus: false,
      savings: 0,
    }
  },
  watch: {
    $route (to) {
      this.selected = this.getIndexFromRoute(to.path)
    }
  },
  computed: {
    userColor () {
      if(this.user) {
        return this.user.color
      } else {
        return null
      }
    },
    userPicture () {
      if(this.user && this.user.picture) {
        return 'http://localhost/user/avatars/full/' + this.user.picture + '.png'
      } else {
        return null
      }
    }
  },
  methods: {
    remove() {
      this.axios
        .put(process.env.VUE_APP_APIENDPOINT + process.env.VUE_APP_APIVERSION + '/' + 'admin/marketplace/approve', {
          id: this.user.id,
          approve: false,
          delete: true
        })
        .then(() => {
          this.resetFetchData()
        })
        .catch(e => {
          AjaxErrorHandler(this.$store)(e, error => {
            this.description.error = error.message
          })
        })
    },
    reRender () {
      this.axios.put(process.env.VUE_APP_APIENDPOINT + process.env.VUE_APP_APIVERSION + '/' + 'marketplace/rerender/' + this.user.id)
      .then(() => {
        this.resetFetchData()
      })
      .catch((e) => {
        AjaxErrorHandler(this.$store)(e)
      })
    },
    buyItem () {
      this.axios.get(process.env.VUE_APP_APIENDPOINT + process.env.VUE_APP_APIVERSION + '/' + 'marketplace/purchase/' + this.user.id)
        .then(() => {
        this.buy.loading = false
          this.axios
            .get(process.env.VUE_APP_APIENDPOINT + process.env.VUE_APP_APIVERSION + `/` + `marketplace/check/${this.$route.params.id}`)
            .then(res => this.purchased = res.data.purchased, this.loading = false)
      }).catch(e => {
        this.buy.loading = false

        AjaxErrorHandler(this.$store)(e)
      })
    },
    getPercentageChange() {
      const decreaseValue = this.user.price - this.user.salePrice;

      this.savings = (decreaseValue / this.user.price) * 100;
    },
    resetFetchData () {
      this.offset = 0;
      this.users = [];

      this.fetchData();
    },
    fetchData () {
      this.axios
        .get(process.env.VUE_APP_APIENDPOINT + process.env.VUE_APP_APIVERSION + `/` + `marketplace/view/${this.$route.params.id}`)
        .then(res => this.user = res.data)
    },
    getIndexFromRoute (path) {
      let selectedIndex
      let route = path.split('/')[3]

      this.menuItems.forEach((item, index) => {
        if(item.route === route) {
          selectedIndex = index
        }
      })

      return selectedIndex
    }
  },
  created () {
    this.resetFetchData()
    this.selected = this.getIndexFromRoute(this.$route.path)
    this.fetchData()
    this.axios
      .get(process.env.VUE_APP_APIENDPOINT + process.env.VUE_APP_APIVERSION + `/` + `marketplace/check/${this.$route.params.id}`)
      .then(res => this.purchased = res.data.purchased, this.loading = false)
  }
}
</script>

<style lang='scss' scoped>
@import '../../assets/scss/variables.scss';

.user_route {
  width: 70%;
}

.user_header {
  display: flex;
  align-items: flex-start;
  margin-bottom: 1.5rem;
  background-color: #fff;
  padding: 1rem;
  border-radius: 0.25rem;
  border: thin solid $color__gray--darker;

  @at-root #{&}__icon {
    height: 128px;
    width: 128px;
    line-height: 5.5rem;
    @include text($font--role-emphasis, 5rem);
    text-align: center;
    background-color: $color__gray--darkest;
    color: #fff;
  }
  @at-root #{&}__info {
    display: flex;
    flex-direction: column;
    margin-left: 1rem;
    width: calc(100% - 6rem);
  }
  @at-root #{&}__username {
    margin-top: -0.25rem;
    font-size: 2rem;
    font-weight: bold
  }
  @at-root #{&}__date {
    color: $color__darkgray--primary;
    font-size: 1.5rem;
  }
}
.user_description {
  white-space: pre-line;
  margin-top: 0.5rem;
}
.user__view_holder {
  display: flex;
  flex-direction: row;
}
.user__links {
  width: 8rem;
  display: table;

  @at-root #{&}__menu_item {
    cursor: pointer;
    margin-bottom: 0.5rem;
    position: relative;

    &:hover { color: $color__darkgray--primary; }

    @at-root #{&}--selected {
      font-weight: bold;
    }
  }
}
.menu_button {
  margin: 2px;
}
.user__view {
  flex-grow: 1;
  width: 0;
}

@media (max-width: $breakpoint--tablet) {
  .user_route {
    width: inherit;
    overflow-x: hidden;
  }
  .user__view_holder {
    flex-direction: column;
  }
  .user_header {
    @at-root #{&}__icon {
      height: 256px;
      width: 256px;
    }
    @at-root #{&}__username {
      font-size: 1.75rem;
    }
    @at-root #{&}__date {
      font-size: 1.25rem;
    }
  }
  .user__links {
    display: flex;
    flex-direction: row;

    @at-root #{&}__menu_item {
      margin-right: 0.5rem;

      &:hover {
        color: $color__text--primary;
      }

      @at-root #{&}--selected::before {
        width: 100%;
        height: 0.2rem;
        left: 0rem;
        top: auto;
        border-radius: 1rem;
        bottom: -0.375rem;
      }
    }
  }
  .user__view {
    width: auto;
  }
}
</style>