gitlab-org--gitlab-foss/app/assets/javascripts/groups/components/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.isExpandable) {
        return false;
      }

      return eventHub.$emit('toggleSubGroups', this.group);
    },
  },
  computed: {
    groupDomId() {
      return `group-${this.group.id}`;
    },
    rowClass() {
      return {
        'group-row': true,
        'is-open': this.group.isOpen,
        'is-expandable': this.isExpandable,
        'no-description': !this.group.description,
      };
    },
    isExpandable() {
      return Object.keys(this.group.subGroups).length > 0;
    },
    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 class="edit-group btn" href="#edit">
        <i aria-hidden="true" class="fa fa-cogs"></i>
      </a>
      <a class="leave-group btn" title="Leave this group" href="#leave">
        <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>