@khester/create-dynamics-app 1.1.0 → 2.1.0

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

@@ -1,456 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import {
-  Stack,
-  Text,
-  CommandBar,
-  ICommandBarItemProps,
-  MessageBar,
-  MessageBarType,
-  Spinner,
-  SpinnerSize,
-  Breadcrumb,
-  IBreadcrumbItem,
-  Panel,
-  PanelType,
-  Dialog,
-  DialogType,
-  DialogFooter,
-  PrimaryButton,
-  DefaultButton,
-  Pivot,
-  PivotItem,
-} from '@fluentui/react';
-import { BaseEntity } from '../models/BaseEntity';
-import { useDynamicsApi } from '../providers/DynamicsProvider';
-import { Logger } from '../components/Logging/logger';
-
-interface EntityDetailPageProps<T extends BaseEntity> {
-  entityId: string;
-  title: string;
-  entityLogicalName: string;
-  entityClass: any; // Constructor for the entity
-  fetchXmlTemplate: string;
-  renderForm: (
-    entity: T | null,
-    onSave: (entity: T) => void,
-    readOnly?: boolean
-  ) => React.ReactNode;
-  renderRelatedEntities?: (entity: T) => React.ReactNode;
-  renderAuditHistory?: (entity: T) => React.ReactNode;
-  onBack?: () => void;
-  onEdit?: (entity: T) => void;
-  onDelete?: (entity: T) => void;
-  customCommands?: ICommandBarItemProps[];
-  breadcrumbItems?: IBreadcrumbItem[];
-  enableTabs?: boolean;
-  readOnly?: boolean;
-}
-
-/**
- * Generic entity detail page template for Dynamics 365
- * Supports viewing, editing, related entities, and audit history
- */
-export function EntityDetailPage<T extends BaseEntity>({
-  entityId,
-  title,
-  entityLogicalName,
-  entityClass,
-  fetchXmlTemplate,
-  renderForm,
-  renderRelatedEntities,
-  renderAuditHistory,
-  onBack,
-  onEdit,
-  onDelete,
-  customCommands = [],
-  breadcrumbItems = [],
-  enableTabs = true,
-  readOnly = false,
-}: EntityDetailPageProps<T>) {
-  const { apiService } = useDynamicsApi();
-  const [entity, setEntity] = useState<T | null>(null);
-  const [loading, setLoading] = useState(true);
-  const [error, setError] = useState<string | null>(null);
-  const [saving, setSaving] = useState(false);
-  const [isEditing, setIsEditing] = useState(false);
-  const [showDeleteDialog, setShowDeleteDialog] = useState(false);
-  const [showEditPanel, setShowEditPanel] = useState(false);
-  const [selectedTab, setSelectedTab] = useState('details');
-
-  // Load entity
-  const loadEntity = async () => {
-    if (!apiService) {
-      setError('API service not available');
-      setLoading(false);
-      return;
-    }
-
-    try {
-      setLoading(true);
-      setError(null);
-      Logger.log(`Loading ${title} with ID: ${entityId}`);
-
-      const fetchXml = fetchXmlTemplate.replace('{{entityId}}', entityId);
-      const result = await apiService.retrieveMultipleRecords(
-        entityLogicalName,
-        fetchXml
-      );
-
-      if (result.entities && result.entities.length > 0) {
-        const entityData = new entityClass(result.entities[0]);
-        setEntity(entityData);
-        Logger.log(`${title} loaded successfully`);
-      } else {
-        setError(`${title} not found`);
-        Logger.warn(`${title} not found with ID: ${entityId}`);
-      }
-    } catch (err) {
-      const errorMessage =
-        err instanceof Error ? err.message : `Failed to load ${title}`;
-      setError(errorMessage);
-      Logger.error(`Error loading ${title}:`, 'EntityDetailPage', err);
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  useEffect(() => {
-    if (entityId) {
-      loadEntity();
-    }
-  }, [entityId]);
-
-  // Handle save
-  const handleSave = async (updatedEntity: T) => {
-    if (!apiService) {
-      setError('API service not available');
-      return;
-    }
-
-    try {
-      setSaving(true);
-      Logger.log(`Saving ${title}...`);
-
-      // Use the entity class static method or apiService directly
-      if (typeof (updatedEntity as any).update === 'function') {
-        await (updatedEntity as any).update(apiService);
-      } else {
-        // Fallback to direct API call
-        const entityData = { ...updatedEntity };
-        delete (entityData as any).id; // Remove id from update data
-        await apiService.updateRecord(entityLogicalName, entityId, entityData);
-      }
-
-      setEntity(updatedEntity);
-      setIsEditing(false);
-      setShowEditPanel(false);
-
-      Logger.log(`${title} saved successfully`);
-    } catch (err) {
-      const errorMessage =
-        err instanceof Error ? err.message : `Failed to save ${title}`;
-      setError(errorMessage);
-      Logger.error(`Error saving ${title}:`, 'EntityDetailPage', err);
-    } finally {
-      setSaving(false);
-    }
-  };
-
-  // Handle edit
-  const handleEdit = () => {
-    if (entity) {
-      if (onEdit) {
-        onEdit(entity);
-      } else {
-        setIsEditing(true);
-        setShowEditPanel(true);
-      }
-    }
-  };
-
-  // Handle delete
-  const handleDelete = async () => {
-    if (!entity || !apiService) {
-      setError('Entity or API service not available');
-      return;
-    }
-
-    if (onDelete) {
-      onDelete(entity);
-    } else {
-      try {
-        // Use the entity class static method or apiService directly
-        if (typeof (entity as any).delete === 'function') {
-          await (entity as any).delete(apiService);
-        } else {
-          // Fallback to direct API call
-          await apiService.deleteRecord(entityLogicalName, entityId);
-        }
-
-        setShowDeleteDialog(false);
-        if (onBack) {
-          onBack();
-        }
-        Logger.log(`${title} deleted successfully`);
-      } catch (err) {
-        const errorMessage =
-          err instanceof Error ? err.message : `Failed to delete ${title}`;
-        setError(errorMessage);
-        Logger.error(`Error deleting ${title}:`, 'EntityDetailPage', err);
-      }
-    }
-  };
-
-  // Handle refresh
-  const handleRefresh = () => {
-    loadEntity();
-  };
-
-  // Command bar items
-  const commandBarItems: ICommandBarItemProps[] = [
-    {
-      key: 'edit',
-      text: 'Edit',
-      iconProps: { iconName: 'Edit' },
-      disabled: !entity || readOnly,
-      onClick: handleEdit,
-    },
-    {
-      key: 'delete',
-      text: 'Delete',
-      iconProps: { iconName: 'Delete' },
-      disabled: !entity || readOnly,
-      onClick: () => setShowDeleteDialog(true),
-    },
-    {
-      key: 'refresh',
-      text: 'Refresh',
-      iconProps: { iconName: 'Refresh' },
-      onClick: handleRefresh,
-    },
-    ...customCommands,
-  ];
-
-  // Far command bar items
-  const farCommandBarItems: ICommandBarItemProps[] = onBack
-    ? [
-        {
-          key: 'back',
-          text: 'Back',
-          iconProps: { iconName: 'Back' },
-          onClick: onBack,
-        },
-      ]
-    : [];
-
-  // Default breadcrumb
-  const defaultBreadcrumbItems: IBreadcrumbItem[] = [
-    { text: title, key: 'list', onClick: onBack },
-    {
-      text: entity ? (entity as any).name || 'Details' : 'Loading...',
-      key: 'details',
-      isCurrentItem: true,
-    },
-  ];
-
-  const finalBreadcrumbItems =
-    breadcrumbItems.length > 0 ? breadcrumbItems : defaultBreadcrumbItems;
-
-  if (loading) {
-    return (
-      <div
-        style={{
-          display: 'flex',
-          justifyContent: 'center',
-          alignItems: 'center',
-          minHeight: 400,
-          flexDirection: 'column',
-          padding: '20px',
-        }}
-      >
-        <Spinner size={SpinnerSize.large} label={`Loading ${title}...`} />
-      </div>
-    );
-  }
-
-  if (error || !entity) {
-    return (
-      <div style={{ padding: '20px' }}>
-        <Stack tokens={{ childrenGap: 20 }}>
-          {onBack && <Breadcrumb items={finalBreadcrumbItems} />}
-
-          <MessageBar messageBarType={MessageBarType.error}>
-            {error || `${title} not found`}
-          </MessageBar>
-
-          <div
-            style={{
-              textAlign: 'center',
-              padding: '40px 20px',
-              color: '#605e5c',
-            }}
-          >
-            <div style={{ fontSize: 48, marginBottom: 16, color: '#d13438' }}>
-              ⚠️
-            </div>
-            <Text
-              variant="large"
-              style={{ fontWeight: 600, marginBottom: 8, color: '#323130' }}
-            >
-              {title} Not Found
-            </Text>
-            <Text variant="medium">
-              The requested {title.toLowerCase()} could not be found or you may
-              not have permission to view it.
-            </Text>
-            {onBack && (
-              <DefaultButton
-                text="Go Back"
-                onClick={onBack}
-                style={{ marginTop: 20 }}
-              />
-            )}
-          </div>
-        </Stack>
-      </div>
-    );
-  }
-
-  return (
-    <div style={{ padding: '20px', maxWidth: '100%' }}>
-      <Stack tokens={{ childrenGap: 20 }}>
-        {/* Breadcrumb */}
-        {onBack && <Breadcrumb items={finalBreadcrumbItems} />}
-
-        {/* Header */}
-        <Stack
-          horizontal
-          horizontalAlign="space-between"
-          verticalAlign="center"
-        >
-          <Stack>
-            <Text
-              variant="xxLarge"
-              style={{ fontWeight: 600, color: '#323130' }}
-            >
-              {(entity as any).name || title}
-            </Text>
-            <Text variant="medium" style={{ color: '#605e5c' }}>
-              {title} • {entityId}
-            </Text>
-          </Stack>
-        </Stack>
-
-        {/* Error Message */}
-        {error && (
-          <MessageBar
-            messageBarType={MessageBarType.error}
-            onDismiss={() => setError(null)}
-          >
-            {error}
-          </MessageBar>
-        )}
-
-        {/* Command Bar */}
-        <CommandBar items={commandBarItems} farItems={farCommandBarItems} />
-
-        {/* Content */}
-        {enableTabs && (renderRelatedEntities || renderAuditHistory) ? (
-          <Pivot
-            selectedKey={selectedTab}
-            onLinkClick={(item) =>
-              setSelectedTab(item?.props.itemKey || 'details')
-            }
-          >
-            <PivotItem headerText="Details" itemKey="details">
-              <div style={{ paddingTop: 20 }}>
-                {renderForm(entity, handleSave, !isEditing)}
-              </div>
-            </PivotItem>
-
-            {renderRelatedEntities && (
-              <PivotItem headerText="Related" itemKey="related">
-                <div style={{ paddingTop: 20 }}>
-                  {renderRelatedEntities(entity)}
-                </div>
-              </PivotItem>
-            )}
-
-            {renderAuditHistory && (
-              <PivotItem headerText="History" itemKey="history">
-                <div style={{ paddingTop: 20 }}>
-                  {renderAuditHistory(entity)}
-                </div>
-              </PivotItem>
-            )}
-          </Pivot>
-        ) : (
-          <div style={{ paddingTop: 20 }}>
-            {renderForm(entity, handleSave, !isEditing)}
-          </div>
-        )}
-
-        {/* Edit Panel */}
-        <Panel
-          headerText={`Edit ${title}`}
-          isOpen={showEditPanel}
-          onDismiss={() => {
-            setShowEditPanel(false);
-            setIsEditing(false);
-          }}
-          type={PanelType.medium}
-          closeButtonAriaLabel="Close"
-        >
-          <div style={{ paddingTop: 20 }}>
-            {renderForm(entity, handleSave, false)}
-          </div>
-        </Panel>
-
-        {/* Delete Confirmation Dialog */}
-        <Dialog
-          hidden={!showDeleteDialog}
-          onDismiss={() => setShowDeleteDialog(false)}
-          dialogContentProps={{
-            type: DialogType.normal,
-            title: 'Confirm Delete',
-            subText: `Are you sure you want to delete "${(entity as any).name || title}"? This action cannot be undone.`,
-          }}
-        >
-          <DialogFooter>
-            <PrimaryButton
-              onClick={handleDelete}
-              text="Delete"
-              disabled={saving}
-            />
-            <DefaultButton
-              onClick={() => setShowDeleteDialog(false)}
-              text="Cancel"
-              disabled={saving}
-            />
-          </DialogFooter>
-        </Dialog>
-      </Stack>
-    </div>
-  );
-}
-
-// Helper function to create detail FetchXML template
-export function createDetailFetchXml(
-  entityName: string,
-  attributes: string[],
-  primaryIdAttribute: string = `${entityName}id`
-): string {
-  const attributeElements = attributes
-    .map((attr) => `<attribute name="${attr}" />`)
-    .join('\n            ');
-
-  return `
-    <fetch top="1">
-      <entity name="${entityName}">
-        ${attributeElements}
-        <filter>
-          <condition attribute="${primaryIdAttribute}" operator="eq" value="{{entityId}}" />
-        </filter>
-      </entity>
-    </fetch>`;
-}