flowdeck/app/templates/board.html

{% extends "base.html" %}
{% block page_icon %}{{ fd_icon("folder",18) }}{% endblock %}
{% block page_title %}Kanban board new{% endblock %}
{% block title_prefix %}Kanban board new{% endblock %}

{% block content %}
<!-- Cover image -->
<div class="page-cover">
  <div class="page-cover-actions">
    <button class="cover-btn">Change</button>
    <button class="cover-btn">Reposition</button>
    <button class="cover-btn">↓</button>
  </div>
</div>

<!-- Page title -->
<div class="page-title-area">
  <div class="page-title">
    <span class="page-icon-lg">{{ fd_icon("folder",24) }}</span>
    <h1>{{ repo }}</h1>
  </div>
</div>

<!-- Description -->
<div class="page-description" x-data="{ hideDesc: false }">
  <template x-if="!hideDesc">
    <div>
      <p>Use this Kanban board to track tasks across your project. Group by team, filter by status, and sort by priority.</p>
    </div>
  </template>
  <button class="text-xs text-dim" @click="hideDesc = !hideDesc" style="margin-top: 4px;">
    <span x-text="hideDesc ? 'Show description ▾' : 'Hide description ▴'"></span>
  </button>
</div>

<!-- View tabs with HTMX -->
<div class="view-tabs" id="view-tabs"
     hx-get="/board/{{ owner }}/{{ repo }}/view/kanban"
     hx-trigger="load" hx-target="#view-content" hx-swap="innerHTML">
  <button class="view-tab active" data-view="kanban"
          hx-get="/board/{{ owner }}/{{ repo }}/view/kanban"
          hx-target="#view-content" hx-swap="innerHTML"
          @click="setActiveTab($el)">
    <span class="tab-icon">{{ fd_icon("bar-chart",14) }}</span> Kanban board
  </button>
  <button class="view-tab" data-view="detailed"
          hx-get="/board/{{ owner }}/{{ repo }}/view/detailed"
          hx-target="#view-content" hx-swap="innerHTML"
          @click="setActiveTab($el)">
    <span class="tab-icon">{{ fd_icon("list",14) }}</span> Detailed board
  </button>
  <button class="view-tab" data-view="table"
          hx-get="/board/{{ owner }}/{{ repo }}/view/table"
          hx-target="#view-content" hx-swap="innerHTML"
          @click="setActiveTab($el)">
    <span class="tab-icon">{{ fd_icon("align-left",14) }}</span> Table view
  </button>
  <button class="view-tab" data-view="status"
          hx-get="/board/{{ owner }}/{{ repo }}/view/status"
          hx-target="#view-content" hx-swap="innerHTML"
          @click="setActiveTab($el)">
    <span class="tab-icon">{{ fd_icon("trending-up",14) }}</span> Status overview
  </button>
  <button class="view-tab" data-view="teamload"
          hx-get="/board/{{ owner }}/{{ repo }}/view/teamload"
          hx-target="#view-content" hx-swap="innerHTML"
          @click="setActiveTab($el)">
    <span class="tab-icon">{{ fd_icon("users",14) }}</span> Team Load
  </button>
</div>

<!-- Toolbar -->
<div class="view-toolbar" x-data="filterSystem()">
  <template x-for="(f, i) in activeFilters" :key="i">
    <div class="filter-pill">
      <span x-text="f.property + ': ' + f.value"></span>
      <button class="remove-filter" @click="removeFilter(i); refreshView()">✕</button>
    </div>
  </template>
  <div class="filter-pill" style="cursor:pointer; position:relative;" @click="showStatusMenu = !showStatusMenu">
    <span>Status: </span>
    <span class="text-dim" x-text="statusFilterLabel"></span>
    <span style="font-size:10px;">▾</span>
    <div class="dropdown-panel" :class="{ visible: showStatusMenu }" style="top:100%; left:0;"
         @click.stop>
      <template x-for="s in statusOptions" :key="s.value">
        <div class="dropdown-option" @click="toggleStatus(s.value); showStatusMenu = false; refreshView()">
          <span class="option-checkbox" :class="{ selected: statusFilters.includes(s.value) }">
            <span x-show="statusFilters.includes(s.value)">✓</span>
          </span>
          <span class="option-color-dot" :style="'background:' + s.color"></span>
          <span x-text="s.label"></span>
        </div>
      </template>
    </div>
  </div>
  <button class="filter-add-btn" @click="addFilter()">+ Filter</button>
  <button class="filter-reset-btn" @click="resetFilters(); refreshView()" x-show="activeFilters.length > 0">Reset</button>

  <div class="view-toolbar-spacer"></div>

  <div style="position:relative;" x-data="sortSystem()">
    <button class="toolbar-btn" @click="showSortPanel = !showSortPanel" title="Sort">⇅</button>
    <div class="dropdown-panel" :class="{ visible: showSortPanel }" style="right:0; left:auto;" @click.stop>
      <div class="sort-list">
        <template x-for="(s, i) in sorts" :key="i">
          <div class="sort-item">
            <span class="sort-field">
              <span x-text="s.field"></span>
            </span>
            <span class="sort-direction" @click="toggleDir(i)">
              <span x-text="s.dir === 'asc' ? 'Ascending ↑' : 'Descending ↓'"></span>
            </span>
            <button class="sort-delete" @click="removeSort(i)" title="Delete">{{ fd_icon("trash",14) }}</button>
          </div>
        </template>
        <button class="dropdown-option" @click="addSort()">+ Add sort</button>
        <button class="dropdown-option" @click="clearSorts()" x-show="sorts.length > 0">Delete sort</button>
      </div>
    </div>
  </div>
  <button class="toolbar-btn" title="Properties">{{ fd_icon("zap",14) }}</button>
  <button class="toolbar-btn" title="Search">{{ fd_icon("search",14) }}</button>
  <button class="toolbar-btn">⋯</button>
  <button class="btn-new" @click="showNewIssue()">New ▾</button>
</div>

<!-- New Issue Form (hidden) -->
<div id="new-issue-form" style="display:none; padding: 12px 24px; background: var(--bg-secondary); border-bottom: 1px solid var(--border);"
     x-data="newIssueForm()">
  <div style="display:flex; gap:12px; align-items:center;">
    <input type="text" placeholder="Issue title..." x-model="title"
           style="flex:1; background:var(--bg-tertiary); border:1px solid var(--border); border-radius:6px;
                  padding:8px 12px; color:var(--text-primary); font-size:14px; outline:none;"
           @keydown.enter="create()">
    <select x-model="status" style="background:var(--bg-tertiary); border:1px solid var(--border); border-radius:6px;
                                     padding:8px; color:var(--text-primary); font-size:13px;">
      <option value="todo">To-do</option>
      <option value="progress">In progress</option>
      <option value="done">Done</option>
    </select>
    <button class="btn-new" @click="create()">Create</button>
    <button class="toolbar-btn" @click="hide()">✕</button>
  </div>
</div>

<!-- Dynamic view content -->
<div id="view-content">
  <!-- Loaded via HTMX -->
</div>
{% endblock %}

{% block scripts %}
<script>
  const owner = '{{ owner }}';
  const repo = '{{ repo }}';
  const initialView = '{{ initial_view }}';

  // Auto-switch to view from URL param
  document.addEventListener('DOMContentLoaded', function() {
    if (initialView && initialView !== 'kanban') {
      const tab = document.querySelector(`.view-tab[data-view="${initialView}"]`);
      if (tab) tab.click();
    }
  });

  function setActiveTab(el) {
    document.querySelectorAll('.view-tab').forEach(t => t.classList.remove('active'));
    el.classList.add('active');
  }

  function kanbanBoard() {
    return {
      collapsedGroups: [],
      toggleGroup(id) {
        const idx = this.collapsedGroups.indexOf(id);
        idx >= 0 ? this.collapsedGroups.splice(idx, 1) : this.collapsedGroups.push(id);
      },
      newCard(groupId, status) {
        document.getElementById('new-issue-form').style.display = 'block';
        document.querySelector('#new-issue-form').__x.$data.status = status;
      },
      newGroup() { console.log('New group'); }
    };
  }

  function filterSystem() {
    return {
      activeFilters: [],
      statusFilters: [],
      showStatusMenu: false,
      statusOptions: [
        { value: 'todo', label: 'To-do', color: 'var(--gray)' },
        { value: 'progress', label: 'In progress', color: 'var(--blue)' },
        { value: 'done', label: 'Complete', color: 'var(--green)' },
      ],
      get statusFilterLabel() {
        return this.statusFilters.length ? this.statusFilters.join(', ') : 'All';
      },
      toggleStatus(val) {
        const idx = this.statusFilters.indexOf(val);
        idx >= 0 ? this.statusFilters.splice(idx, 1) : this.statusFilters.push(val);
      },
      addFilter() {
        const prop = prompt('Filter by property (status, assignee, label):');
        if (!prop) return;
        const val = prompt('Value:');
        if (!val) return;
        this.activeFilters.push({ property: prop, value: val });
        this.refreshView();
      },
      removeFilter(i) { this.activeFilters.splice(i, 1); },
      resetFilters() { this.activeFilters = []; this.statusFilters = []; },
      refreshView() {
        const activeTab = document.querySelector('.view-tab.active');
        if (activeTab) activeTab.click();
      }
    };
  }

  function sortSystem() {
    return {
      sorts: [],
      showSortPanel: false,
      addSort() {
        const field = prompt('Sort by (name, status, assignee, deadline):');
        if (!field) return;
        this.sorts.push({ field, dir: 'asc' });
        this.applySorts();
      },
      removeSort(i) { this.sorts.splice(i, 1); this.applySorts(); },
      toggleDir(i) { this.sorts[i].dir = this.sorts[i].dir === 'asc' ? 'desc' : 'asc'; this.applySorts(); },
      clearSorts() { this.sorts = []; this.applySorts(); },
      applySorts() {
        const activeTab = document.querySelector('.view-tab.active');
        const url = new URL(activeTab.getAttribute('hx-get'), window.location.origin);
        this.sorts.forEach(s => url.searchParams.append('sort', s.field + ':' + s.dir));
        htmx.ajax('GET', url.pathname + url.search, { target: '#view-content', swap: 'innerHTML' });
      }
    };
  }

  function newIssueForm() {
    return {
      title: '', status: 'todo',
      create() {
        if (!this.title.trim()) return;
        const csrf = document.cookie.match(/csrf_token=([^;]+)/);
        fetch(`/api/issues/${owner}/${repo}?title=${encodeURIComponent(this.title)}&labels=${this.status}`, {
          method: 'POST',
          headers: { 'X-CSRF-Token': csrf ? csrf[1] : '' }
        })
          .then(r => r.json())
          .then(data => {
            this.title = '';
            this.hide();
            // Refresh current view
            const activeTab = document.querySelector('.view-tab.active');
            if (activeTab) activeTab.click();
          });
      },
      hide() { document.getElementById('new-issue-form').style.display = 'none'; },
      show() { document.getElementById('new-issue-form').style.display = 'block'; }
    };
  }

  function showNewIssue() {
    const form = document.getElementById('new-issue-form');
    form.style.display = form.style.display === 'none' ? 'block' : 'none';
  }

  // Init SortableJS after HTMX swaps
  document.addEventListener('htmx:afterSwap', function(evt) {
    if (evt.target.id === 'view-content') {
      document.querySelectorAll('.kanban-cards').forEach(el => {
        if (el._sortable) el._sortable.destroy();
        el._sortable = new Sortable(el, {
          group: 'kanban',
          animation: 200,
          ghostClass: 'sortable-ghost',
          dragClass: 'sortable-drag',
          onEnd: function(evt) {
            const cardId = evt.item.dataset.cardId;
            const toStatus = evt.to.dataset.status;
            const csrf = document.cookie.match(/csrf_token=([^;]+)/);
            fetch(`/api/move?owner=${owner}&repo=${repo}&issue_id=${cardId}&column=${toStatus}`, {
              method: 'POST',
              headers: { 'X-CSRF-Token': csrf ? csrf[1] : '' }
            })
              .then(() => {
                // ponytail: refresh current view after move
                const activeTab = document.querySelector('.view-tab.active');
                if (activeTab) activeTab.click();
              });
          }
        });
      });
    }
  });
</script>
{% endblock %}