Front end reporting support

app/components/report/-icon.js

@@ -0,0 +1,5 @@
+import Component from '@ember/component';
+
+export default Component.extend({
+  tagName: '',
+});

app/components/report/date-selector.js

@@ -0,0 +1,47 @@
+import Component from '@ember/component';
+import InitValueMixin from 'fortnight/mixins/init-value';
+import ActionMixin from 'fortnight/mixins/action-mixin';
+import moment from 'moment';
+import { observer } from '@ember/object';
+
+export default Component.extend(ActionMixin, InitValueMixin, {
+  center: null,
+  format: 'MMM Do, YYYY',
+
+  disabled: false,
+
+  init() {
+    this._super(...arguments);
+    const endDate = this.get('range.end');
+    this.initValue('center', endDate ? moment(endDate) : moment());
+    this.setDropdownLabel();
+  },
+
+  hasRangeChanged: observer('range.{start,end}', function() {
+    const { start, end } = this.get('range');
+    if (start && end) this.setDropdownLabel();
+  }),
+
+  setDropdownLabel() {
+    const { start, end } = this.get('range');
+    const format = this.get('format');
+    if (!start || !end) return 'Select Date Range';
+    const label = `${moment(start).format(format)} - ${moment(end).format(format)}`;
+    this.set('dropdownLabel', label);
+  },
+
+  actions: {
+    setRange(dropdown, value) {
+      if (!this.get('disabled')) {
+        const range = value.moment;
+        this.set('range', range);
+        const { start, end } = range;
+        if (start && end) {
+          this.setDropdownLabel();
+          dropdown.actions.close();
+          this.sendEventAction('onchange', range);
+        }
+      }
+    }
+  },
+});

app/components/report/model-filter.js

@@ -0,0 +1,17 @@
+import Component from '@ember/component';
+import { inject } from '@ember/service';
+import { computed } from '@ember/object';
+
+export default Component.extend({
+  autocomplete: inject(),
+  classNames: ['form-group', 'col-sm-6', 'col-md-4'],
+  id: computed('modelName', function() {
+    return `model-filter-${this.get('modelName')}`;
+  }),
+  label: null,
+  actions: {
+    search(phrase) {
+      return this.get('autocomplete').query(this.get('modelName'), phrase);
+    }
+  }
+});

app/controllers/manage/reports.js

@@ -0,0 +1,76 @@
+import Controller from '@ember/controller';
+import moment from 'moment';
+import { inject } from '@ember/service';
+import ActionMixin from 'fortnight/mixins/action-mixin';
+import query from 'fortnight/gql/queries/report/list';
+import { computed } from '@ember/object';
+
+export default Controller.extend(ActionMixin, {
+  apollo: inject(),
+  start: null,
+  end: null,
+
+  init() {
+    this._super(...arguments);
+    this.set('start', moment().startOf('week'));
+    this.set('end', moment().endOf('week'));
+    this.setProperties({
+      publishers: [],
+      topics: [],
+      placements: [],
+      advertisers: [],
+      campaigns: [],
+    });
+  },
+
+  downloadInput: computed('start', 'end', 'publishers', 'topics', 'placements', 'advertisers', 'campaigns', function() {
+    return JSON.stringify(this.getInput());
+  }),
+
+  getInput() {
+    return {
+      start: moment(this.get('start')).valueOf(),
+      end: moment(this.get('end')).valueOf(),
+      publisherIds: this.get('publishers').map(v => v.id),
+      topicIds: this.get('topics').map(v => v.id),
+      placementIds: this.get('placements').map(v => v.id),
+      advertiserIds: this.get('advertisers').map(v => v.id),
+      campaignIds: this.get('campaigns').map(v => v.id),
+    };
+  },
+
+  async execute() {
+    this.startAction();
+    const variables = { input: this.getInput() };
+
+    try {
+      const response = await this.get('apollo').watchQuery({ query, variables, fetchPolicy: 'network-only' }, 'report');
+      this.set('model', response);
+    } catch (e) {
+      this.get('graphErrors').show(e);
+    } finally {
+      this.endAction();
+    }
+  },
+
+  actions: {
+    setDates({ start, end }) {
+      this.setProperties({ start, end });
+    },
+    reset() {
+      this.setProperties({
+        start: moment().startOf('week'),
+        end: moment().endOf('week'),
+        publishers: [],
+        topics: [],
+        placements: [],
+        advertisers: [],
+        campaigns: [],
+      });
+      this.execute();
+    },
+    update() {
+      this.execute();
+    },
+  }
+});

app/gql/queries/report/list.graphql

@@ -0,0 +1,33 @@
+query ReportingList($input: ReportQueryInput!) {
+  report(input: $input) {
+    rows {
+      publisher {
+        id
+        name
+      }
+      topic {
+        id
+        name
+      }
+      placement {
+        id
+        name
+      }
+      advertiser {
+        id
+        name
+      }
+      campaign {
+        id
+        name
+      }
+      creative {
+        id
+        title
+      }
+      impressions
+      clicks
+      ctr
+    }
+  }
+}

app/router.js

@@ -9,6 +9,7 @@ const Router = EmberRouter.extend({
 Router.map(function() {
   this.route('manage', { path: '' }, function() {
     this.route('account');
+    this.route('reports');
 
     this.route('advertiser', function() {
       this.route('create');

app/routes/manage/reports.js

@@ -0,0 +1,25 @@
+import Route from '@ember/routing/route';
+import moment from 'moment';
+import RouteQueryManager from 'ember-apollo-client/mixins/route-query-manager';
+import query from 'fortnight/gql/queries/report/list';
+
+export default Route.extend(RouteQueryManager, {
+  /**
+   *
+   * @param {object} params
+   */
+  async model() {
+    const start = moment().startOf('week').valueOf();
+    const end = moment().endOf('week').valueOf();
+
+    const input = { start, end };
+    const variables = { input };
+
+    try {
+      const response = await this.get('apollo').watchQuery({ query, variables, fetchPolicy: 'network-only' }, 'report');
+      return response;
+    } catch (e) {
+      this.get('graphErrors').show(e);
+    }
+  },
+});

app/templates/components/report/-icon.hbs

@@ -0,0 +1 @@
+{{entypo-icon "bar-graph"}}

app/templates/components/report/date-selector.hbs

@@ -0,0 +1,30 @@
+{{#basic-dropdown as |dropdown|}}
+  <button
+    disabled={{disabled}}
+    class="btn btn-primary dropdown-toggle"
+    data-ebd-id="{{dropdown.uniqueId}}-trigger"
+    {{action dropdown.actions.toggle}}
+  >
+    {{entypo-icon "calendar"}}
+    {{dropdownLabel}}
+  </button>
+
+  {{#dropdown.content}}
+    <div class="card border-0 z-depth-2">
+      <div class="card-body">
+        {{#power-calendar-range
+          center=center
+          selected=range
+          disabled=disabled
+          minRange=0
+          onCenterChange=(action (mut center) value="moment")
+          onSelect=(action "setRange" dropdown)
+        as |calendar|
+        }}
+          {{calendar.nav}}
+          {{calendar.days}}
+        {{/power-calendar-range}}
+      </div>
+    </div>
+  {{/dropdown.content}}
+{{/basic-dropdown}}

app/templates/components/report/model-filter.hbs

@@ -0,0 +1,17 @@
+<label for={{id}}>{{label}}</label>
+{{#form-elements/typeahead
+  id=id
+  dropdownClass=dropdownClass
+  autocomplete="off"
+  name=modelName
+  label=label
+  multiple=true
+  closeOnSelect=false
+  value=value
+  disabled=disabled
+  on-change=(action (mut value))
+  on-search=(action "search")
+as |result|
+}}
+  {{if result.fullName result.fullName result.name}}
+{{/form-elements/typeahead}}

app/templates/manage/navigation.hbs

@@ -10,6 +10,12 @@
           {{/link-to}}
         {{/link-to}}
 
+        {{#link-to "manage.reports" tagName="li" class="nav-item"}}
+          {{#link-to "manage.reports" class="nav-link" title="Reports"}}
+            {{report/-icon}} <span class="d-none d-md-inline">Reports</span>
+          {{/link-to}}
+        {{/link-to}}
+
         {{#link-to "manage.campaign" tagName="li" class="nav-item"}}
           {{#link-to "manage.campaign" class="nav-link" title="Manage Campaigns"}}
             {{entypo-icon "calendar"}} <span class="d-none d-md-inline">Campaigns</span>
@@ -44,5 +50,3 @@
 
   {{loading-progress class="bg-dark"}}
 </div>
-
-