Project

BasicOperations.ts

@@ -0,0 +1,179 @@
+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<string>
+{
+    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;
+        let errorLine: HTMLSpanElement;
+
+        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 = " <select><option>Trainee</option> <option>QA</option> <option>Devops</option><option>Developer</option></select>"
+        selectElement.appendChild(errorLine = document.createElement('p'));
+        errorLine.id = "e" + x + '5';
+
+        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) 
+    {
+        let row = document.getElementById(x)!;
+        let cell = row.getElementsByTagName('td');
+        let cellInput: string[] = [];
+
+        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: 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) {
+
+            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<HTMLInputElement>; 
+        const n = box.length;
+        let arr: string[] =[];
+        for(let i=0; i<n; i++)
+        {           
+            if(box[i] && box[i].checked)
+            {  
+               let str = box[i].parentNode?.parentNode! as HTMLTableRowElement;
+               arr.push(str.id)
+            }
+        }
+
+        for(let x of arr)
+            this.deleteRow(x);   
+    }
+
+}

BusinessLogic.ts

@@ -0,0 +1,11 @@
+import { Employee } from "./EmployeeModel.js"
+import { FetchData } from "./interfaces.js"
+
+export class FetchLogic implements FetchData<Employee>
+{
+    fetchFunction(): Promise<Employee[]> 
+    {
+        return fetch("data.json")
+            .then(response => response.json())
+    }
+}

ButtonOperations.ts

@@ -0,0 +1,57 @@
+import { ButtonPresentation} from "./interfaces.js"
+import { Operations } from "./BasicOperations.js"
+
+export class Presentation implements ButtonPresentation<string>
+{
+    //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);
+
+        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: 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) };
+    }
+
+
+}

EmployeeModel.ts

@@ -0,0 +1,13 @@
+export enum Role { Trainee, QA, Devops, Developer };
+
+export class Employee 
+{
+    firstName: string;
+    middleName: string;
+    lastName: string;
+    email: string;
+    phone: number;
+    role: Role;
+    address: string;
+
+}

TableCreate.ts

@@ -0,0 +1,127 @@
+
+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<Employee>
+{
+    static headings: string[] = [];
+    static newid: number = -1;
+
+    buttonObject : Presentation;
+    operationObject : Operations;
+
+    constructor()
+    {
+        this.buttonObject = new Presentation();
+        this.operationObject = new Operations();
+        const mButton = document.getElementById("mDeleteButton") as HTMLInputElement;
+        mButton.addEventListener("click", () => { this.operationObject.multipleDelete(); });
+    }
+
+
+    //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";
+            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: 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";
+
+
+        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: 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); 
+
+        return employee;
+    }
+
+}