@khester/create-dynamics-app 1.1.0 → 2.1.0

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

@@ -1,406 +0,0 @@
-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>`;
-}