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

<template>
  <main>
    <section v-if='$store.state.experimentsStore.teams' 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;">Teams are currently in development, expect missing features.</p>
          </div>
        </div>
      </div>
    </section>
  <div class='route_container section route_container--settings'>
    <div class='settings_menu columns'>
      <b-menu class="column box is-11">
        <b-menu-list :label="team.name + ' Team'">
          <b-menu-item
            :label=item.name
            :icon=item.icon
            :key='index'
            v-for='(item, index) in menuItems'
            :class="{'': index === selected}"
            @click='$router.push("/team/" + team.username + "/" + item.route)'
          ></b-menu-item>
        </b-menu-list>
      </b-menu>
    </div>
    <div class='column box'>
      <router-view></router-view>
    </div>
  </div>
  </main>
</template>

<script>
  export default {
    name: 'TeamSettings',
    data () {
      return {
        menuItems: [
          { name: 'General', route: 'general', icon: 'cog' },
          { name: 'Roles', route: 'roles', icon: 'user-lock'},
          { name: 'Users', route: 'users', icon: 'users'},
          { name: 'Join Requests', route: 'requests', icon: 'envelope'},
          { name: 'Team Privacy', route: 'privacy', icon: 'lock'},
          { name: 'Invites', route: 'invites', icon: 'envelope'},
        ],
        selected: 0,
        team: null
      }
    },
    watch: {
      $route (to) {
        this.selected = this.getIndexFromRoute(to.path)
      },
      '$store.state.username' (username) {
        if(!username) {
          this.$router.push('/')
        }
      }
    },
    mounted () {
      this.selected = this.getIndexFromRoute(this.$route.path)
      this.axios.get(process.env.VUE_APP_APIENDPOINT + process.env.VUE_APP_APIVERSION + '/' + 'userinfo')
        .then(res => {
          this.$store.commit('setUsername', res.data.username)
          this.$store.commit('setEmail', res.data.email)
          this.$store.commit('setEmailVerified', res.data.emailVerified)
          this.$store.commit('setAdmin', res.data.admin)
          this.$store.commit('setKoins', res.data.koins)
        })
        .catch(e => {
          this.showConn(e)
        })
      this.axios
        .get(process.env.VUE_APP_APIENDPOINT + process.env.VUE_APP_APIVERSION + `/` + `teams/view/${this.$route.params.username}`)
        .then(res => this.team = res.data)
    },
    methods: {
      getIndexFromRoute (path) {
        let selectedIndex
        let route = path.split('/')[2]

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

        return selectedIndex
      }
    },
    beforeRouteEnter (to, from, next) {
      next(vm => {
        if(!vm.$store.state.username) {
          vm.$store.commit('setAccountModalState', true);
          next('/')
        }
      })
    }
  }
</script>

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

  .route_container--settings {
    display: flex;
    align-items: flex-start
  }

  .settings_menu {
    width: 15rem;
    padding: 1rem;
    border-radius: 0.25rem;

    @at-root #{&}__title {
      cursor: default;
      font-weight: 500;
      font-variant: small-caps;
      font-size: 1.125rem;
      padding-left: 0.25rem;
      margin-bottom: 0.5rem;
    }

    @at-root #{&}__item  {
      padding: 0.5rem 1rem;
      margin-bottom: 0.25rem;
      padding-right: 0;
      transition: background-color 0.2s;
      cursor: pointer;
      position: relative;
      border-radius: 0.25rem;

      &:first-child { margin-top: 0.5rem; }
      &:last-child { margin-bottom: 0.5rem; }

      &:hover { background-color: $color__lightgray--primary; }

      &::before {
        content: '';
        display: inline-block;
        width: 0.25rem;
        z-index: 1;
        height: 100%;
        position: absolute;
        left: 0;
        border-radius: 0.25rem 0 0 0.25em;
        top: 0;
        background-color: $color__gray--darkest;
        opacity: 0;
        transition: opacity 0.2s;
      }

      span {
        color: $color__text--secondary;
        margin-right: 0.5rem;
      }

      @at-root #{&}--selected {
        background-color: $color__lightgray--darker;
        color: $color__text--primary;

        span {
          color: $color__text--primary;
        }

        &:hover { background-color: $color__lightgray--darker; }

        &::before {
          opacity: 1;
        }
      }
    }
  }
  .settings_page {
    width: calc(100% - 15rem);
    background-color: #fff;
    border-radius: 0.25rem;
    margin-left: 2rem;
    border: thin solid $color__gray--darker;
  }

  @media (max-width: $breakpoint--tablet) and (min-width: $breakpoint--phone) {
    div.settings_menu, div.settings_page {
      width: calc(100% - 4rem);
      margin: 0.5rem 2rem;
      padding: 1rem;
    }
  }

  @media (max-width: $breakpoint--tablet) {
    .route_container--settings {
      flex-direction: column;
    }

    .settings_menu {
      width: 100%;

      @at-root #{&}__items {
        display: flex;
        align-items: baseline;
      }

      @at-root #{&}__item {
        width: 7rem;
        margin-right: 0.5rem;
        color: $color__text--primary;

        &:first-child, &:last-child {
          margin-bottom: 0;
          margin-top: 0;
        }

        &::before {
          height: 0.2rem;
          width: 100%;
          left: 0;
          border-radius: 0 0 1rem 1rem;
          top: auto;
          bottom: 0;
        }
      }
    }

    .settings_page {
      width: 100%;
      margin: 0;
      margin-top: 1rem;
    }
  }
</style>