Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Repo info
Activity
  • Jan 26 22:54
    benlesh closed #5935
  • Jan 26 22:54
    benlesh commented #5935
  • Jan 26 21:07
    jakovljevic-mladen commented #5988
  • Jan 26 20:05
    benlesh commented #5943
  • Jan 26 20:04
    benlesh commented #5988
  • Jan 26 20:04

    benlesh on master

    Update marble-testing.md (#5988… (compare)

  • Jan 26 20:04
    benlesh closed #5988
  • Jan 26 19:36
    DawChihLiou edited #5988
  • Jan 26 19:33
    DawChihLiou edited #5988
  • Jan 26 19:29
    DawChihLiou edited #5988
  • Jan 26 19:26
    DawChihLiou opened #5988
  • Jan 26 18:49

    benlesh on master

    fix: useDeprecatedSynchronousEr… (compare)

  • Jan 26 18:49
    benlesh closed #5984
  • Jan 26 18:49
    benlesh closed #5983
  • Jan 26 18:48

    benlesh on master

    fix: predicates that return `an… (compare)

  • Jan 26 18:48
    benlesh closed #5987
  • Jan 26 18:48
    benlesh closed #5986
  • Jan 26 18:45
    rraziel commented #5922
  • Jan 26 18:26

    benlesh on master

    chore: Use prettier by default … (compare)

  • Jan 26 18:26
    benlesh closed #5985
SAGO
@SAGOlab
import { Component, EventEmitter, Output, ViewChild, ViewEncapsulation } from '@angular/core';
import { MatSelectionList } from '@angular/material/list';

@Component({
  selector: 'app-tasks-columns-menu',
  templateUrl: './tasks-columns-menu.component.html',
  styleUrls: ['./tasks-columns-menu.component.scss'],
  encapsulation: ViewEncapsulation.None
})
export class TasksColumnsMenuComponent {
  @ViewChild('priority', {static: true}) priority: MatSelectionList;
  @ViewChild('states', {static: true}) states: MatSelectionList;

  prioritySelected: object[] = [];
  statusSelected: object[] = [];
  highlightMembers: object[] = [];
  dateRange: object = [];
  mergeOptionsChecked: object[] = [];
  removable: boolean = true;

  @Output() toggleCheck = new EventEmitter<{$event: any, optionsChecked: object}>();
  @Output() userSelected = new EventEmitter<{$event: any, user: object[]}>();

  statusLabels: object[] = [
    {
      label: 'In attesa',
      status: 'Ready',
      key: 'task-status'
    },
    {
      label: 'Preso in carico',
      status: 'Reserved',
      key: 'task-status'
    },
    {
      label: 'In lavorazione',
      status: 'InProgress',
      key: 'task-status'
    },
    {
      label: 'Sospeso',
      status: 'Suspended',
      key: 'task-status'
    }];

  priorityLabels: object[] = [
    {
      label: 'Bassa',
      priority: [0, 1, 2, 3],
      key: 'task-priority'
    },
    {
      label: 'Media',
      priority: [4, 5, 6, 7],
      key: 'task-priority'
    },
    {
      label: 'Alta',
      priority: [8, 9, 10],
      key: 'task-priority'
    }
  ]  

  constructor() {}

  stopPropagation($event) {
    $event.stopPropagation();
  }

  isChecked($event) {
    if ($event.selectedMembers !== undefined) {
      this.highlightMembers = $event.selectedMembers;
      this.highlightMembers.forEach(member => this.statusSelected.push(member))
      const withMembers = this.statusSelected.concat(this.prioritySelected);
      this.toggleCheck.emit({$event, optionsChecked: withMembers});  
    }
    else if ($event.range !== undefined) {
      this.dateRange = $event.range;
      this.statusSelected.push(this.dateRange)
      this.highlightMembers.forEach(member => this.statusSelected.push(member))
      const withDate = this.statusSelected.concat(this.prioritySelected);
      this.toggleCheck.emit({$event, optionsChecked: withDate}); 
    }
    else {
      const withoutMembers = this.statusSelected.concat(this.prioritySelected)
      this.toggleCheck.emit({$event, optionsChecked: withoutMembers});
    }
  }

  remove($event, member: object): void {
    const index = this.highlightMembers.indexOf(member);

    if (index >= 0) this.highlightMembers.splice(index, 1);

    const removeMembers = this.mergeOptionsChecked.filter(option => option['label'] !== member['label'])

    this.toggleCheck.emit({$event, optionsChecked: removeMembers});
  }
}
this is ts.
<button mat-icon-button [matMenuTriggerFor]="menu" aria-label="Example icon-button with a menu"
  class="text-right column-menu" disableRipple="true">
  <mat-icon>more_vert</mat-icon>
</button>
<mat-menu #menu="matMenu" (click)="stopPropagation($event);" class="menu">
  <div fxLayout="column" class="menu__wrapper" (click)="stopPropagation($event);">
    <h3>Filtra per</h3>
    <mat-divider></mat-divider>
    <p>STATO</p>
    <mat-selection-list #states (selectionChange)="isChecked($event)" [(ngModel)]="statusSelected">
      <mat-list-option *ngFor="let state of statusLabels;let i = index" checkboxPosition="before" (click)="stopPropagation($event);" [value]="state">
        {{ state['label'] }}
      </mat-list-option>
    </mat-selection-list>
    <mat-divider></mat-divider>
    <button mat-button [matMenuTriggerFor]="animals" (click)="stopPropagation($event)">Utente <mat-icon>double_arrow</mat-icon></button>
    <mat-chip
      *ngFor="let member of highlightMembers"
      [selectable]="true"
      [removable]="removable"
      (removed)="remove($event, member)">
      {{ member['label'] }}
      <mat-icon matChipRemove *ngIf="removable">cancel</mat-icon>
    </mat-chip>
    <mat-divider></mat-divider>
    <p>PRIORITÀ</p>
    <mat-selection-list #priority (selectionChange)="isChecked($event)" [(ngModel)]="prioritySelected">
      <mat-list-option *ngFor="let label of priorityLabels;let i = index" checkboxPosition="before" (click)="stopPropagation($event);" [value]="label">
        {{ label['label'] }}
      </mat-list-option>
    </mat-selection-list>
    <app-calendar (dateRange)="isChecked($event)"></app-calendar>
  </div>
</mat-menu>

<mat-menu #animals="matMenu">
  <app-autocomplete (selectedMembers)="isChecked($event)"></app-autocomplete>
</mat-menu>
this is the html.
Daniel Willis
@danww
k k
SAGO
@SAGOlab
thanks
@danww I have edited html and ts with the last attempt that in someway works...take a look
Daniel Willis
@danww
@SAGOlab It's taking some time for me to get a working Stackblitz - still going.
SAGO
@SAGOlab
@danww thanks a lot for your time
Daniel Willis
@danww
@SAGOlab Sorry, I got interrupted by a meeting. Does this do what you want? https://stackblitz.com/edit/angular-ivy-sven75?file=src/app/app.component.ts
Sorry, I more-or-less started from scratch.
I'm using a subscribe in the constructor but you'd probably want to @Output() the resultant Observable from the combineLatest.
Let me just make a quick edit.
SAGO
@SAGOlab
@danww Yes, thanks a lot...I'll give a try as soon as possible. Thanks for your tips and your patience, you save my day.
Daniel Willis
@danww
@SAGOlab Actually, what's there is fine - you don't need to emit an Observable. It's helpful to clean up subscriptions, so I've done that, too.
SAGO
@SAGOlab
Yes I've seen. I need to edit a little bit your code for my needed, I'll advise you asap if I success or fail. Thanks
Daniel Willis
@danww
@SAGOlab But the key part is combining the data from the three different inputs, right?
SAGO
@SAGOlab
Yes, and it can be toggle based on filter choise
Combining data and put it in an Event emitter
Daniel Willis
@danww
So you'll see that EventEmitter fires every time any of the three inputs change, and have values. Note the filter I added to the date range result, so that it only fires if both a startDate and endDate are present.
SAGO
@SAGOlab
Yes thanks
Daniel Willis
@danww
I noticed you were using stopPropagation on all your inputs. Was there any reason for that?
SAGO
@SAGOlab
I use stopPropagation to prevent that some ui closing unexpectedly on button click inside it, for example
Daniel Willis
@danww
Hmm - I've not needed to do that before.
DrewMoody
@DrewMoody

I have a set up kind of like this:

const store = new BehaviorSubject({ type: init, initState });
const state = store.asObservable().pipe(
   scan((acc, curr) => this.reducer(acc, curr)),
   shareReplay(1)
)

Is there a way to ensure that state will get ALL updates from the store even if no subscribers WITHOUT replaying the whole history any time someone subscribes? The only thing I can think of would be to keep an active subscription at all times.

DrewMoody
@DrewMoody
This seems to work as expected. Not sure it's very clean though
const store = new ReplaySubject();
const state = store.asObservable().pipe(
  startWith(),
   scan((acc, curr) => {
     console.log('SCAN!')
     return [...acc, curr]
   }, initState),
   shareReplay(1)
)
freshdev1
@freshdev1

https://stackblitz.com/edit/angular-ivy-uz6xde?file=src%2Fapp%2Fapp.component.ts

Guys in this example I want to be able to switchMap based on if any 1 of the value is available.

if both values are null, it shouldn't work, but if any 1 of them is null, it should work as expected.
should this be handled in the service method itself or be done at the operator level
Daniel Willis
@danww
You could simplify it like this:
const result = this.route.queryParams.pipe(
  filter((params) => !!params.id && !!params.applicationId),
  switchMap((params) => this.tenantService.getContractById(params.id, params.applicationId, this.serviceCode))
);
This is the sort of work I'd do in a container component.
freshdev1
@freshdev1
in this case if any 1 of them is not present it won't run the switchMap
i did it and that's how it behaved
http://localhost:4200/#/service/wrc/contracts/detail?id=&applicationId=59673bbf-236b-dfsdf&action=View
expectation is that this should invoke the switchMap, but after the filter it won't
Daniel Willis
@danww
Ah, I misread (again).
freshdev1
@freshdev1
hahahahaha :smile:
Daniel Willis
@danww
const result = this.route.queryParams.pipe(
  filter((params) => !!params.id || !!params.applicationId),
  switchMap((params) => this.tenantService.getContractById(params.id, params.applicationId, this.serviceCode))
);
'OR' instead of 'AND'.
freshdev1
@freshdev1
no worries, the good thing is you read again and correct :smile:
Ok It works. Don't know why I cannot think of this. I did exact same thing little differently but it was not working.
@danww Thank you again! Appreciate your always helping now and then.
Daniel Willis
@danww
No problem. Helping others is an opportunity for me learn.
freshdev1
@freshdev1
:thumbsup:
SAGO
@SAGOlab
@danww Hi there I've tried your code, it works but create object always when select all option, I wish instead that eventEmitter fire even if I select only one option
SAGO
@SAGOlab
@danww thanks for your tips, now works as my needed

anyone know if is possible to merge behaviurSubject into one?

selectedStates$: BehaviorSubject<StatusFilter[]> = new BehaviorSubject<
    StatusFilter[]
  >([]);
  selectedPriorities$: BehaviorSubject<PriorityFilter[]> = new BehaviorSubject<
    PriorityFilter[]
  >([]);
  selectedRangeOfDate$: BehaviorSubject<RangeDateFilter[]> = new BehaviorSubject<
  RangeDateFilter[]
  >([]);
  selectedMembers$: BehaviorSubject<MembersFilter[]> = new BehaviorSubject<
  MembersFilter[]
  >([]);

so Instead Having 4 bhsub, got one that admit all interfaces? something like:

generalBhSub$: BehaviorSubject<[MembersFilter[], RangeDateFilter[], ...and so on]> = new BehaviorSubject<[
  MembersFilter[], RangeDateFilter[], ...and so on
  >([]);
Daniel Willis
@danww
@SAGOlab you could combine them with a combineLatest:
const combinedStates$ = combineLatest([
  this.selectedStates$,
  this.selectedPriorities$,
  this.selectedRangeOfDate$,
  this.selectedMembers$,
]);

// so here's an example of what comes out:
combinedStates$
  .subscribe(([states, priorities, dateRange, members]: [StatusFilter[], PriorityFilter[], RangeDateFilter[], MembersFilter[]]) => {
    // Do something here each time any of the BehaviorSubjects emits.
  });
@SAGOlab That's what I had in my example from yesterday: https://stackblitz.com/edit/angular-ivy-sven75?file=src/app/app.component.ts
SAGO
@SAGOlab
@danww yes thanks, I solved my problem with your suggestion
combineLatest([
      this.selectedStates$,
      this.selectedPriorities$,
      this.selectedRangeOfDate$,
      this.selectedMembers$
    ])
      .pipe(takeUntil(this.destroy$))
      .subscribe(
        ([states, priorities, dateRange, members]: [
          StatusFilter[],
          PriorityFilter[],
          RangeDateFilter[],
          MembersFilter[],
        ]) => {
          this.toggleCheck.emit({optionsChecked: [states, priorities, dateRange, members].flat()});
        }
      );
Daniel Willis
@danww
@SAGOlab :thumbsup: