diff --git a/ShopAdmin/Components/CreateProduct.razor b/ShopAdmin/Components/CreateProduct.razor index 777a087..a29a771 100644 --- a/ShopAdmin/Components/CreateProduct.razor +++ b/ShopAdmin/Components/CreateProduct.razor @@ -1,119 +1,147 @@ @using Microsoft.AspNetCore.Components.Forms -
- - +
-
-
- Initialization Sequence -

Register a new asset node into the core product catalog matrix.

+
+ @if (!string.IsNullOrEmpty(ActivePreviewUrl)) + { + + +
+ Active Book Design Preview
+ } +
-
+
+ + -
+
+ +
+ PRODUCT MASTER LEDGER +

Provision catalog items metadata, book cover assets, and supplementary chapter telemetry designs.

+
+ +
- - + + +
- - + + +
- - + + + +
+ +
+ + +
-
-
- -
- -
- +
+
+

Media Assets Node Array

+
+ +
+ +
+ +
+ + + @if (string.IsNullOrEmpty(ProductModel.ImageUrl)) + { + /* Clicking anywhere inside this label launches the file system picker */ + + } + else + { +
+ Main Book Cover + +
+ + +
+
+ }
-
-
- +
+ +
+ @for (int i = 0; i < 5; i++) + { + var index = i; +
+ @if (HasAssetAt(index)) + { + Slot @(index + 1) -
- @for (int i = 0; i < 5; i++) - { - var index = i; -
- @if (HasAssetAt(index)) - { - Slot @(index + 1) - - } - else - { -
- - 0@(index + 1) -
- } -
- } +
+ + +
+ } + else + { + /* Clean hidden execution context matched back to label action surfaces */ + + + } +
+ } +
+
-
-
-
- - -
- -
- -@code { - private Product ProductModel { get; set; } = new(); - - protected override void OnInitialized() - { - ProductModel.Active = true; - ProductModel.Thumbnails ??= new string[0]; - } - - private bool HasAssetAt(int index) => - ProductModel.Thumbnails != null && index < ProductModel.Thumbnails.Length && !string.IsNullOrWhiteSpace(ProductModel.Thumbnails[index]); - - private void RemoveThumbnailAt(int index) - { - if (ProductModel.Thumbnails == null) return; - var list = ProductModel.Thumbnails.ToList(); - if (index < list.Count) - { - list.RemoveAt(index); - ProductModel.Thumbnails = list.ToArray(); - } - } - - private void HandleValidSubmit() - { - // Save operation business logic goes here - } - - public class Product - { - public Guid Id { get; set; } = Guid.NewGuid(); - public string? Name { get; set; } - public string? Summary { get; set; } - public string? Description { get; set; } - public string? ImageUrl { get; set; } - public string[]? Thumbnails { get; set; } - public bool Active { get; set; } - } -} \ No newline at end of file +
+ +
+ +
+
\ No newline at end of file diff --git a/ShopAdmin/Components/CreateProduct.razor.cs b/ShopAdmin/Components/CreateProduct.razor.cs index 502eb96..fa2b9cd 100644 --- a/ShopAdmin/Components/CreateProduct.razor.cs +++ b/ShopAdmin/Components/CreateProduct.razor.cs @@ -1,5 +1,150 @@ -namespace ShopAdmin.Components; +using LiteCharms.Features.S3.Abstractions; +using Microsoft.AspNetCore.Components.Forms; +using System.ComponentModel.DataAnnotations; +using static LiteCharms.Features.S3.Constants; -public partial class CreateProduct +namespace ShopAdmin.Components; + +public partial class CreateProduct([FromKeyedServices(BookshopBucketName)] IS3Service s3Service) { + private readonly CancellationTokenSource cancellationTokenSource = new(); + private CancellationToken cancellationToken; + + protected string? ActivePreviewUrl { get; set; } + + protected CreateProductModel ProductModel { get; set; } = new(); + + private const long MaxAllowedFileSize = 1024 * 1024 * 5; + + protected override void OnInitialized() + { + base.OnInitialized(); + + cancellationToken = cancellationTokenSource.Token; + + if (ProductModel.Thumbnails.Count == 0) + ProductModel.Thumbnails = [.. Enumerable.Repeat(string.Empty, 5)]; + } + + // Your saving logic goes here when the ledger button is clicked + public Task HandleValidSubmit() => Task.CompletedTask; + + // Checks if a valid URL asset exists at the specified position + public bool HasAssetAt(int index) => ProductModel?.Thumbnails == null || index >= ProductModel.Thumbnails.Count + ? false + : !string.IsNullOrWhiteSpace(ProductModel.Thumbnails[index]); + + // Handles uploading the primary image node + private async Task HandleMainImageUpload(InputFileChangeEventArgs e) + { + try + { + var file = e.File; + + if (file == null) return; + + using var stream = new MemoryStream(); + + await file.OpenReadStream(MaxAllowedFileSize).CopyToAsync(stream, cancellationToken); + + var result = await s3Service.UploadFileAsync(file.Name,stream, + MimeTypes.GetMimeType(file.Name), cancellationToken); + + if (result.IsSuccess) + { + ProductModel.ImageUrl = result.Value; + + StateHasChanged(); + } + } + catch (Exception ex) + { + Console.WriteLine($"Main Image Upload Exception: {ex.Message}"); + } + } + + public void SetPreviewActive(string? url) + { + if (!string.IsNullOrWhiteSpace(url)) + { + ActivePreviewUrl = url; + StateHasChanged(); + } + } + + public void ClosePreviewDrawer() + { + ActivePreviewUrl = null; + StateHasChanged(); + } + + // Handles uploading a thumbnail image into its specific slot index + private async Task HandleThumbnailUpload(InputFileChangeEventArgs e, int index) + { + try + { + var file = e.File; + + if (file == null) return; + + using var stream = new MemoryStream(); + + await file.OpenReadStream(MaxAllowedFileSize, cancellationToken).CopyToAsync(stream, cancellationToken); + + var result = await s3Service.UploadFileAsync(file.Name, stream, + MimeTypes.GetMimeType(file.Name), cancellationToken); + + if (result.IsSuccess && index < ProductModel.Thumbnails.Count) + { + ProductModel.Thumbnails[index] = result.Value; + + StateHasChanged(); + } + } + catch (Exception ex) + { + Console.WriteLine($"Thumbnail Slot {index} Upload Exception: {ex.Message}"); + } + } + + public void ClearMainImage() + { + if (ActivePreviewUrl == ProductModel.ImageUrl) + { + ActivePreviewUrl = null; + } + ProductModel.ImageUrl = null; + } + + public void RemoveThumbnailAt(int index) + { + if (index >= 0 && index < ProductModel.Thumbnails.Count) + { + if (ActivePreviewUrl == ProductModel.Thumbnails[index]) + { + ActivePreviewUrl = null; + } + ProductModel.Thumbnails[index] = string.Empty; + } + } } + +public class CreateProductModel +{ + [Required(ErrorMessage = "Product name is required.")] + public string? Name { get; set; } + + [Required(ErrorMessage = "Summary is required.")] + public string? Summary { get; set; } + + [Required(ErrorMessage = "Description is required.")] + public string? Description { get; set; } + + [Range(0.01, double.MaxValue, ErrorMessage = "Price must be greater than zero.")] + public decimal Price { get; set; } + + [Required(ErrorMessage = "Primary image is required.")] + public string? ImageUrl { get; set; } + + public List Thumbnails { get; set; } = []; +} \ No newline at end of file diff --git a/ShopAdmin/Components/CreateProduct.razor.css b/ShopAdmin/Components/CreateProduct.razor.css index 6910574..76c045a 100644 --- a/ShopAdmin/Components/CreateProduct.razor.css +++ b/ShopAdmin/Components/CreateProduct.razor.css @@ -1,9 +1,21 @@ -/* Core Structural Layout Space Configuration */ +/* ========================================================================== + Shell & Outer Layout Container + ========================================================================== */ +.create-product-shell { + display: flex; + width: 100%; + height: 100%; + overflow: hidden; + position: relative; + background: #02060d; +} + .create-product-container { display: flex; flex-direction: column; height: 100%; width: 100%; + box-sizing: border-box; } .form-entry-canvas { @@ -15,158 +27,181 @@ .form-scroll-viewport { padding: 2.5rem; - flex: 1; + flex: 1 1 auto; overflow-y: auto; } .form-section-header { - margin-bottom: 2.5rem; - border-bottom: 1px solid rgba(255, 255, 255, 0.03); + margin-bottom: 2rem; + border-bottom: 1px solid rgba(255, 255, 255, 0.05); padding-bottom: 1.25rem; } .field-accent-tag { - font-size: 1rem; + font-size: 1.2rem; letter-spacing: 0.02em; - color: #ffffff !important; + color: #ffffff; font-weight: 600; + display: block; } .form-section-header p { - margin-top: 0.4rem; - font-size: 0.85rem; + margin-top: 0.5rem; + font-size: 0.88rem; color: #64748b; } -/* Precise Balanced Grid Matrix Layout */ -.form-grid-layout { - display: grid; - grid-template-columns: repeat(2, minmax(0, 1fr)); - gap: 3.5rem; - align-items: start; -} - -.form-column { +/* ========================================================================== + Stacked Sub-Section Layout Blocks + ========================================================================== */ +.form-text-inputs-section { display: flex; flex-direction: column; - gap: 2rem; + gap: 1.5rem; + width: 100%; + margin-bottom: 3rem; /* Generates clear space before the media controls block */ +} + +.form-media-deck-section { + display: flex; + flex-direction: column; + gap: 1.5rem; + width: 100%; +} + +/* Horizontal alignment grid for cover upload & thumbnail array side-by-side */ +.media-deck-row { + display: grid; + grid-template-columns: 240px 1fr; + gap: 2.5rem; + align-items: start; + width: 100%; } -/* Brand Metric Console Inputs Architecture */ .console-field-group { display: flex; flex-direction: column; - gap: 0.75rem; + gap: 0.6rem; width: 100%; } .console-field-label { - font-size: 0.88rem; + font-size: 0.85rem; font-weight: 500; color: #cbd5e1; - letter-spacing: 0.01em; + letter-spacing: 0.03em; + text-transform: uppercase; +} + +/* ========================================================================== + Input Form Elements + ========================================================================== */ +::deep .console-input, +::deep .console-textarea { + width: 100%; + box-sizing: border-box; + background: #060b13 !important; + border: 1px solid #1e293b !important; + border-radius: 4px; + padding: 0.85rem 1rem; + color: #f8fafc !important; + font-size: 0.9rem; + outline: none; + transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); +} + + ::deep .console-input:focus, + ::deep .console-textarea:focus { + border-color: #00f2fe !important; + box-shadow: 0 0 0 1px rgba(0, 242, 254, 0.2), 0 0 12px rgba(0, 242, 254, 0.1) !important; + background: #02060d !important; + } + +::deep .console-textarea { + resize: none; + line-height: 1.5; +} + +/* ========================================================================== + Image Slots & Cloud Upload Dropzones + ========================================================================== */ +::deep .hidden-file-input, +.hidden-file-input { + position: absolute !important; + top: 0 !important; + left: 0 !important; + width: 0 !important; + height: 0 !important; + opacity: 0 !important; + overflow: hidden !important; + pointer-events: none !important; + display: none !important; /* Forces layout removal */ +} + +/* Book Cover - Enforced Portrait Display Frame Aspect Ratio */ +.book-cover-dropzone { + width: 240px; + aspect-ratio: 2 / 3; + background: #060b13; + border: 1px dashed #1e293b; + border-radius: 4px; + position: relative; + overflow: hidden; + transition: all 0.25s ease; +} + + .book-cover-dropzone:hover { + border-color: #00f2fe; + } + +.dropzone-interactive-layer, +.thumbnail-slot-node.empty label { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + width: 100%; + height: 100%; + cursor: pointer; + margin: 0; + padding: 1rem; + box-sizing: border-box; user-select: none; } -.node-dim-label { - color: #475569; - font-size: 0.75rem; - margin-left: 0.25rem; -} - -/* High-Fidelity Branded Form Controls */ -.console-input, .console-textarea { - width: 100%; - background: #060b13; - border: 1px solid #1e293b; - border-radius: 6px; - padding: 0.9rem 1.1rem; - color: #f8fafc; - font-size: 0.92rem; - font-family: inherit; - outline: none; - transition: border-color 0.2s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1); -} - - /* Component Placeholder Styling */ - .console-input::placeholder, .console-textarea::placeholder { - color: #334155; - font-size: 0.88rem; - } - - /* Branded Interactive Focus Transitions */ - .console-input:focus, .console-textarea:focus { - border-color: #00f2fe; - box-shadow: 0 0 0 1px #00f2fe; - } - -.console-textarea { - resize: none; - line-height: 1.6; -} - -/* Asset URL Composite Field Layout Extensions */ -.input-asset-addon { - display: flex; - align-items: stretch; - width: 100%; -} - -.asset-path-input { - border-top-right-radius: 0; - border-bottom-right-radius: 0; -} - -.asset-preview-stub { - background: #0b131f; - border: 1px solid #1e293b; - border-left: none; - border-top-right-radius: 6px; - border-bottom-right-radius: 6px; - display: flex; - align-items: center; - justify-content: center; - width: 54px; - color: #475569; - flex-shrink: 0; - transition: border-color 0.2s ease, color 0.2s ease; -} - -/* Keep addon stub borders synced during primary field focus */ -.input-asset-addon:focus-within .asset-path-input { - border-color: #00f2fe; -} - -.input-asset-addon:focus-within .asset-preview-stub { - border-color: #00f2fe; - color: #00f2fe; -} - -/* Layout Space Tuning Adjustments for Media Sections */ -.spacing-top-modifier { - margin-top: 0.25rem; -} - -/* 5-Item Array Asset Matrix Grid */ +/* Thumbnails Grid */ .thumbnail-deck-grid { display: grid; - grid-template-columns: repeat(5, minmax(0, 1fr)); - gap: 0.85rem; + grid-template-columns: repeat(5, 1fr); + gap: 1rem; + width: 100%; } .thumbnail-slot-node { - aspect-ratio: 1 / 1; + aspect-ratio: 2 / 3; /* Matches portrait layout format smoothly */ background: #060b13; - border: 1px dashed #1e293b; - border-radius: 6px; + border: 1px solid #1e293b; + border-radius: 4px; position: relative; overflow: hidden; - transition: border-color 0.2s ease, background 0.2s ease; } - .thumbnail-slot-node.empty:hover { - border-color: #ff5722; - background: rgba(255, 87, 34, 0.02); + .thumbnail-slot-node.empty { + border: 1px dashed #1e293b; + background: #060b13; + transition: all 0.2s ease; + } + + .thumbnail-slot-node.empty:hover { + border-color: #00f2fe; + background: rgba(0, 242, 254, 0.02); + } + + .thumbnail-slot-node img, + .dropzone-active-preview img { + width: 100%; + height: 100%; + object-fit: cover; } .empty-slot-blueprint { @@ -176,100 +211,154 @@ justify-content: center; height: 100%; color: #334155; - gap: 0.35rem; - user-select: none; + gap: 0.5rem; + cursor: pointer; } - .empty-slot-blueprint svg { - width: 16px; - height: 16px; - } - - .empty-slot-blueprint span { - font-size: 0.65rem; - font-family: monospace; - letter-spacing: 0.02em; - } - -.thumbnail-slot-node.populated { - border-style: solid; - border-color: #1e293b; +/* ========================================================================== + Minimalist Floating Action Micro-Icons + ========================================================================== */ +.image-actions-overlay { + position: absolute; + inset: 0; + background: rgba(4, 8, 15, 0.4); + backdrop-filter: blur(1px); + display: flex; + align-items: center; + justify-content: center; + gap: 0.75rem; + opacity: 0; + transition: opacity 0.2s ease; } - .thumbnail-slot-node.populated img { +/* Show floating control node buttons cleanly on hover state */ +.book-cover-dropzone:hover .image-actions-overlay, +.thumbnail-slot-node:hover .image-actions-overlay { + opacity: 1; +} + +.btn-micro-action { + background: #060b13; + border: 1px solid #1e293b; + color: #cbd5e1; + width: 32px; + height: 32px; + border-radius: 4px; + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + transition: all 0.2s ease; + padding: 0; +} + + .btn-micro-action:hover { + border-color: #00f2fe; + color: #00f2fe; + box-shadow: 0 0 8px rgba(0, 242, 254, 0.3); + } + + .btn-micro-action.danger:hover { + border-color: #ff5722; + color: #ff5722; + box-shadow: 0 0 8px rgba(255, 87, 34, 0.3); + } + +/* ========================================================================== + Sliding Preview System (Left Panel Drawer) + ========================================================================== */ +.book-preview-drawer { + width: 0px; + height: 100%; + background: #04080f; + border-right: 0 solid #1e293b; + overflow: hidden; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + padding: 0; + transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1); + flex-shrink: 0; + position: relative; +} + + .book-preview-drawer.is-open { + width: 340px; + padding: 2rem; + border-right: 1px solid #1e293b; + } + +.drawer-portrait-frame { + width: 100%; + aspect-ratio: 2 / 3; + background: #060b13; + border: 1px solid #1e293b; + border-radius: 4px; + box-shadow: 0 0 30px rgba(0, 0, 0, 0.6); + overflow: hidden; + position: relative; +} + + .drawer-portrait-frame img { width: 100%; height: 100%; object-fit: cover; } -.btn-clear-slot { +/* Floating Close Action Icon sitting directly on top inside the drawer viewport frame */ +.btn-close-preview-floating { position: absolute; - top: 4px; - right: 4px; - background: #0f172a; - border: 1px solid #334155; - color: #cbd5e1; + top: 12px; + right: 12px; + background: rgba(6, 11, 19, 0.85); + border: 1px solid #1e293b; + color: #64748b; + width: 28px; + height: 28px; border-radius: 4px; - width: 18px; - height: 18px; - font-size: 0.65rem; - cursor: pointer; display: flex; align-items: center; justify-content: center; - opacity: 0; - transition: opacity 0.15s ease, border-color 0.15s ease; + cursor: pointer; + transition: all 0.2s ease; + z-index: 10; } - .btn-clear-slot:hover { + .btn-close-preview-floating:hover { border-color: #ff5722; color: #ff5722; } -.thumbnail-slot-node.populated:hover .btn-clear-slot { - opacity: 1; -} - -/* Form Action Control Bar Layout */ +/* ========================================================================== + Footer Action Dashboard Bar + ========================================================================= */ .form-action-footer { - padding: 1.5rem 2.5rem; + padding: 0.85rem 2.5rem; background: #04080f; border-top: 1px solid #1e293b; display: flex; justify-content: flex-end; - gap: 1.5rem; + gap: 1.25rem; align-items: center; } -.btn-console-flat { - background: transparent; - border: none; - color: #64748b; - font-size: 0.9rem; - font-weight: 500; - cursor: pointer; - padding: 0.6rem 1.2rem; - border-radius: 4px; - transition: color 0.2s ease; -} - - .btn-console-flat:hover { - color: #f1f5f9; - } - -/* Using your brand active cyan color for submission commits */ .btn-apply-filters { - background: #00f2fe; - border: none; - color: #060b13; + background: rgba(0, 242, 254, 0.05); + border: 1px solid #00f2fe; + color: #00f2fe; + font-family: 'JetBrains Mono', monospace; font-weight: 600; - font-size: 0.9rem; - padding: 0.75rem 1.5rem; + font-size: 0.85rem; + padding: 0.55rem 1.5rem; border-radius: 4px; cursor: pointer; - transition: background-color 0.2s ease, opacity 0.2s ease; + letter-spacing: 0.02em; + transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); } .btn-apply-filters:hover { - background: #00d8e4; + background: #00f2fe; + color: #060b13; + box-shadow: 0 0 15px rgba(0, 242, 254, 0.3); } diff --git a/ShopAdmin/Program.cs b/ShopAdmin/Program.cs index fa01f7d..12fb7ec 100644 --- a/ShopAdmin/Program.cs +++ b/ShopAdmin/Program.cs @@ -17,6 +17,7 @@ builder.Services.AddBlazoredToast(); builder.Services.AddEndpointsApiExplorer(); builder.Services.AddMediator(); +builder.Services.AddGarageS3(builder.Configuration); builder.Services.AddScoped(typeof(IPipelineBehavior<,>), typeof(TelemetryPipelineBehavior<,>)); builder.Services.AddScoped(typeof(IPipelineBehavior<,>), typeof(LoggingPipelineBehavior<,>)); diff --git a/ShopAdmin/ShopAdmin.csproj b/ShopAdmin/ShopAdmin.csproj index 0770f5b..1691733 100644 --- a/ShopAdmin/ShopAdmin.csproj +++ b/ShopAdmin/ShopAdmin.csproj @@ -16,7 +16,7 @@ - + @@ -58,6 +58,7 @@ + diff --git a/ShopAdmin/appsettings.json b/ShopAdmin/appsettings.json index 7eb3aaa..fee834a 100644 --- a/ShopAdmin/appsettings.json +++ b/ShopAdmin/appsettings.json @@ -1,4 +1,10 @@ { + "BookshopS3Settings": { + "ServiceUrl": "http://192.168.1.177:30900", + "Region": "garage", + "BucketName": "bookshop", + "CdnBaseUrl": "https://bookshop.cdn.khongisa.co.za" + }, "IdKongisa": { "Authority": "https://id.khongisa.co.za/application/o/litecharms-shopadmin" }, diff --git a/litecharms-shopadmin-uat.yml b/litecharms-shopadmin-uat.yml index 7586be7..b89974e 100644 --- a/litecharms-shopadmin-uat.yml +++ b/litecharms-shopadmin-uat.yml @@ -15,6 +15,8 @@ data: Monitoring__Address: "http://aspire-dashboard-service.aspire.svc.cluster.local:18889" Monitoring__ServiceName: "LiteCharms.ShopAdmin.Uat" IdKongisa__Authority: "https://id.khongisa.co.za/application/o/litecharms-shopadmin" + BooshopS3Settings__ServiceUrl: "http://garage.garage.svc.cluster.local:3900" + BooshopS3Settings__Region: "garage" --- apiVersion: v1 kind: Secret @@ -28,6 +30,8 @@ data: aspire-apikey: bWMzRzYzSzJqNVpPRXNpMEFqTW9qTFRYbTFLRVpGY3R6SUlqU3dEaVRHdXQ4cUdTa1B1V3d4R1AxUmJzY0pVbw== auth-clientid: NUxldE5hSERsUlhOWXo1N3FkMVV1RWN4R01uUDNmT3FXc0RHcWdjUg== auth-clientsecret: a3ZxN3k1anc0M0g4WDRjQW91eGRqRDhNNXdxVUhUQ2I4UjNSVjNVWjI4TUZjTk51NWxhM3g3V1ZZRzQ2QnJFMjVPMnhXRmhoeEk0VXNSaFlMTHRqSGRhWWVrUTBmdHpIQ3ZNczV5TXdRdERpcDBkM3QzTkNDa0RtN1JXeW1XSTg= + bookshop-s3-accesskey: R0s1MTRkMmNlOGRjNjkyMzdhMDVjMDFlZWY= + bookshop-s3-secretkey: ZWFhZmVkYTFhZWQ0MDllY2ZlNjA3MTRlY2RhNTQ5YjgyYmRmNWEzZGFmOWYxOGRkNjFmNjZiNDk3M2E2NDgyZQ== --- apiVersion: v1 kind: PersistentVolumeClaim @@ -80,6 +84,16 @@ spec: - configMapRef: name: shopadmin-config env: + - name: BookshopS3Settings__AccessKey + valueFrom: + secretKeyRef: + name: shopadmin-secrets + key: bookshop-s3-accesskey + - name: BookshopS3Settings__SecretKey + valueFrom: + secretKeyRef: + name: shopadmin-secrets + key: bookshop-s3-secretkey - name: ConnectionStrings__PostgresScheduler valueFrom: secretKeyRef: