@khester/create-dynamics-app 1.0.8 → 1.1.0

package/templates/dynamics-365-starter/src/page-templates/EntityListPage.tsx

@@ -0,0 +1,406 @@
+import React, { useState, useEffect, useCallback } from 'react';
+import {
+  DetailsList,
+  IColumn,
+  SelectionMode,
+  CommandBar,
+  ICommandBarItemProps,
+  MessageBar,
+  MessageBarType,
+  Spinner,
+  SpinnerSize,
+  SearchBox,
+  Stack,
+  Text,
+  Panel,
+  PanelType,
+  DefaultButton,
+  PrimaryButton,
+} from '@fluentui/react';
+import { BaseEntity } from '../models/BaseEntity';
+import { useDynamicsApi } from '../providers/DynamicsProvider';
+import { Logger } from '../components/Logging/logger';
+
+interface EntityListPageProps<T extends BaseEntity> {
+  title: string;
+  entityLogicalName: string;
+  entityClass: any; // Constructor for the entity
+  columns: IColumn[];
+  fetchXmlTemplate: string;
+  maxRecords?: number;
+  enableSearch?: boolean;
+  searchFields?: string[];
+  onItemSelected?: (item: T) => void;
+  onNew?: () => void;
+  onEdit?: (item: T) => void;
+  onDelete?: (item: T) => void;
+  customCommands?: ICommandBarItemProps[];
+  renderCustomPanel?: (
+    item: T | null,
+    onDismiss: () => void
+  ) => React.ReactNode;
+}
+
+/**
+ * Generic entity list page template for Dynamics 365
+ * Supports any entity with CRUD operations, search, and custom actions
+ */
+export function EntityListPage<T extends BaseEntity>({
+  title,
+  entityLogicalName,
+  entityClass,
+  columns,
+  fetchXmlTemplate,
+  maxRecords = 100,
+  enableSearch = true,
+  searchFields = [],
+  onItemSelected,
+  onNew,
+  onEdit,
+  onDelete,
+  customCommands = [],
+  renderCustomPanel,
+}: EntityListPageProps<T>) {
+  const { apiService } = useDynamicsApi();
+  const [entities, setEntities] = useState<T[]>([]);
+  const [filteredEntities, setFilteredEntities] = useState<T[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [selectedItem, setSelectedItem] = useState<T | null>(null);
+  const [searchQuery, setSearchQuery] = useState('');
+  const [showPanel, setShowPanel] = useState(false);
+  const [refreshTrigger, setRefreshTrigger] = useState(0);
+
+  // Load entities
+  const loadEntities = useCallback(async () => {
+    if (!apiService) {
+      setError('API service not available');
+      setLoading(false);
+      return;
+    }
+
+    try {
+      setLoading(true);
+      setError(null);
+      Logger.log(`Loading ${title}...`);
+
+      const topClause = maxRecords ? `top="${maxRecords}"` : '';
+      const fetchXml = fetchXmlTemplate.replace('{{topClause}}', topClause);
+
+      const result = await apiService.retrieveMultipleRecords(
+        entityLogicalName,
+        fetchXml
+      );
+      const entityInstances = (result.entities || []).map(
+        (data: any) => new entityClass(data)
+      );
+
+      setEntities(entityInstances);
+      setFilteredEntities(entityInstances);
+      Logger.log(`Loaded ${entityInstances.length} ${title}`);
+    } catch (err) {
+      const errorMessage =
+        err instanceof Error ? err.message : `Failed to load ${title}`;
+      setError(errorMessage);
+      Logger.error(`Error loading ${title}:`, 'EntityListPage', err);
+    } finally {
+      setLoading(false);
+    }
+  }, [
+    apiService,
+    title,
+    entityLogicalName,
+    fetchXmlTemplate,
+    maxRecords,
+    entityClass,
+  ]);
+
+  useEffect(() => {
+    loadEntities();
+  }, [loadEntities, refreshTrigger]);
+
+  // Handle search
+  useEffect(() => {
+    if (!enableSearch || !searchQuery.trim()) {
+      setFilteredEntities(entities);
+      return;
+    }
+
+    const filtered = entities.filter((entity) => {
+      if (searchFields.length === 0) {
+        // Search all string fields if no specific fields specified
+        return Object.values(entity).some(
+          (value) =>
+            typeof value === 'string' &&
+            value.toLowerCase().includes(searchQuery.toLowerCase())
+        );
+      }
+
+      // Search specific fields
+      return searchFields.some((field) => {
+        const value = (entity as any)[field];
+        return (
+          typeof value === 'string' &&
+          value.toLowerCase().includes(searchQuery.toLowerCase())
+        );
+      });
+    });
+
+    setFilteredEntities(filtered);
+  }, [entities, searchQuery, enableSearch, searchFields]);
+
+  // Handle item selection
+  const handleItemClick = (item: T) => {
+    setSelectedItem(item);
+    if (onItemSelected) {
+      onItemSelected(item);
+    }
+  };
+
+  // Handle refresh
+  const handleRefresh = () => {
+    setRefreshTrigger((prev) => prev + 1);
+  };
+
+  // Handle new entity
+  const handleNew = () => {
+    if (onNew) {
+      onNew();
+    } else if (renderCustomPanel) {
+      setSelectedItem(null);
+      setShowPanel(true);
+    }
+  };
+
+  // Handle edit entity
+  const handleEdit = () => {
+    if (selectedItem) {
+      if (onEdit) {
+        onEdit(selectedItem);
+      } else if (renderCustomPanel) {
+        setShowPanel(true);
+      }
+    }
+  };
+
+  // Handle delete entity
+  const handleDelete = async () => {
+    if (!selectedItem || !apiService) {
+      setError('Selected item or API service not available');
+      return;
+    }
+
+    if (onDelete) {
+      onDelete(selectedItem);
+    } else {
+      try {
+        // Use the entity class static method or apiService directly
+        if (typeof (selectedItem as any).delete === 'function') {
+          await (selectedItem as any).delete(apiService);
+        } else {
+          // Fallback to direct API call - need to get the entity ID
+          const entityId =
+            (selectedItem as any).id ||
+            (selectedItem as any)[`${entityLogicalName}id`];
+          if (entityId) {
+            await apiService.deleteRecord(entityLogicalName, entityId);
+          } else {
+            throw new Error('Could not determine entity ID for deletion');
+          }
+        }
+
+        setSelectedItem(null);
+        handleRefresh();
+        Logger.log(`${title} item deleted successfully`);
+      } catch (err) {
+        const errorMessage =
+          err instanceof Error ? err.message : `Failed to delete ${title} item`;
+        setError(errorMessage);
+        Logger.error(`Error deleting ${title} item:`, 'EntityListPage', err);
+      }
+    }
+  };
+
+  // Command bar items
+  const commandBarItems: ICommandBarItemProps[] = [
+    {
+      key: 'new',
+      text: `New ${title}`,
+      iconProps: { iconName: 'Add' },
+      onClick: handleNew,
+    },
+    {
+      key: 'edit',
+      text: 'Edit',
+      iconProps: { iconName: 'Edit' },
+      disabled: !selectedItem,
+      onClick: handleEdit,
+    },
+    {
+      key: 'delete',
+      text: 'Delete',
+      iconProps: { iconName: 'Delete' },
+      disabled: !selectedItem,
+      onClick: handleDelete,
+    },
+    {
+      key: 'refresh',
+      text: 'Refresh',
+      iconProps: { iconName: 'Refresh' },
+      onClick: handleRefresh,
+    },
+    ...customCommands,
+  ];
+
+  // Enhanced columns with click handlers
+  const enhancedColumns = columns.map((column) => ({
+    ...column,
+    onRender:
+      column.onRender ||
+      ((item: T) => {
+        const value = (item as any)[column.fieldName || ''];
+        if (column.key === columns[0].key) {
+          // Make first column clickable
+          return (
+            <span
+              style={{ color: '#0078d4', cursor: 'pointer', fontWeight: 500 }}
+              onClick={() => handleItemClick(item)}
+            >
+              {value || ''}
+            </span>
+          );
+        }
+        return <span>{value || ''}</span>;
+      }),
+  }));
+
+  return (
+    <div style={{ padding: '20px', maxWidth: '100%' }}>
+      <Stack tokens={{ childrenGap: 20 }}>
+        {/* Header */}
+        <Stack
+          horizontal
+          horizontalAlign="space-between"
+          verticalAlign="center"
+        >
+          <Text variant="xxLarge" style={{ fontWeight: 600, color: '#323130' }}>
+            {title}
+          </Text>
+          <Text variant="medium" style={{ color: '#605e5c' }}>
+            {filteredEntities.length} items
+          </Text>
+        </Stack>
+
+        {/* Error Message */}
+        {error && (
+          <MessageBar
+            messageBarType={MessageBarType.error}
+            onDismiss={() => setError(null)}
+          >
+            {error}
+          </MessageBar>
+        )}
+
+        {/* Search and Commands */}
+        <Stack horizontal tokens={{ childrenGap: 16 }}>
+          {enableSearch && (
+            <SearchBox
+              placeholder={`Search ${title}...`}
+              value={searchQuery}
+              onChange={(_, newValue) => setSearchQuery(newValue || '')}
+              style={{ maxWidth: 300 }}
+            />
+          )}
+          <CommandBar items={commandBarItems} style={{ flex: 1 }} />
+        </Stack>
+
+        {/* Content */}
+        {loading ? (
+          <div
+            style={{
+              display: 'flex',
+              justifyContent: 'center',
+              alignItems: 'center',
+              minHeight: 200,
+              flexDirection: 'column',
+            }}
+          >
+            <Spinner size={SpinnerSize.large} label={`Loading ${title}...`} />
+          </div>
+        ) : filteredEntities.length === 0 ? (
+          <div
+            style={{
+              textAlign: 'center',
+              padding: '40px 20px',
+              color: '#605e5c',
+            }}
+          >
+            <div style={{ fontSize: 48, marginBottom: 16, color: '#a19f9d' }}>
+              📋
+            </div>
+            <Text
+              variant="large"
+              style={{ fontWeight: 600, marginBottom: 8, color: '#323130' }}
+            >
+              {searchQuery ? 'No matching items found' : `No ${title} found`}
+            </Text>
+            <Text variant="medium">
+              {searchQuery
+                ? `Try adjusting your search criteria`
+                : `Click "New ${title}" to get started`}
+            </Text>
+          </div>
+        ) : (
+          <DetailsList
+            items={filteredEntities}
+            columns={enhancedColumns}
+            setKey="set"
+            layoutMode={0}
+            selectionMode={SelectionMode.single}
+            onActiveItemChanged={setSelectedItem}
+            isHeaderVisible={true}
+          />
+        )}
+
+        {/* Custom Panel */}
+        {renderCustomPanel && (
+          <Panel
+            headerText={selectedItem ? `Edit ${title}` : `New ${title}`}
+            isOpen={showPanel}
+            onDismiss={() => setShowPanel(false)}
+            type={PanelType.medium}
+            closeButtonAriaLabel="Close"
+          >
+            {renderCustomPanel(selectedItem, () => {
+              setShowPanel(false);
+              handleRefresh();
+            })}
+          </Panel>
+        )}
+      </Stack>
+    </div>
+  );
+}
+
+// Helper function to create standard FetchXML template
+export function createStandardFetchXml(
+  entityName: string,
+  attributes: string[],
+  orderBy?: string,
+  filter?: string
+): string {
+  const attributeElements = attributes
+    .map((attr) => `<attribute name="${attr}" />`)
+    .join('\n            ');
+  const orderElement = orderBy ? `<order attribute="${orderBy}" />` : '';
+  const filterElement = filter ? `<filter>${filter}</filter>` : '';
+
+  return `
+    <fetch {{topClause}}>
+      <entity name="${entityName}">
+        ${attributeElements}
+        ${orderElement}
+        ${filterElement}
+      </entity>
+    </fetch>`;
+}