valtech-components 2.0.794 → 2.0.795

package/src/lib/components/molecules/feedback-form/feedback-form.component.ts

@@ -0,0 +1,355 @@
+import { CommonModule } from '@angular/common';
+import {
+  Component,
+  EventEmitter,
+  Input,
+  OnInit,
+  Output,
+  inject,
+  signal,
+} from '@angular/core';
+import { I18nService } from '../../../services/i18n';
+import {
+  FormBuilder,
+  FormGroup,
+  ReactiveFormsModule,
+  Validators,
+} from '@angular/forms';
+import {
+  IonButton,
+  IonIcon,
+  IonItem,
+  IonLabel,
+  IonList,
+  IonNote,
+  IonSelect,
+  IonSelectOption,
+  IonSpinner,
+  IonText,
+  IonTextarea,
+} from '@ionic/angular/standalone';
+import { addIcons } from 'ionicons';
+import {
+  bugOutline,
+  bulbOutline,
+  chatbubbleOutline,
+  checkmarkCircleOutline,
+  closeCircleOutline,
+  documentTextOutline,
+} from 'ionicons/icons';
+
+import {
+  FeedbackService,
+  FeedbackType,
+  CreateFeedbackResponse,
+  DEFAULT_FEEDBACK_TYPE_OPTIONS,
+} from '../../../services/feedback';
+import { FeedbackFormMetadata, FeedbackSubmitEvent } from './types';
+
+/**
+ * val-feedback-form
+ *
+ * Formulario reutilizable para enviar feedback desde cualquier parte de la aplicación.
+ *
+ * @example
+ * ```html
+ * <!-- Feedback general -->
+ * <val-feedback-form
+ *   [props]="{ defaultType: 'feedback', showTypeSelector: true }"
+ *   (onSubmit)="handleSuccess($event)"
+ *   (onCancel)="closeModal()"
+ * />
+ *
+ * <!-- Reportar contenido incorrecto -->
+ * <val-feedback-form
+ *   [props]="{
+ *     defaultType: 'poor-content',
+ *     showTypeSelector: false,
+ *     contentRef: { contentId: article.id, contentType: 'article' },
+ *     submitButtonText: 'Reportar contenido'
+ *   }"
+ * />
+ * ```
+ */
+@Component({
+  selector: 'val-feedback-form',
+  standalone: true,
+  imports: [
+    CommonModule,
+    ReactiveFormsModule,
+    IonButton,
+    IonIcon,
+    IonItem,
+    IonLabel,
+    IonList,
+    IonNote,
+    IonSelect,
+    IonSelectOption,
+    IonSpinner,
+    IonText,
+    IonTextarea,
+  ],
+  template: `
+    <form
+      [formGroup]="form"
+      (ngSubmit)="handleSubmit()"
+      class="feedback-form"
+      [class.compact]="props.compact"
+      [ngClass]="props.cssClass"
+    >
+      <!-- Type selector -->
+      @if (props.showTypeSelector !== false) {
+        <ion-item>
+          <ion-select
+            formControlName="type"
+            [label]="i18n.t('feedbackType')"
+            labelPlacement="floating"
+            interface="popover"
+          >
+            @for (option of typeOptions; track option.value) {
+              <ion-select-option [value]="option.value">
+                {{ option.label }}
+              </ion-select-option>
+            }
+          </ion-select>
+        </ion-item>
+      }
+
+      <!-- Title -->
+      <ion-item>
+        <ion-textarea
+          formControlName="title"
+          [label]="props.titleLabel || i18n.t('title')"
+          labelPlacement="floating"
+          [placeholder]="props.titlePlaceholder || i18n.t('titlePlaceholder')"
+          [maxlength]="200"
+          [counter]="true"
+          [autoGrow]="false"
+          rows="1"
+        ></ion-textarea>
+      </ion-item>
+      @if (form.get('title')?.invalid && form.get('title')?.touched) {
+        <ion-note color="danger" class="ion-padding-start">
+          {{ i18n.t('titleValidation') }}
+        </ion-note>
+      }
+
+      <!-- Description -->
+      <ion-item>
+        <ion-textarea
+          formControlName="description"
+          [label]="props.descriptionLabel || i18n.t('description')"
+          labelPlacement="floating"
+          [placeholder]="props.descriptionPlaceholder || i18n.t('descriptionPlaceholder')"
+          [maxlength]="5000"
+          [counter]="true"
+          [autoGrow]="true"
+          rows="4"
+        ></ion-textarea>
+      </ion-item>
+      @if (form.get('description')?.invalid && form.get('description')?.touched) {
+        <ion-note color="danger" class="ion-padding-start">
+          {{ i18n.t('descriptionValidation') }}
+        </ion-note>
+      }
+
+      <!-- Error message -->
+      @if (error()) {
+        <div class="feedback-alert error">
+          <ion-icon name="close-circle-outline"></ion-icon>
+          <span>{{ error() }}</span>
+        </div>
+      }
+
+      <!-- Success message -->
+      @if (isSuccess()) {
+        <div class="feedback-alert success">
+          <ion-icon name="checkmark-circle-outline"></ion-icon>
+          <span>{{ props.successMessage || i18n.t('feedbackSuccess') }}</span>
+        </div>
+      }
+
+      <!-- Actions -->
+      <div class="form-actions">
+        @if (props.cancelButtonText) {
+          <ion-button
+            fill="outline"
+            color="medium"
+            type="button"
+            (click)="onCancelClick()"
+          >
+            {{ props.cancelButtonText }}
+          </ion-button>
+        }
+        <ion-button
+          type="submit"
+          [disabled]="form.invalid || isSubmitting()"
+          expand="block"
+        >
+          @if (isSubmitting()) {
+            <ion-spinner name="crescent"></ion-spinner>
+          } @else {
+            {{ props.submitButtonText || i18n.t('submit') }}
+          }
+        </ion-button>
+      </div>
+    </form>
+  `,
+  styles: [
+    `
+      .feedback-form {
+        display: flex;
+        flex-direction: column;
+        gap: 8px;
+
+        &.compact {
+          gap: 4px;
+        }
+      }
+
+      .form-actions {
+        display: flex;
+        gap: 8px;
+        margin-top: 16px;
+        justify-content: flex-end;
+
+        ion-button {
+          flex: 1;
+        }
+      }
+
+      .feedback-alert {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        padding: 12px 16px;
+        border-radius: 8px;
+        margin-top: 8px;
+
+        &.error {
+          background-color: var(--ion-color-danger-tint);
+          color: var(--ion-color-danger-shade);
+        }
+
+        &.success {
+          background-color: var(--ion-color-success-tint);
+          color: var(--ion-color-success-shade);
+        }
+
+        ion-icon {
+          font-size: 20px;
+        }
+      }
+
+      ion-note {
+        font-size: 12px;
+        margin-top: -4px;
+        margin-bottom: 8px;
+      }
+    `,
+  ],
+})
+export class FeedbackFormComponent implements OnInit {
+  /**
+   * Configuración del formulario.
+   */
+  @Input() props: FeedbackFormMetadata = {};
+
+  /**
+   * Evento emitido cuando el feedback se envía exitosamente.
+   */
+  @Output() onSubmit = new EventEmitter<FeedbackSubmitEvent>();
+
+  /**
+   * Evento emitido cuando el usuario cancela.
+   */
+  @Output() onCancel = new EventEmitter<void>();
+
+  private fb = inject(FormBuilder);
+  private feedbackService = inject(FeedbackService);
+  protected i18n = inject(I18nService);
+
+  form!: FormGroup;
+  typeOptions = DEFAULT_FEEDBACK_TYPE_OPTIONS;
+
+  isSubmitting = signal(false);
+  isSuccess = signal(false);
+  error = signal<string | null>(null);
+
+  constructor() {
+    addIcons({
+      bugOutline,
+      bulbOutline,
+      chatbubbleOutline,
+      checkmarkCircleOutline,
+      closeCircleOutline,
+      documentTextOutline,
+    });
+  }
+
+  ngOnInit(): void {
+    // Filtrar tipos habilitados si se especifica
+    if (this.props.enabledTypes?.length) {
+      this.typeOptions = this.typeOptions.filter((opt) =>
+        this.props.enabledTypes!.includes(opt.value)
+      );
+    }
+
+    // Usar opciones personalizadas si se proporcionan
+    if (this.props.typeOptions?.length) {
+      this.typeOptions = this.props.typeOptions;
+    }
+
+    // Inicializar formulario
+    this.form = this.fb.group({
+      type: [this.props.defaultType || 'feedback', Validators.required],
+      title: [
+        '',
+        [Validators.required, Validators.minLength(5), Validators.maxLength(200)],
+      ],
+      description: [
+        '',
+        [Validators.required, Validators.minLength(10), Validators.maxLength(5000)],
+      ],
+    });
+  }
+
+  async handleSubmit(): Promise<void> {
+    if (this.form.invalid || this.isSubmitting()) return;
+
+    this.isSubmitting.set(true);
+    this.error.set(null);
+    this.isSuccess.set(false);
+
+    try {
+      const { type, title, description } = this.form.value;
+
+      const response = await this.feedbackService.createAsync(
+        type as FeedbackType,
+        title,
+        description,
+        [], // attachments (por ahora vacío)
+        this.props.contentRef
+      );
+
+      this.isSuccess.set(true);
+      this.form.reset({ type: this.props.defaultType || 'feedback' });
+
+      this.onSubmit.emit({
+        response,
+        type: type as FeedbackType,
+        title,
+      });
+    } catch (err: any) {
+      this.error.set(
+        err.error?.message || err.message || this.i18n.t('feedbackError')
+      );
+    } finally {
+      this.isSubmitting.set(false);
+    }
+  }
+
+  onCancelClick(): void {
+    this.onCancel.emit();
+  }
+}

package/src/lib/components/molecules/feedback-form/types.ts

@@ -0,0 +1,77 @@
+import {
+  FeedbackType,
+  ContentRef,
+  CreateFeedbackResponse,
+  FeedbackTypeOption,
+} from '../../../services/feedback/types';
+
+/**
+ * Metadata para el componente FeedbackForm.
+ */
+export interface FeedbackFormMetadata {
+  /** Tipo de feedback preseleccionado */
+  defaultType?: FeedbackType;
+
+  /** Referencia a contenido (si aplica) */
+  contentRef?: ContentRef;
+
+  /** Mostrar selector de tipo (default: true) */
+  showTypeSelector?: boolean;
+
+  /** Tipos de feedback habilitados (por defecto todos) */
+  enabledTypes?: FeedbackType[];
+
+  /** Opciones personalizadas para tipos de feedback */
+  typeOptions?: FeedbackTypeOption[];
+
+  /** Placeholder para título */
+  titlePlaceholder?: string;
+
+  /** Placeholder para descripción */
+  descriptionPlaceholder?: string;
+
+  /** Label para campo de título */
+  titleLabel?: string;
+
+  /** Label para campo de descripción */
+  descriptionLabel?: string;
+
+  /** Texto del botón de envío */
+  submitButtonText?: string;
+
+  /** Texto del botón cancelar (si no se proporciona, no se muestra) */
+  cancelButtonText?: string;
+
+  /** Mostrar campo de adjuntos (default: true) */
+  showAttachments?: boolean;
+
+  /** Label para campo de adjuntos */
+  attachmentsLabel?: string;
+
+  /** Mensaje de éxito personalizado */
+  successMessage?: string;
+
+  /** CSS class adicional para el contenedor */
+  cssClass?: string;
+
+  /** Modo compacto (menos espaciado) */
+  compact?: boolean;
+}
+
+/**
+ * Evento emitido cuando el feedback se envía exitosamente.
+ */
+export interface FeedbackSubmitEvent {
+  response: CreateFeedbackResponse;
+  type: FeedbackType;
+  title: string;
+}
+
+/**
+ * Estado del formulario.
+ */
+export interface FeedbackFormState {
+  isSubmitting: boolean;
+  isSuccess: boolean;
+  error: string | null;
+}

package/src/lib/components/molecules/file-input/file-input.component.scss

@@ -0,0 +1,11 @@
+@import '../../organisms/form/form.component.scss';
+
+.file-container {
+  margin-top: pxToRem(4);
+}
+
+.name-container {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}

package/src/lib/components/molecules/file-input/file-input.component.ts

@@ -0,0 +1,87 @@
+import { Component, inject, Input, OnInit, ViewChild } from '@angular/core';
+import { IonIcon } from '@ionic/angular/standalone';
+import { I18nService } from '../../../services/i18n';
+import { ButtonComponent } from '../../atoms/button/button.component';
+import { PrimarySolidDefaultRoundButton } from '../../atoms/button/factory';
+import { TextComponent } from '../../atoms/text/text.component';
+import { ButtonMetadata } from '../../types';
+import { FileInputMetadata } from './types';
+
+@Component({
+  selector: 'val-file-input',
+  standalone: true,
+  imports: [IonIcon, TextComponent, ButtonComponent],
+  template: `
+    <div class="file-container">
+      <input style="display: none" type="file" (change)="onFileSelected($event)" #fileInput [accept]="props.accept" />
+      <div class="name-container">
+        <ion-icon [name]="selectedFile ? 'checkmark-circle-outline' : 'alert-circle-outline'"></ion-icon>
+        <val-text
+          style="margin-left: 4px;"
+          [props]="{
+            content: getFileDisplayText(),
+            color: 'dark',
+            bold: false,
+            size: 'medium',
+          }"
+        ></val-text>
+      </div>
+      <val-button [props]="contrastButton" (onClick)="fileInput.click()"></val-button>
+    </div>
+  `,
+  styleUrls: ['./file-input.component.scss'],
+})
+/**
+ * val-file-input
+ *
+ * A file input component for uploading files, integrated with Angular forms.
+ *
+ * @example
+ * <val-file-input [props]="{ control: myControl, accept: 'image/*' }"></val-file-input>
+ *
+ * @input props: FileInputMetadata - Configuration for the file input (form control, accept types, etc.)
+ */
+export class FileInputComponent implements OnInit {
+  /**
+   * Input configuration object.
+   * @type {FileInputMetadata}
+   * @property control - The Angular FormControl for the file input.
+   * @property accept - Accepted file types (e.g., 'image/*', '.pdf').
+   */
+  @Input() props: FileInputMetadata;
+
+  @ViewChild('fileInput') fileInput;
+
+  private i18n = inject(I18nService);
+
+  contrastButton: ButtonMetadata;
+  selectedFile: File;
+
+  constructor() {}
+
+  ngOnInit() {
+    // Initialize button with i18n text
+    this.contrastButton = {
+      ...PrimarySolidDefaultRoundButton(this.props?.buttonText || this.i18n.t('uploadFile')),
+      color: 'light',
+    };
+  }
+
+  /** Get display text for file status */
+  getFileDisplayText(): string {
+    if (this.selectedFile) {
+      return this.selectedFile.name;
+    }
+    return this.props?.noFileText || this.i18n.t('noFileSelected');
+  }
+
+  onFileSelected(event): void {
+    this.selectedFile = event.target.files[0];
+    this.props.control.setValue(this.selectedFile);
+  }
+
+  reset(): void {
+    this.selectedFile = null;
+    this.fileInput.nativeElement.value = '';
+  }
+}

package/src/lib/components/molecules/file-input/file-input.stories.ts

@@ -0,0 +1,107 @@
+import type { Meta, StoryObj } from '@storybook/angular';
+import { moduleMetadata } from '@storybook/angular';
+import { CommonModule } from '@angular/common';
+import { FormControl, ReactiveFormsModule } from '@angular/forms';
+import { FileInputComponent } from './file-input.component';
+
+const createFileInputProps = (overrides: Record<string, any> = {}) => ({
+  control: new FormControl(null),
+  ...overrides,
+});
+
+// Pre-create all props at module level
+const defaultProps = createFileInputProps();
+
+const meta: Meta<FileInputComponent> = {
+  title: 'Molecules/FileInput',
+  component: FileInputComponent,
+  decorators: [
+    moduleMetadata({
+      imports: [CommonModule, ReactiveFormsModule, FileInputComponent],
+    }),
+  ],
+  tags: ['autodocs'],
+  argTypes: {
+    props: {
+      description: 'File input configuration object',
+      control: 'object',
+      table: {
+        type: {
+          summary: 'InputMetadata',
+          detail: `{
+  control: FormControl;
+  // Additional form control properties
+}`,
+        },
+      },
+    },
+  },
+  parameters: {
+    docs: {
+      description: {
+        component: `
+## val-file-input
+
+A file input component for uploading files with Angular forms integration.
+
+### Features
+
+- **Form Integration**: Works with Angular FormControl
+- **Visual Feedback**: Shows selected file name
+- **Status Icons**: Checkmark when file selected, alert when empty
+- **Custom Button**: Styled upload button
+
+### Usage
+
+\`\`\`html
+<val-file-input
+  [props]="{
+    control: fileControl
+  }"
+></val-file-input>
+\`\`\`
+
+\`\`\`typescript
+// In your component
+fileControl = new FormControl(null);
+
+onSubmit() {
+  const file = this.fileControl.value;
+  // Handle file upload
+}
+\`\`\`
+
+### Notes
+
+- The component stores the File object in the FormControl
+- Use \`.reset()\` method to clear the selection
+        `,
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<FileInputComponent>;
+
+export const Default: Story = {
+  render: () => ({
+    template: `<div style="max-width: 400px;"><val-file-input [props]="fileProps"></val-file-input></div>`,
+    props: { fileProps: defaultProps },
+  }),
+};
+
+export const Showcase: Story = {
+  render: () => ({
+    template: `
+      <div style="display: flex; flex-direction: column; gap: 24px; max-width: 400px;">
+        <h3 style="margin: 0; font-family: system-ui;">File Input</h3>
+        <p style="margin: 0; font-family: system-ui; color: #666;">Click the button to select a file</p>
+        <val-file-input [props]="fileProps"></val-file-input>
+      </div>
+    `,
+    props: {
+      fileProps: defaultProps,
+    },
+  }),
+};