oggui/ogWebconsole/src/app/components/commands/commands-task/create-task/create-task.component.html

<h2 mat-dialog-title class="dialog-title">{{ editing ? ('editTask' | translate) : ('createTask' | translate) }}</h2>

<form [formGroup]="taskForm" class="task-form">
  <mat-dialog-content>
    <mat-horizontal-stepper linear>
      <!-- Paso 1: Información y Selecciona Comandos -->
      <mat-step label="Información y Selecciona Comandos">
        <mat-form-field appearance="fill" class="full-width">
          <mat-label>Información</mat-label>
          <textarea matInput formControlName="notes" placeholder="Ingresa tus notas aquí"></textarea>
        </mat-form-field>

<<<<<<< Updated upstream
        <mat-form-field appearance="fill" class="full-width">
          <mat-label>Selecciona Comandos</mat-label>
          <mat-select formControlName="commandGroup" (selectionChange)="onCommandGroupChange()">
            <mat-option *ngFor="let group of availableCommandGroups" [value]="group.uuid">
              {{ group.name }}
            </mat-option>
          </mat-select>
          <mat-error *ngIf="taskForm.get('commandGroup')?.invalid">Este campo es obligatorio</mat-error>
        </mat-form-field>

        <div class="button-container">
          <button mat-raised-button color="primary" matStepperNext [disabled]="taskForm.get('commandGroup')?.invalid">Continuar</button>
        </div>
      </mat-step>

      <!-- Paso 2: Selecciona Comandos Individuales -->
      <mat-step label="Selecciona Comandos Individuales">
        <mat-form-field appearance="fill" class="full-width">
          <mat-label>Selecciona Comandos Individuales (Opcional)</mat-label>
          <mat-select formControlName="extraCommands" multiple>
            <mat-option *ngFor="let command of availableIndividualCommands" [value]="command.uuid">
              {{ command.name }}
            </mat-option>
          </mat-select>
        </mat-form-field>

        <div class="button-container">
          <button mat-button matStepperPrevious>Atrás</button>
          <button mat-raised-button color="primary" matStepperNext>Continuar</button>
        </div>
      </mat-step>

      <!-- Paso 3: Fecha de Ejecución y Hora -->
      <mat-step label="Fecha de Ejecución y Hora">
        <mat-form-field appearance="fill" class="full-width">
          <mat-label>Fecha de Ejecución</mat-label>
          <input matInput [matDatepicker]="picker" formControlName="date" placeholder="Selecciona una fecha">
          <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
          <mat-datepicker #picker></mat-datepicker>
          <mat-error *ngIf="taskForm.get('date')?.invalid">Este campo es obligatorio</mat-error>
        </mat-form-field>

        <mat-form-field appearance="fill" class="full-width">
          <mat-label>Hora de Ejecución</mat-label>
          <input matInput type="time" formControlName="time" placeholder="Selecciona una hora">
          <mat-error *ngIf="taskForm.get('time')?.invalid">Este campo es obligatorio</mat-error>
        </mat-form-field>

        <div class="button-container">
          <button mat-button matStepperPrevious>Atrás</button>
          <button mat-raised-button color="primary" matStepperNext>Continuar</button>
        </div>
      </mat-step>

     <!-- Paso 4: Selecciona Unidad Organizacional, Aula y Clientes -->
<mat-step label="Selecciona Unidad Organizacional, Aula y Clientes">
  <mat-form-field appearance="fill" class="full-width">
    <mat-label>Selecciona Unidad Organizacional</mat-label>
    <mat-select formControlName="organizationalUnit" (selectionChange)="onOrganizationalUnitChange()">
      <mat-option *ngFor="let unit of availableOrganizationalUnits" [value]="unit['@id']">
        {{ unit.name }}
      </mat-option>
    </mat-select>
    <mat-error *ngIf="taskForm.get('organizationalUnit')?.invalid">Este campo es obligatorio</mat-error>
  </mat-form-field>

  <mat-form-field appearance="fill" class="full-width">
    <mat-label>Selecciona aula</mat-label>
    <mat-select formControlName="selectedChild" (selectionChange)="onChildChange()">
      <mat-option *ngFor="let child of selectedUnitChildren" [value]="child['@id']">
        {{ child.name }}
      </mat-option>
    </mat-select>
  </mat-form-field>
=======
    <h3 class="section-title">{{ 'informationSectionTitle' | translate }}</h3>
    <mat-divider></mat-divider>
    <mat-form-field appearance="fill" class="full-width">
      <mat-label>{{ 'informationLabel' | translate }}</mat-label>
      <textarea matInput formControlName="notes" placeholder="{{ 'notesPlaceholder' | translate }}"></textarea>
    </mat-form-field>

    <h3 class="section-title">{{ 'commandSelectionSectionTitle' | translate }}</h3>
    <mat-divider></mat-divider>
    <mat-form-field appearance="fill" class="full-width">
      <mat-label>{{ 'selectCommandsLabel' | translate }}</mat-label>
      <mat-select formControlName="commandGroup" (selectionChange)="onCommandGroupChange()">
        <mat-option *ngFor="let group of availableCommandGroups" [value]="group.uuid">
          {{ group.name }}
        </mat-option>
      </mat-select>
      <mat-error *ngIf="taskForm.get('commandGroup')?.invalid">{{ 'requiredFieldError' | translate }}</mat-error>
    </mat-form-field>

    <mat-form-field appearance="fill" class="full-width">
      <mat-label>{{ 'selectIndividualCommandsLabel' | translate }}</mat-label>
      <mat-select formControlName="extraCommands" multiple>
        <mat-option *ngFor="let command of availableIndividualCommands" [value]="command.uuid">
          {{ command.name }}
        </mat-option>
      </mat-select>
    </mat-form-field>

    <h3 class="section-title">{{ 'executionDateTimeSectionTitle' | translate }}</h3>
    <mat-divider></mat-divider>
    <mat-form-field appearance="fill" class="full-width">
      <mat-label>{{ 'executionDateLabel' | translate }}</mat-label>
      <input matInput [matDatepicker]="picker" formControlName="date" placeholder="{{ 'selectDatePlaceholder' | translate }}">
      <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
      <mat-datepicker #picker></mat-datepicker>
      <mat-error *ngIf="taskForm.get('date')?.invalid">{{ 'requiredFieldError' | translate }}</mat-error>
    </mat-form-field>

    <mat-form-field appearance="fill" class="full-width">
      <mat-label>{{ 'executionTimeLabel' | translate }}</mat-label>
      <input matInput type="time" formControlName="time" placeholder="{{ 'selectTimePlaceholder' | translate }}">
      <mat-error *ngIf="taskForm.get('time')?.invalid">{{ 'requiredFieldError' | translate }}</mat-error>
    </mat-form-field>

    <h3 class="section-title">{{ 'destinationSelectionSectionTitle' | translate }}</h3>
    <mat-divider></mat-divider>
    <mat-form-field appearance="fill" class="full-width">
      <mat-label>{{ 'selectOrganizationalUnitLabel' | translate }}</mat-label>
      <mat-select formControlName="organizationalUnit" (selectionChange)="onOrganizationalUnitChange()">
        <mat-option *ngFor="let unit of availableOrganizationalUnits" [value]="unit['@id']">
          {{ unit.name }}
        </mat-option>
      </mat-select>
      <mat-error *ngIf="taskForm.get('organizationalUnit')?.invalid">{{ 'requiredFieldError' | translate }}</mat-error>
    </mat-form-field>

    <mat-form-field appearance="fill" class="full-width">
      <mat-label>{{ 'selectClassroomLabel' | translate }}</mat-label>
      <mat-select formControlName="selectedChild" (selectionChange)="onChildChange()">
        <mat-option *ngFor="let child of selectedUnitChildren" [value]="child['@id']">
          {{ child.name }}
        </mat-option>
      </mat-select>
    </mat-form-field>

    <mat-form-field appearance="fill" class="full-width">
      <mat-label>{{ 'selectClientsLabel' | translate }}</mat-label>
      <mat-select formControlName="selectedClients" multiple>
        <mat-option (click)="toggleSelectAll()" [selected]="areAllSelected()">
          {{ 'selectAllClients' | translate }}
        </mat-option>
        <mat-option *ngFor="let client of selectedClients" [value]="client.uuid">
          {{ client.name }} ({{ client.ip }})
        </mat-option>
      </mat-select>
    </mat-form-field>

    <div class="button-container">
      <button mat-raised-button color="primary" (click)="saveTask()">{{ 'buttonSave' | translate }}</button>
    </div>
>>>>>>> Stashed changes

  <mat-form-field appearance="fill" class="full-width">
    <mat-label>Selecciona Clientes</mat-label>
    <mat-select formControlName="selectedClients" multiple>
      <mat-option (click)="toggleSelectAll()" [selected]="areAllSelected()">
        Seleccionar todos
      </mat-option>
      <mat-option *ngFor="let client of selectedClients" [value]="client.uuid">
        {{ client.name }} ({{ client.ip }})
      </mat-option>
    </mat-select>
  </mat-form-field>

  <div class="button-container">
    <button mat-button matStepperPrevious>Atrás</button>
    <button mat-raised-button color="primary" (click)="saveTask()">Guardar</button>
  </div>
</mat-step>

    </mat-horizontal-stepper>
  </mat-dialog-content>
</form>