pict-section-recordset 1.1.0 → 1.2.0

package/docs/views/list/README.md

@@ -1,260 +0,0 @@
-# List View
-
-The List view displays records in a table format with pagination, filtering, and sorting capabilities.
-
-## Overview
-
-The List view fetches and displays multiple records in a configurable table layout. It supports automatic column generation from schema, custom column definitions, pagination, filtering, and navigation to individual records.
-
-## Routes
-
-| Route | Description |
-|-------|-------------|
-| `/PSRS/:RecordSet/List` | List all records |
-| `/PSRS/:RecordSet/List/:Offset` | List with offset |
-| `/PSRS/:RecordSet/List/:Offset/:PageSize` | List with offset and page size |
-| `/PSRS/:RecordSet/List/FilteredTo/:FilterString` | List with filter |
-| `/PSRS/:RecordSet/List/FilteredTo/:FilterString/:Offset/:PageSize` | List with filter and pagination |
-| `/PSRS/:RecordSet/List/FilterExperience/:FilterExperience` | List with serialized filter state |
-
-## Configuration
-
-```javascript
-const recordSetConfig = {
-    RecordSet: 'User',
-    Title: 'Users',
-
-    // Use manifest for column configuration
-    RecordSetListManifestOnly: true,
-    RecordSetListDefaultManifest: 'UserListManifest',
-    RecordSetListManifests: ['UserListManifest', 'UserCompactList'],
-
-    // Or define columns directly
-    RecordSetListColumns: [
-        'Name',
-        'Email',
-        {
-            Key: 'Status',
-            DisplayName: 'User Status',
-            ManifestHash: 'Default',
-            PictDashboard: {
-                ValueTemplate: '{~ProcessCell:Record.Data.Key~}'
-            }
-        }
-    ]
-};
-```
-
-## Column Configuration
-
-### Simple Columns
-
-Specify column keys as strings:
-
-```javascript
-RecordSetListColumns: ['Name', 'Email', 'CreatedDate']
-```
-
-### Advanced Columns
-
-Use objects for custom display and formatting:
-
-```javascript
-RecordSetListColumns: [
-    {
-        Key: 'Name',
-        DisplayName: 'Full Name',
-        ManifestHash: 'Default',
-        PictDashboard: {
-            ValueTemplate: '{~D:Record.Data.Name~}'
-        }
-    },
-    {
-        Key: 'Status',
-        DisplayName: 'Account Status',
-        PictDashboard: {
-            ValueTemplate: '<span class="status-{~D:Record.Data.Status~}">{~D:Record.Data.Status~}</span>'
-        }
-    }
-]
-```
-
-## Auto-Generated Columns
-
-When no `RecordSetListColumns` or manifest is provided, columns are generated automatically from the record schema. The following fields are excluded by default:
-
-- ID field (e.g., `IDUser`)
-- GUID field (e.g., `GUIDUser`)
-- `CreateDate`
-- `CreatingIDUser`
-- `DeleteDate`
-- `Deleted`
-- `DeletingIDUser`
-- `UpdateDate`
-- `UpdatingIDUser`
-
-## Manifest Configuration
-
-For complex list displays, define a manifest:
-
-```javascript
-const listManifest = {
-    TitleTemplate: '{~D:Record.RecordSet~} Directory',
-    TableCells: [
-        {
-            Key: 'Name',
-            DisplayName: 'Name',
-            PictDashboard: {
-                ValueTemplate: '<a href="#/PSRS/User/View/{~D:Record.Data.GUIDUser~}">{~D:Record.Data.Name~}</a>'
-            }
-        },
-        {
-            Key: 'Email',
-            DisplayName: 'Email',
-            PictDashboard: {
-                ValueTemplate: '<a href="mailto:{~D:Record.Data.Email~}">{~D:Record.Data.Email~}</a>'
-            }
-        }
-    ]
-};
-```
-
-## Child Views
-
-The List view is composed of several child views:
-
-| View | Purpose |
-|------|---------|
-| `PRSP-List-HeaderList` | Header actions and navigation |
-| `PRSP-List-Title` | Page title |
-| `PRSP-Filters` | Filter controls |
-| `PRSP-List-PaginationTop` | Top pagination controls |
-| `PRSP-List-RecordList` | Record table container |
-| `PRSP-List-RecordListHeader` | Table header row |
-| `PRSP-List-RecordListEntry` | Individual record rows |
-| `PRSP-List-PaginationBottom` | Bottom pagination controls |
-
-## Pagination
-
-Pagination data is automatically calculated and available in templates:
-
-```javascript
-{
-    Offset: 0,              // Current offset
-    PageSize: 100,          // Records per page
-    PageEnd: 100,           // Last record number on current page
-    PageCount: 10,          // Total number of pages
-    TotalRecordCount: { Count: 1000 },
-
-    PageLinks: [            // All page links
-        { Page: 1, URL: '#/PSRS/User/List/0/100', RelativeOffset: 0 }
-    ],
-    PageLinksLimited: [],   // Limited range of page links (±10 pages)
-
-    PageLinkBookmarks: {
-        Current: 0,
-        Previous: false,
-        Next: 1,
-        PreviousLink: false,
-        NextLink: { Page: 2, URL: '...' },
-        ShowPreviousLink: false,
-        ShowNextLink: true
-    }
-}
-```
-
-## Lifecycle Hooks
-
-```javascript
-class CustomListView extends viewRecordSetList {
-    onBeforeRenderList(pRecordListData) {
-        // Modify data before rendering
-        // Add computed columns, filter records, etc.
-        return pRecordListData;
-    }
-
-    dynamicallyGenerateColumns(pRecordListData) {
-        // Customize auto-generated columns
-        // Call super or implement custom logic
-        return super.dynamicallyGenerateColumns(pRecordListData);
-    }
-}
-```
-
-## Templates
-
-| Template Hash | Purpose |
-|---------------|---------|
-| `PRSP-List-Template` | Main list container |
-| `PRSP-List-Template-Record` | Individual record template |
-
-## Filter Integration
-
-The List view integrates with the filter system. Filter state is maintained in:
-
-```javascript
-pict.Bundle._ActiveFilterState[RecordSet].FilterClauses
-```
-
-Filters can be serialized into URLs using the `FilterExperience` parameter for shareable filtered views.
-
-## Example Usage
-
-```javascript
-// Navigate to list
-pict.providers.RecordSetRouter.pictRouter.navigate('/PSRS/User/List');
-
-// Navigate with pagination
-pict.providers.RecordSetRouter.pictRouter.navigate('/PSRS/User/List/100/50');
-
-// Navigate with filter
-pict.providers.RecordSetRouter.pictRouter.navigate('/PSRS/User/List/FilteredTo/FBV~Status~EQ~active');
-
-// Access the list view
-const listView = pict.views['RSP-RecordSet-List'];
-
-// Render list programmatically
-const config = pict.PictSectionRecordSet.recordSetProviderConfigurations['User'];
-await listView.renderList(config, 'RSP-Provider-User', '', '', 0, 100);
-```
-
-## Manifest-Based Rendering
-
-For manifest-only configurations, use `renderListFromManifest`:
-
-```javascript
-const manifest = pict.PictSectionRecordSet.manifestDefinitions['UserListManifest'];
-const config = pict.PictSectionRecordSet.recordSetProviderConfigurations['User'];
-
-await listView.renderListFromManifest(
-    manifest,
-    config,
-    'RSP-Provider-User',
-    '',     // filterString
-    '',     // filterExperience
-    0,      // offset
-    100     // pageSize
-);
-```
-
-## Data Structure
-
-The `renderList` method provides this data structure to templates:
-
-```javascript
-{
-    Title: 'Users',
-    RecordSet: 'User',
-    RecordSetConfiguration: { ... },
-    RenderDestination: '#PRSP_Container',
-    FilterString: 'FBV~Status~EQ~active',
-    Records: { Records: [...] },
-    TotalRecordCount: { Count: 1000 },
-    RecordSchema: { properties: { ... } },
-    GUIDAddress: 'GUIDUser',
-    TableCells: [
-        { Key: 'Name', DisplayName: 'Name', PictDashboard: { ... } }
-    ],
-    // Pagination data...
-}
-```

package/docs/views/read/README.md

@@ -1,216 +0,0 @@
-# Read View
-
-The Read view displays a single record and supports both viewing and editing modes.
-
-## Overview
-
-The Read view fetches and displays a single record by its GUID. It supports multiple layout types (Basic, Split, Tab) and can toggle between read-only viewing and edit mode for updating records.
-
-## Routes
-
-| Route | Description |
-|-------|-------------|
-| `/PSRS/:RecordSet/View/:GUIDRecord` | View a record (read-only) |
-| `/PSRS/:RecordSet/Edit/:GUIDRecord` | Edit a record (editable form) |
-
-## Layout Types
-
-Configure the layout type in your record set configuration:
-
-```javascript
-const recordSetConfig = {
-    RecordSet: 'User',
-    ReadLayout: 'Basic'  // Options: 'Basic', 'Split', 'Tab'
-};
-```
-
-### Basic Layout
-
-Single column display of record fields with a button bar.
-
-### Split Layout
-
-Two-panel layout with record fields on the left and tabbed content on the right. Includes a draggable divider for resizing.
-
-### Tab Layout
-
-Tabbed interface where the main record is one tab among others.
-
-## Configuration
-
-```javascript
-const recordSetConfig = {
-    RecordSet: 'User',
-
-    // Layout type
-    ReadLayout: 'Split',
-
-    // Use manifest-based display
-    RecordSetReadManifestOnly: true,
-    RecordSetReadDefaultManifestView: 'UserViewManifest',
-    RecordSetReadDefaultManifestEdit: 'UserEditManifest',
-
-    // Override read-only behavior in View mode
-    RecordSetReadOverrideReadOnly: false,
-
-    // Tab configuration (for Split/Tab layouts)
-    RecordSetReadTabTitle: 'User Details',
-    RecordSetReadTabs: [
-        {
-            Title: 'Activity',
-            Hash: 'Activity',
-            Type: 'View',
-            View: 'UserActivityView'
-        },
-        {
-            Title: 'Settings',
-            Hash: 'Settings',
-            Type: 'Manifest',
-            Manifest: 'UserSettingsManifest'
-        }
-    ]
-};
-```
-
-## Tab Types
-
-### View Tab
-
-Renders a registered Pict view:
-
-```javascript
-{
-    Title: 'Activity Log',
-    Hash: 'Activity',
-    Type: 'View',
-    View: 'UserActivityView'  // Must be registered with pict.addView()
-}
-```
-
-### Manifest Tab
-
-Renders a manifest-based form section:
-
-```javascript
-{
-    Title: 'Profile',
-    Hash: 'Profile',
-    Type: 'Manifest',
-    Manifest: 'UserProfileManifest'
-}
-```
-
-### Attached Record Tab
-
-Displays a related record from another record set:
-
-```javascript
-{
-    Title: 'Organization',
-    Hash: 'Organization',
-    Type: 'AttachedRecord',
-    RecordSet: 'Organization',
-    JoinField: 'IDOrganization',
-    // Optional: for indirect joins
-    JoiningRecordSet: 'UserOrganization',
-    BaseField: 'IDUser'
-}
-```
-
-## View vs Edit Mode
-
-In **View mode**, all form fields are rendered as read-only. In **Edit mode**, fields are editable based on their manifest configuration.
-
-The button bar adapts to the current mode:
-- View mode: Shows Edit button
-- Edit mode: Shows Save and Cancel buttons
-
-## Lifecycle Hooks
-
-```javascript
-class CustomReadView extends viewRecordSetRead {
-    onBeforeRenderRead(pRecordReadData) {
-        // Called before rendering, receives record data
-        // Modify pRecordReadData.Record or pRecordReadData.DisplayFields
-        return pRecordReadData;
-    }
-
-    async onBeforeEdit() {
-        // Called when transitioning to edit mode
-    }
-
-    async onBeforeSave() {
-        // Called before saving changes
-        // Use for validation
-    }
-
-    async onBeforeView() {
-        // Called when transitioning to view mode
-    }
-
-    async onBeforeTabChange() {
-        // Called when switching between tabs
-    }
-}
-```
-
-## Button Bar Actions
-
-| Button | Action | Method |
-|--------|--------|--------|
-| Edit | Switch to edit mode | `edit()` |
-| Save | Save changes and return to view | `save()` |
-| Cancel | Discard changes and return to view | `cancel()` |
-
-## Templates
-
-| Template Hash | Purpose |
-|---------------|---------|
-| `PRSP-Read-Basic-Template` | Basic layout container |
-| `PRSP-Read-Split-Template` | Split layout container |
-| `PRSP-Read-Tab-Template` | Tab layout container |
-| `PRSP-Read-RecordRead-Template` | Record field display |
-| `PRSP-Read-RecordRead-Template-Row` | Individual field row |
-| `PRSP-Read-RecordButtonBar-Template` | Edit/Save/Cancel buttons |
-| `PRSP-Read-RecordTab-Template` | Tab content container |
-| `PRSP-Read-RecordTabNav-Template` | Tab navigation |
-
-## Renderables
-
-| Renderable Hash | Template | Use |
-|-----------------|----------|-----|
-| `PRSP_Renderable_Read_Basic` | Basic template | Single column layout |
-| `PRSP_Renderable_Read_Split` | Split template | Two-panel layout |
-| `PRSP_Renderable_Read_Tab` | Tab template | Tabbed layout |
-
-## Example Usage
-
-```javascript
-// Navigate to view a record
-pict.providers.RecordSetRouter.pictRouter.navigate('/PSRS/User/View/abc-123-def');
-
-// Navigate to edit a record
-pict.providers.RecordSetRouter.pictRouter.navigate('/PSRS/User/Edit/abc-123-def');
-
-// Access the read view
-const readView = pict.views['RSP-RecordSet-Read'];
-
-// Switch modes programmatically
-await readView.edit();  // To edit mode
-await readView.save();  // Save and return to view
-await readView.cancel(); // Cancel and return to view
-
-// Switch tabs
-readView.setTab('Activity');
-```
-
-## Updating Records
-
-When in edit mode and the user clicks Save:
-
-1. `onBeforeSave()` hook is called
-2. The provider's `updateRecord()` method is called with form data
-3. `onBeforeView()` hook is called
-4. Navigation returns to view mode
-
-The record data is stored at `pict.AppData['{RecordSet}Details']`.

package/eslint.config.mjs

@@ -1,10 +0,0 @@
-import globals from "globals";
-import pluginJs from "@eslint/js";
-
-
-export default [
-	{ files: ["source/**", "test/**"], languageOptions: { sourceType: "commonjs" } },
-	{ languageOptions: { globals: { ...globals.browser, ...globals.mocha, } } },
-	pluginJs.configs.recommended,
-	{ rules: { "no-prototype-builtins": "off", "no-unused-vars": "warn" } },
-];

package/example_applications/README.md

@@ -1,39 +0,0 @@
-# Example Applications
-
-These applications exercise the library from very basic to complex.
-
-## The Basics
-
-These forms are meant to provide simple configuration-based test
-suites for the framework.
-
-### Simple RecordSet
-
-The most basic example.  Some lists, etc. for Book and Author
-records.
-
-<http://localhost:9090/simple_entity/dist/index.html>
-
-### How to run example app for developers (Docker)
-
-#### Retold Harness
-
-- Install `retold-harness` separately
-- From `retold-harness` do `npm i`
-- Run `npm run docker-dev-build`
-- Run `npm run docker-dev-run`
-
-#### In this repository
-
-- Run `npm i`
-- Run `npm run build`
-- Go to `./example_applications`
-- Run `npm i`
-- Go to `./example_applications/simple_entity`
-- Run `npm i`
-- Run `npm run build`
-- Go to `./example_applications`
-- Run `npm run start`
-- Go to a browser at: `http://localhost:9090/simple_entity/dist/index.html`
-
-_NOTE: Making changes to the libraray only, just need to rebuild the base, but if altering the simple entity example app, you will need to rebuild in there as well._

package/example_applications/ServeExamples.js

@@ -1,82 +0,0 @@
-const libFable = require('fable');
-
-const defaultFableSettings = (
-	{
-		Product:'PictSectionFormExampleServer',
-		ProductVersion: '1.0.0',
-		APIServerPort: 9090,
-
-		OratorHTTPProxyDestinationURL: 'http://localhost:8086/',
-	});
-
-// Initialize Fable
-let _Fable = new libFable(defaultFableSettings);
-
-// Now initialize the Restify ServiceServer Fable Service
-_Fable.serviceManager.addServiceType('OratorServiceServer', require('orator-serviceserver-restify'));
-_Fable.serviceManager.instantiateServiceProvider('OratorServiceServer', 
-	{
-		RestifyConfiguration: { strictNext: true }
-	});
-
-// Now add the orator service to Fable
-_Fable.serviceManager.addServiceType('Orator', require('orator'));
-let _Orator = _Fable.serviceManager.instantiateServiceProvider('Orator', {});
-
-let tmpAnticipate = _Fable.newAnticipate();
-
-// Initialize the Orator server
-tmpAnticipate.anticipate(_Orator.initialize.bind(_Orator));
-
-// Create a simple custom endpoint on the server.
-tmpAnticipate.anticipate(
-	(fStageComplete)=>
-	{
-		// Create an endpoint.  This can also be done after the service is started.
-		_Orator.serviceServer.get
-		(
-			'/1.0/test/:hash',
-			(pRequest, pResponse, fNext) =>
-			{
-				// Send back the request parameters
-				pResponse.send(pRequest.params);
-				_Orator.fable.log.info(`Endpoint sent parameters object:`, pRequest.params);
-				return fNext();
-			}
-		);
-		return fStageComplete();
-	});
-
-tmpAnticipate.anticipate(
-	(fStageComplete) =>
-	{
-		_Orator.addStaticRoute(`${__dirname}/`);
-		return fStageComplete();
-	}
-)
-
-// Add the http proxy service
-const libOratorHTTPProxy = require(`orator-http-proxy`);
-_Fable.serviceManager.addServiceType('OratorHTTPProxy', libOratorHTTPProxy);
-_Fable.serviceManager.instantiateServiceProvider('OratorHTTPProxy', {LogLevel: 2});
-// Proxy all /1.0/ requests to the locally-running bookstore service (you need to run this from https://github.com/fable-retold/retold-harness ... it's a one-liner to start the service)
-tmpAnticipate.anticipate(
-	(fNext)=>
-	{
-		_Fable.OratorHTTPProxy.connectProxyRoutes();
-		return fNext();
-	});
-
-
-// Now start the service server.
-tmpAnticipate.anticipate(_Orator.startService.bind(_Orator));
-
-tmpAnticipate.wait(
-	(pError)=>
-	{
-		if (pError)
-		{
-			_Fable.log.error('Error initializing Orator Service Server: '+pError.message, pError);
-		}
-		_Fable.log.info('Orator Service Server Initialized.');
-	});

package/example_applications/bookstore/.quackage.json

@@ -1,9 +0,0 @@
-{
-	"GulpExecutions": [
-	{
-		"Hash": "default",
-		"Name": "Default standard build.",
-		"BuildFileLabel": "",
-		"BrowsersListRC": "since 2022"
-	}]
-}

package/example_applications/bookstore/Bookstore-Application-Configuration.json

@@ -1,4 +0,0 @@
-{
-	"Name": "Bookstore Application",
-	"Hash": "Bookstore"
-}