@khester/create-dynamics-app 1.0.8 → 1.1.0

package/templates/dynamics-365-starter/src/services/ServiceFactory.ts

@@ -0,0 +1,65 @@
+import { IApiService } from '@khester/dynamics-ui-api-client';
+import { MockApiService } from './MockApiService';
+import { XrmApiService } from './XrmApiService';
+
+/**
+ * Factory class for creating API service instances based on the current environment.
+ * Automatically detects mock vs production environments and returns the appropriate service.
+ */
+export class ServiceFactory {
+  /**
+   * Determines if the current environment is a mock/development environment.
+   * Checks for localhost or 127.0.0.1 hostnames.
+   */
+  public static get isMockEnvironment(): boolean {
+    const hostname = window.location.hostname;
+    return hostname === 'localhost' || hostname === '127.0.0.1';
+  }
+
+  /**
+   * Creates an API service instance appropriate for the current environment.
+   * @param Xrm The Xrm object from Dynamics 365 (required in production)
+   * @returns An IApiService implementation
+   * @throws Error if Xrm is not provided in production environment
+   */
+  public static createApiService(Xrm?: any): IApiService {
+    if (this.isMockEnvironment) {
+      console.log(
+        'ServiceFactory: Running in mock environment - using MockApiService'
+      );
+      return new MockApiService();
+    }
+
+    if (!Xrm) {
+      throw new Error(
+        'ServiceFactory: Xrm object is required in production environment. ' +
+          'Please ensure this code is running within Dynamics 365 context.'
+      );
+    }
+
+    console.log(
+      'ServiceFactory: Running in production environment - using XrmApiService'
+    );
+    return new XrmApiService(Xrm);
+  }
+
+  /**
+   * Gets the current environment type as a string.
+   * @returns 'mock' or 'production'
+   */
+  public static getEnvironmentType(): 'mock' | 'production' {
+    return this.isMockEnvironment ? 'mock' : 'production';
+  }
+
+  /**
+   * Checks if the code is running in a Dynamics 365 context.
+   * @returns True if Xrm global is available
+   */
+  public static isDynamics365Context(): boolean {
+    return (
+      typeof window !== 'undefined' &&
+      Object.prototype.hasOwnProperty.call(window, 'Xrm') &&
+      (window as any).Xrm !== undefined
+    );
+  }
+}

package/templates/dynamics-365-starter/src/services/XrmApiService.ts

@@ -0,0 +1,213 @@
+import { IApiService } from '@khester/dynamics-ui-api-client';
+
+/**
+ * Implementation of IApiService that uses Dynamics 365's Xrm.WebApi
+ * for direct integration with the platform.
+ */
+export class XrmApiService implements IApiService {
+  private xrm: any;
+
+  constructor(xrm: any) {
+    if (!xrm || !xrm.WebApi) {
+      throw new Error('Valid Xrm object with WebApi is required');
+    }
+    this.xrm = xrm;
+  }
+
+  async createRecord(entityName: string, record: any): Promise<any> {
+    try {
+      console.log(`XrmApiService: Creating ${entityName} record`, record);
+
+      // Remove any system fields that shouldn't be in create payload
+      const createPayload = { ...record };
+      delete createPayload.createdon;
+      delete createPayload.modifiedon;
+      delete createPayload.createdby;
+      delete createPayload.modifiedby;
+
+      const result = await this.xrm.WebApi.createRecord(
+        entityName,
+        createPayload
+      );
+
+      // Xrm.WebApi.createRecord returns an object with id property
+      // We need to fetch the full record to return it
+      const createdRecord = await this.xrm.WebApi.retrieveRecord(
+        entityName,
+        result.id
+      );
+
+      return createdRecord;
+    } catch (error) {
+      console.error(`XrmApiService: Error creating ${entityName}`, error);
+      throw error;
+    }
+  }
+
+  async updateRecord(
+    entityName: string,
+    id: string,
+    record: any
+  ): Promise<any> {
+    try {
+      console.log(`XrmApiService: Updating ${entityName} record ${id}`, record);
+
+      // Remove any system fields and primary key from update payload
+      const updatePayload = { ...record };
+      const primaryKey = this.getPrimaryKeyName(entityName);
+      delete updatePayload[primaryKey];
+      delete updatePayload.createdon;
+      delete updatePayload.modifiedon;
+      delete updatePayload.createdby;
+      delete updatePayload.modifiedby;
+
+      await this.xrm.WebApi.updateRecord(entityName, id, updatePayload);
+
+      // Fetch and return the updated record
+      const updatedRecord = await this.xrm.WebApi.retrieveRecord(
+        entityName,
+        id
+      );
+      return updatedRecord;
+    } catch (error) {
+      console.error(`XrmApiService: Error updating ${entityName}`, error);
+      throw error;
+    }
+  }
+
+  async deleteRecord(entityName: string, id: string): Promise<void> {
+    try {
+      console.log(`XrmApiService: Deleting ${entityName} record ${id}`);
+      await this.xrm.WebApi.deleteRecord(entityName, id);
+    } catch (error) {
+      console.error(`XrmApiService: Error deleting ${entityName}`, error);
+      throw error;
+    }
+  }
+
+  async retrieveMultipleRecords(
+    entityName: string,
+    fetchXml: string
+  ): Promise<{ entities: any[] }> {
+    try {
+      console.log(
+        `XrmApiService: Retrieving ${entityName} records with FetchXML`,
+        fetchXml
+      );
+
+      // Convert FetchXML to OData query if needed
+      // For now, we'll use Xrm.WebApi.retrieveMultipleRecords with options
+      const options = `?fetchXml=${encodeURIComponent(fetchXml)}`;
+
+      const result = await this.xrm.WebApi.retrieveMultipleRecords(
+        entityName,
+        options
+      );
+
+      return {
+        entities: result.entities || [],
+      };
+    } catch (error) {
+      console.error(
+        `XrmApiService: Error retrieving ${entityName} records`,
+        error
+      );
+      throw error;
+    }
+  }
+
+  async executeRequest(requestName: string, requestData: any): Promise<any> {
+    try {
+      console.log(
+        `XrmApiService: Executing request ${requestName}`,
+        requestData
+      );
+
+      // Xrm.WebApi.execute expects a request object with specific structure
+      const request = {
+        ...requestData,
+        getMetadata: () => ({
+          boundParameter: null,
+          operationType: 0, // Action
+          operationName: requestName,
+        }),
+      };
+
+      const response = await this.xrm.WebApi.execute(request);
+
+      // Parse the response
+      if (response.ok) {
+        const responseData = await response.json();
+        return responseData;
+      } else {
+        throw new Error(`Request failed with status: ${response.status}`);
+      }
+    } catch (error) {
+      console.error(
+        `XrmApiService: Error executing request ${requestName}`,
+        error
+      );
+      throw error;
+    }
+  }
+
+  async uploadFile(file: File): Promise<string> {
+    try {
+      console.log(`XrmApiService: Uploading file ${file.name}`);
+
+      // File upload in Dynamics 365 typically involves:
+      // 1. Creating an annotation (note) record
+      // 2. Attaching the file content as base64
+
+      // Convert file to base64
+      const base64Content = await this.fileToBase64(file);
+
+      // Create annotation record
+      const annotation = {
+        subject: file.name,
+        filename: file.name,
+        mimetype: file.type,
+        documentbody: base64Content,
+        isdocument: true,
+      };
+
+      const result = await this.xrm.WebApi.createRecord(
+        'annotation',
+        annotation
+      );
+
+      // Return the annotation ID as the file reference
+      return result.id;
+    } catch (error) {
+      console.error(`XrmApiService: Error uploading file`, error);
+      throw error;
+    }
+  }
+
+  /**
+   * Helper method to convert File to base64 string
+   */
+  private fileToBase64(file: File): Promise<string> {
+    return new Promise((resolve, reject) => {
+      const reader = new FileReader();
+      reader.readAsDataURL(file);
+      reader.onload = () => {
+        // Remove data URL prefix to get just the base64 content
+        const base64 = (reader.result as string).split(',')[1];
+        resolve(base64);
+      };
+      reader.onerror = (error) => reject(error);
+    });
+  }
+
+  /**
+   * Helper method to get the primary key name for an entity
+   */
+  private getPrimaryKeyName(entityName: string): string {
+    // Remove trailing 's' if present and add 'id'
+    const singularName = entityName.endsWith('s')
+      ? entityName.slice(0, -1)
+      : entityName;
+    return `${singularName}id`;
+  }
+}

package/templates/dynamics-365-starter/src/styles/index.css

@@ -28,18 +28,57 @@ body {
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
 }
 
-.app-header h1 {
+.app-header__content {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  max-width: 1200px;
+  margin: 0 auto;
+}
+
+.app-header__title h1 {
   margin: 0 0 4px 0;
   font-size: 24px;
   font-weight: 600;
 }
 
-.app-header p {
+.app-header__title p {
   margin: 0;
   font-size: 14px;
   opacity: 0.9;
 }
 
+.app-header__actions {
+  display: flex;
+  gap: 12px;
+  align-items: center;
+}
+
+.debug-toggle-btn {
+  background-color: rgba(255, 255, 255, 0.1);
+  border: 1px solid rgba(255, 255, 255, 0.3);
+  color: white;
+  padding: 6px 12px;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 12px;
+  transition: background-color 0.2s ease;
+}
+
+.debug-toggle-btn:hover {
+  background-color: rgba(255, 255, 255, 0.2);
+}
+
+.app-navigation {
+  background-color: white;
+  border-bottom: 1px solid #edebe9;
+  max-width: 1200px;
+  margin: 0 auto;
+  margin-top: 16px;
+  border-radius: 8px 8px 0 0;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+}
+
 .app-main {
   flex: 1;
   padding: 0;
@@ -47,12 +86,25 @@ body {
   margin: 0 auto;
   width: 100%;
   background-color: white;
-  margin-top: 16px;
   margin-bottom: 16px;
-  border-radius: 8px;
+  border-radius: 0 0 8px 8px;
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
 }
 
+.debug-panel-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.5);
+  z-index: 1000;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 20px;
+}
+
 .app-footer {
   background-color: #f3f2f1;
   border-top: 1px solid #edebe9;
@@ -93,12 +145,27 @@ body {
     padding: 12px 16px;
   }
   
-  .app-header h1 {
+  .app-header__content {
+    flex-direction: column;
+    gap: 12px;
+    align-items: flex-start;
+  }
+  
+  .app-header__title h1 {
     font-size: 20px;
   }
   
-  .app-main {
+  .app-navigation {
     margin: 8px;
-    border-radius: 4px;
+    border-radius: 4px 4px 0 0;
+  }
+  
+  .app-main {
+    margin: 0 8px 8px 8px;
+    border-radius: 0 0 4px 4px;
+  }
+  
+  .debug-panel-overlay {
+    padding: 10px;
   }
 }

package/templates/dynamics-365-starter/tools/entity-generator/index.js

@@ -0,0 +1,168 @@
+#!/usr/bin/env node
+
+const fs = require('fs');
+const path = require('path');
+const { program } = require('commander');
+
+// Entity Generator CLI Tool for Dynamics 365
+// Generates complete entity stack from templates
+
+program
+  .name('entity-generator')
+  .description('Generate complete entity stack for Dynamics 365')
+  .version('1.0.0');
+
+program
+  .command('generate')
+  .description('Generate entity files')
+  .requiredOption(
+    '-e, --entity <name>',
+    'Entity logical name (e.g., customentity)'
+  )
+  .requiredOption(
+    '-d, --display-name <name>',
+    'Entity display name (e.g., "Custom Entity")'
+  )
+  .option(
+    '-p, --plural <name>',
+    'Entity plural name (defaults to entity + "s")'
+  )
+  .option('--output <path>', 'Output directory (defaults to src/)')
+  .action(generateEntity);
+
+async function generateEntity(options) {
+  const { entity, displayName, plural, output } = options;
+
+  console.log(`🚀 Generating entity stack for: ${displayName} (${entity})`);
+
+  const config = {
+    entityName: entity.toLowerCase(),
+    entityNamePascal: toPascalCase(entity),
+    displayName,
+    pluralName: plural || entity.toLowerCase() + 's',
+    pluralNamePascal: toPascalCase(plural || entity + 's'),
+    outputDir: output || 'src',
+  };
+
+  try {
+    await generateEntityFiles(config);
+    console.log('✅ Entity stack generated successfully!');
+    console.log('\n📁 Generated files:');
+    console.log(`   • src/models/${config.entityNamePascal}.ts`);
+    console.log(`   • src/constants/${config.entityName}.ts`);
+    console.log(`   • src/components/${config.entityNamePascal}Management.tsx`);
+    console.log(`   • src/components/${config.entityNamePascal}Management.css`);
+    console.log(`   • src/components/${config.entityNamePascal}Form.tsx`);
+    console.log(`   • src/components/${config.entityNamePascal}Form.css`);
+    console.log('\n🎯 Next steps:');
+    console.log('   1. Update your D365 field constants in the constants file');
+    console.log('   2. Add the new components to your main application');
+    console.log('   3. Run npm run build to compile');
+  } catch (error) {
+    console.error('❌ Error generating entity:', error.message);
+    process.exit(1);
+  }
+}
+
+async function generateEntityFiles(config) {
+  const templatesDir = path.join(__dirname, 'templates');
+  const projectRoot = findProjectRoot();
+  const outputDir = path.join(projectRoot, config.outputDir);
+
+  // Ensure output directories exist
+  ensureDirectoryExists(path.join(outputDir, 'models'));
+  ensureDirectoryExists(path.join(outputDir, 'constants'));
+  ensureDirectoryExists(path.join(outputDir, 'components'));
+
+  // Generate model file
+  await generateFromTemplate(
+    path.join(templatesDir, 'model.template.ts'),
+    path.join(outputDir, 'models', `${config.entityNamePascal}.ts`),
+    config
+  );
+
+  // Generate constants file
+  await generateFromTemplate(
+    path.join(templatesDir, 'constants.template.ts'),
+    path.join(outputDir, 'constants', `${config.entityName}.ts`),
+    config
+  );
+
+  // Generate management component
+  await generateFromTemplate(
+    path.join(templatesDir, 'management.template.tsx'),
+    path.join(
+      outputDir,
+      'components',
+      `${config.entityNamePascal}Management.tsx`
+    ),
+    config
+  );
+
+  // Generate management CSS
+  await generateFromTemplate(
+    path.join(templatesDir, 'management.template.css'),
+    path.join(
+      outputDir,
+      'components',
+      `${config.entityNamePascal}Management.css`
+    ),
+    config
+  );
+
+  // Generate form component
+  await generateFromTemplate(
+    path.join(templatesDir, 'form.template.tsx'),
+    path.join(outputDir, 'components', `${config.entityNamePascal}Form.tsx`),
+    config
+  );
+
+  // Generate form CSS
+  await generateFromTemplate(
+    path.join(templatesDir, 'form.template.css'),
+    path.join(outputDir, 'components', `${config.entityNamePascal}Form.css`),
+    config
+  );
+}
+
+async function generateFromTemplate(templatePath, outputPath, config) {
+  const template = fs.readFileSync(templatePath, 'utf8');
+  const generated = replaceTemplateVariables(template, config);
+  fs.writeFileSync(outputPath, generated);
+}
+
+function replaceTemplateVariables(template, config) {
+  return template
+    .replace(/\{\{entityName\}\}/g, config.entityName)
+    .replace(/\{\{entityNamePascal\}\}/g, config.entityNamePascal)
+    .replace(/\{\{displayName\}\}/g, config.displayName)
+    .replace(/\{\{pluralName\}\}/g, config.pluralName)
+    .replace(/\{\{pluralNamePascal\}\}/g, config.pluralNamePascal);
+}
+
+function toPascalCase(str) {
+  return str.charAt(0).toUpperCase() + str.slice(1).toLowerCase();
+}
+
+function ensureDirectoryExists(dirPath) {
+  if (!fs.existsSync(dirPath)) {
+    fs.mkdirSync(dirPath, { recursive: true });
+  }
+}
+
+function findProjectRoot() {
+  let dir = process.cwd();
+  while (dir !== '/') {
+    if (fs.existsSync(path.join(dir, 'package.json'))) {
+      return dir;
+    }
+    dir = path.dirname(dir);
+  }
+  return process.cwd();
+}
+
+if (require.main === module) {
+  program.parse();
+}
+
+module.exports = { generateEntity };

package/templates/dynamics-365-starter/tools/entity-generator/templates/constants.template.ts

@@ -0,0 +1,124 @@
+/**
+ * {{displayName}} Entity Constants
+ * Generated by Entity Generator
+ * 
+ * Update these constants with actual field names from your Dynamics 365 entity
+ */
+// Replace 'SampleEntity' with your actual entity PascalCase name during template processing
+export class SampleEntityConstants {
+  /** Entity logical name */
+  public static readonly EntityLogicalName: string = "{{entityName}}";
+  
+  /** Entity collection name for Web API */
+  public static readonly EntityCollectionName: string = "{{pluralName}}";
+  
+  /** Primary ID attribute */
+  public static readonly PrimaryIdAttribute: string = "{{entityName}}id";
+  
+  /** Primary name attribute */
+  public static readonly PrimaryNameAttribute: string = "{{entityName}}_name";
+
+  // System fields
+  /** Type: DateTime, ReadOnly: true */
+  public static readonly CreatedOn: string = "createdon";
+  
+  /** Type: DateTime, ReadOnly: true */
+  public static readonly ModifiedOn: string = "modifiedon";
+  
+  /** Type: Lookup, ReadOnly: true */
+  public static readonly CreatedBy: string = "createdby";
+  
+  /** Type: Lookup, ReadOnly: true */
+  public static readonly ModifiedBy: string = "modifiedby";
+  
+  /** Type: Lookup, ReadOnly: true */
+  public static readonly OwnerId: string = "ownerid";
+  
+  /** Type: Picklist, ReadOnly: true */
+  public static readonly StateCode: string = "statecode";
+  
+  /** Type: Picklist, ReadOnly: true */
+  public static readonly StatusCode: string = "statuscode";
+
+  // Custom fields - Update these with your actual field names
+  /** Type: String, RequiredLevel: ApplicationRequired, MaxLength: 100 */
+  public static readonly Description: string = "{{entityName}}_description";
+  
+  /** Type: DateTime, RequiredLevel: None */
+  public static readonly DueDate: string = "{{entityName}}_duedate";
+  
+  /** Type: Picklist, RequiredLevel: None */
+  public static readonly Priority: string = "{{entityName}}_priority";
+  
+  /** Type: Lookup, RequiredLevel: None, Target: contact */
+  public static readonly ContactId: string = "{{entityName}}_contactid";
+  
+  /** Type: Lookup, RequiredLevel: None, Target: account */
+  public static readonly AccountId: string = "{{entityName}}_accountid";
+  
+  /** Type: Money, RequiredLevel: None */
+  public static readonly Amount: string = "{{entityName}}_amount";
+  
+  /** Type: Boolean, RequiredLevel: None */
+  public static readonly IsActive: string = "{{entityName}}_isactive";
+
+  // Option Set Values - Update these with your actual option set values
+  public static readonly PriorityOptions = {
+    Low: 1,
+    Medium: 2,
+    High: 3,
+    Critical: 4
+  };
+  
+  public static readonly StateCodeOptions = {
+    Active: 0,
+    Inactive: 1
+  };
+  
+  public static readonly StatusCodeOptions = {
+    Active: 1,
+    Inactive: 2
+  };
+
+  // Field display names for UI
+  public static readonly FieldDisplayNames = {
+    [this.PrimaryNameAttribute]: "Name",
+    [this.Description]: "Description",
+    [this.DueDate]: "Due Date",
+    [this.Priority]: "Priority",
+    [this.ContactId]: "Contact",
+    [this.AccountId]: "Account",
+    [this.Amount]: "Amount",
+    [this.IsActive]: "Is Active",
+    [this.CreatedOn]: "Created On",
+    [this.ModifiedOn]: "Modified On",
+    [this.CreatedBy]: "Created By",
+    [this.ModifiedBy]: "Modified By"
+  };
+
+  // Required fields
+  public static readonly RequiredFields = [
+    this.PrimaryNameAttribute
+  ];
+
+  // Fields for list view
+  public static readonly ListViewColumns = [
+    this.PrimaryNameAttribute,
+    this.Description,
+    this.Priority,
+    this.DueDate,
+    this.CreatedOn
+  ];
+
+  // Fields for form view
+  public static readonly FormFields = [
+    this.PrimaryNameAttribute,
+    this.Description,
+    this.Priority,
+    this.DueDate,
+    this.ContactId,
+    this.AccountId,
+    this.Amount,
+    this.IsActive
+  ];
+}