From d3c39c1a9f560277b6c22f1da1ea6d4962bf86da Mon Sep 17 00:00:00 2001
From: Alexander Vakrilov <alexander.vakrilov@telerik.com>
Date: Mon, 5 Aug 2019 13:56:22 +0300
Subject: [PATCH] feat(GridLayout): Add synonym property column[Span] for
 col[Span] in GridLayout (#7641)

* add column synonym for col property grid layout

* refactoring

* refactor: implement column proxy props

* test: add tests for column and columnSpan props
---
 .../app/layouts/grid-7295-page.ts             | 45 ++++++++++++++
 .../app/layouts/grid-7295-page.xml            | 18 ++++++
 e2e/ui-tests-app/app/layouts/main-page.ts     |  1 +
 tests/app/ui/layouts/grid-layout-tests.ts     | 60 ++++++++++++++++++-
 .../ui/core/view-base/view-base.d.ts          |  8 +++
 .../ui/core/view-base/view-base.ts            |  2 +
 .../layouts/grid-layout/grid-layout-common.ts | 14 +++++
 7 files changed, 145 insertions(+), 3 deletions(-)
 create mode 100644 e2e/ui-tests-app/app/layouts/grid-7295-page.ts
 create mode 100644 e2e/ui-tests-app/app/layouts/grid-7295-page.xml

diff --git a/e2e/ui-tests-app/app/layouts/grid-7295-page.ts b/e2e/ui-tests-app/app/layouts/grid-7295-page.ts
new file mode 100644
index 000000000..992deed64
--- /dev/null
+++ b/e2e/ui-tests-app/app/layouts/grid-7295-page.ts
@@ -0,0 +1,45 @@
+import * as model from "./myview";
+import { Button } from "tns-core-modules/ui/button";
+import { Page } from "tns-core-modules/ui/page";
+import { GridLayout, ItemSpec } from "tns-core-modules/ui/layouts/grid-layout";
+
+export function onLoaded(args: { eventName: string, object: any }) {
+    var page = <Page>args.object;
+    page.bindingContext = new model.ViewModel();
+}
+
+export function onAddRowColumn(args: { eventName: string, object: any }) {
+
+    var layout = <GridLayout>args.object.parent.parent;
+    var row = new ItemSpec(1, "auto");
+    var column = new ItemSpec(1, "auto");
+
+    layout.addRow(row);
+    layout.addColumn(column);
+
+    var btn0 = new Button();
+    var btn1 = new Button();
+    btn0.id = "b0";
+    btn1.id = "b1";
+    btn0.text = "b0";
+    btn1.text = "b1";
+    layout.addChild(btn0);
+    layout.addChild(btn1);
+    GridLayout.setRow(btn0, 0);
+    GridLayout.setColumn(btn0, 4);
+    GridLayout.setRow(btn1, 4);
+    GridLayout.setColumn(btn1, 0);
+    GridLayout.setColumnSpan(btn1, 2);
+    GridLayout.setRowSpan(btn0, 3);
+}
+
+export function onRemoveRowColumn(args: { eventName: string, object: any }) {
+    var layout = <GridLayout>args.object.parent.parent;
+    var itemSpecs, count;
+    itemSpecs = layout.getRows();
+    count = itemSpecs.length;
+    layout.removeRow(itemSpecs[count - 1]);
+    itemSpecs = layout.getColumns();
+    count = itemSpecs.length;
+    layout.removeColumn(itemSpecs[count - 1]);
+}
diff --git a/e2e/ui-tests-app/app/layouts/grid-7295-page.xml b/e2e/ui-tests-app/app/layouts/grid-7295-page.xml
new file mode 100644
index 000000000..1a7ceb5db
--- /dev/null
+++ b/e2e/ui-tests-app/app/layouts/grid-7295-page.xml
@@ -0,0 +1,18 @@
+<Page loaded="onLoaded">
+  <GridLayout rows="auto, 100, *, 50" columns="auto, 60, *, 40">
+    <!-- View Properties -->
+    <Button text="wh" tap="{{ onWidthHeight }}" id="widthHeight" automationText="widthHeight" style="background-color: lightblue;" />
+    <Button text="n" tap="{{ onMinWidthMinHeight }}" column="1" id="minWidthMinHeight" automationText="minWidthMinHeight" style="background-color: lightblue;" />
+    <Button text="m" tap="{{ onMargins }}" column="2" id="margins" automationText="margins" style="background-color: lightblue;" />
+    <Button text="a" tap="{{ onAlignments }}" row="1" id="alignments" automationText="alignments" style="background-color: lightblue;" />
+    <Button text="c" tap="{{ onCollapse }}" row="1" column="1" id="collapse" automationText="collapse" style="background-color: lightblue;" />
+    <Button text="v" tap="{{ onVisibile }}" row="1" column="2" id="visible" automationText="visible" style="background-color: lightblue;" />
+    <!-- Layout Properties -->
+    <Button text="p" tap="{{ onPaddings }}" row="2" id="paddings" automationText="paddings" style="background-color: lightgray;" />
+    <Button text="all" tap="{{ onAllProperties }}" row="2" column="1" id="allProperties" automationText="allProperties" style="background-color: aquamarine;" />
+    <StackLayout row="2" column="2">
+      <Button text="1" tap="onAddRowColumn" id="addRowColumn" automationText="addRowColumn" style="background-color: lightgreen;" />
+      <Button text="0" tap="onRemoveRowColumn" id="removeRowColumn" automationText="removeRowColumn" style="background-color: lightgreen;" />
+    </StackLayout>
+  </GridLayout>
+</Page>
\ No newline at end of file
diff --git a/e2e/ui-tests-app/app/layouts/main-page.ts b/e2e/ui-tests-app/app/layouts/main-page.ts
index 6534b9bf0..cad26d65e 100644
--- a/e2e/ui-tests-app/app/layouts/main-page.ts
+++ b/e2e/ui-tests-app/app/layouts/main-page.ts
@@ -23,6 +23,7 @@ export function loadExamples() {
     examples.set("pwrap", "layouts-percent/wrap-page");
     examples.set("passThroughParent", "layouts/passThroughParent-page");
     examples.set("stacklayout-6059", "layouts/stacklayout-6059-page");
+    examples.set("grid-7295", "layouts/grid-7295-page");
     examples.set("safe-area", "layouts/safe-area-page");
 
     return examples;
diff --git a/tests/app/ui/layouts/grid-layout-tests.ts b/tests/app/ui/layouts/grid-layout-tests.ts
index a57a243a9..57a2d9538 100644
--- a/tests/app/ui/layouts/grid-layout-tests.ts
+++ b/tests/app/ui/layouts/grid-layout-tests.ts
@@ -119,6 +119,60 @@ export class GridLayoutTest extends testModule.UITest<RemovalTrackingGridLayout>
         TKUnit.assertEqual(this.colSpan(test), 1, "'columnSpan' property default value should be 1.");
     }
 
+    public test_synonym_property_setting_column_changes_col() {
+        const test = new Button();
+        
+        test.column = 3;
+
+        TKUnit.assertEqual(test.column, 3, "Setting column should work.");
+        TKUnit.assertEqual(test.col, 3, "Setting column property should affect col property.");
+    }
+
+    public test_synonym_property_setting_col_changes_column() {
+        const test = new Button();
+        
+        test.col = 3;
+
+        TKUnit.assertEqual(test.col, 3, "Setting col should work.");
+        TKUnit.assertEqual(test.column, 3, "Setting col property should affect column property.");
+    }
+
+    public test_synonym_property_setColumn_should_set_col_and_column() {
+        const test = new Button();
+        
+        GridLayout.setColumn(test, 3);
+
+        TKUnit.assertEqual(test.col, 3, "setColumn should set col");
+        TKUnit.assertEqual(test.column, 3, "setColumn should set column");
+    }
+
+    public test_synonym_property_setting_columnSpan_changes_colSpan() {
+        const test = new Button();
+        
+        test.columnSpan = 3;
+
+        TKUnit.assertEqual(test.columnSpan, 3, "Setting columnSpan should work.");
+        TKUnit.assertEqual(test.colSpan, 3, "Setting columnSpan property should affect colSpan property.");
+    }
+
+    public test_synonym_property_setting_colSpan_changes_columnSpan() {
+        const test = new Button();
+        
+        test.colSpan = 3;
+
+        TKUnit.assertEqual(test.colSpan, 3, "Setting colSpan should work.");
+        TKUnit.assertEqual(test.columnSpan, 3, "Setting colSpan property should affect columnSpan property.");
+    }
+
+    public test_synonym_property_setColumnSpan_should_set_colSpan_and_columnSpan() {
+        const test = new Button();
+        
+        GridLayout.setColumnSpan(test, 3);
+
+        TKUnit.assertEqual(test.colSpan, 3, "setColumnSpan should set colSpan");
+        TKUnit.assertEqual(test.columnSpan, 3, "setColumnSpan should set columnSpan");
+    }
+
     public test_getRow_shouldThrow_onNullValues() {
         TKUnit.assertThrows(() => {
             GridLayout.getRow(null);
@@ -250,17 +304,17 @@ export class GridLayoutTest extends testModule.UITest<RemovalTrackingGridLayout>
         TKUnit.assertEqual(
             this.row(btn),
             row,
-            "'row' property not applied For GridLayout addChildAtCell without rowspan."
+            "'row' property not applied For GridLayout addChildAtCell without rowSpan."
         );
         TKUnit.assertEqual(
             this.col(btn),
             column,
-            "'column' property not applied For GridLayout addChildAtCell without rowspan."
+            "'column' property not applied For GridLayout addChildAtCell without rowSpan."
         );
         TKUnit.assertEqual(
             this.rowSpan(btn),
             defaultSpanValue,
-            "'rowSpan' property not applied For GridLayout addChildAtCell without rowspan."
+            "'rowSpan' property not applied For GridLayout addChildAtCell without rowSpan."
         );
         TKUnit.assertEqual(
             this.colSpan(btn),
diff --git a/tns-core-modules/ui/core/view-base/view-base.d.ts b/tns-core-modules/ui/core/view-base/view-base.d.ts
index 16976b020..d0618064e 100644
--- a/tns-core-modules/ui/core/view-base/view-base.d.ts
+++ b/tns-core-modules/ui/core/view-base/view-base.d.ts
@@ -98,8 +98,16 @@ export abstract class ViewBase extends Observable {
     dock: "left" | "top" | "right" | "bottom";
     row: number;
     col: number;
+    /**
+     * Setting `column` property is the same as `col`
+     */
+    column: number;
     rowSpan: number;
     colSpan: number;
+    /**
+     * Setting `columnSpan` property is the same as `colSpan`
+     */
+    columnSpan: number;
     domNode: DOMNode;
 
     order: Order;
diff --git a/tns-core-modules/ui/core/view-base/view-base.ts b/tns-core-modules/ui/core/view-base/view-base.ts
index a282768bc..06ec4c996 100644
--- a/tns-core-modules/ui/core/view-base/view-base.ts
+++ b/tns-core-modules/ui/core/view-base/view-base.ts
@@ -210,8 +210,10 @@ export abstract class ViewBase extends Observable implements ViewBaseDefinition
     dock: "left" | "top" | "right" | "bottom";
     row: number;
     col: number;
+    column: number; // synonym for "col"
     rowSpan: number;
     colSpan: number;
+    columnSpan: number; // synonym for "columnSpan"
 
     order: Order;
     flexGrow: FlexGrow;
diff --git a/tns-core-modules/ui/layouts/grid-layout/grid-layout-common.ts b/tns-core-modules/ui/layouts/grid-layout/grid-layout-common.ts
index a585c6cb3..7e0b31645 100644
--- a/tns-core-modules/ui/layouts/grid-layout/grid-layout-common.ts
+++ b/tns-core-modules/ui/layouts/grid-layout/grid-layout-common.ts
@@ -16,6 +16,20 @@ View.prototype.col = 0;
 View.prototype.rowSpan = 1;
 View.prototype.colSpan = 1;
 
+Object.defineProperty(View.prototype, "column", {
+    get(this: View): number { return this.col; },
+    set(this: View, value: number) { this.col = value; },
+    enumerable: true,
+    configurable: true
+});
+
+Object.defineProperty(View.prototype, "columnSpan", {
+    get(this: View): number { return this.colSpan; },
+    set(this: View, value: number) { this.colSpan = value; },
+    enumerable: true,
+    configurable: true
+});
+
 function validateItemSpec(itemSpec: ItemSpec): void {
     if (!itemSpec) {
         throw new Error("Value cannot be undefined.");