Merge pull request #6266 from deutschebank/db-contrib/waltz-6263-asse…

…ssment-search

Db contrib/waltz 6263 assessment search

waltz-ng/client/assessments/components/list/AssessmentRatingList.svelte

@@ -7,6 +7,8 @@
     import AssessmentRatingListGroup from "./AssessmentRatingListGroup.svelte";
     import Icon from "../../../common/svelte/Icon.svelte";
     import {assessments} from "../section/assessment-rating-section";
+    import SearchInput from "../../../common/svelte/SearchInput.svelte";
+    import {termSearch} from "../../../common";
 
 
     let elem;
@@ -19,6 +21,8 @@
     let expansions;
     let userPreferences = null;
     let userPreferenceCall;
+    let qry;
+    let groupedAssessments;
 
     export let primaryEntityRef = [];
     export let onSelect = (d) => console.log("selected", d);
@@ -104,8 +108,12 @@
         }
     }
 
+    $: visibleAssessments = _.isEmpty(qry)
+        ? $assessments
+        : termSearch($assessments, qry, ["definition.name", "ratingItem.name"]);
+
     $: groupedAssessments = _
-        .chain($assessments)
+        .chain(visibleAssessments)
         .groupBy(d => d.definition?.definitionGroup)
         .map((v, k) => {
 
@@ -124,7 +132,6 @@
         .orderBy([d => d.groupName === "Uncategorized", d => d.groupName])
         .value();
 
-
     $: {
         if (stores) {
             $defaultPrimaryList = _
@@ -141,7 +148,7 @@
 <div class="row">
 
     <div class="col-sm-12">
-
+        <SearchInput bind:value={qry}/>
         <table class="table table-hover table-condensed">
             <colgroup>
                 <col width="10%"/>

waltz-ng/client/common/colors.js

@@ -293,4 +293,16 @@ export function determineForegroundColor(r, g, b) {
     return useBlackAsForeground(r, g, b)
         ? "rgba(50, 50, 50, 0.9)"
         : "rgba(255, 255, 255, 0.9)";
+}
+
+
+function componentToHex(c) {
+    const hex = c.toString(16);
+    return hex.length === 1
+        ? "0"+hex
+        : hex;
+}
+
+export function rgbToHex(r,g,b) {
+    return `#${componentToHex(r)}${componentToHex(g)}${componentToHex(b)}`
 }

waltz-ng/client/playpen/4/ColorScale.svelte

@@ -0,0 +1,80 @@
+<script>
+    import _ from "lodash";
+    import {scaleLinear} from "d3-scale";
+    import {color} from "d3-color";
+    import ColorPicker from "../../system/svelte/ratings-schemes/ColorPicker.svelte";
+    import {rgbToHex} from "../../common/colors";
+
+    let rows = [];
+    let howMany = 5;
+    let colors = null;
+    let startColor = "#5bb65d";
+    let endColor = "#dae714";
+
+    function swap() {
+        const temp = startColor;
+        startColor = endColor;
+        endColor = temp;
+    }
+
+    $: colors = scaleLinear()
+        .domain([0, howMany])
+        .range([startColor, endColor]);
+
+    $: rows = _.range(0, howMany).map(d => {
+        const colorRgb = color(colors(d));
+        return {
+            colorRgb,
+            colorHex: rgbToHex(colorRgb.r, colorRgb.g, colorRgb.b)
+        };
+    });
+</script>
+
+<div class="row">
+    <div class="col-sm-6">
+        <label>Rows ({howMany}):
+            <input type="range"
+                   min="0"
+                   max="30"
+                   bind:value={howMany}>
+        </label>
+        <br>
+        <label>Start Color
+            <ColorPicker startColor={'#5bb65d'}
+                         on:select={evt => startColor = evt.detail}/>
+        </label>
+        <br>
+        <label>End Color
+            <ColorPicker startColor={'#dae714'}
+                         on:select={evt => endColor = evt.detail}/>
+        </label>
+    </div>
+
+    <div class="col-sm-6">
+        <table class="table table-condensed table-striped">
+            {#each rows as row}
+                <tr>
+                    <td>
+                        <div class="box"
+                             style={`background-color: ${row.colorRgb}`}>
+                        </div>
+                    </td>
+                    <td><span>{row.colorHex}</span></td>
+                </tr>
+            {/each}
+        </table>
+
+        <button class="btn"
+                on:click={swap}>
+            Swap Direction
+        </button>
+    </div>
+</div>
+
+
+<style>
+    .box {
+        width: 1em;
+        height: 1em;
+    }
+</style>

waltz-ng/client/playpen/4/playpen4.html

@@ -28,6 +28,9 @@
         </breadcrumbs>
     </waltz-page-header>
 
+    <waltz-section name="scale">
+        <waltz-svelte-component component="$ctrl.ColorScale"></waltz-svelte-component>
+    </waltz-section>
     <waltz-section name="pp4">
         <waltz-app-complexity-summary-section parent-entity-ref="$ctrl.parentEntityRef">
         </waltz-app-complexity-summary-section>

waltz-ng/client/playpen/4/playpen4.js

@@ -17,9 +17,11 @@
  */
 import {initialiseData} from "../../common/index";
 import template from "./playpen4.html";
+import ColorScale from "./ColorScale.svelte";
 
 const initialState = {
     parentEntityRef: { kind: "ORG_UNIT", id: 2216 }, //10524
+    ColorScale
 };
 
 

waltz-ng/client/system/svelte/ratings-schemes/ColorPicker.svelte

@@ -1,9 +1,32 @@
 <script>
     import {createEventDispatcher} from 'svelte';
+    import {
+        amberHex,
+        blueHex,
+        goldHex,
+        greenHex,
+        greyHex,
+        lightGreyHex,
+        pinkHex,
+        purpleHex,
+        redHex, yellowHex
+    } from "../../../common/colors";
 
     const dispatch = createEventDispatcher();
 
-    export let predefinedColors = [];
+    export let predefinedColors = [
+        greyHex,
+        lightGreyHex,
+        greenHex,
+        blueHex,
+        purpleHex,
+        redHex,
+        pinkHex,
+        goldHex,
+        amberHex,
+        yellowHex
+    ];
+
     export let startColor;
 
     $: selectedColor = startColor;