Tyagi-Sunny · Tyagi-Sunny · Sep 19, 2022 · Sep 19, 2022 · Nov 2, 2022 · Nov 2, 2022
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1 @@
+/scripts/*.js
diff --git a/README.md b/README.md
@@ -0,0 +1,8 @@
+Assignment 4-
+Add the following to above exercise using TS
+
+1. Add a role type as enum - 'SuperAdmin', 'Admin', 'Subscriber'. Use this enum as type for role attribute in User.
+
+2. Make the user CRUD using generic.
+
+3. Make a date time formatter decorator. Use the decorator to format date time fields.
diff --git a/css/style.css b/css/style.css
@@ -0,0 +1,23 @@
+#parent{
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    height: 500px;
+}
+
+#buttonContainer{
+    margin: 10px;
+}
+
+#tableContainer{
+    margin: 10px;
+}
+
+table{
+    border: 2px black solid;
+}
+
+th,td{
+    border: 2px grey solid;
+}
diff --git a/data.json b/data.json
@@ -0,0 +1,42 @@
+[
+  {
+    "firstName": "Sunny",
+    "middleName": "NA",
+    "lastName": "Tyagi",
+    "email": "[email protected]",
+    "phone": "6396786017",
+    "role": 1,
+    "address": "Ghaziabad",
+    "id": 1
+  },
+  {
+    "firstName": "Deepak",
+    "middleName": "NA",
+    "lastName": "Kumar",
+    "email": "[email protected]",
+    "phone": "8559010326",
+    "role": 2,
+    "address": "Mohali",
+    "id": 2
+  },
+  {
+    "firstName": "Meghna",
+    "middleName": "NA",
+    "lastName": "kashyap",
+    "email": "[email protected]",
+    "phone": "7834086997",
+    "role": 0,
+    "address": "Mohali",
+    "id": 3
+  },
+  {
+    "firstName": "Samarpan",
+    "middleName": "NA",
+    "lastName": "Bhattacharya",
+    "email": "[email protected]",
+    "phone": "9999909854",
+    "role": 1,
+    "address": "Mohali",
+    "id": 4
+  }
+]
diff --git a/index.html b/index.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link href="./css/style.css" rel="stylesheet">
+    <title>TypeScript</title>
+</head>
+<body>
+    <header></header>
+    <main>
+        <div id="parent">
+            <div id="buttonContainer">
+                <div id="button">
+                    <button onclick="obj.loadData()" id="load">load data</button>
+                    <button onclick="obj.refreshData()" style="display: none;" id="refresh">refresh data</button>
+                </div>
+            </div>
+            <div id="tableContainer">
+                <div id="table">
+                    <table id="dataTable">
+                        <thead>
+                            <tr>
+                                <th>Firstname</th>
+                                <th>Middlename</th>
+                                <th>lastname</th>
+                                <th>email</th>
+                                <th>phone</th>
+                                <th>role</th>
+                                <th>address</th>
+                                <th>action</th>
+                            </tr>
+                        </thead>
+                        <tbody></tbody>
+                    </table>
+                </div>
+            </div>
+        </div>
+    </main>
+    <footer></footer>
+    <script src="./scripts/main.js" type="text/javascript"></script>
+</body>
+</html>
diff --git a/scripts/main.ts b/scripts/main.ts
@@ -0,0 +1,188 @@
+enum UserRole {
+  SuperAdmin,
+  Admin,
+  Subscriber,
+}
+
+interface CRUD<T, R> {
+  data: T[];
+  loadData: () => void;
+  deleteRow: (rowNum: R) => void;
+  save: (rowNum: R) => void;
+  cancel: (rowNum: R) => void;
+  editRow: (rowNum: R) => void;
+  refreshData: () => void;
+}
+
+function getDate(_date: Date) {
+  return function (target: Function & typeof UserDataTable) {
+    target.date =
+      "Today's Date is " +
+      _date.getDay() +
+      "-" +
+      _date.getMonth() +
+      "-" +
+      _date.getFullYear() +
+      " and Time is " +
+      _date.getHours() +
+      ":" +
+      _date.getMinutes();
+  };
+}
+
+@getDate(new Date())
+class UserDataTable<T, R> implements CRUD<T, R> {
+  static date: string;
+  data: T[];
+  constructor() {}
+
+  set userData(_data: T[]) {
+    this.data = _data;
+  }
+
+  loadData(): void {
+    const table = document.getElementById(
+      "dataTable"
+    ) as HTMLTableElement | null;
+    let rowCount = table.rows.length;
+    for (let employeeData of this.data) {
+      let row = table.insertRow(rowCount);
+      let cellNum = 0;
+      for (let colName in employeeData) {
+        let newCell = row.insertCell(cellNum);
+        if (cellNum != 7) {
+          newCell.innerHTML = `<p class="info-row-${row.rowIndex}">${
+            colName == "role"
+              ? UserRole[employeeData["role"]]
+              : employeeData[colName]
+          }</p><br>
+              <input type="text" class=\"edit-info-row-${
+                row.rowIndex
+              }\" name=\"${colName}\" style="display:none" value=\"${
+            colName == "role"
+              ? UserRole[employeeData["role"]]
+              : employeeData[colName]
+          }\">`;
+        } else {
+          newCell.innerHTML = ` 
+                              <div id=\"normal-action-${row.rowIndex}\">
+                                  <button id=\"del-row-${employeeData[colName]}\" onclick=\"obj.deleteRow(${row.rowIndex})\">del</button>
+                                  <button id=\"edit-row-${employeeData[colName]}\" onclick=\"obj.editRow(${row.rowIndex})\">edit</button>
+                              </div>
+                              <div id=\"edit-action-${row.rowIndex}\" style=\"display:none\">
+                                  <button id=\"save-row-${employeeData[colName]}\" onclick=\"obj.save(${row.rowIndex})\">save</button>
+                                  <button id=\"cancel-row-${employeeData[colName]}\" onclick=\"obj.cancel(${row.rowIndex})\">cancel</button>
+                              </div>
+                              `;
+        }
+        cellNum++;
+      }
+      rowCount++;
+    }
+
+    document.getElementById("load").style.display = "none";
+    document.getElementById("refresh").style.display = "inline";
+  }
+
+  deleteRow(rowNum: R): void {
+    this.data = [
+      ...this.data.slice(0, Number(rowNum) - 1),
+      ...this.data.slice(Number(rowNum)),
+    ];
+    this.refreshData();
+  }
+
+  editRow(rowNum: R): void {
+    let {
+      editableRowInput,
+      staticCellData,
+      editActionButtons,
+      normalActionButtons,
+    } = this.getEditActions(rowNum);
+    this.changeBetweenInputAndPlainText(
+      editableRowInput,
+      staticCellData,
+      editActionButtons,
+      normalActionButtons
+    );
+  }
+
+  getEditActions(id: R) {
+    let editableRowInput = document.getElementsByClassName(
+      `edit-info-row-${id}`
+    );
+    let staticCellData = document.getElementsByClassName(`info-row-${id}`);
+    let editActionButtons = document.getElementById(`edit-action-${id}`);
+    let normalActionButtons = document.getElementById(`normal-action-${id}`);
+    return {
+      editableRowInput,
+      staticCellData,
+      editActionButtons,
+      normalActionButtons,
+    };
+  }
+
+  changeBetweenInputAndPlainText(
+    editableRowInput,
+    staticCellData,
+    editActionButtons,
+    normalActionButtons
+  ) {
+    Array.from(editableRowInput).forEach((input: HTMLElement) => {
+      input.style.display = "inline";
+    });
+    Array.from(staticCellData).forEach((input: HTMLElement) => {
+      input.style.display = "none";
+    });
+    editActionButtons.style.display = "inline";
+    normalActionButtons.style.display = "none";
+  }
+
+  save(rowNum: R): void {
+    let editableRowInput = document.getElementsByClassName(
+      `edit-info-row-${rowNum}`
+    ) as HTMLCollectionOf<HTMLInputElement>;
+    Array.from(editableRowInput).forEach((input) => {
+      let value = input.value;
+      input.name == "role"
+        ? (this.data[Number(rowNum) - 1][input.name] = UserRole[value])
+        : (this.data[Number(rowNum) - 1][input.name] = value);
+    });
+
+    this.refreshData();
+  }
+
+  cancel(rowNum: R): void {
+    let {
+      editableRowInput,
+      staticCellData,
+      editActionButtons,
+      normalActionButtons,
+    } = this.getEditActions(rowNum);
+    this.changeBetweenInputAndPlainText(
+      staticCellData,
+      editableRowInput,
+      normalActionButtons,
+      editActionButtons
+    );
+  }
+
+  refreshData(): void {
+    const table = document.getElementById(
+      "dataTable"
+    ) as HTMLTableElement | null;
+    while (table.rows.length !== 1) {
+      table.deleteRow(1);
+    }
+    this.loadData();
+  }
+}
+
+let obj = new UserDataTable<JSON, number>();
+fetch("../data.json")
+  .then((res) => res.json())
+  .then((data) => {
+    obj.userData = data;
+  });
+
+console.log(UserDataTable.date);
diff --git a/tsconfig.json b/tsconfig.json
@@ -0,0 +1,7 @@
+{
+  "compilerOptions": {
+    "target": "ES6",
+    "module": "CommonJS",
+    "experimentalDecorators": true
+  }
+}