From c59194b260fc33b8721f82c3d43f322a4ba72f2f Mon Sep 17 00:00:00 2001 From: Sunny Date: Mon, 19 Sep 2022 12:37:09 +0530 Subject: [PATCH 1/4] assignment 4 --- README.md | 8 +++ css/style.css | 23 ++++++ data.json | 42 +++++++++++ index.html | 44 ++++++++++++ scripts/main.js | 132 ++++++++++++++++++++++++++++++++++ scripts/main.ts | 188 ++++++++++++++++++++++++++++++++++++++++++++++++ tsconfig.json | 7 ++ 7 files changed, 444 insertions(+) create mode 100644 README.md create mode 100644 css/style.css create mode 100644 data.json create mode 100644 index.html create mode 100644 scripts/main.js create mode 100644 scripts/main.ts create mode 100644 tsconfig.json diff --git a/README.md b/README.md new file mode 100644 index 0000000..00fbdfe --- /dev/null +++ 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 new file mode 100644 index 0000000..fe48673 --- /dev/null +++ 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; +} \ No newline at end of file diff --git a/data.json b/data.json new file mode 100644 index 0000000..4e28bbd --- /dev/null +++ b/data.json @@ -0,0 +1,42 @@ +[ + { + "firstName": "Sunny", + "middleName": "NA", + "lastName": "Tyagi", + "email": "sunny.tyagi@sourcefuse.com", + "phone": "6396786017", + "role": 1, + "address": "Ghaziabad", + "id": 1 + }, + { + "firstName": "Deepak", + "middleName": "NA", + "lastName": "Kumar", + "email": "deepak.kumar@sourcefuse.com", + "phone": "8559010326", + "role": 2, + "address": "Mohali", + "id": 2 + }, + { + "firstName": "Meghna", + "middleName": "NA", + "lastName": "kashyap", + "email": "meghna.kashyap@sourcefuse.com", + "phone": "7834086997", + "role": 0, + "address": "Mohali", + "id": 3 + }, + { + "firstName": "Samarpan", + "middleName": "NA", + "lastName": "Bhattacharya", + "email": "samarpan.bhattacharya@sourcefuse.com", + "phone": "9999909854", + "role": 1, + "address": "Mohali", + "id": 4 + } +] diff --git a/index.html b/index.html new file mode 100644 index 0000000..27af1c0 --- /dev/null +++ b/index.html @@ -0,0 +1,44 @@ + + + + + + + + TypeScript + + +
+
+
+
+
+ + +
+
+
+
+ + + + + + + + + + + + + + +
FirstnameMiddlenamelastnameemailphoneroleaddressaction
+
+
+
+
+ + + + \ No newline at end of file diff --git a/scripts/main.js b/scripts/main.js new file mode 100644 index 0000000..4190910 --- /dev/null +++ b/scripts/main.js @@ -0,0 +1,132 @@ +var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) { + var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d; + if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc); + else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r; + return c > 3 && r && Object.defineProperty(target, key, r), r; +}; +var role; +(function (role) { + role[role["SuperAdmin"] = 0] = "SuperAdmin"; + role[role["Admin"] = 1] = "Admin"; + role[role["Subscriber"] = 2] = "Subscriber"; +})(role || (role = {})); +function getDate(_date) { + return function (target) { + target.date = + "Today's Date is " + + _date.getDay() + + "-" + + _date.getMonth() + + "-" + + _date.getFullYear() + + " and Time is " + + _date.getHours() + + ":" + + _date.getMinutes(); + }; +} +let userDataTable = class userDataTable { + constructor() { } + set dataSetter(_data) { + this.data = _data; + } + loadData() { + const table = document.getElementById("dataTable"); + 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 = `

${colName == "role" + ? role[employeeData["role"]] + : employeeData[colName]}


+ `; + } + else { + newCell.innerHTML = ` +
+ + +
+
+ + +
+ `; + } + cellNum++; + } + rowCount++; + } + document.getElementById("load").style.display = "none"; + document.getElementById("refresh").style.display = "inline"; + } + deleteRow(rowNum) { + this.data = [ + ...this.data.slice(0, Number(rowNum) - 1), + ...this.data.slice(Number(rowNum)), + ]; + this.refreshData(); + } + editRow(rowNum) { + let { editableRowInput, staticCellData, editActionButtons, normalActionButtons, } = this.getEditActions(rowNum); + this.changeBetweenInputAndPlainText(editableRowInput, staticCellData, editActionButtons, normalActionButtons); + } + getEditActions(id) { + 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) => { + input.style.display = "inline"; + }); + Array.from(staticCellData).forEach((input) => { + input.style.display = "none"; + }); + editActionButtons.style.display = "inline"; + normalActionButtons.style.display = "none"; + } + save(rowNum) { + let editableRowInput = document.getElementsByClassName(`edit-info-row-${rowNum}`); + Array.from(editableRowInput).forEach((input) => { + let value = input.value; + input.name == "role" + ? (this.data[Number(rowNum) - 1][input.name] = role[value]) + : (this.data[Number(rowNum) - 1][input.name] = value); + }); + this.refreshData(); + } + cancel(rowNum) { + let { editableRowInput, staticCellData, editActionButtons, normalActionButtons, } = this.getEditActions(rowNum); + this.changeBetweenInputAndPlainText(staticCellData, editableRowInput, normalActionButtons, editActionButtons); + } + refreshData() { + const table = document.getElementById("dataTable"); + while (table.rows.length !== 1) { + table.deleteRow(1); + } + this.loadData(); + } +}; +userDataTable = __decorate([ + getDate(new Date()) +], userDataTable); +let obj = new userDataTable(); +fetch("../data.json") + .then((res) => res.json()) + .then((data) => { + obj.dataSetter = data; +}); +console.log(userDataTable.date); diff --git a/scripts/main.ts b/scripts/main.ts new file mode 100644 index 0000000..6946ecf --- /dev/null +++ b/scripts/main.ts @@ -0,0 +1,188 @@ +enum role { + "SuperAdmin", + "Admin", + "Subscriber", +} + +interface CRUD { + 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 implements CRUD { + static date: string; + data: T[]; + constructor() {} + + public set dataSetter(_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 = `

${ + colName == "role" + ? role[employeeData["role"]] + : employeeData[colName] + }


+ `; + } else { + newCell.innerHTML = ` +
+ + +
+
+ + +
+ `; + } + 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; + Array.from(editableRowInput).forEach((input) => { + let value = input.value; + input.name == "role" + ? (this.data[Number(rowNum) - 1][input.name] = role[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(); +fetch("../data.json") + .then((res) => res.json()) + .then((data) => { + obj.dataSetter = data; + }); + +console.log(userDataTable.date); diff --git a/tsconfig.json b/tsconfig.json new file mode 100644 index 0000000..bfdd48a --- /dev/null +++ b/tsconfig.json @@ -0,0 +1,7 @@ +{ + "compilerOptions": { + "target": "ES6", + "module": "CommonJS", + "experimentalDecorators": true + } +} From b57e587c21389fd5cf129f9245a6f257be56705a Mon Sep 17 00:00:00 2001 From: Sunny Date: Mon, 19 Sep 2022 12:39:21 +0530 Subject: [PATCH 2/4] assignment 4 --- scripts/main.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/scripts/main.ts b/scripts/main.ts index 6946ecf..be71f1d 100644 --- a/scripts/main.ts +++ b/scripts/main.ts @@ -56,9 +56,9 @@ class userDataTable implements CRUD { ? role[employeeData["role"]] : employeeData[colName] }


- Date: Wed, 2 Nov 2022 21:35:48 +0530 Subject: [PATCH 3/4] modify enum declaration,changes the suitable naming --- .gitignore | 1 + scripts/main.ts | 26 +++++++++++++------------- 2 files changed, 14 insertions(+), 13 deletions(-) create mode 100644 .gitignore diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..ded6c63 --- /dev/null +++ b/.gitignore @@ -0,0 +1 @@ +/scripts/*.js \ No newline at end of file diff --git a/scripts/main.ts b/scripts/main.ts index be71f1d..2cf5fdb 100644 --- a/scripts/main.ts +++ b/scripts/main.ts @@ -1,7 +1,7 @@ -enum role { - "SuperAdmin", - "Admin", - "Subscriber", +enum UserRole { + SuperAdmin, + Admin, + Subscriber, } interface CRUD { @@ -15,7 +15,7 @@ interface CRUD { } function getDate(_date: Date) { - return function (target: Function & typeof userDataTable) { + return function (target: Function & typeof UserDataTable) { target.date = "Today's Date is " + _date.getDay() + @@ -31,12 +31,12 @@ function getDate(_date: Date) { } @getDate(new Date()) -class userDataTable implements CRUD { +class UserDataTable implements CRUD { static date: string; data: T[]; constructor() {} - public set dataSetter(_data: T[]) { + set userData(_data: T[]) { this.data = _data; } @@ -53,14 +53,14 @@ class userDataTable implements CRUD { if (cellNum != 7) { newCell.innerHTML = `

${ colName == "role" - ? role[employeeData["role"]] + ? UserRole[employeeData["role"]] : employeeData[colName] }


`; } else { @@ -145,7 +145,7 @@ class userDataTable implements CRUD { Array.from(editableRowInput).forEach((input) => { let value = input.value; input.name == "role" - ? (this.data[Number(rowNum) - 1][input.name] = role[value]) + ? (this.data[Number(rowNum) - 1][input.name] = UserRole[value]) : (this.data[Number(rowNum) - 1][input.name] = value); }); @@ -178,11 +178,11 @@ class userDataTable implements CRUD { } } -let obj = new userDataTable(); +let obj = new UserDataTable(); fetch("../data.json") .then((res) => res.json()) .then((data) => { - obj.dataSetter = data; + obj.userData = data; }); -console.log(userDataTable.date); +console.log(UserDataTable.date); From d572a2500437254b6b4855a7bc5a950d142abd39 Mon Sep 17 00:00:00 2001 From: Sunny Date: Wed, 2 Nov 2022 21:40:13 +0530 Subject: [PATCH 4/4] modify enum declaration,changes the suitable naming --- scripts/main.js | 132 ------------------------------------------------ 1 file changed, 132 deletions(-) delete mode 100644 scripts/main.js diff --git a/scripts/main.js b/scripts/main.js deleted file mode 100644 index 4190910..0000000 --- a/scripts/main.js +++ /dev/null @@ -1,132 +0,0 @@ -var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) { - var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d; - if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc); - else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r; - return c > 3 && r && Object.defineProperty(target, key, r), r; -}; -var role; -(function (role) { - role[role["SuperAdmin"] = 0] = "SuperAdmin"; - role[role["Admin"] = 1] = "Admin"; - role[role["Subscriber"] = 2] = "Subscriber"; -})(role || (role = {})); -function getDate(_date) { - return function (target) { - target.date = - "Today's Date is " + - _date.getDay() + - "-" + - _date.getMonth() + - "-" + - _date.getFullYear() + - " and Time is " + - _date.getHours() + - ":" + - _date.getMinutes(); - }; -} -let userDataTable = class userDataTable { - constructor() { } - set dataSetter(_data) { - this.data = _data; - } - loadData() { - const table = document.getElementById("dataTable"); - 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 = `

${colName == "role" - ? role[employeeData["role"]] - : employeeData[colName]}


- `; - } - else { - newCell.innerHTML = ` -
- - -
-
- - -
- `; - } - cellNum++; - } - rowCount++; - } - document.getElementById("load").style.display = "none"; - document.getElementById("refresh").style.display = "inline"; - } - deleteRow(rowNum) { - this.data = [ - ...this.data.slice(0, Number(rowNum) - 1), - ...this.data.slice(Number(rowNum)), - ]; - this.refreshData(); - } - editRow(rowNum) { - let { editableRowInput, staticCellData, editActionButtons, normalActionButtons, } = this.getEditActions(rowNum); - this.changeBetweenInputAndPlainText(editableRowInput, staticCellData, editActionButtons, normalActionButtons); - } - getEditActions(id) { - 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) => { - input.style.display = "inline"; - }); - Array.from(staticCellData).forEach((input) => { - input.style.display = "none"; - }); - editActionButtons.style.display = "inline"; - normalActionButtons.style.display = "none"; - } - save(rowNum) { - let editableRowInput = document.getElementsByClassName(`edit-info-row-${rowNum}`); - Array.from(editableRowInput).forEach((input) => { - let value = input.value; - input.name == "role" - ? (this.data[Number(rowNum) - 1][input.name] = role[value]) - : (this.data[Number(rowNum) - 1][input.name] = value); - }); - this.refreshData(); - } - cancel(rowNum) { - let { editableRowInput, staticCellData, editActionButtons, normalActionButtons, } = this.getEditActions(rowNum); - this.changeBetweenInputAndPlainText(staticCellData, editableRowInput, normalActionButtons, editActionButtons); - } - refreshData() { - const table = document.getElementById("dataTable"); - while (table.rows.length !== 1) { - table.deleteRow(1); - } - this.loadData(); - } -}; -userDataTable = __decorate([ - getDate(new Date()) -], userDataTable); -let obj = new userDataTable(); -fetch("../data.json") - .then((res) => res.json()) - .then((data) => { - obj.dataSetter = data; -}); -console.log(userDataTable.date);