@khester/create-dynamics-app 1.0.8 → 1.1.0

package/templates/dynamics-365-starter/src/components/AccountManagement.tsx

@@ -0,0 +1,370 @@
+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 { Account } from '../models/Account';
+import { AccountConstants } from '../constants/account';
+import { Logger } from './Logging/logger';
+import { AccountForm } from './AccountForm';
+import './AccountManagement.css';
+
+const columns = [
+  {
+    key: AccountConstants.PrimaryName,
+    name: 'Account Name',
+    fieldName: AccountConstants.PrimaryName,
+    minWidth: 200,
+    maxWidth: 300,
+    isResizable: true,
+  },
+  {
+    key: AccountConstants.AccountNumber,
+    name: 'Account Number',
+    fieldName: AccountConstants.AccountNumber,
+    minWidth: 120,
+    maxWidth: 160,
+    isResizable: true,
+  },
+  {
+    key: AccountConstants.EMailAddress1,
+    name: 'Email',
+    fieldName: AccountConstants.EMailAddress1,
+    minWidth: 200,
+    maxWidth: 300,
+    isResizable: true,
+  },
+  {
+    key: AccountConstants.Telephone1,
+    name: 'Phone',
+    fieldName: AccountConstants.Telephone1,
+    minWidth: 150,
+    maxWidth: 200,
+    isResizable: true,
+  },
+  {
+    key: AccountConstants.WebSiteURL,
+    name: 'Website',
+    fieldName: AccountConstants.WebSiteURL,
+    minWidth: 150,
+    maxWidth: 200,
+    isResizable: true,
+  },
+  {
+    key: AccountConstants.CreatedOn,
+    name: 'Created',
+    fieldName: AccountConstants.CreatedOn,
+    minWidth: 120,
+    maxWidth: 160,
+    isResizable: true,
+  },
+];
+
+export const AccountManagement: React.FC = () => {
+  const { apiService, isEnvironmentMock, environmentType } = useDynamicsApi();
+
+  const [accounts, setAccounts] = useState<Account[]>([]);
+  const [filteredAccounts, setFilteredAccounts] = useState<Account[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [searchText, setSearchText] = useState('');
+  const [selectedAccount, setSelectedAccount] = useState<Account | null>(null);
+  const [showNewAccountPanel, setShowNewAccountPanel] = useState(false);
+  const [showEditAccountPanel, setShowEditAccountPanel] = useState(false);
+  const [showDeleteDialog, setShowDeleteDialog] = useState(false);
+  const [accountToDelete, setAccountToDelete] = useState<Account | null>(null);
+
+  useEffect(() => {
+    Logger.userAction(
+      'AccountManagement loaded',
+      { environmentType, isEnvironmentMock },
+      'AccountManagement'
+    );
+  }, [environmentType, isEnvironmentMock]);
+
+  const loadAccounts = useCallback(async () => {
+    if (!apiService) {
+      Logger.error(
+        'API service not available',
+        'AccountManagement.loadAccounts'
+      );
+      return;
+    }
+
+    setLoading(true);
+    Logger.log('Loading accounts', 'AccountManagement.loadAccounts');
+
+    try {
+      const accountsData = await Account.retrieveActiveAccounts(apiService);
+
+      const accountsWithDisplayData = accountsData.map((account) => {
+        const accountInstance = new Account(account);
+        return {
+          ...accountInstance,
+          createdon: account.createdon
+            ? new Date(account.createdon).toLocaleDateString()
+            : '',
+        } as Account;
+      });
+
+      setAccounts(accountsWithDisplayData);
+      setFilteredAccounts(accountsWithDisplayData);
+
+      Logger.log(
+        `Successfully loaded ${accountsWithDisplayData.length} accounts`,
+        'AccountManagement.loadAccounts'
+      );
+    } catch (error) {
+      Logger.error(
+        'Failed to load accounts',
+        'AccountManagement.loadAccounts',
+        error
+      );
+    } finally {
+      setLoading(false);
+    }
+  }, [apiService]);
+
+  useEffect(() => {
+    loadAccounts();
+  }, [loadAccounts]);
+
+  useEffect(() => {
+    if (!searchText) {
+      setFilteredAccounts(accounts);
+    } else {
+      const filtered = accounts.filter(
+        (account) =>
+          account.name?.toLowerCase().includes(searchText.toLowerCase()) ||
+          account.accountnumber
+            ?.toLowerCase()
+            .includes(searchText.toLowerCase()) ||
+          account.emailaddress1
+            ?.toLowerCase()
+            .includes(searchText.toLowerCase()) ||
+          account.telephone1?.includes(searchText) ||
+          account.websiteurl?.toLowerCase().includes(searchText.toLowerCase())
+      );
+      setFilteredAccounts(filtered);
+    }
+  }, [accounts, searchText]);
+
+  const handleItemInvoked = useCallback(
+    (item: Account) => {
+      Logger.userAction(
+        'Account item invoked',
+        { accountId: item.accountid, accountName: item.name },
+        'AccountManagement.handleItemInvoked'
+      );
+
+      if (selectedAccount?.accountid === item.accountid) {
+        setShowEditAccountPanel(true);
+      } else {
+        setSelectedAccount(item);
+      }
+    },
+    [selectedAccount]
+  );
+
+  const handleNewAccount = useCallback(() => {
+    Logger.userAction(
+      'New account panel opened',
+      {},
+      'AccountManagement.handleNewAccount'
+    );
+    setShowNewAccountPanel(true);
+  }, []);
+
+  const handleEditAccount = useCallback(() => {
+    if (selectedAccount) {
+      Logger.userAction(
+        'Edit account panel opened',
+        {
+          accountId: selectedAccount.accountid,
+          accountName: selectedAccount.name,
+        },
+        'AccountManagement.handleEditAccount'
+      );
+      setShowEditAccountPanel(true);
+    }
+  }, [selectedAccount]);
+
+  const handleDeleteAccount = useCallback(() => {
+    if (selectedAccount) {
+      Logger.userAction(
+        'Delete account dialog opened',
+        {
+          accountId: selectedAccount.accountid,
+          accountName: selectedAccount.name,
+        },
+        'AccountManagement.handleDeleteAccount'
+      );
+      setAccountToDelete(selectedAccount);
+      setShowDeleteDialog(true);
+    }
+  }, [selectedAccount]);
+
+  const confirmDelete = useCallback(async () => {
+    if (accountToDelete && apiService) {
+      try {
+        Logger.userAction(
+          'Account deletion confirmed',
+          {
+            accountId: accountToDelete.accountid,
+            accountName: accountToDelete.name,
+          },
+          'AccountManagement.confirmDelete'
+        );
+
+        await Account.delete(apiService, accountToDelete.accountid!);
+        await loadAccounts();
+
+        setShowDeleteDialog(false);
+        setAccountToDelete(null);
+        setSelectedAccount(null);
+
+        Logger.log(
+          `Successfully deleted account: ${accountToDelete.name}`,
+          'AccountManagement.confirmDelete'
+        );
+      } catch (error) {
+        Logger.error(
+          `Failed to delete account: ${accountToDelete.name}`,
+          'AccountManagement.confirmDelete',
+          error
+        );
+      }
+    }
+  }, [accountToDelete, apiService, loadAccounts]);
+
+  const handleAccountSaved = useCallback(() => {
+    Logger.userAction(
+      'Account saved, refreshing list',
+      {},
+      'AccountManagement.handleAccountSaved'
+    );
+    loadAccounts();
+    setShowNewAccountPanel(false);
+    setShowEditAccountPanel(false);
+    setSelectedAccount(null);
+  }, [loadAccounts]);
+
+  return (
+    <div className="account-management">
+      <div className="account-management__header">
+        <h2>Account Management</h2>
+        <div className="account-management__actions">
+          <TextField
+            placeholder="Search accounts..."
+            value={searchText}
+            onChange={(_, value) => setSearchText(value || '')}
+            iconProps={{ iconName: 'Search' }}
+          />
+          <Button
+            text="New Account"
+            variant="primary"
+            onClick={handleNewAccount}
+            iconProps={{ iconName: 'Add' }}
+          />
+        </div>
+      </div>
+
+      <div className="account-management__toolbar">
+        <Button
+          text="Edit"
+          onClick={handleEditAccount}
+          disabled={!selectedAccount}
+          iconProps={{ iconName: 'Edit' }}
+        />
+        <Button
+          text="Delete"
+          onClick={handleDeleteAccount}
+          disabled={!selectedAccount}
+          iconProps={{ iconName: 'Delete' }}
+        />
+        <Button
+          text="Refresh"
+          onClick={loadAccounts}
+          iconProps={{ iconName: 'Refresh' }}
+        />
+      </div>
+
+      <div className="account-management__list">
+        <DetailsList
+          items={filteredAccounts}
+          columns={columns}
+          onItemInvoked={handleItemInvoked}
+          selectionMode={SelectionMode.single}
+          layoutMode={DetailsListLayoutMode.justified}
+          checkboxVisibility={CheckboxVisibility.onHover}
+        />
+
+        {loading && (
+          <div className="account-management__loading">Loading accounts...</div>
+        )}
+
+        {!loading && filteredAccounts.length === 0 && (
+          <div className="account-management__empty">
+            {searchText
+              ? 'No accounts found matching your search.'
+              : 'No accounts found. Create your first account!'}
+          </div>
+        )}
+      </div>
+
+      {/* New Account Panel */}
+      <Panel
+        isOpen={showNewAccountPanel}
+        onDismiss={() => setShowNewAccountPanel(false)}
+        headerText="New Account"
+      >
+        <AccountForm
+          onSave={handleAccountSaved}
+          onCancel={() => setShowNewAccountPanel(false)}
+        />
+      </Panel>
+
+      {/* Edit Account Panel */}
+      <Panel
+        isOpen={showEditAccountPanel}
+        onDismiss={() => {
+          setShowEditAccountPanel(false);
+          setSelectedAccount(null);
+        }}
+        headerText="Edit Account"
+      >
+        {selectedAccount && (
+          <AccountForm
+            accountId={selectedAccount.accountid}
+            initialData={selectedAccount}
+            onSave={handleAccountSaved}
+            onCancel={() => {
+              setShowEditAccountPanel(false);
+              setSelectedAccount(null);
+            }}
+          />
+        )}
+      </Panel>
+
+      {/* Delete Confirmation Dialog */}
+      <Dialog
+        hidden={!showDeleteDialog}
+        onDismiss={() => setShowDeleteDialog(false)}
+        title="Confirm Delete"
+        content={`Are you sure you want to delete ${accountToDelete?.name}? This action cannot be undone.`}
+        actions={[
+          { text: 'Delete', onClick: confirmDelete, primary: true },
+          { text: 'Cancel', onClick: () => setShowDeleteDialog(false) },
+        ]}
+      />
+    </div>
+  );
+};

package/templates/dynamics-365-starter/src/components/ContactForm.tsx

@@ -1,11 +1,17 @@
 import React, { useState, useCallback, useEffect } from 'react';
-import { 
-  Button, 
-  TextField, 
-  Dropdown, 
-  DatePicker 
+import {
+  Button,
+  TextField,
+  Dropdown,
+  DatePicker,
 } from '@khester/dynamics-ui-components';
 import { useDynamicsApi } from '../providers/DynamicsProvider';
+import { Contact, IContact } from '../models/Contact';
+import {
+  ContactConstants,
+  PreferredContactMethodCode_OptionSet,
+} from '../constants/contact';
+import { Logger } from './Logging/logger';
 import './ContactForm.css';
 
 interface ContactFormData {
@@ -25,120 +31,194 @@ interface ContactFormProps {
 }
 
 const preferredContactOptions = [
-  { key: 1, text: 'Email' },
-  { key: 2, text: 'Phone' },
-  { key: 3, text: 'Mail' }
+  { key: PreferredContactMethodCode_OptionSet.Any, text: 'Any' },
+  { key: PreferredContactMethodCode_OptionSet.Email, text: 'Email' },
+  { key: PreferredContactMethodCode_OptionSet.Phone, text: 'Phone' },
+  { key: PreferredContactMethodCode_OptionSet.Fax, text: 'Fax' },
+  { key: PreferredContactMethodCode_OptionSet.Mail, text: 'Mail' },
 ];
 
 export const ContactForm: React.FC<ContactFormProps> = ({
   contactId,
   initialData,
   onSave,
-  onCancel
+  onCancel,
 }) => {
-  const { createRecord, updateRecord } = useDynamicsApi();
-  
+  const { apiService } = useDynamicsApi();
+
   const [formData, setFormData] = useState<ContactFormData>({
     firstname: '',
     lastname: '',
     emailaddress1: '',
     telephone1: '',
-    preferredcontactmethodcode: 1,
-    birthdate: null
+    preferredcontactmethodcode: PreferredContactMethodCode_OptionSet.Any,
+    birthdate: null,
   });
 
+  useEffect(() => {
+    Logger.userAction(
+      contactId
+        ? 'Contact form opened for edit'
+        : 'Contact form opened for new contact',
+      { contactId },
+      'ContactForm'
+    );
+  }, [contactId]);
+
   const [errors, setErrors] = useState<Partial<ContactFormData>>({});
   const [isSubmitting, setIsSubmitting] = useState(false);
   const [submitError, setSubmitError] = useState<string>('');
 
   useEffect(() => {
     if (initialData) {
+      Logger.debug(
+        'Populating form with initial data',
+        'ContactForm.useEffect',
+        initialData
+      );
+
       setFormData({
         firstname: initialData.firstname || '',
         lastname: initialData.lastname || '',
         emailaddress1: initialData.emailaddress1 || '',
         telephone1: initialData.telephone1 || '',
-        preferredcontactmethodcode: initialData.preferredcontactmethodcode || 1,
-        birthdate: initialData.birthdate || null
+        preferredcontactmethodcode:
+          initialData.preferredcontactmethodcode ||
+          PreferredContactMethodCode_OptionSet.Any,
+        birthdate: initialData.birthdate || null,
       });
     }
   }, [initialData]);
 
   const validateForm = useCallback((): boolean => {
     const newErrors: Partial<ContactFormData> = {};
+    const validationErrors: string[] = [];
 
-    if (!formData.firstname.trim()) {
-      newErrors.firstname = 'First name is required';
+    // At least one name is required (following Contact model validation)
+    if (!formData.firstname.trim() && !formData.lastname.trim()) {
+      const error = 'Either first name or last name is required';
+      newErrors.firstname = error;
+      newErrors.lastname = error;
+      validationErrors.push(error);
     }
 
-    if (!formData.lastname.trim()) {
-      newErrors.lastname = 'Last name is required';
+    if (
+      formData.emailaddress1 &&
+      !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(formData.emailaddress1)
+    ) {
+      const error = 'Please enter a valid email address';
+      newErrors.emailaddress1 = error;
+      validationErrors.push(error);
     }
 
-    if (!formData.emailaddress1.trim()) {
-      newErrors.emailaddress1 = 'Email address is required';
-    } else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(formData.emailaddress1)) {
-      newErrors.emailaddress1 = 'Please enter a valid email address';
+    if (formData.telephone1 && !/^\+?[\d\s\-()]+$/.test(formData.telephone1)) {
+      const error = 'Please enter a valid phone number';
+      newErrors.telephone1 = error;
+      validationErrors.push(error);
     }
 
-    if (formData.telephone1 && !/^\+?[\d\s\-\(\)]+$/.test(formData.telephone1)) {
-      newErrors.telephone1 = 'Please enter a valid phone number';
+    if (validationErrors.length > 0) {
+      Logger.validation(
+        'Contact',
+        validationErrors,
+        'ContactForm.validateForm'
+      );
     }
 
     setErrors(newErrors);
     return Object.keys(newErrors).length === 0;
   }, [formData]);
 
-  const handleInputChange = useCallback((field: keyof ContactFormData, value: any) => {
-    setFormData(prev => ({ ...prev, [field]: value }));
-    
-    // Clear error for this field when user starts typing
-    if (errors[field]) {
-      setErrors(prev => ({ ...prev, [field]: undefined }));
-    }
-    setSubmitError('');
-  }, [errors]);
+  const handleInputChange = useCallback(
+    (field: keyof ContactFormData, value: any) => {
+      setFormData((prev) => ({ ...prev, [field]: value }));
+
+      // Clear error for this field when user starts typing
+      if (errors[field]) {
+        setErrors((prev) => ({ ...prev, [field]: undefined }));
+      }
+      setSubmitError('');
+    },
+    [errors]
+  );
 
   const handleSubmit = useCallback(async () => {
     if (!validateForm()) {
       return;
     }
 
+    if (!apiService) {
+      setSubmitError('API service not available');
+      Logger.error('API service not available', 'ContactForm.handleSubmit');
+      return;
+    }
+
     setIsSubmitting(true);
     setSubmitError('');
 
     try {
-      const contactData = {
-        firstname: formData.firstname.trim(),
-        lastname: formData.lastname.trim(),
-        emailaddress1: formData.emailaddress1.trim(),
-        telephone1: formData.telephone1.trim() || null,
-        preferredcontactmethodcode: formData.preferredcontactmethodcode,
-        birthdate: formData.birthdate ? formData.birthdate.toISOString() : null
+      Logger.userAction(
+        contactId ? 'Contact update submitted' : 'Contact creation submitted',
+        { contactId, formData },
+        'ContactForm.handleSubmit'
+      );
+
+      const contactData: IContact = {
+        [ContactConstants.FirstName]: formData.firstname.trim() || undefined,
+        [ContactConstants.LastName]: formData.lastname.trim() || undefined,
+        [ContactConstants.EMailAddress1]:
+          formData.emailaddress1.trim() || undefined,
+        [ContactConstants.BusinessPhone]:
+          formData.telephone1.trim() || undefined,
+        [ContactConstants.PreferredContactMethodCode]:
+          formData.preferredcontactmethodcode,
+        [ContactConstants.BirthDate]: formData.birthdate
+          ? formData.birthdate.toISOString().split('T')[0]
+          : undefined,
       };
 
+      // Remove undefined values
+      Object.keys(contactData).forEach((key) => {
+        if (contactData[key as keyof IContact] === undefined) {
+          delete contactData[key as keyof IContact];
+        }
+      });
+
+      const contact = new Contact(contactData);
+
       if (contactId) {
-        await updateRecord('contacts', contactId, contactData);
+        contact.contactid = contactId;
+        await Contact.update(apiService, contact);
+        Logger.log(
+          `Successfully updated contact: ${contact.firstname} ${contact.lastname}`,
+          'ContactForm.handleSubmit'
+        );
       } else {
-        await createRecord('contacts', contactData);
+        await Contact.create(apiService, contact);
+        Logger.log(
+          `Successfully created contact: ${contact.firstname} ${contact.lastname}`,
+          'ContactForm.handleSubmit'
+        );
       }
 
       if (onSave) {
         onSave();
       }
     } catch (error) {
-      setSubmitError(error instanceof Error ? error.message : 'An error occurred while saving');
+      const errorMessage =
+        error instanceof Error
+          ? error.message
+          : 'An error occurred while saving';
+      setSubmitError(errorMessage);
+      Logger.error(
+        `Failed to ${contactId ? 'update' : 'create'} contact`,
+        'ContactForm.handleSubmit',
+        error
+      );
     } finally {
       setIsSubmitting(false);
     }
-  }, [
-    formData,
-    contactId,
-    validateForm,
-    createRecord,
-    updateRecord,
-    onSave
-  ]);
+  }, [formData, contactId, validateForm, apiService, onSave]);
 
   const handleCancel = useCallback(() => {
     if (onCancel) {
@@ -161,7 +241,9 @@ export const ContactForm: React.FC<ContactFormProps> = ({
               label="First Name"
               required
               value={formData.firstname}
-              onChange={(_, value) => handleInputChange('firstname', value || '')}
+              onChange={(_, value) =>
+                handleInputChange('firstname', value || '')
+              }
               errorMessage={errors.firstname}
               disabled={isSubmitting}
             />
@@ -171,7 +253,9 @@ export const ContactForm: React.FC<ContactFormProps> = ({
               label="Last Name"
               required
               value={formData.lastname}
-              onChange={(_, value) => handleInputChange('lastname', value || '')}
+              onChange={(_, value) =>
+                handleInputChange('lastname', value || '')
+              }
               errorMessage={errors.lastname}
               disabled={isSubmitting}
             />
@@ -185,7 +269,9 @@ export const ContactForm: React.FC<ContactFormProps> = ({
               type="email"
               required
               value={formData.emailaddress1}
-              onChange={(_, value) => handleInputChange('emailaddress1', value || '')}
+              onChange={(_, value) =>
+                handleInputChange('emailaddress1', value || '')
+              }
               errorMessage={errors.emailaddress1}
               disabled={isSubmitting}
             />
@@ -195,7 +281,9 @@ export const ContactForm: React.FC<ContactFormProps> = ({
               label="Phone Number"
               type="tel"
               value={formData.telephone1}
-              onChange={(_, value) => handleInputChange('telephone1', value || '')}
+              onChange={(_, value) =>
+                handleInputChange('telephone1', value || '')
+              }
               errorMessage={errors.telephone1}
               disabled={isSubmitting}
             />
@@ -208,7 +296,9 @@ export const ContactForm: React.FC<ContactFormProps> = ({
               label="Preferred Contact Method"
               options={preferredContactOptions}
               selectedKey={formData.preferredcontactmethodcode}
-              onChange={(_, option) => handleInputChange('preferredcontactmethodcode', option?.key)}
+              onChange={(_, option) =>
+                handleInputChange('preferredcontactmethodcode', option?.key)
+              }
               disabled={isSubmitting}
             />
           </div>
@@ -230,12 +320,8 @@ export const ContactForm: React.FC<ContactFormProps> = ({
           onClick={handleSubmit}
           disabled={isSubmitting}
         />
-        <Button
-          text="Cancel"
-          onClick={handleCancel}
-          disabled={isSubmitting}
-        />
+        <Button text="Cancel" onClick={handleCancel} disabled={isSubmitting} />
       </div>
     </div>
   );
-};
+};