implement functional header (#669)

* implement functional header

* implement error message when user profile could not be found

* make rubocop happy again

* resolve requested changes

* make rubocop happy

* readd highlighted class

* cleanup stylesheet

* remove duplicate identifiers of stimulus controllers

app/assets/stylesheets/styles.scss

@@ -4,7 +4,7 @@ $skills-gray: #f5f5f5;
 $skills-green: #69b978;
 $skills-green-hover: #4e903c;
 $skills-search-result-blue: #238bca;
-$skills-banner-text-blue: #1e5a96;
+$skills-dark-blue: #1e5a96;
 
 @import "bootstrap";
 
@@ -215,12 +215,15 @@ pzsh-topbar {
   display: block;
 }
 
+.highlighted {
+  background-color: $skills-dark-blue;
+}
 .banner-text {
   font-size: 55px;
-  color: $skills-banner-text-blue;
+  color: $skills-dark-blue;
   font-family: Roboto, sans-serif;
 }
 
 .banner-sub-text {
-  color: $skills-banner-text-blue;
+  color: $skills-dark-blue;
 }

app/controllers/application_controller.rb

@@ -3,6 +3,8 @@
 class ApplicationController < ActionController::Base
   before_action :authenticate_auth_user!
 
+  helper_method :find_profile_by_keycloak_user
+
   def authenticate_auth_user!
     return super unless helpers.development?
 
@@ -22,4 +24,10 @@ def render_error(title_key, body_key, status = :bad_request)
                      body: translate("devise.failure.#{body_key}") },
            :status => status
   end
+
+  protected
+
+  def find_profile_by_keycloak_user
+    Person.find_by(name: current_auth_user&.name)
+  end
 end

app/controllers/people_controller.rb

@@ -15,6 +15,12 @@ class PeopleController < CrudController
                           { language_skills_attributes:
                               [:language, :level, :certificate, :id, :_destroy] }]
 
+  def index
+    return flash[:alert] = I18n.t('errors.profile-not-found') if params[:alert].present?
+
+    super
+  end
+
   def show
     return export if format_odt?
 

app/javascript/controllers/index.js

@@ -39,3 +39,13 @@ application.register("skill-level", SkillLevelController)
 
 import SkillsFilterController from "./skills_filter_controller"
 application.register("skills-filter", SkillsFilterController)
+
+import DropdownLinksController from "./dropdown_controller"
+application.register("dropdown", DropdownLinksController)
+
+import SkillsLevelController from "./skill_level_controller"
+application.register("skills-level", SkillsLevelController)
+
+import SkillsEmptySpaceController from "./skills_empty_space_controller"
+application.register("skills-empty-space", SkillsEmptySpaceController)
+

app/javascript/controllers/skills_empty_space_controller.js

@@ -0,0 +1,26 @@
+import { Controller } from "@hotwired/stimulus"
+
+// Connects to data-controller="skills-empty-space"
+export default class extends Controller {
+    static targets = ["container"]
+
+    goCrazy() {
+        this.containerTarget.innerHTML = "";
+        let element = document.createElement("h1");
+        let text = document.createTextNode("Du hesch drufdrückt");
+        element.appendChild(text);
+
+        this.containerTarget.style.display = "flex";
+        this.containerTarget.style.flexDirection = "column";
+        this.containerTarget.style.alignItems = "center";
+        this.containerTarget.style.justifyContent = "center";
+        this.containerTarget.style.height = "100vh";
+
+        let gif = document.createElement("img");
+        gif.src = "https://media.giphy.com/media/v1.Y2lkPTc5MGI3NjExNW0xNXpscDY5MXJkd3YxOWdmZG12cDk1YW45cGwxeDd1ODR4bGt1YyZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/tHIRLHtNwxpjIFqPdV/giphy.gif";
+        this.containerTarget.appendChild(element);
+        this.containerTarget.appendChild(gif);
+    }
+
+
+}

app/views/layouts/application.html.haml

@@ -11,8 +11,8 @@
     = javascript_include_tag "application", "data-turbo-track": "reload", type: "module"
     = javascript_include_tag "application", "https://unpkg.com/@puzzleitc/puzzle-shell/dist/bundle.js", type: "module"
     = favicon_link_tag "favicon.png"
-  %body.d-flex.justify-content-center
-    %div.content
+  %body.d-flex.justify-content-center{"data-controller": "skills-empty-space"}
+    %div.content{"data-skills-empty-space-target": "container"}
       %div.position-sticky.top-0.z-3
         %div.d-flex.justify-content-between.bg-white
           %div.d-flex
@@ -23,13 +23,16 @@
             %li.d-flex.align-items-center.cursor-pointer.ps-2.pe-2.border-start.border-end.h-100
               %div.scale-icon-06(name="user")
               %span#username
-                =current_auth_user&.name
+                - if find_profile_by_keycloak_user.nil?
+                  = link_to current_auth_user&.name, people_path(alert: "true")
+                - else
+                  = link_to find_profile_by_keycloak_user.name, person_path(find_profile_by_keycloak_user)
                 - if admin?
                   (Admin)
             %li.d-flex.align-items-center.cursor-pointer.ps-2.pe-2
               %a.d-flex.align-items-center{:href => "https://github.com/puzzle/skills/issues"}
                 %pzsh-icon.scale-icon-08.text-gray(name="question-circle")
-            %li.d-flex.align-items-center.cursor-pointer.border-start.border-end.h-100.ps-2.pe-2
+            %li.d-flex.align-items-center.cursor-pointer.border-start.border-end.h-100.ps-2.pe-2{"data-action": "click->skills-empty-space#goCrazy"}
               - if !development?
                 - if auth_user_signed_in?
                   =link_to "Logout", destroy_auth_user_session_path, data: { "turbo-method": :delete}
@@ -38,13 +41,13 @@
         %div.puzzle-header
           %div.d-flex.h-100
             %ul.navbar.h-100
-              %li.bg-skills-blue.h-100.d-flex.align-items-center
+              %li.bg-skills-blue.h-100.d-flex.align-items-center{class: "#{'highlighted' if request.url.match?("people") && request.url.exclude?("people_skills")}"}
                 %a.nav-link.cursor-pointer.ps-2.pe-2{href: people_path} Profil
-              %li.bg-skills-blue.h-100.d-flex.align-items-center
+              %li.bg-skills-blue.h-100.d-flex.align-items-center{class: "#{'highlighted' if request.url.include? "people_skills"}"}
                 %a.nav-link.cursor-pointer.ps-2.pe-2{href: people_skills_path} Skill Suche
-              %li.bg-skills-blue.h-100.d-flex.align-items-center
+              %li.bg-skills-blue.h-100.d-flex.align-items-center{class: "#{'highlighted' if request.url.include? cv_search_index_path}"}
                 %a.nav-link.cursor-pointer.ps-2.pe-2{href: cv_search_index_path} CV Suche
-              %li.bg-skills-blue.h-100.d-flex.align-items-center
+              %li.bg-skills-blue.h-100.d-flex.align-items-center{class: "#{'highlighted' if request.url.include?("skills") && request.url.exclude?("people_skills")}"}
                 %a.nav-link.cursor-pointer.ps-2.pe-2{href: skills_path} Skillset
       %div.container-fluid
         %div.row.d-flex.justify-content-center

app/views/people/index.html.haml

@@ -1,4 +1,7 @@
 = render partial: "people/search", locals: { person: nil }
+- flash.each do |type, msg|
+  .alert.alert-danger.mt-3
+    = msg
 %div.mt-3
   %h1.d-inline-block.me-3.banner-text Willkommen bei
   =image_tag('logo.svg', width: '340', class: 'align-baseline test')

config/locales/de.yml

@@ -1,4 +1,6 @@
 de:
+  errors:
+    profile-not-found: Profil konnte nicht gefunden werden.
   helpers:
     submit:
       cancel: Abbrechen

config/locales/en.yml

@@ -1,4 +1,6 @@
 en:
+  errors:
+    profile-not-found: Profile could not be found.
   helpers:
       submit:
         cancel: Cancel

db/seeds/development/02_people.rb

@@ -23,6 +23,7 @@
          'Bob Stark',
          'Daenerys Targaryen',
          'Davos Seaworth',
-         'Arya Stark']
+         'Arya Stark',
+         'Anderson Admin']
 
 seeder.seed_people(names)