@khester/create-dynamics-app 2.1.0 → 2.2.0

package/templates/react-custom-page/src/components/ContactManagement.tsx

@@ -1,357 +0,0 @@
-import React, { useState, useEffect, useCallback } from 'react';
-import {
-  Button,
-  TextField,
-  DetailsList,
-  Dialog,
-  Panel,
-} from '@khester/dynamics-ui-components';
-import {
-  SelectionMode,
-  DetailsListLayoutMode,
-  CheckboxVisibility,
-} from '@fluentui/react';
-import { useDynamicsApi } from '../providers/DynamicsProvider';
-import { Contact } from '../models/Contact';
-import { ContactConstants } from '../constants/contact';
-import { Logger } from './Logging/logger';
-import { ContactForm } from './ContactForm';
-import './ContactManagement.css';
-
-const columns = [
-  {
-    key: ContactConstants.PrimaryName,
-    name: 'Name',
-    fieldName: ContactConstants.PrimaryName,
-    minWidth: 150,
-    maxWidth: 200,
-    isResizable: true,
-  },
-  {
-    key: ContactConstants.EMailAddress1,
-    name: 'Email',
-    fieldName: ContactConstants.EMailAddress1,
-    minWidth: 200,
-    maxWidth: 300,
-    isResizable: true,
-  },
-  {
-    key: ContactConstants.BusinessPhone,
-    name: 'Phone',
-    fieldName: ContactConstants.BusinessPhone,
-    minWidth: 150,
-    maxWidth: 200,
-    isResizable: true,
-  },
-  {
-    key: ContactConstants.CreatedOn,
-    name: 'Created',
-    fieldName: ContactConstants.CreatedOn,
-    minWidth: 150,
-    maxWidth: 200,
-    isResizable: true,
-  },
-];
-
-export const ContactManagement: React.FC = () => {
-  const { apiService, isEnvironmentMock, environmentType } = useDynamicsApi();
-
-  const [contacts, setContacts] = useState<Contact[]>([]);
-  const [filteredContacts, setFilteredContacts] = useState<Contact[]>([]);
-  const [loading, setLoading] = useState(false);
-  const [searchText, setSearchText] = useState('');
-  const [selectedContact, setSelectedContact] = useState<Contact | null>(null);
-  const [showNewContactPanel, setShowNewContactPanel] = useState(false);
-  const [showEditContactPanel, setShowEditContactPanel] = useState(false);
-  const [showDeleteDialog, setShowDeleteDialog] = useState(false);
-  const [contactToDelete, setContactToDelete] = useState<Contact | null>(null);
-
-  useEffect(() => {
-    Logger.userAction(
-      'ContactManagement loaded',
-      { environmentType, isEnvironmentMock },
-      'ContactManagement'
-    );
-  }, [environmentType, isEnvironmentMock]);
-
-  const loadContacts = useCallback(async () => {
-    if (!apiService) {
-      Logger.error(
-        'API service not available',
-        'ContactManagement.loadContacts'
-      );
-      return;
-    }
-
-    setLoading(true);
-    Logger.log('Loading contacts', 'ContactManagement.loadContacts');
-
-    try {
-      const contactsData = await Contact.retrieveActiveContacts(apiService);
-
-      const contactsWithDisplayData = contactsData.map((contact) => {
-        const contactInstance = new Contact(contact);
-        return {
-          ...contactInstance,
-          fullname:
-            `${contact.firstname || ''} ${contact.lastname || ''}`.trim(),
-          createdon: contact.createdon
-            ? new Date(contact.createdon).toLocaleDateString()
-            : '',
-        } as Contact;
-      });
-
-      setContacts(contactsWithDisplayData);
-      setFilteredContacts(contactsWithDisplayData);
-
-      Logger.log(
-        `Successfully loaded ${contactsWithDisplayData.length} contacts`,
-        'ContactManagement.loadContacts'
-      );
-    } catch (error) {
-      Logger.error(
-        'Failed to load contacts',
-        'ContactManagement.loadContacts',
-        error
-      );
-    } finally {
-      setLoading(false);
-    }
-  }, [apiService]);
-
-  useEffect(() => {
-    loadContacts();
-  }, [loadContacts]);
-
-  useEffect(() => {
-    if (!searchText) {
-      setFilteredContacts(contacts);
-    } else {
-      const filtered = contacts.filter(
-        (contact) =>
-          contact.fullname?.toLowerCase().includes(searchText.toLowerCase()) ||
-          contact.emailaddress1
-            ?.toLowerCase()
-            .includes(searchText.toLowerCase()) ||
-          contact.telephone1?.includes(searchText)
-      );
-      setFilteredContacts(filtered);
-    }
-  }, [contacts, searchText]);
-
-  const handleItemInvoked = useCallback(
-    (item: Contact) => {
-      Logger.userAction(
-        'Contact item invoked',
-        { contactId: item.contactid, contactName: item.fullname },
-        'ContactManagement.handleItemInvoked'
-      );
-
-      if (selectedContact?.contactid === item.contactid) {
-        setShowEditContactPanel(true);
-      } else {
-        setSelectedContact(item);
-      }
-    },
-    [selectedContact]
-  );
-
-  const handleNewContact = useCallback(() => {
-    Logger.userAction(
-      'New contact panel opened',
-      {},
-      'ContactManagement.handleNewContact'
-    );
-    setShowNewContactPanel(true);
-  }, []);
-
-  const handleEditContact = useCallback(() => {
-    if (selectedContact) {
-      Logger.userAction(
-        'Edit contact panel opened',
-        {
-          contactId: selectedContact.contactid,
-          contactName: selectedContact.fullname,
-        },
-        'ContactManagement.handleEditContact'
-      );
-      setShowEditContactPanel(true);
-    }
-  }, [selectedContact]);
-
-  const handleDeleteContact = useCallback(() => {
-    if (selectedContact) {
-      Logger.userAction(
-        'Delete contact dialog opened',
-        {
-          contactId: selectedContact.contactid,
-          contactName: selectedContact.fullname,
-        },
-        'ContactManagement.handleDeleteContact'
-      );
-      setContactToDelete(selectedContact);
-      setShowDeleteDialog(true);
-    }
-  }, [selectedContact]);
-
-  const confirmDelete = useCallback(async () => {
-    if (contactToDelete && apiService) {
-      try {
-        Logger.userAction(
-          'Contact deletion confirmed',
-          {
-            contactId: contactToDelete.contactid,
-            contactName: contactToDelete.fullname,
-          },
-          'ContactManagement.confirmDelete'
-        );
-
-        await Contact.delete(apiService, contactToDelete.contactid!);
-        await loadContacts();
-
-        setShowDeleteDialog(false);
-        setContactToDelete(null);
-        setSelectedContact(null);
-
-        Logger.log(
-          `Successfully deleted contact: ${contactToDelete.fullname}`,
-          'ContactManagement.confirmDelete'
-        );
-      } catch (error) {
-        Logger.error(
-          `Failed to delete contact: ${contactToDelete.fullname}`,
-          'ContactManagement.confirmDelete',
-          error
-        );
-      }
-    }
-  }, [contactToDelete, apiService, loadContacts]);
-
-  const handleContactSaved = useCallback(() => {
-    Logger.userAction(
-      'Contact saved, refreshing list',
-      {},
-      'ContactManagement.handleContactSaved'
-    );
-    loadContacts();
-    setShowNewContactPanel(false);
-    setShowEditContactPanel(false);
-    setSelectedContact(null);
-  }, [loadContacts]);
-
-  return (
-    <div className="contact-management">
-      <div className="contact-management__header">
-        <h2>Contact Management</h2>
-        <div className="contact-management__actions">
-          <TextField
-            placeholder="Search contacts..."
-            value={searchText}
-            onChange={(_, value) => setSearchText(value || '')}
-            iconProps={{ iconName: 'Search' }}
-          />
-          <Button
-            text="New Contact"
-            variant="primary"
-            onClick={handleNewContact}
-            iconProps={{ iconName: 'Add' }}
-          />
-        </div>
-      </div>
-
-      <div className="contact-management__toolbar">
-        <Button
-          text="Edit"
-          onClick={handleEditContact}
-          disabled={!selectedContact}
-          iconProps={{ iconName: 'Edit' }}
-        />
-        <Button
-          text="Delete"
-          onClick={handleDeleteContact}
-          disabled={!selectedContact}
-          iconProps={{ iconName: 'Delete' }}
-        />
-        <Button
-          text="Refresh"
-          onClick={loadContacts}
-          iconProps={{ iconName: 'Refresh' }}
-        />
-      </div>
-
-      <div className="contact-management__list">
-        <DetailsList
-          items={filteredContacts}
-          columns={columns}
-          onItemInvoked={handleItemInvoked}
-          selectionMode={SelectionMode.single}
-          layoutMode={DetailsListLayoutMode.justified}
-          checkboxVisibility={CheckboxVisibility.onHover}
-        />
-
-        {loading && (
-          <div className="contact-management__loading">Loading contacts...</div>
-        )}
-
-        {!loading && filteredContacts.length === 0 && (
-          <div className="contact-management__empty">
-            {searchText
-              ? 'No contacts found matching your search.'
-              : 'No contacts found. Create your first contact!'}
-          </div>
-        )}
-      </div>
-
-      {/* New Contact Panel */}
-      <Panel
-        isOpen={showNewContactPanel}
-        onDismiss={() => setShowNewContactPanel(false)}
-        headerText="New Contact"
-      >
-        <ContactForm
-          onSave={handleContactSaved}
-          onCancel={() => setShowNewContactPanel(false)}
-        />
-      </Panel>
-
-      {/* Edit Contact Panel */}
-      <Panel
-        isOpen={showEditContactPanel}
-        onDismiss={() => {
-          setShowEditContactPanel(false);
-          setSelectedContact(null);
-        }}
-        headerText="Edit Contact"
-      >
-        {selectedContact && (
-          <ContactForm
-            contactId={selectedContact.contactid}
-            initialData={{
-              ...selectedContact,
-              birthdate: selectedContact.birthdate
-                ? new Date(selectedContact.birthdate)
-                : undefined,
-            }}
-            onSave={handleContactSaved}
-            onCancel={() => {
-              setShowEditContactPanel(false);
-              setSelectedContact(null);
-            }}
-          />
-        )}
-      </Panel>
-
-      {/* Delete Confirmation Dialog */}
-      <Dialog
-        hidden={!showDeleteDialog}
-        onDismiss={() => setShowDeleteDialog(false)}
-        title="Confirm Delete"
-        content={`Are you sure you want to delete ${contactToDelete?.fullname}? This action cannot be undone.`}
-        actions={[
-          { text: 'Delete', onClick: confirmDelete, primary: true },
-          { text: 'Cancel', onClick: () => setShowDeleteDialog(false) },
-        ]}
-      />
-    </div>
-  );
-};

package/templates/react-custom-page/src/components/Logging/LogDialog.tsx

@@ -1,291 +0,0 @@
-import React from 'react';
-import {
-  Dialog,
-  DynamicsPrimaryButton,
-  DynamicsDefaultButton,
-} from '@khester/dynamics-ui-components';
-import { useLogging, LogEntry } from './LoggingContext';
-
-/**
- * Props for LogDialog component
- */
-interface LogDialogProps {
-  /** Whether the dialog is open */
-  isOpen: boolean;
-  /** Callback when dialog should be closed */
-  onClose: () => void;
-  /** Optional title for the dialog */
-  title?: string;
-  /** Optional maximum height for the log content */
-  maxHeight?: string;
-}
-
-/**
- * Dialog component for displaying logs in a modal
- */
-export const LogDialog: React.FC<LogDialogProps> = ({
-  isOpen,
-  onClose,
-  title = 'Application Logs',
-  maxHeight = '400px',
-}) => {
-  const { logs, clearLogs } = useLogging();
-
-  /**
-   * Handle clearing all logs
-   */
-  const handleClearLogs = () => {
-    clearLogs();
-  };
-
-  /**
-   * Handle copying logs to clipboard
-   */
-  const handleCopyLogs = async () => {
-    const logText = logs.map(formatLogEntry).join('\n');
-    try {
-      await navigator.clipboard.writeText(logText);
-      // Could add a notification here if needed
-    } catch (error) {
-      // Fallback for browsers that don't support clipboard API
-      console.warn('Failed to copy logs to clipboard:', error);
-    }
-  };
-
-  /**
-   * Format a log entry for display
-   */
-  const formatLogEntry = (log: LogEntry): string => {
-    const timestamp = new Date(log.timestamp).toLocaleString();
-    const source = log.source ? ` [${log.source}]` : '';
-    return `${timestamp}${source}: ${log.message}`;
-  };
-
-  /**
-   * Format a log entry for JSX display
-   */
-  const formatLogEntryJSX = (log: LogEntry, index: number): JSX.Element => {
-    const timestamp = new Date(log.timestamp).toLocaleString();
-    const source = log.source ? ` [${log.source}]` : '';
-
-    return (
-      <div key={index} style={{ marginBottom: '8px', fontSize: '12px' }}>
-        <span style={{ color: '#666', fontFamily: 'monospace' }}>
-          {timestamp}
-        </span>
-        {source && (
-          <span
-            style={{
-              color: '#0078d4',
-              fontFamily: 'monospace',
-              marginLeft: '4px',
-            }}
-          >
-            {source}
-          </span>
-        )}
-        <span style={{ fontFamily: 'monospace', marginLeft: '4px' }}>
-          : {log.message}
-        </span>
-      </div>
-    );
-  };
-
-  const dialogActions = [
-    {
-      text: 'Close',
-      onClick: onClose,
-      primary: true,
-    },
-    {
-      text: 'Clear Logs',
-      onClick: handleClearLogs,
-      disabled: logs.length === 0,
-    },
-    {
-      text: 'Copy to Clipboard',
-      onClick: handleCopyLogs,
-      disabled: logs.length === 0,
-    },
-  ];
-
-  return (
-    <Dialog
-      hidden={!isOpen}
-      onDismiss={onClose}
-      title={title}
-      subText={`${logs.length} log ${logs.length === 1 ? 'entry' : 'entries'}`}
-      actions={dialogActions}
-      content={
-        <div
-          style={{
-            maxHeight: maxHeight,
-            overflowY: 'auto',
-            padding: '8px',
-            backgroundColor: '#f8f8f8',
-            border: '1px solid #ddd',
-            borderRadius: '4px',
-            fontFamily: 'Consolas, "Courier New", monospace',
-            minWidth: '600px',
-            maxWidth: '800px',
-          }}
-        >
-          {logs.length === 0 ? (
-            <div style={{ fontStyle: 'italic', color: '#666' }}>
-              No logs available
-            </div>
-          ) : (
-            logs.map((log, index) => formatLogEntryJSX(log, index))
-          )}
-        </div>
-      }
-    />
-  );
-};
-
-/**
- * Simple log viewer component for inline display
- */
-interface LogViewerProps {
-  /** Maximum height for the log container */
-  maxHeight?: string;
-  /** Whether to show timestamps */
-  showTimestamps?: boolean;
-  /** Whether to show source information */
-  showSources?: boolean;
-}
-
-export const LogViewer: React.FC<LogViewerProps> = ({
-  maxHeight = '200px',
-  showTimestamps = true,
-  showSources = true,
-}) => {
-  const { logs } = useLogging();
-
-  /**
-   * Format a log entry for inline display
-   */
-  const formatLogEntry = (log: LogEntry, index: number): JSX.Element => {
-    const timestamp = showTimestamps
-      ? new Date(log.timestamp).toLocaleString()
-      : '';
-    const source = showSources && log.source ? ` [${log.source}]` : '';
-
-    return (
-      <div
-        key={index}
-        style={{
-          marginBottom: '4px',
-          fontSize: '11px',
-          fontFamily: 'Consolas, "Courier New", monospace',
-          lineHeight: '1.4',
-        }}
-      >
-        {showTimestamps && (
-          <span style={{ color: '#666', marginRight: '8px' }}>{timestamp}</span>
-        )}
-        {showSources && source && (
-          <span style={{ color: '#0078d4', marginRight: '4px' }}>{source}</span>
-        )}
-        <span>{log.message}</span>
-      </div>
-    );
-  };
-
-  return (
-    <div
-      style={{
-        maxHeight: maxHeight,
-        overflowY: 'auto',
-        padding: '8px',
-        backgroundColor: '#f8f8f8',
-        border: '1px solid #ddd',
-        borderRadius: '4px',
-        fontSize: '12px',
-      }}
-    >
-      {logs.length === 0 ? (
-        <div style={{ fontStyle: 'italic', color: '#666', fontSize: '12px' }}>
-          No logs available
-        </div>
-      ) : (
-        logs.map((log, index) => formatLogEntry(log, index))
-      )}
-    </div>
-  );
-};
-
-/**
- * Floating log viewer button that opens the log dialog
- */
-interface LogViewerButtonProps {
-  /** Position from bottom in pixels */
-  bottom?: number;
-  /** Position from right in pixels */
-  right?: number;
-  /** Whether to show log count badge */
-  showCount?: boolean;
-}
-
-export const LogViewerButton: React.FC<LogViewerButtonProps> = ({
-  bottom = 20,
-  right = 20,
-  showCount = true,
-}) => {
-  const { logs } = useLogging();
-  const [isDialogOpen, setIsDialogOpen] = React.useState(false);
-
-  const buttonStyle: React.CSSProperties = {
-    position: 'fixed',
-    bottom: `${bottom}px`,
-    right: `${right}px`,
-    zIndex: 1000,
-    borderRadius: '50%',
-    width: '50px',
-    height: '50px',
-    backgroundColor: '#0078d4',
-    border: 'none',
-    color: 'white',
-    cursor: 'pointer',
-    boxShadow: '0 4px 8px rgba(0,0,0,0.2)',
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    fontSize: '20px',
-  };
-
-  const badgeStyle: React.CSSProperties = {
-    position: 'absolute',
-    top: '-5px',
-    right: '-5px',
-    backgroundColor: '#d83b01',
-    color: 'white',
-    borderRadius: '50%',
-    width: '20px',
-    height: '20px',
-    fontSize: '12px',
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    fontWeight: 'bold',
-  };
-
-  return (
-    <>
-      <button
-        style={buttonStyle}
-        onClick={() => setIsDialogOpen(true)}
-        title={`View logs (${logs.length} entries)`}
-      >
-        📋
-        {showCount && logs.length > 0 && (
-          <span style={badgeStyle}>
-            {logs.length > 99 ? '99+' : logs.length}
-          </span>
-        )}
-      </button>
-
-      <LogDialog isOpen={isDialogOpen} onClose={() => setIsDialogOpen(false)} />
-    </>
-  );
-};