CLASS PAGE

INTRODUCTION

Class page, has all the necessary functions and methods that allow the user to manipulate data in an application from the UI (user interface). Its the home of all CRUD(create, review, update and delete) operations. With these improved operations, data manipulation can carried out by any user.

Synopsis

export class page extends outlook.baby<crud_result> {
    
       // *Methods*.  
     constructor()  
     async review()  
     async get_result(): Promise<crud_result>{}  
     public async edit_fk(button:HTMLButtonElement):Promise<void{}admin_parameters {}  
     static mark_as_edited(evt: Event|HTMLElement): void {}  
     static get current() {}  
     create_row(): void {}  
     async update_database() {}  
     public update_textarea_input(textarea:HTMLTextAreaElement) {}  
     public edit_textarea(input:HTMLInputElement) {}  
     async delete(): Promise<void> {}  
     public async unhide() {}  
     public hide() {}  
     public async merge():Promise<void>{}  
     public multi_select(btn:HTMLButtonElement) {}  
     public edit_click() {}  
 }  

Content

Page:: constructor()

Constructs the class Page. Also initializes the properties of the object.

Page:: async review()

Allow a user to filter and order records in a theme panel.

Page:: async get_result(): Promise<crud_result>{}

Returns the current selection from this crud page.

Page:: public async edit_fk(button:HTMLButtonElement): Promise{} admin_parameters {}

Modify the foreign key field that matches the given button. The function is asynchronous because it waits for the user to select a new entry from the foreign key table's crud page.

Page:: create_row(): void {}

A button event listener that adds an empty row below the current selection.

Page:: async update_database() {}

This is a listener for collecting and saving the affected tds, i.e. both new records and existing old tds, to the database. This is the UI component for the CRUD operations.

Page:: public update_textarea_input(textarea:HTMLTextAreaElement) {}

This is an on-blur event listener of the text-area, that updates the edited value to that of the input. In order to trigger the input`s on-change.

Page:: public edit_textarea(input:HTMLInputElement) {}

This an onclick event listener of the input element that activates the text area, for the user to start editing.

Page:: async delete(): Promise {}

Removes the current record from both the screen and the database.

Page:: public async unhide() {}

This method opens a popup, shows the columns that are already hidden and lets the user select the ones to be made visible.

Page:: public hide() {}

This will hide the selected column by controlling the styling.

Page::public async merge():Promise{}

Merges the currently checked records in a database.

Page:: public multi_select(btn:HTMLButtonElement) {}

Toggles the checkbox at the primary td(table-data) allowing user to do multiple tr(table-row) selection.

Page:: public edit_click() {}

This is a toggle switch that puts the page in edit or normal mode. When re-pressed, it switches back to normal mode.