Skip to content
This repository was archived by the owner on Feb 6, 2024. It is now read-only.

feat(#256): remove debounce when entering tags and prevent enter #277

Merged
merged 1 commit into from
Sep 1, 2019
Merged

feat(#256): remove debounce when entering tags and prevent enter #277

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
40 changes: 36 additions & 4 deletions studio/src/app/components/editor/publish/app-publish-edit/app-publish-edit.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,10 @@ import {ApiUserService} from '../../../../services/api/user/api.user.service';
import {PublishService} from '../../../../services/editor/publish/publish.service';
import {FeedService} from '../../../../services/data/feed/feed.service';

interface CustomInputEvent extends KeyboardEvent {
data: string | null;
}

@Component({
tag: 'app-publish-edit',
styleUrl: 'app-publish-edit.scss'
Expand Down Expand Up @@ -246,18 +250,46 @@ export class AppPublishEdit {

private onTagInput($event: CustomEvent<KeyboardEvent>): Promise<void> {
return new Promise<void>((resolve) => {
if (!$event || !$event.detail) {
resolve();
return;
}

if (($event.detail as CustomInputEvent).data === ' ' || ($event.detail as CustomInputEvent).data === ',') {
this.addTag();
resolve();
return;
}

this.tag = ($event.target as InputTargetEvent).value;

resolve();
});
}

private onTagChange() {
private onTagInputKeyUp($event: KeyboardEvent): Promise<void> {
return new Promise<void>((resolve) => {
if (!$event) {
resolve();
return;
}

if ($event.code === 'Enter') {
this.addTag();
}

resolve();
});
}

private addTag() {
if (this.tag && this.tag !== undefined && this.tag !== null && this.tag.length >= 3) {
if (this.tag.charAt(0) === '#') {
this.tag = this.tag.substr(1);
}

this.tag = this.tag.replace(' ', '');

if (this.tags && this.tags.indexOf(this.tag) === -1) {
this.tags = [...this.tags, this.tag.trim()];
this.tag = null;
Expand Down Expand Up @@ -305,7 +337,7 @@ export class AppPublishEdit {
<p class="meta-text">But first, edit or review your presentation's title and summary and add or change tags (up to 5) to
make your presentation more inviting to readers.</p>

<form onSubmit={(e: Event) => this.handleSubmit(e)}>
<form onSubmit={(e: Event) => this.handleSubmit(e)} onKeyPress={(e) => { e.key === 'Enter' && e.preventDefault(); }}>
<ion-list class="inputs-list">
<ion-item class="item-title">
<ion-label>Title</ion-label>
Expand Down Expand Up @@ -337,8 +369,8 @@ export class AppPublishEdit {
<ion-item>
<ion-input debounce={500} input-mode="text" value={this.tag} placeholder="Add a tag..."
disabled={!this.tags || this.tags.length >= 5 || this.publishing}
onIonInput={(e: CustomEvent<KeyboardEvent>) => this.onTagInput(e)}
onIonChange={() => this.onTagChange()}></ion-input>
onKeyUp={($event: KeyboardEvent) => this.onTagInputKeyUp($event)}
onIonInput={(e: CustomEvent<KeyboardEvent>) => this.onTagInput(e)}></ion-input>
</ion-item>

<app-feed-card-tags tags={this.tags} editable={true} disable-remove={this.publishing} onRemoveTag={($event: CustomEvent) => this.removeTag($event)}></app-feed-card-tags>
Expand Down