@khester/create-dynamics-app 1.0.8 → 1.1.0

package/templates/dynamics-365-starter/tools/entity-generator/templates/form.template.css

@@ -0,0 +1,283 @@
+/* {{displayName}} Form Component Styles */
+/* Generated by Entity Generator */
+/* Replace 'sample-entity' with your actual entity name during template processing */
+
+.sample-entity-form {
+  padding: 24px 0;
+  max-width: 600px;
+}
+
+.sample-entity-form-section {
+  margin-bottom: 24px;
+}
+
+.sample-entity-form-section-title {
+  font-size: 16px;
+  font-weight: 600;
+  color: #323130;
+  margin: 0 0 16px 0;
+  border-bottom: 1px solid #edebe9;
+  padding-bottom: 8px;
+}
+
+.sample-entity-form-field {
+  margin-bottom: 16px;
+}
+
+.sample-entity-form-errors {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.sample-entity-form-errors li {
+  margin: 4px 0;
+}
+
+/* Field-specific styling */
+.sample-entity-form .ms-TextField {
+  width: 100%;
+}
+
+.sample-entity-form .ms-TextField-fieldGroup {
+  border-radius: 2px;
+}
+
+.sample-entity-form .ms-TextField-field {
+  padding: 8px 12px;
+  font-size: 14px;
+}
+
+.sample-entity-form .ms-TextField-field:focus {
+  border-color: #0078d4;
+  box-shadow: 0 0 0 1px #0078d4;
+}
+
+/* Dropdown styling */
+.sample-entity-form .ms-Dropdown {
+  width: 100%;
+}
+
+.sample-entity-form .ms-Dropdown-title {
+  padding: 8px 12px;
+  font-size: 14px;
+  border-radius: 2px;
+}
+
+.sample-entity-form .ms-Dropdown-title:focus {
+  border-color: #0078d4;
+  box-shadow: 0 0 0 1px #0078d4;
+}
+
+/* DatePicker styling */
+.sample-entity-form .ms-DatePicker {
+  width: 100%;
+}
+
+.sample-entity-form .ms-DatePicker-input {
+  width: 100%;
+}
+
+.sample-entity-form .ms-DatePicker-input .ms-TextField-field {
+  padding: 8px 12px;
+  font-size: 14px;
+}
+
+/* Checkbox styling */
+.sample-entity-form .ms-Checkbox {
+  margin-top: 8px;
+}
+
+.sample-entity-form .ms-Checkbox-label {
+  font-size: 14px;
+  color: #323130;
+}
+
+.sample-entity-form .ms-Checkbox-checkbox {
+  border-radius: 2px;
+}
+
+.sample-entity-form .ms-Checkbox-checkbox:checked {
+  background-color: #0078d4;
+  border-color: #0078d4;
+}
+
+/* Button styling */
+.sample-entity-form .ms-Button {
+  min-width: 80px;
+  height: 32px;
+  border-radius: 2px;
+  font-size: 14px;
+}
+
+.sample-entity-form .ms-Button--primary {
+  background-color: #0078d4;
+  border-color: #0078d4;
+}
+
+.sample-entity-form .ms-Button--primary:hover {
+  background-color: #106ebe;
+  border-color: #106ebe;
+}
+
+.sample-entity-form .ms-Button--default {
+  background-color: #ffffff;
+  border-color: #8a8886;
+  color: #323130;
+}
+
+.sample-entity-form .ms-Button--default:hover {
+  background-color: #f3f2f1;
+  border-color: #8a8886;
+}
+
+/* Required field indicators */
+.sample-entity-form .ms-Label .ms-Label-required {
+  color: #d13438;
+}
+
+/* Error states */
+.sample-entity-form .ms-TextField--hasError .ms-TextField-fieldGroup {
+  border-color: #d13438;
+}
+
+.sample-entity-form .ms-TextField--hasError .ms-TextField-field:focus {
+  border-color: #d13438;
+  box-shadow: 0 0 0 1px #d13438;
+}
+
+.sample-entity-form .ms-Dropdown--hasError .ms-Dropdown-title {
+  border-color: #d13438;
+}
+
+/* Disabled states */
+.sample-entity-form .ms-TextField--disabled .ms-TextField-field {
+  background-color: #f3f2f1;
+  color: #a19f9d;
+  cursor: not-allowed;
+}
+
+.sample-entity-form .ms-Dropdown--disabled .ms-Dropdown-title {
+  background-color: #f3f2f1;
+  color: #a19f9d;
+  cursor: not-allowed;
+}
+
+.sample-entity-form .ms-Checkbox--disabled .ms-Checkbox-label {
+  color: #a19f9d;
+  cursor: not-allowed;
+}
+
+.sample-entity-form .ms-Button:disabled {
+  background-color: #f3f2f1;
+  border-color: #c8c6c4;
+  color: #a19f9d;
+  cursor: not-allowed;
+}
+
+/* Responsive design */
+@media (max-width: 768px) {
+  .sample-entity-form {
+    padding: 16px 0;
+    max-width: 100%;
+  }
+  
+  .sample-entity-form-section-title {
+    font-size: 14px;
+    margin-bottom: 12px;
+  }
+  
+  .sample-entity-form-field {
+    margin-bottom: 12px;
+  }
+  
+  .sample-entity-form .ms-TextField-field,
+  .sample-entity-form .ms-Dropdown-title,
+  .sample-entity-form .ms-DatePicker-input .ms-TextField-field {
+    padding: 6px 10px;
+    font-size: 13px;
+  }
+}
+
+/* Focus management */
+.sample-entity-form .ms-TextField-field:focus,
+.sample-entity-form .ms-Dropdown-title:focus,
+.sample-entity-form .ms-DatePicker-input .ms-TextField-field:focus {
+  outline: none;
+}
+
+/* High contrast mode support */
+@media (prefers-contrast: high) {
+  .sample-entity-form .ms-TextField-fieldGroup,
+  .sample-entity-form .ms-Dropdown-title {
+    border-width: 2px;
+  }
+  
+  .sample-entity-form .ms-Button {
+    border-width: 2px;
+  }
+}
+
+/* Print styles */
+@media print {
+  .sample-entity-form .ms-Button {
+    display: none;
+  }
+  
+  .sample-entity-form {
+    padding: 0;
+  }
+  
+  .sample-entity-form-section-title {
+    font-size: 14px;
+    font-weight: bold;
+  }
+}
+
+/* Animation for section transitions */
+.sample-entity-form-section {
+  transition: opacity 0.2s ease-in-out;
+}
+
+.sample-entity-form-section.loading {
+  opacity: 0.6;
+}
+
+/* Custom styling for money fields */
+.sample-entity-form .money-field .ms-TextField-prefix {
+  background-color: #f3f2f1;
+  border-right: 1px solid #edebe9;
+  color: #605e5c;
+  font-weight: 600;
+}
+
+/* Custom styling for multiline text fields */
+.sample-entity-form .ms-TextField--multiline .ms-TextField-field {
+  min-height: 80px;
+  resize: vertical;
+}
+
+/* Loading state for buttons */
+.sample-entity-form .ms-Button.loading {
+  position: relative;
+  color: transparent;
+}
+
+.sample-entity-form .ms-Button.loading::after {
+  content: '';
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 16px;
+  height: 16px;
+  margin: -8px 0 0 -8px;
+  border: 2px solid #ffffff;
+  border-radius: 50%;
+  border-top-color: transparent;
+  animation: button-loading-spin 1s linear infinite;
+}
+
+@keyframes button-loading-spin {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}

package/templates/dynamics-365-starter/tools/entity-generator/templates/form.template.tsx

@@ -0,0 +1,275 @@
+import React, { useState, useEffect } from 'react';
+import {
+  TextField,
+  DatePicker,
+  Dropdown,
+  IDropdownOption,
+  Checkbox,
+  PrimaryButton,
+  DefaultButton,
+  MessageBar,
+  MessageBarType,
+  Stack,
+  Separator
+} from '@fluentui/react';
+// Replace 'SampleEntity' with your actual entity PascalCase name during template processing
+// import { BaseEntity } from '../../models/BaseEntity';
+// import { Logger } from '../../components/Logging/logger';
+import './SampleEntityForm.css';
+
+// Template base entity interface - replace with actual BaseEntity during generation
+interface BaseEntity {
+  id?: string;
+  [key: string]: any;
+}
+
+// Template Logger - replace with actual Logger during generation
+const Logger = {
+  log: (message: string, source?: string) => console.log(message, source),
+  warn: (message: string, source?: string) => console.warn(message, source),
+  error: (message: string, source?: string, error?: any) => console.error(message, source, error)
+};
+
+// Template interfaces - replace with actual entity interface during generation
+interface ISampleEntity {
+  id?: string;
+  name?: string;
+  description?: string;
+  priority?: number;
+  dueDate?: Date;
+  amount?: number;
+  isActive?: boolean;
+}
+
+interface SampleEntity extends BaseEntity, ISampleEntity {}
+
+// Template constants - replace with actual constants during generation
+const SampleEntityConstants = {
+  PrimaryNameAttribute: 'name',
+  Description: 'description',
+  Priority: 'priority',
+  DueDate: 'dueDate',
+  Amount: 'amount',
+  IsActive: 'isActive',
+  FieldDisplayNames: {
+    name: 'Name',
+    description: 'Description',
+    priority: 'Priority',
+    dueDate: 'Due Date',
+    amount: 'Amount',
+    isActive: 'Is Active'
+  },
+  PriorityOptions: {
+    Low: 1,
+    Medium: 2,
+    High: 3,
+    Critical: 4
+  }
+};
+
+interface SampleEntityFormProps {
+  sampleEntity?: SampleEntity | null;
+  onSave: (sampleEntityData: Partial<ISampleEntity>) => Promise<void>;
+  onCancel: () => void;
+  readOnly?: boolean;
+}
+
+export const SampleEntityForm: React.FC<SampleEntityFormProps> = ({
+  sampleEntity,
+  onSave,
+  onCancel,
+  readOnly = false
+}) => {
+  const [formData, setFormData] = useState<Partial<ISampleEntity>>({});
+  const [errors, setErrors] = useState<string[]>([]);
+  const [saving, setSaving] = useState(false);
+
+  // Initialize form data
+  useEffect(() => {
+    if (sampleEntity) {
+      setFormData({
+        [SampleEntityConstants.PrimaryNameAttribute]: sampleEntity[SampleEntityConstants.PrimaryNameAttribute] || '',
+        [SampleEntityConstants.Description]: sampleEntity[SampleEntityConstants.Description] || '',
+        [SampleEntityConstants.Priority]: sampleEntity[SampleEntityConstants.Priority] || SampleEntityConstants.PriorityOptions.Medium,
+        [SampleEntityConstants.DueDate]: sampleEntity[SampleEntityConstants.DueDate] || null,
+        [SampleEntityConstants.Amount]: sampleEntity[SampleEntityConstants.Amount] || 0,
+        [SampleEntityConstants.IsActive]: sampleEntity[SampleEntityConstants.IsActive] ?? true
+      });
+    } else {
+      // Default values for new entity
+      setFormData({
+        [SampleEntityConstants.PrimaryNameAttribute]: '',
+        [SampleEntityConstants.Description]: '',
+        [SampleEntityConstants.Priority]: SampleEntityConstants.PriorityOptions.Medium,
+        [SampleEntityConstants.DueDate]: null,
+        [SampleEntityConstants.Amount]: 0,
+        [SampleEntityConstants.IsActive]: true
+      });
+    }
+  }, [sampleEntity]);
+
+  // Handle field changes
+  const handleFieldChange = (fieldName: string, value: any) => {
+    setFormData(prev => ({
+      ...prev,
+      [fieldName]: value
+    }));
+    
+    // Clear errors when user starts typing
+    if (errors.length > 0) {
+      setErrors([]);
+    }
+  };
+
+  // Validate form
+  const validateForm = (): boolean => {
+    const validationErrors: string[] = [];
+    
+    // Required field validation
+    if (!formData[SampleEntityConstants.PrimaryNameAttribute]?.trim()) {
+      validationErrors.push(`${SampleEntityConstants.FieldDisplayNames[SampleEntityConstants.PrimaryNameAttribute]} is required`);
+    }
+    
+    // Additional validation rules
+    if (formData[SampleEntityConstants.PrimaryNameAttribute] && 
+        formData[SampleEntityConstants.PrimaryNameAttribute].length > 100) {
+      validationErrors.push(`${SampleEntityConstants.FieldDisplayNames[SampleEntityConstants.PrimaryNameAttribute]} cannot exceed 100 characters`);
+    }
+    
+    if (formData[SampleEntityConstants.Amount] && 
+        formData[SampleEntityConstants.Amount] < 0) {
+      validationErrors.push(`${SampleEntityConstants.FieldDisplayNames[SampleEntityConstants.Amount]} cannot be negative`);
+    }
+    
+    setErrors(validationErrors);
+    return validationErrors.length === 0;
+  };
+
+  // Handle save
+  const handleSave = async () => {
+    if (!validateForm()) {
+      Logger.warn('Sample Entity form validation failed');
+      return;
+    }
+    
+    try {
+      setSaving(true);
+      Logger.log('Saving Sample Entity form data');
+      await onSave(formData);
+    } catch (error) {
+      Logger.error('Error saving Sample Entity:', error);
+      setErrors([error instanceof Error ? error.message : 'Failed to save Sample Entity']);
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  // Priority options
+  const priorityOptions: IDropdownOption[] = Object.entries(SampleEntityConstants.PriorityOptions).map(([key, value]) => ({
+    key: value as string | number,
+    text: key
+  }));
+
+  return (
+    <div className="sample-entity-form">
+      {errors.length > 0 && (
+        <MessageBar messageBarType={MessageBarType.error}>
+          <ul className="sample-entity-form-errors">
+            {errors.map((error, index) => (
+              <li key={index}>{error}</li>
+            ))}
+          </ul>
+        </MessageBar>
+      )}
+      
+      <Stack tokens={{ childrenGap: 20 }}>
+        {/* Basic Information Section */}
+        <div className="sample-entity-form-section">
+          <h3 className="sample-entity-form-section-title">Basic Information</h3>
+          
+          <TextField
+            label={SampleEntityConstants.FieldDisplayNames[SampleEntityConstants.PrimaryNameAttribute]}
+            required
+            value={formData[SampleEntityConstants.PrimaryNameAttribute] || ''}
+            onChange={(_, newValue) => handleFieldChange(SampleEntityConstants.PrimaryNameAttribute, newValue)}
+            disabled={readOnly}
+            placeholder="Enter Sample Entity name"
+            maxLength={100}
+            className="sample-entity-form-field"
+          />
+          
+          <TextField
+            label={SampleEntityConstants.FieldDisplayNames[SampleEntityConstants.Description]}
+            multiline
+            rows={3}
+            value={formData[SampleEntityConstants.Description] || ''}
+            onChange={(_, newValue) => handleFieldChange(SampleEntityConstants.Description, newValue)}
+            disabled={readOnly}
+            placeholder="Enter description"
+            className="sample-entity-form-field"
+          />
+          
+          <Dropdown
+            label={SampleEntityConstants.FieldDisplayNames[SampleEntityConstants.Priority]}
+            options={priorityOptions}
+            selectedKey={formData[SampleEntityConstants.Priority]}
+            onChange={(_, option) => handleFieldChange(SampleEntityConstants.Priority, option?.key)}
+            disabled={readOnly}
+            className="sample-entity-form-field"
+          />
+        </div>
+        
+        <Separator />
+        
+        {/* Additional Details Section */}
+        <div className="sample-entity-form-section">
+          <h3 className="sample-entity-form-section-title">Additional Details</h3>
+          
+          <DatePicker
+            label={SampleEntityConstants.FieldDisplayNames[SampleEntityConstants.DueDate]}
+            value={formData[SampleEntityConstants.DueDate] ? new Date(formData[SampleEntityConstants.DueDate]) : undefined}
+            onSelectDate={(date) => handleFieldChange(SampleEntityConstants.DueDate, date)}
+            disabled={readOnly}
+            placeholder="Select due date"
+            ariaLabel="Due date"
+            className="sample-entity-form-field"
+          />
+          
+          <TextField
+            label={SampleEntityConstants.FieldDisplayNames[SampleEntityConstants.Amount]}
+            type="number"
+            value={formData[SampleEntityConstants.Amount]?.toString() || '0'}
+            onChange={(_, newValue) => handleFieldChange(SampleEntityConstants.Amount, parseFloat(newValue || '0'))}
+            disabled={readOnly}
+            prefix="$"
+            className="sample-entity-form-field"
+          />
+          
+          <Checkbox
+            label={SampleEntityConstants.FieldDisplayNames[SampleEntityConstants.IsActive]}
+            checked={formData[SampleEntityConstants.IsActive] ?? true}
+            onChange={(_, checked) => handleFieldChange(SampleEntityConstants.IsActive, checked)}
+            disabled={readOnly}
+            className="sample-entity-form-field"
+          />
+        </div>
+        
+        {/* Action Buttons */}
+        {!readOnly && (
+          <Stack horizontal horizontalAlign="end" tokens={{ childrenGap: 10 }}>
+            <DefaultButton 
+              text="Cancel" 
+              onClick={onCancel}
+              disabled={saving}
+            />
+            <PrimaryButton 
+              text={sampleEntity ? "Update" : "Create"}
+              onClick={handleSave}
+              disabled={saving}
+            />
+          </Stack>
+        )}
+      </Stack>
+    </div>
+  );
+};