1 files changed, 220 insertions, 0 deletions
diff --git a/app/assets/javascripts/groups/components/group_item.vue b/app/assets/javascripts/groups/components/group_item.vue
new file mode 100644
index 00000000000..b1db34b9c50
--- /dev/null
+++ b/app/assets/javascripts/groups/components/group_item.vue
@@ -0,0 +1,220 @@
+<script>
+import eventHub from '../event_hub';
+
+export default {
+  props: {
+    group: {
+      type: Object,
+      required: true,
+    },
+    baseGroup: {
+      type: Object,
+      required: false,
+      default: () => ({}),
+    },
+    collection: {
+      type: Object,
+      required: false,
+      default: () => ({}),
+    },
+  },
+  methods: {
+    onClickRowGroup(e) {
+      e.stopPropagation();
+
+      // Skip for buttons
+      if (!(e.target.tagName === 'A') && !(e.target.tagName === 'I' && e.target.parentElement.tagName === 'A')) {
+        if (this.group.hasSubgroups) {
+          eventHub.$emit('toggleSubGroups', this.group);
+        } else {
+          window.location.href = this.group.groupPath;
+        }
+      }
+    },
+    onLeaveGroup(e) {
+      e.preventDefault();
+
+      // eslint-disable-next-line no-alert
+      if (confirm(`Are you sure you want to leave the "${this.group.fullName}" group?`)) {
+        this.leaveGroup();
+      }
+    },
+    leaveGroup() {
+      eventHub.$emit('leaveGroup', this.group, this.collection);
+    },
+  },
+  computed: {
+    groupDomId() {
+      return `group-${this.group.id}`;
+    },
+    rowClass() {
+      return {
+        'group-row': true,
+        'is-open': this.group.isOpen,
+        'has-subgroups': this.group.hasSubgroups,
+        'no-description': !this.group.description,
+      };
+    },
+    visibilityIcon() {
+      return {
+        fa: true,
+        'fa-globe': this.group.visibility === 'public',
+        'fa-shield': this.group.visibility === 'internal',
+        'fa-lock': this.group.visibility === 'private',
+      };
+    },
+    fullPath() {
+      let fullPath = '';
+
+      if (this.group.isOrphan) {
+        // check if current group is baseGroup
+        if (Object.keys(this.baseGroup).length > 0 && this.baseGroup !== this.group) {
+          // 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);
+          const extraPrefixChars = 3;
+
+          fullPath = gfn.substr(start + length + extraPrefixChars);
+        } else {
+          fullPath = this.group.fullName;
+        }
+      } else {
+        fullPath = this.group.name;
+      }
+
+      return fullPath;
+    },
+    hasGroups() {
+      return Object.keys(this.group.subGroups).length > 0;
+    },
+  },
+};
+</script>
+
+<template>
+  <li
+    @click.stop="onClickRowGroup"
+    :id="groupDomId"
+    :class="rowClass"
+    >
+    <div
+      class="group-row-contents">
+      <div
+        class="controls">
+        <a
+          v-if="group.canEdit"
+          class="edit-group btn"
+          :href="group.editPath">
+          <i
+            class="fa fa-cogs"
+            aria-hidden="true"
+          >
+          </i>
+        </a>
+        <a
+          @click="onLeaveGroup"
+          :href="group.leavePath"
+          class="leave-group btn"
+          title="Leave this group">
+          <i
+            class="fa fa-sign-out"
+            aria-hidden="true"
+          >
+          </i>
+        </a>
+      </div>
+      <div
+        class="stats">
+        <span
+          class="number-projects">
+          <i
+            class="fa fa-bookmark"
+            aria-hidden="true"
+          >
+          </i>
+          {{group.numberProjects}}
+        </span>
+        <span
+          class="number-users">
+          <i
+            class="fa fa-users"
+            aria-hidden="true"
+          >
+          </i>
+          {{group.numberUsers}}
+        </span>
+        <span
+          class="group-visibility">
+          <i
+            :class="visibilityIcon"
+            aria-hidden="true"
+          >
+          </i>
+        </span>
+      </div>
+      <div
+        class="folder-toggle-wrap">
+        <span
+          class="folder-caret"
+          v-if="group.hasSubgroups">
+          <i
+            v-if="group.isOpen"
+            class="fa fa-caret-down"
+            aria-hidden="true"
+          >
+          </i>
+          <i
+            v-if="!group.isOpen"
+            class="fa fa-caret-right"
+            aria-hidden="true"
+          >
+          </i>
+        </span>
+        <span class="folder-icon">
+          <i
+            v-if="group.isOpen"
+            class="fa fa-folder-open"
+            aria-hidden="true"
+          >
+          </i>
+          <i
+            v-if="!group.isOpen"
+            class="fa fa-folder"
+            aria-hidden="true">
+          </i>
+        </span>
+      </div>
+      <div
+        class="avatar-container s40 hidden-xs">
+        <a
+          :href="group.groupPath">
+          <img
+            class="avatar s40"
+            :src="group.avatarUrl"
+          />
+        </a>
+      </div>
+      <div
+        class="title">
+        <a
+          :href="group.groupPath">{{fullPath}}</a>
+        <template v-if="group.permissions.humanGroupAccess">
+        as
+        <span class="access-type">{{group.permissions.humanGroupAccess}}</span>
+        </template>
+      </div>
+      <div
+        class="description">{{group.description}}</div>
+    </div>
+    <group-folder
+      v-if="group.isOpen && hasGroups"
+      :groups="group.subGroups"
+      :baseGroup="group"
+    />
+  </li>
+</template>