added message when multiposting not available #58

src/app/components/create-status/create-status.component.html

@@ -3,18 +3,23 @@
         <app-waiting-animation class="waiting-icon"></app-waiting-animation>
     </div>
 
-    <input [(ngModel)]="title" type="text" class="form-control form-control-sm" name="title" autocomplete="off" placeholder="Title, Content Warning (optional)" title="title, content warning (optional)"/>
+    <input [(ngModel)]="title" type="text" class="form-control form-control-sm" name="title" autocomplete="off"
+        placeholder="Title, Content Warning (optional)" title="title, content warning (optional)" />
 
-    <textarea #reply [(ngModel)]="status" name="status" class="form-control form-control-sm status-form__status flexcroll" 
-        rows="5" required title="content"
+    <textarea #reply [(ngModel)]="status" name="status"
+        class="form-control form-control-sm status-form__status flexcroll" rows="5" required title="content"
         placeholder="What's in your mind?" (keydown.control.enter)="onCtrlEnter()"></textarea>
 
+    <div class="status-form__mention-error" *ngIf="mentionTooFarAwayError">Error: mentions must be placed closer to the
+        start in order to use multiposting.</div>
+
     <select class="form-control form-control-sm form-control--privacy" id="privacy" name="privacy"
         [(ngModel)]="selectedPrivacy">
         <option *ngFor="let p of privacyList" [ngValue]="p">{{p}}</option>
     </select>
     <div class="status-form__counter">
-        <span class="status-form__counter--count">{{charCountLeft}}</span> <span class="status-form__counter--posts">{{postCounts - 1}}/{{postCounts}}</span>
+        <span class="status-form__counter--count">{{charCountLeft}}</span> <span
+            class="status-form__counter--posts">{{postCounts - 1}}/{{postCounts}}</span>
     </div>
     <button type="submit" class="btn btn-sm btn-custom-primary" *ngIf="statusReplyingToWrapper">REPLY!</button>
     <button type="submit" class="btn btn-sm btn-custom-primary" *ngIf="!statusReplyingToWrapper">POST!</button>

src/app/components/create-status/create-status.component.scss

@@ -88,4 +88,10 @@ $counter-width: 90px;
             width: 12px;
         }
     }
+
+    &__mention-error {
+        border: 2px dashed red;
+        padding: 5px 10px;
+        margin: 5px;
+    }
 }

src/app/components/create-status/create-status.component.ts

@@ -11,6 +11,7 @@ import { StatusWrapper } from '../../models/common.model';
 import { AccountInfo } from '../../states/accounts.state';
 import { InstancesInfoService } from '../../services/instances-info.service';
 import { MediaService } from '../../services/media.service';
+import { identifierModuleUrl } from '@angular/compiler';
 
 
 @Component({
@@ -122,8 +123,39 @@ export class CreateStatusComponent implements OnInit, OnDestroy {
         }
     }
 
+    mentionTooFarAwayError: boolean;
+
     private countStatusChar(status: string) {
+        this.mentionTooFarAwayError = false;
         const parseStatus = this.parseStatus(status);
+
+        const mentions = this.getMentionsFromStatus(status);
+        if(mentions.length > 0){
+            let containAllMention = true;
+            mentions.forEach(m => {
+                if(!parseStatus[0].includes(m)){
+                    containAllMention = false;
+                }
+            });
+
+            if(!containAllMention){
+                this.mentionTooFarAwayError = true;
+                this.charCountLeft = this.maxCharLength - status.length;
+                this.postCounts = 1;
+                return;
+            }
+
+            // const lastMention = mentions[mentions.length - 1];
+            // const lastMentionPosition = status.lastIndexOf(lastMention);
+            // console.warn(`lastMentionPosition ${lastMentionPosition}`);
+            // if(lastMentionPosition > (this.maxCharLength - lastMention.length * 2 + 10)){
+            //     this.mentionTooFarAwayError = true;
+            //     this.charCountLeft = this.maxCharLength - status.length;
+            //     this.postCounts = 1;
+            //     return;
+            // }
+        }
+
         const currentStatus = parseStatus[parseStatus.length - 1];
         const statusExtraChars = this.getMentionExtraChars(status);
 
@@ -159,7 +191,7 @@ export class CreateStatusComponent implements OnInit, OnDestroy {
     }
 
     onSubmit(): boolean {
-        if (this.isSending) return false;
+        if (this.isSending || this.mentionTooFarAwayError) return false;
 
         this.isSending = true;