Gagandeep/syscom-master-admin-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

orgnanization onboarding stepper form changes, code refactor for custom data-table grid

Browse Source
This commit is contained in:
Gagan7900
2026-07-28 12:07:28 +05:30
parent 95fc5bf17f
commit 9ce058895c
154 changed files with 5480 additions and 9738 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/features/settings/pages/branding/branding.html
+135 -30
View File
@@ -6,15 +6,43 @@
</div>
<div class="box-body">
<form [formGroup]="brandingForm" autocomplete="off">
<form [formGroup]="brandingForm" autocomplete="off" (ngSubmit)="onSave()">
<div class="grid grid-cols-12 gap-x-5 gap-y-5">
<!-- Organization Logo -->
<div class="col-span-12 md:col-span-3">
<input #orgLogoInput type="file" class="hidden" accept="image/*" (change)="onFileSelected($event, 'orgLogo')">
<div
class="border border-dashed border-gray-400 rounded-md bg-gray-50/30 flex flex-col items-center justify-center py-8 px-4 text-center text-sm text-gray-500 cursor-pointer hover:bg-gray-100 transition-colors h-full">
<span class="flex items-center gap-1 italic mb-1">
class="border border-dashed rounded-md flex flex-col items-center justify-center p-4 text-center text-sm cursor-pointer transition-all min-h-36 h-full relative group"
[class.border-primary]="uploads().orgLogo.isDragging" [class.bg-primary\/5]="uploads().orgLogo.isDragging"
[class.border-gray-400]="!uploads().orgLogo.isDragging && !uploads().orgLogo.file"
[class.border-primary\/60]="!uploads().orgLogo.isDragging && uploads().orgLogo.file"
[class.bg-gray-50\/30]="!uploads().orgLogo.isDragging" (click)="triggerFileInput(orgLogoInput)"
(dragover)="onDragOver($event, 'orgLogo')" (dragleave)="onDragLeave($event, 'orgLogo')"
(drop)="onDrop($event, 'orgLogo')">
@if (uploads().orgLogo.file) {
<div class="flex flex-col items-center justify-center w-full h-full gap-2">
@if (uploads().orgLogo.previewUrl) {
<img [src]="uploads().orgLogo.previewUrl" alt="Organization Logo"
class="max-h-20 max-w-full object-contain rounded shadow-sm">
} @else {
<i class="ri-file-text-line text-3xl text-primary"></i>
}
<div class="text-xs text-gray-600 font-medium truncate max-w-full px-2">
{{ uploads().orgLogo.fileName }}
</div>
<div class="text-[11px] text-gray-400">
{{ uploads().orgLogo.fileSize }}
</div>
<button type="button"
class="mt-1 text-xs text-danger hover:text-danger/80 flex items-center gap-1 cursor-pointer z-10"
(click)="removeFile('orgLogo', $event)">
<i class="ri-delete-bin-line"></i> Remove
</button>
</div>
} @else {
<span class="flex items-center gap-1 italic mb-1 font-medium text-gray-600">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2"
stroke="currentColor" class="w-4 h-4 text-gray-400">
<path stroke-linecap="round" stroke-linejoin="round" d="M8.25 6.75 12 3m0 0 3.75 3.75M12 3v18" />
@@ -22,14 +50,46 @@
Organization Logo
</span>
<span class="text-xs text-gray-400 italic">(click or drag file here)</span>
}
</div>
</div>
<!-- White Logo -->
<div class="col-span-12 md:col-span-3">
<input #whiteLogoInput type="file" class="hidden" accept="image/*"
(change)="onFileSelected($event, 'whiteLogo')">
<div
class="border border-dashed border-gray-400 rounded-md bg-gray-50/30 flex flex-col items-center justify-center py-8 px-4 text-center text-sm text-gray-500 cursor-pointer hover:bg-gray-100 transition-colors h-full">
<span class="flex items-center gap-1 italic mb-1">
class="border border-dashed rounded-md flex flex-col items-center justify-center p-4 text-center text-sm cursor-pointer transition-all min-h-36 h-full relative group"
[class.border-primary]="uploads().whiteLogo.isDragging"
[class.bg-primary\/5]="uploads().whiteLogo.isDragging"
[class.border-gray-400]="!uploads().whiteLogo.isDragging && !uploads().whiteLogo.file"
[class.border-primary\/60]="!uploads().whiteLogo.isDragging && uploads().whiteLogo.file"
[class.bg-gray-50\/30]="!uploads().whiteLogo.isDragging" (click)="triggerFileInput(whiteLogoInput)"
(dragover)="onDragOver($event, 'whiteLogo')" (dragleave)="onDragLeave($event, 'whiteLogo')"
(drop)="onDrop($event, 'whiteLogo')">
@if (uploads().whiteLogo.file) {
<div class="flex flex-col items-center justify-center w-full h-full gap-2">
@if (uploads().whiteLogo.previewUrl) {
<div class="p-2 bg-gray-800 rounded">
<img [src]="uploads().whiteLogo.previewUrl" alt="White Logo" class="max-h-16 max-w-full object-contain">
</div>
} @else {
<i class="ri-file-text-line text-3xl text-primary"></i>
}
<div class="text-xs text-gray-600 font-medium truncate max-w-full px-2">
{{ uploads().whiteLogo.fileName }}
</div>
<div class="text-[11px] text-gray-400">
{{ uploads().whiteLogo.fileSize }}
</div>
<button type="button"
class="mt-1 text-xs text-danger hover:text-danger/80 flex items-center gap-1 cursor-pointer z-10"
(click)="removeFile('whiteLogo', $event)">
<i class="ri-delete-bin-line"></i> Remove
</button>
</div>
} @else {
<span class="flex items-center gap-1 italic mb-1 font-medium text-gray-600">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2"
stroke="currentColor" class="w-4 h-4 text-gray-400">
<path stroke-linecap="round" stroke-linejoin="round" d="M8.25 6.75 12 3m0 0 3.75 3.75M12 3v18" />
@@ -37,14 +97,43 @@
White Logo (dark bg)
</span>
<span class="text-xs text-gray-400 italic">(click or drag file here)</span>
}
</div>
</div>
<!-- Favicon -->
<div class="col-span-12 md:col-span-3">
<input #faviconInput type="file" class="hidden" accept="image/*" (change)="onFileSelected($event, 'favicon')">
<div
class="border border-dashed border-gray-400 rounded-md bg-gray-50/30 flex flex-col items-center justify-center py-8 px-4 text-center text-sm text-gray-500 cursor-pointer hover:bg-gray-100 transition-colors h-full">
<span class="flex items-center gap-1 italic mb-1">
class="border border-dashed rounded-md flex flex-col items-center justify-center p-4 text-center text-sm cursor-pointer transition-all min-h-36 h-full relative group"
[class.border-primary]="uploads().favicon.isDragging" [class.bg-primary\/5]="uploads().favicon.isDragging"
[class.border-gray-400]="!uploads().favicon.isDragging && !uploads().favicon.file"
[class.border-primary\/60]="!uploads().favicon.isDragging && uploads().favicon.file"
[class.bg-gray-50\/30]="!uploads().favicon.isDragging" (click)="triggerFileInput(faviconInput)"
(dragover)="onDragOver($event, 'favicon')" (dragleave)="onDragLeave($event, 'favicon')"
(drop)="onDrop($event, 'favicon')">
@if (uploads().favicon.file) {
<div class="flex flex-col items-center justify-center w-full h-full gap-2">
@if (uploads().favicon.previewUrl) {
<img [src]="uploads().favicon.previewUrl" alt="Favicon"
class="max-h-16 max-w-full object-contain rounded shadow-sm">
} @else {
<i class="ri-file-text-line text-3xl text-primary"></i>
}
<div class="text-xs text-gray-600 font-medium truncate max-w-full px-2">
{{ uploads().favicon.fileName }}
</div>
<div class="text-[11px] text-gray-400">
{{ uploads().favicon.fileSize }}
</div>
<button type="button"
class="mt-1 text-xs text-danger hover:text-danger/80 flex items-center gap-1 cursor-pointer z-10"
(click)="removeFile('favicon', $event)">
<i class="ri-delete-bin-line"></i> Remove
</button>
</div>
} @else {
<span class="flex items-center gap-1 italic mb-1 font-medium text-gray-600">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2"
stroke="currentColor" class="w-4 h-4 text-gray-400">
<path stroke-linecap="round" stroke-linejoin="round" d="M8.25 6.75 12 3m0 0 3.75 3.75M12 3v18" />
@@ -52,14 +141,45 @@
Favicon / Icon
</span>
<span class="text-xs text-gray-400 italic">(click or drag file here)</span>
}
</div>
</div>
<!-- Digital Seal -->
<div class="col-span-12 md:col-span-3">
<input #digitalSealInput type="file" class="hidden" accept="image/*"
(change)="onFileSelected($event, 'digitalSeal')">
<div
class="border border-dashed border-gray-400 rounded-md bg-gray-50/30 flex flex-col items-center justify-center py-8 px-4 text-center text-sm text-gray-500 cursor-pointer hover:bg-gray-100 transition-colors h-full">
<span class="flex items-center gap-1 italic mb-1">
class="border border-dashed rounded-md flex flex-col items-center justify-center p-4 text-center text-sm cursor-pointer transition-all min-h-36 h-full relative group"
[class.border-primary]="uploads().digitalSeal.isDragging"
[class.bg-primary\/5]="uploads().digitalSeal.isDragging"
[class.border-gray-400]="!uploads().digitalSeal.isDragging && !uploads().digitalSeal.file"
[class.border-primary\/60]="!uploads().digitalSeal.isDragging && uploads().digitalSeal.file"
[class.bg-gray-50\/30]="!uploads().digitalSeal.isDragging" (click)="triggerFileInput(digitalSealInput)"
(dragover)="onDragOver($event, 'digitalSeal')" (dragleave)="onDragLeave($event, 'digitalSeal')"
(drop)="onDrop($event, 'digitalSeal')">
@if (uploads().digitalSeal.file) {
<div class="flex flex-col items-center justify-center w-full h-full gap-2">
@if (uploads().digitalSeal.previewUrl) {
<img [src]="uploads().digitalSeal.previewUrl" alt="Digital Seal"
class="max-h-20 max-w-full object-contain rounded shadow-sm">
} @else {
<i class="ri-file-text-line text-3xl text-primary"></i>
}
<div class="text-xs text-gray-600 font-medium truncate max-w-full px-2">
{{ uploads().digitalSeal.fileName }}
</div>
<div class="text-[11px] text-gray-400">
{{ uploads().digitalSeal.fileSize }}
</div>
<button type="button"
class="mt-1 text-xs text-danger hover:text-danger/80 flex items-center gap-1 cursor-pointer z-10"
(click)="removeFile('digitalSeal', $event)">
<i class="ri-delete-bin-line"></i> Remove
</button>
</div>
} @else {
<span class="flex items-center gap-1 italic mb-1 font-medium text-gray-600">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2"
stroke="currentColor" class="w-4 h-4 text-gray-400">
<path stroke-linecap="round" stroke-linejoin="round" d="M8.25 6.75 12 3m0 0 3.75 3.75M12 3v18" />
@@ -67,6 +187,7 @@
Digital Seal & Signature
</span>
<span class="text-xs text-gray-400 italic">(click or drag file here)</span>
}
</div>
</div>
@@ -94,28 +215,12 @@
</form>
</div>
<div class="box-footer">
<!-- Mobile View (< 640px) -->
<div class="flex flex-col gap-2.5 sm:hidden">
<div class="w-full">
<app-button action="save" label="Save Changes" [showIcon]="true" [fullWidth]="true"
className="onboarding-nav-btn w-full"></app-button>
</div>
<div class="w-full">
<app-button action="cancel" label="Discard" [showIcon]="true" [fullWidth]="true"
className="w-full"></app-button>
</div>
<div class="box-footer modern-modal-footer flex flex-col-reverse sm:flex-row sm:justify-between sm:items-center gap-3">
<div class="w-full sm:w-auto">
<app-button action="cancel" label="Cancel" [showIcon]="true" [fullWidth]="true" (buttonClicked)="onDiscard()" />
</div>
<!-- Desktop View (>= 640px) -->
<div class="hidden w-full sm:flex sm:justify-between sm:items-center sm:gap-3">
<div class="justify-self-start">
<app-button action="cancel" label="Discard" [showIcon]="true"></app-button>
</div>
<div class="justify-self-end">
<app-button action="save" label="Save Changes" [showIcon]="true"
className="onboarding-nav-btn"></app-button>
</div>
<div class="w-full sm:w-auto">
<app-button action="save" label="Save" [showIcon]="true" [fullWidth]="true" (buttonClicked)="onSave()" />
</div>
</div>
</div>