@khester/create-dynamics-app 2.1.0 → 2.2.0

package/templates/react-custom-page/src/components/AccountForm.css

@@ -1,71 +0,0 @@
-.account-form {
-  padding: 16px 0;
-}
-
-.account-form__content {
-  margin-bottom: 24px;
-}
-
-.account-form__row {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: 16px;
-  margin-bottom: 16px;
-}
-
-.account-form__field {
-  display: flex;
-  flex-direction: column;
-}
-
-.account-form__field--full {
-  grid-column: 1 / -1;
-}
-
-.account-form__section {
-  margin: 24px 0;
-  padding: 16px;
-  border: 1px solid #edebe9;
-  border-radius: 4px;
-  background-color: #faf9f8;
-}
-
-.account-form__section h3 {
-  margin: 0 0 16px 0;
-  font-size: 16px;
-  font-weight: 600;
-  color: #323130;
-}
-
-.account-form__actions {
-  display: flex;
-  gap: 12px;
-  justify-content: flex-start;
-  padding-top: 16px;
-  border-top: 1px solid #edebe9;
-}
-
-.account-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) {
-  .account-form__row {
-    grid-template-columns: 1fr;
-    gap: 12px;
-  }
-  
-  .account-form__actions {
-    flex-direction: column;
-  }
-  
-  .account-form__section {
-    padding: 12px;
-  }
-}

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

@@ -1,541 +0,0 @@
-import React, { useState, useCallback, useEffect } from 'react';
-import { Button, TextField, Dropdown } from '@khester/dynamics-ui-components';
-import { useDynamicsApi } from '../providers/DynamicsProvider';
-import { Account, IAccount } from '../models/Account';
-import {
-  AccountConstants,
-  PreferredContactMethodCode_OptionSet,
-  IndustryCode_OptionSet,
-} from '../constants/account';
-import { Logger } from './Logging/logger';
-import './AccountForm.css';
-
-interface AccountFormData {
-  name: string;
-  accountnumber: string;
-  emailaddress1: string;
-  telephone1: string;
-  websiteurl: string;
-  description: string;
-  revenue: number | null;
-  numberofemployees: number | null;
-  industrycode: number;
-  preferredcontactmethodcode: number;
-  address1_line1: string;
-  address1_city: string;
-  address1_stateorprovince: string;
-  address1_postalcode: string;
-  address1_country: string;
-}
-
-interface AccountFormProps {
-  accountId?: string;
-  initialData?: Partial<AccountFormData>;
-  onSave?: () => void;
-  onCancel?: () => void;
-}
-
-const preferredContactOptions = [
-  { 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' },
-];
-
-const industryOptions = [
-  { key: 0, text: 'Not Specified' },
-  { key: IndustryCode_OptionSet.Accounting, text: 'Accounting' },
-  { key: IndustryCode_OptionSet.BusinessServices, text: 'Business Services' },
-  { key: IndustryCode_OptionSet.Consulting, text: 'Consulting' },
-  { key: IndustryCode_OptionSet.Financial, text: 'Financial' },
-  { key: IndustryCode_OptionSet.Insurance, text: 'Insurance' },
-  { key: IndustryCode_OptionSet.LegalServices, text: 'Legal Services' },
-  { key: IndustryCode_OptionSet.DurableManufacturing, text: 'Manufacturing' },
-  { key: IndustryCode_OptionSet.NonDurableMerchandiseRetail, text: 'Retail' },
-  { key: IndustryCode_OptionSet.Transportation, text: 'Transportation' },
-  { key: IndustryCode_OptionSet.Wholesale, text: 'Wholesale' },
-];
-
-export const AccountForm: React.FC<AccountFormProps> = ({
-  accountId,
-  initialData,
-  onSave,
-  onCancel,
-}) => {
-  const { apiService } = useDynamicsApi();
-
-  const [formData, setFormData] = useState<AccountFormData>({
-    name: '',
-    accountnumber: '',
-    emailaddress1: '',
-    telephone1: '',
-    websiteurl: '',
-    description: '',
-    revenue: null,
-    numberofemployees: null,
-    industrycode: 0,
-    preferredcontactmethodcode: PreferredContactMethodCode_OptionSet.Any,
-    address1_line1: '',
-    address1_city: '',
-    address1_stateorprovince: '',
-    address1_postalcode: '',
-    address1_country: '',
-  });
-
-  useEffect(() => {
-    Logger.userAction(
-      accountId
-        ? 'Account form opened for edit'
-        : 'Account form opened for new account',
-      { accountId },
-      'AccountForm'
-    );
-  }, [accountId]);
-
-  const [errors, setErrors] = useState<
-    Partial<Record<keyof AccountFormData, string>>
-  >({});
-  const [isSubmitting, setIsSubmitting] = useState(false);
-  const [submitError, setSubmitError] = useState<string>('');
-
-  useEffect(() => {
-    if (initialData) {
-      Logger.debug(
-        'Populating form with initial data',
-        'AccountForm.useEffect',
-        initialData
-      );
-
-      setFormData({
-        name: initialData.name || '',
-        accountnumber: initialData.accountnumber || '',
-        emailaddress1: initialData.emailaddress1 || '',
-        telephone1: initialData.telephone1 || '',
-        websiteurl: initialData.websiteurl || '',
-        description: initialData.description || '',
-        revenue: initialData.revenue ?? null,
-        numberofemployees: initialData.numberofemployees ?? null,
-        industrycode: initialData.industrycode || 0,
-        preferredcontactmethodcode:
-          initialData.preferredcontactmethodcode ||
-          PreferredContactMethodCode_OptionSet.Any,
-        address1_line1: initialData.address1_line1 || '',
-        address1_city: initialData.address1_city || '',
-        address1_stateorprovince: initialData.address1_stateorprovince || '',
-        address1_postalcode: initialData.address1_postalcode || '',
-        address1_country: initialData.address1_country || '',
-      });
-    }
-  }, [initialData]);
-
-  const validateForm = useCallback((): boolean => {
-    const newErrors: Partial<Record<keyof AccountFormData, string>> = {};
-    const validationErrors: string[] = [];
-
-    // Account name is required
-    if (!formData.name.trim()) {
-      const error = 'Account name is required';
-      newErrors.name = error;
-      validationErrors.push(error);
-    } else if (formData.name.length > 160) {
-      const error = 'Account name cannot exceed 160 characters';
-      newErrors.name = error;
-      validationErrors.push(error);
-    }
-
-    // Account number validation
-    if (formData.accountnumber && formData.accountnumber.length > 20) {
-      const error = 'Account number cannot exceed 20 characters';
-      newErrors.accountnumber = error;
-      validationErrors.push(error);
-    }
-
-    // Email validation
-    if (
-      formData.emailaddress1 &&
-      !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(formData.emailaddress1)
-    ) {
-      const error = 'Please enter a valid email address';
-      newErrors.emailaddress1 = error;
-      validationErrors.push(error);
-    }
-
-    // Phone validation
-    if (formData.telephone1 && !/^\+?[\d\s\-()]+$/.test(formData.telephone1)) {
-      const error = 'Please enter a valid phone number';
-      newErrors.telephone1 = error;
-      validationErrors.push(error);
-    }
-
-    // Website URL validation
-    if (formData.websiteurl && formData.websiteurl.trim()) {
-      try {
-        new URL(formData.websiteurl);
-      } catch {
-        const error = 'Please enter a valid website URL';
-        newErrors.websiteurl = error;
-        validationErrors.push(error);
-      }
-    }
-
-    // Revenue validation
-    if (formData.revenue !== null && formData.revenue < 0) {
-      const error = 'Revenue cannot be negative';
-      newErrors.revenue = error;
-      validationErrors.push(error);
-    }
-
-    // Number of employees validation
-    if (formData.numberofemployees !== null && formData.numberofemployees < 0) {
-      const error = 'Number of employees cannot be negative';
-      newErrors.numberofemployees = error;
-      validationErrors.push(error);
-    }
-
-    if (validationErrors.length > 0) {
-      Logger.validation(
-        'Account',
-        validationErrors,
-        'AccountForm.validateForm'
-      );
-    }
-
-    setErrors(newErrors);
-    return Object.keys(newErrors).length === 0;
-  }, [formData]);
-
-  const handleInputChange = useCallback(
-    (field: keyof AccountFormData, 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', 'AccountForm.handleSubmit');
-      return;
-    }
-
-    setIsSubmitting(true);
-    setSubmitError('');
-
-    try {
-      Logger.userAction(
-        accountId ? 'Account update submitted' : 'Account creation submitted',
-        { accountId, formData },
-        'AccountForm.handleSubmit'
-      );
-
-      const accountData: IAccount = {
-        [AccountConstants.PrimaryName]: formData.name.trim(),
-        [AccountConstants.AccountNumber]:
-          formData.accountnumber.trim() || undefined,
-        [AccountConstants.EMailAddress1]:
-          formData.emailaddress1.trim() || undefined,
-        [AccountConstants.Telephone1]: formData.telephone1.trim() || undefined,
-        [AccountConstants.WebSiteURL]: formData.websiteurl.trim() || undefined,
-        [AccountConstants.Description]:
-          formData.description.trim() || undefined,
-        [AccountConstants.Revenue]: formData.revenue,
-        [AccountConstants.NumberOfEmployees]: formData.numberofemployees,
-        [AccountConstants.IndustryCode]:
-          formData.industrycode > 0 ? formData.industrycode : undefined,
-        [AccountConstants.PreferredContactMethodCode]:
-          formData.preferredcontactmethodcode,
-        [AccountConstants.Address1_Line1]:
-          formData.address1_line1.trim() || undefined,
-        [AccountConstants.Address1_City]:
-          formData.address1_city.trim() || undefined,
-        [AccountConstants.Address1_StateOrProvince]:
-          formData.address1_stateorprovince.trim() || undefined,
-        [AccountConstants.Address1_PostalCode]:
-          formData.address1_postalcode.trim() || undefined,
-        [AccountConstants.Address1_Country]:
-          formData.address1_country.trim() || undefined,
-        name: '',
-      };
-
-      // Remove undefined values
-      Object.keys(accountData).forEach((key) => {
-        if (accountData[key as keyof IAccount] === undefined) {
-          delete accountData[key as keyof IAccount];
-        }
-      });
-
-      const account = new Account(accountData);
-
-      if (accountId) {
-        account.accountid = accountId;
-        await Account.update(apiService, account);
-        Logger.log(
-          `Successfully updated account: ${account.name}`,
-          'AccountForm.handleSubmit'
-        );
-      } else {
-        await Account.create(apiService, account);
-        Logger.log(
-          `Successfully created account: ${account.name}`,
-          'AccountForm.handleSubmit'
-        );
-      }
-
-      if (onSave) {
-        onSave();
-      }
-    } catch (error) {
-      const errorMessage =
-        error instanceof Error
-          ? error.message
-          : 'An error occurred while saving';
-      setSubmitError(errorMessage);
-      Logger.error(
-        `Failed to ${accountId ? 'update' : 'create'} account`,
-        'AccountForm.handleSubmit',
-        error
-      );
-    } finally {
-      setIsSubmitting(false);
-    }
-  }, [formData, accountId, validateForm, apiService, onSave]);
-
-  const handleCancel = useCallback(() => {
-    if (onCancel) {
-      onCancel();
-    }
-  }, [onCancel]);
-
-  return (
-    <div className="account-form">
-      {submitError && (
-        <div className="account-form__error" role="alert">
-          {submitError}
-        </div>
-      )}
-
-      <div className="account-form__content">
-        <div className="account-form__row">
-          <div className="account-form__field">
-            <TextField
-              label="Account Name"
-              required
-              value={formData.name}
-              onChange={(_, value) => handleInputChange('name', value || '')}
-              errorMessage={errors.name}
-              disabled={isSubmitting}
-            />
-          </div>
-          <div className="account-form__field">
-            <TextField
-              label="Account Number"
-              value={formData.accountnumber}
-              onChange={(_, value) =>
-                handleInputChange('accountnumber', value || '')
-              }
-              errorMessage={errors.accountnumber}
-              disabled={isSubmitting}
-            />
-          </div>
-        </div>
-
-        <div className="account-form__row">
-          <div className="account-form__field">
-            <TextField
-              label="Email Address"
-              type="email"
-              value={formData.emailaddress1}
-              onChange={(_, value) =>
-                handleInputChange('emailaddress1', value || '')
-              }
-              errorMessage={errors.emailaddress1}
-              disabled={isSubmitting}
-            />
-          </div>
-          <div className="account-form__field">
-            <TextField
-              label="Phone Number"
-              type="tel"
-              value={formData.telephone1}
-              onChange={(_, value) =>
-                handleInputChange('telephone1', value || '')
-              }
-              errorMessage={errors.telephone1}
-              disabled={isSubmitting}
-            />
-          </div>
-        </div>
-
-        <div className="account-form__row">
-          <div className="account-form__field">
-            <TextField
-              label="Website URL"
-              type="url"
-              value={formData.websiteurl}
-              onChange={(_, value) =>
-                handleInputChange('websiteurl', value || '')
-              }
-              errorMessage={errors.websiteurl}
-              disabled={isSubmitting}
-            />
-          </div>
-          <div className="account-form__field">
-            <Dropdown
-              label="Industry"
-              options={industryOptions}
-              selectedKey={formData.industrycode}
-              onChange={(_, option) =>
-                handleInputChange('industrycode', option?.key)
-              }
-              disabled={isSubmitting}
-            />
-          </div>
-        </div>
-
-        <div className="account-form__row">
-          <div className="account-form__field">
-            <TextField
-              label="Revenue"
-              type="number"
-              value={formData.revenue?.toString() || ''}
-              onChange={(_, value) =>
-                handleInputChange(
-                  'revenue',
-                  value ? parseFloat(value) || null : null
-                )
-              }
-              errorMessage={errors.revenue}
-              disabled={isSubmitting}
-            />
-          </div>
-          <div className="account-form__field">
-            <TextField
-              label="Number of Employees"
-              type="number"
-              value={formData.numberofemployees?.toString() || ''}
-              onChange={(_, value) =>
-                handleInputChange(
-                  'numberofemployees',
-                  value ? parseInt(value) || null : null
-                )
-              }
-              errorMessage={errors.numberofemployees}
-              disabled={isSubmitting}
-            />
-          </div>
-        </div>
-
-        <div className="account-form__row">
-          <div className="account-form__field account-form__field--full">
-            <TextField
-              label="Description"
-              multiline
-              rows={3}
-              value={formData.description}
-              onChange={(_, value) =>
-                handleInputChange('description', value || '')
-              }
-              disabled={isSubmitting}
-            />
-          </div>
-        </div>
-
-        <div className="account-form__section">
-          <h3>Address Information</h3>
-          <div className="account-form__row">
-            <div className="account-form__field account-form__field--full">
-              <TextField
-                label="Street Address"
-                value={formData.address1_line1}
-                onChange={(_, value) =>
-                  handleInputChange('address1_line1', value || '')
-                }
-                disabled={isSubmitting}
-              />
-            </div>
-          </div>
-
-          <div className="account-form__row">
-            <div className="account-form__field">
-              <TextField
-                label="City"
-                value={formData.address1_city}
-                onChange={(_, value) =>
-                  handleInputChange('address1_city', value || '')
-                }
-                disabled={isSubmitting}
-              />
-            </div>
-            <div className="account-form__field">
-              <TextField
-                label="State/Province"
-                value={formData.address1_stateorprovince}
-                onChange={(_, value) =>
-                  handleInputChange('address1_stateorprovince', value || '')
-                }
-                disabled={isSubmitting}
-              />
-            </div>
-          </div>
-
-          <div className="account-form__row">
-            <div className="account-form__field">
-              <TextField
-                label="Postal Code"
-                value={formData.address1_postalcode}
-                onChange={(_, value) =>
-                  handleInputChange('address1_postalcode', value || '')
-                }
-                disabled={isSubmitting}
-              />
-            </div>
-            <div className="account-form__field">
-              <TextField
-                label="Country"
-                value={formData.address1_country}
-                onChange={(_, value) =>
-                  handleInputChange('address1_country', value || '')
-                }
-                disabled={isSubmitting}
-              />
-            </div>
-          </div>
-        </div>
-
-        <div className="account-form__row">
-          <div className="account-form__field">
-            <Dropdown
-              label="Preferred Contact Method"
-              options={preferredContactOptions}
-              selectedKey={formData.preferredcontactmethodcode}
-              onChange={(_, option) =>
-                handleInputChange('preferredcontactmethodcode', option?.key)
-              }
-              disabled={isSubmitting}
-            />
-          </div>
-        </div>
-      </div>
-
-      <div className="account-form__actions">
-        <Button
-          text={accountId ? 'Update' : 'Save'}
-          onClick={handleSubmit}
-          disabled={isSubmitting}
-        />
-        <Button text="Cancel" onClick={handleCancel} disabled={isSubmitting} />
-      </div>
-    </div>
-  );
-};

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

@@ -1,86 +0,0 @@
-.account-management {
-  padding: 16px;
-}
-
-.account-management__header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 16px;
-  flex-wrap: wrap;
-  gap: 16px;
-}
-
-.account-management__header h2 {
-  margin: 0;
-  font-size: 20px;
-  font-weight: 600;
-  color: #323130;
-}
-
-.account-management__actions {
-  display: flex;
-  gap: 12px;
-  align-items: center;
-  flex-wrap: wrap;
-}
-
-.account-management__toolbar {
-  display: flex;
-  gap: 8px;
-  margin-bottom: 16px;
-  padding: 8px 0;
-  border-bottom: 1px solid #edebe9;
-}
-
-.account-management__list {
-  min-height: 400px;
-  border: 1px solid #edebe9;
-  border-radius: 4px;
-}
-
-.account-management__loading {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  height: 200px;
-  color: #605e5c;
-  font-style: italic;
-}
-
-.account-management__empty {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  height: 200px;
-  color: #605e5c;
-  font-style: italic;
-  text-align: center;
-  padding: 16px;
-}
-
-.account-management__dialog-actions {
-  display: flex;
-  gap: 12px;
-  justify-content: flex-end;
-  padding-top: 16px;
-}
-
-@media (max-width: 768px) {
-  .account-management {
-    padding: 8px;
-  }
-  
-  .account-management__header {
-    flex-direction: column;
-    align-items: stretch;
-  }
-  
-  .account-management__actions {
-    justify-content: stretch;
-  }
-  
-  .account-management__toolbar {
-    flex-wrap: wrap;
-  }
-}