collavre_plan 0.1.0

data/app/javascript/modules/plans_timeline.js

@@ -0,0 +1,411 @@
+let plansTimelineScriptInitialized = false;
+
+if (!plansTimelineScriptInitialized) {
+  plansTimelineScriptInitialized = true;
+
+  function initPlansTimeline(container) {
+    if (!container || container.dataset.initialized) return;
+    container.dataset.initialized = 'true';
+
+    var plans = [];
+    try { plans = JSON.parse(container.dataset.plans || '[]'); } catch (e) { }
+    plans = plans.map(function (p) {
+      if (p.start_date) {
+        p.start_date = new Date(p.start_date);
+      }
+      p.created_at = new Date(p.created_at);
+      p.target_date = new Date(p.target_date);
+      return p;
+    });
+
+    var dayWidth = 80;
+    var rowHeight = 26;
+    var startDate = new Date(container.dataset.startDate || new Date());
+    var endDate = new Date(container.dataset.endDate || new Date());
+    container.dataset.lastLoadedDate = new Date().toISOString().slice(0, 10);
+
+    var scroll = document.createElement('div');
+    scroll.className = 'timeline-scroll';
+    container.appendChild(scroll);
+
+    function dayDiff(d1, d2) {
+      return Math.round((d1 - d2) / 86400000);
+    }
+
+    function createDay(date) {
+      var el = document.createElement('div');
+      el.className = 'timeline-day';
+      el.dataset.date = date.toISOString().slice(0, 10);
+      el.innerHTML = '<div class="day-label">' + (date.getMonth() + 1) + '/' + date.getDate() + '</div>';
+      return el;
+    }
+
+    function renderDays(from, to, prepend) {
+      var date = new Date(from);
+      if (prepend) {
+        var days = [];
+        while (date <= to) {
+          days.push(createDay(new Date(date)));
+          date.setDate(date.getDate() + 1);
+        }
+        for (var i = days.length - 1; i >= 0; i--) {
+          scroll.insertBefore(days[i], scroll.firstChild);
+        }
+      } else {
+        while (date <= to) {
+          var el = createDay(new Date(date));
+          scroll.appendChild(el);
+          date.setDate(date.getDate() + 1);
+        }
+      }
+    }
+
+    var planEls = [];
+
+    function createPlanBar(plan, idx) {
+      var el = document.createElement('div');
+      el.className = 'plan-bar';
+      el.dataset.path = plan.path;
+      el.dataset.id = plan.id;
+      var startDateValue = plan.start_date || plan.created_at;
+      var left = dayDiff(startDateValue, startDate) * dayWidth;
+      var width = (dayDiff(plan.target_date, startDateValue) + 1) * dayWidth;
+      el.style.left = left + 'px';
+      el.style.top = (idx * rowHeight + 40) + 'px';
+      el.style.width = width + 'px';
+
+      var prog = document.createElement('div');
+      prog.className = 'plan-progress';
+      prog.style.width = (plan.progress * 100) + '%';
+      el.appendChild(prog);
+
+      var label = document.createElement('span');
+      label.className = 'plan-label';
+      label.textContent = plan.name + ' ' + Math.round(plan.progress * 100) + '%';
+      el.appendChild(label);
+
+      if (plan.deletable) {
+        var del = document.createElement('button');
+        del.type = 'button';
+        del.textContent = '×';
+        del.className = 'delete-plan-btn';
+        el.appendChild(del);
+        del.addEventListener('click', function (e) {
+          e.stopPropagation();
+          if (!confirm(container.dataset.deleteConfirm)) return;
+          var deleteUrl;
+          if (String(plan.id).indexOf('calendar_event_') === 0) {
+            deleteUrl = '/calendar_events/' + String(plan.id).replace('calendar_event_', '');
+          } else {
+            deleteUrl = '/plans/' + plan.id;
+          }
+          fetch(deleteUrl, {
+            method: 'DELETE',
+            headers: {
+              'X-CSRF-Token': document.querySelector('meta[name="csrf-token"]')?.content,
+              Accept: 'application/json'
+            }
+          }).then(function (r) {
+            if (r.ok) {
+              var idx = planEls.findIndex(function (item) { return item.plan.id === plan.id; });
+              if (idx > -1) {
+                planEls[idx].el.remove();
+                planEls.splice(idx, 1);
+              }
+              plans = plans.filter(function (p) { return p.id !== plan.id; });
+              updatePlanPositions();
+            } else {
+              window.location.reload();
+            }
+          });
+        });
+      }
+
+      el.addEventListener('click', function () {
+        if (plan.path) {
+          window.location.href = plan.path;
+        }
+      });
+
+      return el;
+    }
+
+    function addPlan(plan) {
+      plans.push(plan);
+      var el = createPlanBar(plan, planEls.length);
+      scroll.appendChild(el);
+      planEls.push({ el: el, plan: plan });
+      updatePlanPositions();
+    }
+
+    function renderPlans() {
+      plans.forEach(function (plan, idx) {
+        var el = createPlanBar(plan, idx);
+        scroll.appendChild(el);
+        planEls.push({ el: el, plan: plan });
+      });
+    }
+
+    function updatePlanPositions() {
+      var visibleWidth = dayDiff(endDate, startDate) * dayWidth;
+      planEls.forEach(function (item, idx) {
+        var plan = item.plan;
+        var startDateValue = plan.start_date || plan.created_at;
+        var left = dayDiff(startDateValue, startDate) * dayWidth;
+        var width = (dayDiff(plan.target_date, startDateValue) + 1) * dayWidth;
+        var right = left + width;
+
+        if (right < 0 || left > visibleWidth) {
+          item.el.style.display = 'none';
+          return;
+        }
+
+        item.el.style.display = '';
+        item.el.style.left = left + 'px';
+        item.el.style.top = (idx * rowHeight + 40) + 'px';
+        item.el.style.width = width + 'px';
+
+        var label = item.el.querySelector('.plan-label');
+        var viewLeft = container.scrollLeft;
+        var labelLeft = Math.max(viewLeft, left) - left + 2;
+        label.style.left = labelLeft + 'px';
+      });
+    }
+
+    function extendLeft(n) {
+      startDate.setDate(startDate.getDate() - n);
+      renderDays(startDate, new Date(startDate.getTime() + (n - 1) * 86400000), true);
+      updatePlanPositions();
+      container.scrollLeft += n * dayWidth;
+    }
+
+    function extendRight(n) {
+      var from = new Date(endDate.getTime() + 86400000);
+      endDate.setDate(endDate.getDate() + n);
+      renderDays(from, endDate, false);
+      updatePlanPositions();
+    }
+
+    renderDays(startDate, endDate, false);
+    renderPlans();
+    updatePlanPositions();
+
+    function loadPlans(centerDate) {
+      var dateStr = centerDate.toISOString().slice(0, 10);
+      if (container.dataset.lastLoadedDate === dateStr) return;
+      container.dataset.lastLoadedDate = dateStr;
+      var listArea = document.getElementById('plans-list-area')
+      var basePlansUrl = (listArea && listArea.dataset.plansUrl) || '/plans.json'
+      var separator = basePlansUrl.indexOf('?') >= 0 ? '&' : '?'
+      fetch(basePlansUrl + separator + 'date=' + dateStr)
+        .then(function (r) { return r.json(); })
+        .then(function (newPlans) {
+          plans = newPlans.map(function (p) {
+            if (p.start_date) {
+              p.start_date = new Date(p.start_date);
+            }
+            p.created_at = new Date(p.created_at);
+            p.target_date = new Date(p.target_date);
+            return p;
+          });
+          planEls.forEach(function (item) { item.el.remove(); });
+          planEls = [];
+          renderPlans();
+          updatePlanPositions();
+        });
+    }
+
+    function ensureDateVisible(date) {
+      if (date < startDate) {
+        extendLeft(dayDiff(startDate, date));
+      } else if (date > endDate) {
+        extendRight(dayDiff(date, endDate));
+      }
+    }
+
+    function scrollToDate(date) {
+      ensureDateVisible(date);
+      var offset = dayDiff(date, startDate) * dayWidth - container.clientWidth / 2 + dayWidth / 2;
+      container.scrollLeft = offset;
+      updatePlanPositions();
+    }
+
+    var todayBtn = document.getElementById('timeline-today-btn');
+    if (todayBtn) {
+      todayBtn.addEventListener('click', function () { scrollToDate(new Date()); });
+    }
+
+    scrollToDate(new Date());
+
+    var scrollTimer;
+    container.addEventListener('scroll', function () {
+      if (container.scrollLeft < 50) {
+        extendLeft(30);
+      }
+      if (container.scrollLeft + container.clientWidth > scroll.scrollWidth - 50) {
+        extendRight(30);
+      }
+      updatePlanPositions();
+      clearTimeout(scrollTimer);
+      scrollTimer = setTimeout(function () {
+        var centerOffset = container.scrollLeft + container.clientWidth / 2;
+        var daysFromStart = centerOffset / dayWidth;
+        var centerDate = new Date(startDate.getTime() + Math.round(daysFromStart) * 86400000);
+        loadPlans(centerDate);
+      }, 200);
+    });
+
+    // Listen for plan creation from delegated handler
+    const onPlanCreated = function (e) {
+      addPlan(e.detail);
+    };
+    document.addEventListener('plan:created', onPlanCreated);
+
+
+    // Creative selector input handler - reuse link-creative-modal
+    const planSelectCreativeInput = document.getElementById('plan-select-creative-input');
+    if (planSelectCreativeInput) {
+      const handleInput = function (e) {
+        const modal = document.getElementById('link-creative-modal');
+        if (!modal) return;
+
+        // Get the controller from the application
+        const application = window.Stimulus;
+        if (!application) return;
+
+        const controller = application.getControllerForElementAndIdentifier(modal, 'link-creative');
+        if (controller) {
+          // Open popup if not already open or just update search
+          controller.open(planSelectCreativeInput.getBoundingClientRect(), function (item) {
+            // Set the creative_id in the hidden field
+            const creativeIdField = document.getElementById('plan-creative-id');
+            creativeIdField.value = item.id;
+            // Trigger change event manually for listeners
+            creativeIdField.dispatchEvent(new Event('change'));
+
+            // Manually check validity if the function exists
+            if (typeof checkFormValidity === 'function') checkFormValidity();
+
+            // Display the selected creative name
+            const label = item.label || item.description || 'Creative #' + item.id;
+            // Decode HTML entities for display in input
+            const txt = document.createElement("textarea");
+            txt.innerHTML = label;
+            planSelectCreativeInput.value = txt.value;
+
+            // Trigger validation
+            checkFormValidity();
+          }, function () {
+            // Optional: handle close
+          });
+
+          // Sync input value to popup search
+          const popupInput = document.getElementById('link-creative-search');
+          if (popupInput) {
+            popupInput.value = planSelectCreativeInput.value;
+            popupInput.dispatchEvent(new Event('input', { bubbles: true }));
+            // Maintain focus on our input
+            planSelectCreativeInput.focus();
+          }
+        }
+      };
+
+      planSelectCreativeInput.addEventListener('input', handleInput);
+      planSelectCreativeInput.addEventListener('click', handleInput);
+      planSelectCreativeInput.addEventListener('focus', handleInput);
+    }
+
+    // Form validation elements
+    const planCreativeIdInput = document.getElementById('plan-creative-id');
+    const planTargetDateInput = document.getElementById('plan-target-date');
+    const addPlanBtn = document.getElementById('add-plan-btn');
+
+    function checkFormValidity() {
+      if (!addPlanBtn) return;
+
+      const creativeId = planCreativeIdInput ? planCreativeIdInput.value : '';
+      const targetDate = planTargetDateInput ? planTargetDateInput.value : '';
+
+      if (creativeId && targetDate) {
+        addPlanBtn.disabled = false;
+      } else {
+        addPlanBtn.disabled = true;
+      }
+    }
+
+    if (planCreativeIdInput && planTargetDateInput && addPlanBtn) {
+      // Check on date change
+      planTargetDateInput.addEventListener('input', checkFormValidity);
+      planTargetDateInput.addEventListener('change', checkFormValidity);
+
+      // Check on creative selection (observer for hidden field)
+      const observer = new MutationObserver(checkFormValidity);
+      observer.observe(planCreativeIdInput, { attributes: true, attributeFilter: ['value'] });
+
+      // Initial check
+      checkFormValidity();
+    }
+  }
+
+  window.initPlansTimeline = initPlansTimeline;
+
+
+  // Plan form submission handler using delegation at document level
+  // This runs once when module is evaluated
+  document.addEventListener('submit', function (e) {
+    if (e.target && e.target.id === 'new-plan-form') {
+      e.preventDefault();
+      const planForm = e.target;
+
+      try {
+        const fd = new FormData(planForm);
+        const csrfToken = document.querySelector('meta[name="csrf-token"]')?.content;
+
+        fetch(planForm.action, {
+          method: planForm.method,
+          body: fd,
+          headers: {
+            'Accept': 'application/json',
+            'X-CSRF-Token': csrfToken
+          }
+        }).then(function (r) {
+          if (r.ok) return r.json();
+          return r.json().then(function (j) { throw j; });
+        }).then(function (plan) {
+          // Add to local plans if available via closure or re-fetch
+          if (plan.start_date) {
+            plan.start_date = new Date(plan.start_date);
+          }
+          plan.created_at = new Date(plan.created_at);
+          plan.target_date = new Date(plan.target_date);
+
+          // Find the timeline instance to update
+          const timeline = document.getElementById('plans-timeline');
+          if (timeline && window.initPlansTimeline) {
+            const event = new CustomEvent('plan:created', { detail: plan });
+            document.dispatchEvent(event);
+          }
+
+          planForm.reset();
+          // Clear creative selection
+          const creativeIdInput = document.getElementById('plan-creative-id');
+          if (creativeIdInput) creativeIdInput.value = '';
+          const creativeInput = document.getElementById('plan-select-creative-input');
+          if (creativeInput) creativeInput.value = '';
+
+          // Disable button again
+          const addPlanBtn = document.getElementById('add-plan-btn');
+          if (addPlanBtn) addPlanBtn.disabled = true;
+        }).catch(function (err) {
+          if (err && err.errors) {
+            alert(err.errors.join(', '));
+          } else {
+            console.error(err);
+          }
+        });
+      } catch (e) {
+        console.error(e);
+      }
+    }
+  });
+}

data/app/models/collavre/plan.rb

@@ -0,0 +1,43 @@
+require "set"
+
+module Collavre
+  class Plan < Label
+    validates :target_date, presence: true
+    validate :start_date_not_after_target_date
+
+    def progress(_user = nil)
+      tagged_ids = Tag.where(label_id: id).pluck(:creative_id)
+      return 0 if tagged_ids.empty?
+
+      root_ids = Creative.where(id: tagged_ids).map { |c| c.root.id }.uniq
+      roots = Creative.where(id: root_ids)
+      tagged_set = tagged_ids.to_set
+      values = roots.map { |c| c.progress_for_plan(tagged_set) }.compact
+      return 0 if values.empty?
+
+      values.sum.to_f / values.size
+    end
+
+    # Delegate start_date to the associated creative's created_at
+    def start_date
+      creative&.created_at&.to_date
+    end
+
+    def start_date=(value)
+      return unless creative
+
+      date = value.is_a?(Date) ? value : Date.parse(value.to_s)
+      creative.update_column(:created_at, date.to_datetime)
+    end
+
+    private
+
+    def start_date_not_after_target_date
+      return if start_date.blank? || target_date.blank?
+
+      return unless start_date > target_date
+
+      errors.add(:start_date, "must be on or before target date")
+    end
+  end
+end

data/app/services/collavre/creatives/plan_tagger.rb

@@ -0,0 +1,64 @@
+module Collavre
+module Creatives
+  class PlanTagger
+    Result = Struct.new(:success?, :message, keyword_init: true)
+
+    def initialize(plan_id:, creative_ids: [], user: nil)
+      @plan = Plan.find_by(id: plan_id)
+      @creative_ids = Array(creative_ids).map(&:presence).compact
+      @user = user
+    end
+
+    def apply
+      return failure("Please select a plan and at least one creative.") unless valid?
+
+      creatives.find_each do |creative|
+        creative.tags.find_or_create_by(label: plan, creative_id: creative.id)
+      end
+
+      success("Plan tags applied to selected creatives.")
+    end
+
+    def remove
+      return failure("Please select a plan and at least one creative.") unless valid?
+
+      creatives.find_each do |creative|
+        tag = creative.tags.find_by(label: plan, creative_id: creative.id)
+        tag&.destroy
+      end
+
+      success("Plan tag removed from selected creatives.")
+    end
+
+    private
+
+    attr_reader :plan, :creative_ids, :user
+
+    def creatives
+      all_creatives = Creative.where(id: creative_ids)
+      return all_creatives unless user
+
+      # Scope to creatives the user has write permission for via creative_shares
+      permitted_ids = all_creatives.joins(:creative_shares)
+                                   .where(creative_shares: { user_id: user.id })
+                                   .where("creative_shares.permission IN (?)", %w[write admin])
+                                   .pluck(:id)
+      # Also include creatives owned by the user
+      owned_ids = all_creatives.where(user_id: user.id).pluck(:id)
+      Creative.where(id: (permitted_ids + owned_ids).uniq)
+    end
+
+    def valid?
+      plan.present? && creative_ids.any?
+    end
+
+    def success(message)
+      Result.new(success?: true, message: message)
+    end
+
+    def failure(message)
+      Result.new(success?: false, message: message)
+    end
+  end
+end
+end

data/app/views/collavre/creatives/_set_plan_modal.html.erb

@@ -0,0 +1,32 @@
+<%# This partial lives in collavre_plan engine but uses the collavre/creatives/ view path
+     so that core's index.html.erb can render it via the :creative_modals extension slot.
+     Rails resolves this through the engine's view path order. %>
+<div data-controller="creatives--set-plan-modal"
+     data-creatives--set-plan-modal-select-one-value="<%= t('collavre.creatives.index.select_one_creative') %>"
+     data-creatives--set-plan-modal-select-plan-value="<%= t('collavre.creatives.index.select_plan_to_remove') %>">
+  <div id="set-plan-modal" data-creatives--set-plan-modal-target="modal" data-action="click->creatives--set-plan-modal#backdrop" style="display:none;position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:10000;align-items:center;justify-content:center;">
+    <div class="popup-box" style="min-width:320px;max-width:90vw;">
+      <button id="close-set-plan-modal" class="popup-close-btn" data-action="creatives--set-plan-modal#close">&times;</button>
+      <h2><%= t('collavre.creatives.index.set_plan_title', default: 'Set Plan for Selected Creatives') %></h2>
+      <form id="set-plan-form" method="post" action="<%= collavre_plan_engine.creative_plan_path %>" data-creatives--set-plan-modal-target="form" data-action="submit->creatives--set-plan-modal#submit">
+        <%= csrf_meta_tags %>
+        <div style="margin-bottom:1em;">
+          <label for="plan-id-select"><%= t('collavre.creatives.index.select_plan', default: 'Select Plan') %></label>
+          <select id="plan-id-select" name="plan_id" required style="width:100%;" data-creatives--set-plan-modal-target="planSelect">
+            <% Collavre::Plan.all.each do |plan| %>
+              <option value="<%= plan.id %>"><%= plan.creative&.effective_description(nil, false).presence || plan.target_date %></option>
+            <% end %>
+          </select>
+        </div>
+        <!-- Hidden field for creative IDs, filled by JS -->
+        <input type="hidden" name="creative_ids" id="selected-creative-ids-input" data-creatives--set-plan-modal-target="idsInput" />
+        <div style="display:flex; gap:1em; align-items:center;">
+          <button type="button" id="remove-plan-btn" data-remove-path="<%= collavre_plan_engine.creative_plan_path %>" class="btn btn-danger" style="margin-right:0.5em;" data-action="click->creatives--set-plan-modal#remove">
+            <%= t('collavre.creatives.index.remove_plan', default: 'Remove Plan') %>
+          </button>
+          <button type="submit" class="btn btn-primary"><%= t('collavre.creatives.index.add_plan', default: 'Add Plan') %></button>
+        </div>
+      </form>
+    </div>
+  </div>
+</div>

data/app/views/collavre/labels/_plan_extra.html.erb

@@ -0,0 +1,14 @@
+<%# Plan label extra UI: date editing form or read-only date display.
+     Provided by collavre_plan engine via the label type partial convention.
+     Core renders this via render_label_extra(label) when label.type == "Plan". %>
+<% if parent_creative&.has_permission?(Current.user, :write) %>
+  <%= form_with(model: label, url: collavre_plan_engine.plan_path(label), method: :patch, local: true, class: "plan-tag-date-form") do |form| %>
+    <%= hidden_field_tag :creative_id, parent_creative.id %>
+    🗓
+    <%= form.date_field :start_date, value: label.start_date, class: "plan-tag-date-input" %>
+    <%= form.date_field :target_date, value: label.target_date, class: "plan-tag-date-input" %>
+    <%= form.submit t("collavre.plans.update", default: "Update"), class: "plan-tag-date-submit" %>
+  <% end %>
+<% else %>
+  🗓<%= label.target_date %>
+<% end %>

data/app/views/collavre/labels/_plan_suffix.html.erb

@@ -0,0 +1,3 @@
+<%# Plan label suffix: calendar emoji + target date shown in tag lists.
+     Provided by collavre_plan engine via the label type partial convention.
+     Core renders this via render_label_suffix(label) when label.type == "Plan". %> 🗓<%= label.target_date %>

data/app/views/collavre_plan/creatives/_set_plan_button.html.erb

@@ -0,0 +1 @@
+<button id="set-plan-btn" class="set-plan-btn" style="display:none;" data-creatives--select-mode-target="setPlan" onclick="document.dispatchEvent(new CustomEvent('plan:open-modal'))"><%= t('app.set_plan') %></button>

data/app/views/collavre_plan/shared/navigation/_mobile_plans_button.html.erb

@@ -0,0 +1 @@
+<button class="plans-menu-btn mobile-only" type="button"><%= t('app.plans') %></button>

data/app/views/collavre_plan/shared/navigation/_panels.html.erb

@@ -0,0 +1,3 @@
+<div id="plans-list-area" style="display:none;" data-plans-url="<%= collavre_plan_engine.plans_path(format: :json) %>">
+  <%= render Collavre::PlansTimelineComponent.new(plans: Collavre::Plan.none) %>
+</div>

data/app/views/collavre_plan/shared/navigation/_plans_button.html.erb

@@ -0,0 +1,3 @@
+<form id="button_to">
+  <button id="plans-menu-btn" class="plans-menu-btn" type="button"><%= t('app.plans') %></button>
+</form>

data/config/locales/plans.en.yml

@@ -0,0 +1,16 @@
+---
+en:
+  collavre:
+    plans:
+      add_plan: Add Plan
+      start_date: Start Date
+      target_date: Target Date
+      plan_name: Plan Name
+      created: Plan was successfully created.
+      deleted: Plan deleted.
+      updated: Plan updated.
+      update: Update
+      update_forbidden: You do not have permission to update this plan.
+      delete_confirm: Are you sure you want to delete this plan?
+      today: Today
+      select_creative: Select Creative

data/config/locales/plans.ko.yml

@@ -0,0 +1,23 @@
+---
+ko:
+  collavre:
+    plans:
+      add_plan: 계획 추가
+      start_date: 시작 날짜
+      target_date: 목표 날짜
+      plan_name: 계획 이름
+      created: 계획이 성공적으로 생성되었습니다.
+      deleted: 계획이 삭제되었습니다.
+      updated: 계획이 업데이트되었습니다.
+      update: 업데이트
+      update_forbidden: 이 계획을 업데이트할 권한이 없습니다.
+      delete_confirm: 이 계획을 삭제하시겠습니까?
+      today: 오늘
+      select_creative: 크리에이티브 선택
+    activerecord:
+      errors:
+        models:
+          plan:
+            attributes:
+              target_date:
+                blank: 목표 날짜를 입력하세요.

data/config/routes.rb

@@ -0,0 +1,4 @@
+CollavrePlan::Engine.routes.draw do
+  resources :plans, only: [ :create, :destroy, :index, :update ]
+  resource :creative_plan, only: [ :create, :destroy ], controller: "creative_plans"
+end