js: namespaces module refactoring

SUSE · Jul 25, 2017 · dc3b00d · dc3b00d
1 parent 7a3e364
commit dc3b00d
Show file tree

Hide file tree

Showing 16 changed files with 333 additions and 151 deletions.
diff --git a/app/assets/javascripts/main.js b/app/assets/javascripts/main.js
@@ -18,14 +18,15 @@ import './vue-shared';
 // Require tree.
 // NOTE: This should be moved into proper modules.
 import './bootstrap';
-import './namespaces';
 import './repositories';
 import './teams';
 
 // new modules structure
 import './modules/users';
 import './modules/dashboard';
 import './modules/repositories';
+import './modules/namespaces';
+import './modules/teams';
 
 import { setTimeOutAlertDelay, refreshFloatAlertPosition } from './utils/effects';
 

diff --git a/app/assets/javascripts/modules/namespaces/components/edit-namespace-form.js b/app/assets/javascripts/modules/namespaces/components/edit-namespace-form.js
@@ -0,0 +1,19 @@
+import BaseComponent from '~/base/component';
+
+import { setTypeahead } from '~/utils/typeahead';
+
+const TYPEAHEAD_INPUT = '.remote .typeahead';
+
+// EditNamespaceForm component refers to the namespace form
+class EditNamespaceForm extends BaseComponent {
+  // eslint-disable-next-line class-methods-use-this
+  mounted() {
+    setTypeahead(TYPEAHEAD_INPUT, '/namespaces/typeahead/%QUERY');
+  }
+
+  toggle() {
+    this.$el.toggle();
+  }
+}
+
+export default EditNamespaceForm;
diff --git a/app/assets/javascripts/modules/namespaces/components/namespace-details.js b/app/assets/javascripts/modules/namespaces/components/namespace-details.js
@@ -0,0 +1,39 @@
+import BaseComponent from '~/base/component';
+
+import { openCloseIcon } from '~/utils/effects';
+
+import EditNamespaceForm from './edit-namespace-form';
+
+const TOGGLE_LINK = '.edit-namespace-link';
+const TOGGLE_LINK_ICON = `${TOGGLE_LINK} i`;
+const EDIT_NAMESPACE_FORM = '.edit-namespace-form';
+const DESCRIPTION = '.description';
+
+// NamespaceDetails component handles details panel
+// and edit namespace form
+class NamespaceDetails extends BaseComponent {
+  elements() {
+    this.$toggle = this.$el.find(TOGGLE_LINK);
+    this.$toggleIcon = this.$el.find(TOGGLE_LINK_ICON);
+    this.$form = this.$el.find(EDIT_NAMESPACE_FORM);
+    this.$description = this.$el.find(DESCRIPTION);
+  }
+
+  events() {
+    this.$toggle.on('click', () => this.onEditClick());
+  }
+
+  mount() {
+    this.form = new EditNamespaceForm(this.$form);
+  }
+
+  onEditClick() {
+    openCloseIcon(this.$toggleIcon);
+    this.$description.toggle();
+    this.form.toggle();
+
+    layout_resizer();
+  }
+}
+
+export default NamespaceDetails;
diff --git a/app/assets/javascripts/modules/namespaces/components/new-namespace-form.js b/app/assets/javascripts/modules/namespaces/components/new-namespace-form.js
@@ -0,0 +1,33 @@
+import BaseComponent from '~/base/component';
+
+import { setTypeahead } from '~/utils/typeahead';
+
+const TYPEAHEAD_INPUT = '.remote .typeahead';
+const NAMESPACE_FORM_FIELDS = '.form-control, textarea';
+
+// NewNamespaceForm component refers to the new namespace form
+class NewNamespaceForm extends BaseComponent {
+  elements() {
+    this.$fields = this.$el.find(NAMESPACE_FORM_FIELDS);
+  }
+
+  // eslint-disable-next-line class-methods-use-this
+  mounted() {
+    setTypeahead(TYPEAHEAD_INPUT, '/namespaces/typeahead/%QUERY');
+  }
+
+  toggle() {
+    this.$el.toggle(400, 'swing', () => {
+      const visible = this.$el.is(':visible');
+
+      if (visible) {
+        this.$fields.first().focus();
+      }
+
+      this.$fields.val('');
+      layout_resizer();
+    });
+  }
+}
+
+export default NewNamespaceForm;
diff --git a/app/assets/javascripts/modules/namespaces/components/normal-namespaces-panel.js b/app/assets/javascripts/modules/namespaces/components/normal-namespaces-panel.js
@@ -0,0 +1,36 @@
+import BaseComponent from '~/base/component';
+
+import NewNamespaceForm from './new-namespace-form';
+
+const TOGGLE_LINK = '#add_namespace_btn';
+const TOGGLE_LINK_ICON = `${TOGGLE_LINK} i`;
+const NEW_NAMESPACE_FORM = '#add_namespace_form';
+
+// NormalNamespacesPanel component that lists normal namespaces
+// and contains new namespace form.
+class NormalNamespacesPanel extends BaseComponent {
+  elements() {
+    this.$toggle = this.$el.find(TOGGLE_LINK);
+    this.$toggleIcon = this.$el.find(TOGGLE_LINK_ICON);
+    this.$form = this.$el.find(NEW_NAMESPACE_FORM);
+  }
+
+  events() {
+    this.$el.on('click', TOGGLE_LINK, e => this.onToggleLinkClick(e));
+  }
+
+  mount() {
+    this.newForm = new NewNamespaceForm(this.$form);
+  }
+
+  // eslint-disable-next-line class-methods-use-this
+  onToggleLinkClick() {
+    const wasVisible = this.$form.is(':visible');
+
+    this.newForm.toggle();
+    this.$toggleIcon.toggleClass('fa-minus-circle', !wasVisible);
+    this.$toggleIcon.toggleClass('fa-plus-circle', wasVisible);
+  }
+}
+
+export default NormalNamespacesPanel;
diff --git a/app/assets/javascripts/modules/namespaces/index.js b/app/assets/javascripts/modules/namespaces/index.js
@@ -0,0 +1,20 @@
+import NamespacesIndexPage from './pages/index';
+import NamespacesShowPage from './pages/show';
+
+const NAMESPACES_INDEX_ROUTE = 'namespaces/index';
+const NAMESPACES_SHOW_ROUTE = 'namespaces/show';
+
+$(() => {
+  const $body = $('body');
+  const route = $body.data('route');
+
+  if (route === NAMESPACES_INDEX_ROUTE) {
+    // eslint-disable-next-line
+    new NamespacesIndexPage($body);
+  }
+
+  if (route === NAMESPACES_SHOW_ROUTE) {
+    // eslint-disable-next-line
+    new NamespacesShowPage($body);
+  }
+});
diff --git a/app/assets/javascripts/modules/namespaces/pages/index.js b/app/assets/javascripts/modules/namespaces/pages/index.js
@@ -0,0 +1,19 @@
+import BaseComponent from '~/base/component';
+
+import NormalNamespacesPanel from '../components/normal-namespaces-panel';
+
+const NORMAL_NAMESPACES_PANEL = '.normal-namespaces-wrapper';
+
+// NamespacesIndexPage component responsible to instantiate
+// the namespaces's index page components and handle interactions.
+class NamespacesIndexPage extends BaseComponent {
+  elements() {
+    this.$normalNamespacesPanel = this.$el.find(NORMAL_NAMESPACES_PANEL);
+  }
+
+  mount() {
+    this.normalNamespacesPanel = new NormalNamespacesPanel(this.$normalNamespacesPanel);
+  }
+}
+
+export default NamespacesIndexPage;
diff --git a/app/assets/javascripts/modules/namespaces/pages/show.js b/app/assets/javascripts/modules/namespaces/pages/show.js
@@ -0,0 +1,19 @@
+import BaseComponent from '~/base/component';
+
+import NamespaceDetails from '../components/namespace-details';
+
+const NAMESPACE_DETAILS = '.namespace-details';
+
+// NamespaceShowPage component responsible to instantiate
+// the user's edit page components and handle interactions.
+class NamespaceShowPage extends BaseComponent {
+  elements() {
+    this.$details = this.$el.find(NAMESPACE_DETAILS);
+  }
+
+  mount() {
+    this.details = new NamespaceDetails(this.$details);
+  }
+}
+
+export default NamespaceShowPage;
diff --git a/app/assets/javascripts/modules/teams/index.js b/app/assets/javascripts/modules/teams/index.js
@@ -0,0 +1,13 @@
+import TeamsShowPage from './pages/show';
+
+const TEAMS_SHOW_ROUTE = 'teams/show';
+
+$(() => {
+  const $body = $('body');
+  const route = $body.data('route');
+
+  if (route === TEAMS_SHOW_ROUTE) {
+    // eslint-disable-next-line
+    new TeamsShowPage($body);
+  }
+});
diff --git a/app/assets/javascripts/modules/teams/pages/show.js b/app/assets/javascripts/modules/teams/pages/show.js
@@ -0,0 +1,19 @@
+import BaseComponent from '~/base/component';
+
+import NormalNamespacesPanel from '../../namespaces/components/normal-namespaces-panel';
+
+const NORMAL_NAMESPACES_PANEL = '.normal-namespaces-wrapper';
+
+// TeamsShowPage component responsible to instantiate
+// the team's show page components and handle interactions.
+class TeamsShowPage extends BaseComponent {
+  elements() {
+    this.$normalNamespacesPanel = this.$el.find(NORMAL_NAMESPACES_PANEL);
+  }
+
+  mount() {
+    this.normalNamespacesPanel = new NormalNamespacesPanel(this.$normalNamespacesPanel);
+  }
+}
+
+export default TeamsShowPage;
diff --git a/app/assets/javascripts/namespaces.js b/app/assets/javascripts/namespaces.js
diff --git a/app/views/namespaces/index.html.slim b/app/views/namespaces/index.html.slim
@@ -29,55 +29,56 @@
           - @special_namespaces.each do |namespace|
             = render partial: 'namespaces/namespace', locals: {namespace: namespace}
 
-- if Registry.any?
-  #add_namespace_form.collapse
-    = form_for :namespace, url: namespaces_path, remote: true, html: {id: 'new-namespace-form', class: 'form-horizontal', role: 'form'} do |f|
-        .form-group
-          = f.label :namespace, {class: 'control-label col-md-2'}
-          .col-md-7
-            = f.text_field(:namespace, class: 'form-control', required: true, placeholder: "Name")
-        .form-group.has-feedback
-          = f.label :team, {class: 'control-label col-md-2'}
-          .col-md-7
-            .remote
-              = f.text_field(:team, class: 'form-control typeahead', required: true, placeholder: "Name of the team")
-            span.fa.fa-search.form-control-feedback
+.normal-namespaces-wrapper
+  - if Registry.any?
+    #add_namespace_form.collapse
+      = form_for :namespace, url: namespaces_path, remote: true, html: {id: 'new-namespace-form', class: 'form-horizontal', role: 'form'} do |f|
+          .form-group
+            = f.label :namespace, {class: 'control-label col-md-2'}
+            .col-md-7
+              = f.text_field(:namespace, class: 'form-control', required: true, placeholder: "Name")
+          .form-group.has-feedback
+            = f.label :team, {class: 'control-label col-md-2'}
+            .col-md-7
+              .remote
+                = f.text_field(:team, class: 'form-control typeahead', required: true, placeholder: "Name of the team")
+              span.fa.fa-search.form-control-feedback
 
-        .form-group
-          = f.label :description, {class: 'control-label col-md-2'}
-          .col-md-7
-            = f.text_area(:description, class: 'form-control fixed-size', required: false, placeholder: "A short description of your namespace")
-        .form-group
-          .col-md-offset-2.col-md-7
-            = f.submit('Create', class: 'btn btn-primary')
+          .form-group
+            = f.label :description, {class: 'control-label col-md-2'}
+            .col-md-7
+              = f.text_area(:description, class: 'form-control fixed-size', required: false, placeholder: "A short description of your namespace")
+          .form-group
+            .col-md-offset-2.col-md-7
+              = f.submit('Create', class: 'btn btn-primary')
 
-.panel.panel-default
-  .panel-heading
-    .row
-      .col-sm-6
-        h5
-          ' Namespaces you have access to
-      .col-sm-6.text-right
-        - if Registry.any? && can_create_namespace?
-          a#add_namespace_btn.btn.btn-xs.btn-link.js-toggle-button[role="button"]
-            i.fa.fa-plus-circle
-            | Create new namespace
-  .panel-body
-    .table-responsive
-      table.table.table-stripped.table-hover
-        col.col-40
-        col.col-15
-        col.col-15
-        col.col-20
-        col.col-10
-        thead
-          tr
-            th Name
-            th Repositories
-            th Webhooks
-            th Created At
-            th Visibility
-        tbody#accessible-namespaces
-          - @namespaces.each do |namespace|
-            = render partial: 'namespaces/namespace', locals: {namespace: namespace}
-  .panel-footer= paginate(@namespaces)
+  .panel.panel-default
+    .panel-heading
+      .row
+        .col-sm-6
+          h5
+            ' Namespaces you have access to
+        .col-sm-6.text-right
+          - if Registry.any? && can_create_namespace?
+            a#add_namespace_btn.btn.btn-xs.btn-link.js-toggle-button[role="button"]
+              i.fa.fa-plus-circle
+              | Create new namespace
+    .panel-body
+      .table-responsive
+        table.table.table-stripped.table-hover
+          col.col-40
+          col.col-15
+          col.col-15
+          col.col-20
+          col.col-10
+          thead
+            tr
+              th Name
+              th Repositories
+              th Webhooks
+              th Created At
+              th Visibility
+          tbody#accessible-namespaces
+            - @namespaces.each do |namespace|
+              = render partial: 'namespaces/namespace', locals: {namespace: namespace}
+    .panel-footer= paginate(@namespaces)