src/app/modules/legacy/components/cards/activity/activity.component.spec.ts

@@ -37,6 +37,7 @@ import { FeaturesService } from '../../../../../services/features.service';
 import { BlockListService } from "../../../../../common/services/block-list.service";
 import { ClientMetaService } from "../../../../../common/services/client-meta.service";
 import { clientMetaServiceMock } from "../../../../../../tests/client-meta-service-mock.spec";
+import { AutocompleteSuggestionsService } from "../../../../suggestions/services/autocomplete-suggestions.service";
 
 /* tslint:disable */
 // START MOCKS
@@ -497,6 +498,10 @@ describe('Activity', () => {
  {
  provide: BlockListService,
  useValue: MockService(BlockListService),
+ },
+ {
+ provide: AutocompleteSuggestionsService,
+ useValue: MockService(AutocompleteSuggestionsService),
  }
  ],
  schemas: [NO_ERRORS_SCHEMA]

src/app/modules/legacy/components/cards/activity/activity.html

@@ -84,8 +84,29 @@
  ></m-translate>
 
  <div class="minds-editable-container" *ngIf="editing && (!activity.custom_type || (activity.custom_type && !activity.title))">
- <!-- Please not the intentional single way binding for ngModel, we want to be able to cancel our changes -->
- <textarea class="mdl-card__supporting-text message" name="message" [ngModel]="activity.message" #messageEdit [autoGrow]></textarea>
+ <ng-template #itemTemplate let-choice="choice" let-selectChoice="selectChoice">
+ <m-post-autocomplete-item-renderer
+ [choice]="choice"
+ [selectChoice]="selectChoice"
+ ></m-post-autocomplete-item-renderer>
+ </ng-template>
+
+ <m-text-input--autocomplete-container>
+ <!-- Please note the intentional single way binding for ngModel, we want to be able to cancel our changes -->
+ <textarea
+ class="mdl-card__supporting-text message"
+ name="message"
+ [ngModel]="activity.message"
+ #messageEdit
+ [autoGrow]
+ mTextInputAutocomplete
+ [findChoices]="suggestions.findSuggestions"
+ [getChoiceLabel]="suggestions.getChoiceLabel"
+ [itemTemplate]="itemTemplate"
+ [triggerCharacters]="['#', '@']"
+ ></textarea>
+ </m-text-input--autocomplete-container>
+
 
  <ng-container *mIfFeature="'top-feeds'; else oldNSFW">
  <m-nsfw-selector

src/app/modules/legacy/components/cards/activity/activity.ts

@@ -25,6 +25,7 @@ import { BlockListService } from "../../../../../common/services/block-list.serv
 import { ActivityAnalyticsOnViewService } from "./activity-analytics-on-view.service";
 import { NewsfeedService } from "../../../../newsfeed/services/newsfeed.service";
 import { ClientMetaService } from "../../../../../common/services/client-meta.service";
+import { AutocompleteSuggestionsService } from "../../../../suggestions/services/autocomplete-suggestions.service";
 
 @Component({
  moduleId: module.id,
@@ -113,6 +114,7 @@ export class Activity implements OnInit {
  protected activityAnalyticsOnViewService: ActivityAnalyticsOnViewService,
  protected newsfeedService: NewsfeedService,
  protected clientMetaService: ClientMetaService,
+ public suggestions: AutocompleteSuggestionsService,
  @SkipSelf() injector: Injector,
  elementRef: ElementRef,
  ) {

src/app/modules/modals/modals.module.ts

-import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { NgModule } from '@angular/core';
 import { CommonModule as NgCommonModule } from '@angular/common';
 import { RouterModule } from '@angular/router';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
@@ -14,6 +14,7 @@ import { SignupOnScrollModal } from './signup/signup-on-scroll';
 import { ConfirmPasswordModalComponent } from './confirm-password/modal.component';
 import { SignupModal } from './signup/signup';
 import { TOSUpdatedModal } from './tos-updated/tos.component';
+import { TextInputAutocompleteModule } from "../../common/components/autocomplete";
 
 @NgModule({
  imports: [
@@ -23,6 +24,7 @@ import { TOSUpdatedModal } from './tos-updated/tos.component';
  FormsModule,
  ReactiveFormsModule,
  MindsFormsModule,
+ TextInputAutocompleteModule,
  ],
  declarations: [
  ConfirmModal,

src/app/modules/modals/remind-composer/remind-composer.ts

-import { Component, EventEmitter, ViewChild, ComponentFactoryResolver } from '@angular/core';
+import { Component, ComponentFactoryResolver, EventEmitter, ViewChild } from '@angular/core';
 
 import { DynamicHostDirective } from '../../../common/directives/dynamic-host.directive';
 import { ActivityPreview } from '../../legacy/components/cards/activity/preview';
+import { AutocompleteSuggestionsService } from "../../suggestions/services/autocomplete-suggestions.service";
 
 // had forwardRef(() => ActivityPreview)
 @Component({
@@ -14,12 +15,27 @@ import { ActivityPreview } from '../../legacy/components/cards/activity/preview'
  <div class="m-modal-remind-composer">
  <h3 class="m-modal-remind-title" i18n="@@MODALS__REMIND_COMPOSER__REMIND_TITLE">Remind</h3>
 
- <textarea name="message"
- [(ngModel)]="message"
- placeholder="Enter your remind status here (optional)"
- i18n-placeholder="@@MODALS__REMIND_COMPOSER__PLACEHOLDER"
- [autoGrow]
+ <ng-template #itemTemplate let-choice="choice" let-selectChoice="selectChoice">
+ <m-post-autocomplete-item-renderer
+ [choice]="choice"
+ [selectChoice]="selectChoice"
+ ></m-post-autocomplete-item-renderer>
+ </ng-template>
+
+ <m-text-input--autocomplete-container>
+ <textarea
+ name="message"
+ [(ngModel)]="message"
+ placeholder="Enter your remind status here (optional)"
+ i18n-placeholder="@@MODALS__REMIND_COMPOSER__PLACEHOLDER"
+ [autoGrow]
+ mTextInputAutocomplete
+ [findChoices]="suggestions.findSuggestions"
+ [getChoiceLabel]="suggestions.getChoiceLabel"
+ [itemTemplate]="itemTemplate"
+ [triggerCharacters]="['#', '@']"
  ></textarea>
+ </m-text-input--autocomplete-container>
 
  <div class="m-modal-remind-composer-buttons">
  <a class="m-modal-remind-composer-send" (click)="send()">
@@ -44,7 +60,10 @@ export class RemindComposerModal {
 
  @ViewChild(DynamicHostDirective, { static: true }) cardHost: DynamicHostDirective;
 
- constructor(private _componentFactoryResolver: ComponentFactoryResolver) { }
+ constructor(
+ public suggestions: AutocompleteSuggestionsService,
+ private _componentFactoryResolver: ComponentFactoryResolver,
+ ) { }
 
  set _object(object: any) {
  this.object = object;