@khester/create-dynamics-app 1.0.8 → 1.1.0

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

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