Merge pull request #68 from zarathustra323/branding

Story publisher and advertiser/publisher website fields

app/components/-forms/campaign/create.js

@@ -25,14 +25,17 @@ export default Component.extend(ActionMixin, ComponentQueryManager, {
 
       const key = `create${classify(type)}Campaign`;
 
-      const { advertiser, name, story } = this.get('model');
+      const { advertiser, publisher, name, story } = this.get('model');
       const input = { name };
       if (['new-story', 'external-url'].includes(type)) {
         input.advertiserId = get(advertiser, 'id');
       }
       if (type === 'existing-story') {
         input.storyId = get(story, 'id');
       }
+      if (type === 'new-story') {
+        input.publisherId = get(publisher, 'id');
+      }
 
       const mutation = this.get(key);
       const variables = { input };

app/components/-forms/story/-fields/publisher.js

@@ -0,0 +1,20 @@
+import Component from '@ember/component';
+import { inject } from '@ember/service';
+
+export default Component.extend({
+  autocomplete: inject(),
+
+  classNames: ['form-group'],
+  value: null,
+
+  actions: {
+    /**
+     * Performs the advertiser autocomplete search.
+     *
+     * @param {*} phrase
+     */
+    search(phrase) {
+      return this.get('autocomplete').query('publishers', phrase);
+    },
+  },
+});

app/controllers/manage/advertiser/edit/index.js

@@ -42,7 +42,7 @@ export default Controller.extend(ActionMixin, {
      *
      * @param {object} fields
      */
-    async update({ id, name, notify }) {
+    async update({ id, name, website, notify }) {
       this.startAction();
       const promises = [];
       ['internal', 'external'].forEach((type) => {
@@ -52,7 +52,7 @@ export default Controller.extend(ActionMixin, {
         const mutation = setContacts;
         promises.push(this.get('apollo').mutate({ mutation, variables }, 'setAdvertiserContacts'));
       });
-      const payload = { name };
+      const payload = { name, website };
       const variables = { input: { id, payload } };
       const mutation = updateAdvertiser;
 

app/controllers/manage/publisher/create.js

@@ -12,9 +12,9 @@ export default Controller.extend(ActionMixin, {
      *
      * @param {object} fields
      */
-    async create({ name }) {
+    async create({ name, website }) {
       this.startAction();
-      const payload = { name };
+      const payload = { name, website };
       const variables = { input: { payload } };
       try {
         const response = await this.get('apollo').mutate({ mutation, variables }, 'createPublisher');

app/controllers/manage/publisher/edit/index.js

@@ -59,9 +59,9 @@ export default Controller.extend(ActionMixin, {
      *
      * @param {object} fields
      */
-    async update({ id, name }) {
+    async update({ id, name, website }) {
       this.startAction();
-      const payload = { name };
+      const payload = { name, website };
       const variables = { input: { id, payload } };
       try {
         await this.get('apollo').mutate({ mutation: updatePublisher, variables }, 'updatePublisher');

app/controllers/manage/story/create.js

@@ -13,12 +13,18 @@ export default Controller.extend(ActionMixin, {
      *
      * @param {object} fields
      */
-    async create({ title, advertiser, publishedAt }) {
+    async create() {
       this.startAction();
+      const {
+        title,
+        advertiser,
+        publisher,
+      } = this.get('model');
+
       const payload = {
         title,
         advertiserId: get(advertiser || {}, 'id'),
-        publishedAt: publishedAt ? publishedAt.valueOf() : null,
+        publisherId: get(publisher || {}, 'id'),
       };
       const variables = { input: { payload } };
       try {

app/controllers/manage/story/edit/index.js

@@ -15,13 +15,14 @@ export default Controller.extend(ActionMixin, {
      *
      * @param {object} fields
      */
-    async update({ id, advertiser, title, teaser, body, publishedAt }) {
+    async update({ id, advertiser, publisher, title, teaser, body, publishedAt }) {
       this.startAction();
       const payload = {
         title,
         teaser,
         body,
         advertiserId: get(advertiser || {}, 'id'),
+        publisherId: get(publisher || {}, 'id'),
         publishedAt: publishedAt ? publishedAt.valueOf() : null,
       };
       const variables = { input: { id, payload } };

app/gql/fragments/advertiser/edit.graphql

@@ -4,6 +4,7 @@
 fragment AdvertiserEditFragment on Advertiser {
   id
   name
+  website
   hash
   logo {
     ...ImageSrcFragment

app/gql/fragments/publisher/edit.graphql

@@ -3,6 +3,7 @@
 fragment PublisherEditFragment on Publisher {
   id
   name
+  website
   createdAt
   updatedAt
   domainName

app/gql/fragments/story/list.graphql

@@ -9,6 +9,10 @@ fragment StoryListFragment on Story {
     id
     name
   }
+  publisher {
+    id
+    name
+  }
   status
   publishedAt
   primaryImage {

app/gql/fragments/story/view.graphql

@@ -12,6 +12,10 @@ fragment StoryFragment on Story {
     id
     hash
   }
+  publisher {
+    id
+    name
+  }
   primaryImage {
     ...ImageViewFragment
   }

app/templates/components/-forms/campaign/create.hbs

@@ -11,6 +11,7 @@
       type=(component "-forms/campaign/-fields/type" form=form value=campaignType on-change=(action "setCampaignType"))
       name=(component "-forms/campaign/-fields/name" form=form value=model.name on-change=(action "setFieldValue"))
       advertiser=(component "-forms/campaign/-fields/advertiser" form=form disabled=isActionRunning value=model.advertiser on-change=(action "setFieldValue"))
+      publisher=(component "-forms/story/-fields/publisher" form=form disabled=isActionRunning value=model.publisher on-change=(action "setFieldValue"))
       story=(component "-forms/campaign/-fields/story" form=form disabled=isActionRunning value=model.story on-change=(action "setFieldValue"))
     )
     buttons=(hash

app/templates/components/-forms/story/-fields/publisher.hbs

@@ -0,0 +1,22 @@
+<label for="story-publisher">Primary Publisher {{required-field-label}}</label>
+{{#form.elements.typeahead
+  id="story-publisher"
+  placeholder="Begin typing to search..."
+  autocomplete="off"
+  class="form-control"
+  name="publisher"
+  label="Primary Publisher"
+  value=model.publisher
+  disabled=disabled
+  required=true
+  aria-labeledby="story-publisher-help"
+  allowClear=false
+  on-search=(action "search")
+  on-change=on-change as |typeahead|
+}}
+  {{#typeahead.element as |publisher|}}
+    {{publisher.name}}
+  {{/typeahead.element}}
+  {{typeahead.elements.invalid-feedback}}
+{{/form.elements.typeahead}}
+<small id="story-publisher-help" class="form-text text-muted">The primary publisher running the story.</small>

app/templates/components/story-published-at.hbs

@@ -5,8 +5,9 @@
       {{#if publishedAt}}
         {{moment-format publishedAt displayFormat}}
       {{else}}
-        Not Published (Draft)
+        Not Published
       {{/if}}
+      ({{story-status status=status}})
     </a>
     <div class="input-group-append">
       <button class="btn btn-light" {{action 'removeDate'}}>

app/templates/manage/advertiser/form.hbs

@@ -19,6 +19,25 @@
   </div>
 </div>
 
+<div class="row">
+  <div class="col">
+    <div class="form-group">
+      <label for="website">Website</label>
+      {{input
+        type="url"
+        value=form.model.website
+        class="form-control"
+        id="website"
+        focusOut=(action form.actions.autosave)
+        keyUp=(action form.actions.autosave 750)
+      }}
+      <div class="invalid-feedback">
+        Please provide a valid website.
+      </div>
+    </div>
+  </div>
+</div>
+
 <div class="row">
   <div class="col">
     <div class="form-group">

app/templates/manage/campaign/create.hbs

@@ -32,6 +32,14 @@
         </div>
       </div>
 
+      {{#if (eq form.campaignType 'new-story')}}
+        <div class="row">
+          <div class="col-sm-6">
+            {{form.fields.publisher class="mb-0 mt-3"}}
+          </div>
+        </div>
+      {{/if}}
+
     </div>
     <div class="card-footer">
       {{form.buttons.save}}

app/templates/manage/publisher/form.hbs

@@ -19,10 +19,31 @@
   </div>
 </div>
 
+<div class="row">
+  <div class="col">
+    <div class="form-group mb-0">
+      <label for="publisher-website">Website {{required-field-label}}</label>
+      {{input
+        type="url"
+        required=true
+        value=form.model.website
+        class="form-control"
+        id="publisher-website"
+        placeholder="https://www.publisher-website.com"
+        focusOut=(action form.actions.autosave)
+        keyUp=(action form.actions.autosave 750)
+      }}
+      <div class="invalid-feedback">
+        Please provide a publisher website.
+      </div>
+    </div>
+  </div>
+</div>
+
 {{#if model.id}}
   <div class="row">
     <div class="col">
-      <div class="form-group">
+      <div class="form-group mt-3">
         <label for="publisher-domain-name">Custom Domain Name</label>
         {{input
           type="text"

app/templates/manage/story/fields/publisher.hbs

@@ -0,0 +1,17 @@
+<div class="form-group">
+  <label for="name">Primary Publisher {{required-field-label}}</label>
+  {{#type-ahead
+    required=true
+    wasFormValidated=form.wasValidated
+    invalidFeedback="Please select a publisher."
+    triggerClass="form-control"
+    placeholder="Begin typing to search..."
+    type="publisher"
+    closeOnSelect=true
+    allowClear=false
+    onChange=(action form.actions.autosave)
+    selected=form.model.publisher as |item|
+  }}
+    {{item.name}}
+  {{/type-ahead}}
+</div>

app/templates/manage/story/forms/create.hbs

@@ -9,12 +9,6 @@
     {{partial "manage/story/fields/advertiser"}}
   </div>
   <div class="col-lg-6">
-    <div class="form-group">
-      <label for="start">Published Date</label>
-      {{story-published-at
-        publishedAt=form.model.publishedAt
-        onSelect=(action form.actions.setAndAutosave "publishedAt")
-      }}
-    </div>
+    {{partial "manage/story/fields/publisher"}}
   </div>
 </div>

app/templates/manage/story/forms/edit.hbs

@@ -12,13 +12,7 @@
         {{partial "manage/story/fields/advertiser"}}
       </div>
       <div class="col-lg-6">
-        <div class="form-group">
-          <label for="start">Published Date</label>
-          {{story-published-at
-            publishedAt=form.model.publishedAt
-            onSelect=(action form.actions.setAndAutosave "publishedAt")
-          }}
-        </div>
+        {{partial "manage/story/fields/publisher"}}
       </div>
     </div>
 
@@ -62,17 +56,17 @@
         </div>
       {{/link-to}}
     {{/if}}
-    <div class="row mt-3">
-      <div class="col d-flex justify-content-between">
-        <span>{{entypo-icon "calendar"}} Published</span>  {{if model.publishedAt (moment-format model.publishedAt "MMM Do, YYYY @ h:mma") "N/A"}}
-      </div>
-    </div>
-    <div class="row">
-      <div class="col d-flex justify-content-between">
-        <span>{{entypo-icon "flag"}} Status</span> {{story-status status=model.status}}
+
+    <div class="row my-4">
+      <div class="col">
+        {{story-published-at
+          publishedAt=form.model.publishedAt
+          status=form.model.status
+          onSelect=(action form.actions.setAndAutosave "publishedAt")
+        }}
       </div>
     </div>
-    <hr>
+
     <h6>Links</h6>
     <div class="row">
       <div class="col">

app/templates/manage/story/list-item.hbs

@@ -24,7 +24,7 @@
         <div class="d-flex flex-column">
           <h4 class="mb-1">{{item.title}}</h4>
           <p class="mb-1">{{story-status status=item.status}}</p>
-          <p class="mb-0">Advertiser: {{item.advertiser.name}}</p>
+          <p class="mb-0">{{item.advertiser.name}} (via {{item.publisher.name}})</p>
           <p class="mb-1">Campaigns: {{if item.campaigns.totalCount item.campaigns.totalCount 0}}</p>
           <small>ID: {{item.id}}</small>
         </div>