collavre 0.1.0

data/app/javascript/modules/plans_timeline.js

@@ -0,0 +1,397 @@
+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) {
+      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 left = dayDiff(plan.created_at, startDate) * dayWidth;
+      var width = (dayDiff(plan.target_date, plan.created_at) + 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 left = dayDiff(plan.created_at, startDate) * dayWidth;
+        var width = (dayDiff(plan.target_date, plan.created_at) + 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;
+      fetch('/plans.json?date=' + dateStr)
+        .then(function (r) { return r.json(); })
+        .then(function (newPlans) {
+          plans = newPlans.map(function (p) {
+            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
+          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/javascript/modules/share_modal.js

@@ -0,0 +1,73 @@
+// Share creative modal functionality
+// Handles share button click, invite link generation, and modal interactions
+
+document.addEventListener('turbo:load', function() {
+  const shareBtn = document.getElementById('share-creative-btn')
+  const modal = document.getElementById('share-creative-modal')
+  const closeBtn = document.getElementById('close-share-modal')
+  const emailInput = document.getElementById('share-user-email')
+  const inviteLinkBtn = document.getElementById('creative-invite-link')
+  const permissionSelect = document.getElementById('share-permission')
+
+  if (inviteLinkBtn) {
+    inviteLinkBtn.onclick = function() {
+      const creativeId = inviteLinkBtn.dataset.creativeId
+      const permission = permissionSelect ? permissionSelect.value : 'read'
+      const permissionLabel = permissionSelect ? permissionSelect.options[permissionSelect.selectedIndex].text : ''
+      const noAccessMessage = inviteLinkBtn.dataset.noAccessMessage || 'Cannot create invite link for "No Access" permission.'
+      const copiedTemplate = inviteLinkBtn.dataset.copiedTemplate || 'Invite link copied with __PERMISSION__ permission!'
+
+      if (permission === 'no_access') {
+        alert(noAccessMessage)
+        return
+      }
+      fetch('/invite', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+          'X-CSRF-Token': document.querySelector('meta[name="csrf-token"]')?.content
+        },
+        body: JSON.stringify({ creative_id: creativeId, permission: permission })
+      }).then(r => r.json()).then(data => {
+        const plan42Copy = window.Plan42 && window.Plan42.copyTextToClipboard
+        let copyPromise = null
+        if (plan42Copy) {
+          copyPromise = plan42Copy(data.url)
+        } else if (navigator.clipboard && navigator.clipboard.writeText) {
+          copyPromise = navigator.clipboard.writeText(data.url)
+        }
+        if (copyPromise) {
+          copyPromise.then(function() {
+            alert(copiedTemplate.replace('__PERMISSION__', permissionLabel))
+          })
+        }
+      })
+    }
+  }
+
+  if (shareBtn && modal && closeBtn) {
+    shareBtn.onclick = function() {
+      modal.style.display = 'flex'
+      document.body.classList.add('no-scroll')
+    }
+    closeBtn.onclick = function() {
+      modal.style.display = 'none'
+      document.body.classList.remove('no-scroll')
+    }
+    modal.onclick = function(e) {
+      if (e.target === modal) {
+        modal.style.display = 'none'
+        document.body.classList.remove('no-scroll')
+      }
+    }
+    const params = new URLSearchParams(window.location.search)
+    const reqEmail = params.get('share_request')
+    if (reqEmail) {
+      shareBtn.click()
+      if (emailInput) {
+        emailInput.value = reqEmail
+        emailInput.dispatchEvent(new Event('blur'))
+      }
+    }
+  }
+})

data/app/javascript/modules/share_user_popup.js

@@ -0,0 +1,77 @@
+import CommonPopup from '../lib/common_popup'
+
+let sharePopupInitialized = false
+
+if (!sharePopupInitialized) {
+  sharePopupInitialized = true
+
+  document.addEventListener('turbo:load', function () {
+    const input = document.getElementById('share-user-email')
+    const menu = document.getElementById('share-user-suggestions')
+    const modal = document.getElementById('share-creative-modal')
+    const closeBtn = document.getElementById('close-share-modal')
+
+    if (!input || !menu) return
+
+    const list = menu.querySelector('.mention-results') || menu.querySelector('.common-popup-list')
+    let fetchTimer
+
+    const popupMenu = new CommonPopup(menu, {
+      listElement: list,
+      renderItem: (user) => `<div class="mention-item"><img src="${user.avatar_url || ''}" width="20" height="20" class="avatar" /> ${user.name} <span style="opacity:0.7">${user.email || ''}</span></div>`,
+      onSelect: (user) => {
+        input.value = user.email || user.name
+        popupMenu.hide()
+        input.focus()
+        input.dispatchEvent(new Event('input', { bubbles: true }))
+        input.dispatchEvent(new Event('blur', { bubbles: true }))
+      },
+    })
+
+    function hide() {
+      popupMenu.hide()
+    }
+
+    function show(users) {
+      if (!users || users.length === 0) {
+        hide()
+        return
+      }
+      popupMenu.setItems(users)
+      popupMenu.showAt(input.getBoundingClientRect())
+    }
+
+    input.addEventListener('keydown', function (event) {
+      if (popupMenu.handleKey(event)) return
+    })
+
+    input.addEventListener('input', function () {
+      const term = input.value.trim()
+      if (!term) {
+        hide()
+        return
+      }
+      clearTimeout(fetchTimer)
+      fetchTimer = setTimeout(function () {
+        const url = new URL('/users/search', window.location.origin)
+        url.searchParams.set('q', term)
+        if (modal?.dataset?.creativeId) {
+          url.searchParams.set('creative_id', modal.dataset.creativeId)
+        }
+        fetch(url, { headers: { Accept: 'application/json' } })
+          .then(function (r) { return r.ok ? r.json() : [] })
+          .then(show)
+          .catch(function () { })
+      }, 200)
+    })
+
+    input.addEventListener('blur', function () {
+      setTimeout(hide, 150)
+    })
+
+    closeBtn?.addEventListener('click', hide)
+    modal?.addEventListener('click', function (event) {
+      if (event.target === modal) hide()
+    })
+  })
+}