Merge pull request #41 from TsotneMikadze/develop

Refactor SignUp, MainLayout, MetaModelsPanel, ToolsPanel, VsumsPanel,…

Author: ma-mirzaei

src/components/auth/SignUp.tsx

@@ -214,19 +214,6 @@ export function SignUp({ onSignUpSuccess, onSwitchToSignIn }: SignUpProps) {
             </button>
           </p>
         </div>
-
-        <div className="auth-divider">
-          <span>or</span>
-        </div>
-
-        <div className="demo-credentials">
-          <p className="demo-title">API Endpoint</p>
-          <div className="demo-info">
-            <p>This application connects to the backend API at:</p>
-            <p><code>http://localhost:9811/api/v1/users/sign-up</code></p>
-            <p>Make sure your backend server is running on port 9811.</p>
-          </div>
-        </div>
       </div>
     </div>
   );

src/components/layout/MainLayout.tsx

@@ -1,4 +1,5 @@
 import React, { useEffect, useState, useRef } from 'react';
+import { useLocation } from 'react-router-dom';
 import { Header } from './Header';
 import { FlowCanvas } from '../flow/FlowCanvas';
 import { ToolsPanel } from '../ui/ToolsPanel';
@@ -21,6 +22,7 @@ interface MainLayoutProps {
   topRightSlot?: React.ReactNode;
   showWorkspaceInfo?: boolean;
   workspaceTopRightSlot?: React.ReactNode;
+  workspaceOverlay?: React.ReactNode;
 }
 
 interface EcoreFileBox {
@@ -34,7 +36,9 @@ interface EcoreFileBox {
   createdAt?: string;
 }
 
-export function MainLayout({ onDeploy, onSave, onLoad, onNew, user, onLogout, leftSidebar, leftSidebarWidth = 350, rightSidebar, rightSidebarWidth = 0, topRightSlot, showWorkspaceInfo = true, workspaceTopRightSlot }: MainLayoutProps) {
+export function MainLayout({ onDeploy, onSave, onLoad, onNew, user, onLogout, leftSidebar, leftSidebarWidth = 350, rightSidebar, rightSidebarWidth = 0, topRightSlot, showWorkspaceInfo = true, workspaceTopRightSlot, workspaceOverlay }: MainLayoutProps) {
+  const location = useLocation();
+  const isMMLRoute = location.pathname.startsWith('/mml');
   const [selectedDiagramType, setSelectedDiagramType] = useState<string | undefined>();
   const flowCanvasRef = useRef<any>(null);
   const leftAsideRef = useRef<HTMLDivElement | null>(null);
@@ -453,7 +457,7 @@ export function MainLayout({ onDeploy, onSave, onLoad, onNew, user, onLogout, le
         )}
 
         {/* Top-right workspace document panel (separate from ToolsPanel) */}
-        {activeDocId && (
+        {activeDocId && !isMMLRoute && (
           <div style={{ position: 'absolute', right: 16 + (rightSidebarWidth || 0), top: 56, zIndex: 25 }}>
             <div style={{
               background: '#ffffff',
@@ -546,7 +550,7 @@ export function MainLayout({ onDeploy, onSave, onLoad, onNew, user, onLogout, le
         )}
 
         {/* Workspace info panel */}
-        {showWorkspaceInfo && (
+        {showWorkspaceInfo && !isMMLRoute && (
           <div style={{ position: 'absolute', left: 16, top: 56, zIndex: 25 }}>
             <div style={{
               background: '#ffffff',
@@ -577,19 +581,60 @@ export function MainLayout({ onDeploy, onSave, onLoad, onNew, user, onLogout, le
 
         <div style={{ flexGrow: 1, position: 'relative', display: 'flex' }}>
           <div style={{ flexGrow: 1, position: 'relative', display: 'flex' }}>
-            <FlowCanvas 
-              onDeploy={onDeploy} 
-              onDiagramChange={handleDiagramChange} 
-              ref={flowCanvasRef}
-              ecoreFiles={ecoreFileBoxes}
-              onEcoreFileSelect={handleEcoreFileSelect}
-              onEcoreFileExpand={handleEcoreFileExpand}
-              onEcoreFilePositionChange={handleEcoreFilePositionChange}
-              onEcoreFileDelete={handleEcoreFileDelete}
-              onEcoreFileRename={handleEcoreFileRename}
-            />
-            {workspaceTopRightSlot && (
-              <div style={{ position: 'absolute', right: 16, top: 60, zIndex: 15 }}>
+            {workspaceOverlay && (
+              <div style={{ position: 'absolute', left: 0, right: 0, top: 48, zIndex: 20, pointerEvents: 'none' }}>
+                <div style={{ pointerEvents: 'auto' }}>
+                  {workspaceOverlay}
+                </div>
+              </div>
+            )}
+            {isMMLRoute ? (
+              <div style={{ 
+                width: '100%', 
+                height: '100%', 
+                background: '#ffffff',
+                display: 'flex',
+                flexDirection: 'column',
+                alignItems: 'center',
+                justifyContent: 'center',
+                padding: '40px'
+              }}>
+                <div style={{
+                  textAlign: 'center',
+                  fontFamily: 'Georgia, serif',
+                  color: '#2c3e50',
+                  maxWidth: '600px'
+                }}>
+                  <img 
+                    src="/assets/22098030.png" 
+                    alt="Vitruvius" 
+                    style={{
+                      width: '200px',
+                      height: '200px',
+                      objectFit: 'contain',
+                      marginBottom: '30px'
+                    }}
+                  />
+                  <p style={{ margin: '0 0 20px 0', fontSize: '16px', color: '#6b7280', lineHeight: '1.6' }}>
+                    Meta Model Management Platform
+                  </p>
+                </div>
+              </div>
+            ) : (
+              <FlowCanvas 
+                onDeploy={onDeploy} 
+                onDiagramChange={handleDiagramChange} 
+                ref={flowCanvasRef}
+                ecoreFiles={ecoreFileBoxes}
+                onEcoreFileSelect={handleEcoreFileSelect}
+                onEcoreFileExpand={handleEcoreFileExpand}
+                onEcoreFilePositionChange={handleEcoreFilePositionChange}
+                onEcoreFileDelete={handleEcoreFileDelete}
+                onEcoreFileRename={handleEcoreFileRename}
+              />
+            )}
+            {workspaceTopRightSlot && !isMMLRoute && (
+              <div style={{ position: 'absolute', right: 16, top: 60, zIndex: 30 }}>
                 {workspaceTopRightSlot}
               </div>
             )}

src/components/ui/MetaModelsPanel.tsx

@@ -1,6 +1,12 @@
 import React, { useEffect, useState } from 'react';
 import { apiService } from '../../services/api';
 
+interface MetaModelsPanelProps {
+  activeVsumId?: number | null;
+  selectedMetaModelIds?: number[];
+  onAddToActiveVsum?: (model: any) => void;
+}
+
 const containerStyle: React.CSSProperties = {
   userSelect: 'none',
   width: '100%',
@@ -139,7 +145,7 @@ const paginationButtonDisabledStyle: React.CSSProperties = {
   cursor: 'not-allowed',
 };
 
-export const MetaModelsPanel: React.FC = () => {
+export const MetaModelsPanel: React.FC<MetaModelsPanelProps> = ({ activeVsumId, selectedMetaModelIds, onAddToActiveVsum }) => {
   const [searchTerm, setSearchTerm] = useState('');
   const [sortBy, setSortBy] = useState<'name' | 'date' | 'domain'>('date');
   const [sortOrder, setSortOrder] = useState<'asc' | 'desc'>('desc');
@@ -164,6 +170,7 @@ export const MetaModelsPanel: React.FC = () => {
     while (end < value.length && !/\s/.test(value[end])) end++;
     const token = value.slice(start, end);
     const lower = token.toLowerCase().replace(/:$/, '');
+    if (!lower) return;
 
     const candidates = ['name', 'description', 'domain', 'keywords', 'created', 'updated'];
     const match = candidates.find(k => k.startsWith(lower));
@@ -206,7 +213,7 @@ export const MetaModelsPanel: React.FC = () => {
             break;
         }
       } else {
-        filters.push({ key: 'name', value: part });
+        // Ignore bare tokens (no default name:)
       }
     }
     return filters;
@@ -500,6 +507,20 @@ export const MetaModelsPanel: React.FC = () => {
               <span>Domain: <strong>{model.domain}</strong></span>
               <span>•</span>
               <span title={new Date(model.createdAt).toLocaleString()}>{formatRelativeTime(model.createdAt)}</span>
+              {activeVsumId ? (
+                <>
+                  <span>•</span>
+                  {onAddToActiveVsum && (
+                    <button
+                      onClick={() => onAddToActiveVsum(model)}
+                      style={{ padding: '4px 8px', border: '1px solid #dee2e6', borderRadius: 6, background: '#ffffff', cursor: 'pointer', fontSize: 12, fontWeight: 600 }}
+                      disabled={(selectedMetaModelIds || []).includes(model.id)}
+                    >
+                      {(selectedMetaModelIds || []).includes(model.id) ? 'Added' : 'Add to vSUM'}
+                    </button>
+                  )}
+                </>
+              ) : null}
             </div>
           </div>
         ))}

src/components/ui/ToolsPanel.tsx

@@ -334,7 +334,7 @@ export const ToolsPanel: React.FC<ToolsPanelProps> = ({ onEcoreFileUpload, onEco
     const token = value.slice(start, end);
     const lower = token.toLowerCase().replace(/:$/, '');
 
-    const candidates = ['name', 'description', 'domain', 'keywords', 'created', 'updated'];
+    const candidates = ['name', 'description', 'domain', 'keywords', 'created', 'updated', 'time'];
     const match = candidates.find(k => k.startsWith(lower));
     const replacement = match ? `${match}:` : null;
     if (!replacement) return;
@@ -411,11 +411,11 @@ export const ToolsPanel: React.FC<ToolsPanelProps> = ({ onEcoreFileUpload, onEco
           }
           default:
             // Unknown key: treat as name
-            result.push({ key: 'name', value: `${key}:${cleanValue}`, display: `name:${key}:${cleanValue}` });
+            // result.push({ key: 'name', value: `${key}:${cleanValue}`, display: `name:${key}:${cleanValue}` });
         }
       } else if (token.trim().length > 0) {
         // Bare word -> name search
-        result.push({ key: 'name', value: token, display: `name:${token}` });
+        // result.push({ key: 'name', value: token, display: `name:${token}` });
       }
     }
 
@@ -783,13 +783,16 @@ export const ToolsPanel: React.FC<ToolsPanelProps> = ({ onEcoreFileUpload, onEco
               <input
                 type="text"
                 placeholder="Filter by name..."
-                value={searchTerm.includes(':') ? '' : searchTerm}
-                onChange={(e) => {
-                  if (!e.target.value.includes(':')) {
-                    setSearchTerm(e.target.value);
+                style={filterInputStyle}
+                onKeyDown={(e) => {
+                  if (e.key === 'Enter') {
+                    const value = e.currentTarget.value.trim();
+                    if (value) {
+                      setSearchTerm(prev => prev ? `${prev} name:${value}` : `name:${value}`);
+                      e.currentTarget.value = '';
+                    }
                   }
                 }}
-                style={filterInputStyle}
               />
             </div>