Thiết kế website giá rẻ

Question

I have an Angular 17 application, on the base I have a parent component with two sections, one has icons for the crud and another one that decides what component to show according with what icon you have clicked.

There is base component and a service so the same logic is not repeated on every component.

When you add an user the diskette icon triggers the onSubmit on the inner component.

I added a similar icon to trigger the update, but, there is an if before on the base logic, one variable is stuck on false and the other one is for the inner component, so it has an undefined value; so the onSubmit of the inner component is not triggered.

The problem is here, in users

onSaveForEditClick(): void {    
    console.log(this.showAddForEdit);
    console.log(this.usersEditActionComponent);

    if (this.showAddForEdit && this.usersEditActionComponent) {
      this.usersEditActionComponent.onSubmit();    
    } 
}

<div class="container">  
  <div class="inner" id="icons"> 
    <ul>
      <li>
        <img src="../../../assets/img/Add.png" alt="Adicionar" (click)="onAddClick()">
      </li>
      <li>
        <img src="../../../assets/img/Edit.png" alt="Editar" (click)="onEditClick()">
      </li>
      <li>
        <img src="../../../assets/img/DatoBorrado.png" alt="Borrar" (click)="onDeleteClick()">
      </li>
      <li>
        <img src="../../../assets/img/Buscar.png" alt="Buscar" (click)="onSearchClick()">
      </li>
      <li *ngIf="showSaveAndCancel">
        <img src="../../../assets/img/Save.png" alt="Guardar" (click)="onSaveClick()">
      </li>
      <li *ngIf="showSaveAndCancel">
        <img src="../../../assets/img/Cancel.png" alt="Cancelar" (click)="onCancelClick()">
      </li>
      <li *ngIf="showSaveForEditAndCancel">
        <img src="../../../assets/img/Save.png" alt="Actualizar" (click)="onSaveForEditClick()">
      </li>
      <li *ngIf="showSaveForEditAndCancel">
        <img src="../../../assets/img/Cancel.png" alt="Cancelar" (click)="onCancelForEditClick()">
      </li>
    </ul>
  </div>

  <div class="inner" id="crud-components">
    <div *ngIf="showAdd">
      <app-users-add></app-users-add>
    </div>     
    <div *ngIf="showSearch">
      <app-users-search></app-users-search>
    </div>
  </div>
</div>

import { Component, OnInit, ViewChild, AfterViewInit, ViewContainerRef } from '@angular/core';
import { CrudActionsVisibility } from '../../../helpers/crud-icons-visibility';
import { CrudBaseComponent } from '../../crud-base/crud-base.component';
import { CrudActionsVisibilityService } from '../../../services/crud-actions-visibility.service';
import { UsersAddComponent } from '../users-add/users-add.component';
import { UsersSearchComponent } from '../users-search/users-search.component';
import { LocalStorageService } from '../../../helpers/local-storage.service';
import { ActivateEditSaveService } from '../../../services/activate-edit-save.service';
import { UsersEditActionComponent } from '../../users-folder/users-edit-action/users-edit-action.component';

@Component({
  selector: 'app-users',
  templateUrl: './users.component.html',
  styleUrls: ['./users.component.css', '../../../shared-styles.css']
})
export class UsersComponent extends CrudBaseComponent implements AfterViewInit {
  @ViewChild(UsersAddComponent) usersAddComponent?: UsersAddComponent;  
  @ViewChild(UsersEditActionComponent) usersEditActionComponent?: UsersEditActionComponent; 
  @ViewChild(UsersSearchComponent) usersSearchComponent?: UsersSearchComponent;  

  override showSaveAndCancel = false;
  override showSaveForEditAndCancel = false;

  override showAdd = CrudActionsVisibility.showAdd;
  override showAddForEdit = CrudActionsVisibility.showAddForEdit;
  override showEdit = CrudActionsVisibility.showEdit;
  override showDelete = CrudActionsVisibility.showDelete;
  override showSearch = CrudActionsVisibility.showSearch;

  constructor(
    crudActionsVisibilityService: CrudActionsVisibilityService,
    private localStorageService: LocalStorageService,
    activateEditSaveService: ActivateEditSaveService,
    private viewContainerRef: ViewContainerRef // Cambiado a ViewContainerRef
  ) {
    super(crudActionsVisibilityService, activateEditSaveService);
  }

  ngAfterViewInit(): void {
    this.updateVisibility();
  }

  onSaveClick(): void {    
    if (this.showAdd && this.usersAddComponent) {
      this.usersAddComponent.onSubmit();    
    } 
  }

  onSaveForEditClick(): void {    
    console.log(this.showAddForEdit);
    console.log(this.usersEditActionComponent);
    if (this.showAddForEdit && this.usersEditActionComponent) {
      this.usersEditActionComponent.onSubmit();    
    } 
  }

  override onCancelClick(): void {
    this.crudActionsVisibilityService.resetVisibility();
    this.updateVisibility();
  }

  override onCancelForEditClick(): void {
    this.crudActionsVisibilityService.resetVisibility();
    this.updateVisibility();
  }

  override onSearchClick(): void {    
    this.crudActionsVisibilityService.setSearchVisible();
    this.updateVisibility();    
    this.localStorageService.removeData('action');
    this.localStorageService.setData('action', 'search');     
  }
  
  override onDeleteClick(): void {    
    this.crudActionsVisibilityService.setSearchVisible();
    this.updateVisibility();    
    this.localStorageService.removeData('action');
    this.localStorageService.setData('action', 'delete');     
  }

  override onEditClick(): void {    
    this.crudActionsVisibilityService.setSearchVisible();    
    this.updateVisibility();        
    this.localStorageService.removeData('action');
    this.localStorageService.setData('action', 'edit');     
  }
}

import { Component } from '@angular/core';
import { OnInit } from '@angular/core';
import { CrudActionsVisibilityService } from '../../services/crud-actions-visibility.service';
import { ActivateEditSaveService } from '../../services/activate-edit-save.service';

@Component({
  selector: 'app-crud-base',
  templateUrl: './crud-base.component.html',
  styleUrl: './crud-base.component.css'
})
export class CrudBaseComponent implements OnInit {
  showSaveAndCancel = false;
  showSaveForEditAndCancel = false;
  showAdd = false;
  showAddForEdit = true;  
  showEdit = false;
  showDelete = false;
  showSearch = false;

  constructor(
    protected crudActionsVisibilityService: CrudActionsVisibilityService,
    protected activateEditSaveService: ActivateEditSaveService
  ) {}

  ngOnInit(): void {
    this.updateVisibility();
    // Suscríbete al evento para ejecutar el método cuando sea necesario
    this.activateEditSaveService.action$.subscribe(() => {
      this.onAddForEditClick();
    });
  }

  onCancelClick(): void {
    this.crudActionsVisibilityService.resetVisibility();
    this.updateVisibility();
  }

  onCancelForEditClick(): void {
    this.crudActionsVisibilityService.resetVisibility();
    this.updateVisibility();
  }

  onAddClick(): void {
    this.crudActionsVisibilityService.setAddVisible();
    this.updateVisibility();
  }

  onAddForEditClick(): void {
    this.crudActionsVisibilityService.setAddForEditVisible();
    this.updateVisibility();
    // console.log('Add for Edit Clicked');
  }

  onEditClick(): void {
    this.crudActionsVisibilityService.setEditVisible();
    this.updateVisibility();
  }

  onDeleteClick(): void {    
    this.crudActionsVisibilityService.setSearchVisible();
    this.updateVisibility();
  }

  onSearchClick(): void {
    this.crudActionsVisibilityService.setSearchVisible();
    this.updateVisibility();
  }

  public updateVisibility(): void {
    this.showAdd = this.crudActionsVisibilityService.showAdd;
    this.showEdit = this.crudActionsVisibilityService.showEdit;
    this.showDelete = this.crudActionsVisibilityService.showDelete;
    this.showSearch = this.crudActionsVisibilityService.showSearch;
    this.showSaveAndCancel = this.crudActionsVisibilityService.showSaveAndCancel;
    this.showSaveForEditAndCancel = this.crudActionsVisibilityService.showSaveForEditAndCancel;
  }
}

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class CrudActionsVisibilityService {
  showAdd = false;
  showAddForEdit = false;
  showEdit = false;
  showDelete = false;
  showSearch = false;
  showSaveAndCancel = false; 
  showSaveForEditAndCancel = false; 

  setAddVisible(): void {
    this.resetVisibility();
    this.showAdd = true;
    this.showSaveAndCancel = true;    
  }

  setAddForEditVisible(): void {
    this.resetVisibilityForAddOfEdit();
    this.showAddForEdit = true;
    this.showSaveForEditAndCancel = true;    
  }

  setEditVisible(): void {
    this.resetVisibility();
    this.showEdit = true;
  }

  setDeleteVisible(): void {
    this.resetVisibility();
    this.showDelete = true;
  }

  setSearchVisible(): void {
    this.resetVisibility();
    this.showSearch = true;
  }

  resetVisibility(): void {
    this.showAdd = false;
    this.showEdit = false;
    this.showDelete = false;
    this.showSearch = false;
    this.showSaveAndCancel = false;
    this.showSaveForEditAndCancel = false;
  }

  resetVisibilityForAddOfEdit(): void {
    this.showAdd = false;
    this.showEdit = false;
    this.showDelete = false;   
    // this.showSearch = false; This one was removed because the users-edit-action component wasn’t showing
    this.showSaveAndCancel = false;
    this.showSaveForEditAndCancel = false;
  }
}

import { UserTransferService } from '../../../services/user/user-transfer.service';
import { Component, AfterViewInit, ViewChild, ElementRef, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import * as bootstrap from 'bootstrap';
import { TranslateService } from '@ngx-translate/core';
import { LanguageChangeService } from '../../../services/language-change-service';
import { ProfileTransferService } from '../../../services/profile/profile-transfer.service';
import { iUserDTO } from '../../../models/iUserDTO';
import { UserService } from '../../../services/user/user.service';

@Component({
  selector: 'app-users-edit-action',
  templateUrl: './users-edit-action.component.html',
  styleUrl: './users-edit-action.component.css'
})
export class UsersEditActionComponent implements AfterViewInit, OnInit {
  myForm: FormGroup;
  modalMessage: string = '';
  modalHeader: string = '';
  userIdReceived: number = 0;

  user: iUserDTO = {
    idUser: 0,
    identificationNumber: '',
    names: '',
    surnames: '',
    userMaster: false
  };
  
  private modal: bootstrap.Modal | null = null;
  serviceError: string = '';
  showServiceError: boolean = false;

  @ViewChild('errorModal') modalElementRef!: ElementRef;

  constructor(
    private userTransferService: UserTransferService,
    private fb: FormBuilder,
    private translate: TranslateService,
    private languageChangeService: LanguageChangeService,
    private profileTransferService: ProfileTransferService,
    private userService: UserService
  ) {
    this.myForm = this.fb.group({
      identificationNumber: ['', [Validators.required, Validators.pattern('^[0-9]+$'), Validators.maxLength(25)]],
      names: ['', [Validators.required, Validators.pattern('^[a-zA-Z ]+$'), Validators.maxLength(100)]],
      surnames: ['', [Validators.required, Validators.maxLength(100)]],
      userMaster: ['', Validators.required]
    });
  }

  ngOnInit(): void {
    // Suscribirse a cambios de idioma
    this.languageChangeService.currentLanguage.subscribe(language => {
      this.translate.use(language);
    });

    this.userTransferService.currentUser.subscribe(user => { 
      if (user) {        
        // console.log(user);
        this.user = user;
        this.userIdReceived = user.idUser;
        const userMasterValue = user.userMaster ? 'yes' : 'no'; 
        this.myForm.patchValue({ ...user, userMaster: userMasterValue });  
      }
    });
  }

  ngAfterViewInit(): void {
    this.modal = new bootstrap.Modal(this.modalElementRef.nativeElement);
  }

  private showModal(message: string, header: string): void {
    this.modalMessage = message;
    this.modalHeader = header;
    if (this.modal) {
      this.modal.show();
      this.modalElementRef.nativeElement.addEventListener('hidden.bs.modal', this.onModalHidden.bind(this), { once: true });
    }
  }

  private onModalHidden(): void {
    if (this.modalHeader === 'SUCCESS') {
      this.resetForm();
    }
  }

  private resetForm(): void {
    this.myForm.reset({
      CodProfile: '',
      NameProfile: '',
      Description: ''
    });
  }

  onSubmit(): void {    
    console.log('It never gets this point');
    this.resetVariables();
  }
}

I made a review of all the logic, and the issue is related with the grandson inner component because the other two are sons and they work.

The variable I have initialized to true, but it is always returned as false.

Thiết kế website giá rẻ

Danh mục

Inner component not recognized by parent component on Angular 17