Source: scripts/templates/taskCardSmall.template.js

  1. /**
  2.  * Returns a string of HTML for a small task card with the given parameters.
  3.  *
  4.  * The returned HTML will be a div with the class "task-card-small" and the given index as its ID.
  5.  * It will have a header with the category, a body with the title, description, and a progress bar
  6.  * if there are subtasks, and a footer with the assigned members and a priority icon.
  7.  *
  8.  * @param {number} index - The index of the task card in the global todos array.
  9.  * @param {object} task - The task object from the global todos array.
  10.  * @param {string} task.category - The category of the task, either "Technical Task" or "User Story".
  11.  * @param {string} task.description - The description of the task.
  12.  * @param {string} task.priority - The priority of the task, either "high", "medium", or "low".
  13.  * @param {string} task.title - The title of the task.
  14.  * @param {object} task.subTasks - The subtasks object of the task.
  15.  * @returns {string} - The HTML string for the small task card.
  16.  */
  17. function getTaskCardSmallTemplate(index, { category, description, priority, title, subTasks }) {
  18.   return /*html*/ `
  19.   <div class="task-card-small" id="task-card-small-${index}" onclick="openTodoModal(${index})" draggable="true" ondragstart="startDraggingTodo(${index})">
  20.     <div class="card-small-header">
  21.       <p class="inter-extralight ${category === "Technical Task" ? "technical-task" : "user-story"}">${category}</p>
  22.       ${
  23.         isDueOrOverdue(index)
  24.           ? /*html*/ `<div id="overDuo-${index}" class="overDuo-alert" title="Overdue Deadline">!</div>`
  25.           : ""
  26.       }
  27.       <button onclick="openStateChangeMenu(event, ${index})" type="button" class="btn btn-custom-more">
  28.         <img src="./assets/svg/more-vert.svg" alt="More Icon">
  29.       </button>
  30.       <div id="card-switch-state-${index}" class="card-switch-state-menu d_none">
  31.         <p class="inter-medium">Move to:</p>
  32.       </div>
  33.     </div>
  34.       <div class="card-small-body">
  35.         <div class="card-small-info">
  36.           <p class="card-small-subheadline inter-medium">${truncateText(title)}</p>
  37.           <p class="card-small-description inter-extralight">${truncateText(description)}</p>
  38.         </div>
  39.         ${
  40.           getObjectLength(subTasks) > 0
  41.             ? /*html*/ `
  42.         <div class="card-small-progress-bar">
  43.           <div id="progress-bar-${index}" class="card-small-progress-bar-background">
  44.             <div class="card-small-progress-bar-foreground" style="width: ${getProgressValueFromSubTasks(
  45.               subTasks
  46.             )}%"></div>
  47.           </div>
  48.           <span class="card-small-progress-bar-text inter-extralight">${getSubtasksText(subTasks)}</span>
  49.         </div>
  50.         `
  51.             : ""
  52.         }
  53.       </div>
  54.       <div class="card-small-card-footer">
  55.         <div id="assigned-members-${index}" class="card-small-assigned-members"></div>
  56.         <div class="card-small-urgency-icon">
  57.           ${priority === "high" ? highPriotiySVG() : priority === "medium" ? mediumPriotiySVG() : lowPriotiySVG()}
  58.         </div>
  59.       </div>
  60.   </div>
  61.   `;
  62. }
  64. /**
  65.  * Returns an HTML string representing a hollow drag area placeholder, used to
  66.  * indicate a place where a task card can be dragged to.
  67.  *
  68.  * @returns {string} An HTML string representing the hollow drag area placeholder.
  69.  */
  70. function getDragAreaHollowPlaceholder() {
  71.   return /*html*/ `
  72.     <div class="drag-area-hollow-placeholder d_none"></div>
  73.   `;
  74. }