group_item.vue

<script>
import eventHub from '../event_hub';

export default {
  props: {
    group: {
      type: Object,
      required: true,
    },
    baseGroup: {
      type: Object,
      required: false,
    },
  },
  methods: {
    toggleSubGroups(e) {
      if (e.target.tagName === 'A' || !this.hasSubgroups) {
        return false;
      }

      return eventHub.$emit('toggleSubGroups', this.group);
    },
    onLeaveGroup(e) {
      e.preventDefault();

      if (confirm(`Are you sure you want to leave the "${this.group.fullName}" group?`)) {
        this.leaveGroup();
      }
    },
    leaveGroup() {
      eventHub.$emit('leaveGroup', this.group.leavePath);
    }
  },
  computed: {
    groupDomId() {
      return `group-${this.group.id}`;
    },
    rowClass() {
      return {
        'group-row': true,
        'is-open': this.group.isOpen,
        'has-subgroups': this.hasSubgroups,
        'no-description': !this.group.description,
      };
    },
    hasSubgroups() {
      // TODO: Server should send a flag to indicate group will have subgroups
      return true;
    },
    fullPath() {
      let fullPath = '';

      if (this.group.isOrphan) {
        // check if current group is baseGroup
        if (this.baseGroup) {
          // Remove baseGroup prefix from our current group.fullName. e.g:
          // baseGroup.fullName: `level1`
          // group.fullName: `level1 / level2 / level3`
          // Result: `level2 / level3`
          const gfn = this.group.fullName;
          const bfn = this.baseGroup.fullName;
          const length = bfn.length;
          const start = gfn.indexOf(bfn);

          fullPath = gfn.substr(start + length + 3);
        } else {
          fullPath = this.group.fullName;
        }
      } else {
        fullPath = this.group.name;
      }

      return fullPath;
    },
  },
};
</script>

<template>
  <li
    @click.stop="toggleSubGroups"
    :id="groupDomId"
    :class="rowClass"
    >
    <div class="controls">
      <a
        v-show="group.canEdit"
        class="edit-group btn"
        :href="group.editPath">
        <i aria-hidden="true" class="fa fa-cogs"></i>
      </a>
      <a @click="onLeaveGroup"
        :href="group.leavePath"
        class="leave-group btn"
        title="Leave this group">
        <i aria-hidden="true" class="fa fa-sign-out"></i>
      </a>
    </div>

    <div class="stats">
      <span class="number-projects">
        <i aria-hidden="true" class="fa fa-bookmark"></i>
        {{group.numberProjects}}
      </span>
      <span class="number-members">
        <i aria-hidden="true" class="fa fa-users"></i>
        {{group.numberMembers}}
      </span>
      <span class="group-visibility">
        <i aria-hidden="true" class="fa fa-globe"></i>
      </span>
    </div>

    <div class="folder-toggle-wrap">
      <span class="folder-caret">
        <i
          v-show="group.isOpen"
          class="fa fa-caret-down" />
        <i
          v-show="!group.isOpen"
          class="fa fa-caret-right" />
      </span>

      <span class="folder-icon">
        <i
          v-show="group.isOpen"
          class="fa fa-folder-open"
          aria-hidden="true" />
        <i
          v-show="!group.isOpen"
          class="fa fa-folder" />
      </span>
    </div>

    <div class="avatar-container s40">
      <a href="/h5bp">
        <img class="avatar s40 hidden-xs" src="http://localhost:3000/uploads/group/avatar/2/logo-extra-whitespace.png" alt="Logo extra whitespace">
      </a>
    </div>

    <div class="title">
      <a :href="group.webUrl">{{fullPath}}</a>
    </div>

    <div class="description">
      {{group.description}}
    </div>

    <group-folder v-if="group.isOpen" :groups="group.subGroups" :baseGroup="group" />
  </li>
</template>