[IN-71][EOSF] Add citation picker to citation-widget

CHANGELOG.md

@@ -5,6 +5,7 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/en/1.0.0/)
 and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html).
 
 ## [Unreleased]
+
 ### Added
 - `osf-model.queryHasMany`, for reliable querying of hasMany relations
 - Modal to `file-browser` for moving quick files to projects
@@ -14,6 +15,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 - Translations for `project-selector` component
 - Move function for `file` model
 - `ember-collapsable-panel` and `ember-power-select` packages
+- Added "choose your custom citation" section to citation-widget
 
 ### Changed
 - Node `addChild` model function to create public child elements

addon/components/citation-widget/component.js

@@ -1,5 +1,7 @@
 import Ember from 'ember';
 import layout from './template';
+import { task, timeout } from 'ember-concurrency';
+import config from 'ember-get-config';
 
 /**
  * @module ember-osf
@@ -34,7 +36,8 @@ export default Ember.Component.extend({
     mla: null,
     node: null,
     store: Ember.inject.service(),
-
+    styles: Ember.A([]),
+    selectedStyle: 'Enter citation style (e.g. "APA")',
     didReceiveAttrs() {
         const node = this.get('node');
 
@@ -43,12 +46,45 @@ export default Ember.Component.extend({
         }
 
         const citationLink = node.get('links.relationships.citation.links.related.href');
+        this.set('citationLink', citationLink);
 
         for (const { linkSuffix, attr } of citationStyles) {
             this.get('store')
                 .adapterFor('node')
                 .ajax(`${citationLink}${linkSuffix}/`, 'GET')
                 .then(resp => this.set(attr, resp.data.attributes.citation));
         }
-    }
+    },
+    actions: {
+        selectStyle(style) {
+            this.set('selectedStyle', style);
+            this.get('_selectStyle').perform(style.id);
+        }
+    },
+    citationText: 'No citation selected.',
+    _selectStyle: task(function* (id) {
+        const citationLink = this.get('citationLink');
+        const response = yield Ember.$.ajax(`${citationLink}${id}/`);
+        this.set('citationText', response.data.attributes.citation);
+    }).restartable(),
+    findStyles: task(function* (term) {
+        yield timeout(500);
+        const response = yield Ember.$.ajax({
+            method: 'GET',
+            url: `${config.OSF.apiUrl}/${config.OSF.apiNamespace}/citations/styles/?filter[title,short_title]=${term}&page[size]=100` ,
+            dataType: 'json',
+            contentType: 'application/json'
+        });
+        if (response.links.next !== null) {
+            response.data.push({
+                attributes: {
+                    // TODO: Can (ask product) lazy load the rest of the styles when scrolled down, once @adlius's PR is merged:
+                    // https://github.com/CenterForOpenScience/ember-osf/pull/338
+                    title: `${response.links.meta.total - 100} more, type more to narrow results`,
+                },
+                disabled: true,
+            });
+        }
+        return response.data;
+    }).restartable()
 });

addon/components/citation-widget/style.scss

@@ -0,0 +1,4 @@
+.formatted-citation {
+    white-space: pre-wrap;
+    word-break: break-word;
+}

addon/components/citation-widget/template.hbs

@@ -1,8 +1,24 @@
-<div class="citation-widget">
-    <div class="f-w-xl">APA</div>
-    <span>{{apa}} </span>
-    <div class="f-w-xl m-t-md">MLA</div>
-    <span> {{mla}} </span>
-    <div class="f-w-xl m-t-md">Chicago</div>
-    <span> {{chicago}} </span>
+<div>
+    <div id="citationList" class="m-b-md">
+        <div class="f-w-xl">APA</div>
+        <span> {{apa}} </span>
+        <div class="f-w-xl m-t-md">MLA</div>
+        <span> {{mla}} </span>
+        <div class="f-w-xl m-t-md">Chicago</div>
+        <span> {{chicago}} </span>
+    </div>
+    <p><strong>Get more citations</strong></p>
+    {{#power-select
+        search=(perform findStyles)
+        selected=selectedStyle
+        loadingMessage="Searching..."
+        noMatchesMessage="No matches found."
+        searchMessage="Please enter a few characters"
+        onchange=(action 'selectStyle')
+        renderInPlace=true
+        as |style|
+    }}
+        {{style.attributes.title}}
+    {{/power-select}}
+    <pre id="citationText" class="formatted-citation">{{citationText}}</pre>
 </div>

addon/styles/addon.scss

@@ -21,5 +21,6 @@
 @import 'components/search-facet-worktype-button/style';
 @import 'components/donate-banner/style';
 @import 'components/file-version/style';
+@import 'components/citation-widget/style';
 @import 'components/validated-input/style';
 @import 'components/project-selector/style';

package.json

@@ -84,6 +84,7 @@
     "ember-ace": "^1.2.0",
     "ember-bootstrap-datepicker": "^2.0.3",
     "ember-cli-babel": "6.4.1",
+    "ember-concurrency": "0.8.12",
     "ember-cli-clipboard": "0.8.1",
     "ember-cli-htmlbars": "2.0.1",
     "ember-cli-htmlbars-inline-precompile": "0.4.3",

tests/integration/components/citation-widget/component-test.js

@@ -11,6 +11,6 @@ test('it renders', function(assert) {
 
   this.render(hbs`{{citation-widget}}`);
 
-  assert.equal(this.$('div.citation-widget div').text(), 'APAMLAChicago');
+  assert.equal(this.$('div.citation-widget div').text(), '');
 
 });