{% extends "layout/page.html" %}  
  
{% block head_title %}  
  {%- trans %}Kanban board{% endtrans -%}  
  {%- if request.dispname %} - {{ request.dispname }}{% endif %} - {{ config.TRACKER_NAME }}  
{% endblock %}  
  
{% block page_header %}  
  {%- trans %}Kanban board{% endtrans -%}  
  {%- if request.dispname %} - {{ request.dispname }}{% endif %}  
{% endblock %}  
  
{% block content %}  
  
{% if not (context.is_view_ok() or request.user.hasRole('Anonymous')) %}  
<p>{% trans %}You are not allowed to view this page.{% endtrans %}</p>  
{% endif %}  
  
{% if not context.is_view_ok() and request.user.hasRole('Anonymous') %}  
<p>{% trans %}Please login with your username and password.{% endtrans %}</p>  
{% endif %}  
  
<style nonce="{{ request.client.client_nonce }}">  
  #kanban_canvas {
      display: flex;
      flex-direction: row;
      /* uncomment to allow wrapping of kanban columns */
      /* flex-wrap: wrap; */
      gap: 1em;
  }

  .kanban_col {  /* an open details element */
      border: 1px #cccccc solid;
      border-radius: 1em;
      display: flex;
      flex-direction: column;
      flex-grow: 1;
      gap: 1em; /* gap only between summary and details-content container */
      min-inline-size: min-content;
      padding: 1em;

      & > summary {
	  align-content: center;
	  border-block-end: 2px #ccc solid; /* separator line */
	  font-size: 1.125em;  /* larger heading size */
	  font-weight: bold;   /* bold too */
	  min-block-size: 2.5em;  /* allow for line wrapping in summary label */
	  min-block-size: 2.0lh;  /* if min-inline-size is not max-content */
	  min-inline-size: max-content; /* don't wrap column label */
      }

      /* remove 'disable' for alternate way to get gap between kanban
	   cards if ::details-content rule doesn't work. */
      & disable .kanban_card + .kanban_card {
	  /* space between adjacent kanban cards. gap on detail element doesn't
	       inherit to content in details element. Gap only works
	       between summary and content. */
	  margin-block-start: 0.5em; 
      }
  }

  .kanban_col::details-content {
      /* make flex/gap from .kanban_col apply to the cards.
	   use inherit to get settings from parent details element
	   which don't usually cascade into the details-content
	   container */
      display: inherit;
      flex-direction: inherit;
      gap: inherit;
  }

  .kanban_col:not([open]) {
      align-items: flex-end;  /* move summary to top of column */
      background-color: #ddd;
      /* enable if you want grey to white (left -> right) background
	 transition */
      /*background: linear-gradient(90deg, rgba(221, 221, 221, 1) 0%,
				  rgba(255, 255, 255, 1) 95%);*/
      gap: 0;  /* close space between columns */
      margin-block: 0; /* close space between columns */
      min-inline-size: 75vh; /* fill 3/4 of screen when short columns */
      padding-block: 0; /* shrink width when turned */
      position: relative; /* allow positioning summary::before w/ absolute */
      writing-mode: sideways-lr; /* turn summary text top to left and
				      make column vertical */

      & > summary {
	  border: none; /* no need for dividing line */
      }

      & > summary::before {
	  /* Expand the clickable summary outwards to cover whole
	       collapsed column */
	  content: "";
	  position: absolute;
	  inset: 0px;
      }
  }

  .kanban_card {
      --elevation: 2;
      --epx: calc(var(--elevation) * 1px);
  
      /* these 2 shadows serve as a border for  0-1 elevation    */
      --shadow1: 0 0 1px rgba(0, 0, 0, .1);
      --shadow2: 0 1px 2px rgba(0, 0, 0, .08);
  
      --offset-y: calc(var(--epx) + 1px);
      --blur: calc(var(--epx) * 2);
      --spread: calc(var(--epx) * .3);
      --shadow3: 
	  0 var(--offset-y) 
	  var(--blur) 
	  var(--spread) 
	  rgba(0, 0, 0, 0.2);

      border: 1px #999 solid;
      border-radius: 1em;
      box-shadow: 
	  var(--shadow1),
	  var(--shadow2),
	  var(--shadow3);
      display: flex;
      flex-direction: column;
      gap: 0.5ex; /* use x in font */
      gap: 0.5lh; /* use line height if supported */
      padding: 1em;

      & .header_link {
	  background: #eee;
          display: inline-block;
          padding-inline-end: 0.5em;
	  text-align: end;
	  width: 100%;
      }

      & > span:not(.header_link) {
          display: inline-block;
          padding-inline-start: 0.5em;
          text-indent: -0.5em;
      }
  }

  .kanban_card[data-if_match=""] {
      /* flag error condition where etag has been lost. */
      background: red;
      &::before {
	  content: "ETAG is broken";
	  font-weight: bold;
      }
  }

  .kanban_card:not([draggable=true]) {
      /* Mark card that is not draggable with red line top left to
	 bottom right */
      background: 
          linear-gradient(to top right,
			  rgba(255,0,0,0) 0%,
			  rgba(255,0,0,0) calc(50% - 0.8px),
			  rgba(255,0,0,0.5) 50%,
			  rgba(255,0,0,0) calc(50% + 0.8px),
			  rgba(255,0,0,0) 100%);
  }

  .placeholder {
      border: 1px solid #cccccc;
      border-radius: 10px;
  }

  #dragged-card {
      opacity: 0.2;
  }

  /* local changes */

  .kanban_col[data-column_prop="status"][data-prop_value="chatting"]:not([open]) {
	background: oklch(81.1% 0.191 63.71 / 0.39);
}
</style>  
  
{% if context.is_view_ok() %}  
{% set batch = request.batch() %}  
{% set column_prop = request.group[0][1] %}  
  
  <div id="kanban_canvas"  
       data-comment="request.group == [('direction', 'property')[, ...]]"  
       data-comment="request.group[0] column grouping"  
       data-comment="request.group[1] swim lane group">  
  
    {% for col_name in utils.column_names(request) %}  
      <details class="kanban_col"  
               data-column_prop="{{ column_prop }}"  
               data-prop_value="{{ col_name if col_name else '-1' }}"  
               {% if utils.is_open(col_name, request.form) is not none %}open{% endif %}>  
        <summary>  
          <span>{{ col_name if col_name else '(no %s set)' % column_prop }}</span>  
          <span class="card_count"></span>  
          <span class="max_count"></span>  
        </summary>  
  
        {% for i in batch %}  
          {# Do not add draggable or set it to "false" to disable the  
             ability to move the card. Maybe user doesn't have  
             permission to move it. Rather than fail/revert drag on  
             drop, prevent dragging entirely. #}
        {% if i[column_prop].plain() == col_name %}  
          <div class="kanban_card" draggable="true"  
               data-path="issue/{{ i.id }}"  
               data-prop_value="{{ col_name }}"  
               data-if_match="{{ utils.etag(i) }}">  
            <span><a href="issue{{ i.id }}" class="header_link"><b>{{ i.id }}</b></a></span>  
            {% for field in request.columns %}  
              <span><b>{{ field }}</b>  
              <span {% if field == column_prop %}data-column_value=""{% endif %}  
                >{{ i[field] or "not set"}}</span> </span>
            {% endfor %}  
          </div>  
          {% endif %}  
        {% endfor %}  
      </details>  
    {% endfor %}  
  </div>  
  
  <p>{% trans start=batch.start, end=batch.start + batch.length - 1, total=batch.sequence_length %}  
     Showing {{ start }}..{{ end }} out of {{ total }} cards.{% endtrans %}</p>  
  
{% endif %}  
  
<script nonce="{{ request.client.client_nonce }}">  
  const WEB = '{{ config.TRACKER_WEB }}';  
</script>  
<script nonce="{{ request.client.client_nonce }}" type="text/javascript">  
  "use strict";  
  let api_response_ms = 5000;

  if (String.dedent) {
    const dedent = String.dedent;
  } else {
    const dedent = dedent_polyfill;
  }

  // basic setup from:
  // https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API/Kanban_board

  const columns = document.querySelectorAll(".kanban_col");

  columns.forEach((column) => {
    column.addEventListener("dragover", movePlaceholder);

    column.addEventListener("dragleave", (event) => {
      // If we are moving into a child element,
      // we aren't actually leaving the column
      if (column.contains(event.relatedTarget)) return;
      const placeholder = column.querySelector(".placeholder");
      placeholder?.remove();
    });

    column.addEventListener("drop", (event) => {
      event.preventDefault();

      const draggedCard = document.getElementById("dragged-card");
      const placeholder = column.querySelector(".placeholder");
      if (!placeholder) return;

      // local changes to support using fetch and async.
      let success = update_by_column(draggedCard, event)
      success.then((value) => {
	if (value) {
	  draggedCard.remove();
	  column.insertBefore(draggedCard, placeholder);
	}
	placeholder.remove();
	add_column_counts()
      })
    });
  });

  const canvas = document.querySelector("#kanban_canvas");

  /*  drag handlers are delegated to the canvas to reduce
      memory use and allow dynamic addition of cards
      (TBD may not implement it) */

  canvas.addEventListener("dragstart", (event) => {
    let card = event.target.closest(".kanban_card[draggable=true]")
    if (! card) return;

    card.id = "dragged-card";
    event.dataTransfer.effectAllowed = "move";
    // Custom type to identify a card drag
    event.dataTransfer.setData("card", "");
  });

  canvas.addEventListener("dragend", (event) => {
    let card = event.target.closest(".kanban_card[draggable=true]")
    card.removeAttribute("id");
  });

  add_column_counts();

  function makePlaceholder(draggedCard) {
    const placeholder = document.createElement("div");
    placeholder.classList.add("placeholder");
    placeholder.style.height = `${draggedCard.offsetHeight}px`;
    return placeholder;
  }

  function movePlaceholder(event) {
    if (!event.dataTransfer.types.includes("card")) {
      return;
    }
    event.preventDefault();
    // Must exist because the ID is added for all drag events with
    // a "card" data entry
    const draggedCard = document.getElementById("dragged-card");
    const column = event.currentTarget;
    const cards = column;
    const existingPlaceholder = column.querySelector(".placeholder");

    if (existingPlaceholder) {
      existingPlaceholder.innerText = column.querySelector('summary').innerText
      const placeholderRect = existingPlaceholder.getBoundingClientRect();
      if (
	placeholderRect.top <= event.clientY &&
	  placeholderRect.bottom >= event.clientY
      ) {
	return;
      }
    }
    // ignore the first child. It is the header for the column.
    for (const card of Array.prototype.slice.call(cards.children, 1)) {
      if (card.getBoundingClientRect().bottom >= event.clientY) {
	if (card === existingPlaceholder) return;
	existingPlaceholder?.remove();
	if (card === draggedCard || card.previousElementSibling === draggedCard)
	  return;
	cards.insertBefore(
	  existingPlaceholder ?? makePlaceholder(draggedCard),
	  card,
	);
	return;
      }
    }
    existingPlaceholder?.remove();
    if (cards.lastElementChild === draggedCard) return;
    cards.append(existingPlaceholder ?? makePlaceholder(draggedCard));
  }

  // code locally developed

  function isEmptyObj(x) { for (var prop in x) { return false} return true;}

  async function update_by_column(card, event) {
    // on drop:
    //   if card was moved in same column, do nothing
    //
    //   use rest PUT to update changed state on server getting
    //       url from card's data-path and etag from data-if_match.
    //
    //   if failure report problem; return false
    //
    //   if success:
    //      update etag info in data-if_match
    //      update state info in data-prop_value
    //      update state info if displayed in card
    //      return true

    const property = event.currentTarget.dataset.column_prop;
    const new_value = event.currentTarget.dataset.prop_value;
    const path = card.dataset.path;
    const etag = card.dataset.if_match;

    if (new_value == card.dataset.prop_value) {
      // prop_value has not changed, reordering cards in in same column
      // no updates to cards at this point. If there is a sort field
      // future changes may change sort prop to preserve sort order
      // but....
      return true; 
    }

    const url = WEB + "rest/data/" + path;

    let controller = new AbortController();
    let options = {
      method: "PUT",
      headers: {
	"Content-Type": "application/json",
	"X-Requested-With": "rest",
	"If-Match": etag,
	"Accept": "application/json"
      },
      body: JSON.stringify({
	[property]: new_value
      }),
      signal: controller.signal
    };

    let reply = null;
    let headers = null;
    let json_response = {};
    let text_response = "";
    let contentType = null;

    setTimeout(() => controller.abort(), api_response_ms)
    try {
      reply = await fetch(url, options);

      headers = reply.headers;

      contentType = headers.get('content-type')
      if (contentType.includes('application/json')) {
	json_response = await reply.json();
      } else if (contentType.includes('text/')) {
	text_response = await reply.text()
      }

      if (reply.status == 200 && !isEmptyObj(json_response)) {
	// update card data items to match current state
	card.dataset.if_match = await get_etag(url, headers, json_response);
	card.dataset.prop_value = new_value;

	// if the property is on the card, update the value
	let displayed_value = card.querySelector('[data-column_value]')
	if (displayed_value) {
	  displayed_value.innerText = new_value
	}
	return true;
      }

      /* A 412 error should be recoverable. Consider get fetch to the
	 issue3?@template=kanban_card and swap the html for the
	 card to replace the original card in the original
	 location.

	 define the macro for kanban_card in issue.kanban.html
	 (IKH) and use in both IKH and issue.kanban_card.html.
      */
      // notify user of failure via alert ....
      if ('error' in json_response) {
	// Use msg item in error object if present
	alert(json_response['error']['msg']);
      } else {
	// dump the status and stringified object which could be
	// empty. use reply.body??

	if (!isEmptyObj(json_response)) {
	  message = JSON.stringify(json_response, null, 2)
	} else {
	  // use text_response even if empty
	  message = text_response
	}
	alert(dedent`\
		      Abnormal return when updating.
			HTTP status: ${reply.status}
			Returned output:\n
			\n` + message);

	// TODO we have a stall between time of drop and card movement.
	// So we do not do the move untill we return success. So nothing
	// to rollback.
	// if we want to remove the stall/delay and move the card first
	// then roll back and announce the change we need to do more work here.
	// find column where: dataset.prop_value == card.prop_value
	// move card back to original column
	//original_column = document.querySelector(
	//    `[data-prop_value=${card.dataset.prop_value}]`);
	//card.remove();
	//column.prepend(card);  or somehow store location and insertafter.
      }
    } catch (error) {
      alert(error);
    }
    return false;
  }

  async function get_etag(url, headers, json_response) {
    // With Roundup 2.7+ use etag info returned by PUT response.
    // With older versions, do a GET and return etag from there.

    let r = json_response['data']['@etag'] || headers.get('etag');
    if (r) return r;

    // we need to do a get to get new etag
    let controller = new AbortController();
    let options = {
      method: "GET",
      headers: {
	"Content-Type": "application/json",
	"X-Requested-With": "rest",
	"Accept": "application/json"
      },
      signal: controller.signal
    };

    let reply = null
    setTimeout(() => controller.abort(), api_response_ms)
    try {
      reply = await fetch(url, options);
    } catch (error) {
      // etag retrieval failed.
      alert("Unable to get new edit loss prevention value")
      return ""
    }
    headers = reply.headers;
    json_response = await reply.json();

    r = json_response['data']['@etag'] || headers.get('etag');

    if (r) return r;

    // This should not happen. It will leave kanban board in a state
    // where it will error next time the current item is drag/dropped.

    console.error(`Unable to get etag from ${url}: ` +
		  `${headers}, ${json_response}`);

    return "";
  }

  function dedent_polyfill(strings, ...values) {
    // local polyfill for String.dedent for older js runtimes.

    // Interleave strings and variable values
    // from google AI.
    let fullString = strings.reduce((acc, str, i) =>
      acc + str + (values[i] ?? ''), '');

    // Split into lines
    const lines = fullString.split('\n');

    // Find the minimum indentation (ignoring empty lines)
    const mindent = lines.reduce((min, line) => {
      const match = line.match(/^\s+/);
      if (match) {
	return min === null ? match[0].length : Math.min(min, match[0].length);
      }
      return min;
    }, null);

    // Remove the common indentation from each line
    if (mindent !== null) {
      fullString = lines.map(line => line.startsWith(' '.repeat(mindent)) ? line.slice(mindent) : line).join('\n');
    }

    return fullString.trim();
  }

  function add_column_counts() {
    const columns = document.querySelectorAll(".kanban_col");

    columns.forEach((column) => {
      let card_num = column.childElementCount - 1
      let count_element = column.querySelector('summary > .card_count')
      count_element.innerText = card_num

    });
  };
</script>  
  
{% endblock %}