How to set up a filter for displaying information by date for a specific user?

Question

Angular

I have two filters and they don't quite work as they should. Firstly, after a specific user has been selected from the list, all information on this user for all dates is displayed in the notes, although a specific date is set on which nothing should be displayed because it is empty there. And secondly, if I start changing the date in select, then all information for all users is displayed, although a specific user was originally selected. Below is the code for these filters. How can I fix this? Tell me please.

selectedUser = null;
  users: Array<User>;
  notes: Array<Note>;
  years: Array<Year>;
  filteredNotes = [];

// Фильтр информации по выбранному пользователю
SelectedUser(userId) {
  this.selectedUser = this.users.find(el => {
    return el.user_id === userId
  });
  this.filteredNotes = this.notes.filter((note) => note.n_users_id == this.selectedUser.user_id);
}

//Фильтр информации по выбору даты из списка

onYearSelection(year){
    this.filteredNotes = []
    this.filteredNotes = this.notes.filter(note => note.years  == year);
}

That is, how can I combine these operations. So that I select the user and date that I need, and display all available information about this user for the selected date.

Answer 1

How would you like it if, after selecting a user and selecting a year, you filter the list by only one of the entities?
Write a separate method that will filter, something like:

public onSelectedUser(userId: number) {
    this.selectedUser = userId;
    this._filtered(this.selectedUser, this.selectedYear);
  }

  public onSelectedYear(year: number): void {
    this.selectedYear = year;
    this._filtered(this.selectedUser, this.selectedYear);
  }

  private _filtered(userId: number, year: number): void {
    let filteredNotes = this.notes;
    if (userId) {
      filteredNotes = filteredNotes.filter(note => note.user_id === userId);
    }
    if (year) {
      filteredNotes = filteredNotes.filter(note => note.year === year);
    }
    this.filteredNotes = filteredNotes;
  }

Answer 2

The shortcode that is on the first screenshot is sharpened specifically for the url, it will not work for your purposes. It is designed to be loaded by Ajax when clicked from some URL. Look for another shortcode in the composer, where the lightbox accepts not a url, but a content, they are also called inline lightboxes, or inline lightbox display mode. Here you can insert a form with a shortcode into it, which, if circumstances are successful, will even go. Or is the window with the link in the screenshot not a modalbox content setting?? Then why do you, in fact, put the form on the link? The shortcode of the form must be placed in the content of the Modal Box.
Z.Y. If you don't find the shortcode you need, remember that you can always extend the visual composer with your own shortcodes kb.wpbakery.com/index.php?title=Visual_Composer_tu...
ZY2. And herecodecanyon.net/item/modal-popup-box-for-visual-com... you can immediately buy a popup for a composer with extended functionality. Contact Forms 7 will definitely fit in there.

Answer 3

Alexander, thanks for your reply!
ЗЫ1 - There is no need to expand. There are just more than shortcodes. I also installed this plug -in - very powerful and convenient.
ZY2 - I bought a complete set , in which there is also a Modal Box, you can see it on the first screen, at the top left, circled in red. It is cool and beautiful, but it's about how to insert this beauty not in a block, but in the text as an underlined link . By clicking on it, this beauty should pop up. The button I can so any in any place zafigachit without their bells and whistles. But modal beauty - only in a row / column as a separate element.
In fact, it is strange that such a trifle as inserting a link into the text is not provided for by such a powerful tool.
I'm not a programmer, but this seems to be close to my problem.