@khester/create-dynamics-app 2.1.0 → 2.2.0

package/templates/react-custom-page/src/services/MockApiService.ts

@@ -1,260 +0,0 @@
-import { IApiService } from '@khester/dynamics-ui-api-client';
-
-/**
- * Mock implementation of IApiService for local development and testing.
- * Provides in-memory storage and simulated API responses.
- */
-export class MockApiService implements IApiService {
-  private storage: Map<string, Map<string, any>> = new Map();
-
-  constructor() {
-    // Initialize with some mock data
-    this.initializeMockData();
-  }
-
-  async createRecord(entityName: string, record: any): Promise<any> {
-    console.log(`MockApiService: Creating ${entityName} record`, record);
-
-    // Simulate network delay
-    await this.simulateDelay();
-
-    // Get or create entity collection
-    if (!this.storage.has(entityName)) {
-      this.storage.set(entityName, new Map());
-    }
-    const collection = this.storage.get(entityName)!;
-
-    // Generate ID based on entity type
-    const id = this.generateId(entityName);
-    const primaryKey = this.getPrimaryKey(entityName);
-
-    // Create record with ID
-    const newRecord = {
-      ...record,
-      [primaryKey]: id,
-      createdon: new Date().toISOString(),
-      modifiedon: new Date().toISOString(),
-    };
-
-    collection.set(id, newRecord);
-
-    return newRecord;
-  }
-
-  async updateRecord(
-    entityName: string,
-    id: string,
-    record: any
-  ): Promise<any> {
-    console.log(`MockApiService: Updating ${entityName} record ${id}`, record);
-
-    await this.simulateDelay();
-
-    const collection = this.storage.get(entityName);
-    if (!collection || !collection.has(id)) {
-      throw new Error(`Record not found: ${entityName} with ID ${id}`);
-    }
-
-    const existing = collection.get(id);
-    const updated = {
-      ...existing,
-      ...record,
-      modifiedon: new Date().toISOString(),
-    };
-
-    collection.set(id, updated);
-
-    return updated;
-  }
-
-  async deleteRecord(entityName: string, id: string): Promise<void> {
-    console.log(`MockApiService: Deleting ${entityName} record ${id}`);
-
-    await this.simulateDelay();
-
-    const collection = this.storage.get(entityName);
-    if (!collection || !collection.has(id)) {
-      throw new Error(`Record not found: ${entityName} with ID ${id}`);
-    }
-
-    collection.delete(id);
-  }
-
-  async retrieveMultipleRecords(
-    entityName: string,
-    fetchXml: string
-  ): Promise<{ entities: any[] }> {
-    console.log(
-      `MockApiService: Retrieving ${entityName} records with FetchXML`,
-      fetchXml
-    );
-
-    await this.simulateDelay();
-
-    const collection = this.storage.get(entityName);
-    if (!collection) {
-      return { entities: [] };
-    }
-
-    // Convert Map values to array
-    const entities = Array.from(collection.values());
-
-    // Simple filter parsing from FetchXML (basic implementation)
-    const filteredEntities = this.applyBasicFetchXmlFilter(entities, fetchXml);
-
-    return { entities: filteredEntities };
-  }
-
-  async executeRequest(requestName: string, requestData: any): Promise<any> {
-    console.log(
-      `MockApiService: Executing request ${requestName}`,
-      requestData
-    );
-
-    await this.simulateDelay();
-
-    // Mock implementation - return success response
-    return {
-      success: true,
-      requestName,
-      timestamp: new Date().toISOString(),
-      data: requestData,
-    };
-  }
-
-  async uploadFile(file: File): Promise<string> {
-    console.log(`MockApiService: Uploading file ${file.name}`);
-
-    await this.simulateDelay(1000); // Longer delay for file upload
-
-    // Return mock file URL
-    return `https://mock-storage.dynamics365.com/files/${this.generateId('file')}-${file.name}`;
-  }
-
-  /**
-   * Initialize mock data for development
-   */
-  private initializeMockData(): void {
-    // Create accounts collection
-    const accounts = new Map<string, any>();
-    accounts.set('00000000-0000-0000-0000-000000000001', {
-      accountid: '00000000-0000-0000-0000-000000000001',
-      name: 'Contoso Ltd',
-      emailaddress1: 'info@contoso.com',
-      telephone1: '555-0100',
-      address1_city: 'Seattle',
-      address1_stateorprovince: 'WA',
-      address1_country: 'USA',
-      revenue: 5000000,
-      numberofemployees: 250,
-      createdon: '2024-01-15T10:00:00Z',
-      modifiedon: '2024-01-15T10:00:00Z',
-    });
-    accounts.set('00000000-0000-0000-0000-000000000002', {
-      accountid: '00000000-0000-0000-0000-000000000002',
-      name: 'Adventure Works',
-      emailaddress1: 'contact@adventureworks.com',
-      telephone1: '555-0200',
-      address1_city: 'Redmond',
-      address1_stateorprovince: 'WA',
-      address1_country: 'USA',
-      revenue: 10000000,
-      numberofemployees: 500,
-      createdon: '2024-01-20T14:30:00Z',
-      modifiedon: '2024-01-20T14:30:00Z',
-    });
-    this.storage.set('accounts', accounts);
-
-    // Create contacts collection
-    const contacts = new Map<string, any>();
-    contacts.set('00000000-0000-0000-0000-000000000101', {
-      contactid: '00000000-0000-0000-0000-000000000101',
-      firstname: 'John',
-      lastname: 'Doe',
-      emailaddress1: 'john.doe@contoso.com',
-      telephone1: '555-0101',
-      parentcustomerid: '00000000-0000-0000-0000-000000000001',
-      parentcustomerid_account: {
-        accountid: '00000000-0000-0000-0000-000000000001',
-        name: 'Contoso Ltd',
-      },
-      createdon: '2024-01-16T09:00:00Z',
-      modifiedon: '2024-01-16T09:00:00Z',
-    });
-    contacts.set('00000000-0000-0000-0000-000000000102', {
-      contactid: '00000000-0000-0000-0000-000000000102',
-      firstname: 'Jane',
-      lastname: 'Smith',
-      emailaddress1: 'jane.smith@adventureworks.com',
-      telephone1: '555-0201',
-      parentcustomerid: '00000000-0000-0000-0000-000000000002',
-      parentcustomerid_account: {
-        accountid: '00000000-0000-0000-0000-000000000002',
-        name: 'Adventure Works',
-      },
-      createdon: '2024-01-21T11:00:00Z',
-      modifiedon: '2024-01-21T11:00:00Z',
-    });
-    this.storage.set('contacts', contacts);
-  }
-
-  /**
-   * Generate a mock ID for an entity
-   */
-  private generateId(entityName: string): string {
-    const timestamp = Date.now();
-    const random = Math.floor(Math.random() * 1000000);
-    return `${entityName}-${timestamp}-${random}`;
-  }
-
-  /**
-   * Get the primary key field name for an entity
-   */
-  private getPrimaryKey(entityName: string): string {
-    const primaryKeys: Record<string, string> = {
-      accounts: 'accountid',
-      contacts: 'contactid',
-      opportunities: 'opportunityid',
-      leads: 'leadid',
-      incidents: 'incidentid',
-      quotes: 'quoteid',
-      salesorders: 'salesorderid',
-      invoices: 'invoiceid',
-    };
-
-    return primaryKeys[entityName] || `${entityName.replace(/s$/, '')}id`;
-  }
-
-  /**
-   * Apply basic FetchXML filtering (simplified implementation)
-   */
-  private applyBasicFetchXmlFilter(entities: any[], fetchXml: string): any[] {
-    // Extract attribute names from FetchXML
-    const attributeMatches = fetchXml.match(/<attribute name="([^"]+)"/g);
-    if (!attributeMatches || attributeMatches.length === 0) {
-      return entities;
-    }
-
-    const attributes = attributeMatches.map((match) =>
-      match.replace('<attribute name="', '').replace('"', '')
-    );
-
-    // Filter entities to only include requested attributes
-    return entities.map((entity) => {
-      const filtered: any = {};
-      attributes.forEach((attr) => {
-        if (Object.prototype.hasOwnProperty.call(entity, attr)) {
-          filtered[attr] = entity[attr];
-        }
-      });
-      return filtered;
-    });
-  }
-
-  /**
-   * Simulate network delay for realistic behavior
-   */
-  private async simulateDelay(ms: number = 200): Promise<void> {
-    return new Promise((resolve) => setTimeout(resolve, ms));
-  }
-}

package/templates/react-custom-page/src/services/ServiceFactory.ts

@@ -1,65 +0,0 @@
-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/react-custom-page/src/services/XrmApiService.ts

@@ -1,213 +0,0 @@
-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/react-custom-page/src/styles/index.css

@@ -1,171 +0,0 @@
-/* Global Styles for Dynamics 365 App */
-* {
-  box-sizing: border-box;
-}
-
-body {
-  margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
-    sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  background-color: #f5f5f5;
-  color: #323130;
-}
-
-.app {
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  background-color: #faf9f8;
-}
-
-.app-header {
-  background: linear-gradient(135deg, #0078d4 0%, #106ebe 100%);
-  color: white;
-  padding: 16px 24px;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-}
-
-.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__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;
-  max-width: 1200px;
-  margin: 0 auto;
-  width: 100%;
-  background-color: white;
-  margin-bottom: 16px;
-  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;
-  padding: 12px 16px;
-  text-align: center;
-  color: #605e5c;
-  font-size: 12px;
-}
-
-.app-footer p {
-  margin: 0;
-}
-
-/* Dynamics 365 specific styles */
-.ms-Panel {
-  box-shadow: 0 6.4px 14.4px 0 rgba(0, 0, 0, 0.132), 0 1.2px 3.6px 0 rgba(0, 0, 0, 0.108);
-}
-
-.ms-DetailsList {
-  border-radius: 0;
-}
-
-.ms-DetailsHeader {
-  background-color: #f8f8f8;
-  border-bottom: 1px solid #edebe9;
-}
-
-.ms-DetailsRow:hover {
-  background-color: #f3f2f1;
-}
-
-.ms-DetailsRow.is-selected {
-  background-color: #deecf9;
-}
-
-@media (max-width: 768px) {
-  .app-header {
-    padding: 12px 16px;
-  }
-  
-  .app-header__content {
-    flex-direction: column;
-    gap: 12px;
-    align-items: flex-start;
-  }
-  
-  .app-header__title h1 {
-    font-size: 20px;
-  }
-  
-  .app-navigation {
-    margin: 8px;
-    border-radius: 4px 4px 0 0;
-  }
-  
-  .app-main {
-    margin: 0 8px 8px 8px;
-    border-radius: 0 0 4px 4px;
-  }
-  
-  .debug-panel-overlay {
-    padding: 10px;
-  }
-}