Feature/negative durations

README.md

@@ -54,6 +54,9 @@ String or Null, default `'PT0S'`.
 
 Value to be used when the duration is 0. Since [the specification](https://en.wikipedia.org/wiki/ISO_8601#Durations) says that `'PT0S'` or `'P0D'` are both valid, you are allowed to change this value. You can also pass just `null`.
 
+#### showNegative
+Boolean, default `false`. Sets up the option for negative and positive durations.
+
 #### showButtons
 Boolean, default `true`. Shows the up and down buttons.
 

src/app/app.component.html

@@ -50,6 +50,30 @@
       </div>
     </div>
   </div>
+
+  <hr>
+
+  <div class="row">
+      <div class="col-xs-12">
+        <div class="h1">Negative Duration</div>
+
+        <app-duration-picker [(value)]="myNegativeValue" [options]="{ showNegative: showNegative }"></app-duration-picker>
+
+      </div>
+      <div class="col-xs-6">
+        <div class="alert alert-info">
+          {{ myNegativeValue }}
+        </div>
+        <button (click)="myNegativeValue = '-P7Y3M2W4DT1H3M5S'" class="btn btn-info">Set to value '-P7Y3M2W4DT1H3M5S'</button>
+      </div>
+
+      <div class="col-xs-6">
+          <button (click)="showNegative = !showNegative" class="btn btn-warning">
+            <span *ngIf="!showNegative">Show </span>
+            <span *ngIf="showNegative">Hide </span>
+            Negative Durations</button>
+        </div>
+    </div>  
 </div>
 
 

src/app/app.component.ts

@@ -9,6 +9,8 @@ import { FormControl, FormGroup } from '@angular/forms';
 export class AppComponent implements OnInit {
 
   myValue;
+  myNegativeValue;
+  showNegative = true;
   disabled = false;
   form: FormGroup;
 

src/app/duration-picker/duration-picker.component.css

@@ -18,6 +18,14 @@ input {
   box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
 }
 
+input[type="checkbox"] {
+  display: none;
+}
+
+.status-container {
+  margin-right: 5px;
+}
+
 a.btn {
   padding: 1px;
 }

src/app/duration-picker/duration-picker.component.html

@@ -2,6 +2,7 @@
   <tbody>
 
   <tr *ngIf="config.showLetters">
+    <td *ngIf="config.showNegative"></td>
     <td *ngIf="config.showYears">Y</td>
     <td *ngIf="config.showMonths">M</td>
     <td *ngIf="config.showWeeks">W</td>
@@ -12,6 +13,8 @@
   </tr>
 
   <tr *ngIf="config.showButtons">
+    <td *ngIf="config.showNegative"></td>
+
     <td *ngIf="config.showYears">
       <a class="btn btn-link" id="dp-years-up" (click)="years = years + 1" [ngClass]="{ 'disabled': disabled }">
         <span class="glyphicon glyphicon-chevron-up"></span>
@@ -56,6 +59,14 @@
   </tr>
 
   <tr>
+    <td *ngIf="config.showNegative">
+      <input type="checkbox" id="dp-negative" [(ngModel)]="negative" #status [disabled]="disabled">
+      <a class="btn btn-link status-container" (click)="status.click()" [ngClass]="{ 'disabled': disabled }">
+        <span *ngIf="!negative" class="glyphicon glyphicon-plus"></span>
+        <span *ngIf="negative" class="glyphicon glyphicon-minus"></span>
+      </a>
+    </td>
+
     <td *ngIf="config.showYears">
       <input (blur)="onTouched()" type="number" placeholder="Y" id="dp-years" [(ngModel)]="years" [disabled]="disabled">
     </td>
@@ -90,6 +101,8 @@
   </tr>
 
   <tr *ngIf="config.showButtons">
+    <td *ngIf="config.showNegative"></td>
+
     <td *ngIf="config.showYears">
       <a class="btn btn-link" id="dp-years-down" (click)="years = years - 1" [ngClass]="{ 'disabled': disabled }">
         <span class="glyphicon glyphicon-chevron-down"></span>

src/app/duration-picker/duration-picker.component.spec.ts

@@ -59,11 +59,47 @@ describe('DurationPickerComponent', () => {
     expect(component.generate()).toBe('P9MT10M');
   });
 
+  it('generate() should correctly generate the negative duration values', () => {
+    set(component, 1, 2, 3, 4, 5, 6, 7, true);
+    expect(component.generate()).toBe('-P1Y2M3W4DT5H6M7S');
+
+    set(component, '1', '2', '3', '4', '5', '6', '7', true);
+    expect(component.generate()).toBe('-P1Y2M3W4DT5H6M7S');
+
+    set(component, 1, 0, 0, 0, 0, 0, 0, true);
+    expect(component.generate()).toBe('-P1Y');
+
+    set(component, 0, 123, 0, 0, 0, 0, 0, true);
+    expect(component.generate()).toBe('-P123M');
+
+    set(component, 0, 0, 3, 0, 0, 0, 0, true);
+    expect(component.generate()).toBe('-P3W');
+
+    set(component, 0, 0, 0, 2, 0, 0, 0, true);
+    expect(component.generate()).toBe('-P2D');
+
+    set(component, 0, 0, 0, 0, 5, 0, 0, true);
+    expect(component.generate()).toBe('-PT5H');
+
+    set(component, 0, 0, 0, 0, 0, 9, 0, true);
+    expect(component.generate()).toBe('-PT9M');
+
+    set(component, 0, 0, 0, 0, 0, 0, 10, true);
+    expect(component.generate()).toBe('-PT10S');
+
+    set(component, 0, 9, 0, 0, 0, 10, 0, true);
+    expect(component.generate()).toBe('-P9MT10M');
+  });
+
   it('generate() should correctly set the zero value according to the configuration', () => {
     set(component, 0, 0, 0, 0, 0, 0, 0);
 
     expect(component.generate()).toBe('PT0S');
 
+    set(component, 0, 0, 0, 0, 0, 0, 0, true);
+
+    expect(component.generate()).toBe('PT0S');
+
     component.config.zeroValue = null;
     expect(component.generate()).toBe(null);
 
@@ -90,6 +126,20 @@ describe('DurationPickerComponent', () => {
     expect(component.hours).toBe(5);
     expect(component.minutes).toBe(6);
     expect(component.seconds).toBe(7);
+    expect(component.negative).toBe(false);
+
+    component.value = '-P1Y2M3W4DT5H6M7S';
+
+    component.parse();
+
+    expect(component.years).toBe(1);
+    expect(component.months).toBe(2);
+    expect(component.weeks).toBe(3);
+    expect(component.days).toBe(4);
+    expect(component.hours).toBe(5);
+    expect(component.minutes).toBe(6);
+    expect(component.seconds).toBe(7);
+    expect(component.negative).toBe(true);
   });
 
   it('parse() should do nothing if the value is null', () => {
@@ -173,6 +223,7 @@ function set(
   hours,
   minutes,
   seconds,
+  negative = false
 ) {
   component.years = years;
   component.months = months;
@@ -181,4 +232,5 @@ function set(
   component.hours = hours;
   component.minutes = minutes;
   component.seconds = seconds;
+  component.negative = negative;
 }

src/app/duration-picker/duration-picker.component.ts

@@ -46,8 +46,9 @@ export class DurationPickerComponent implements OnInit, ControlValueAccessor {
     this._disabled = disabled;
   }
 
-  regex: RegExp = /^P(?!$)(\d+Y)?(\d+M)?(\d+W)?(\d+D)?(T(?=\d+[HMS])(\d+H)?(\d+M)?(\d+S)?)?$/;
+  regex: RegExp = /^[\+\-]?P(?!$)(\d+Y)?(\d+M)?(\d+W)?(\d+D)?(T(?=\d+[HMS])(\d+H)?(\d+M)?(\d+S)?)?$/;
 
+  private _negative = false;
   private _years    = 0;
   private _months   = 0;
   private _weeks    = 0;
@@ -57,6 +58,7 @@ export class DurationPickerComponent implements OnInit, ControlValueAccessor {
   private _seconds  = 0;
 
   config: DurationPickerOptions = {
+    showNegative: false,
     showButtons : true,
     showPreview : true,
     showLetters : true,
@@ -70,6 +72,12 @@ export class DurationPickerComponent implements OnInit, ControlValueAccessor {
     zeroValue   : 'PT0S',
   };
 
+  get negative() { return this._negative; }
+  set negative(value) {
+    this._negative = value;
+    this.emitNewValue();
+  }
+
   get years() { return this._years; }
   set years(value) {
     value = this.parseNumber(value) > 0 ? value : 0;
@@ -159,6 +167,7 @@ export class DurationPickerComponent implements OnInit, ControlValueAccessor {
       return;
     }
 
+    this._negative  = match[0].startsWith('-');
     this._years    = this.parseNumber(match[1]);
     this._months   = this.parseNumber(match[2]);
     this._weeks    = this.parseNumber(match[3]);
@@ -175,6 +184,10 @@ export class DurationPickerComponent implements OnInit, ControlValueAccessor {
   generate(): string {
     let output = 'P';
 
+    if (this.config.showNegative && this.negative) {
+      output = '-' + output;
+    }
+
     if (this.config.showYears && this.years) {
       output += `${this.years}Y`;
     }
@@ -206,7 +219,7 @@ export class DurationPickerComponent implements OnInit, ControlValueAccessor {
     }
 
     // if all values are empty, just output null
-    if (output === 'P') {
+    if (output === 'P' || output === '-P') {
       output = this.config.zeroValue;
     }
 

src/app/duration-picker/duration-picker.d.ts

@@ -1,4 +1,5 @@
 export interface DurationPickerOptions {
+  showNegative: boolean;
   showButtons: boolean;
   showPreview: boolean;
   showLetters: boolean;