Convert HTML templates to Jade and update template markup

Replace Spacebars .html templates with Jade equivalents for
originalPositionsView and originalPosition. Add new Jade template
for inlinedCardDescription. Update existing Jade templates to
reflect the BlazeComponent-to-Template migration changes.

client/components/boards/boardBody.jade

@@ -1,8 +1,8 @@
 template(name="board")
 
-  if isConverting.get
+  if isConverting
     +boardConversionProgress
-  else if isBoardReady.get
+  else if isBoardReady
     if currentBoard
       if onlyShowCurrentCard
         +cardDetails(currentCard)
@@ -28,10 +28,10 @@ template(name="boardBody")
         class="{{#if hasSwimlanes}}dragscroll{{/if}}"
         class="{{#if Sidebar.isOpen}}is-sibling-sidebar-open{{/if}}"
         class="{{#if MultiSelection.isActive}}is-multiselection-active{{/if}}"
-        class="{{#if draggingActive.get}}is-dragging-active{{/if}}"
+        class="{{#if draggingActive}}is-dragging-active{{/if}}"
         class="{{#unless isVerticalScrollbars}}no-scrollbars{{/unless}}"
         class="{{#if isMiniScreen}}mobile-view{{/if}}")
-        if showOverlay.get
+        if showOverlay
           .board-overlay
         if currentBoard.isTemplatesBoard
           each currentBoard.swimlanes

client/components/boards/boardHeader.jade

@@ -233,11 +233,11 @@ template(name="createBoard")
     label
       | {{_ 'title'}}
       input.js-new-board-title(type="text" placeholder="{{_ 'bucket-example'}}" autofocus required)
-    if visibilityMenuIsOpen.get
+    if visibilityMenuIsOpen
       +boardVisibilityList
     else
       p.quiet
-        if $eq visibility.get 'public'
+        if $eq visibility 'public'
           span.fa.fa-globe.colorful
           = " "
           | {{{_ 'board-public-info'}}}
@@ -262,11 +262,40 @@ template(name="createBoardPopup")
     label
       | {{_ 'title'}}
       input.js-new-board-title(type="text" placeholder="{{_ 'bucket-example'}}" autofocus required)
-    if visibilityMenuIsOpen.get
+    if visibilityMenuIsOpen
       +boardVisibilityList
     else
       p.quiet
-        if $eq visibility.get 'public'
+        if $eq visibility 'public'
+          span.fa.fa-globe.colorful
+          = " "
+          | {{{_ 'board-public-info'}}}
+        else
+          span.fa.fa-lock.colorful
+          = " "
+          | {{{_ 'board-private-info'}}}
+        a.js-change-visibility {{_ 'change'}}.
+    a.flex.js-toggle-add-template-container
+      .materialCheckBox#add-template-container
+      span {{_ 'add-template-container'}}
+    input.primary.wide(type="submit" value="{{_ 'create'}}")
+    span.quiet
+      | {{_ 'or'}}
+      a.js-import-board {{_ 'import'}}
+    span.quiet
+      | /
+      a.js-board-template {{_ 'template'}}
+
+template(name="headerBarCreateBoardPopup")
+  form
+    label
+      | {{_ 'title'}}
+      input.js-new-board-title(type="text" placeholder="{{_ 'bucket-example'}}" autofocus required)
+    if visibilityMenuIsOpen
+      +boardVisibilityList
+    else
+      p.quiet
+        if $eq visibility 'public'
           span.fa.fa-globe.colorful
           = " "
           | {{{_ 'board-public-info'}}}
@@ -292,11 +321,11 @@ template(name="createTemplateContainerPopup")
     label
       | {{_ 'title'}}
       input.js-new-board-title(type="text" placeholder="{{_ 'bucket-example'}}" autofocus required)
-    if visibilityMenuIsOpen.get
+    if visibilityMenuIsOpen
       +boardVisibilityList
     else
       p.quiet
-        if $eq visibility.get 'public'
+        if $eq visibility 'public'
           span.fa.fa-globe.colorful
           = " "
           | {{{_ 'board-public-info'}}}

client/components/boards/originalPositionsView.html

@@ -1,82 +0,0 @@
-<template name="originalPositionsView">
-  <div class="original-positions-view">
-    <div class="original-positions-header">
-      <button class="btn btn-sm btn-outline-secondary" onclick="{{toggleOriginalPositions}}">
-        <i class="fa fa-history"></i>
-        {{#if isShowingOriginalPositions}}Hide{{else}}Show{{/if}} Original Positions
-      </button>
-
-      {{#if isShowingOriginalPositions}}
-        <button class="btn btn-sm btn-outline-primary" onclick="{{refreshHistory}}">
-          <i class="fa fa-refresh"></i> Refresh
-        </button>
-      {{/if}}
-    </div>
-
-    {{#if isShowingOriginalPositions}}
-      <div class="original-positions-content">
-        {{#if isLoading}}
-          <div class="original-positions-loading">
-            <i class="fa fa-spinner fa-spin"></i> Loading original positions...
-          </div>
-        {{else}}
-          <div class="original-positions-filters">
-            <div class="btn-group btn-group-sm" role="group">
-              <button type="button"
-                      class="btn {{#if isFilterType 'all'}}btn-primary{{else}}btn-outline-secondary{{/if}}"
-                      onclick="{{setFilterType 'all'}}">
-                All
-              </button>
-              <button type="button"
-                      class="btn {{#if isFilterType 'swimlane'}}btn-primary{{else}}btn-outline-secondary{{/if}}"
-                      onclick="{{setFilterType 'swimlane'}}">
-                <i class="fa fa-bars"></i> Swimlanes
-              </button>
-              <button type="button"
-                      class="btn {{#if isFilterType 'list'}}btn-primary{{else}}btn-outline-secondary{{/if}}"
-                      onclick="{{setFilterType 'list'}}">
-                <i class="fa fa-columns"></i> Lists
-              </button>
-              <button type="button"
-                      class="btn {{#if isFilterType 'card'}}btn-primary{{else}}btn-outline-secondary{{/if}}"
-                      onclick="{{setFilterType 'card'}}">
-                <i class="fa fa-sticky-note"></i> Cards
-              </button>
-            </div>
-          </div>
-
-          <div class="original-positions-list">
-            {{#each getFilteredHistory}}
-              <div class="original-position-item">
-                <div class="original-position-item-header">
-                  <i class="fa {{getEntityTypeIcon entityType}}"></i>
-                  <span class="entity-type">{{getEntityTypeLabel entityType}}</span>
-                  <span class="entity-name">{{getEntityDisplayName this}}</span>
-                  <span class="entity-id">({{entityId}})</span>
-                </div>
-                <div class="original-position-item-details">
-                  <div class="original-position-description">
-                    {{getEntityOriginalPositionDescription this}}
-                  </div>
-                  {{#if originalTitle}}
-                    <div class="original-title">
-                      <strong>Original title:</strong> {{originalTitle}}
-                    </div>
-                  {{/if}}
-                  <div class="original-position-date">
-                    <small class="text-muted">Created: {{formatDate createdAt}}</small>
-                  </div>
-                </div>
-              </div>
-            {{else}}
-              <div class="no-original-positions">
-                <i class="fa fa-info-circle"></i>
-                No original position data available for this board.
-              </div>
-            {{/each}}
-          </div>
-        {{/if}}
-      </div>
-    {{/if}}
-  </div>
-</template>

client/components/boards/originalPositionsView.jade

@@ -0,0 +1,57 @@
+template(name="originalPositionsView")
+  .original-positions-view
+    .original-positions-header
+      button.btn.btn-sm.btn-outline-secondary.js-toggle-original-positions
+        i.fa.fa-history
+        if isShowingOriginalPositions
+          | Hide Original Positions
+        else
+          | Show Original Positions
+
+      if isShowingOriginalPositions
+        button.btn.btn-sm.btn-outline-primary.js-refresh-history
+          i.fa.fa-refresh
+          |  Refresh
+
+    if isShowingOriginalPositions
+      .original-positions-content
+        if isLoading
+          .original-positions-loading
+            i.fa.fa-spinner.fa-spin
+            |  Loading original positions...
+        else
+          .original-positions-filters
+            .btn-group.btn-group-sm(role="group")
+              button.btn.js-filter-type(type="button" class="{{#if isFilterType 'all'}}btn-primary{{else}}btn-outline-secondary{{/if}}" data-filter-type="all")
+                | All
+              button.btn.js-filter-type(type="button" class="{{#if isFilterType 'swimlane'}}btn-primary{{else}}btn-outline-secondary{{/if}}" data-filter-type="swimlane")
+                i.fa.fa-bars
+                |  Swimlanes
+              button.btn.js-filter-type(type="button" class="{{#if isFilterType 'list'}}btn-primary{{else}}btn-outline-secondary{{/if}}" data-filter-type="list")
+                i.fa.fa-columns
+                |  Lists
+              button.btn.js-filter-type(type="button" class="{{#if isFilterType 'card'}}btn-primary{{else}}btn-outline-secondary{{/if}}" data-filter-type="card")
+                i.fa.fa-sticky-note
+                |  Cards
+
+          .original-positions-list
+            each getFilteredHistory
+              .original-position-item
+                .original-position-item-header
+                  i.fa(class="{{getEntityTypeIcon entityType}}")
+                  span.entity-type {{getEntityTypeLabel entityType}}
+                  span.entity-name {{getEntityDisplayName this}}
+                  span.entity-id ({{entityId}})
+                .original-position-item-details
+                  .original-position-description
+                    | {{getEntityOriginalPositionDescription this}}
+                  if originalTitle
+                    .original-title
+                      strong Original title:
+                      |  {{originalTitle}}
+                  .original-position-date
+                    small.text-muted Created: {{formatDate createdAt}}
+            else
+              .no-original-positions
+                i.fa.fa-info-circle
+                |  No original position data available for this board.

client/components/cards/cardCustomFields.jade

@@ -99,6 +99,21 @@ template(name="cardCustomField-date")
                 b
                 | {{showWeek}}
 
+template(name="cardCustomField-datePopup")
+  .datepicker-container
+    form.edit-date
+      .fields
+        .left
+          label(for="date") {{_ 'date'}}
+          input.js-date-field#date(type="date" name="date" value=showDate autofocus)
+        .right
+          label(for="time") {{_ 'time'}}
+          input.js-time-field#time(type="time" name="time" value=showTime)
+      if error.get
+        .warning {{_ error.get}}
+      button.primary.wide.left.js-submit-date(type="submit") {{_ 'save'}}
+      button.js-delete-date.negate.wide.right.js-delete-date {{_ 'delete'}}
+
 template(name="cardCustomField-dropdown")
     if canModifyCard
         +inlinedForm(classNames="js-card-customfield-dropdown")

client/components/cards/cardDate.jade

@@ -14,6 +14,70 @@ template(name="dateBadge")
           b
             | {{showWeek}}
 
+template(name="cardReceivedDate")
+  if canModifyCard
+    a.js-edit-date.card-date(title="{{showTitle}} {{_ 'predicate-week'}} {{#if showWeekOfYear}}{{showWeek}}{{/if}}" class="{{classes}}")
+      time(datetime="{{showISODate}}")
+        | {{showDate}}
+        if showWeekOfYear
+          b
+            | {{showWeek}}
+  else
+    a.card-date(title="{{showTitle}} {{_ 'predicate-week'}} {{#if showWeekOfYear}}{{showWeek}}{{/if}}" class="{{classes}}")
+      time(datetime="{{showISODate}}")
+        | {{showDate}}
+        if showWeekOfYear
+          b
+            | {{showWeek}}
+
+template(name="cardStartDate")
+  if canModifyCard
+    a.js-edit-date.card-date(title="{{showTitle}} {{_ 'predicate-week'}} {{#if showWeekOfYear}}{{showWeek}}{{/if}}" class="{{classes}}")
+      time(datetime="{{showISODate}}")
+        | {{showDate}}
+        if showWeekOfYear
+          b
+            | {{showWeek}}
+  else
+    a.card-date(title="{{showTitle}} {{_ 'predicate-week'}} {{#if showWeekOfYear}}{{showWeek}}{{/if}}" class="{{classes}}")
+      time(datetime="{{showISODate}}")
+        | {{showDate}}
+        if showWeekOfYear
+          b
+            | {{showWeek}}
+
+template(name="cardDueDate")
+  if canModifyCard
+    a.js-edit-date.card-date(title="{{showTitle}} {{_ 'predicate-week'}} {{#if showWeekOfYear}}{{showWeek}}{{/if}}" class="{{classes}}")
+      time(datetime="{{showISODate}}")
+        | {{showDate}}
+        if showWeekOfYear
+          b
+            | {{showWeek}}
+  else
+    a.card-date(title="{{showTitle}} {{_ 'predicate-week'}} {{#if showWeekOfYear}}{{showWeek}}{{/if}}" class="{{classes}}")
+      time(datetime="{{showISODate}}")
+        | {{showDate}}
+        if showWeekOfYear
+          b
+            | {{showWeek}}
+
+template(name="cardEndDate")
+  if canModifyCard
+    a.js-edit-date.card-date(title="{{showTitle}} {{_ 'predicate-week'}} {{#if showWeekOfYear}}{{showWeek}}{{/if}}" class="{{classes}}")
+      time(datetime="{{showISODate}}")
+        | {{showDate}}
+        if showWeekOfYear
+          b
+            | {{showWeek}}
+  else
+    a.card-date(title="{{showTitle}} {{_ 'predicate-week'}} {{#if showWeekOfYear}}{{showWeek}}{{/if}}" class="{{classes}}")
+      time(datetime="{{showISODate}}")
+        | {{showDate}}
+        if showWeekOfYear
+          b
+            | {{showWeek}}
+
 template(name="dateCustomField")
   a(title="{{showTitle}} {{_ 'predicate-week'}} {{#if showWeekOfYear}}{{showWeek}}{{/if}}" class="{{classes}}")
     time(datetime="{{showISODate}}")
@@ -22,6 +86,46 @@ template(name="dateCustomField")
         b
           | {{showWeek}}
 
+template(name="cardCustomFieldDate")
+  a(title="{{showTitle}} {{_ 'predicate-week'}} {{#if showWeekOfYear}}{{showWeek}}{{/if}}" class="{{classes}}")
+    time(datetime="{{showISODate}}")
+      | {{showDate}}
+      if showWeekOfYear
+        b
+          | {{showWeek}}
+
+template(name="voteEndDate")
+  if canModifyCard
+    a.js-edit-date.card-date(title="{{showTitle}} {{_ 'predicate-week'}} {{#if showWeekOfYear}}{{showWeek}}{{/if}}" class="{{classes}}")
+      time(datetime="{{showISODate}}")
+        | {{showDate}}
+        if showWeekOfYear
+          b
+            | {{showWeek}}
+  else
+    a.card-date(title="{{showTitle}} {{_ 'predicate-week'}} {{#if showWeekOfYear}}{{showWeek}}{{/if}}" class="{{classes}}")
+      time(datetime="{{showISODate}}")
+        | {{showDate}}
+        if showWeekOfYear
+          b
+            | {{showWeek}}
+
+template(name="pokerEndDate")
+  if canModifyCard
+    a.js-edit-date.card-date(title="{{showTitle}} {{_ 'predicate-week'}} {{#if showWeekOfYear}}{{showWeek}}{{/if}}" class="{{classes}}")
+      time(datetime="{{showISODate}}")
+        | {{showDate}}
+        if showWeekOfYear
+          b
+            | {{showWeek}}
+  else
+    a.card-date(title="{{showTitle}} {{_ 'predicate-week'}} {{#if showWeekOfYear}}{{showWeek}}{{/if}}" class="{{classes}}")
+      time(datetime="{{showISODate}}")
+        | {{showDate}}
+        if showWeekOfYear
+          b
+            | {{showWeek}}
+
 template(name="minicardReceivedDate")
   if canModifyCard
     a.js-edit-date.card-date.received-date(title="{{_ 'card-received'}} {{_ 'predicate-week'}} {{#if showWeekOfYear}}{{showWeek}}{{/if}}" class="{{classes}}")
@@ -153,3 +257,33 @@ template(name="editCardEndDatePopup")
         .warning {{_ error.get}}
       button.primary.wide.left.js-submit-date(type="submit") {{_ 'save'}}
       button.js-delete-date.negate.wide.right.js-delete-date {{_ 'delete'}}
+
+template(name="editVoteEndDatePopup")
+  .datepicker-container
+    form.edit-date
+      .fields
+        .left
+          label(for="date") {{_ 'date'}}
+          input.js-date-field#date(type="date" name="date" value=showDate autofocus)
+        .right
+          label(for="time") {{_ 'time'}}
+          input.js-time-field#time(type="time" name="time" value=showTime)
+      if error.get
+        .warning {{_ error.get}}
+      button.primary.wide.left.js-submit-date(type="submit") {{_ 'save'}}
+      button.js-delete-date.negate.wide.right.js-delete-date {{_ 'delete'}}
+
+template(name="editPokerEndDatePopup")
+  .datepicker-container
+    form.edit-date
+      .fields
+        .left
+          label(for="date") {{_ 'date'}}
+          input.js-date-field#date(type="date" name="date" value=showDate autofocus)
+        .right
+          label(for="time") {{_ 'time'}}
+          input.js-time-field#time(type="time" name="time" value=showTime)
+      if error.get
+        .warning {{_ error.get}}
+      button.primary.wide.left.js-submit-date(type="submit") {{_ 'save'}}
+      button.js-delete-date.negate.wide.right.js-delete-date {{_ 'delete'}}

client/components/cards/cardDetails.jade

@@ -844,7 +844,7 @@ template(name="cardDetailsActionsPopup")
 template(name="exportCardPopup")
   ul.pop-over-list
     li
-      a(href="{{exportUrlCardPDF}}",, download="{{exportFilenameCardPDF}}")
+      a(href="{{exportUrlCardPDF}}", download="{{exportFilenameCardPDF}}")
         i.fa.fa-upload
         | {{_ 'export-card-pdf'}}
 

client/components/cards/cardTime.jade

@@ -1,4 +1,4 @@
-template(name="editCardSpentTime")
+template(name="editCardSpentTimePopup")
   .edit-card-time
     form.edit-time
       .fields
@@ -13,7 +13,7 @@ template(name="editCardSpentTime")
       button.primary.wide.left.js-submit-time(type="submit") {{_ 'save'}}
       button.js-delete-time.negate.wide.right {{_ 'delete'}}
 
-template(name="timeBadge")
+template(name="cardSpentTime")
   if canModifyCard
     a.js-edit-time.card-time(title="{{_ 'time'}}" class="{{#if getIsOvertime}}card-label-red{{else}}card-label-green{{/if}}")
       | ⏱️ {{showTime}}

client/components/cards/inlinedCardDescription.jade

@@ -0,0 +1,6 @@
+template(name='inlinedCardDescription')
+  if isOpen.get
+    form.inlined-form.js-inlined-form(id=id class=classNames)
+      +Template.contentBlock
+  else
+    +Template.elseBlock

client/components/common/originalPosition.html

@@ -1,27 +0,0 @@
-<template name="originalPosition">
-  <div class="original-position-info">
-    {{#if isLoading}}
-      <div class="original-position-loading">
-        ⏳ Loading original position...
-      </div>
-    {{else if showOriginalPosition}}
-      <div class="original-position-details">
-        {{#if hasMovedFromOriginal}}
-          <div class="original-position-moved">
-            <span class="original-position-text">ℹ️ {{getOriginalPositionDescription}}</span>
-          </div>
-        {{else}}
-          <div class="original-position-unchanged">
-            <span class="original-position-text">✅ In original position</span>
-          </div>
-        {{/if}}
-
-        {{#if getOriginalTitle}}
-          <div class="original-title">
-            <strong>Original title:</strong> {{getOriginalTitle}}
-          </div>
-        {{/if}}
-      </div>
-    {{/if}}
-  </div>
-</template>

client/components/common/originalPosition.jade

@@ -0,0 +1,19 @@
+template(name="originalPosition")
+  .original-position-info
+    if isLoading
+      .original-position-loading
+        | ⏳ Loading original position...
+    else
+      if showOriginalPosition
+        .original-position-details
+          if hasMovedFromOriginal
+            .original-position-moved
+              span.original-position-text ℹ️ {{getOriginalPositionDescription}}
+          else
+            .original-position-unchanged
+              span.original-position-text ✅ In original position
+
+          if getOriginalTitle
+            .original-title
+              strong Original title:
+              |  {{getOriginalTitle}}

client/components/sidebar/sidebar.jade

@@ -659,7 +659,7 @@ template(name="boardMenuPopup")
             i.fa.fa-archive
             | {{_ 'archive-board'}}
 
-template(name="exportBoard")
+template(name="exportBoardPopup")
   ul.pop-over-list
     li
       a.download-json-link(href="{{exportUrl}}", download="{{exportJsonFilename}}")