ApiLogicServer 15.0.37__py3-none-any.whl → 15.0.40__py3-none-any.whl

api_logic_server_cli/prototypes/nw/ui/reference_react_app/src/DepartmentTree.js

@@ -0,0 +1,147 @@
+import React, { useState, useEffect } from 'react';
+
+const DepartmentTree = () => {
+  const [departments, setDepartments] = useState([]);
+  const [expandedNodes, setExpandedNodes] = useState(new Set());
+
+  useEffect(() => {
+    // Fetch departments from API Logic Server
+    fetchDepartments();
+  }, []);
+
+  const fetchDepartments = async () => {
+    try {
+      const response = await fetch('/api/Department');
+      const data = await response.json();
+      setDepartments(buildTree(data.data));
+    } catch (error) {
+      console.error('Error fetching departments:', error);
+    }
+  };
+
+  const buildTree = (flatData) => {
+    const map = {};
+    const tree = [];
+
+    // Create a map of all departments
+    flatData.forEach(dept => {
+      map[dept.Id] = { ...dept, children: [] };
+    });
+
+    // Build the tree structure
+    flatData.forEach(dept => {
+      if (dept.DepartmentId && map[dept.DepartmentId]) {
+        // This department has a parent
+        map[dept.DepartmentId].children.push(map[dept.Id]);
+      } else {
+        // This is a root department
+        tree.push(map[dept.Id]);
+      }
+    });
+
+    return tree;
+  };
+
+  const toggleNode = (nodeId) => {
+    const newExpanded = new Set(expandedNodes);
+    if (newExpanded.has(nodeId)) {
+      newExpanded.delete(nodeId);
+    } else {
+      newExpanded.add(nodeId);
+    }
+    setExpandedNodes(newExpanded);
+  };
+
+  const TreeNode = ({ node, level = 0 }) => {
+    const hasChildren = node.children && node.children.length > 0;
+    const isExpanded = expandedNodes.has(node.Id);
+
+    return (
+      <div className="tree-node">
+        <div 
+          className="tree-node-content"
+          style={{ paddingLeft: `${level * 20}px` }}
+        >
+          {hasChildren && (
+            <span 
+              className={`tree-toggle ${isExpanded ? 'expanded' : 'collapsed'}`}
+              onClick={() => toggleNode(node.Id)}
+            >
+              {isExpanded ? '▼' : '▶'}
+            </span>
+          )}
+          <span className="tree-node-label">
+            {node.DepartmentName} (Level: {node.SecurityLevel})
+          </span>
+        </div>
+        
+        {hasChildren && isExpanded && (
+          <div className="tree-children">
+            {node.children.map(child => (
+              <TreeNode 
+                key={child.Id} 
+                node={child} 
+                level={level + 1} 
+              />
+            ))}
+          </div>
+        )}
+      </div>
+    );
+  };
+
+  return (
+    <div className="department-tree">
+      <h2>Department Hierarchy</h2>
+      <div className="tree-container">
+        {departments.map(dept => (
+          <TreeNode key={dept.Id} node={dept} />
+        ))}
+      </div>
+      
+      <style jsx>{`
+        .department-tree {
+          padding: 20px;
+          font-family: Arial, sans-serif;
+        }
+        
+        .tree-container {
+          border: 1px solid #ddd;
+          border-radius: 4px;
+          padding: 10px;
+          background-color: #f9f9f9;
+        }
+        
+        .tree-node-content {
+          display: flex;
+          align-items: center;
+          padding: 4px 0;
+          cursor: pointer;
+        }
+        
+        .tree-node-content:hover {
+          background-color: #e6f3ff;
+        }
+        
+        .tree-toggle {
+          margin-right: 8px;
+          font-size: 12px;
+          color: #666;
+          cursor: pointer;
+          user-select: none;
+        }
+        
+        .tree-node-label {
+          font-weight: 500;
+        }
+        
+        .tree-children {
+          border-left: 1px dashed #ccc;
+          margin-left: 10px;
+        }
+      `}</style>
+    </div>
+  );
+};
+
+export default DepartmentTree;

api_logic_server_cli/prototypes/nw/ui/reference_react_app/src/Employee.js

@@ -1,14 +1,20 @@
-// begin MANDATORY imports (always generated EXACTLY)
-import React from 'react';
+// begin MANDATORY imports (always generated)
+import React, { useState } from 'react';
 import { List, FunctionField, Datagrid, TextField, EmailField, DateField, NumberField } from 'react-admin';
 import { ReferenceField, ReferenceManyField } from 'react-admin';
 import { TabbedShowLayout, Tab, SimpleShowLayout, TextInput, NumberInput, DateTimeInput } from 'react-admin';
 import { ReferenceInput, SelectInput, SimpleForm, Show, Edit, Create } from 'react-admin';
 import { Filter, Pagination, BooleanField, BooleanInput, Labeled } from 'react-admin'; 
 import { EditButton, DeleteButton, CreateButton, ShowButton } from 'react-admin';
-import { Grid, Typography, Box, Divider, Button } from '@mui/material';
-import { useRecordContext, useRedirect, Link, required } from 'react-admin';
+import { Grid, Typography, Box, Divider, Button, Card, CardContent, CardActions, ToggleButton, ToggleButtonGroup, Avatar } from '@mui/material';
+import { useRecordContext, useRedirect, Link, required, useListContext } from 'react-admin';
 import AddIcon from '@mui/icons-material/Add';
+import ViewListIcon from '@mui/icons-material/ViewList';
+import ViewModuleIcon from '@mui/icons-material/ViewModule';
+import PersonIcon from '@mui/icons-material/Person';
+import WorkIcon from '@mui/icons-material/Work';
+import AttachMoneyIcon from '@mui/icons-material/AttachMoney';
+import EmailIcon from '@mui/icons-material/Email';
 // end mandatory imports
 
 const EmployeeFilter = (props) => (
@@ -17,23 +23,202 @@ const EmployeeFilter = (props) => (
     </Filter>
 );
 
+// Employee Card View Component
+const EmployeeCard = ({ record }) => (
+    <Card sx={{ 
+        minWidth: 300, 
+        maxWidth: 350, 
+        height: 320,
+        margin: 1, 
+        display: 'flex', 
+        flexDirection: 'column',
+        transition: 'transform 0.2s, box-shadow 0.2s',
+        '&:hover': {
+            transform: 'translateY(-2px)',
+            boxShadow: 3
+        }
+    }}>
+        <CardContent sx={{ flexGrow: 1, pb: 1 }}>
+            {/* Employee Photo */}
+            <Box sx={{ display: 'flex', justifyContent: 'center', mb: 2 }}>
+                {record.PhotoPath ? (
+                    <Avatar 
+                        src={record.PhotoPath} 
+                        alt={`${record.FirstName} ${record.LastName}`}
+                        sx={{ width: 80, height: 80 }}
+                    />
+                ) : (
+                    <Avatar sx={{ width: 80, height: 80, bgcolor: 'primary.main' }}>
+                        <PersonIcon sx={{ fontSize: 40 }} />
+                    </Avatar>
+                )}
+            </Box>
+            
+            <Typography variant="h6" component="div" sx={{ 
+                mb: 2, 
+                fontWeight: 'bold',
+                color: 'primary.main',
+                textAlign: 'center',
+                overflow: 'hidden',
+                textOverflow: 'ellipsis',
+                whiteSpace: 'nowrap'
+            }}>
+                {record.FirstName} {record.LastName}
+            </Typography>
+            
+            <Box sx={{ mb: 1.5, display: 'flex', alignItems: 'center', gap: 1 }}>
+                <WorkIcon color="action" fontSize="small" />
+                <Typography variant="body2" color="text.secondary">
+                    {record.Title || 'No title'}
+                </Typography>
+            </Box>
+            
+            <Box sx={{ mb: 1.5, display: 'flex', alignItems: 'center', gap: 1 }}>
+                <AttachMoneyIcon color="action" fontSize="small" />
+                <Typography variant="body1" sx={{ fontWeight: 'medium' }}>
+                    {record.Salary ? `$${record.Salary.toLocaleString()}` : 'No salary info'}
+                </Typography>
+            </Box>
+            
+            {record.Email && (
+                <Box sx={{ mb: 1.5, display: 'flex', alignItems: 'center', gap: 1 }}>
+                    <EmailIcon color="action" fontSize="small" />
+                    <Typography variant="body2" color="text.secondary" sx={{
+                        overflow: 'hidden',
+                        textOverflow: 'ellipsis',
+                        whiteSpace: 'nowrap'
+                    }}>
+                        {record.Email}
+                    </Typography>
+                </Box>
+            )}
+        </CardContent>
+        
+        <CardActions sx={{ pt: 0, pb: 2, px: 2, justifyContent: 'space-between' }}>
+            <ShowButton record={record} size="small" />
+            <Box>
+                <EditButton record={record} size="small" sx={{ mr: 1 }} />
+                <DeleteButton record={record} size="small" />
+            </Box>
+        </CardActions>
+    </Card>
+);
+
+// Employee Grid View Component
+const EmployeeGridView = () => {
+    const { data, isLoading } = useListContext();
+    
+    if (isLoading) return <div>Loading...</div>;
+    
+    return (
+        <Grid container spacing={2} sx={{ mt: 1 }}>
+            {data?.map(record => (
+                <Grid item key={record.id} xs={12} sm={6} md={4} lg={3}>
+                    <EmployeeCard record={record} />
+                </Grid>
+            ))}
+        </Grid>
+    );
+};
+
+// View Toggle Component
+const ViewToggle = ({ viewMode, setViewMode }) => (
+    <Box sx={{ mb: 2, display: 'flex', justifyContent: 'flex-end' }}>
+        <ToggleButtonGroup
+            value={viewMode}
+            exclusive
+            onChange={(event, newViewMode) => {
+                if (newViewMode !== null) {
+                    setViewMode(newViewMode);
+                }
+            }}
+            aria-label="view mode"
+            size="small"
+        >
+            <ToggleButton value="list" aria-label="list view">
+                <ViewListIcon />
+            </ToggleButton>
+            <ToggleButton value="cards" aria-label="card view">
+                <ViewModuleIcon />
+            </ToggleButton>
+        </ToggleButtonGroup>
+    </Box>
+);
+
 // Employee List
 export const EmployeeList = (props) => {
+    const [viewMode, setViewMode] = useState('list');
+
+    return (
+        <>
+            <ViewToggle viewMode={viewMode} setViewMode={setViewMode} />
+            <List filters={<EmployeeFilter />} {...props} sort={{ field: 'LastName', order: 'ASC' }} pagination={<Pagination rowsPerPageOptions={[5, 10, 25]} showFirstLastButtons />}>
+                {viewMode === 'list' ? (
+                    <Datagrid rowClick="show">
+                        <TextField source="LastName" label="Last Name" />
+                        <TextField source="FirstName" label="First Name" />
+                        <EmailField source="Email" label="Email" />
+                        <NumberField source="Salary" label="Salary" options={{ style: 'currency', currency: 'USD'}} />
+                        <ReferenceField source="WorksForDepartmentId" reference="Department" label="Department">
+                            <TextField source="DepartmentName" />
+                        </ReferenceField>
+                        <EditButton />
+                        <DeleteButton />
+                        <ShowButton />
+                    </Datagrid>
+                ) : (
+                    <EmployeeGridView />
+                )}
+            </List>
+        </>
+    );
+};
+
+// Custom Photo Display Component
+const EmployeePhotoDisplay = () => {
+    const record = useRecordContext();
+    
+    return (
+        <Box sx={{ display: 'flex', justifyContent: 'center', mb: 3 }}>
+            {record?.PhotoPath ? (
+                <Avatar 
+                    src={record.PhotoPath} 
+                    alt={`${record.FirstName} ${record.LastName}`}
+                    sx={{ width: 120, height: 120 }}
+                />
+            ) : (
+                <Avatar sx={{ width: 120, height: 120, bgcolor: 'primary.main' }}>
+                    <PersonIcon sx={{ fontSize: 60 }} />
+                </Avatar>
+            )}
+        </Box>
+    );
+};
+
+// Custom Photo Field Component  
+const PhotoField = () => {
+    const record = useRecordContext();
+    
     return (
-        <List filters={<EmployeeFilter />} {...props} sort={{ field: 'LastName', order: 'ASC' }} pagination={<Pagination rowsPerPageOptions={[5, 10, 25]} showFirstLastButtons />}>
-            <Datagrid rowClick="show">
-                <TextField source="LastName" label="Last Name" />
-                <TextField source="FirstName" label="First Name" />
-                <EmailField source="Email" label="Email" />
-                <NumberField source="Salary" label="Salary" options={{ style: 'currency', currency: 'USD'}} />
-                <ReferenceField source="WorksForDepartmentId" reference="Department" label="Department">
-                    <TextField source="DepartmentName" />
-                </ReferenceField>
-                <EditButton />
-                <DeleteButton />
-                <ShowButton />
-            </Datagrid>
-        </List>
+        <Box sx={{ mt: 1 }}>
+            {record?.PhotoPath ? (
+                <img 
+                    src={record.PhotoPath} 
+                    alt={`${record.FirstName} ${record.LastName}`}
+                    style={{ 
+                        width: '60px', 
+                        height: '60px', 
+                        borderRadius: '50%',
+                        objectFit: 'cover',
+                        border: '2px solid #ddd'
+                    }}
+                />
+            ) : (
+                <Avatar sx={{ width: 60, height: 60, bgcolor: 'grey.300' }}>
+                    <PersonIcon />
+                </Avatar>
+            )}
+        </Box>
     );
 };
 
@@ -46,6 +231,10 @@ export const EmployeeShow = (props) => {
                     <Typography variant="h5" component="h2" sx={{ mb: 2, fontWeight: 'bold' }}>
                         Employee Information
                     </Typography>
+                    
+                    {/* Employee Photo Section */}
+                    <EmployeePhotoDisplay />
+                    
                     <Grid container spacing={3} sx={{ mb: 2 }}>
                         <Grid item xs={12} sm={6} md={3}>
                             <Box sx={{ p: 1 }}>
@@ -61,6 +250,13 @@ export const EmployeeShow = (props) => {
                                 </Labeled>
                             </Box>
                         </Grid>
+                        <Grid item xs={12} sm={6} md={3}>
+                            <Box sx={{ p: 1 }}>
+                                <Labeled label="Title">
+                                    <TextField source="Title" />
+                                </Labeled>
+                            </Box>
+                        </Grid>
                         <Grid item xs={12} sm={6} md={3}>
                             <Box sx={{ p: 1 }}>
                                 <Labeled label="Salary">
@@ -75,6 +271,22 @@ export const EmployeeShow = (props) => {
                                 </Labeled>
                             </Box>
                         </Grid>
+                        <Grid item xs={12} sm={6} md={3}>
+                            <Box sx={{ p: 1 }}>
+                                <Labeled label="Department">
+                                    <ReferenceField source="WorksForDepartmentId" reference="Department">
+                                        <TextField source="DepartmentName" />
+                                    </ReferenceField>
+                                </Labeled>
+                            </Box>
+                        </Grid>
+                        <Grid item xs={12} sm={6} md={3}>
+                            <Box sx={{ p: 1 }}>
+                                <Labeled label="Hire Date">
+                                    <DateField source="HireDate" />
+                                </Labeled>
+                            </Box>
+                        </Grid>
                     </Grid>
                     <Divider sx={{ my: 2 }} />
                 </Box>