Merge pull request #1348 from vitoravelino/teams-refactoring

js: team module refactoring

app/assets/javascripts/main.js

@@ -18,7 +18,6 @@ import './vue-shared';
 // Require tree.
 // NOTE: This should be moved into proper modules.
 import './bootstrap';
-import './teams';
 
 // new modules structure
 import './modules/users';

app/assets/javascripts/modules/teams/components/edit-team-form.js

@@ -0,0 +1,22 @@
+import BaseComponent from '~/base/component';
+
+const TEAM_FORM_FIELDS = 'input.form-control, textarea';
+
+// EditTeamForm component refers to the team form
+class EditTeamForm extends BaseComponent {
+  elements() {
+    this.$fields = this.$el.find(TEAM_FORM_FIELDS);
+  }
+
+  toggle() {
+    this.$el.toggle();
+
+    const visible = this.$el.is(':visible');
+
+    if (visible) {
+      this.$fields.first().focus();
+    }
+  }
+}
+
+export default EditTeamForm;

app/assets/javascripts/modules/teams/components/new-team-form.js

@@ -0,0 +1,25 @@
+import BaseComponent from '~/base/component';
+
+const TEAM_FORM_FIELDS = 'input.form-control, textarea';
+
+// NewTeamForm component refers to the new team form
+class NewTeamForm extends BaseComponent {
+  elements() {
+    this.$fields = this.$el.find(TEAM_FORM_FIELDS);
+  }
+
+  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 NewTeamForm;

app/assets/javascripts/modules/teams/components/new-team-user-form.js

@@ -0,0 +1,35 @@
+import BaseComponent from '~/base/component';
+
+import { setTypeahead } from '~/utils/typeahead';
+
+const TYPEAHEAD_INPUT = '.remote .typeahead';
+const WEBHOOK_FORM_FIELDS = '.form-control';
+
+// NewTeamUserForm component refers to the new team member form
+class NewTeamUserForm extends BaseComponent {
+  elements() {
+    this.$fields = this.$el.find(WEBHOOK_FORM_FIELDS);
+  }
+
+  mounted() {
+    const teamId = this.$el.find(TYPEAHEAD_INPUT).data('teamId');
+
+    setTypeahead(TYPEAHEAD_INPUT, teamId + '/typeahead/%QUERY');
+  }
+
+  toggle() {
+    this.$el.toggle(400, 'swing', () => {
+      const visible = this.$el.is(':visible');
+
+      if (visible) {
+        this.$fields.last().focus();
+      }
+
+      this.$fields.last().val('');
+      this.$fields.first().val('viewer');
+      layout_resizer();
+    });
+  }
+}
+
+export default NewTeamUserForm;

app/assets/javascripts/modules/teams/components/team-details.js

@@ -0,0 +1,34 @@
+import BaseComponent from '~/base/component';
+
+import EditTeamForm from './edit-team-form';
+
+const TOGGLE_LINK = '.edit-team-link';
+const EDIT_TEAM_FORM = '.edit-team-form';
+const TEAM_INFORMATION = '.team_information';
+
+// TeamDetails component handles details panel
+// and edit team form
+class TeamDetails extends BaseComponent {
+  elements() {
+    this.$toggle = this.$el.find(TOGGLE_LINK);
+    this.$form = this.$el.find(EDIT_TEAM_FORM);
+    this.$teamInformation = this.$el.find(TEAM_INFORMATION);
+  }
+
+  events() {
+    this.$toggle.on('click', () => this.onEditClick());
+  }
+
+  mount() {
+    this.form = new EditTeamForm(this.$form);
+  }
+
+  onEditClick() {
+    this.$teamInformation.toggle();
+    this.form.toggle();
+
+    layout_resizer();
+  }
+}
+
+export default TeamDetails;

app/assets/javascripts/modules/teams/components/team-users-panel.js

@@ -0,0 +1,39 @@
+import BaseComponent from '~/base/component';
+
+import NewTeamUserForm from './new-team-user-form';
+import TeamUsersTable from './team-users-table';
+
+const TOGGLE_LINK = '#add_team_user_btn';
+const TOGGLE_LINK_ICON = `${TOGGLE_LINK} i`;
+const NEW_TEAM_USER_FORM = '#add_team_user_form';
+const TEAM_USERS_TABLE = '.table';
+
+// TeamUsersPanel component that lists team users
+// and contains new team member form.
+class TeamUsersPanel extends BaseComponent {
+  elements() {
+    this.$toggle = this.$el.find(TOGGLE_LINK);
+    this.$toggleIcon = this.$el.find(TOGGLE_LINK_ICON);
+    this.$form = this.$el.find(NEW_TEAM_USER_FORM);
+    this.$table = this.$el.find(TEAM_USERS_TABLE);
+  }
+
+  events() {
+    this.$el.on('click', TOGGLE_LINK, e => this.onToggleLinkClick(e));
+  }
+
+  mount() {
+    this.table = new TeamUsersTable(this.$table);
+    this.newForm = new NewTeamUserForm(this.$form);
+  }
+
+  onToggleLinkClick() {
+    const wasVisible = this.$form.is(':visible');
+
+    this.newForm.toggle();
+    this.$toggleIcon.toggleClass('fa-user-times', !wasVisible);
+    this.$toggleIcon.toggleClass('fa-user-plus', wasVisible);
+  }
+}
+
+export default TeamUsersPanel;

app/assets/javascripts/modules/teams/components/team-users-table.js

@@ -0,0 +1,25 @@
+import BaseComponent from '~/base/component';
+
+import { openCloseIcon } from '~/utils/effects';
+
+const TEAM_USER_EDIT_BTN = '.edit-team-user-btn';
+
+// TeamUsersTable component refers to the
+// team users table
+class TeamUsersTable extends BaseComponent {
+  events() {
+    this.$el.on('click', TEAM_USER_EDIT_BTN, e => this.onToggleEdit(e));
+  }
+
+  // eslint-disable-next-line class-methods-use-this
+  onToggleEdit(e) {
+    const $btn = $(e.currentTarget);
+    const teamUserId = $btn.data('teamUserId');
+
+    openCloseIcon($btn.find('.fa'));
+    $(`#team_user_${teamUserId} td .role`).toggle();
+    $(`#change_role_team_user_${teamUserId}`).toggle();
+  }
+}
+
+export default TeamUsersTable;

app/assets/javascripts/modules/teams/components/teams-panel.js

@@ -0,0 +1,35 @@
+import BaseComponent from '~/base/component';
+
+import NewTeamForm from './new-team-form';
+
+const TOGGLE_LINK = '#add_team_btn';
+const TOGGLE_LINK_ICON = `${TOGGLE_LINK} i`;
+const NEW_TEAM_FORM = '#add_team_form';
+
+// TeamsPanel component that lists teams
+// and contains new team form.
+class TeamsPanel extends BaseComponent {
+  elements() {
+    this.$toggle = this.$el.find(TOGGLE_LINK);
+    this.$toggleIcon = this.$el.find(TOGGLE_LINK_ICON);
+    this.$form = this.$el.find(NEW_TEAM_FORM);
+  }
+
+  events() {
+    this.$el.on('click', TOGGLE_LINK, e => this.onToggleLinkClick(e));
+  }
+
+  mount() {
+    this.newForm = new NewTeamForm(this.$form);
+  }
+
+  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 TeamsPanel;

app/assets/javascripts/modules/teams/index.js

@@ -1,6 +1,8 @@
 import TeamsShowPage from './pages/show';
+import TeamsIndexPage from './pages/index';
 
 const TEAMS_SHOW_ROUTE = 'teams/show';
+const TEAMS_INDEX_ROUTE = 'teams/index';
 
 $(() => {
   const $body = $('body');
@@ -10,4 +12,9 @@ $(() => {
     // eslint-disable-next-line
     new TeamsShowPage($body);
   }
+
+  if (route === TEAMS_INDEX_ROUTE) {
+    // eslint-disable-next-line
+    new TeamsIndexPage($body);
+  }
 });

app/assets/javascripts/modules/teams/pages/index.js

@@ -0,0 +1,19 @@
+import BaseComponent from '~/base/component';
+
+import TeamsPanel from '../components/teams-panel';
+
+const TEAMS_PANEL = '.teams-wrapper';
+
+// TeamsIndexPage component responsible to instantiate
+// the teams index page components and handle interactions.
+class TeamsIndexPage extends BaseComponent {
+  elements() {
+    this.$teamsPanel = this.$el.find(TEAMS_PANEL);
+  }
+
+  mount() {
+    this.teamsPanel = new TeamsPanel(this.$teamsPanel);
+  }
+}
+
+export default TeamsIndexPage;

app/assets/javascripts/modules/teams/pages/show.js

@@ -1,18 +1,26 @@
 import BaseComponent from '~/base/component';
 
 import NormalNamespacesPanel from '../../namespaces/components/normal-namespaces-panel';
+import TeamDetails from '../components/team-details';
+import TeamUsersPanel from '../components/team-users-panel';
 
 const NORMAL_NAMESPACES_PANEL = '.normal-namespaces-wrapper';
+const TEAM_USERS_PANEL = '.team-users-wrapper';
+const TEAM_DETAILS = '.team-details';
 
 // TeamsShowPage component responsible to instantiate
 // the team's show page components and handle interactions.
 class TeamsShowPage extends BaseComponent {
   elements() {
+    this.$teamDetails = this.$el.find(TEAM_DETAILS);
+    this.$teamUsersPanel = this.$el.find(TEAM_USERS_PANEL);
     this.$normalNamespacesPanel = this.$el.find(NORMAL_NAMESPACES_PANEL);
   }
 
   mount() {
     this.normalNamespacesPanel = new NormalNamespacesPanel(this.$normalNamespacesPanel);
+    this.teamDetails = new TeamDetails(this.$teamDetails);
+    this.teamUsersPanel = new TeamUsersPanel(this.$teamUsersPanel);
   }
 }
 

app/views/team_users/_team_user.html.slim

@@ -13,12 +13,10 @@ tr id="team_user_#{team_user.id}"
         .errors
   - if can_manage_team?(team_user.team)
     td
-      button.btn.btn-default.btn-edit-role[
-        value="#{team_user.id}"
-        class="add"]
+      button.btn.btn-default.edit-team-user-btn data-team-user-id="#{team_user.id}"
         i.fa.fa-pencil.fa-lg
     td
-      a[class="btn btn-default"
+      a[class="btn btn-default delete-team-user-btn"
         data-placement="left"
         data-toggle="popover"
         data-title="Please confirm"

app/views/team_users/create.js.erb

@@ -8,7 +8,7 @@
     $('#float-alert p').html("User '<%= escape_javascript(@team_user.user.username) %>' was added to the team");
   <% end %>
   $('#add_team_user_form').fadeOut();
-  $('#add_team_user_btn i').addClass("fa-chevron-down")
-  $('#add_team_user_btn i').removeClass("fa-chevron-up")
+  $('#add_team_user_btn i').addClass("fa-user-plus")
+  $('#add_team_user_btn i').removeClass("fa-user-times")
 <% end %>
 $('#float-alert').fadeIn(setTimeOutAlertDelay());

app/views/team_users/update.js.erb

@@ -14,7 +14,7 @@
   $("#change_role_team_user_<%= @team_user.id %>").fadeToggle(function() {
     $("#team_user_<%= @team_user.id %> td div.role").fadeToggle();
   });
-  var el = $("#team_user_<%= @team_user.id %> td .btn-edit-role i.fa");
+  var el = $("#team_user_<%= @team_user.id %> td .edit-team-user-btn i.fa");
   el.removeClass('fa-close');
   el.addClass('fa-pencil');
 <% end %>