Initial Commit

packages/vitec/Resources/Private/Templates/Preview/Usecaseshow.html

@@ -0,0 +1,135 @@
+<div class="t3-page-ce-preview">
+    <div class="t3-page-ce-header">
+        <strong>🎯 Usecase Show Plugin</strong>
+        <f:if condition="{layout}">
+            <span class="badge badge-info">Layout: {layout}</span>
+        </f:if>
+    </div>
+    
+    <div class="t3-page-ce-body">
+        <f:if condition="{usecase}">
+            <f:then>
+                <!-- Show selected usecase data -->
+                <div class="preview-content">
+                    <div class="preview-item">
+                        <strong>Selected Usecase:</strong>
+                        <div class="preview-usecase">
+                            <h4>{usecase.title}</h4>
+                            <f:if condition="{usecase.subtitle}">
+                                <p class="text-muted"><em>{usecase.subtitle}</em></p>
+                            </f:if>
+                            <f:if condition="{usecase.description}">
+                                <p class="preview-description">
+                                    <f:format.crop maxCharacters="150">{usecase.description}</f:format.crop>
+                                </p>
+                            </f:if>
+                            <small class="text-muted">UID: {usecase.uid}</small>
+                        </div>
+                    </div>
+                </div>
+            </f:then>
+            <f:else>
+                <!-- No usecase selected -->
+                <div class="preview-warning">
+                    <span class="text-warning">⚠️ No usecase selected</span>
+                    <p class="text-muted">Please configure the plugin to select a usecase.</p>
+                </div>
+            </f:else>
+        </f:if>
+        
+        <!-- Show plugin settings -->
+        <f:if condition="{flexFormData.settings}">
+            <div class="preview-settings">
+                <details>
+                    <summary><strong>Plugin Settings</strong></summary>
+                    <table class="table table-sm">
+                        <f:for each="{flexFormData.settings}" as="value" key="key">
+                            <f:if condition="{value}">
+                                <tr>
+                                    <td><strong>{key}</strong></td>
+                                    <td>{value}</td>
+                                </tr>
+                            </f:if>
+                        </f:for>
+                    </table>
+                </details>
+            </div>
+        </f:if>
+    </div>
+</div>
+
+<style>
+    .t3-page-ce-preview {
+        border: 1px solid #ddd;
+        border-radius: 4px;
+        padding: 10px;
+        margin: 5px 0;
+        background: #f9f9f9;
+    }
+    
+    .t3-page-ce-header {
+        margin-bottom: 10px;
+        padding-bottom: 5px;
+        border-bottom: 1px solid #eee;
+    }
+    
+    .badge {
+        display: inline-block;
+        padding: 2px 6px;
+        font-size: 10px;
+        background: #007cba;
+        color: white;
+        border-radius: 3px;
+        margin-left: 10px;
+    }
+    
+    .preview-usecase {
+        background: white;
+        padding: 10px;
+        border-radius: 4px;
+        border-left: 4px solid #007cba;
+        margin: 5px 0;
+    }
+    
+    .preview-usecase h4 {
+        margin: 0 0 5px 0;
+        color: #333;
+    }
+    
+    .preview-description {
+        color: #666;
+        margin: 5px 0;
+    }
+    
+    .preview-warning {
+        background: #fff3cd;
+        border: 1px solid #ffeaa7;
+        border-radius: 4px;
+        padding: 10px;
+        color: #856404;
+    }
+    
+    .text-muted {
+        color: #6c757d;
+    }
+    
+    .text-warning {
+        color: #856404;
+    }
+    
+    .preview-settings {
+        margin-top: 10px;
+        padding-top: 10px;
+        border-top: 1px solid #eee;
+    }
+    
+    .preview-settings table {
+        width: 100%;
+        font-size: 12px;
+    }
+    
+    .preview-settings td {
+        padding: 2px 5px;
+        border-bottom: 1px solid #eee;
+    }
+</style>