@khester/create-dynamics-app 1.0.8 → 1.1.0

package/templates/dynamics-365-starter/tools/entity-generator/templates/management.template.css

@@ -0,0 +1,204 @@
+/* {{displayName}} Management Component Styles */
+/* Generated by Entity Generator */
+/* Replace 'sample-entity' with your actual entity name during template processing */
+
+.sample-entity-management {
+  padding: 20px;
+  max-width: 100%;
+  min-height: 400px;
+}
+
+.sample-entity-management-title {
+  margin: 0 0 20px 0;
+  font-size: 24px;
+  font-weight: 600;
+  color: #323130;
+}
+
+.sample-entity-management-command-bar {
+  margin-bottom: 16px;
+  border-bottom: 1px solid #edebe9;
+  padding-bottom: 8px;
+}
+
+.sample-entity-management-loading {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-height: 200px;
+  flex-direction: column;
+}
+
+.sample-entity-management-list {
+  margin-top: 10px;
+}
+
+.sample-entity-management-name-link {
+  color: #0078d4;
+  cursor: pointer;
+  text-decoration: none;
+  font-weight: 500;
+}
+
+.sample-entity-management-name-link:hover {
+  text-decoration: underline;
+  color: #106ebe;
+}
+
+/* Responsive design */
+@media (max-width: 768px) {
+  .sample-entity-management {
+    padding: 10px;
+  }
+  
+  .sample-entity-management-title {
+    font-size: 20px;
+    margin-bottom: 15px;
+  }
+}
+
+/* List row hover effects */
+.sample-entity-management-list .ms-DetailsRow:hover {
+  background-color: #f8f9fa;
+}
+
+.sample-entity-management-list .ms-DetailsRow.is-selected {
+  background-color: #deecf9;
+}
+
+/* Command bar customizations */
+.sample-entity-management-command-bar .ms-CommandBar {
+  background-color: transparent;
+}
+
+.sample-entity-management-command-bar .ms-CommandBarItem-link {
+  color: #323130;
+}
+
+.sample-entity-management-command-bar .ms-CommandBarItem-link:hover {
+  background-color: #f3f2f1;
+}
+
+.sample-entity-management-command-bar .ms-CommandBarItem-link:disabled {
+  color: #a19f9d;
+}
+
+/* Loading spinner */
+.sample-entity-management-loading .ms-Spinner-label {
+  margin-top: 10px;
+  color: #605e5c;
+}
+
+/* Message bar styling */
+.sample-entity-management .ms-MessageBar {
+  margin-bottom: 16px;
+}
+
+/* Panel content spacing */
+.sample-entity-management .ms-Panel-main .ms-Panel-contentInner {
+  padding: 0 24px 20px 24px;
+}
+
+/* Details list column headers */
+.sample-entity-management-list .ms-DetailsHeader-cell {
+  font-weight: 600;
+  color: #323130;
+}
+
+/* Priority column styling */
+.sample-entity-management-list .priority-high {
+  color: #d13438;
+  font-weight: 600;
+}
+
+.sample-entity-management-list .priority-medium {
+  color: #ff8c00;
+  font-weight: 500;
+}
+
+.sample-entity-management-list .priority-low {
+  color: #107c10;
+}
+
+.sample-entity-management-list .priority-critical {
+  color: #a4262c;
+  font-weight: 700;
+}
+
+/* Date column styling */
+.sample-entity-management-list .date-column {
+  color: #605e5c;
+  font-size: 13px;
+}
+
+/* Empty state */
+.sample-entity-management-empty {
+  text-align: center;
+  padding: 40px 20px;
+  color: #605e5c;
+}
+
+.sample-entity-management-empty-icon {
+  font-size: 48px;
+  color: #a19f9d;
+  margin-bottom: 16px;
+}
+
+.sample-entity-management-empty-title {
+  font-size: 18px;
+  font-weight: 600;
+  margin-bottom: 8px;
+  color: #323130;
+}
+
+.sample-entity-management-empty-description {
+  font-size: 14px;
+  margin-bottom: 20px;
+}
+
+/* Error state */
+.sample-entity-management-error {
+  text-align: center;
+  padding: 40px 20px;
+}
+
+.sample-entity-management-error-icon {
+  font-size: 48px;
+  color: #d13438;
+  margin-bottom: 16px;
+}
+
+.sample-entity-management-error-title {
+  font-size: 18px;
+  font-weight: 600;
+  margin-bottom: 8px;
+  color: #d13438;
+}
+
+.sample-entity-management-error-description {
+  font-size: 14px;
+  color: #605e5c;
+  margin-bottom: 20px;
+}
+
+/* Accessibility improvements */
+.sample-entity-management-name-link:focus {
+  outline: 2px solid #0078d4;
+  outline-offset: 2px;
+}
+
+/* Print styles */
+@media print {
+  .sample-entity-management-command-bar {
+    display: none;
+  }
+  
+  .sample-entity-management {
+    padding: 0;
+  }
+  
+  .sample-entity-management-title {
+    font-size: 18px;
+    margin-bottom: 10px;
+  }
+}

package/templates/dynamics-365-starter/tools/entity-generator/templates/management.template.tsx

@@ -0,0 +1,413 @@
+import React, { useState, useEffect, useCallback } from 'react';
+import {
+  DetailsList,
+  IColumn,
+  SelectionMode,
+  CommandBar,
+  ICommandBarItemProps,
+  MessageBar,
+  MessageBarType,
+  Spinner,
+  SpinnerSize,
+  Panel,
+  PanelType,
+  DefaultButton,
+  PrimaryButton,
+  Dialog,
+  DialogType,
+  DialogFooter
+} from '@fluentui/react';
+// Replace 'SampleEntity' with your actual entity PascalCase name during template processing
+// import { SampleEntity, ISampleEntity } from '../models/SampleEntity';
+// import { SampleEntityForm } from './SampleEntityForm';
+// import { SampleEntityConstants } from '../constants/sample-entity';
+// import { useDynamicsApi } from '../providers/DynamicsProvider';
+// import { Logger } from './Logging/logger';
+import './SampleEntityManagement.css';
+
+// Template base entity interface - replace with actual BaseEntity during generation
+interface BaseEntity {
+  id?: string;
+  createdOn?: Date;
+  modifiedOn?: Date;
+  [key: string]: any;
+}
+
+// Template Logger - replace with actual Logger during generation
+const Logger = {
+  log: (message: string, source?: string) => console.log(message, source),
+  warn: (message: string, source?: string) => console.warn(message, source),
+  error: (message: string, source?: string, error?: any) => console.error(message, source, error)
+};
+
+// Template API service hook - replace with actual useDynamicsApi during generation
+const useDynamicsApi = () => ({
+  apiService: {
+    retrieveMultipleRecords: async () => [],
+    createRecord: async () => ({}),
+    updateRecord: async () => ({}),
+    deleteRecord: async () => ({})
+  }
+});
+
+// Template interfaces - replace with actual entity interface during generation
+interface ISampleEntity {
+  id?: string;
+  name?: string;
+  description?: string;
+  priority?: number;
+  dueDate?: Date;
+  amount?: number;
+  isActive?: boolean;
+  createdOn?: Date;
+}
+
+class SampleEntity implements BaseEntity, ISampleEntity {
+  id?: string;
+  name?: string;
+  description?: string;
+  priority?: number;
+  dueDate?: Date;
+  amount?: number;
+  isActive?: boolean;
+  createdOn?: Date;
+  modifiedOn?: Date;
+
+  constructor(data: Partial<ISampleEntity> = {}) {
+    Object.assign(this, data);
+  }
+
+  static async retrieveByFilter(apiService: any, filter?: string, maxRecords?: number): Promise<SampleEntity[]> {
+    // Template implementation - replace during generation
+    return [];
+  }
+
+  static async create(apiService: any, entity: SampleEntity): Promise<SampleEntity> {
+    // Template implementation - replace during generation
+    return entity;
+  }
+
+  async update(apiService: any): Promise<void> {
+    // Template implementation - replace during generation
+  }
+
+  async delete(apiService: any): Promise<void> {
+    // Template implementation - replace during generation
+  }
+}
+
+// Template constants - replace with actual constants during generation
+const SampleEntityConstants = {
+  PrimaryNameAttribute: 'name',
+  Description: 'description',
+  Priority: 'priority',
+  CreatedOn: 'createdOn',
+  FieldDisplayNames: {
+    name: 'Name',
+    description: 'Description',
+    priority: 'Priority',
+    createdOn: 'Created On'
+  },
+  PriorityOptions: {
+    Low: 1,
+    Medium: 2,
+    High: 3,
+    Critical: 4
+  }
+};
+
+// Template form component - replace with actual form during generation
+const SampleEntityForm: React.FC<{
+  sampleEntity?: SampleEntity | null;
+  onSave: (data: Partial<ISampleEntity>) => Promise<void>;
+  onCancel: () => void;
+}> = ({ sampleEntity, onSave, onCancel }) => {
+  return (
+    <div>
+      <p>Template Form Component - Replace during generation</p>
+      <button onClick={() => onSave({})}>Save</button>
+      <button onClick={onCancel}>Cancel</button>
+    </div>
+  );
+};
+
+interface SampleEntityManagementProps {
+  title?: string;
+  showCommandBar?: boolean;
+  maxRecords?: number;
+  filter?: string;
+  onItemSelected?: (item: SampleEntity) => void;
+}
+
+export const SampleEntityManagement: React.FC<SampleEntityManagementProps> = ({
+  title = "sampleEntities",
+  showCommandBar = true,
+  maxRecords = 100,
+  filter,
+  onItemSelected
+}) => {
+  const { apiService } = useDynamicsApi();
+  const [sampleEntities, setSampleEntities] = useState<SampleEntity[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [selectedItem, setSelectedItem] = useState<SampleEntity | null>(null);
+  const [showPanel, setShowPanel] = useState(false);
+  const [showDeleteDialog, setShowDeleteDialog] = useState(false);
+  const [isEditing, setIsEditing] = useState(false);
+  const [refreshTrigger, setRefreshTrigger] = useState(0);
+
+  // Load sampleEntities data
+  const loadSampleEntities = useCallback(async () => {
+    try {
+      setLoading(true);
+      setError(null);
+      Logger.log('Loading sampleEntities...');
+      
+      const data = await SampleEntity.retrieveByFilter(apiService, filter, maxRecords);
+      setSampleEntities(data);
+      Logger.log(`Loaded ${data.length} sampleEntities`);
+    } catch (err) {
+      const errorMessage = err instanceof Error ? err.message : 'Failed to load sampleEntities';
+      setError(errorMessage);
+      Logger.error('Error loading sampleEntities:', err);
+    } finally {
+      setLoading(false);
+    }
+  }, [apiService, filter, maxRecords]);
+
+  useEffect(() => {
+    loadSampleEntities();
+  }, [loadSampleEntities, refreshTrigger]);
+
+  // Handle item selection
+  const handleItemClick = (item: SampleEntity) => {
+    setSelectedItem(item);
+    if (onItemSelected) {
+      onItemSelected(item);
+    }
+  };
+
+  // Handle new sampleEntity
+  const handleNew = () => {
+    setSelectedItem(null);
+    setIsEditing(false);
+    setShowPanel(true);
+  };
+
+  // Handle edit sampleEntity
+  const handleEdit = () => {
+    if (selectedItem) {
+      setIsEditing(true);
+      setShowPanel(true);
+    }
+  };
+
+  // Handle delete sampleEntity
+  const handleDelete = () => {
+    if (selectedItem) {
+      setShowDeleteDialog(true);
+    }
+  };
+
+  // Confirm delete
+  const confirmDelete = async () => {
+    if (selectedItem) {
+      try {
+        await selectedItem.delete(apiService);
+        setShowDeleteDialog(false);
+        setSelectedItem(null);
+        setRefreshTrigger(prev => prev + 1);
+        Logger.log(`Sample Entity deleted successfully`);
+      } catch (err) {
+        const errorMessage = err instanceof Error ? err.message : 'Failed to delete Sample Entity';
+        setError(errorMessage);
+        Logger.error('Error deleting Sample Entity:', err);
+      }
+    }
+  };
+
+  // Handle save
+  const handleSave = async (sampleEntityData: Partial<ISampleEntity>) => {
+    try {
+      if (isEditing && selectedItem) {
+        // Update existing
+        Object.assign(selectedItem, sampleEntityData);
+        await selectedItem.update(apiService);
+        Logger.log(`Sample Entity updated successfully`);
+      } else {
+        // Create new
+        const newSampleEntity = new SampleEntity(sampleEntityData);
+        await SampleEntity.create(apiService, newSampleEntity);
+        Logger.log(`Sample Entity created successfully`);
+      }
+      
+      setShowPanel(false);
+      setSelectedItem(null);
+      setRefreshTrigger(prev => prev + 1);
+    } catch (err) {
+      const errorMessage = err instanceof Error ? err.message : `Failed to save Sample Entity`;
+      setError(errorMessage);
+      Logger.error('Error saving Sample Entity:', err);
+    }
+  };
+
+  // Handle panel dismiss
+  const handlePanelDismiss = () => {
+    setShowPanel(false);
+    setSelectedItem(null);
+    setIsEditing(false);
+  };
+
+  // Define columns
+  const columns: IColumn[] = [
+    {
+      key: 'name',
+      name: SampleEntityConstants.FieldDisplayNames[SampleEntityConstants.PrimaryNameAttribute],
+      fieldName: SampleEntityConstants.PrimaryNameAttribute,
+      minWidth: 150,
+      maxWidth: 250,
+      isResizable: true,
+      onRender: (item: SampleEntity) => (
+        <span 
+          className="sample-entity-management-name-link"
+          onClick={() => handleItemClick(item)}
+        >
+          {item[SampleEntityConstants.PrimaryNameAttribute]}
+        </span>
+      )
+    },
+    {
+      key: 'description',
+      name: SampleEntityConstants.FieldDisplayNames[SampleEntityConstants.Description],
+      fieldName: SampleEntityConstants.Description,
+      minWidth: 200,
+      maxWidth: 300,
+      isResizable: true
+    },
+    {
+      key: 'priority',
+      name: SampleEntityConstants.FieldDisplayNames[SampleEntityConstants.Priority],
+      fieldName: SampleEntityConstants.Priority,
+      minWidth: 100,
+      maxWidth: 150,
+      isResizable: true,
+      onRender: (item: SampleEntity) => {
+        const priority = item[SampleEntityConstants.Priority];
+        const priorityText = Object.keys(SampleEntityConstants.PriorityOptions).find(
+          key => SampleEntityConstants.PriorityOptions[key as keyof typeof SampleEntityConstants.PriorityOptions] === priority
+        );
+        return <span>{priorityText || priority}</span>;
+      }
+    },
+    {
+      key: 'createdOn',
+      name: SampleEntityConstants.FieldDisplayNames[SampleEntityConstants.CreatedOn],
+      fieldName: 'createdOn',
+      minWidth: 120,
+      maxWidth: 180,
+      isResizable: true,
+      onRender: (item: SampleEntity) => (
+        <span>{item.createdOn?.toLocaleDateString()}</span>
+      )
+    }
+  ];
+
+  // Command bar items
+  const commandBarItems: ICommandBarItemProps[] = showCommandBar ? [
+    {
+      key: 'new',
+      text: 'New Sample Entity',
+      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: () => setRefreshTrigger(prev => prev + 1)
+    }
+  ] : [];
+
+  return (
+    <div className="sample-entity-management">
+      <h2 className="sample-entity-management-title">{title}</h2>
+      
+      {error && (
+        <MessageBar 
+          messageBarType={MessageBarType.error} 
+          onDismiss={() => setError(null)}
+        >
+          {error}
+        </MessageBar>
+      )}
+      
+      {showCommandBar && (
+        <CommandBar
+          items={commandBarItems}
+          className="sample-entity-management-command-bar"
+        />
+      )}
+      
+      {loading ? (
+        <div className="sample-entity-management-loading">
+          <Spinner size={SpinnerSize.large} label="Loading sampleEntities..." />
+        </div>
+      ) : (
+        <DetailsList
+          items={sampleEntities}
+          columns={columns}
+          setKey="set"
+          layoutMode={0}
+          selectionMode={SelectionMode.single}
+          onActiveItemChanged={setSelectedItem}
+          className="sample-entity-management-list"
+        />
+      )}
+      
+      {/* Form Panel */}
+      <Panel
+        headerText={isEditing ? `Edit Sample Entity` : `New Sample Entity`}
+        isOpen={showPanel}
+        onDismiss={handlePanelDismiss}
+        type={PanelType.medium}
+        closeButtonAriaLabel="Close"
+      >
+        <SampleEntityForm
+          sampleEntity={selectedItem}
+          onSave={handleSave}
+          onCancel={handlePanelDismiss}
+        />
+      </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 "${selectedItem?.[SampleEntityConstants.PrimaryNameAttribute]}"?`
+        }}
+      >
+        <DialogFooter>
+          <PrimaryButton onClick={confirmDelete} text="Delete" />
+          <DefaultButton onClick={() => setShowDeleteDialog(false)} text="Cancel" />
+        </DialogFooter>
+      </Dialog>
+    </div>
+  );
+};