AngularJS in 'mail-notifications.html.erb' replaced by Angular component (#6338)

* AngularJS in 'mail-notifications.html.erb' replaced by new Angular component 'show-section-dropdown.component.ts'

app/controllers/my_controller.rb

@@ -32,6 +32,8 @@ class MyController < ApplicationController
   include Concerns::PasswordConfirmation
   layout 'my'
 
+  helper_method :gon
+
   before_action :require_login
   before_action :check_password_confirmation,
                 only: [:account],

app/controllers/users_controller.rb

@@ -30,6 +30,8 @@
 class UsersController < ApplicationController
   layout 'admin'
 
+  helper_method :gon
+
   before_action :disable_api
   before_action :require_admin, except: [:show, :deletion_info, :destroy]
   before_action :find_user, only: [:show,

app/views/users/_mail_notifications.html.erb

@@ -27,35 +27,44 @@ See docs/COPYRIGHT.rdoc for more details.
 
 ++#%>
 
+<% active_sections = if @user.mail_notification == 'selected'
+                      [{key: 'notified_projects'}]
+                     else
+                      []
+                     end %>
+
+<%= initialize_hide_sections_with [{key: 'notified_projects'}],  active_sections %>
+
+
 <div class="form--field">
   <%= styled_label_tag "user_mail_notification", t(:'user.settings.mail_notifications') %>
   <div class="form--field-container">
     <div class="form--select-container">
-      <%= styled_select_tag 'user[mail_notification]',
+      <show-section-dropdown opt-value="selected" hide-sec-with-name="notified_projects">
+        <%= styled_select_tag 'user[mail_notification]',
             options_for_select(user_mail_notification_options(@user),
             @user.mail_notification),
-            :'ng-model' => 'mail_notifications',
-            :'ng-init' => "mail_notifications = '#{@user.mail_notification}'",
             container_class: '-wide' %>
+      </show-section-dropdown>
     </div>
   </div>
 </div>
 
-<%= content_tag 'div', id: 'notified-projects', class: "ng-cloak", :'ng-if' => "mail_notifications === 'selected'" do %>
-  <div class="form--field -no-label">
-    <div class="form--field-container -vertical">
-      <% @user.projects.each do |project| %>
-        <label class="form--label-with-check-box">
-          <%= styled_check_box_tag 'notified_project_ids[]', project.id, @user.notified_projects_ids.include?(project.id) %>
-          <%= project.name %>
-        </label>
-      <% end %>
-    </div>
-    <div class="form--field-instructions">
-      <%= t(:'user.settings.mail_project_explanaition') %>
-    </div>
+<hide-section section-name="notified_projects">
+  <div id="notified-projects" class="form--field -no-label">
+      <div class="form--field-container -vertical">
+        <% @user.projects.each do |project| %>
+          <label class="form--label-with-check-box">
+            <%= styled_check_box_tag 'notified_project_ids[]', project.id, @user.notified_projects_ids.include?(project.id) %>
+            <%= project.name %>
+          </label>
+        <% end %>
+      </div>
+      <div class="form--field-instructions">
+        <%= t(:'user.settings.mail_project_explanaition') %>
+      </div>
   </div>
-<% end %>
+</hide-section>
 
 <div class="form--field">
   <%= styled_label_tag 'self_notified', t(:'user.settings.mail_self_notified') %>

frontend/app/angular4-modules.ts

@@ -87,6 +87,7 @@ import {HideSectionComponent} from 'core-components/common/hide-section/hide-sec
 import {HideSectionService} from 'core-components/common/hide-section/hide-section.service';
 import {AddSectionDropdownComponent} from 'core-components/common/hide-section/add-section-dropdown/add-section-dropdown.component';
 import {HideSectionLinkComponent} from 'core-components/common/hide-section/hide-section-link/hide-section-link.component';
+import {ShowSectionDropdownComponent} from 'core-components/common/hide-section/show-section-dropdown.component';
 import {GonRef} from 'core-components/common/gon-ref/gon-ref';
 import {AuthorisationService} from 'core-components/common/model-auth/model-auth.service';
 import {WorkPackageTableFiltersService} from 'core-components/wp-fast-table/state/wp-table-filters.service';
@@ -368,6 +369,7 @@ import {WorkPackageRelationsCreateComponent} from "core-components/wp-relations/
     HideSectionComponent,
     HideSectionLinkComponent,
     AddSectionDropdownComponent,
+    ShowSectionDropdownComponent,
     AutocompleteSelectDecorationComponent,
 
     // Split view
@@ -489,6 +491,7 @@ import {WorkPackageRelationsCreateComponent} from "core-components/wp-relations/
     HideSectionComponent,
     HideSectionLinkComponent,
     AddSectionDropdownComponent,
+    ShowSectionDropdownComponent,
     AutocompleteSelectDecorationComponent,
 
     // Split view

frontend/app/components/common/hide-section/show-section-dropdown.component.ts

@@ -0,0 +1,63 @@
+//-- copyright
+// OpenProject is a project management system.
+// Copyright (C) 2012-2018 the OpenProject Foundation (OPF)
+//
+// This program is free software; you can redistribute it and/or
+// modify it under the terms of the GNU General Public License version 3.
+//
+// OpenProject is a fork of ChiliProject, which is a fork of Redmine. The copyright follows:
+// Copyright (C) 2006-2017 Jean-Philippe Lang
+// Copyright (C) 2010-2013 the ChiliProject Team
+//
+// This program is free software; you can redistribute it and/or
+// modify it under the terms of the GNU General Public License
+// as published by the Free Software Foundation; either version 2
+// of the License, or (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+//
+// You should have received a copy of the GNU General Public License
+// along with this program; if not, write to the Free Software
+// Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
+//
+// See docs/COPYRIGHT.rdoc for more details.
+//++
+
+import {Component, OnInit, ElementRef, Input} from '@angular/core';
+import {HideSectionService} from 'core-components/common/hide-section/hide-section.service';
+import {opUiComponentsModule} from "core-app/angular-modules";
+import {downgradeComponent} from '@angular/upgrade/static';
+
+@Component({
+  selector: 'show-section-dropdown',
+  template: '<ng-content></ng-content>'
+})
+
+export class ShowSectionDropdownComponent implements OnInit {
+  @Input() optValue:string;           // value of option for which hide-section should be visible
+  @Input() hideSecWithName:string;    // section-name of hide-section
+
+  constructor(protected hideSections:HideSectionService,
+              private elementRef:ElementRef) {
+  }
+
+  ngOnInit() {
+    jQuery(this.elementRef.nativeElement).change(event => {
+      let selectedOption = jQuery("option:selected", event.target);
+
+      if (selectedOption.val() !== this.optValue) {
+        this.hideSections.hide(this.hideSecWithName);
+      }
+      else {
+        this.hideSections.show({key: this.hideSecWithName, label: ""});
+      }
+    });
+  }
+}
+
+opUiComponentsModule.directive('showSectionDropdown',
+  downgradeComponent({component: ShowSectionDropdownComponent})
+);

spec/views/users/edit.html.erb_spec.rb

@@ -35,6 +35,7 @@ describe 'users/edit', type: :view do
     # The url_for is missing the users id that is usually taken
     # from request parameters
     controller.request.path_parameters[:id] = user.id
+    view.extend(Gon::ControllerHelpers)
   end
 
   context 'authentication provider' do