1 files changed, 109 insertions, 0 deletions
diff --git a/app/assets/javascripts/groups/components/project_item.vue b/app/assets/javascripts/groups/components/project_item.vue
new file mode 100644
index 00000000000..337e1faeae1
--- /dev/null
+++ b/app/assets/javascripts/groups/components/project_item.vue
@@ -0,0 +1,109 @@
+<script>
+import tooltip from '../../vue_shared/directives/tooltip';
+import { PROJECT_VISIBILITY_TYPE, VISIBILITY_TYPE_ICON } from '../constants';
+import identicon from '../../vue_shared/components/identicon.vue';
+
+export default {
+  components: {
+    identicon,
+  },
+  directives: {
+    tooltip,
+  },
+  props: {
+    project: {
+      type: Object,
+      required: true,
+    },
+  },
+  computed: {
+    projectDomId() {
+      return `project-${this.project.id}`;
+    },
+    rowClass() {
+      return {
+        'no-description': !this.project.description,
+      };
+    },
+    visibilityIcon() {
+      return VISIBILITY_TYPE_ICON[this.project.visibility];
+    },
+    visibilityTooltip() {
+      return PROJECT_VISIBILITY_TYPE[this.project.visibility];
+    },
+    hasAvatar() {
+      return this.project.avatar_url !== null;
+    },
+  },
+};
+</script>
+
+<template>
+  <li
+    class="group-row project-row"
+    :id="projectDomId"
+    :class="rowClass"
+    >
+    <div class="group-row-contents project-row-contents">
+      <div class="stats">
+        <span class="project-stars">
+          <i
+            class="fa fa-star"
+            aria-hidden="true"/>
+          {{project.star_count}}
+        </span>
+        <span
+          v-tooltip
+          class="project-visibility"
+          data-placement="left"
+          data-container="body"
+          :title="visibilityTooltip"
+        >
+          <i
+            class="fa"
+            :class="visibilityIcon"
+            aria-hidden="true"/>
+        </span>
+      </div>
+      <div class="folder-toggle-wrap">
+        <span class="folder-icon">
+          <i
+            class="fa fa-bookmark"
+            aria-hidden="true"/>
+        </span>
+      </div>
+      <div class="avatar-container s40 hidden-xs">
+        <a
+          :href="project.project_path"
+        >
+          <img
+            v-if="hasAvatar"
+            class="avatar s40"
+            alt="Project Avatar"
+            :src="project.avatar_url"
+          />
+          <identicon
+            v-else
+            :entity-id=project.id
+            :entity-name="project.name"
+          />
+        </a>
+      </div>
+      <div class="metadata">
+        <div class="title">
+          <a
+            :href="project.project_path"
+          >
+            {{project.name}}
+          </a>
+        </div>
+        <div
+          v-if="project.description"
+          class="description"
+        >
+          {{project.description}}
+        </div>
+      </div>
+    </div>
+  </li>
+</template>