@khester/create-dynamics-app 2.1.0 → 2.2.0

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

@@ -1,370 +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 { 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/react-custom-page/src/components/ContactForm.css

@@ -1,48 +0,0 @@
-.contact-form {
-  padding: 16px 0;
-}
-
-.contact-form__content {
-  margin-bottom: 24px;
-}
-
-.contact-form__row {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: 16px;
-  margin-bottom: 16px;
-}
-
-.contact-form__field {
-  display: flex;
-  flex-direction: column;
-}
-
-.contact-form__actions {
-  display: flex;
-  gap: 12px;
-  justify-content: flex-start;
-  padding-top: 16px;
-  border-top: 1px solid #edebe9;
-}
-
-.contact-form__error {
-  padding: 12px 16px;
-  margin-bottom: 16px;
-  background-color: #fef7f1;
-  border: 1px solid #d13438;
-  border-radius: 4px;
-  color: #d13438;
-  font-weight: 500;
-}
-
-@media (max-width: 768px) {
-  .contact-form__row {
-    grid-template-columns: 1fr;
-    gap: 12px;
-  }
-  
-  .contact-form__actions {
-    flex-direction: column;
-  }
-}