@khester/create-dynamics-app 2.1.0 → 2.2.0

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

@@ -1,327 +0,0 @@
-import React, { useState, useCallback, useEffect } from 'react';
-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 {
-  firstname: string;
-  lastname: string;
-  emailaddress1: string;
-  telephone1: string;
-  preferredcontactmethodcode: number;
-  birthdate: Date | null;
-}
-
-interface ContactFormProps {
-  contactId?: string;
-  initialData?: Partial<ContactFormData>;
-  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' },
-];
-
-export const ContactForm: React.FC<ContactFormProps> = ({
-  contactId,
-  initialData,
-  onSave,
-  onCancel,
-}) => {
-  const { apiService } = useDynamicsApi();
-
-  const [formData, setFormData] = useState<ContactFormData>({
-    firstname: '',
-    lastname: '',
-    emailaddress1: '',
-    telephone1: '',
-    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 ||
-          PreferredContactMethodCode_OptionSet.Any,
-        birthdate: initialData.birthdate || null,
-      });
-    }
-  }, [initialData]);
-
-  const validateForm = useCallback((): boolean => {
-    const newErrors: Partial<ContactFormData> = {};
-    const validationErrors: string[] = [];
-
-    // 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.emailaddress1 &&
-      !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(formData.emailaddress1)
-    ) {
-      const error = 'Please enter a valid email address';
-      newErrors.emailaddress1 = error;
-      validationErrors.push(error);
-    }
-
-    if (formData.telephone1 && !/^\+?[\d\s\-()]+$/.test(formData.telephone1)) {
-      const error = 'Please enter a valid phone number';
-      newErrors.telephone1 = error;
-      validationErrors.push(error);
-    }
-
-    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 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 {
-      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) {
-        contact.contactid = contactId;
-        await Contact.update(apiService, contact);
-        Logger.log(
-          `Successfully updated contact: ${contact.firstname} ${contact.lastname}`,
-          'ContactForm.handleSubmit'
-        );
-      } else {
-        await Contact.create(apiService, contact);
-        Logger.log(
-          `Successfully created contact: ${contact.firstname} ${contact.lastname}`,
-          'ContactForm.handleSubmit'
-        );
-      }
-
-      if (onSave) {
-        onSave();
-      }
-    } catch (error) {
-      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, apiService, onSave]);
-
-  const handleCancel = useCallback(() => {
-    if (onCancel) {
-      onCancel();
-    }
-  }, [onCancel]);
-
-  return (
-    <div className="contact-form">
-      {submitError && (
-        <div className="contact-form__error" role="alert">
-          {submitError}
-        </div>
-      )}
-
-      <div className="contact-form__content">
-        <div className="contact-form__row">
-          <div className="contact-form__field">
-            <TextField
-              label="First Name"
-              required
-              value={formData.firstname}
-              onChange={(_, value) =>
-                handleInputChange('firstname', value || '')
-              }
-              errorMessage={errors.firstname}
-              disabled={isSubmitting}
-            />
-          </div>
-          <div className="contact-form__field">
-            <TextField
-              label="Last Name"
-              required
-              value={formData.lastname}
-              onChange={(_, value) =>
-                handleInputChange('lastname', value || '')
-              }
-              errorMessage={errors.lastname}
-              disabled={isSubmitting}
-            />
-          </div>
-        </div>
-
-        <div className="contact-form__row">
-          <div className="contact-form__field">
-            <TextField
-              label="Email Address"
-              type="email"
-              required
-              value={formData.emailaddress1}
-              onChange={(_, value) =>
-                handleInputChange('emailaddress1', value || '')
-              }
-              errorMessage={errors.emailaddress1}
-              disabled={isSubmitting}
-            />
-          </div>
-          <div className="contact-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="contact-form__row">
-          <div className="contact-form__field">
-            <Dropdown
-              label="Preferred Contact Method"
-              options={preferredContactOptions}
-              selectedKey={formData.preferredcontactmethodcode}
-              onChange={(_, option) =>
-                handleInputChange('preferredcontactmethodcode', option?.key)
-              }
-              disabled={isSubmitting}
-            />
-          </div>
-          <div className="contact-form__field">
-            <DatePicker
-              label="Birth Date"
-              value={formData.birthdate ?? undefined}
-              onSelectDate={(date) => handleInputChange('birthdate', date)}
-              disabled={isSubmitting}
-              placeholder="Select date..."
-            />
-          </div>
-        </div>
-      </div>
-
-      <div className="contact-form__actions">
-        <Button
-          text={contactId ? 'Update' : 'Save'}
-          onClick={handleSubmit}
-          disabled={isSubmitting}
-        />
-        <Button text="Cancel" onClick={handleCancel} disabled={isSubmitting} />
-      </div>
-    </div>
-  );
-};

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

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