Merge pull request #561 from Chris0Jeky/fix/517-wip-limit-blocking

fix: enforce WIP limit on card creation (#517)

Author: Chris0Jeky

frontend/taskdeck-web/src/components/board/ColumnLane.vue

@@ -1,6 +1,8 @@
 <script setup lang="ts">
-import { ref } from 'vue'
+import { ref, computed } from 'vue'
 import { useBoardStore } from '../../store/boardStore'
+import { useToastStore } from '../../store/toastStore'
+import { getErrorDisplay } from '../../composables/useErrorMapper'
 import CardItem from './CardItem.vue'
 import CardModal from './CardModal.vue'
 import ColumnEditModal from './ColumnEditModal.vue'
@@ -21,13 +23,20 @@ const emit = defineEmits<{
 }>()
 
 const boardStore = useBoardStore()
+const toast = useToastStore()
 const newCardTitle = ref('')
 const showCardForm = ref(false)
 const selectedCard = ref<Card | null>(null)
 const showCardModal = ref(false)
 const showColumnEdit = ref(false)
 const isDragOver = ref(false)
 
+/** True when cards.length > wipLimit (already over limit) */
+const isWipLimitExceeded = computed(() => {
+  // Treat null or <= 0 as "no limit" — mirrors backend's SetWipLimit guard (must be > 0)
+  return props.column.wipLimit != null && props.column.wipLimit > 0 && props.cards.length > props.column.wipLimit
+})
+
 function handleCardClick(card: Card) {
   selectedCard.value = card
   showCardModal.value = true
@@ -54,14 +63,12 @@ async function createCard() {
     newCardTitle.value = ''
     showCardForm.value = false
   } catch (error) {
+    const { message } = getErrorDisplay(error, 'Failed to create card')
+    toast.error(message)
     console.error('Failed to create card:', error)
   }
 }
 
-const isWipLimitExceeded = () => {
-  return props.column.wipLimit !== null && props.cards.length > props.column.wipLimit
-}
-
 function handleCardDragStart(card: Card) {
   emit('card-drag-start', card)
 }
@@ -187,7 +194,7 @@ function handleCardDragOver(event: DragEvent) {
           </button>
           <span
             class="td-column-lane__count"
-            :class="isWipLimitExceeded() ? 'td-column-lane__count--exceeded' : ''"
+            :class="isWipLimitExceeded ? 'td-column-lane__count--exceeded' : ''"
           >
             {{ cards.length }}{{ column.wipLimit ? `/${column.wipLimit}` : '' }}
           </span>
@@ -204,13 +211,14 @@ function handleCardDragOver(event: DragEvent) {
         </div>
       </div>
 
-      <div v-if="isWipLimitExceeded()" class="td-column-lane__wip-warning">
+      <div v-if="isWipLimitExceeded" class="td-column-lane__wip-warning">
         WIP limit exceeded
       </div>
 
       <button
         data-action="toggle-add-card"
         @click="openCardForm"
+        title="Add a card"
         class="td-column-lane__add-card-btn"
       >
         <span>+</span>

frontend/taskdeck-web/src/tests/components/CardItem.spec.ts

@@ -21,6 +21,25 @@ function createCard(): Card {
   }
 }
 
+describe('CardItem — date display', () => {
+  it('renders formatted due date and overdue indicator when dueDate is in the past', () => {
+    const card = createCard()
+    card.dueDate = '2020-01-01T00:00:00.000Z' // definitely in the past
+    const wrapper = mount(CardItem, { props: { card } })
+    expect(wrapper.find('.td-board-card__due').exists()).toBe(true)
+    expect(wrapper.find('.td-board-card__due--overdue').exists()).toBe(true)
+    expect(wrapper.text()).toContain('Overdue')
+  })
+
+  it('renders due date without overdue indicator when dueDate is in the future', () => {
+    const card = createCard()
+    card.dueDate = '2099-12-31T00:00:00.000Z'
+    const wrapper = mount(CardItem, { props: { card } })
+    expect(wrapper.find('.td-board-card__due').exists()).toBe(true)
+    expect(wrapper.find('.td-board-card__due--overdue').exists()).toBe(false)
+  })
+})
+
 describe('CardItem drag guardrails', () => {
   it('exposes an explicit enlarged drag handle control', () => {
     const wrapper = mount(CardItem, {
@@ -71,6 +90,13 @@ describe('CardItem drag guardrails', () => {
     expect(setData).toHaveBeenCalledWith('text/plain', card.id)
     expect(wrapper.emitted('dragstart')).toEqual([[card]])
   })
+
+  it('emits dragend and clears dragging state on dragend', async () => {
+    const card = createCard()
+    const wrapper = mount(CardItem, { props: { card } })
+    await wrapper.get('[data-action="drag-card-handle"]').trigger('dragend')
+    expect(wrapper.emitted('dragend')).toHaveLength(1)
+  })
 })
 
 describe('CardItem drag handle — text selection clearing', () => {