From 489cb36106c163b973e56c673692950ef9f9a395 Mon Sep 17 00:00:00 2001
From: John Cowen <johncowen@users.noreply.github.com>
Date: Mon, 12 Aug 2019 22:33:39 +0200
Subject: [PATCH] ui: Adds a `sort-control` component for asc/desc sorting of
 columns etc (#6034)

This adds the component but doesn't yet use it anywhere. No tests
are added here as there isn't an awful lot to test.
---
 ui-v2/app/components/sort-control.js          | 15 ++++++
 ui-v2/app/helpers/starts-with.js              |  7 +++
 .../base/components/sort-control/index.scss   |  1 +
 .../base/components/sort-control/skin.scss    | 17 +++++++
 ui-v2/app/styles/components/index.scss        |  1 +
 ui-v2/app/styles/components/sort-control.scss |  4 ++
 .../app/templates/components/sort-control.hbs |  7 +++
 .../components/sort-control-test.js           | 50 +++++++++++++++++++
 .../integration/helpers/starts-with-test.js   | 20 ++++++++
 9 files changed, 122 insertions(+)
 create mode 100644 ui-v2/app/components/sort-control.js
 create mode 100644 ui-v2/app/helpers/starts-with.js
 create mode 100644 ui-v2/app/styles/base/components/sort-control/index.scss
 create mode 100644 ui-v2/app/styles/base/components/sort-control/skin.scss
 create mode 100644 ui-v2/app/styles/components/sort-control.scss
 create mode 100644 ui-v2/app/templates/components/sort-control.hbs
 create mode 100644 ui-v2/tests/integration/components/sort-control-test.js
 create mode 100644 ui-v2/tests/integration/helpers/starts-with-test.js

diff --git a/ui-v2/app/components/sort-control.js b/ui-v2/app/components/sort-control.js
new file mode 100644
index 000000000000..f02e3602e95a
--- /dev/null
+++ b/ui-v2/app/components/sort-control.js
@@ -0,0 +1,15 @@
+import Component from '@ember/component';
+import { get, set } from '@ember/object';
+export default Component.extend({
+  classNames: ['sort-control'],
+  direction: 'asc',
+  onchange: function() {},
+  actions: {
+    change: function(e) {
+      if (e.target.type === 'checkbox') {
+        set(this, 'direction', e.target.checked ? 'desc' : 'asc');
+      }
+      this.onchange({ target: { value: `${get(this, 'value')}:${get(this, 'direction')}` } });
+    },
+  },
+});
diff --git a/ui-v2/app/helpers/starts-with.js b/ui-v2/app/helpers/starts-with.js
new file mode 100644
index 000000000000..b4e25bc69e40
--- /dev/null
+++ b/ui-v2/app/helpers/starts-with.js
@@ -0,0 +1,7 @@
+import { helper } from '@ember/component/helper';
+
+export function startsWith([needle, haystack = ''] /*, hash*/) {
+  return haystack.startsWith(needle);
+}
+
+export default helper(startsWith);
diff --git a/ui-v2/app/styles/base/components/sort-control/index.scss b/ui-v2/app/styles/base/components/sort-control/index.scss
new file mode 100644
index 000000000000..0650ebf9ba1f
--- /dev/null
+++ b/ui-v2/app/styles/base/components/sort-control/index.scss
@@ -0,0 +1 @@
+@import './skin';
diff --git a/ui-v2/app/styles/base/components/sort-control/skin.scss b/ui-v2/app/styles/base/components/sort-control/skin.scss
new file mode 100644
index 000000000000..4b9f1e6bff05
--- /dev/null
+++ b/ui-v2/app/styles/base/components/sort-control/skin.scss
@@ -0,0 +1,17 @@
+%sort-control input {
+  display: none;
+}
+%sort-control label {
+  @extend %user-select-none;
+  cursor: pointer;
+}
+%sort-control input[type='checkbox'] + label::after {
+  @extend %as-pseudo;
+  opacity: 0.7;
+}
+%sort-control input[type='checkbox'] + label::after {
+  @extend %with-arrow-down-icon;
+}
+%sort-control input[type='checkbox']:checked + label::after {
+  @extend %with-arrow-up-icon;
+}
diff --git a/ui-v2/app/styles/components/index.scss b/ui-v2/app/styles/components/index.scss
index b446c927aa3c..e0ee99db2b3e 100644
--- a/ui-v2/app/styles/components/index.scss
+++ b/ui-v2/app/styles/components/index.scss
@@ -31,3 +31,4 @@
 @import './modal-dialog';
 @import './notice';
 @import './tooltip';
+@import './sort-control';
diff --git a/ui-v2/app/styles/components/sort-control.scss b/ui-v2/app/styles/components/sort-control.scss
new file mode 100644
index 000000000000..aa08af693b4f
--- /dev/null
+++ b/ui-v2/app/styles/components/sort-control.scss
@@ -0,0 +1,4 @@
+@import '../base/components/sort-control/index';
+.sort-control {
+  @extend %sort-control;
+}
diff --git a/ui-v2/app/templates/components/sort-control.hbs b/ui-v2/app/templates/components/sort-control.hbs
new file mode 100644
index 000000000000..31a9556362c3
--- /dev/null
+++ b/ui-v2/app/templates/components/sort-control.hbs
@@ -0,0 +1,7 @@
+<input id={{concat 'sort-control-value-' elementId}} type="radio" value="Name" name={{concat 'sort-control-' name}} onchange={{action 'change'}} />
+{{#if checked}}
+<input id={{concat 'sort-control-direction-' elementId}} type="checkbox" onchange={{action 'change'}} />
+{{/if}}
+<label for={{if checked (concat 'sort-control-direction-' elementId) (concat 'sort-control-value-' elementId)}}>
+  {{yield}}
+</label>
\ No newline at end of file
diff --git a/ui-v2/tests/integration/components/sort-control-test.js b/ui-v2/tests/integration/components/sort-control-test.js
new file mode 100644
index 000000000000..0cf4192c4a59
--- /dev/null
+++ b/ui-v2/tests/integration/components/sort-control-test.js
@@ -0,0 +1,50 @@
+import { moduleForComponent, test } from 'ember-qunit';
+import hbs from 'htmlbars-inline-precompile';
+
+moduleForComponent('sort-control', 'Integration | Component | sort control', {
+  integration: true,
+});
+
+test('it renders', function(assert) {
+  // Set any properties with this.set('myProperty', 'value');
+  // Handle any actions with this.on('myAction', function(val) { ... });
+
+  this.render(hbs`{{sort-control}}`);
+
+  assert.equal(
+    this.$()
+      .text()
+      .trim(),
+    ''
+  );
+
+  // Template block usage:
+  this.render(hbs`
+    {{#sort-control}}
+      template block text
+    {{/sort-control}}
+  `);
+
+  assert.equal(
+    this.$()
+      .text()
+      .trim(),
+    'template block text'
+  );
+});
+test('it changes direction and calls onchange when clicked/activated', function(assert) {
+  assert.expect(2);
+  let count = 0;
+  this.on('change', e => {
+    if (count === 0) {
+      assert.equal(e.target.value, 'sort:desc');
+    } else {
+      assert.equal(e.target.value, 'sort:asc');
+    }
+    count++;
+  });
+  this.render(hbs`{{sort-control checked=true value='sort' onchange=(action 'change')}}`);
+  const $label = this.$('label');
+  $label.trigger('click');
+  $label.trigger('click');
+});
diff --git a/ui-v2/tests/integration/helpers/starts-with-test.js b/ui-v2/tests/integration/helpers/starts-with-test.js
new file mode 100644
index 000000000000..825a631c3e68
--- /dev/null
+++ b/ui-v2/tests/integration/helpers/starts-with-test.js
@@ -0,0 +1,20 @@
+import { moduleForComponent, test } from 'ember-qunit';
+import hbs from 'htmlbars-inline-precompile';
+
+moduleForComponent('starts-with', 'helper:starts-with', {
+  integration: true,
+});
+
+// Replace this with your real tests.
+test('it renders', function(assert) {
+  this.set('inputValue', '1234');
+
+  this.render(hbs`{{starts-with inputValue}}`);
+
+  assert.equal(
+    this.$()
+      .text()
+      .trim(),
+    'false'
+  );
+});