From 768e384190512e3c529a7799ec8f0500e3c0346c Mon Sep 17 00:00:00 2001 From: Rashi Date: Fri, 14 Feb 2020 19:21:13 +0530 Subject: [PATCH 1/4] done --- BasicOperations.js | 70 ++++++++++++++++++++++++++ BasicOperations.ts | 104 +++++++++++++++++++++++++++++++++++++++ BusinessLogic.js | 6 +++ BusinessLogic.ts | 11 +++++ ButtonOperations.js | 34 +++++++++++++ ButtonOperations.ts | 50 +++++++++++++++++++ EmployeeModel.js | 10 ++++ EmployeeModel.ts | 12 +++++ TableCreate.js | 84 ++++++++++++++++++++++++++++++++ TableCreate.ts | 116 ++++++++++++++++++++++++++++++++++++++++++++ data.json | 39 +++++++++++++++ first.js | 2 + index.htm | 20 ++++++++ interfaces.js | 0 interfaces.ts | 30 ++++++++++++ main.js | 21 ++++++++ main.ts | 35 +++++++++++++ newEntry.js | 23 +++++++++ newEntry.ts | 36 ++++++++++++++ package.json | 13 +++++ tsconfig.json | 66 +++++++++++++++++++++++++ 21 files changed, 782 insertions(+) create mode 100644 BasicOperations.js create mode 100644 BasicOperations.ts create mode 100644 BusinessLogic.js create mode 100644 BusinessLogic.ts create mode 100644 ButtonOperations.js create mode 100644 ButtonOperations.ts create mode 100644 EmployeeModel.js create mode 100644 EmployeeModel.ts create mode 100644 TableCreate.js create mode 100644 TableCreate.ts create mode 100644 data.json create mode 100644 first.js create mode 100644 index.htm create mode 100644 interfaces.js create mode 100644 interfaces.ts create mode 100644 main.js create mode 100644 main.ts create mode 100644 newEntry.js create mode 100644 newEntry.ts create mode 100644 package.json create mode 100644 tsconfig.json diff --git a/BasicOperations.js b/BasicOperations.js new file mode 100644 index 0000000..3a323ec --- /dev/null +++ b/BasicOperations.js @@ -0,0 +1,70 @@ +import { TableCreation } from "./TableCreate.js"; +import { Presentation } from "./ButtonOperations.js"; +export class Operations { + constructor() { + this.buttonObject = new Presentation(); + this.deleteRow = (x) => document.getElementById(x).remove(); + } + //Makes the entire row updatable + editRow(x) { + if (Operations.flag !== "off") + this.cancelRow(Operations.flag); + Operations.flag = x; + let rowId = document.getElementById(x); + let newinput, element; + for (let j = 0; j < Operations.count; j++) { + element = rowId.childNodes[j]; + Operations.buffer[j] = element.textContent; + element.textContent = ""; + element.appendChild(newinput = document.createElement('input')); + if (Operations.buffer[j] == "") + newinput.placeholder = TableCreation.headings[j]; + else + newinput.placeholder = Operations.buffer[j].toString(); + } + let saveB, cancelB; + let lastColumn = rowId.getElementsByTagName('td')[Operations.count]; + //FIRST CHILD IS THE EDIT BUTTON + saveB = lastColumn.getElementsByTagName('input')[0]; + // LAST CHILD IS THE DELETE BUTTON + cancelB = lastColumn.getElementsByTagName('input')[1]; + saveB.value = "SAVE"; + saveB.onclick = () => { this.saveRow(x); }; + cancelB.value = "CANCEL"; + cancelB.onclick = () => { this.cancelRow(x); }; + } + saveRow(x) { + Operations.flag = "off"; + let val = 0; + let row = document.getElementById(x); + let cell = row.getElementsByTagName('td'); + let cellInput; + for (let i = 0; i < Operations.count; i++) { + cellInput = cell[i].querySelector('input').value; + if (cellInput == "") + val += 1; + cell[i].innerHTML = cellInput; + } + if (val == Operations.count) + this.cancelRow(x); + else + this.buttonObject.fetchButton(x, this); + } + cancelRow(x) { + Operations.flag = "off"; + let val = 0; + let cell = document.getElementById(x).getElementsByTagName('td'); + for (let i = 0; i < Operations.count; i++) { + cell[i].innerHTML = Operations.buffer[i].toString(); + if (cell[i].innerHTML == "") + val += 1; + } + this.buttonObject.fetchButton(x, this); + if (val == Operations.count) { + alert('Empty row would be deleted'); + this.deleteRow(x); + } + } +} +Operations.buffer = []; +Operations.flag = "off"; diff --git a/BasicOperations.ts b/BasicOperations.ts new file mode 100644 index 0000000..074e40e --- /dev/null +++ b/BasicOperations.ts @@ -0,0 +1,104 @@ +import { CRUD } from "./interfaces.js" +import { TableCreation } from "./TableCreate.js" +import { Presentation } from "./ButtonOperations.js" + + +export class Operations implements CRUD +{ + static count: number; + static buffer: (string | number)[] = []; + static flag: string = "off"; + + buttonObject: Presentation = new Presentation(); + + + //Makes the entire row updatable + editRow(x: string) + { + if (Operations.flag !== "off") + this.cancelRow(Operations.flag); + Operations.flag = x; + + let rowId = document.getElementById(x)!; + let newinput: HTMLInputElement, element: ChildNode; + + for (let j = 0; j < Operations.count; j++) + { + element = rowId.childNodes[j]; + Operations.buffer[j] = element.textContent!; + element.textContent = ""; + element.appendChild(newinput = document.createElement('input')); + if (Operations.buffer[j] == "") + newinput.placeholder = TableCreation.headings[j]; + else + newinput.placeholder = Operations.buffer[j].toString(); + } + + let saveB: HTMLInputElement, cancelB: HTMLInputElement; + let lastColumn = rowId.getElementsByTagName('td')[Operations.count]; + + //FIRST CHILD IS THE EDIT BUTTON + saveB = lastColumn.getElementsByTagName('input')[0]; + // LAST CHILD IS THE DELETE BUTTON + cancelB = lastColumn.getElementsByTagName('input')[1]; + + saveB.value = "SAVE"; + saveB.onclick = () => { this.saveRow(x) }; + + cancelB.value = "CANCEL"; + cancelB.onclick = () => { this.cancelRow(x) }; + + } + + + deleteRow = (x: string) => document.getElementById(x)!.remove(); + + + saveRow(x: string) + { + Operations.flag = "off"; + let val = 0; + let row = document.getElementById(x)!; + let cell = row.getElementsByTagName('td'); + let cellInput: string; + + for (let i = 0; i < Operations.count; i++) + { + cellInput = cell[i].querySelector('input')!.value; + if (cellInput == "") val += 1; + cell[i].innerHTML = cellInput; + } + + if (val == Operations.count) + this.cancelRow(x); + else + this.buttonObject.fetchButton(x, this); + + } + + + cancelRow(x: string) + { + Operations.flag = "off"; + let val = 0; + let cell = document.getElementById(x)!.getElementsByTagName('td')!; + + for (let i = 0; i < Operations.count; i++) + { + cell[i].innerHTML = Operations.buffer[i].toString(); + if (cell[i].innerHTML == "") val += 1; + } + + this.buttonObject.fetchButton(x, this); + + if (val == Operations.count) + { + alert('Empty row would be deleted'); + this.deleteRow(x); + } + + } + +} + + diff --git a/BusinessLogic.js b/BusinessLogic.js new file mode 100644 index 0000000..5282287 --- /dev/null +++ b/BusinessLogic.js @@ -0,0 +1,6 @@ +export class FetchLogic { + fetchFunction() { + return fetch("data.json") + .then(response => response.json()); + } +} diff --git a/BusinessLogic.ts b/BusinessLogic.ts new file mode 100644 index 0000000..d0266d2 --- /dev/null +++ b/BusinessLogic.ts @@ -0,0 +1,11 @@ +import { Employee } from "./EmployeeModel.js" +import { FetchData } from "./interfaces.js" + +export class FetchLogic implements FetchData +{ + fetchFunction(): Promise + { + return fetch("data.json") + .then(response => response.json()) + } +} \ No newline at end of file diff --git a/ButtonOperations.js b/ButtonOperations.js new file mode 100644 index 0000000..103b581 --- /dev/null +++ b/ButtonOperations.js @@ -0,0 +1,34 @@ +import { Operations } from "./BasicOperations.js"; +export class Presentation { + //Creates Button for each row + createButton(row, x, op) { + let cell, editB, deleteB; + cell = document.createElement('td'); + row.appendChild(cell); + editB = document.createElement('input'); + editB.type = "Button"; + editB.value = "EDIT"; + editB.className = "btn btn-success"; + editB.onclick = () => { op.editRow(x); }; + cell.appendChild(editB); + let text = document.createElement('span'); + text.innerHTML = ' '; + cell.appendChild(text); + deleteB = document.createElement('input'); + deleteB.type = "Button"; + deleteB.value = "DELETE"; + deleteB.className = "btn btn-danger"; + deleteB.onclick = () => { op.deleteRow(x); }; + cell.appendChild(deleteB); + } + //Fetches buttons back after save and cancel operations are executed + fetchButton(x, op) { + let tuple = document.getElementById(x); + let editB = tuple.getElementsByTagName('td')[Operations.count].getElementsByTagName('input')[0]; + editB.value = "EDIT"; + editB.onclick = () => { op.editRow(x); }; + let deleteB = tuple.getElementsByTagName('td')[Operations.count].getElementsByTagName('input')[1]; + deleteB.value = "DELETE"; + deleteB.onclick = () => { op.deleteRow(x); }; + } +} diff --git a/ButtonOperations.ts b/ButtonOperations.ts new file mode 100644 index 0000000..420bca7 --- /dev/null +++ b/ButtonOperations.ts @@ -0,0 +1,50 @@ +import { ButtonPresentation} from "./interfaces.js" +import { Operations } from "./BasicOperations.js" + +export class Presentation implements ButtonPresentation +{ + //Creates Button for each row + createButton(row: HTMLTableRowElement, x: string, op : Operations) + { + + let cell: HTMLTableDataCellElement, editB: HTMLInputElement, deleteB: HTMLInputElement; + cell = document.createElement('td'); + row.appendChild(cell); + + editB = document.createElement('input'); + editB.type = "Button"; + editB.value = "EDIT"; + editB.className = "btn btn-success"; + editB.onclick = () => { op.editRow(x) }; + cell.appendChild(editB); + + let text = document.createElement('span') + text.innerHTML = ' ' + cell.appendChild(text); + + deleteB = document.createElement('input'); + deleteB.type = "Button"; + deleteB.value = "DELETE"; + deleteB.className = "btn btn-danger"; + deleteB.onclick = () => { op.deleteRow(x) }; + cell.appendChild(deleteB); + + } + + //Fetches buttons back after save and cancel operations are executed + fetchButton(x: string, op: Operations) + { + + let tuple = document.getElementById(x)!; + + let editB = tuple.getElementsByTagName('td')[Operations.count].getElementsByTagName('input')[0]; + editB.value = "EDIT"; + editB.onclick = () => { op.editRow(x) }; + + let deleteB = tuple.getElementsByTagName('td')[Operations.count].getElementsByTagName('input')[1]; + deleteB.value = "DELETE"; + deleteB.onclick = () => { op.deleteRow(x) }; + } + + +} \ No newline at end of file diff --git a/EmployeeModel.js b/EmployeeModel.js new file mode 100644 index 0000000..0a5d141 --- /dev/null +++ b/EmployeeModel.js @@ -0,0 +1,10 @@ +export var Role; +(function (Role) { + Role[Role["Trainee"] = 0] = "Trainee"; + Role[Role["QA"] = 1] = "QA"; + Role[Role["Devops"] = 2] = "Devops"; + Role[Role["Developer"] = 3] = "Developer"; +})(Role || (Role = {})); +; +export class Employee { +} diff --git a/EmployeeModel.ts b/EmployeeModel.ts new file mode 100644 index 0000000..98062e9 --- /dev/null +++ b/EmployeeModel.ts @@ -0,0 +1,12 @@ +export enum Role { Trainee, QA, Devops, Developer }; + +export class Employee { + firstName: string; + middleName: string; + lastName: string; + email: string; + phone: number; + role: Role; + address: string; + +} \ No newline at end of file diff --git a/TableCreate.js b/TableCreate.js new file mode 100644 index 0000000..13687e8 --- /dev/null +++ b/TableCreate.js @@ -0,0 +1,84 @@ +import { Role } from "./EmployeeModel.js"; +import { Presentation } from "./ButtonOperations.js"; +import { Operations } from "./BasicOperations.js"; +export class TableCreation { + constructor() { + this.buttonObject = new Presentation(); + this.operationObject = new Operations(); + } + //called when data is fetched + create(employee) { + let loadB = document.getElementById('LoadButton'); + if (loadB.value !== "Load Data") { + loadB.value = "Refresh"; + Operations.flag = "off"; + TableCreation.newid = -1; + } + else { + loadB.value = "Refresh"; + document.getElementById('NewButton').style.display = "block"; + let table = document.getElementsByTagName('table')[0]; + let tableHeader = document.createElement('thead'); + let tableBody = document.createElement('tbody'); + table.appendChild(tableHeader); + table.appendChild(tableBody); + TableCreation.headings = Object.keys(employee[0]); + Operations.count = TableCreation.headings.length; + } + this.displayTable(employee); + } + //Displays table content + displayTable(employee) { + let table = document.getElementsByTagName('table')[0]; + let tableBody = document.getElementsByTagName('tbody')[0]; + let tableHeader = document.getElementsByTagName('thead')[0]; + tableBody.innerHTML = ""; + tableHeader.innerHTML = ""; + let cell, row, head; + row = document.createElement('tr'); + tableHeader.appendChild(row); + row.className = "success"; + for (let k of TableCreation.headings) { + head = document.createElement('th'); + row.appendChild(head); + head.innerHTML = k; + } + head = document.createElement('th'); + row.appendChild(head); + head.innerHTML = "Operations"; + let n = employee.length; + for (let i = 0; i < n; i++) { + tableBody.appendChild(row = document.createElement('tr')); + row.setAttribute("id", i.toString()); + this.addEmployee(row, employee[i]); + this.buttonObject.createButton(row, i.toString(), this.operationObject); + } + TableCreation.newid = n; + } + //Adds Employees one by one + addEmployee(row, employee) { + let cell = document.createElement('td'); + cell.innerHTML = employee.firstName; + row.appendChild(cell); + cell = document.createElement('td'); + cell.innerHTML = employee.middleName; + row.appendChild(cell); + cell = document.createElement('td'); + cell.innerHTML = employee.lastName; + row.appendChild(cell); + cell = document.createElement('td'); + cell.innerHTML = employee.email; + row.appendChild(cell); + cell = document.createElement('td'); + cell.innerHTML = employee.phone.toString(); + row.appendChild(cell); + cell = document.createElement('td'); + cell.innerHTML = Role[employee.role]; + row.appendChild(cell); + cell = document.createElement('td'); + cell.innerHTML = employee.address; + row.appendChild(cell); + } +} +TableCreation.headings = []; +TableCreation.newid = -1; diff --git a/TableCreate.ts b/TableCreate.ts new file mode 100644 index 0000000..3901416 --- /dev/null +++ b/TableCreate.ts @@ -0,0 +1,116 @@ + +import { Employee, Role} from "./EmployeeModel.js" +import { Creation } from "./interfaces.js" +import { Presentation} from "./ButtonOperations.js" +import { Operations } from "./BasicOperations.js"; + + +export class TableCreation implements Creation +{ + static headings: string[] = []; + static newid: number = -1; + + buttonObject : Presentation; + operationObject : Operations; + + constructor() + { + this.buttonObject = new Presentation(); + this.operationObject = new Operations(); + } + + + //called when data is fetched + create(employee: Employee[]) + { + let loadB = document.getElementById('LoadButton')! as HTMLInputElement; + + if (loadB.value !== "Load Data") { + loadB.value = "Refresh"; + Operations.flag = "off"; + TableCreation.newid = -1; + } + else + { + + loadB.value = "Refresh"; + document.getElementById('NewButton')!.style.display = "block"; + let table = document.getElementsByTagName('table')[0]; + let tableHeader = document.createElement('thead'); + let tableBody = document.createElement('tbody') + table.appendChild(tableHeader); + table.appendChild(tableBody); + TableCreation.headings = Object.keys(employee[0]); + Operations.count = TableCreation.headings.length; + } + + this.displayTable(employee); + } + + //Displays table content + displayTable(employee: Employee[]) + { + + let table = document.getElementsByTagName('table')[0]; + let tableBody = document.getElementsByTagName('tbody')[0]; + let tableHeader = document.getElementsByTagName('thead')[0]; + tableBody.innerHTML = ""; + tableHeader.innerHTML = ""; + let cell: HTMLTableDataCellElement, row: HTMLTableRowElement, head: HTMLTableHeaderCellElement; + row = document.createElement('tr'); + tableHeader.appendChild(row); + row.className = "success"; + + for (let k of TableCreation.headings) + { + head = document.createElement('th'); + row.appendChild(head); + head.innerHTML = k; + } + + head = document.createElement('th') + row.appendChild(head); + head.innerHTML = "Operations"; + + let n = employee.length; + + for (let i = 0; i < n; i++) + { + tableBody.appendChild(row = document.createElement('tr')); + row.setAttribute("id", i.toString()); + this.addEmployee(row, employee[i]); + this.buttonObject.createButton(row, i.toString(),this.operationObject); + } + + TableCreation.newid = n; + + } + + + //Adds Employees one by one + addEmployee(row: HTMLTableRowElement, employee: Employee) + { + let cell = document.createElement('td'); + cell.innerHTML = employee.firstName; + row.appendChild(cell); + cell = document.createElement('td'); + cell.innerHTML = employee.middleName; + row.appendChild(cell); + cell = document.createElement('td'); + cell.innerHTML = employee.lastName; + row.appendChild(cell); + cell = document.createElement('td'); + cell.innerHTML = employee.email; + row.appendChild(cell); + cell = document.createElement('td'); + cell.innerHTML = employee.phone.toString(); + row.appendChild(cell); + cell = document.createElement('td'); + cell.innerHTML =Role[ employee.role]; + row.appendChild(cell); + cell = document.createElement('td'); + cell.innerHTML = employee.address; + row.appendChild(cell); + } + +} \ No newline at end of file diff --git a/data.json b/data.json new file mode 100644 index 0000000..8f1106e --- /dev/null +++ b/data.json @@ -0,0 +1,39 @@ +[ + { + "firstName": "Rashi", + "middleName": "nil", + "lastName": "Sharma", + "email": "rashi.sharma@sourcefuse.com", + "phone": 0, + "role": 0, + "address": "#123 Sector-13 Chandigarh" + }, + { + "firstName": "Rashi", + "middleName": "nil", + "lastName": "Sharma", + "email": "rashi.sharma@sourcefuse.com", + "phone": 0, + "role": 1, + "address": "#123 Sector-13 Chandigarh" + }, + { + "firstName": "Rashi", + "middleName": "nil", + "lastName": "Sharma", + "email": "rashi.sharma@sourcefuse.com", + "phone": 0, + "role": 2, + "address": "#123 Sector-13 Chandigarh" + }, + { + "firstName": "Rashi", + "middleName": "nil", + "lastName": "Sharma", + "email": "rashi.sharma@sourcefuse.com", + "phone": 0, + "role":2, + "address": "#123 Sector-13 Chandigarh" + } + +] \ No newline at end of file diff --git a/first.js b/first.js new file mode 100644 index 0000000..8d9d95c --- /dev/null +++ b/first.js @@ -0,0 +1,2 @@ +import { Implementation } from "./main.js"; +let obj = new Implementation(); diff --git a/index.htm b/index.htm new file mode 100644 index 0000000..fcdf6c3 --- /dev/null +++ b/index.htm @@ -0,0 +1,20 @@ + + + + + + + + + + + + + + +
+ + + + + diff --git a/interfaces.js b/interfaces.js new file mode 100644 index 0000000..e69de29 diff --git a/interfaces.ts b/interfaces.ts new file mode 100644 index 0000000..4d6d21b --- /dev/null +++ b/interfaces.ts @@ -0,0 +1,30 @@ +import { Operations } from "./BasicOperations"; +import {Employee} from "./EmployeeModel"; + +export interface FetchData +{ + fetchFunction(): Promise; +} + +export interface Creation +{ + create(obj: T[]): void; + displayTable(obj: T[]): void; + addEmployee(row: HTMLTableRowElement,obj: T): void; +} + +export interface CRUD +{ + editRow(rowId: T): void; + deleteRow(rowId: T): void; + saveRow(rowId: T): void; + cancelRow(rowId: T): void; +} + + +export interface ButtonPresentation +{ + createButton(row: HTMLTableRowElement,rowId: T, obj: Operations): void; + fetchButton(rowId: T, obj: Operations): void; +} + diff --git a/main.js b/main.js new file mode 100644 index 0000000..fd64b4a --- /dev/null +++ b/main.js @@ -0,0 +1,21 @@ +import { TableCreation } from "./TableCreate.js"; +import { FetchLogic } from "./BusinessLogic.js"; +import { NewEntry } from "./newEntry.js"; +//Implementation class is the main class which exeutes both Business and Presentation Logic +class Implementation { + constructor() { + this.fetchObject = new FetchLogic(); + this.createObject = new TableCreation(); + this.newEntryObject = new NewEntry(); + let loadButton = document.getElementById("LoadButton"); + loadButton.addEventListener("click", () => { this.loadData(); }); + } + loadData() { + this.fetchObject.fetchFunction() + .then((data) => { + this.createObject.create(data); + }) + .catch(() => console.log("data not found")); + } +} +let obj = new Implementation(); diff --git a/main.ts b/main.ts new file mode 100644 index 0000000..7acb499 --- /dev/null +++ b/main.ts @@ -0,0 +1,35 @@ +import { TableCreation } from "./TableCreate.js"; +import { FetchLogic } from "./BusinessLogic.js"; +import { NewEntry } from "./newEntry.js"; + + +//Implementation class is the main class which exeutes both Business and Presentation Logic +class Implementation { + + fetchObject: FetchLogic; + createObject: TableCreation; + newEntryObject: NewEntry; + + constructor() + { + this.fetchObject = new FetchLogic(); + this.createObject = new TableCreation(); + this.newEntryObject = new NewEntry(); + + let loadButton = document.getElementById("LoadButton") as HTMLInputElement; + loadButton.addEventListener("click", () => { this.loadData() }); + } + + loadData() + { + this.fetchObject.fetchFunction() + .then((data) => { + this.createObject.create(data); + }) + .catch(() => console.log("data not found")); + } + +} + +let obj = new Implementation(); + diff --git a/newEntry.js b/newEntry.js new file mode 100644 index 0000000..bf8f235 --- /dev/null +++ b/newEntry.js @@ -0,0 +1,23 @@ +import { TableCreation } from "./TableCreate.js"; +import { Presentation } from "./ButtonOperations.js"; +import { Operations } from "./BasicOperations.js"; +export class NewEntry { + constructor() { + this.buttonObject = new Presentation; + this.operationObject = new Operations; + let newButton = document.getElementById("NewButton"); + newButton.addEventListener("click", () => { this.newData(); }); + } + newData() { + let row, cell; + let rowId = TableCreation.newid.toString(); + let tableBody = document.querySelector('tbody'); + tableBody.appendChild(row = document.createElement('tr')); + row.setAttribute("id", rowId); + for (let k of TableCreation.headings) + row.appendChild(cell = document.createElement('td')); + this.buttonObject.createButton(row, rowId, this.operationObject); + this.operationObject.editRow(rowId); + TableCreation.newid += 1; + } +} diff --git a/newEntry.ts b/newEntry.ts new file mode 100644 index 0000000..fc5a84f --- /dev/null +++ b/newEntry.ts @@ -0,0 +1,36 @@ +import { TableCreation } from "./TableCreate.js"; +import { ButtonPresentation } from "./interfaces.js"; +import { Presentation } from "./ButtonOperations.js"; +import { Operations } from "./BasicOperations.js"; + +export class NewEntry +{ + buttonObject: Presentation; + operationObject: Operations; + + constructor() + { + this.buttonObject = new Presentation; + this.operationObject = new Operations; + let newButton = document.getElementById("NewButton") as HTMLInputElement; + newButton.addEventListener("click",() => {this.newData()}); + + } + + newData() + { + let row : HTMLTableRowElement, cell: HTMLTableDataCellElement; + let rowId = TableCreation.newid.toString(); + let tableBody = document.querySelector('tbody')!; + tableBody.appendChild(row = document.createElement('tr')); + row.setAttribute("id", rowId); + + for (let k of TableCreation.headings) + row.appendChild(cell = document.createElement('td')); + + this.buttonObject.createButton(row, rowId,this.operationObject); + this.operationObject.editRow(rowId); + + TableCreation.newid+= 1; + } +} \ No newline at end of file diff --git a/package.json b/package.json new file mode 100644 index 0000000..71fd388 --- /dev/null +++ b/package.json @@ -0,0 +1,13 @@ +{ + "name": "assignment", + "version": "1.0.0", + "description": "", + "main": "main.js", + "dependencies": {}, + "devDependencies": {}, + "scripts": { + "test": "echo \"Error: no test specified\" && exit 1" + }, + "author": "", + "license": "ISC" +} diff --git a/tsconfig.json b/tsconfig.json new file mode 100644 index 0000000..2dd02c4 --- /dev/null +++ b/tsconfig.json @@ -0,0 +1,66 @@ +{ + "compilerOptions": { + /* Basic Options */ + // "incremental": true, /* Enable incremental compilation */ + "target": "es6", /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019' or 'ESNEXT'. */ + "module": "es2015", /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext'. */ + // "lib": [], /* Specify library files to be included in the compilation. */ + // "allowJs": true, /* Allow javascript files to be compiled. */ + // "checkJs": true, /* Report errors in .js files. */ + // "jsx": "preserve", /* Specify JSX code generation: 'preserve', 'react-native', or 'react'. */ + // "declaration": true, /* Generates corresponding '.d.ts' file. */ + // "declarationMap": true, /* Generates a sourcemap for each corresponding '.d.ts' file. */ + // "sourceMap": true, /* Generates corresponding '.map' file. */ + // "outFile": "./", /* Concatenate and emit output to single file. */ + // "outDir": "./", /* Redirect output structure to the directory. */ + "rootDir": "./", /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */ + // "composite": true, /* Enable project compilation */ + // "tsBuildInfoFile": "./", /* Specify file to store incremental compilation information */ + // "removeComments": true, /* Do not emit comments to output. */ + // "noEmit": true, /* Do not emit outputs. */ + // "importHelpers": true, /* Import emit helpers from 'tslib'. */ + // "downlevelIteration": true, /* Provide full support for iterables in 'for-of', spread, and destructuring when targeting 'ES5' or 'ES3'. */ + // "isolatedModules": true, /* Transpile each file as a separate module (similar to 'ts.transpileModule'). */ + + /* Strict Type-Checking Options */ + "strict": true, /* Enable all strict type-checking options. */ + // "noImplicitAny": true, /* Raise error on expressions and declarations with an implied 'any' type. */ + // "strictNullChecks": true, /* Enable strict null checks. */ + // "strictFunctionTypes": true, /* Enable strict checking of function types. */ + // "strictBindCallApply": true, /* Enable strict 'bind', 'call', and 'apply' methods on functions. */ + "strictPropertyInitialization": false, /* Enable strict checking of property initialization in classes. */ + // "noImplicitThis": true, /* Raise error on 'this' expressions with an implied 'any' type. */ + // "alwaysStrict": true, /* Parse in strict mode and emit "use strict" for each source file. */ + + /* Additional Checks */ + // "noUnusedLocals": true, /* Report errors on unused locals. */ + // "noUnusedParameters": true, /* Report errors on unused parameters. */ + // "noImplicitReturns": true, /* Report error when not all code paths in function return a value. */ + // "noFallthroughCasesInSwitch": true, /* Report errors for fallthrough cases in switch statement. */ + + /* Module Resolution Options */ + // "moduleResolution": "node", /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */ + // "baseUrl": "./", /* Base directory to resolve non-absolute module names. */ + // "paths": {}, /* A series of entries which re-map imports to lookup locations relative to the 'baseUrl'. */ + // "rootDirs": [], /* List of root folders whose combined content represents the structure of the project at runtime. */ + // "typeRoots": [], /* List of folders to include type definitions from. */ + // "types": [], /* Type declaration files to be included in compilation. */ + // "allowSyntheticDefaultImports": true, /* Allow default imports from modules with no default export. This does not affect code emit, just typechecking. */ + "esModuleInterop": true, /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */ + // "preserveSymlinks": true, /* Do not resolve the real path of symlinks. */ + // "allowUmdGlobalAccess": true, /* Allow accessing UMD globals from modules. */ + + /* Source Map Options */ + // "sourceRoot": "", /* Specify the location where debugger should locate TypeScript files instead of source locations. */ + // "mapRoot": "", /* Specify the location where debugger should locate map files instead of generated locations. */ + // "inlineSourceMap": true, /* Emit a single file with source maps instead of having a separate file. */ + // "inlineSources": true, /* Emit the source alongside the sourcemaps within a single file; requires '--inlineSourceMap' or '--sourceMap' to be set. */ + + /* Experimental Options */ + // "experimentalDecorators": true, /* Enables experimental support for ES7 decorators. */ + // "emitDecoratorMetadata": true, /* Enables experimental support for emitting type metadata for decorators. */ + + /* Advanced Options */ + "forceConsistentCasingInFileNames": true /* Disallow inconsistently-cased references to the same file. */ + } +} From c732ab924fa3effedad10b7fa3f082dbe1b17b6f Mon Sep 17 00:00:00 2001 From: Rashi Date: Tue, 18 Feb 2020 13:28:46 +0530 Subject: [PATCH 2/4] With validation and multiple Delete --- BasicOperations.js | 76 ++++++++++++++++++++++++----- BasicOperations.ts | 115 ++++++++++++++++++++++++++++++++++++-------- ButtonOperations.js | 6 +++ ButtonOperations.ts | 7 +++ EmployeeModel.ts | 3 +- TableCreate.js | 9 +++- TableCreate.ts | 19 ++++++-- data.json | 8 +-- first.js | 3 +- index.htm | 6 +++ interfaces.ts | 5 ++ main.ts | 4 +- newEntry.js | 6 +-- newEntry.ts | 10 ++-- 14 files changed, 224 insertions(+), 53 deletions(-) diff --git a/BasicOperations.js b/BasicOperations.js index 3a323ec..ad0afb3 100644 --- a/BasicOperations.js +++ b/BasicOperations.js @@ -1,5 +1,6 @@ import { TableCreation } from "./TableCreate.js"; import { Presentation } from "./ButtonOperations.js"; +//import { Employee } from "./EmployeeModel.js"; export class Operations { constructor() { this.buttonObject = new Presentation(); @@ -12,16 +13,23 @@ export class Operations { Operations.flag = x; let rowId = document.getElementById(x); let newinput, element; + let errorLine; for (let j = 0; j < Operations.count; j++) { element = rowId.childNodes[j]; Operations.buffer[j] = element.textContent; element.textContent = ""; element.appendChild(newinput = document.createElement('input')); + element.appendChild(errorLine = document.createElement('p')); + errorLine.id = "e" + x + j; if (Operations.buffer[j] == "") newinput.placeholder = TableCreation.headings[j]; else - newinput.placeholder = Operations.buffer[j].toString(); + newinput.value = Operations.buffer[j].toString(); } + let selectElement = document.getElementById(x).getElementsByTagName('td')[5]; + selectElement.innerHTML = " "; + selectElement.appendChild(errorLine = document.createElement('p')); + errorLine.id = "e" + x + '5'; let saveB, cancelB; let lastColumn = rowId.getElementsByTagName('td')[Operations.count]; //FIRST CHILD IS THE EDIT BUTTON @@ -34,21 +42,24 @@ export class Operations { cancelB.onclick = () => { this.cancelRow(x); }; } saveRow(x) { - Operations.flag = "off"; - let val = 0; let row = document.getElementById(x); let cell = row.getElementsByTagName('td'); - let cellInput; + let cellInput = []; for (let i = 0; i < Operations.count; i++) { - cellInput = cell[i].querySelector('input').value; - if (cellInput == "") - val += 1; - cell[i].innerHTML = cellInput; + document.getElementById('e' + x + i).innerHTML = " "; + if (i === 5) { + cellInput[i] = cell[i].querySelector('select').value; + continue; + } + cellInput[i] = cell[i].querySelector('input').value; } - if (val == Operations.count) - this.cancelRow(x); - else + let answer = this.validateFields(cellInput, x); + if (answer === true) { + Operations.flag = "off"; + for (let i = 0; i < Operations.count; i++) + cell[i].innerHTML = cellInput[i]; this.buttonObject.fetchButton(x, this); + } } cancelRow(x) { Operations.flag = "off"; @@ -61,10 +72,51 @@ export class Operations { } this.buttonObject.fetchButton(x, this); if (val == Operations.count) { - alert('Empty row would be deleted'); this.deleteRow(x); } } + validateFields(employee, x) { + if (!employee[0].match(/^[a-zA-Z]+$/)) { + document.getElementById('e' + x + '0').innerHTML = 'Only alphabets are allowed'; + return false; + } + if (!employee[1].match(/^[a-zA-Z]+$/)) { + document.getElementById('e' + x + '1').innerHTML = 'Only alphabets are allowed'; + return false; + } + if (!employee[2].match(/^[a-zA-Z]+$/)) { + document.getElementById('e' + x + '2').innerHTML = 'Only alphabets are allowed'; + return false; + } + if (!employee[3].match(/^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/)) { + document.getElementById('e' + x + '3').innerHTML = 'Enter valid email'; + return false; + } + if (!employee[4].match(/[+]?[0-9]{10,13}$/)) { + document.getElementById('e' + x + '4').innerHTML = 'Only digits are allowed'; + return false; + } + if (employee[6] === "") { + document.getElementById('e' + x + '6').innerHTML = 'Invalid Address'; + return false; + } + return true; + } + multipleDelete() { + var _a; + Operations.flag = "off"; + const box = document.getElementsByName('check'); + const n = box.length; + let arr = []; + for (let i = 0; i < n; i++) { + if (box[i] && box[i].checked) { + let str = (_a = box[i].parentNode) === null || _a === void 0 ? void 0 : _a.parentNode; + arr.push(str.id); + } + } + for (let x of arr) + this.deleteRow(x); + } } Operations.buffer = []; Operations.flag = "off"; diff --git a/BasicOperations.ts b/BasicOperations.ts index 074e40e..cdc4f25 100644 --- a/BasicOperations.ts +++ b/BasicOperations.ts @@ -1,6 +1,7 @@ -import { CRUD } from "./interfaces.js" +import { CRUD, Validation } from "./interfaces.js" import { TableCreation } from "./TableCreate.js" import { Presentation } from "./ButtonOperations.js" +//import { Employee } from "./EmployeeModel.js"; export class Operations implements CRUD @@ -11,7 +12,7 @@ export class Operations implements CRUD buttonObject: Presentation = new Presentation(); - + //Makes the entire row updatable editRow(x: string) { @@ -21,6 +22,7 @@ export class Operations implements CRUD let rowId = document.getElementById(x)!; let newinput: HTMLInputElement, element: ChildNode; + let errorLine: HTMLSpanElement; for (let j = 0; j < Operations.count; j++) { @@ -28,12 +30,20 @@ export class Operations implements CRUD Operations.buffer[j] = element.textContent!; element.textContent = ""; element.appendChild(newinput = document.createElement('input')); + element.appendChild(errorLine = document.createElement('p')); + errorLine.id = "e" + x + j; + if (Operations.buffer[j] == "") newinput.placeholder = TableCreation.headings[j]; else - newinput.placeholder = Operations.buffer[j].toString(); + newinput.value = Operations.buffer[j].toString(); } + let selectElement = document.getElementById(x)!.getElementsByTagName('td')[5]; + selectElement.innerHTML = " " + selectElement.appendChild(errorLine = document.createElement('p')); + errorLine.id = "e" + x + '5'; + let saveB: HTMLInputElement, cancelB: HTMLInputElement; let lastColumn = rowId.getElementsByTagName('td')[Operations.count]; @@ -50,30 +60,39 @@ export class Operations implements CRUD } - deleteRow = (x: string) => document.getElementById(x)!.remove(); saveRow(x: string) { - Operations.flag = "off"; - let val = 0; let row = document.getElementById(x)!; let cell = row.getElementsByTagName('td'); - let cellInput: string; + let cellInput: string[] = []; for (let i = 0; i < Operations.count; i++) { - cellInput = cell[i].querySelector('input')!.value; - if (cellInput == "") val += 1; - cell[i].innerHTML = cellInput; + document.getElementById('e'+x+i)!.innerHTML = " "; + + if (i === 5) + { + cellInput[i] = cell[i].querySelector('select')!.value; + continue; + } + + cellInput[i] = cell[i].querySelector('input')!.value; } - if (val == Operations.count) - this.cancelRow(x); - else - this.buttonObject.fetchButton(x, this); + let answer = this.validateFields(cellInput, x); + if (answer === true) + { + Operations.flag = "off"; + + for (let i = 0; i < Operations.count; i++) + cell[i].innerHTML = cellInput[i]; + + this.buttonObject.fetchButton(x, this); + } } @@ -83,22 +102,78 @@ export class Operations implements CRUD let val = 0; let cell = document.getElementById(x)!.getElementsByTagName('td')!; - for (let i = 0; i < Operations.count; i++) - { + for (let i = 0; i < Operations.count; i++) { + cell[i].innerHTML = Operations.buffer[i].toString(); if (cell[i].innerHTML == "") val += 1; } this.buttonObject.fetchButton(x, this); - if (val == Operations.count) - { - alert('Empty row would be deleted'); + if (val == Operations.count) { + this.deleteRow(x); } } -} + validateFields(employee: string[], x: string) + { + + if (!employee[0].match(/^[a-zA-Z]+$/)) { + + document.getElementById('e' + x + '0')!.innerHTML = 'Only alphabets are allowed'; + return false; + } + + if (!employee[1].match(/^[a-zA-Z]+$/)) { + + document.getElementById('e' + x + '1')!.innerHTML = 'Only alphabets are allowed'; + return false; + } + + if (!employee[2].match(/^[a-zA-Z]+$/)) { + document.getElementById('e' + x + '2')!.innerHTML = 'Only alphabets are allowed'; + return false; + } + + if (!employee[3].match(/^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/)) { + + document.getElementById('e' + x + '3')!.innerHTML = 'Enter valid email'; + return false; + } + + if (!employee[4].match(/[+]?[0-9]{10,13}$/)) { + document.getElementById('e' + x + '4')!.innerHTML = 'Only digits are allowed'; + return false; + } + + if (employee[6] === "") { + document.getElementById('e' + x + '6')!.innerHTML = 'Invalid Address'; + return false; + } + + return true; + } + + multipleDelete() + { + Operations.flag = "off"; + const box = document.getElementsByName('check') as NodeListOf; + const n = box.length; + let arr: string[] =[]; + for(let i=0; i { op.deleteRow(x); }; cell.appendChild(deleteB); + cell = document.createElement('td'); + row.appendChild(cell); + let mDelete = document.createElement('input'); + mDelete.type = "checkbox"; + mDelete.name = "check"; + cell.appendChild(mDelete); } //Fetches buttons back after save and cancel operations are executed fetchButton(x, op) { diff --git a/ButtonOperations.ts b/ButtonOperations.ts index 420bca7..1bbc69d 100644 --- a/ButtonOperations.ts +++ b/ButtonOperations.ts @@ -29,6 +29,13 @@ export class Presentation implements ButtonPresentation deleteB.onclick = () => { op.deleteRow(x) }; cell.appendChild(deleteB); + cell = document.createElement('td'); + row.appendChild(cell); + + let mDelete = document.createElement('input'); + mDelete.type = "checkbox"; + mDelete.name = "check"; + cell.appendChild(mDelete); } //Fetches buttons back after save and cancel operations are executed diff --git a/EmployeeModel.ts b/EmployeeModel.ts index 98062e9..8d04e09 100644 --- a/EmployeeModel.ts +++ b/EmployeeModel.ts @@ -1,6 +1,7 @@ export enum Role { Trainee, QA, Devops, Developer }; -export class Employee { +export class Employee +{ firstName: string; middleName: string; lastName: string; diff --git a/TableCreate.js b/TableCreate.js index 13687e8..7c2163c 100644 --- a/TableCreate.js +++ b/TableCreate.js @@ -5,6 +5,8 @@ export class TableCreation { constructor() { this.buttonObject = new Presentation(); this.operationObject = new Operations(); + let mButton = document.getElementById("mDeleteButton"); + mButton.addEventListener("click", () => { this.operationObject.multipleDelete(); }); } //called when data is fetched create(employee) { @@ -17,6 +19,7 @@ export class TableCreation { else { loadB.value = "Refresh"; document.getElementById('NewButton').style.display = "block"; + document.getElementById('mDeleteButton').style.display = "block"; let table = document.getElementsByTagName('table')[0]; let tableHeader = document.createElement('thead'); let tableBody = document.createElement('tbody'); @@ -46,6 +49,9 @@ export class TableCreation { head = document.createElement('th'); row.appendChild(head); head.innerHTML = "Operations"; + head = document.createElement('th'); + row.appendChild(head); + head.innerHTML = "MultipleDelete"; let n = employee.length; for (let i = 0; i < n; i++) { tableBody.appendChild(row = document.createElement('tr')); @@ -53,7 +59,7 @@ export class TableCreation { this.addEmployee(row, employee[i]); this.buttonObject.createButton(row, i.toString(), this.operationObject); } - TableCreation.newid = n; + TableCreation.newid = n - 1; } //Adds Employees one by one addEmployee(row, employee) { @@ -78,6 +84,7 @@ export class TableCreation { cell = document.createElement('td'); cell.innerHTML = employee.address; row.appendChild(cell); + return employee; } } TableCreation.headings = []; diff --git a/TableCreate.ts b/TableCreate.ts index 3901416..9fe39fb 100644 --- a/TableCreate.ts +++ b/TableCreate.ts @@ -17,6 +17,8 @@ export class TableCreation implements Creation { this.buttonObject = new Presentation(); this.operationObject = new Operations(); + let mButton = document.getElementById("mDeleteButton") as HTMLInputElement; + mButton.addEventListener("click", () => { this.operationObject.multipleDelete(); }); } @@ -35,6 +37,7 @@ export class TableCreation implements Creation loadB.value = "Refresh"; document.getElementById('NewButton')!.style.display = "block"; + document.getElementById('mDeleteButton')!.style.display = "block"; let table = document.getElementsByTagName('table')[0]; let tableHeader = document.createElement('thead'); let tableBody = document.createElement('tbody') @@ -72,23 +75,29 @@ export class TableCreation implements Creation row.appendChild(head); head.innerHTML = "Operations"; + + head = document.createElement('th') + row.appendChild(head); + head.innerHTML = "MultipleDelete"; + let n = employee.length; for (let i = 0; i < n; i++) { tableBody.appendChild(row = document.createElement('tr')); row.setAttribute("id", i.toString()); - this.addEmployee(row, employee[i]); + this.addEmployee(row,employee[i]); this.buttonObject.createButton(row, i.toString(),this.operationObject); + } - TableCreation.newid = n; + TableCreation.newid = n-1; } //Adds Employees one by one - addEmployee(row: HTMLTableRowElement, employee: Employee) + addEmployee(row: HTMLTableRowElement, employee : Employee) { let cell = document.createElement('td'); cell.innerHTML = employee.firstName; @@ -106,11 +115,13 @@ export class TableCreation implements Creation cell.innerHTML = employee.phone.toString(); row.appendChild(cell); cell = document.createElement('td'); - cell.innerHTML =Role[ employee.role]; + cell.innerHTML =Role[employee.role]; row.appendChild(cell); cell = document.createElement('td'); cell.innerHTML = employee.address; row.appendChild(cell); + + return employee; } } \ No newline at end of file diff --git a/data.json b/data.json index 8f1106e..490d3b3 100644 --- a/data.json +++ b/data.json @@ -4,7 +4,7 @@ "middleName": "nil", "lastName": "Sharma", "email": "rashi.sharma@sourcefuse.com", - "phone": 0, + "phone": 8888888822, "role": 0, "address": "#123 Sector-13 Chandigarh" }, @@ -13,7 +13,7 @@ "middleName": "nil", "lastName": "Sharma", "email": "rashi.sharma@sourcefuse.com", - "phone": 0, + "phone": 8888888822, "role": 1, "address": "#123 Sector-13 Chandigarh" }, @@ -22,7 +22,7 @@ "middleName": "nil", "lastName": "Sharma", "email": "rashi.sharma@sourcefuse.com", - "phone": 0, + "phone": 8888888822, "role": 2, "address": "#123 Sector-13 Chandigarh" }, @@ -31,7 +31,7 @@ "middleName": "nil", "lastName": "Sharma", "email": "rashi.sharma@sourcefuse.com", - "phone": 0, + "phone": 8888888822, "role":2, "address": "#123 Sector-13 Chandigarh" } diff --git a/first.js b/first.js index 8d9d95c..8b13789 100644 --- a/first.js +++ b/first.js @@ -1,2 +1 @@ -import { Implementation } from "./main.js"; -let obj = new Implementation(); + diff --git a/index.htm b/index.htm index fcdf6c3..249e033 100644 --- a/index.htm +++ b/index.htm @@ -6,6 +6,9 @@ + @@ -15,6 +18,9 @@
+ +
+ diff --git a/interfaces.ts b/interfaces.ts index 4d6d21b..6d4f929 100644 --- a/interfaces.ts +++ b/interfaces.ts @@ -28,3 +28,8 @@ export interface ButtonPresentation fetchButton(rowId: T, obj: Operations): void; } + +export interface Validation +{ + validateFields(obj: T): void; +} diff --git a/main.ts b/main.ts index 7acb499..45e4e75 100644 --- a/main.ts +++ b/main.ts @@ -4,8 +4,8 @@ import { NewEntry } from "./newEntry.js"; //Implementation class is the main class which exeutes both Business and Presentation Logic -class Implementation { - +class Implementation +{ fetchObject: FetchLogic; createObject: TableCreation; newEntryObject: NewEntry; diff --git a/newEntry.js b/newEntry.js index bf8f235..f762653 100644 --- a/newEntry.js +++ b/newEntry.js @@ -3,12 +3,13 @@ import { Presentation } from "./ButtonOperations.js"; import { Operations } from "./BasicOperations.js"; export class NewEntry { constructor() { - this.buttonObject = new Presentation; - this.operationObject = new Operations; + this.buttonObject = new Presentation(); + this.operationObject = new Operations(); let newButton = document.getElementById("NewButton"); newButton.addEventListener("click", () => { this.newData(); }); } newData() { + TableCreation.newid += 1; let row, cell; let rowId = TableCreation.newid.toString(); let tableBody = document.querySelector('tbody'); @@ -18,6 +19,5 @@ export class NewEntry { row.appendChild(cell = document.createElement('td')); this.buttonObject.createButton(row, rowId, this.operationObject); this.operationObject.editRow(rowId); - TableCreation.newid += 1; } } diff --git a/newEntry.ts b/newEntry.ts index fc5a84f..df6a8a8 100644 --- a/newEntry.ts +++ b/newEntry.ts @@ -10,8 +10,8 @@ export class NewEntry constructor() { - this.buttonObject = new Presentation; - this.operationObject = new Operations; + this.buttonObject = new Presentation(); + this.operationObject = new Operations(); let newButton = document.getElementById("NewButton") as HTMLInputElement; newButton.addEventListener("click",() => {this.newData()}); @@ -19,8 +19,11 @@ export class NewEntry newData() { + TableCreation.newid+= 1; + let row : HTMLTableRowElement, cell: HTMLTableDataCellElement; let rowId = TableCreation.newid.toString(); + let tableBody = document.querySelector('tbody')!; tableBody.appendChild(row = document.createElement('tr')); row.setAttribute("id", rowId); @@ -30,7 +33,6 @@ export class NewEntry this.buttonObject.createButton(row, rowId,this.operationObject); this.operationObject.editRow(rowId); - - TableCreation.newid+= 1; + } } \ No newline at end of file From 78edc08dd60cbbdf0afb71a7ca552e103c78e02f Mon Sep 17 00:00:00 2001 From: Rashi Date: Wed, 18 Mar 2020 18:39:30 +0530 Subject: [PATCH 3/4] Removed js files --- BasicOperations.js | 122 -------------------------------------------- BusinessLogic.js | 6 --- ButtonOperations.js | 40 --------------- EmployeeModel.js | 10 ---- TableCreate.js | 91 --------------------------------- interfaces.js | 0 main.js | 21 -------- newEntry.js | 23 --------- 8 files changed, 313 deletions(-) delete mode 100644 BasicOperations.js delete mode 100644 BusinessLogic.js delete mode 100644 ButtonOperations.js delete mode 100644 EmployeeModel.js delete mode 100644 TableCreate.js delete mode 100644 interfaces.js delete mode 100644 main.js delete mode 100644 newEntry.js diff --git a/BasicOperations.js b/BasicOperations.js deleted file mode 100644 index ad0afb3..0000000 --- a/BasicOperations.js +++ /dev/null @@ -1,122 +0,0 @@ -import { TableCreation } from "./TableCreate.js"; -import { Presentation } from "./ButtonOperations.js"; -//import { Employee } from "./EmployeeModel.js"; -export class Operations { - constructor() { - this.buttonObject = new Presentation(); - this.deleteRow = (x) => document.getElementById(x).remove(); - } - //Makes the entire row updatable - editRow(x) { - if (Operations.flag !== "off") - this.cancelRow(Operations.flag); - Operations.flag = x; - let rowId = document.getElementById(x); - let newinput, element; - let errorLine; - for (let j = 0; j < Operations.count; j++) { - element = rowId.childNodes[j]; - Operations.buffer[j] = element.textContent; - element.textContent = ""; - element.appendChild(newinput = document.createElement('input')); - element.appendChild(errorLine = document.createElement('p')); - errorLine.id = "e" + x + j; - if (Operations.buffer[j] == "") - newinput.placeholder = TableCreation.headings[j]; - else - newinput.value = Operations.buffer[j].toString(); - } - let selectElement = document.getElementById(x).getElementsByTagName('td')[5]; - selectElement.innerHTML = " "; - selectElement.appendChild(errorLine = document.createElement('p')); - errorLine.id = "e" + x + '5'; - let saveB, cancelB; - let lastColumn = rowId.getElementsByTagName('td')[Operations.count]; - //FIRST CHILD IS THE EDIT BUTTON - saveB = lastColumn.getElementsByTagName('input')[0]; - // LAST CHILD IS THE DELETE BUTTON - cancelB = lastColumn.getElementsByTagName('input')[1]; - saveB.value = "SAVE"; - saveB.onclick = () => { this.saveRow(x); }; - cancelB.value = "CANCEL"; - cancelB.onclick = () => { this.cancelRow(x); }; - } - saveRow(x) { - let row = document.getElementById(x); - let cell = row.getElementsByTagName('td'); - let cellInput = []; - for (let i = 0; i < Operations.count; i++) { - document.getElementById('e' + x + i).innerHTML = " "; - if (i === 5) { - cellInput[i] = cell[i].querySelector('select').value; - continue; - } - cellInput[i] = cell[i].querySelector('input').value; - } - let answer = this.validateFields(cellInput, x); - if (answer === true) { - Operations.flag = "off"; - for (let i = 0; i < Operations.count; i++) - cell[i].innerHTML = cellInput[i]; - this.buttonObject.fetchButton(x, this); - } - } - cancelRow(x) { - Operations.flag = "off"; - let val = 0; - let cell = document.getElementById(x).getElementsByTagName('td'); - for (let i = 0; i < Operations.count; i++) { - cell[i].innerHTML = Operations.buffer[i].toString(); - if (cell[i].innerHTML == "") - val += 1; - } - this.buttonObject.fetchButton(x, this); - if (val == Operations.count) { - this.deleteRow(x); - } - } - validateFields(employee, x) { - if (!employee[0].match(/^[a-zA-Z]+$/)) { - document.getElementById('e' + x + '0').innerHTML = 'Only alphabets are allowed'; - return false; - } - if (!employee[1].match(/^[a-zA-Z]+$/)) { - document.getElementById('e' + x + '1').innerHTML = 'Only alphabets are allowed'; - return false; - } - if (!employee[2].match(/^[a-zA-Z]+$/)) { - document.getElementById('e' + x + '2').innerHTML = 'Only alphabets are allowed'; - return false; - } - if (!employee[3].match(/^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/)) { - document.getElementById('e' + x + '3').innerHTML = 'Enter valid email'; - return false; - } - if (!employee[4].match(/[+]?[0-9]{10,13}$/)) { - document.getElementById('e' + x + '4').innerHTML = 'Only digits are allowed'; - return false; - } - if (employee[6] === "") { - document.getElementById('e' + x + '6').innerHTML = 'Invalid Address'; - return false; - } - return true; - } - multipleDelete() { - var _a; - Operations.flag = "off"; - const box = document.getElementsByName('check'); - const n = box.length; - let arr = []; - for (let i = 0; i < n; i++) { - if (box[i] && box[i].checked) { - let str = (_a = box[i].parentNode) === null || _a === void 0 ? void 0 : _a.parentNode; - arr.push(str.id); - } - } - for (let x of arr) - this.deleteRow(x); - } -} -Operations.buffer = []; -Operations.flag = "off"; diff --git a/BusinessLogic.js b/BusinessLogic.js deleted file mode 100644 index 5282287..0000000 --- a/BusinessLogic.js +++ /dev/null @@ -1,6 +0,0 @@ -export class FetchLogic { - fetchFunction() { - return fetch("data.json") - .then(response => response.json()); - } -} diff --git a/ButtonOperations.js b/ButtonOperations.js deleted file mode 100644 index e2dcea0..0000000 --- a/ButtonOperations.js +++ /dev/null @@ -1,40 +0,0 @@ -import { Operations } from "./BasicOperations.js"; -export class Presentation { - //Creates Button for each row - createButton(row, x, op) { - let cell, editB, deleteB; - cell = document.createElement('td'); - row.appendChild(cell); - editB = document.createElement('input'); - editB.type = "Button"; - editB.value = "EDIT"; - editB.className = "btn btn-success"; - editB.onclick = () => { op.editRow(x); }; - cell.appendChild(editB); - let text = document.createElement('span'); - text.innerHTML = ' '; - cell.appendChild(text); - deleteB = document.createElement('input'); - deleteB.type = "Button"; - deleteB.value = "DELETE"; - deleteB.className = "btn btn-danger"; - deleteB.onclick = () => { op.deleteRow(x); }; - cell.appendChild(deleteB); - cell = document.createElement('td'); - row.appendChild(cell); - let mDelete = document.createElement('input'); - mDelete.type = "checkbox"; - mDelete.name = "check"; - cell.appendChild(mDelete); - } - //Fetches buttons back after save and cancel operations are executed - fetchButton(x, op) { - let tuple = document.getElementById(x); - let editB = tuple.getElementsByTagName('td')[Operations.count].getElementsByTagName('input')[0]; - editB.value = "EDIT"; - editB.onclick = () => { op.editRow(x); }; - let deleteB = tuple.getElementsByTagName('td')[Operations.count].getElementsByTagName('input')[1]; - deleteB.value = "DELETE"; - deleteB.onclick = () => { op.deleteRow(x); }; - } -} diff --git a/EmployeeModel.js b/EmployeeModel.js deleted file mode 100644 index 0a5d141..0000000 --- a/EmployeeModel.js +++ /dev/null @@ -1,10 +0,0 @@ -export var Role; -(function (Role) { - Role[Role["Trainee"] = 0] = "Trainee"; - Role[Role["QA"] = 1] = "QA"; - Role[Role["Devops"] = 2] = "Devops"; - Role[Role["Developer"] = 3] = "Developer"; -})(Role || (Role = {})); -; -export class Employee { -} diff --git a/TableCreate.js b/TableCreate.js deleted file mode 100644 index 7c2163c..0000000 --- a/TableCreate.js +++ /dev/null @@ -1,91 +0,0 @@ -import { Role } from "./EmployeeModel.js"; -import { Presentation } from "./ButtonOperations.js"; -import { Operations } from "./BasicOperations.js"; -export class TableCreation { - constructor() { - this.buttonObject = new Presentation(); - this.operationObject = new Operations(); - let mButton = document.getElementById("mDeleteButton"); - mButton.addEventListener("click", () => { this.operationObject.multipleDelete(); }); - } - //called when data is fetched - create(employee) { - let loadB = document.getElementById('LoadButton'); - if (loadB.value !== "Load Data") { - loadB.value = "Refresh"; - Operations.flag = "off"; - TableCreation.newid = -1; - } - else { - loadB.value = "Refresh"; - document.getElementById('NewButton').style.display = "block"; - document.getElementById('mDeleteButton').style.display = "block"; - let table = document.getElementsByTagName('table')[0]; - let tableHeader = document.createElement('thead'); - let tableBody = document.createElement('tbody'); - table.appendChild(tableHeader); - table.appendChild(tableBody); - TableCreation.headings = Object.keys(employee[0]); - Operations.count = TableCreation.headings.length; - } - this.displayTable(employee); - } - //Displays table content - displayTable(employee) { - let table = document.getElementsByTagName('table')[0]; - let tableBody = document.getElementsByTagName('tbody')[0]; - let tableHeader = document.getElementsByTagName('thead')[0]; - tableBody.innerHTML = ""; - tableHeader.innerHTML = ""; - let cell, row, head; - row = document.createElement('tr'); - tableHeader.appendChild(row); - row.className = "success"; - for (let k of TableCreation.headings) { - head = document.createElement('th'); - row.appendChild(head); - head.innerHTML = k; - } - head = document.createElement('th'); - row.appendChild(head); - head.innerHTML = "Operations"; - head = document.createElement('th'); - row.appendChild(head); - head.innerHTML = "MultipleDelete"; - let n = employee.length; - for (let i = 0; i < n; i++) { - tableBody.appendChild(row = document.createElement('tr')); - row.setAttribute("id", i.toString()); - this.addEmployee(row, employee[i]); - this.buttonObject.createButton(row, i.toString(), this.operationObject); - } - TableCreation.newid = n - 1; - } - //Adds Employees one by one - addEmployee(row, employee) { - let cell = document.createElement('td'); - cell.innerHTML = employee.firstName; - row.appendChild(cell); - cell = document.createElement('td'); - cell.innerHTML = employee.middleName; - row.appendChild(cell); - cell = document.createElement('td'); - cell.innerHTML = employee.lastName; - row.appendChild(cell); - cell = document.createElement('td'); - cell.innerHTML = employee.email; - row.appendChild(cell); - cell = document.createElement('td'); - cell.innerHTML = employee.phone.toString(); - row.appendChild(cell); - cell = document.createElement('td'); - cell.innerHTML = Role[employee.role]; - row.appendChild(cell); - cell = document.createElement('td'); - cell.innerHTML = employee.address; - row.appendChild(cell); - return employee; - } -} -TableCreation.headings = []; -TableCreation.newid = -1; diff --git a/interfaces.js b/interfaces.js deleted file mode 100644 index e69de29..0000000 diff --git a/main.js b/main.js deleted file mode 100644 index fd64b4a..0000000 --- a/main.js +++ /dev/null @@ -1,21 +0,0 @@ -import { TableCreation } from "./TableCreate.js"; -import { FetchLogic } from "./BusinessLogic.js"; -import { NewEntry } from "./newEntry.js"; -//Implementation class is the main class which exeutes both Business and Presentation Logic -class Implementation { - constructor() { - this.fetchObject = new FetchLogic(); - this.createObject = new TableCreation(); - this.newEntryObject = new NewEntry(); - let loadButton = document.getElementById("LoadButton"); - loadButton.addEventListener("click", () => { this.loadData(); }); - } - loadData() { - this.fetchObject.fetchFunction() - .then((data) => { - this.createObject.create(data); - }) - .catch(() => console.log("data not found")); - } -} -let obj = new Implementation(); diff --git a/newEntry.js b/newEntry.js deleted file mode 100644 index f762653..0000000 --- a/newEntry.js +++ /dev/null @@ -1,23 +0,0 @@ -import { TableCreation } from "./TableCreate.js"; -import { Presentation } from "./ButtonOperations.js"; -import { Operations } from "./BasicOperations.js"; -export class NewEntry { - constructor() { - this.buttonObject = new Presentation(); - this.operationObject = new Operations(); - let newButton = document.getElementById("NewButton"); - newButton.addEventListener("click", () => { this.newData(); }); - } - newData() { - TableCreation.newid += 1; - let row, cell; - let rowId = TableCreation.newid.toString(); - let tableBody = document.querySelector('tbody'); - tableBody.appendChild(row = document.createElement('tr')); - row.setAttribute("id", rowId); - for (let k of TableCreation.headings) - row.appendChild(cell = document.createElement('td')); - this.buttonObject.createButton(row, rowId, this.operationObject); - this.operationObject.editRow(rowId); - } -} From 089ebbeff3803e0d653f46ad7970b3c72d40ded1 Mon Sep 17 00:00:00 2001 From: Rashi Date: Wed, 18 Mar 2020 18:48:14 +0530 Subject: [PATCH 4/4] minor changes --- TableCreate.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/TableCreate.ts b/TableCreate.ts index 9fe39fb..a98da72 100644 --- a/TableCreate.ts +++ b/TableCreate.ts @@ -17,7 +17,7 @@ export class TableCreation implements Creation { this.buttonObject = new Presentation(); this.operationObject = new Operations(); - let mButton = document.getElementById("mDeleteButton") as HTMLInputElement; + const mButton = document.getElementById("mDeleteButton") as HTMLInputElement; mButton.addEventListener("click", () => { this.operationObject.multipleDelete(); }); }