Campaigns CRUD (#53)

Author: Eric Berry

app/controllers/campaign_searches_controller.rb

@@ -18,6 +18,7 @@ def campaign_search_params
       :name,
       :us_hours_only,
       :user,
+      :user_id,
       :weekdays_only,
       countries: [],
       keywords: [],

app/controllers/campaigns_controller.rb

@@ -1,4 +1,6 @@
 class CampaignsController < ApplicationController
+  include Sortable
+
   before_action :authenticate_user!
   before_action :set_campaign_search, only: [:index]
   before_action :set_campaign, only: [:show, :edit, :update, :destroy]
@@ -7,7 +9,7 @@ class CampaignsController < ApplicationController
   # GET /campaigns
   # GET /campaigns.json
   def index
-    campaigns = Campaign.order(:name).includes(:user, :creative)
+    campaigns = Campaign.order(order_by).includes(:user, :creative)
     campaigns = campaigns.where(user: @user) if @user
     campaigns = @campaign_search.apply(campaigns)
     @pagy, @campaigns = pagy(campaigns)
@@ -22,7 +24,7 @@ def show
 
   # GET /campaigns/new
   def new
-    @campaign = Campaign.new
+    @campaign = current_user.campaigns.build(status: "pending")
   end
 
   # GET /campaigns/1/edit
@@ -92,6 +94,32 @@ def set_user
 
   # Never trust parameters from the scary internet, only allow the white list through.
   def campaign_params
-    params.fetch(:campaign, {})
+    params.require(:campaign).permit(
+      :user_id,
+      :status,
+      :name,
+      :date_range,
+      :url,
+      :creative_id,
+      :us_hours_only,
+      :weekdays_only,
+      :ecpm,
+      :daily_budget,
+      :total_budget,
+      countries: [],
+      keywords: [],
+      negative_keywords: []
+    )
+  end
+
+  def sortable_columns
+    %w[
+      name
+      end_date
+      total_budget_cents
+      status
+      created_at
+      user.first_name
+    ]
   end
 end

app/helpers/campaigns_helper.rb

@@ -9,6 +9,10 @@ def campaign_statuses_for_select
     ENUMS::CAMPAIGN_STATUSES.values
   end
 
+  def campaign_status_color(status)
+    ENUMS::CAMPAIGN_STATUS_COLORS[status]
+  end
+
   def campaign_status_html(status)
     case ENUMS::CAMPAIGN_STATUSES[status]
     when "active" then tag.span(class: "fas fa-circle text-success", title: "Active", data: tooltip_expando(placement: "left"))

app/inputs/currency_input.rb

@@ -0,0 +1,22 @@
+class CurrencyInput < SimpleForm::Inputs::Base
+  def input(wrapper_options)
+    currency = options.delete(:currency) || default_currency
+    merged_input_options = merge_wrapper_options(input_html_options, wrapper_options)
+
+    content_tag(:div, input_group(currency, merged_input_options), class: "input-group")
+  end
+
+  private
+
+  def input_group(currency, merged_input_options)
+    "#{currency_addon(currency)} #{@builder.text_field(attribute_name, merged_input_options)}".html_safe
+  end
+
+  def currency_addon(currency)
+    content_tag(:span, content_tag(:span, currency, class: "input-group-text"), class: "input-group-prepend")
+  end
+
+  def default_currency
+    "$"
+  end
+end

app/javascript/src/app/controllers/select_date_range_controller.js

@@ -2,24 +2,25 @@
 // Our use of it here is simply because its already a dependency
 // The verbose use of the `jQuery` variable instead of `$` is intentional so its use is easier to identify
 import { Controller } from 'stimulus';
+import moment from 'moment';
 
 export default class extends Controller {
   connect() {
-    jQuery(this.element).flatpickr({
-      mode: 'range',
-      dateFormat: 'M, d Y',
-      minDate: this.defaultStartDate,
-      defaultDate: [this.defaultStartDate, this.defaultEndDate],
+    jQuery(this.element).daterangepicker({
+      ranges: {
+        'Next 30 Days': [moment(), moment().add(29, 'days')],
+        'Next 60 Days': [moment(), moment().add(59, 'days')],
+        'Next 90 Days': [moment(), moment().add(89, 'days')],
+        'This Month': [moment().startOf('month'), moment().endOf('month')],
+        'Next Month': [
+          moment()
+            .add(1, 'month')
+            .startOf('month'),
+          moment()
+            .add(1, 'month')
+            .endOf('month'),
+        ],
+      },
     });
   }
-
-  get defaultStartDate() {
-    return new Date();
-  }
-
-  get defaultEndDate() {
-    let d = new Date();
-    d.setDate(d.getDate() + 30);
-    return d;
-  }
 }

app/javascript/src/app/index.js

@@ -1,6 +1,9 @@
 import './stylesheets/application.scss';
 import './theme';
 import 'select2';
+import 'moment';
+import 'bootstrap-daterangepicker';
+
 import { Application } from 'stimulus';
 import { definitionsFromContext } from 'stimulus/webpack-helpers';
 

app/javascript/src/app/stylesheets/application.scss

@@ -2,6 +2,7 @@
 @import '~select2-bootstrap-theme/dist/select2-bootstrap';
 @import "~noty/src/noty";
 @import "~noty/src/themes/mint";
+@import "~bootstrap-daterangepicker/daterangepicker";
 @import 'theme';
 @import 'components';
 @import 'utilities';

app/javascript/src/app/stylesheets/components.scss

@@ -122,15 +122,16 @@ th[scope=col] a {
     position: relative !important;
     display: inline-block !important;
     font-size: .875rem !important;
-    color: #77838f !important;
-    background: rgba(119, 131, 143, 0.1) !important;
+    color: #ffffff !important;
+    background: rgba(44, 127, 210, 0.66) !important;
     border-radius: 0.25rem !important;
     border: none !important;
     padding: .25rem .75rem !important;
     margin: 0 0 .25rem .25rem !important;
 
     .select2-selection__choice__remove {
       margin-right: 6px !important;
+      color: #ffffff !important;
     }
   }
 }

app/javascript/src/app/stylesheets/theme.scss

@@ -3,4 +3,6 @@
 @import '~theme/vendor/malihu-custom-scrollbar-plugin/jquery.mCustomScrollbar';
 @import '~theme/vendor/fancybox/jquery.fancybox';
 @import '~theme/vendor/slick-carousel/slick/slick';
+@import '~theme/vendor/flatpickr/dist/flatpickr.min';
+@import '~theme/vendor/bootstrap-select/dist/css/bootstrap-select.min';
 @import '~theme/include/scss/theme';

app/javascript/src/app/theme.js

@@ -1,7 +1,6 @@
 // theme vendored scripts
 import 'theme/vendor/bootstrap/bootstrap.min';
 import 'theme/vendor/appear';
-import 'theme/vendor/flatpickr/dist/flatpickr';
 import 'theme/vendor/bootstrap-select/dist/js/bootstrap-select';
 import 'theme/vendor/hs-megamenu/src/hs.megamenu';
 import 'theme/vendor/malihu-custom-scrollbar-plugin/jquery.mCustomScrollbar.concat.min';
@@ -29,7 +28,6 @@ import 'theme/js/components/hs.show-animation';
 import 'theme/js/components/hs.go-to';
 import 'theme/js/components/hs.sticky-block';
 import 'theme/js/components/hs.scroll-nav';
-// import "theme/js/components/hs.summernote-editor";
 import 'theme/js/components/hs.chartist-area-chart';
 import 'theme/js/components/hs.chartist-bar-chart';
 import 'theme/js/components/hs.focus-state';
@@ -46,7 +44,6 @@ document.addEventListener('turbolinks:load', () => {
   jQuery.HSCore.components.HSFancyBox.init('.js-fancybox');
   jQuery.HSCore.components.HSSlickCarousel.init('.js-slick-carousel');
   jQuery.HSCore.components.HSValidation.init('.js-validate');
-  // jQuery.HSCore.components.HSSummernoteEditor.init(".js-summernote-editor");
   jQuery.HSCore.components.HSFocusState.init();
 
   // initialization of HSMegaMenu component