Projects Dropdown App Entry

1 files changed, 68 insertions, 0 deletions

diff --git a/app/assets/javascripts/projects_dropdown/index.js b/app/assets/javascripts/projects_dropdown/index.js
new file mode 100644
index 00000000000..2660da3c558
--- /dev/null
+++ b/app/assets/javascripts/projects_dropdown/index.js
@@ -0,0 +1,68 @@
+import Vue from 'vue';
+
+import Translate from '../vue_shared/translate';
+import eventHub from './event_hub';
+import ProjectsService from './service/projects_service';
+import ProjectsStore from './store/projects_store';
+
+import projectsDropdownApp from './components/app.vue';
+
+Vue.use(Translate);
+
+document.addEventListener('DOMContentLoaded', () => {
+  const el = document.getElementById('js-projects-dropdown');
+  const navEl = document.getElementById('nav-projects-dropdown');
+
+  // Don't do anything if element doesn't exist (No projects dropdown)
+  // This is for when the user accesses GitLab without logging in
+  if (!el || !navEl) {
+    return;
+  }
+
+  $(navEl).on('show.bs.dropdown', (e) => {
+    const dropdownEl = $(e.currentTarget).find('.projects-dropdown-menu');
+    dropdownEl.one('transitionend', () => {
+      eventHub.$emit('dropdownOpen');
+    });
+  });
+
+  // eslint-disable-next-line no-new
+  new Vue({
+    el,
+    components: {
+      projectsDropdownApp,
+    },
+    data() {
+      const dataset = this.$options.el.dataset;
+      const store = new ProjectsStore();
+      const service = new ProjectsService(dataset.userName);
+
+      const project = {
+        id: Number(dataset.projectId),
+        name: dataset.projectName,
+        namespace: dataset.projectNamespace,
+        webUrl: dataset.projectWebUrl,
+        avatarUrl: dataset.projectAvatarUrl || null,
+        lastAccessedOn: Date.now(),
+      };
+
+      return {
+        store,
+        service,
+        state: store.state,
+        currentUserName: dataset.userName,
+        currentProject: project,
+      };
+    },
+    render(createElement) {
+      return createElement('projects-dropdown-app', {
+        props: {
+          currentUserName: this.currentUserName,
+          currentProject: this.currentProject,
+          store: this.store,
+          service: this.service,
+        },
+      });
+    },
+  });
+});