Bug/692 Fix scrolling behaviour of side menu in userprofile (#700)

* squash all commits

* Fix scrolling after rebase

* Fix one feature but break another for now

* Fix spacing of skills page on person

* Fix problem with overlapping when scrolling

* Fix first test

* Fix styling after rebase

* Resolve conversations from review

app/assets/stylesheets/styles.scss

@@ -288,6 +288,12 @@ pzsh-topbar {
   height: min-content;
 }
 
+.profile-header-and-tabs {
+  position: sticky;
+  top: 80px;
+  background-color: white;
+}
+
 .skills-selected {
   background-color: $skills-blue;
   color: white;
@@ -306,12 +312,6 @@ pzsh-topbar {
   background-color: #2c97a6;
 }
 
-.side-container {
-  max-height: 70em;
-  overflow-y: scroll;
-  overflow-x: hidden;
-}
-
 .skills-search-field {
   max-width: 300px;
 }
@@ -323,4 +323,9 @@ pzsh-topbar {
 .center-xy{
   align-items: center;
   justify-content: center;
-}
+}
+
+.profile-sidebar {
+  position: sticky;
+  top: 204px;
+}

app/javascript/controllers/scroll_controller.js

@@ -5,6 +5,18 @@ export default class extends Controller {
     static targets = ["listItem", "scrollItem"]
     currentSelectedIndex = 0;
 
+    connect() {
+        document.addEventListener("scroll", () => {
+            this.scrollEvent();
+        });
+    }
+
+    disconnect() {
+        document.removeEventListener("scroll", () => {
+            this.scrollEvent();
+        });
+    }
+
     scrollToElement({params}) {
         document.getElementById(params.id).scrollIntoView({
             behavior: "smooth"

app/views/layouts/person.html.haml

@@ -1,10 +1,10 @@
 = content_for :content do
-    %div.mt-2
-        =render partial:"people/search", :locals => {person: @person}
+  %div.profile-header-and-tabs.pt-2
+    %div
+      =render partial:"people/search", :locals => {person: @person}
     %div{"data-controller": "profile-tab"}
-        = render "application/tabbar", tabs: person_tabs(@person) do
-            =link_to image_tag("export.svg", class: "text-primary")+ "Export", export_cv_person_path(@person), class: "btn text-primary", data: { turbo_frame: "remote_modal" }
-        %turbo-frame{id: "tab-content"}
-            = yield
-= render template: "layouts/application"
-   
+      = render "application/tabbar", tabs: person_tabs(@person) do
+        =link_to image_tag("export.svg", class: "text-primary")+ "Export", export_cv_person_path(@person), class: "btn text-primary", data: { turbo_frame: "remote_modal" }
+  %turbo-frame{id: "tab-content"}
+    = yield
+= render template: "layouts/application"

app/views/people/_cv.html.haml

@@ -1,8 +1,8 @@
 %div.d-flex.flex-row.mt-3{"data-controller": "scroll"}
-  %div.w-20.bg-skills-gray.me-3.border.border-light-subtle.border-2.min-height
-    = render('scroll_to_menu',
-    items: %w[personal-data core-competences educations advanced-trainings activities projects], translate: true)
-  %div.w-80.side-container#scroll-content{"data-action": "scroll->scroll#scrollEvent"}
+  %div.w-20.bg-skills-gray.me-3.border.border-light-subtle.border-2.min-height.profile-sidebar
+    = render 'scroll_to_menu',
+    items: %w[personal-data core-competences educations advanced-trainings activities projects], translate: true
+  %div.w-80#scroll-content{"data-action": "scroll->scroll#scrollEvent"}
     = render('profile')
     = render('core_competences')
     = render('people/person_relations/index', list: @person.educations.list, id: "educations")

app/views/people/people_skills/index.html.haml

@@ -1,15 +1,16 @@
 %div.d-flex.flex-row.w-100.mt-2
   %turbo-frame#people-skill-form.d-flex.flex-row.w-100.gap-2{"data-controller": "scroll"}
-    %div.w-20.d-flex.flex-column.me-3.gap-2
-      %div.people-skills-actions.d-flex.flex-column
-        = render('people/scroll_to_menu', items: Category.all_parents.pluck(:title), translate: false)
-      %div.people-skills-actions
-        = link_to image_tag("pencil-square.svg", {class: "me-1"})+ t("helpers.submit.edit", model: Skill.model_name.plural.capitalize()),
-        people_skills_edit_person_path(@person), class: "d-flex align-items-center p-3"
-      %div.people-skills-actions
-        = link_to image_tag("plus-lg.svg", {class: "me-1"}) +  t("helpers.submit.add", model: Skill), new_person_people_skill_path(@person), 
-        class: "d-flex align-items-center p-3", data: { turbo_frame: "remote_modal"}
-    %div.w-80.side-container#scroll-content{"data-action": "scroll->scroll#scrollEvent"}
+    %div.w-20.d-flex.flex-column.me-3.mt-3
+      %div.profile-sidebar
+        %div.people-skills-actions.d-flex.flex-column.test-class
+          = render('people/scroll_to_menu', items: Category.all_parents.pluck(:title), translate: false)
+        %div.people-skills-actions.edit-skills-buttton.mt-2
+          = link_to image_tag("pencil-square.svg", {class: "me-1"})+ t("helpers.submit.edit", model: Skill.model_name.plural.capitalize()),
+          people_skills_edit_person_path(@person), class: "d-flex align-items-center p-3"
+        %div.people-skills-actions.add-skills-button.mt-2
+          = link_to image_tag("plus-lg.svg", {class: "me-1"}) +  t("helpers.submit.add", model: Skill), new_person_people_skill_path(@person), 
+          class: "d-flex align-items-center p-3", data: { turbo_frame: "remote_modal"}
+    %div.w-80#scroll-content{"data-action": "scroll->scroll#scrollEvent"}
       %p.d-flex.align-items-center.profile-header
         Skills
         ="(#{@person.people_skills.count})"

spec/controllers/api/people_controller_spec.rb

@@ -84,7 +84,7 @@
 
         people = json['data']
 
-        expect(people.count).to eq(6)
+        expect(people.count).to eq(7)
         alice_attrs = people.first['attributes']
         expect(alice_attrs.count).to eq(1)
         expect(alice_attrs.first[1]).to eq('Alice Mante')

spec/controllers/api/person_roles_controller_spec.rb

@@ -11,7 +11,7 @@
 
       person_roles = json['data']
 
-      expect(person_roles.count).to eq(8)
+      expect(person_roles.count).to eq(9)
       expect(person_roles.first['attributes'].count).to eq(2)
       json_object_includes_keys(person_roles.first['attributes'], keys)
       json_object_includes_keys(person_roles.first['relationships'], relationships)

spec/features/advanced_trainings_spec.rb

@@ -12,7 +12,7 @@
     it 'shows all' do
       within('turbo-frame#advanced_training') do
         expect(page).to have_content('2010 - 2012')
-        expect(page).to have_content('course about how to clean')
+        expect(page).to have_content('Course about how to clean')
       end
     end
 

spec/features/profile_scroll_to_spec.rb

@@ -1,15 +1,16 @@
 require 'rails_helper'
 
 describe 'Profile scroll-to', type: :feature, js: true do
-  let(:bob) { people(:bob) }
+  let(:longmax) { people(:longmax) }
 
   before(:each) do
     sign_in auth_users(:user), scope: :auth_user
     visit root_path
+    Capybara.page.driver.browser.manage.window.maximize
   end
 
   it 'Should change background of selected section' do
-    visit person_path(bob)
+    visit person_path(longmax)
     page.find('span', text: 'Ausbildung').click
     expect(page.all('div', text: 'Ausbildung')[0]).to have_css('.skills-selected')
 
@@ -18,7 +19,7 @@
   end
 
   it 'Should be in viewport when clicked on list item' do
-    visit person_path(bob)
+    visit person_path(longmax)
     page.find('span', text: 'Weiterbildung').click
 
     in_view = evaluate_script("(function(el) {

spec/fixtures/activities.yml

@@ -32,3 +32,35 @@ ascom:
   year_to: 2015
   year_from: 2010
   person: alice
+
+novartis:
+  description: Novartis
+  updated_by: MyString
+  role: Project Manager
+  year_to: 2005
+  year_from: 2000
+  person: longmax
+
+ubs:
+  description: UBS
+  updated_by: MyString
+  role: User Experience Consultant
+  year_to: 2010
+  year_from: 2005
+  person: longmax
+
+roche:
+  description: Roche
+  updated_by: MyString
+  role: Scrum Master
+  year_to: 2014
+  year_from: 2010
+  person: longmax
+
+migros:
+  description: Migros
+  updated_by: MyString
+  role: Businessman
+  year_to: 2020
+  year_from: 2014
+  person: longmax

spec/fixtures/advanced_trainings.yml

@@ -17,15 +17,43 @@
 # Read about fixtures at http://api.rubyonrails.org/classes/ActiveRecord/FixtureSet.html
 
 course:
-  description: course about how to clean
+  description: Course about how to clean
   updated_by: bob
   year_to: 2012
   year_from: 2010
   person: bob
 
 education:
-  description: was nice
+  description: Was nice
   updated_by: alice
   year_to: 2015
   year_from: 2011
   person: alice
+
+training:
+  description: Training how to relax properly
+  updated_by: longmax
+  year_to: 2005
+  year_from: 2000
+  person: longmax
+
+scholarship:
+  description: Course about building a house
+  updated_by: longmax
+  year_to: 2010
+  year_from: 2005
+  person: longmax
+
+education:
+  description: Further training about writing music
+  updated_by: longmax
+  year_to: 2015
+  year_from: 2010
+  person: longmax
+
+tutoring:
+  description: Further training to programming ruby
+  updated_by: longmax
+  year_to: 2020
+  year_from: 2015
+  person: longmax

spec/fixtures/educations.yml

@@ -29,3 +29,31 @@ msc:
   year_to: 2015
   year_from: 2010
   person: alice
+
+mscp:
+  location: Brookville Technical College
+  title: MSc in physics
+  year_to: 2005
+  year_from: 2000
+  person: longmax
+
+mod:
+  location: University of New York
+  title: Master of Design
+  year_to: 2010
+  year_from: 2005
+  person: longmax
+
+moe:
+  location: Iceborough College
+  title: Master of Engineering
+  year_to: 2014
+  year_from: 2010
+  person: longmax
+
+mscw:
+  location: University of Applied Sciences Bern
+  title: MSc in writing
+  year_to: 2020
+  year_from: 2014
+  person: longmax

spec/fixtures/people.yml

@@ -116,4 +116,26 @@ hope:
   title: BSc in Archeology
   competence_notes: Ruby
   email: [email protected]
-  department: ux
+  department: ux
+longmax:
+  birthdate: 2003-02-05 01:01:01
+  location: Biel
+  marital_status: <%= Person.marital_statuses[:single] %>
+  name: Longmax Smith
+  nationality: ZW
+  roles: [software-engineer]
+  company: firma
+  title: BSc in Architecture
+  competence_notes: | 
+                  C
+                  Bash
+                  Java
+                  Ruby
+                  LaTex
+                  Puppet
+                  HTML
+                  CSS
+                  Spring
+                  .NET Maui
+  email: [email protected]
+  department: sys

spec/fixtures/projects.yml

@@ -32,7 +32,61 @@ google:
   description: I learned so much
   title: google
   role: Developer
-  technology: java
+  technology: Java
   year_to: 2015
   year_from: 2012
   person: alice
+
+construction analyst:
+  description: Analyzing stuff
+  title: construction analyst
+  role: Analyst
+  technology: Graphs
+  year_to: 2005
+  year_from: 2000
+  person: longmax
+
+community manager:
+  description: Trying to make the community happy
+  title: community manager
+  role: Manager
+  technology: Discord
+  year_to: 2010
+  year_from: 2005
+  person: longmax
+
+salesman:
+  description: Selling drums
+  title: salesman
+  role: Sales
+  technology: HTML
+  year_to: 2014
+  year_from: 2010
+  person: longmax
+
+it director:
+  description: Beeing responsible for lots of people
+  title: it director
+  role: Director
+  technology: Hitobito
+  year_to: 2020
+  year_from: 2014
+  person: longmax
+
+system engineer:
+  description: Engineering lots of different stuff
+  title: system engineer
+  role: Engineer
+  technology: Java
+  year_to: 2021
+  year_from: 2020
+  person: longmax
+
+fisherman :
+  description: Fishing and selling the fish
+  title: fisherman
+  role: Fisher
+  technology: Boat driving
+  year_to: 2022
+  year_from: 2021
+  person: longmax

spec/models/activity_spec.rb

@@ -70,8 +70,12 @@
       expect(list[1].description).to eq('test2')
       expect(list[2].description).to eq('test4')
       expect(list[3].description).to eq('test3')
-      expect(list[4].description).to eq('Ascom')
-      expect(list[5].description).to eq('Swisscom')
+      expect(list[4].description).to eq('Migros')
+      expect(list[5].description).to eq('Ascom')
+      expect(list[6].description).to eq('Roche')
+      expect(list[7].description).to eq('UBS')
+      expect(list[8].description).to eq('Swisscom')
+      expect(list[9].description).to eq('Novartis')
     end
   end