Feature/619 show people modal (#624)

* implement first version of skill show view

* change font color of labels

* add translations and only include people in people show modal which filled out skill

* begin with test implementation

* finish test implementation

* add styles to display disabled input fields with normal bootstrap color

* add wait to test expectation

* add visible false parameter to spec file

* include turbo frame and model view in show component of skills

* use latest syntax to compare values

* add visible false flag to check only if text gets rendered

* delete unnecessary visible attribute from test

* use find to check modal title instead of checking entire page for a specific text

* use wait in text

* use have_content instead of find

* use visible false attribut in test

* add comma to test

* add comment inside testfile

* resolve requested changes

* make rubocop happy again

* use filter_by_rated in index view too

* format line with rubocop

app/assets/stylesheets/styles.scss

@@ -50,6 +50,14 @@ pzsh-topbar {
   color: $skills-text-gray;
 }
 
+.skill-row {
+  height: 100px !important;
+  border-bottom: 2px solid $secondary-bg-subtle !important;
+}
+
+.interest, .level {
+  pointer-events: none !important;
+}
 .table-row:hover {
   background-color: $light;
 }

app/controllers/skills_controller.rb

@@ -3,9 +3,10 @@
 class SkillsController < CrudController
   include ExportController
   before_action :update_category_parent, only: [:update]
-
   before_action :render_unauthorized, except: %i[index show unrated_by_person]
 
+  helper_method :filter_by_rated
+
   self.permitted_attrs = %i[title radar portfolio default_set category_id]
 
   def create
@@ -26,6 +27,11 @@ def unrated_by_person
 
   private
 
+  def filter_by_rated(skill)
+    skill.people_skills.where.not(interest: 0)
+         .or(skill.people_skills.where.not(level: 0))
+  end
+
   def fetch_entries
     entries = if params[:format]
                 Skill.list

app/views/skills/index.html.haml

@@ -22,9 +22,9 @@
   %turbo-frame{id: "#{dom_id skill}"}
     .row.border.border-top.table-light.tableform-hover.table-row
       .col-2.d-flex.align-items-center
-        =skill.title
+        = link_to skill.title, skill_path(skill), data: { turbo_frame: "remote_modal" }
       .col-1.bg-light.d-flex.align-items-center
-        =skill.people.count
+        = filter_by_rated(skill).count
       .col-3.d-flex.align-items-center
         =skill.category.parent.title
       .col-2.bg-light.d-flex.align-items-center

app/views/skills/show.html.haml

@@ -1,7 +1,32 @@
+= render "remote_modal", title: "Skill: #{@skill.title} (#{filter_by_rated(@skill).count } Members)" do
+  %div.d-flex.flex-column
+    - filter_by_rated(@skill).each do |person_skill|
+      - if person_skill.level
+        %div.d-flex.flex-row.align-items-center.skill-row
+          %div.col-2
+            = link_to Person.find(person_skill.person_id).name, person_path(person_skill.person_id)
+          %div.col-2.d-flex.justify-content-center
+            %p.m-0= @skill.title
+          %div.col-2
+            %div.d-flex.flex-column
+              %label.form-label.text-gray= t ExpertiseTopicSkillValue.skill_levels.key(person_skill.level - 1)
+              %input.form-range.w-75.level{type: "range", min: 1, max: 5, value: person_skill.level, tabindex: -1}
+          %div.col-2
+            %div.d-flex.flex-column
+              %label.form-label.text-gray= t "people-skills.interest"
+              %input.form-range.w-75.interest{type: "range", min: 1, max: 5, value: person_skill.interest, tabindex: -1}
+          %div.col-2
+            %div.d-flex.flex-row.form-check
+              %input.form-check-input.me-2.certificate{type: "checkbox", checked: person_skill.certificate, disabled: true}
+              %label.form-label.text-gray= t "people-skills.certificate"
+          %div.col-2
+            %div.d-flex.flex-row.form-check
+              %input.form-check-input.me-2.core-competence{type: "checkbox", checked: person_skill.core_competence, disabled: true}
+              %label.form-label.text-gray= t "people-skills.core-competence"
 %turbo-frame{id: "#{dom_id @skill}"}
   .row.border.border-top.table-light.tableform-hover.table-row
     .col-2.d-flex.align-items-center
-      =@skill.title
+      = link_to @skill.title, skill_path(@skill), data: { turbo_frame: "remote_modal" }
     .col-1.bg-light.d-flex.align-items-center
       =@skill.people.count
     .col-3.d-flex.align-items-center
@@ -17,4 +42,4 @@
     .col-1
       %div.h-100.d-flex.justify-content-center.align-items-center
         =link_to edit_skill_path(@skill), class: "btn bg-gray-100" do
-          %img.pointer.edit-button{:src=> "/assets/pencil-square.svg",:height=>"16"}
+          %img.pointer.edit-button{:src=> "/assets/pencil-square.svg",:height=>"16"}

config/locales/de.yml

@@ -15,3 +15,14 @@ de:
     widowed: verwitwet
     registered_partnership: eingetragene Partnerschaft
     divorced: geschieden
+
+  people-skills:
+    level:
+      trainee: Trainee
+      junior: Junior
+      professional: Professional
+      senior: Senior
+      expert: Expert
+    interest: Interesse
+    certificate: Zertifikat
+    core-competence: Kernkompetenz

config/locales/en.yml

@@ -14,4 +14,15 @@ en:
     married: married
     widowed: widowed
     registered_partnership: registered partnership
-    divorced: divorced
+    divorced: divorced
+
+  people-skills:
+    level:
+      trainee: Trainee
+      junior: Junior
+      professional: Professional
+      senior: Senior
+      expert: Expert
+    interest: Interest
+    certificate: Certificate
+    core-competence: Core Competence

spec/controllers/people_controller_spec.rb

@@ -11,15 +11,15 @@
     it 'should save nationality2 as nil if checkbox is unchecked and save it if it is checked' do
       expect(person["nationality2"]).not_to be(nil)
       put :update, params: {id: person["id"], person: person, has_nationality2: {checked: "0"}}
-      response.code.should == "302"
-      response.should redirect_to(person_path(person["id"]))
+      expect(response.code).to eq("302")
+      expect(response).to redirect_to(person_path(person["id"]))
       expect(people(:bob).reload.nationality2).to be(nil)
 
       edited_person = person
       edited_person["nationality2"] = "DE"
       put :update, params: {id: person["id"], person: edited_person, has_nationality2: {checked: "1"}}
-      response.code.should == "302"
-      response.should redirect_to(person_path(person["id"]))
+      expect(response.code).to eq("302")
+      expect(response).to redirect_to(person_path(person["id"]))
       expect(people(:bob).reload.nationality2).to eql("DE")
     end
   end

spec/domain/people_skills_filter_spec.rb

@@ -9,9 +9,9 @@
       levels = filteredPeopleSkills.pluck(:level)
       interests = filteredPeopleSkills.pluck(:interest)
 
-      expect(filteredPeopleSkills.count).to eq(14)
-      expect(levels).to eq([3, 1, 0, 1, 5, 4, 5, 5, 5, 5, 1, 1, 1, 1])
-      expect(interests).to eq([5, 4, 0, 2, 4, 5, 3, 2, 2, 4, 5, 3, 2, 4])
+      expect(filteredPeopleSkills.count).to eq(15)
+      expect(levels).to eq([3, 1, 0, 0, 1, 5, 4, 5, 5, 5, 5, 1, 1, 1, 1])
+      expect(interests).to eq([5, 4, 0, 0, 2, 4, 5, 3, 2, 2, 4, 5, 3, 2, 4])
     end
 
     it 'filters rated people skills' do
@@ -31,9 +31,9 @@
       levels = filteredPeopleSkills.pluck(:level)
       interests = filteredPeopleSkills.pluck(:interest)
 
-      expect(filteredPeopleSkills.count).to eq(1)
-      expect(levels).to eq([0])
-      expect(interests).to eq([0])
+      expect(filteredPeopleSkills.count).to eq(2)
+      expect(levels).to eq([0, 0])
+      expect(interests).to eq([0, 0])
     end
   end
 end

spec/features/people_show_spec.rb

@@ -0,0 +1,28 @@
+require 'rails_helper'
+
+describe 'People skills Show', type: :feature, js: true do
+  before(:each) do
+    sign_in auth_users(:user), scope: :auth_user
+    visit root_path
+  end
+
+  it 'Should only display valid amount of members' do
+      visit skills_path
+      click_link('Rails')
+
+      # We used visible false in this test because the modal is not accessible in any different way
+      # follow-up ticket for this: #628
+      expect(page).to have_selector('.modal-title', visible: false, text: 'Skill: Rails (4 Members)')
+      expect(page).to have_selector('.skill-row', visible: false, count: 4)
+  end
+
+  it 'Should render elements correctly' do
+    visit skills_path
+    click_link('Bash')
+    expect(page).to have_text('Skill: Bash (1 Members)')
+    expect(page).to have_xpath("//input[@value=5]")
+    expect(page).to have_xpath("//input[@value=2]")
+    expect(page.first(".certificate")).to be_checked
+    expect(page.first(".core-competence")).not_to be_checked
+  end
+end

spec/fixtures/people_skills.yml

@@ -35,6 +35,14 @@ alice_rails:
   certificate: false
   core_competence: false
 
+alice_bash:
+  skill: bash
+  person: alice
+  level: 0
+  interest: 0
+  certificate: false
+  core_competence: false
+
 charlie_rails:
   skill: rails
   person: charlie