@flusys/ng-storage 0.1.0-alpha.1

package/fesm2022/flusys-ng-storage-file-manager-form.component-BI0hgXeI.mjs

@@ -0,0 +1,716 @@
+import * as i0 from '@angular/core';
+import { inject, signal, computed, Component } from '@angular/core';
+import { form, required, FormField } from '@angular/forms/signals';
+import { Router, ActivatedRoute } from '@angular/router';
+import { APP_CONFIG, DEFAULT_APP_NAME } from '@flusys/ng-core';
+import { LAYOUT_AUTH_STATE } from '@flusys/ng-layout';
+import { AngularModule, PrimeModule } from '@flusys/ng-shared';
+import { MessageService } from 'primeng/api';
+import { firstValueFrom } from 'rxjs';
+import { FileManagerApiService, UploadService, StorageConfigApiService, FolderApiService } from './flusys-ng-storage.mjs';
+import * as i1 from '@angular/forms';
+import * as i2 from 'primeng/inputtext';
+import * as i3 from 'primeng/button';
+import * as i4 from 'primeng/fileupload';
+
+/**
+ * File Manager Form Component
+ * Upload and edit file metadata
+ */
+class FileManagerFormComponent {
+    router = inject(Router);
+    route = inject(ActivatedRoute);
+    messageService = inject(MessageService);
+    fileService = inject(FileManagerApiService);
+    uploadService = inject(UploadService);
+    configService = inject(StorageConfigApiService);
+    folderService = inject(FolderApiService);
+    appConfig = inject(APP_CONFIG);
+    companyContext = inject(LAYOUT_AUTH_STATE);
+    isLoading = signal(false, ...(ngDevMode ? [{ debugName: "isLoading" }] : []));
+    isLoadingConfigs = signal(false, ...(ngDevMode ? [{ debugName: "isLoadingConfigs" }] : []));
+    isLoadingFolders = signal(false, ...(ngDevMode ? [{ debugName: "isLoadingFolders" }] : []));
+    existingFile = signal(null, ...(ngDevMode ? [{ debugName: "existingFile" }] : []));
+    isEditMode = computed(() => !!this.existingFile(), ...(ngDevMode ? [{ debugName: "isEditMode" }] : []));
+    selectedFile = signal(null, ...(ngDevMode ? [{ debugName: "selectedFile" }] : []));
+    availableConfigs = signal([], ...(ngDevMode ? [{ debugName: "availableConfigs" }] : []));
+    availableFolders = signal([], ...(ngDevMode ? [{ debugName: "availableFolders" }] : []));
+    showCompanyInfo = computed(() => this.appConfig.enableCompanyFeature, ...(ngDevMode ? [{ debugName: "showCompanyInfo" }] : []));
+    currentCompanyName = computed(() => this.companyContext.currentCompanyInfo()?.name ?? DEFAULT_APP_NAME, ...(ngDevMode ? [{ debugName: "currentCompanyName" }] : []));
+    // ============================================
+    // Form (Signal Forms)
+    // ============================================
+    /** Form model */
+    formModel = signal({
+        id: '',
+        name: '',
+        isPrivate: false,
+        folderId: '',
+        storageConfigId: '',
+    }, ...(ngDevMode ? [{ debugName: "formModel" }] : []));
+    /** Form with validation schema */
+    fileForm = form(this.formModel, (f) => {
+        required(f.name, { message: 'File name is required' });
+        // storageConfigId validation will be done manually in onSubmit
+        // as it's only required for new uploads, not edits
+    });
+    /** Check if form is valid */
+    isFormValid = computed(() => {
+        const model = this.formModel();
+        return model.name.trim().length > 0;
+    }, ...(ngDevMode ? [{ debugName: "isFormValid" }] : []));
+    ngOnInit() {
+        const fileId = this.route.snapshot.paramMap.get('id');
+        if (fileId) {
+            this.loadFile(fileId);
+        }
+        else {
+            // Load storage configurations for new upload
+            this.loadStorageConfigs();
+        }
+        // Load folders for both create and edit modes
+        this.loadFolders();
+    }
+    async loadStorageConfigs() {
+        this.isLoadingConfigs.set(true);
+        try {
+            const response = await firstValueFrom(this.configService.getAll('', {
+                pagination: { currentPage: 0, pageSize: 100 },
+                filter: {},
+                select: [],
+                sort: {},
+            }));
+            if (response.success && response.data) {
+                this.availableConfigs.set(response.data);
+                // Auto-select first config if only one available
+                if (response.data.length === 1) {
+                    this.formModel.update((m) => ({
+                        ...m,
+                        storageConfigId: response.data[0].id,
+                    }));
+                }
+            }
+        }
+        catch (error) {
+            this.messageService.add({
+                severity: 'error',
+                summary: 'Error',
+                detail: 'Failed to load storage configurations.',
+            });
+        }
+        finally {
+            this.isLoadingConfigs.set(false);
+        }
+    }
+    async loadFolders() {
+        this.isLoadingFolders.set(true);
+        try {
+            const response = await firstValueFrom(this.folderService.getAll('', {
+                pagination: { currentPage: 0, pageSize: 100 },
+                filter: {},
+                select: [],
+                sort: {},
+            }));
+            if (response.success && response.data) {
+                this.availableFolders.set(response.data);
+            }
+        }
+        catch (error) {
+            // Silently fail - folders are optional
+            console.error('Failed to load folders:', error);
+        }
+        finally {
+            this.isLoadingFolders.set(false);
+        }
+    }
+    async loadFile(id) {
+        this.isLoading.set(true);
+        try {
+            const response = await this.fileService.findByIdAsync(id);
+            if (response.success && response.data) {
+                const file = response.data;
+                this.existingFile.set(file);
+                this.formModel.set({
+                    id: file.id,
+                    name: file.name,
+                    isPrivate: file.isPrivate ?? false,
+                    folderId: file.folderId ?? '',
+                    storageConfigId: '',
+                });
+            }
+        }
+        catch (error) {
+            this.messageService.add({
+                severity: 'error',
+                summary: 'Error',
+                detail: 'Failed to load file.',
+            });
+            this.router.navigate(['/storage/files']);
+        }
+        finally {
+            this.isLoading.set(false);
+        }
+    }
+    onFileSelect(event) {
+        const file = event.files?.[0] || event.currentFiles?.[0];
+        if (file) {
+            this.selectedFile.set(file);
+            // Auto-fill file name
+            this.formModel.update((m) => ({ ...m, name: file.name }));
+        }
+    }
+    async onSubmit() {
+        if (!this.isFormValid())
+            return;
+        this.isLoading.set(true);
+        try {
+            const formValue = this.formModel();
+            if (this.isEditMode()) {
+                // Update existing file metadata only
+                await this.fileService.updateAsync({
+                    id: formValue.id,
+                    name: formValue.name,
+                    isPrivate: formValue.isPrivate,
+                    folderId: formValue.folderId || null,
+                });
+                this.messageService.add({
+                    severity: 'success',
+                    summary: 'Success',
+                    detail: 'File updated successfully.',
+                });
+            }
+            else {
+                // Upload new file
+                const file = this.selectedFile();
+                if (!file) {
+                    this.messageService.add({
+                        severity: 'error',
+                        summary: 'Error',
+                        detail: 'Please select a file to upload.',
+                    });
+                    return;
+                }
+                // Validate storage config selection
+                if (!formValue.storageConfigId) {
+                    this.messageService.add({
+                        severity: 'error',
+                        summary: 'Error',
+                        detail: 'Please select a storage configuration.',
+                    });
+                    return;
+                }
+                // Upload file first
+                const uploadResponse = await firstValueFrom(this.uploadService.uploadSingleFile(file, {
+                    compress: true,
+                    quality: 85,
+                    storageConfigId: formValue.storageConfigId,
+                }));
+                if (uploadResponse.success && uploadResponse.data) {
+                    const uploadedFileInfo = uploadResponse.data;
+                    // Save file metadata
+                    await this.fileService.insertAsync({
+                        name: formValue.name,
+                        key: uploadedFileInfo.key,
+                        contentType: file.type || 'application/octet-stream',
+                        size: Math.round(file.size / 1024).toString(),
+                        isPrivate: formValue.isPrivate,
+                        folderId: formValue.folderId || undefined,
+                        storageConfigId: formValue.storageConfigId, // ✅ Include storage config ID
+                    });
+                    this.messageService.add({
+                        severity: 'success',
+                        summary: 'Success',
+                        detail: 'File uploaded successfully.',
+                    });
+                }
+                else {
+                    throw new Error('Upload failed');
+                }
+            }
+            this.router.navigate(['/storage/files']);
+        }
+        catch (error) {
+            this.messageService.add({
+                severity: 'error',
+                summary: 'Error',
+                detail: error?.message ||
+                    `Failed to ${this.isEditMode() ? 'update' : 'upload'} file.`,
+            });
+        }
+        finally {
+            this.isLoading.set(false);
+        }
+    }
+    onCancel() {
+        this.router.navigate(['/storage/files']);
+    }
+    formatFileSize(bytes) {
+        if (bytes === 0)
+            return '0 Bytes';
+        const k = 1024;
+        const sizes = ['Bytes', 'KB', 'MB', 'GB'];
+        const i = Math.floor(Math.log(bytes) / Math.log(k));
+        return Math.round((bytes / Math.pow(k, i)) * 100) / 100 + ' ' + sizes[i];
+    }
+    getProviderLabel(storage) {
+        const labels = {
+            AWS: 'AWS S3',
+            AZURE: 'Azure Blob',
+            SFTP: 'SFTP',
+            LOCAL: 'Local',
+        };
+        return labels[storage] || storage;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: FileManagerFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: FileManagerFormComponent, isStandalone: true, selector: "lib-file-manager-form", ngImport: i0, template: `
+    <div class="card">
+      <div class="flex justify-between items-center mb-4">
+        <div>
+          <h3 class="text-xl font-semibold">
+            {{ isEditMode() ? 'Edit File' : 'Upload File' }}
+          </h3>
+          @if (showCompanyInfo()) {
+            <p class="text-sm text-gray-600 mt-1">
+              Company: {{ currentCompanyName() }}
+            </p>
+          }
+        </div>
+        <p-button
+          label="Back"
+          icon="pi pi-arrow-left"
+          severity="secondary"
+          [text]="true"
+          (onClick)="onCancel()"
+        />
+      </div>
+
+      <form (ngSubmit)="onSubmit()">
+        <!-- Storage Configuration & Folder Selection (only for new files) -->
+        @if (!isEditMode()) {
+          <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
+            <!-- Storage Configuration -->
+            <div class="field">
+              <label for="storageConfig" class="block font-medium mb-2"
+                >Storage Configuration *</label
+              >
+              <select
+                id="storageConfig"
+                class="p-select-native"
+                [formField]="fileForm.storageConfigId"
+              >
+                <option value="">Select storage configuration...</option>
+                @for (config of availableConfigs(); track config.id) {
+                  <option [value]="config.id">
+                    {{ config.name }} ({{ getProviderLabel(config.storage) }})
+                  </option>
+                }
+              </select>
+              @if (availableConfigs().length === 0 && !isLoadingConfigs()) {
+                <small class="text-orange-600 block mt-2">
+                  <i class="pi pi-exclamation-triangle mr-1"></i>
+                  No storage configurations found. Please create one first.
+                </small>
+              }
+            </div>
+
+            <!-- Folder Selection -->
+            <div class="field">
+              <label for="folder" class="block font-medium mb-2"
+                >Folder (Optional)</label
+              >
+              <select
+                id="folder"
+                class="p-select-native"
+                [formField]="fileForm.folderId"
+              >
+                <option value="">No folder (root level)</option>
+                @for (folder of availableFolders(); track folder.id) {
+                  <option [value]="folder.id">{{ folder.name }}</option>
+                }
+              </select>
+              @if (availableFolders().length === 0 && !isLoadingFolders()) {
+                <small class="text-gray-600 block mt-2">
+                  <i class="pi pi-info-circle mr-1"></i>
+                  No folders available. File will be uploaded to root level.
+                </small>
+              }
+            </div>
+          </div>
+        } @else {
+          <!-- Folder Selection for Edit Mode -->
+          <div class="field mb-4">
+            <label for="folder" class="block font-medium mb-2"
+              >Folder (Optional)</label
+            >
+            <select
+              id="folder"
+              class="p-select-native"
+              [formField]="fileForm.folderId"
+            >
+              <option value="">No folder (root level)</option>
+              @for (folder of availableFolders(); track folder.id) {
+                <option [value]="folder.id">{{ folder.name }}</option>
+              }
+            </select>
+            @if (availableFolders().length === 0 && !isLoadingFolders()) {
+              <small class="text-gray-600 block mt-2">
+                <i class="pi pi-info-circle mr-1"></i>
+                No folders available.
+              </small>
+            }
+          </div>
+        }
+
+        <!-- File Upload (only for new files) -->
+        @if (!isEditMode()) {
+          <div class="field mb-4">
+            <label class="block font-medium mb-2">Select File *</label>
+            <p-fileupload
+              #fileUpload
+              [customUpload]="true"
+              (onSelect)="onFileSelect($event)"
+              [multiple]="false"
+              [maxFileSize]="50000000"
+              [showUploadButton]="false"
+              [showCancelButton]="false"
+              chooseLabel="Choose File"
+              chooseIcon="pi pi-upload"
+              accept="*/*"
+              class="w-full"
+            >
+              <ng-template #content let-files>
+                @if (files && files.length > 0) {
+                  <div class="flex flex-col gap-2">
+                    @for (file of files; track file.name) {
+                      <div class="flex items-center gap-3 p-3 border rounded">
+                        <i class="pi pi-file text-2xl"></i>
+                        <div class="flex-1">
+                          <div class="font-medium">{{ file.name }}</div>
+                          <div class="text-sm text-gray-600">
+                            {{ formatFileSize(file.size) }}
+                          </div>
+                        </div>
+                        <p-button
+                          icon="pi pi-times"
+                          [text]="true"
+                          severity="danger"
+                          size="small"
+                          (onClick)="fileUpload.clear()"
+                        />
+                      </div>
+                    }
+                  </div>
+                } @else {
+                  <div
+                    class="flex items-center justify-center flex-col p-8 border-2 border-dashed border-gray-300 rounded"
+                  >
+                    <i
+                      class="pi pi-cloud-upload text-4xl text-gray-400 mb-3"
+                    ></i>
+                    <p class="text-gray-600">
+                      Drag and drop file here or click to browse
+                    </p>
+                    <p class="text-sm text-gray-500 mt-2">
+                      Maximum file size: 50MB
+                    </p>
+                  </div>
+                }
+              </ng-template>
+            </p-fileupload>
+            @if (!selectedFile() && !isEditMode()) {
+              <small class="text-gray-600"
+                >Please select a file to upload</small
+              >
+            }
+          </div>
+        }
+
+        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+          <!-- File Name (read-only for uploads, editable for existing) -->
+          <div class="field md:col-span-2">
+            <label for="name" class="block font-medium mb-2">File Name *</label>
+            <input
+              pInputText
+              id="name"
+              [formField]="fileForm.name"
+              [placeholder]="
+                isEditMode()
+                  ? 'Enter file name'
+                  : 'Will be auto-filled from selected file'
+              "
+              class="w-full"
+            />
+          </div>
+
+          <!-- Privacy Toggle -->
+          <div class="field">
+            <label class="p-checkbox-native">
+              <input type="checkbox" [formField]="fileForm.isPrivate" />
+              <span>Private File</span>
+            </label>
+            <small class="text-gray-600 block mt-2">
+              {{
+                formModel().isPrivate
+                  ? 'Only users with permission can access'
+                  : 'File is publicly accessible'
+              }}
+            </small>
+          </div>
+        </div>
+
+        <div class="flex gap-2 mt-4">
+          <p-button
+            type="submit"
+            [label]="isEditMode() ? 'Update' : 'Upload'"
+            [icon]="isEditMode() ? 'pi pi-check' : 'pi pi-cloud-upload'"
+            [loading]="isLoading()"
+            [disabled]="
+              !isFormValid() ||
+              (!isEditMode() && !selectedFile()) ||
+              isLoading()
+            "
+          />
+          <p-button
+            type="button"
+            label="Cancel"
+            severity="secondary"
+            icon="pi pi-times"
+            [text]="true"
+            (onClick)="onCancel()"
+          />
+        </div>
+      </form>
+    </div>
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: AngularModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]):not([formArray]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: PrimeModule }, { kind: "directive", type: i2.InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pInputTextPT", "pInputTextUnstyled", "pSize", "variant", "fluid", "invalid"] }, { kind: "component", type: i3.Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: i4.FileUpload, selector: "p-fileupload, p-fileUpload", inputs: ["name", "url", "method", "multiple", "accept", "disabled", "auto", "withCredentials", "maxFileSize", "invalidFileSizeMessageSummary", "invalidFileSizeMessageDetail", "invalidFileTypeMessageSummary", "invalidFileTypeMessageDetail", "invalidFileLimitMessageDetail", "invalidFileLimitMessageSummary", "style", "styleClass", "previewWidth", "chooseLabel", "uploadLabel", "cancelLabel", "chooseIcon", "uploadIcon", "cancelIcon", "showUploadButton", "showCancelButton", "mode", "headers", "customUpload", "fileLimit", "uploadStyleClass", "cancelStyleClass", "removeStyleClass", "chooseStyleClass", "chooseButtonProps", "uploadButtonProps", "cancelButtonProps", "files"], outputs: ["onBeforeUpload", "onSend", "onUpload", "onError", "onClear", "onRemove", "onSelect", "onProgress", "uploadHandler", "onImageError", "onRemoveUploadedFile"] }, { kind: "directive", type: FormField, selector: "[formField]", inputs: ["formField"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: FileManagerFormComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'lib-file-manager-form',
+                    standalone: true,
+                    imports: [AngularModule, PrimeModule, FormField],
+                    template: `
+    <div class="card">
+      <div class="flex justify-between items-center mb-4">
+        <div>
+          <h3 class="text-xl font-semibold">
+            {{ isEditMode() ? 'Edit File' : 'Upload File' }}
+          </h3>
+          @if (showCompanyInfo()) {
+            <p class="text-sm text-gray-600 mt-1">
+              Company: {{ currentCompanyName() }}
+            </p>
+          }
+        </div>
+        <p-button
+          label="Back"
+          icon="pi pi-arrow-left"
+          severity="secondary"
+          [text]="true"
+          (onClick)="onCancel()"
+        />
+      </div>
+
+      <form (ngSubmit)="onSubmit()">
+        <!-- Storage Configuration & Folder Selection (only for new files) -->
+        @if (!isEditMode()) {
+          <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
+            <!-- Storage Configuration -->
+            <div class="field">
+              <label for="storageConfig" class="block font-medium mb-2"
+                >Storage Configuration *</label
+              >
+              <select
+                id="storageConfig"
+                class="p-select-native"
+                [formField]="fileForm.storageConfigId"
+              >
+                <option value="">Select storage configuration...</option>
+                @for (config of availableConfigs(); track config.id) {
+                  <option [value]="config.id">
+                    {{ config.name }} ({{ getProviderLabel(config.storage) }})
+                  </option>
+                }
+              </select>
+              @if (availableConfigs().length === 0 && !isLoadingConfigs()) {
+                <small class="text-orange-600 block mt-2">
+                  <i class="pi pi-exclamation-triangle mr-1"></i>
+                  No storage configurations found. Please create one first.
+                </small>
+              }
+            </div>
+
+            <!-- Folder Selection -->
+            <div class="field">
+              <label for="folder" class="block font-medium mb-2"
+                >Folder (Optional)</label
+              >
+              <select
+                id="folder"
+                class="p-select-native"
+                [formField]="fileForm.folderId"
+              >
+                <option value="">No folder (root level)</option>
+                @for (folder of availableFolders(); track folder.id) {
+                  <option [value]="folder.id">{{ folder.name }}</option>
+                }
+              </select>
+              @if (availableFolders().length === 0 && !isLoadingFolders()) {
+                <small class="text-gray-600 block mt-2">
+                  <i class="pi pi-info-circle mr-1"></i>
+                  No folders available. File will be uploaded to root level.
+                </small>
+              }
+            </div>
+          </div>
+        } @else {
+          <!-- Folder Selection for Edit Mode -->
+          <div class="field mb-4">
+            <label for="folder" class="block font-medium mb-2"
+              >Folder (Optional)</label
+            >
+            <select
+              id="folder"
+              class="p-select-native"
+              [formField]="fileForm.folderId"
+            >
+              <option value="">No folder (root level)</option>
+              @for (folder of availableFolders(); track folder.id) {
+                <option [value]="folder.id">{{ folder.name }}</option>
+              }
+            </select>
+            @if (availableFolders().length === 0 && !isLoadingFolders()) {
+              <small class="text-gray-600 block mt-2">
+                <i class="pi pi-info-circle mr-1"></i>
+                No folders available.
+              </small>
+            }
+          </div>
+        }
+
+        <!-- File Upload (only for new files) -->
+        @if (!isEditMode()) {
+          <div class="field mb-4">
+            <label class="block font-medium mb-2">Select File *</label>
+            <p-fileupload
+              #fileUpload
+              [customUpload]="true"
+              (onSelect)="onFileSelect($event)"
+              [multiple]="false"
+              [maxFileSize]="50000000"
+              [showUploadButton]="false"
+              [showCancelButton]="false"
+              chooseLabel="Choose File"
+              chooseIcon="pi pi-upload"
+              accept="*/*"
+              class="w-full"
+            >
+              <ng-template #content let-files>
+                @if (files && files.length > 0) {
+                  <div class="flex flex-col gap-2">
+                    @for (file of files; track file.name) {
+                      <div class="flex items-center gap-3 p-3 border rounded">
+                        <i class="pi pi-file text-2xl"></i>
+                        <div class="flex-1">
+                          <div class="font-medium">{{ file.name }}</div>
+                          <div class="text-sm text-gray-600">
+                            {{ formatFileSize(file.size) }}
+                          </div>
+                        </div>
+                        <p-button
+                          icon="pi pi-times"
+                          [text]="true"
+                          severity="danger"
+                          size="small"
+                          (onClick)="fileUpload.clear()"
+                        />
+                      </div>
+                    }
+                  </div>
+                } @else {
+                  <div
+                    class="flex items-center justify-center flex-col p-8 border-2 border-dashed border-gray-300 rounded"
+                  >
+                    <i
+                      class="pi pi-cloud-upload text-4xl text-gray-400 mb-3"
+                    ></i>
+                    <p class="text-gray-600">
+                      Drag and drop file here or click to browse
+                    </p>
+                    <p class="text-sm text-gray-500 mt-2">
+                      Maximum file size: 50MB
+                    </p>
+                  </div>
+                }
+              </ng-template>
+            </p-fileupload>
+            @if (!selectedFile() && !isEditMode()) {
+              <small class="text-gray-600"
+                >Please select a file to upload</small
+              >
+            }
+          </div>
+        }
+
+        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+          <!-- File Name (read-only for uploads, editable for existing) -->
+          <div class="field md:col-span-2">
+            <label for="name" class="block font-medium mb-2">File Name *</label>
+            <input
+              pInputText
+              id="name"
+              [formField]="fileForm.name"
+              [placeholder]="
+                isEditMode()
+                  ? 'Enter file name'
+                  : 'Will be auto-filled from selected file'
+              "
+              class="w-full"
+            />
+          </div>
+
+          <!-- Privacy Toggle -->
+          <div class="field">
+            <label class="p-checkbox-native">
+              <input type="checkbox" [formField]="fileForm.isPrivate" />
+              <span>Private File</span>
+            </label>
+            <small class="text-gray-600 block mt-2">
+              {{
+                formModel().isPrivate
+                  ? 'Only users with permission can access'
+                  : 'File is publicly accessible'
+              }}
+            </small>
+          </div>
+        </div>
+
+        <div class="flex gap-2 mt-4">
+          <p-button
+            type="submit"
+            [label]="isEditMode() ? 'Update' : 'Upload'"
+            [icon]="isEditMode() ? 'pi pi-check' : 'pi pi-cloud-upload'"
+            [loading]="isLoading()"
+            [disabled]="
+              !isFormValid() ||
+              (!isEditMode() && !selectedFile()) ||
+              isLoading()
+            "
+          />
+          <p-button
+            type="button"
+            label="Cancel"
+            severity="secondary"
+            icon="pi pi-times"
+            [text]="true"
+            (onClick)="onCancel()"
+          />
+        </div>
+      </form>
+    </div>
+  `,
+                }]
+        }] });
+
+export { FileManagerFormComponent };
+//# sourceMappingURL=flusys-ng-storage-file-manager-form.component-BI0hgXeI.mjs.map