Merge pull request #4693 from crazyserver/MOBILE-4948

Mobile 4948 translatable pipes

Author: dpalou

src/core/pipes/bytes-to-size.ts

@@ -12,33 +12,63 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import { Pipe, PipeTransform } from '@angular/core';
+import { Pipe, PipeTransform, OnDestroy } from '@angular/core';
+import { Translate } from '@singletons';
 
 import { CoreLogger } from '@static/logger';
 import { CoreText } from '@static/text';
+import { Subscription } from 'rxjs';
 
 /**
  * Pipe to turn a number in bytes to a human readable size (e.g. 5,25 MB).
  */
 @Pipe({
     name: 'coreBytesToSize',
+    pure: false,
 })
-export class CoreBytesToSizePipe implements PipeTransform {
+export class CoreBytesToSizePipe implements PipeTransform, OnDestroy {
 
     protected logger: CoreLogger;
+    protected cachedResult?: string;
+    protected subscription: Subscription;
+
+    protected lastValue?: number | string;
 
     constructor() {
         this.logger = CoreLogger.getInstance('CoreBytesToSizePipe');
+
+        this.subscription = Translate.onLangChange.subscribe(() => {
+            this.cachedResult = undefined;
+        });
     }
 
     /**
-     * Takes a number and turns it to a human readable size.
+     * Pipes a number into a human readable size.
      *
      * @param value The bytes to convert.
      * @returns Readable bytes.
      */
     transform(value: number | string): string {
-        if (typeof value == 'string') {
+        if (this.lastValue !== value) {
+            this.lastValue = value;
+            this.cachedResult = undefined;
+        }
+
+        if (this.cachedResult === undefined) {
+            this.cachedResult = this.formatBytes(value);
+        }
+
+        return this.cachedResult;
+    }
+
+    /**
+     * Takes a number and turns it to a human readable size.
+     *
+     * @param value The bytes to convert.
+     * @returns Readable bytes.
+     */
+    protected formatBytes(value: number | string): string {
+        if (typeof value === 'string') {
             // Convert the value to a number.
             const numberValue = parseInt(value, 10);
             if (isNaN(numberValue)) {
@@ -52,4 +82,11 @@ export class CoreBytesToSizePipe implements PipeTransform {
         return CoreText.bytesToSize(value);
     }
 
+    /**
+     * @inheritdoc
+     */
+    ngOnDestroy(): void {
+        this.subscription.unsubscribe();
+    }
+
 }

src/core/pipes/date-day-or-time.ts

@@ -12,12 +12,13 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import { Pipe, PipeTransform } from '@angular/core';
+import { Pipe, PipeTransform, OnDestroy } from '@angular/core';
 import { dayjs } from '@/core/utils/dayjs';
 
 import { CoreTime } from '@static/time';
 import { Translate } from '@singletons';
 import { CoreLogger } from '@static/logger';
+import { Subscription } from 'rxjs';
 
 /**
  * Filter to display a date using the day, or the time.
@@ -34,22 +35,50 @@ import { CoreLogger } from '@static/logger';
  */
 @Pipe({
     name: 'coreDateDayOrTime',
+    pure: false,
 })
-export class CoreDateDayOrTimePipe implements PipeTransform {
+export class CoreDateDayOrTimePipe implements PipeTransform, OnDestroy {
 
     protected logger: CoreLogger;
+    protected cachedResult?: string;
+    protected subscription: Subscription;
+
+    protected lastTimestamp?: number | string;
 
     constructor() {
         this.logger = CoreLogger.getInstance('CoreDateDayOrTimePipe');
+
+        this.subscription = Translate.onLangChange.subscribe(() => {
+            this.cachedResult = undefined;
+        });
     }
 
     /**
-     * Format a timestamp.
+     * Pipes a timestamp into a formatted time or date.
      *
      * @param timestamp The UNIX timestamp (without milliseconds).
      * @returns Formatted time.
      */
     transform(timestamp: string | number): string {
+        if (this.lastTimestamp !== timestamp) {
+            this.lastTimestamp = timestamp;
+            this.cachedResult = undefined;
+        }
+
+        if (this.cachedResult === undefined) {
+            this.cachedResult = this.formatTimestamp(timestamp);
+        }
+
+        return this.cachedResult;
+    }
+
+    /**
+     * Format a timestamp.
+     *
+     * @param timestamp The UNIX timestamp (without milliseconds).
+     * @returns Formatted time.
+     */
+    protected formatTimestamp(timestamp: string | number): string {
         if (typeof timestamp === 'string') {
             // Convert the value to a number.
             const numberTimestamp = parseInt(timestamp, 10);
@@ -69,4 +98,11 @@ export class CoreDateDayOrTimePipe implements PipeTransform {
         });
     }
 
+    /**
+     * @inheritdoc
+     */
+    ngOnDestroy(): void {
+        this.subscription.unsubscribe();
+    }
+
 }

src/core/pipes/duration.ts

@@ -12,43 +12,85 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import { Pipe, PipeTransform } from '@angular/core';
+import { Pipe, PipeTransform, OnDestroy } from '@angular/core';
+import { Translate } from '@singletons';
 import { CoreLogger } from '@static/logger';
 import { CoreTime } from '@static/time';
+import { Subscription } from 'rxjs';
 
 /**
  * Filter to turn a number of seconds to a duration. E.g. 60 -> 1 minute.
  */
 @Pipe({
     name: 'coreDuration',
+    pure: false,
 })
-export class CoreDurationPipe implements PipeTransform {
+export class CoreDurationPipe implements PipeTransform, OnDestroy {
 
     protected logger: CoreLogger;
+    protected cachedResult?: string;
+    protected subscription: Subscription;
+
+    protected lastSeconds?: number | string;
+    protected lastPrecision?: number;
 
     constructor() {
-        this.logger = CoreLogger.getInstance('CoreBytesToSizePipe');
+        this.logger = CoreLogger.getInstance('CoreDurationPipe');
+
+        this.subscription = Translate.onLangChange.subscribe(() => {
+            this.cachedResult = undefined;
+        });
     }
 
     /**
      * Turn a number of seconds to a duration. E.g. 60 -> 1 minute.
      *
      * @param seconds The number of seconds.
+     * @param precision Number of elements to have in precision.
      * @returns Formatted duration.
      */
-    transform(seconds: string | number): string {
-        if (typeof seconds == 'string') {
+    transform(seconds: string | number, precision = 2): string {
+        if (this.lastSeconds !== seconds || this.lastPrecision !== precision) {
+            this.lastSeconds = seconds;
+            this.lastPrecision = precision;
+            this.cachedResult = undefined;
+        }
+
+        if (this.cachedResult === undefined) {
+            this.cachedResult = this.formatTime(seconds, precision);
+        }
+
+        return this.cachedResult;
+    }
+
+    /**
+     * Format duration given the number of seconds.
+     *
+     * @param seconds Number of seconds.
+     * @param precision Number of elements to have in precision.
+     * @returns Formatted time.
+     */
+    protected formatTime(seconds: string | number, precision: number): string {
+        if (typeof seconds === 'string') {
             // Convert the value to a number.
             const numberSeconds = parseInt(seconds, 10);
             if (isNaN(numberSeconds)) {
                 this.logger.error('Invalid value received', seconds);
 
                 return seconds;
             }
+
             seconds = numberSeconds;
         }
 
-        return CoreTime.formatTime(seconds);
+        return CoreTime.formatTime(seconds, precision);
+    }
+
+    /**
+     * @inheritdoc
+     */
+    ngOnDestroy(): void {
+        this.subscription.unsubscribe();
     }
 
 }

src/core/pipes/format-date.ts

@@ -12,36 +12,71 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import { Pipe, PipeTransform } from '@angular/core';
+import { OnDestroy, Pipe, PipeTransform } from '@angular/core';
 import { CoreTime } from '@static/time';
 import { CoreLogger } from '@static/logger';
+import { Translate } from '@singletons';
+import { Subscription } from 'rxjs';
 
 /**
  * Filter to format a date.
  */
 @Pipe({
     name: 'coreFormatDate',
+    pure: false,
 })
-export class CoreFormatDatePipe implements PipeTransform {
+export class CoreFormatDatePipe implements PipeTransform, OnDestroy {
 
     protected logger: CoreLogger;
+    protected cachedResult?: string;
+    protected subscription: Subscription;
+
+    protected lastFormat?: string;
+    protected lastTimestamp?: string | number;
+    protected lastConvert?: boolean;
 
     constructor() {
         this.logger = CoreLogger.getInstance('CoreFormatDatePipe');
+
+        this.subscription = Translate.onLangChange.subscribe(() => {
+            this.cachedResult = undefined;
+        });
     }
 
     /**
-     * Format a date.
+     * Pipes a timestamp into a formatted date.
      *
      * @param timestamp Timestamp to format (in milliseconds). If not defined, use current time.
      * @param format Format to use. It should be a string code to handle i18n (e.g. core.strftimetime).
      *               Defaults to strftimedaydatetime.
      * @param convert If true, convert the format from PHP to DayJS. Set it to false for DayJS formats.
      * @returns Formatted date.
      */
-    transform(timestamp: string | number, format?: string, convert?: boolean): string {
+    transform(timestamp: string | number, format = 'strftimedaydatetime', convert?: boolean): string {
+        if (this.lastTimestamp !== timestamp || this.lastFormat !== format || this.lastConvert !== convert) {
+            this.lastTimestamp = timestamp;
+            this.lastFormat = format;
+            this.lastConvert = convert;
+            this.cachedResult = undefined;
+        }
+
+        if (this.cachedResult === undefined) {
+            this.cachedResult = this.formatDate(timestamp, format, convert);
+        }
+
+        return this.cachedResult;
+    }
+
+    /**
+     * Format a date.
+     *
+     * @param timestamp Timestamp to format (in milliseconds). If not defined, use current time.
+     * @param format Format to use. It should be a string code to handle i18n (e.g. core.strftimetime).
+     * @param convert If true, convert the format from PHP to DayJS. Set it to false for DayJS formats.
+     * @returns Formatted date.
+     */
+    protected formatDate(timestamp: string | number, format: string, convert?: boolean): string {
         timestamp = timestamp || Date.now();
-        format = format || 'strftimedaydatetime';
 
         if (typeof timestamp === 'string') {
             // Convert the value to a number.
@@ -55,16 +90,23 @@ export class CoreFormatDatePipe implements PipeTransform {
         }
 
         // Add "core." if needed.
-        if (format.indexOf('strf') === 0 || format.indexOf('df') === 0) {
+        if (format.startsWith('strf') || format.startsWith('df')) {
             format = `core.${format}`;
         }
 
         if (convert === undefined) {
             // Initialize convert param. Set it to false if it's a core.df format, set it to true otherwise.
-            convert = format.indexOf('core.df') != 0;
+            convert = !format.startsWith('core.df');
         }
 
         return CoreTime.userDate(timestamp, format, convert);
     }
 
+    /**
+     * @inheritdoc
+     */
+    ngOnDestroy(): void {
+        this.subscription.unsubscribe();
+    }
+
 }

src/core/pipes/seconds-to-hms.ts

@@ -38,6 +38,7 @@ export class CoreSecondsToHMSPipe implements PipeTransform {
      * Convert a number of seconds to Hours:Minutes:Seconds.
      *
      * @param seconds Number of seconds.
+     * @param showHours Whether to always show hours (even if 0).
      * @returns Formatted seconds.
      */
     transform(seconds: string | number, showHours = true): string {