Manage evaluation criteria (#23)

* scaffolds EvaluationCriteriaController

* navbar

* setting up EvaluationCriteria#index

* done with Index... for now

* done with EvaluationCriteria... for now

* temporarily fixes specs

app/controllers/concerns/act_as_config.rb

@@ -0,0 +1,12 @@
+# frozen_string_literal: true
+
+module ActAsConfig
+  extend ActiveSupport::Concern
+  included do
+    before_action :is_config_section, except: %i[create update destroy]
+  end
+
+  def is_config_section
+    @config_section = true
+  end
+end

app/controllers/evaluation_criteria_controller.rb

@@ -0,0 +1,58 @@
+# frozen_string_literal: true
+
+class EvaluationCriteriaController < ApplicationController
+  include ActAsConfig
+
+  before_action :set_evaluation_criterium, only: %i[show edit update destroy]
+  before_action :authorize_access
+
+  def index
+    @evaluation_criteria = EvaluationCriterium.order(:name).all.decorate
+  end
+
+  def new
+    @evaluation_criterium = EvaluationCriterium.new.decorate
+  end
+
+  def edit; end
+
+  def create
+    @evaluation_criterium = EvaluationCriterium.new(evaluation_criterium_params)
+
+    if @evaluation_criterium.save
+      redirect_to evaluation_criteria_path, notice: 'Evaluation criterium was successfully created.'
+    else
+      render :new
+    end
+  end
+
+  def update
+    if @evaluation_criterium.update(evaluation_criterium_params)
+      redirect_to evaluation_criteria_path, notice: 'Evaluation criterium was successfully updated.'
+    else
+      render :edit
+    end
+  end
+
+  def destroy
+    @evaluation_criterium.destroy
+    redirect_to evaluation_criteria_url, notice: 'Evaluation criterium was successfully destroyed.'
+  end
+
+  private
+
+  def authorize_access
+    return authorize @evaluation_criterium if @evaluation_criterium
+
+    authorize EvaluationCriterium
+  end
+
+  def set_evaluation_criterium
+    @evaluation_criterium = EvaluationCriterium.find(params[:id]).decorate
+  end
+
+  def evaluation_criterium_params
+    params.require(:evaluation_criterium).permit(:name, :short_description,
+                                                 :description)
+  end
+end

app/decorators/application_decorator.rb

@@ -11,4 +11,9 @@ class ApplicationDecorator < Draper::Decorator
   def unknown_string
     t('Unknown')
   end
+
+  def new_edit_title
+    action = object.persisted? ? t('controllers.actions.edit') : t('controllers.actions.new')
+    "#{action.titleize} #{object.model_name.human}"
+  end
 end

app/decorators/evaluation_criterium_decorator.rb

@@ -0,0 +1,12 @@
+# frozen_string_literal: true
+
+class EvaluationCriteriumDecorator < ApplicationDecorator
+  delegate_all
+
+  def description_html
+    description = object.description
+    return description.body.to_rendered_html_with_layout if description.persisted?
+
+    'No additional description provided yet.'
+  end
+end

app/javascript/.eslintrc.yml

@@ -0,0 +1,50 @@
+env:
+  browser: true
+  es6: true
+extends:
+  - plugin:react/recommended
+  - airbnb
+  - prettier
+  - prettier/react
+parser: "babel-eslint"
+parserOptions:
+  ecmaFeatures:
+    jsx: true
+  ecmaVersion: 2018
+  sourceType: module
+plugins:
+  - react
+  - import
+  - prettier
+rules:
+  no-use-before-define: 0
+  no-underscore-dangle: 0
+  react/prop-types: off
+  import/prefer-default-export: off # airbnb default: 'error'
+  react/prefer-stateless-function: warn # airbnb default: 'error'
+
+  # Enforce a defaultProps definition for every prop that is not a required prop
+  # reason: function composition over default props
+  # https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/require-default-props.md
+  react/require-default-props: off # airbnb default: 'error'
+
+  ### Removed rules
+  # no longer defined
+  jsx-a11y/href-no-hash: off
+  jsx-a11y/label-has-for: off
+  jsx-a11y/label-has-associated-control: off
+
+  # was complaining about inline snapshots
+  no-irregular-whitespace:
+    - off
+  indent: 0
+  linebreak-style:
+    - error
+    - unix
+  quotes:
+    - error
+    - double
+  semi:
+    - error
+    - always
+  no-redeclare: "error"

app/javascript/global/feather_icons.js

@@ -0,0 +1,5 @@
+import feather from "feather-icons";
+
+document.addEventListener("turbolinks:load", () => {
+  feather.replace();
+});

app/javascript/global/nav_links.js

@@ -0,0 +1,52 @@
+import "select2";
+import $ from "jquery";
+import { developerWarn } from "../utils/loggers";
+
+const currentPath = () => window.location.href;
+
+$(document).on("turbolinks:load", () => {
+  const links = document.getElementsByClassName("nav-link");
+
+  [...links].forEach(link => {
+    if (link.dataset.pathMatchers) {
+      return matchLinkPathMatchers(link);
+    }
+    matchLinkHref(link);
+  });
+});
+
+const matchLinkHref = link => {
+  if (link.href === "#") return;
+  if (!currentPath().includes(link.href)) return;
+
+  makeLinkActive(link);
+};
+
+const matchLinkPathMatchers = link => {
+  const matchers = JSON.parse(link.dataset.pathMatchers);
+  if (!Array.isArray(matchers)) {
+    developerWarn("data-path-matchers must be of type Array<String>!");
+    return;
+  };
+
+  const currentHref = link.href;
+  if (matchers.some(testHrefRegex, currentHref)) {
+    makeLinkActive(link);
+  }
+};
+
+const makeLinkActive = link => link.classList.add("active");
+
+// Cannot use arrow function, since it breaks the scope of "this" needed for
+// this to work with Array.prototype.some().
+const testHrefRegex = function testHrefRegex(regexpString) {
+  let regexp = null;
+  try {
+    regexp = RegExp(regexpString, "g");
+  } catch (error) {
+    developerWarn(error);
+    return false;
+  }
+
+  return regexp.test(this);
+};

app/javascript/global/popovers.js

@@ -0,0 +1,5 @@
+import $ from "jquery";
+
+$(document).on("turbolinks:load", () => {
+  $("[data-toggle='popover']").popover();
+});

app/javascript/global/select2.js

@@ -1,5 +1,6 @@
 import "select2";
+import $ from "jquery";
 
-$(document).on('turbolinks:load', function () {
-  $('.auto-select2').select2();
-})
+$(document).on("turbolinks:load", () => {
+  $(".auto-select2").select2();
+});

app/javascript/global/sticky_button.js

@@ -1,11 +1,13 @@
-$(document).on('turbolinks:load', function () {
-  var wrap = $(window);
-  var button = $(".sticky-button");
-  if (button.length == 0) return;
+import $ from "jquery";
 
-  var buttonTop = button.offset().top;
-  var stick = function (e) {
-    var scrollTop = wrap.scrollTop();
+$(document).on("turbolinks:load", () => {
+  const wrap = $(window);
+  const button = $(".sticky-button");
+  if (button.length === 0) return;
+
+  const buttonTop = button.offset().top;
+  const stick = () => {
+    const scrollTop = wrap.scrollTop();
     if (scrollTop >= buttonTop) {
       button.addClass("sticky");
     } else {

app/javascript/global/tooltips.js

@@ -1,6 +1,8 @@
-$(document).on("turbolinks:load", function () {
-    $('[data-toggle="tooltip"]').tooltip({
-        container: 'body',
-        boundary: 'window'
-    })
-})
+import $ from "jquery";
+
+$(document).on("turbolinks:load", () => {
+    $("[data-toggle=\"tooltip\"]").tooltip({
+        container: "body",
+        boundary: "window"
+    });
+});

app/javascript/packs/action_text.js

@@ -0,0 +1,3 @@
+
+require("trix");
+require("@rails/actiontext");

app/javascript/packs/application.js

@@ -4,11 +4,6 @@
 // a relevant structure within app/javascript and only use these pack files to reference
 // that code so it'll be compiled.
 
-require("@rails/ujs").start()
-require("turbolinks").start()
-require("@rails/activestorage").start()
-
-
 // Uncomment to copy all static images under ../images to the output folder and reference
 // them with the image_pack_tag helper in views (e.g <%= image_pack_tag 'rails.png' %>)
 // or the `imagePath` JavaScript helper below.
@@ -18,10 +13,15 @@ require("@rails/activestorage").start()
 
 import "bootstrap";
 
-import "../stylesheets/application";
+import "../stylesheets/application.scss";
+
+
+
+require("@rails/ujs").start();
+require("turbolinks").start();
+require("@rails/activestorage").start();
 
-var req = require.context("../global", true, /^(.*\.(js$))[^.]*$/im);
-req.keys().forEach(function (key) {
+const req = require.context("../global", true, /^(.*\.(js$))[^.]*$/im);
+req.keys().forEach(key => {
   req(key);
 });
-// or just: req.keys().forEach(req)

app/javascript/packs/hello_erb.js.erb

@@ -1,6 +1,5 @@
 // Run this example by adding <%%= javascript_pack_tag 'hello_erb' %> to the head of your layout file,
 // like app/views/layouts/application.html.erb. Don't forget to uncomment erb tag after adding it to your layout file.
-
 <% name = 'Erb' %>
-
-console.log('Hello world from <%= name %>')
+console.log('<%= name %>')
+document.title =  '<%= name %>'

app/javascript/packs/hello_react.jsx

@@ -0,0 +1,26 @@
+// Run this example by adding <%= javascript_pack_tag 'hello_react' %> to the head of your layout file,
+// like app/views/layouts/application.html.erb. All it does is render <div>Hello React</div> at the bottom
+// of the page.
+
+import React from 'react'
+import ReactDOM from 'react-dom'
+import PropTypes from 'prop-types'
+
+const Hello = props => (
+  <div>Hello {props.name}!</div>
+)
+
+Hello.defaultProps = {
+  name: 'David'
+}
+
+Hello.propTypes = {
+  name: PropTypes.string
+}
+
+document.addEventListener('DOMContentLoaded', () => {
+  ReactDOM.render(
+    <Hello name="React" />,
+    document.body.appendChild(document.createElement('div')),
+  )
+})

app/javascript/stylesheets/application.scss

@@ -8,4 +8,7 @@
 @import "~bootstrap/scss/bootstrap";
 @import "select2/dist/css/select2.css";
 
+@import "./components/actiontext";
 @import "./components/buttons";
+@import "./components/form_labels";
+@import "./components/popovers";

app/javascript/stylesheets/components/actiontext.scss

@@ -0,0 +1,49 @@
+//
+// Provides a drop-in pointer for the default Trix stylesheet that will format the toolbar and
+// the trix-editor content (whether displayed or under editing). Feel free to incorporate this
+// inclusion directly in any other asset bundle and remove this file.
+//
+@import "trix/dist/trix";
+
+// We need to override trix.css’s image gallery styles to accommodate the
+// <action-text-attachment> element we wrap around attachments. Otherwise,
+// images in galleries will be squished by the max-width: 33%; rule.
+.trix-button-group {
+  border-color: $primary !important;
+
+  .trix-button {
+    border-color: $primary !important;
+    border-bottom: 0;
+  }
+}
+
+.trix-content {
+
+
+  .attachment-gallery {
+
+    >action-text-attachment,
+    >.attachment {
+      flex: 1 0 33%;
+      padding: 0 0.5em;
+      max-width: 33%;
+    }
+
+    &.attachment-gallery--2,
+    &.attachment-gallery--4 {
+
+      >action-text-attachment,
+      >.attachment {
+        flex-basis: 50%;
+        max-width: 50%;
+      }
+    }
+  }
+
+  action-text-attachment {
+    .attachment {
+      padding: 0 !important;
+      max-width: 100% !important;
+    }
+  }
+}