retold 4.0.1 → 4.0.2

package/examples/todo-list/web-client/source/views/View-Layout.cjs

@@ -0,0 +1,75 @@
+const libPictView = require('pict-view');
+
+const _ViewConfiguration =
+{
+	ViewIdentifier: 'TodoList-Layout',
+	DefaultRenderable: 'TodoList-Layout-Shell',
+	DefaultDestinationAddress: '#TodoList-Container',
+	AutoRender: false,
+
+	CSS: /*css*/`
+		.tl-nav { display: flex; align-items: center; justify-content: space-between; background: #3D3229; color: #E8E0D4; padding: 0 1.5em; height: 54px; }
+		.tl-nav-brand { font-size: 1.25em; font-weight: 700; color: #E8E0D4; cursor: pointer; text-decoration: none; }
+		.tl-nav-links { display: flex; align-items: center; gap: 0.5em; }
+		.tl-nav-links a { color: #D4CCBE; text-decoration: none; padding: 0.4em 0.75em; cursor: pointer; border-radius: 4px; transition: color 0.15s; }
+		.tl-nav-links a:hover { color: #fff; }
+		.tl-nav-sep { color: #5E5549; margin: 0 0.15em; }
+	`,
+
+	Templates:
+	[
+		{
+			Hash: 'TodoList-Layout-Template',
+			Template: /*html*/`
+<div class="tl-nav">
+	<a class="tl-nav-brand" onclick="{~P~}.PictApplication.navigateTo('/TaskList')">Todo List</a>
+	<div class="tl-nav-links">
+		<a onclick="{~P~}.PictApplication.navigateTo('/TaskList')">Tasks</a>
+		<span class="tl-nav-sep">|</span>
+		<a onclick="{~P~}.PictApplication.navigateTo('/WeekView')">Week</a>
+		<a onclick="{~P~}.PictApplication.navigateTo('/MonthView')">Month</a>
+		<a onclick="{~P~}.PictApplication.navigateTo('/YearView')">Year</a>
+		<span class="tl-nav-sep">|</span>
+		<a class="tl-btn tl-btn-success" onclick="{~P~}.PictApplication.addTask()">+ New Task</a>
+	</div>
+</div>
+<div id="TodoList-Content"></div>
+`
+		}
+	],
+
+	Renderables:
+	[
+		{
+			RenderableHash: 'TodoList-Layout-Shell',
+			TemplateHash: 'TodoList-Layout-Template',
+			DestinationAddress: '#TodoList-Container',
+			RenderMethod: 'replace'
+		}
+	]
+};
+
+class TodoListLayoutView extends libPictView
+{
+	constructor(pFable, pOptions, pServiceHash)
+	{
+		super(pFable, pOptions, pServiceHash);
+	}
+
+	onAfterRender()
+	{
+		// Render the task list as the default content view
+		this.pict.views['TodoList-TaskList'].render();
+		this.pict.CSSMap.injectCSS();
+
+		if (this.pict.providers.PictRouter)
+		{
+			this.pict.providers.PictRouter.resolve();
+		}
+
+		return super.onAfterRender();
+	}
+}
+
+module.exports = TodoListLayoutView;
+module.exports.default_configuration = _ViewConfiguration;

package/examples/todo-list/web-client/source/views/View-TaskForm.cjs

@@ -0,0 +1,87 @@
+const libPictView = require('pict-view');
+
+const _ViewConfiguration =
+{
+	ViewIdentifier: 'TodoList-TaskForm',
+	DefaultRenderable: 'TodoList-TaskForm-Content',
+	DefaultDestinationAddress: '#TodoList-Content',
+	DefaultTemplateRecordAddress: 'AppData.TodoList',
+	AutoRender: false,
+
+	Templates:
+	[
+		{
+			Hash: 'TodoList-TaskForm-Template',
+			Template: /*html*/`
+<h2 class="tl-heading">{~D:Record.FormTitle~}</h2>
+<div class="tl-form">
+	<div class="tl-form-group">
+		<label for="taskName">Name</label>
+		<input type="text" id="taskName" value="{~D:Record.SelectedTask.Name~}" placeholder="Task name" />
+	</div>
+	<div class="tl-form-group">
+		<label for="taskDescription">Description</label>
+		<textarea id="taskDescription" rows="3" placeholder="Task description">{~D:Record.SelectedTask.Description~}</textarea>
+	</div>
+	<div class="tl-form-group">
+		<label for="taskDueDate">Due Date</label>
+		<input type="date" id="taskDueDate" value="{~D:Record.SelectedTask.DueDate~}" />
+	</div>
+	<div class="tl-form-group">
+		<label for="taskHours">Estimated Hours</label>
+		<input type="number" id="taskHours" step="0.5" min="0" value="{~D:Record.SelectedTask.LengthInHours~}" />
+	</div>
+	<div class="tl-form-group">
+		<label for="taskStatus">Status</label>
+		<select id="taskStatus">
+			<option value="Pending">Pending</option>
+			<option value="In Progress">In Progress</option>
+			<option value="Complete">Complete</option>
+		</select>
+	</div>
+	<div class="tl-form-actions">
+		<button class="tl-btn tl-btn-primary" onclick="{~P~}.PictApplication.saveTask()">Save</button>
+		<button class="tl-btn tl-btn-default" onclick="{~P~}.PictApplication.navigateTo('/TaskList')">Cancel</button>
+	</div>
+</div>
+`
+		}
+	],
+
+	Renderables:
+	[
+		{
+			RenderableHash: 'TodoList-TaskForm-Content',
+			TemplateHash: 'TodoList-TaskForm-Template',
+			DestinationAddress: '#TodoList-Content',
+			RenderMethod: 'replace'
+		}
+	]
+};
+
+class TodoListTaskFormView extends libPictView
+{
+	constructor(pFable, pOptions, pServiceHash)
+	{
+		super(pFable, pOptions, pServiceHash);
+	}
+
+	onAfterRender()
+	{
+		// Set the select element to match the current task status
+		let tmpSelectedTask = this.pict.AppData.TodoList.SelectedTask;
+		if (tmpSelectedTask && tmpSelectedTask.Status)
+		{
+			let tmpSelect = document.getElementById('taskStatus');
+			if (tmpSelect)
+			{
+				tmpSelect.value = tmpSelectedTask.Status;
+			}
+		}
+
+		return super.onAfterRender();
+	}
+}
+
+module.exports = TodoListTaskFormView;
+module.exports.default_configuration = _ViewConfiguration;

package/examples/todo-list/web-client/source/views/View-TaskList.cjs

@@ -0,0 +1,127 @@
+const libPictView = require('pict-view');
+
+const _ViewConfiguration =
+{
+	ViewIdentifier: 'TodoList-TaskList',
+	DefaultRenderable: 'TodoList-TaskList-Content',
+	DefaultDestinationAddress: '#TodoList-Content',
+	AutoRender: false,
+
+	CSS: /*css*/`
+		.tl-toolbar .tl-btn { font-size: 0.8em; padding: 0.35em 0.65em; }
+		.tl-actions { white-space: nowrap; }
+		.tl-actions .tl-btn { margin-right: 0.35em; font-size: 0.8em; padding: 0.3em 0.7em; }
+	`,
+
+	Templates:
+	[
+		{
+			Hash: 'TodoList-TaskList-Template',
+			Template: /*html*/`
+<h2 class="tl-heading">Tasks</h2>
+{~T:TodoList-TaskList-Toolbar~}
+<table class="tl-table">
+	<thead>
+		<tr>
+			<th>Name</th>
+			<th>Due Date</th>
+			<th>Hours</th>
+			<th>Status</th>
+			<th>Actions</th>
+		</tr>
+	</thead>
+	<tbody>
+		{~TemplateSet:TodoList-TaskRow:AppData.TodoList.Tasks~}
+	</tbody>
+</table>
+`
+		},
+		{
+			Hash: 'TodoList-TaskList-Toolbar',
+			Template: /*html*/`
+<div class="tl-toolbar">
+	<div class="tl-toolbar-group">
+		<input type="text" id="tl-search-input" placeholder="Search name or description…" onkeydown="if(event.key==='Enter'){~P~}.PictApplication.searchTasks()" />
+		<button class="tl-btn tl-btn-primary" onclick="{~P~}.PictApplication.searchTasks()">Search</button>
+		<button class="tl-btn tl-btn-default" onclick="{~P~}.PictApplication.clearSearch()">Clear</button>
+	</div>
+	<div class="tl-toolbar-group">
+		<span class="tl-toolbar-label">Sort by</span>
+		<select id="tl-sort-order" onchange="{~P~}.PictApplication.changeSortOrder(this.value)">
+			<option value="DueDate~DESC">Due Date (newest first)</option>
+			<option value="DueDate~ASC">Due Date (oldest first)</option>
+			<option value="Name~ASC">Name (A–Z)</option>
+			<option value="Name~DESC">Name (Z–A)</option>
+			<option value="Status~ASC">Status (A–Z)</option>
+			<option value="Status~DESC">Status (Z–A)</option>
+			<option value="LengthInHours~DESC">Hours (most first)</option>
+			<option value="LengthInHours~ASC">Hours (least first)</option>
+			<option value="IDTask~DESC">Recently added</option>
+			<option value="IDTask~ASC">Oldest added</option>
+		</select>
+	</div>
+	<div class="tl-toolbar-group">
+		<span class="tl-record-count">{~D:AppData.TodoList.Tasks.length~} of {~D:AppData.TodoList.FilteredCount~} records</span>
+	</div>
+</div>
+`
+		},
+		{
+			Hash: 'TodoList-TaskRow',
+			Template: /*html*/`
+<tr>
+	<td>{~D:Record.Name~}</td>
+	<td>{~D:Record.DueDate~}</td>
+	<td>{~D:Record.LengthInHours~}</td>
+	<td><span class="tl-status">{~D:Record.Status~}</span></td>
+	<td class="tl-actions">
+		<button class="tl-btn tl-btn-primary" onclick="{~P~}.PictApplication.editTask({~D:Record.IDTask~})">Edit</button>
+		<button class="tl-btn tl-btn-danger" onclick="{~P~}.PictApplication.deleteTask({~D:Record.IDTask~})">Delete</button>
+	</td>
+</tr>
+`
+		}
+	],
+
+	Renderables:
+	[
+		{
+			RenderableHash: 'TodoList-TaskList-Content',
+			TemplateHash: 'TodoList-TaskList-Template',
+			DestinationAddress: '#TodoList-Content',
+			RenderMethod: 'replace'
+		}
+	]
+};
+
+class TodoListTaskListView extends libPictView
+{
+	constructor(pFable, pOptions, pServiceHash)
+	{
+		super(pFable, pOptions, pServiceHash);
+	}
+
+	onAfterRender()
+	{
+		let tmpListState = this.pict.AppData.TodoList.ListState;
+
+		// Restore the sort dropdown to reflect the current ListState
+		let tmpSortSelect = document.getElementById('tl-sort-order');
+		if (tmpSortSelect && tmpListState)
+		{
+			tmpSortSelect.value = tmpListState.SortColumn + '~' + tmpListState.SortDirection;
+		}
+
+		// Restore the search input text so it survives re-renders
+		let tmpSearchInput = document.getElementById('tl-search-input');
+		if (tmpSearchInput && tmpListState)
+		{
+			tmpSearchInput.value = tmpListState.SearchText || '';
+		}
+
+		return super.onAfterRender();
+	}
+}
+
+module.exports = TodoListTaskListView;
+module.exports.default_configuration = _ViewConfiguration;

package/examples/todo-list/web-client/source/views/calendar/View-MonthView.cjs

@@ -0,0 +1,293 @@
+const libPictView = require('pict-view');
+
+const _ViewConfiguration =
+{
+	ViewIdentifier: 'TodoList-MonthView',
+	DefaultRenderable: 'TodoList-MonthView-Content',
+	DefaultDestinationAddress: '#TodoList-Content',
+	AutoRender: false,
+
+	CSS: /*css*/`
+		.tl-month-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; background: #DDD6CA; border-radius: 6px; overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,0.08); }
+		.tl-month-grid-header { background: #3D3229; color: #E8E0D4; text-align: center; padding: 0.6em 0.25em; font-weight: 600; font-size: 0.85em; }
+		.tl-month-cell { background: #fff; min-height: 5em; padding: 0.4em; display: flex; flex-direction: column; }
+		.tl-month-cell-outside { background: #EAE3D8; color: #B5ADA2; }
+		.tl-month-cell-today { background: #E0EDEB; }
+		.tl-month-day-num { font-size: 0.85em; font-weight: 600; margin-bottom: 0.3em; }
+		.tl-month-counts { display: flex; gap: 0.3em; flex-wrap: wrap; margin-top: auto; }
+		.tl-month-counts .tl-cal-badge { font-size: 0.75em; }
+	`,
+
+	Templates:
+	[
+		{
+			Hash: 'TodoList-MonthView-Template',
+			Template: /*html*/`
+<div class="tl-cal-header">
+	<h2>Month View</h2>
+	<div class="tl-cal-nav">
+		<button class="tl-btn tl-btn-default" onclick="{~P~}.PictApplication.calendarNavigate('month', -1)">&larr; Prev</button>
+		<button class="tl-btn tl-btn-primary" onclick="{~P~}.PictApplication.calendarToday('month')">Today</button>
+		<button class="tl-btn tl-btn-default" onclick="{~P~}.PictApplication.calendarNavigate('month', 1)">Next &rarr;</button>
+	</div>
+</div>
+<p class="tl-cal-label">{~D:AppData.TodoList.CalendarState.MonthLabel~}</p>
+<div id="TodoList-MonthGrid"></div>
+<table class="tl-cal-table" style="margin-top:1.25em;">
+	<thead>
+		<tr>
+			<th>Week</th>
+			<th>Completed</th>
+			<th>Open</th>
+			<th>Total</th>
+		</tr>
+	</thead>
+	<tbody>
+		{~TemplateSet:TodoList-MonthWeekRow:AppData.TodoList.CalendarState.MonthRows~}
+	</tbody>
+</table>
+`
+		},
+		{
+			Hash: 'TodoList-MonthWeekRow',
+			Template: /*html*/`
+<tr class="{~D:Record.TotalClass~}">
+	<td>{~D:Record.WeekLabel~}</td>
+	<td><span class="tl-cal-badge {~D:Record.CompleteBadge~}">{~D:Record.Complete~}</span></td>
+	<td><span class="tl-cal-badge {~D:Record.OpenBadge~}">{~D:Record.Open~}</span></td>
+	<td><span class="tl-cal-badge {~D:Record.TotalBadge~}">{~D:Record.Total~}</span></td>
+</tr>
+`
+		}
+	],
+
+	Renderables:
+	[
+		{
+			RenderableHash: 'TodoList-MonthView-Content',
+			TemplateHash: 'TodoList-MonthView-Template',
+			DestinationAddress: '#TodoList-Content',
+			RenderMethod: 'replace'
+		}
+	]
+};
+
+const _MonthNamesFull = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
+const _DayAbbr = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'];
+const _MonthNames = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
+
+class TodoListMonthView extends libPictView
+{
+	constructor(pFable, pOptions, pServiceHash)
+	{
+		super(pFable, pOptions, pServiceHash);
+	}
+
+	/**
+	 * Build the task-count lookup and summary rows before the template renders.
+	 */
+	onBeforeRender()
+	{
+		let tmpCal = this.pict.AppData.TodoList.CalendarState;
+		let tmpAnchor = new Date(tmpCal.AnchorDate + 'T00:00:00');
+		let tmpYear = tmpAnchor.getFullYear();
+		let tmpMonth = tmpAnchor.getMonth();
+
+		tmpCal.MonthLabel = _MonthNamesFull[tmpMonth] + ' ' + tmpYear;
+
+		// Build a date->counts map from all tasks
+		let tmpAllTasks = this.pict.AppData.TodoList.AllTasks;
+		let tmpTaskMap = {};
+		for (let i = 0; i < tmpAllTasks.length; i++)
+		{
+			let tmpDate = (tmpAllTasks[i].DueDate || '').substring(0, 10);
+			if (!tmpDate)
+			{
+				continue;
+			}
+			if (!tmpTaskMap[tmpDate])
+			{
+				tmpTaskMap[tmpDate] = { complete: 0, open: 0 };
+			}
+			if (tmpAllTasks[i].Status === 'Complete')
+			{
+				tmpTaskMap[tmpDate].complete++;
+			}
+			else
+			{
+				tmpTaskMap[tmpDate].open++;
+			}
+		}
+
+		// Store for use in onAfterRender (the grid is rendered imperatively)
+		this._taskMap = tmpTaskMap;
+		this._gridYear = tmpYear;
+		this._gridMonth = tmpMonth;
+
+		// Build weekly summary rows for the table
+		let tmpFirstDay = new Date(tmpYear, tmpMonth, 1);
+		let tmpLastDay = new Date(tmpYear, tmpMonth + 1, 0);
+
+		// Find the Monday on or before the 1st
+		let tmpStartDow = tmpFirstDay.getDay();
+		let tmpGridStart = new Date(tmpFirstDay);
+		tmpGridStart.setDate(tmpGridStart.getDate() - ((tmpStartDow + 6) % 7));
+
+		let tmpRows = [];
+		let tmpWeekStart = new Date(tmpGridStart);
+		let tmpTotalComplete = 0;
+		let tmpTotalOpen = 0;
+
+		while (tmpWeekStart <= tmpLastDay)
+		{
+			let tmpWeekComplete = 0;
+			let tmpWeekOpen = 0;
+
+			for (let d = 0; d < 7; d++)
+			{
+				let tmpDay = new Date(tmpWeekStart);
+				tmpDay.setDate(tmpWeekStart.getDate() + d);
+				let tmpDateStr = tmpDay.toISOString().substring(0, 10);
+
+				if (tmpDay.getMonth() === tmpMonth)
+				{
+					let tmpCounts = tmpTaskMap[tmpDateStr] || { complete: 0, open: 0 };
+					tmpWeekComplete += tmpCounts.complete;
+					tmpWeekOpen += tmpCounts.open;
+				}
+			}
+
+			let tmpWeekEnd = new Date(tmpWeekStart);
+			tmpWeekEnd.setDate(tmpWeekStart.getDate() + 6);
+			let tmpWeekTotal = tmpWeekComplete + tmpWeekOpen;
+
+			tmpRows.push(
+			{
+				WeekLabel: _MonthNames[tmpWeekStart.getMonth()] + ' ' + tmpWeekStart.getDate()
+					+ ' – ' + _MonthNames[tmpWeekEnd.getMonth()] + ' ' + tmpWeekEnd.getDate(),
+				Complete: tmpWeekComplete,
+				Open: tmpWeekOpen,
+				Total: tmpWeekTotal,
+				CompleteBadge: tmpWeekComplete > 0 ? 'tl-cal-badge-complete' : 'tl-cal-badge-zero',
+				OpenBadge: tmpWeekOpen > 0 ? 'tl-cal-badge-open' : 'tl-cal-badge-zero',
+				TotalBadge: tmpWeekTotal > 0 ? 'tl-cal-badge-complete' : 'tl-cal-badge-zero',
+				TotalClass: ''
+			});
+
+			tmpTotalComplete += tmpWeekComplete;
+			tmpTotalOpen += tmpWeekOpen;
+
+			tmpWeekStart.setDate(tmpWeekStart.getDate() + 7);
+		}
+
+		// Add a totals row
+		let tmpGrandTotal = tmpTotalComplete + tmpTotalOpen;
+		tmpRows.push(
+		{
+			WeekLabel: 'Total',
+			Complete: tmpTotalComplete,
+			Open: tmpTotalOpen,
+			Total: tmpGrandTotal,
+			CompleteBadge: tmpTotalComplete > 0 ? 'tl-cal-badge-complete' : 'tl-cal-badge-zero',
+			OpenBadge: tmpTotalOpen > 0 ? 'tl-cal-badge-open' : 'tl-cal-badge-zero',
+			TotalBadge: tmpGrandTotal > 0 ? 'tl-cal-badge-complete' : 'tl-cal-badge-zero',
+			TotalClass: 'tl-cal-total'
+		});
+
+		tmpCal.MonthRows = tmpRows;
+
+		return super.onBeforeRender();
+	}
+
+	/**
+	 * Render the calendar grid into the placeholder div after the template
+	 * has been placed in the DOM.
+	 */
+	onAfterRender()
+	{
+		let tmpContainer = document.getElementById('TodoList-MonthGrid');
+		if (!tmpContainer)
+		{
+			return super.onAfterRender();
+		}
+
+		let tmpYear = this._gridYear;
+		let tmpMonth = this._gridMonth;
+		let tmpTaskMap = this._taskMap;
+		let tmpToday = new Date().toISOString().substring(0, 10);
+
+		let tmpFirstDay = new Date(tmpYear, tmpMonth, 1);
+		let tmpLastDay = new Date(tmpYear, tmpMonth + 1, 0);
+
+		// Find the Monday on or before the 1st
+		let tmpStartDow = tmpFirstDay.getDay();
+		let tmpGridStart = new Date(tmpFirstDay);
+		tmpGridStart.setDate(tmpGridStart.getDate() - ((tmpStartDow + 6) % 7));
+
+		let tmpHTML = '<div class="tl-month-grid">';
+
+		// Day-of-week headers (Mon–Sun)
+		for (let h = 0; h < _DayAbbr.length; h++)
+		{
+			tmpHTML += '<div class="tl-month-grid-header">' + _DayAbbr[h] + '</div>';
+		}
+
+		// Calendar cells
+		let tmpCurrent = new Date(tmpGridStart);
+		let tmpSunday = new Date(tmpLastDay);
+		// Extend to fill the last row (go to next Sunday)
+		let tmpEndDow = tmpLastDay.getDay();
+		if (tmpEndDow !== 0)
+		{
+			tmpSunday.setDate(tmpLastDay.getDate() + (7 - tmpEndDow));
+		}
+
+		while (tmpCurrent <= tmpSunday)
+		{
+			let tmpDateStr = tmpCurrent.toISOString().substring(0, 10);
+			let tmpIsOutside = tmpCurrent.getMonth() !== tmpMonth;
+			let tmpIsToday = tmpDateStr === tmpToday;
+
+			let tmpCellClass = 'tl-month-cell';
+			if (tmpIsOutside)
+			{
+				tmpCellClass += ' tl-month-cell-outside';
+			}
+			if (tmpIsToday)
+			{
+				tmpCellClass += ' tl-month-cell-today';
+			}
+
+			let tmpCounts = tmpTaskMap[tmpDateStr] || { complete: 0, open: 0 };
+
+			tmpHTML += '<div class="' + tmpCellClass + '">';
+			tmpHTML += '<div class="tl-month-day-num">' + tmpCurrent.getDate() + '</div>';
+
+			if (!tmpIsOutside && (tmpCounts.complete > 0 || tmpCounts.open > 0))
+			{
+				tmpHTML += '<div class="tl-month-counts">';
+				if (tmpCounts.complete > 0)
+				{
+					tmpHTML += '<span class="tl-cal-badge tl-cal-badge-complete">' + tmpCounts.complete + '</span>';
+				}
+				if (tmpCounts.open > 0)
+				{
+					tmpHTML += '<span class="tl-cal-badge tl-cal-badge-open">' + tmpCounts.open + '</span>';
+				}
+				tmpHTML += '</div>';
+			}
+
+			tmpHTML += '</div>';
+
+			tmpCurrent.setDate(tmpCurrent.getDate() + 1);
+		}
+
+		tmpHTML += '</div>';
+		tmpContainer.innerHTML = tmpHTML;
+
+		return super.onAfterRender();
+	}
+}
+
+module.exports = TodoListMonthView;
+module.exports.default_configuration = _ViewConfiguration;