Best search render

src/app/common/control.service.ts

@@ -9,7 +9,6 @@ export interface Validation {
     required?: boolean;
 }
 
-
 @Injectable({
     providedIn: 'root'
 })
@@ -24,7 +23,7 @@ export class ControlService {
             group[validation.id] = this.createValidator(validation);
         });
 
-        return (new FormGroup(group));
+        return new FormGroup(group);
     }
 
     private createValidator(validation: Validation): FormControl {
@@ -41,7 +40,6 @@ export class ControlService {
                 control.push(Validators.pattern('[^\t\n\r]*'));
         }
 
-
         return new FormControl(validation.value || '', controls);
     }
 

src/app/common/utils.ts

+
+
+const unicodePatterns = [
+    { s: /e|é|è|ê|ë|ẽ|ē|Ẽ|Ē|€/gi, p: '[eéèêëẽēẼĒ€]' },
+    { s: /a|á|à|â|ä|ã|ā|å|Ã|Ā|Å/gi, p: '[aáàâäãāåĀÅ]' },
+    { s: /i|í|ì|î|ï|ĩ|ī|Ĩ|Ī/gi, p: '[iíìîïĩīĨĪ]' },
+    { s: /u|ú|ù|û|ü|ũ|ū|Ũ|Ū/gi, p: '[uúùûüũūŨŪ]' },
+    { s: /o|ó|ò|ô|ö|õ|ð|ō|Õ|Ð|Ō/gi, p: '[oóòôöõðōÕÐŌ]' },
+    { s: /y|ý|ÿ/gi, p: '[yýÿ]' },
+    { s: /c|ç/gi, p: '[cç]' },
+    { s: /n|ñ/gi, p: '[nñ]' }
+];
+
+const protectStringPattern = /[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g;
+
+export class Utils {
+
+    /**
+     * Transforms a Regex string for Unicode support.
+     * @param str string to format
+     * @return formated string
+     */
+    static formatToUnicodePattern(str: string): string {
+        let formated = Utils.protectPattern(str);
+        unicodePatterns.forEach(u => formated = formated.replace(u.s, u.p));
+        return formated;
+    }
+
+    /**
+     * Protects for a string for a pattern
+     * @param str string to protect
+     * @returns protected string
+     */
+    static protectPattern(str: String): string {
+        return str.replace(protectStringPattern, '\\$&');
+    }
+
+    /**
+     * copy an object (without methods
+     * @param object object to copy
+     * @returns copied object
+     */
+    static jsonCopy<T>(object: T): T {
+        return JSON.parse(JSON.stringify(object));
+    }
+}

src/app/tweets/tweets-calendar.component.scss

@@ -8,6 +8,14 @@
                      [main-left] "b d f" 1fr  [main-right]
                    [footer-left] "b d f" 30px [footer-right] / 250px 1fr 250px;
     max-width: 100%;
+
+    & /deep/ .key {
+        background-color: #fefe72;
+        padding: 2px 3px;
+        margin: 0 -3px;
+        border-radius: 3px;
+        box-shadow: 1px 1px 2px #0003;
+    }
 }
 
 .tweets-total {
@@ -90,7 +98,9 @@
 
 .tweets {
     grid-area: d;
+    display: flex;
     flex: 1;
+    flex-direction: column-reverse;
 }
 
 .tweet {

src/app/tweets/tweets-calendar.component.ts

@@ -76,13 +76,15 @@ export class TweetsCalendarComponent implements OnInit, OnDestroy {
     }
 
     show(month: TweetsCalendar) {
+        this.search.active = false;
+
         this.unselectCurrentMouth();
         this.month = month;
         this.month.selected = true;
 
         // construct mount calandar
 
-
+        // TODO
 
         // lightbox album
         this.album = [];

src/app/tweets/tweets.service.ts

@@ -6,6 +6,8 @@ import { Subject } from 'rxjs';
 import { Tweets, TweetsCalendar, Tweet } from './tweet';
 import { UserService, TypeData } from '../user/user.service';
 import { AppService } from '../app.service';
+import { Utils } from '../common/utils';
+
 
 @Injectable({
   providedIn: 'root',
@@ -195,12 +197,21 @@ export class TweetsService {
     const result: Tweet[] = [];
 
     tweets.forEach(tweet => {
-      if (tweet.full_text.match(new RegExp(value, 'gi'))) {
-        result.push(tweet);
+      const match = tweet.html_text.match(new RegExp(Utils.formatToUnicodePattern(value), 'gi'));
+      if (match) {
+        const copy = Utils.jsonCopy<Tweet>(tweet);
+        match.forEach(
+          (m: string) => {
+            copy.html_text = copy.html_text.replace(
+              new RegExp(Utils.protectPattern(m), 'gi'),
+              `<span class="key">${m}</span>`
+            );
+          }
+        );
+        result.push(copy);
       }
     });
 
-
     return result;
   }
 }