Started Learning TypeScript Basics.

Gradually moved on to Learning Angular, understanding the basics of the framework.

• Started following the course

Dived deep into Angular Concepts like

• Directives
• Pipes
• Lifecycle Hook and Component Communication
• Input/Output Decorators
• ViewChild
• HttpClient
  • Sending HTTP requests
  • Receiving response
• RxJs
  • Understood the concept of Observable and Observer
  • Used common operators like ShareReplay, CatchError, of, from, and others
  • Understood their use via code.
• Routing
  • Basics of Routing
  • Using Route Modules
  • Wild card, dynamic route
  • Lazy Loading
  • Route Guards
• Angular Forms
  • Template Driven Forms
    • Communication using ngModel
    • Not Scalable
  • Reactive Forms
    • Used Built-in Validators

These learnings are roughly implemented in repo.

• The app opens on the login page
• The user may decide to signup, so a proper navigation facility is provided using routing.
• All appropriate error/failure messages are shown using Toasts(made using ngx-toast)
• On successful login user is redirected to the inbox page
• Session management is achieved using an Authentication token, gotten from response headers.
• Route guards ensure the user cannot access the inbox page prior to login.
• The inbox page has a mailbox and a compose mail section.
  • Mail attachments are sent to the backend by base64 encoding.
  • Mailbox is fetched via API.
• All styling achieved using ng-bootstrap.

• Got an extensive idea of the following, with coding illustrations
  • Javascript execution environment, and how JS is executed
  • Hoisting
  • var,let,const in JS and their scope, Block Scope , Temporal Dead Zone
  • Scope and Lexical Environment in JS and how it works
  • Undefined v/s Not defined in JS
  • Closures
  • Functions as First Class Citizens
  • Web APIS , and accessing them via global Window object
  • Event Loops, CallBack Queues and MicroTask queues in JS.
  • JS Engine inside browsers , also learned how Googles V8 engine works on a high level
  • Asynchronous tasks
    • Using Callbacks
      • Understood its Shortcomings and also how Inversion Of Control Works.
    • Using Promises
      • Learned its usage and advantages of being immutable

• Branch, where I migrated from Angular v12-v14, merged.
• Drop-down lists and popovers were not fully functional on the homepage of both mobile and desktop versions, so fixed that.
• Earlier concierge client list was hard coded, now is being fetched from an API.
• Earlier there was no option to choose client projects, now there are fetched projects from an API.
• Made necessary UI changes to accommodate the above two changes.
• Added the newly fetched project-id to headers, of all further HTTP requests via interceptors.

• Migrated to Bootstrap 5
• Made necessary imports

• Added a new column in booking history.
• On click, triggers a modal, showing payment details and their transactions in a table.

• Payments
• Transaction Table
• Refunds Drop-down accordion(fetches data only when opened)
• Everything was encapsulated in a card for a particular payment (note: there can be multiple payments for a particular booking id)
• All this is shown inside a modal which is triggered by a button click in booking history (each modal was labeled by a unique booking id)

• Changed the z-index of toast to display over modal( error toasts mostly)
• Added some margins to improve UI in some places.
• Tested and took precautions for API fetch failure for payments and refunds data.
• Add error toasts for both client and project fetching during login.

• Added necessary checks to ensure that the refund amount is valid.
• Rewrote the api call, using pipes and catchError.
• Added success and failure toasts to the api call, also ensured modal dismisses on completion.

• Added boundary links (for quick navigation to the first and last page)
• Added visible page rotation in about 8-page radius from the current, for avoiding a large pages list.

• Added a drop-down accordion for the same in the initiate refund modal.

• To address this replaced three date columns by a single column with drop-down to see any date parameter as wish(i.e.Confirmed At, Created At and Updated At)
• Some sections were large so added a functionality to toggle their visibility as per wish.