Skip to content

Commit

Permalink
fixed logic and added examples
Browse files Browse the repository at this point in the history
  • Loading branch information
lkramarov committed Apr 16, 2019
1 parent cebab78 commit 608643c
Show file tree
Hide file tree
Showing 29 changed files with 205 additions and 6,127 deletions.
3 changes: 1 addition & 2 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -181,13 +181,12 @@
"server-dev:sidepanel": "npm run server-dev -- --env.component sidepanel",
"server-dev:splitter": "npm run server-dev -- --env.component splitter",
"server-dev:tabs": "npm run server-dev -- --env.component tabs",
"server-dev:tag": "npm run server-dev -- --env.component tag",
"server-dev:tags": "npm run server-dev -- --env.component tags",
"server-dev:textarea": "npm run server-dev -- --env.component textarea",
"server-dev:toggle": "npm run server-dev -- --env.component toggle",
"server-dev:theme-picker": "npm run server-dev -- --env.component theme-picker",
"server-dev:tree": "npm run server-dev -- --env.component tree",
"server-dev:tree-select": "npm run server-dev -- --env.component tree-select",
"server-dev:typeahead": "npm run server-dev -- --env.component typeahead",
"server-dev:typography": "npm run server-dev -- --env.component typography",
"server-dev:tooltip": "npm run server-dev -- --env.component tooltip",
"server-dev:timepicker": "npm run server-dev -- --env.component timepicker"
Expand Down
22 changes: 0 additions & 22 deletions src/lib-dev/autocomplete/template.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,26 +9,4 @@
<mc-option *ngFor="let option of filteredOptions | async" [value]="option">{{ option }}</mc-option>
</mc-autocomplete>
</mc-form-field>

<!--<br><br>-->

<!--<mc-form-field>-->
<!--<mc-typeahead [formControl]="multiSelectSelectFormControl">-->
<!--<mc-option value="Normal">Normal</mc-option>-->
<!--<mc-option value="Hovered">Hovered</mc-option>-->
<!--<mc-option value="Selected">Selected</mc-option>-->
<!--<mc-option value="Selected1">Selected1</mc-option>-->
<!--</mc-typeahead>-->
<!--</mc-form-field>-->

<!--<br><br>-->

<!--<mc-form-field>-->
<!--<mc-typeahead [(value)]="multipleSelected" [disabled]="true">-->
<!--<mc-option value="Normal">Normal</mc-option>-->
<!--<mc-option value="Hovered">Hovered</mc-option>-->
<!--<mc-option value="Selected">Selected</mc-option>-->
<!--<mc-option value="Selected1">Selected1</mc-option>-->
<!--</mc-typeahead>-->
<!--</mc-form-field>-->
</div>
110 changes: 64 additions & 46 deletions src/lib-dev/tags/module.ts
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,7 @@
import {
AfterContentInit,
AfterViewInit,
Component,
ElementRef,
NgModule,
NgModule, OnInit,
ViewChild,
ViewEncapsulation
} from '@angular/core';
Expand All @@ -12,14 +10,12 @@ import { BrowserModule } from '@angular/platform-browser';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { COMMA, ENTER } from '@ptsecurity/cdk/keycodes';
import { McAutocomplete, McAutocompleteModule, McAutocompleteSelectedEvent } from '@ptsecurity/mosaic/autocomplete';
import { McAutocompleteModule, McAutocompleteSelectedEvent } from '@ptsecurity/mosaic/autocomplete';
import { McFormFieldModule } from '@ptsecurity/mosaic/form-field';
import { McIconModule } from '@ptsecurity/mosaic/icon';
import { McTagList, McTagsModule } from '@ptsecurity/mosaic/tags';
import { McTagInputEvent } from '@ptsecurity/mosaic/tags/tag-input';
import { from } from 'rxjs';
import { merge } from 'rxjs/internal/observable/merge';
import { of } from 'rxjs/internal/observable/of';
import { merge } from 'rxjs';
import { map } from 'rxjs/operators';


Expand All @@ -29,93 +25,115 @@ import { map } from 'rxjs/operators';
styleUrls: ['./styles.scss'],
encapsulation: ViewEncapsulation.None
})
export class DemoComponent implements AfterViewInit, AfterContentInit {
export class DemoComponent implements OnInit {
visible = true;
tagCtrl = new FormControl();

tags: string[] = ['tag1'];
allTags: string[] = ['tag1', 'tag2', 'tag3', 'tag4', 'tag5', 'tag6', 'tag7', 'tag8', 'tag9', 'tag10'];
filteredTags: any;
simpleTags = ['tag', 'tag1', 'tag2', 'tag3', 'tag4'];

readonly separatorKeysCodes: number[] = [ENTER, COMMA];

@ViewChild('tagInput') tagInput: ElementRef<HTMLInputElement>;
@ViewChild('autocomplete') mcAutocomplete: McAutocomplete;
@ViewChild('tagList') tagList: McTagList;
filteredByTagsList: any[] = [];
filteredByInput: any[] = [];
inputTags = ['tag', 'tag1', 'tag2', 'tag3', 'tag4'];

constructor() {}
autocompleteAllTags: string[] = ['tag1', 'tag2', 'tag3', 'tag4', 'tag5', 'tag6', 'tag7', 'tag8', 'tag9', 'tag10'];
autocompleteSelectedTags: string[] = ['tag1'];
autocompleteFilteredTagsByInput: string[] = [];
autocompleteFilteredTags: any;

readonly separatorKeysCodes: number[] = [ENTER, COMMA];

ngAfterContentInit(): void {
console.log('ngAfterContentInit');
@ViewChild('inputTagInput') inputTagInput: ElementRef<HTMLInputElement>;
@ViewChild('inputTagList') inputTagList: McTagList;

this.filteredTags = merge(
this.tagList.tagChanges.asObservable()
.pipe(map((tags) => {
const values = tags.map((tag) => tag.value);
@ViewChild('autocompleteTagInput') autocompleteTagInput: ElementRef<HTMLInputElement>;
@ViewChild('autocompleteTagList') autocompleteTagList: McTagList;

this.filteredByTagsList = this.allTags.filter((tag) => !values.includes(tag));
ngOnInit(): void {
this.autocompleteFilteredTags = merge(
this.autocompleteTagList.tagChanges.asObservable()
.pipe(map((selectedTags) => {
const values = selectedTags.map((tag) => tag.value);

return this.filteredByTagsList;
// return this.filteredByInput.filter((tag) => !this.filteredByTagsList.includes(tag));
return this.autocompleteAllTags.filter((tag) => !values.includes(tag));
})),
this.tagCtrl.valueChanges
.pipe(map((value) => {
const tag = (value && value.new) ? value.value : value;
const typedText = (value && value.new) ? value.value : value;

this.filteredByInput = tag ? this.filter(tag) : this.allTags.slice();
this.autocompleteFilteredTagsByInput = typedText ?
this.filter(typedText) : this.autocompleteAllTags.slice();

return this.filteredByInput.filter((tag) => !this.tags.includes(tag));
return this.autocompleteFilteredTagsByInput.filter(
// @ts-ignore
(tag) => !this.autocompleteSelectedTags.includes(tag)
);
}))
);
}

ngAfterViewInit(): void {
console.log('ngAfterViewInit');
}
autocompleteOnCreate(event: McTagInputEvent): void {
const input = event.input;
const value = event.value;

onChangedTagList() {
console.log('onChangedTagList');
if ((value || '').trim()) {
this.autocompleteSelectedTags.push(value.trim());
}

if (input) {
input.value = '';
}
}

onCreate(event: McTagInputEvent): void {
inputOnCreate(event: McTagInputEvent): void {
const input = event.input;
const value = event.value;

if ((value || '').trim()) {
this.tags.push(value.trim());
this.inputTags.push(value.trim());
}

if (input) {
input.value = '';
}
}

onSelect(event: McAutocompleteSelectedEvent): void {
autocompleteOnSelect(event: McAutocompleteSelectedEvent): void {
if (event.option.value.new) {
this.tags.push(event.option.value.value);
this.autocompleteSelectedTags.push(event.option.value.value);
} else {
this.tags.push(event.option.value);
this.autocompleteSelectedTags.push(event.option.value);
}
this.tagInput.nativeElement.value = '';
this.autocompleteTagInput.nativeElement.value = '';
this.tagCtrl.setValue(null);
}

onRemove(fruit: any): void {
const index = this.tags.indexOf(fruit);
autocompleteOnRemove(fruit: any): void {
const index = this.autocompleteSelectedTags.indexOf(fruit);

if (index >= 0) {
this.autocompleteSelectedTags.splice(index, 1);
}
}

onRemoveTag(tag: string): void {
const index = this.simpleTags.indexOf(tag);

if (index >= 0) {
this.simpleTags.splice(index, 1);
}
}

inputOnRemoveTag(tag: string): void {
const index = this.inputTags.indexOf(tag);

if (index >= 0) {
this.tags.splice(index, 1);
this.inputTags.splice(index, 1);
}
}

private filter(value: string): string[] {
const filterValue = value.toLowerCase();

// todo добавить фильтрацию
return this.allTags.filter((tag) => tag.toLowerCase().indexOf(filterValue) === 0);
return this.autocompleteAllTags.filter((tag) => tag.toLowerCase().indexOf(filterValue) === 0);
}
}

Expand Down
4 changes: 4 additions & 0 deletions src/lib-dev/tags/styles.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,3 +7,7 @@
.mc-tag {
margin-right: 4px;
}

.example-container {
width: 50%;
}
Loading

0 comments on commit 608643c

Please sign in to comment.