AD Academic Space List Page Creation

by SLV Team 37 views
Creating the `Academic Space List` Page for AD

Hey guys! Today, we're diving into creating the Academic Space List page for the AD (presumably, the Administrative Dashboard). This page is super crucial because it's going to be the main hub where we can view and manage all our academic spaces. Think of it as the control center for classrooms, labs, and other learning areas. Let's break down what needs to be done to get this up and running.

Why This Page Matters

Before we jump into the nitty-gritty, let's talk about why this page is so important. Imagine trying to manage hundreds of academic spaces without a centralized view. Sounds like a nightmare, right? This page solves that problem by providing a clear, organized interface. With it, we can easily see what spaces we have, where they are, and how they're being used. This is a game-changer for administrators, helping them make informed decisions about space allocation and resource management. So, let's make sure we build this right!

Key Steps to Building the Page

Alright, let's get into the specifics. There are several key steps we need to take to create this page effectively. From setting up the basic files to implementing the core logic, each step is crucial. We'll walk through each one, making sure we cover all the bases.

1. Setting Up the Foundation: Files and Declarations

First things first, we need to create the basic files that will house our page. This involves setting up the HTML, CSS, and TypeScript files that will define the structure, style, and behavior of the page. We'll also need to declare the page in our AppModule so that Angular knows it exists and can use it.

Creating the Core Files

We need to create three files in the src/app/pages/AD/space-list/ directory:

  • space-list.page.ts: This is our TypeScript file, where we'll write the logic for the page.
  • space-list.page.html: This is our HTML file, where we'll define the structure and layout of the page.
  • space-list.page.css: This is our CSS file, where we'll define the styles for the page.

These files are the basic building blocks of our page. The TypeScript file will handle the data fetching and manipulation, the HTML file will define how the page looks, and the CSS file will make sure it looks good.

Declaring in AppModule

Once we've created these files, we need to declare our page in the AppModule. This tells Angular that our page exists and makes it available for use in our application. To do this, we'll need to import our SpaceListPage into the AppModule and add it to the declarations array.

import { SpaceListPage } from './pages/AD/space-list/space-list.page';

@NgModule({
 declarations: [
 // Other components and modules
 SpaceListPage,
 ],
 imports: [
 // Other imports
 ],
 providers: [
 // Other providers
 ],
 bootstrap: [AppComponent]
})
export class AppModule { }

This step is crucial because if we don't declare our page in the AppModule, Angular won't be able to find it, and we'll run into errors. So, make sure you don't skip this step!

2. Laying Out the Structure: HTML and Component Integration

With the files in place, it's time to start building the actual layout of the page. This involves defining the structure of the page using HTML and integrating the SpaceManagementTableComponent, which will display our list of academic spaces.

Defining the Page Title

First up, we need to add a title to our page. This will help users quickly understand what the page is about. We'll use an <h2> tag for this, placing it at the top of our space-list.page.html file.

<h2>Lista de Espaços Acadêmicos</h2>

This simple addition provides a clear heading for our page, making it more user-friendly.

Integrating the SpaceManagementTableComponent

The heart of our page is the SpaceManagementTableComponent. This component will display our list of academic spaces in a table format, allowing us to easily view and manage them. To integrate this component, we simply need to add its tag to our space-list.page.html file.

<app-space-management-table></app-space-management-table>

This tag tells Angular to render the SpaceManagementTableComponent in our page. Of course, we'll need to pass some data to this component later on, but for now, this is all we need to do in the HTML.

3. Implementing the Logic: TypeScript and Data Handling

Now comes the fun part: implementing the logic that makes our page work. This involves writing the TypeScript code that fetches data, handles user interactions, and passes data to the SpaceManagementTableComponent. We'll be working in the space-list.page.ts file for this.

Injecting the SalaService

Our page needs to fetch data about academic spaces from a service. Let's call this service SalaService. To use this service, we need to inject it into our SpaceListPage component.

import { Component, OnInit } from '@angular/core';
import { SalaService } from './sala.service';

@Component({
 selector: 'app-space-list',
 templateUrl: './space-list.page.html',
 styleUrls: ['./space-list.page.css']
})
export class SpaceListPage implements OnInit {

 constructor(private salaService: SalaService) { }

 ngOnInit() { }

}

By injecting the SalaService, we can now use its methods to fetch data about academic spaces.

Fetching Data and Passing it to the Component

Next, we need to fetch the data and pass it to the SpaceManagementTableComponent. We'll do this in the ngOnInit lifecycle hook, which is called when the component is initialized.

import { Component, OnInit } from '@angular/core';
import { SalaService } from './sala.service';

@Component({
 selector: 'app-space-list',
 templateUrl: './space-list.page.html',
 styleUrls: ['./space-list.page.css']
})
export class SpaceListPage implements OnInit {
 data: any[];
 totalPages: number;
 currentPage: number;

 constructor(private salaService: SalaService) { }

 ngOnInit() {
 this.salaService.getSalas().subscribe(response => {
 this.data = response.data;
 this.totalPages = response.totalPages;
 this.currentPage = response.currentPage;
 });
 }

}

In this code, we're calling the getSalas method on our SalaService, which presumably returns an observable. We subscribe to this observable, and when the data comes back, we store it in the data, totalPages, and currentPage properties of our component. We then need to pass these properties to the SpaceManagementTableComponent in our HTML.

<app-space-management-table
 [data]="data"
 [totalPages]="totalPages"
 [currentPage]="currentPage"
 ></app-space-management-table>

This binds the data, totalPages, and currentPage properties of our component to the corresponding inputs of the SpaceManagementTableComponent.

Implementing Event Handlers

Finally, we need to implement the event handlers for the searchChange, pageChange, edit, and delete events. These handlers will allow us to react to user interactions and perform actions such as searching, navigating between pages, editing spaces, and deleting spaces.

import { Component, OnInit } from '@angular/core';
import { SalaService } from './sala.service';
import { Router } from '@angular/router';

@Component({
 selector: 'app-space-list',
 templateUrl: './space-list.page.html',
 styleUrls: ['./space-list.page.css']
})
export class SpaceListPage implements OnInit {
 data: any[];
 totalPages: number;
 currentPage: number;

 constructor(private salaService: SalaService, private router: Router) { }

 ngOnInit() {
 this.loadData();
 }

 loadData() {
 this.salaService.getSalas().subscribe(response => {
 this.data = response.data;
 this.totalPages = response.totalPages;
 this.currentPage = response.currentPage;
 });
 }

 onSearchChange(searchTerm: string) {
 // Implement search logic here
 }

 onPageChange(pageNumber: number) {
 // Implement page change logic here
 }

 onEdit(spaceId: number) {
 this.router.navigate([`/ad/cadastrar-espaco/${spaceId}`]);
 }

 onDelete(spaceId: number) {
 // Implement delete logic here, possibly with a ConfirmationModal
 }

}

In this code, we've added handlers for each of the events. The onEdit handler navigates to the /ad/cadastrar-espaco/:id route, passing the ID of the space to be edited. The onDelete handler is left as a placeholder, but it should call the service/action to delete the space, possibly after opening a ConfirmationModal. We also need to bind these handlers to the SpaceManagementTableComponent in our HTML.

<app-space-management-table
 [data]="data"
 [totalPages]="totalPages"
 [currentPage]="currentPage"
 (searchChange)="onSearchChange($event)"
 (pageChange)="onPageChange($event)"
 (edit)="onEdit($event)"
 (delete)="onDelete($event)"
 ></app-space-management-table>

This binds the events emitted by the SpaceManagementTableComponent to the corresponding handlers in our component.

Acceptance Criteria: Ensuring We're on the Right Track

To make sure we're building the page correctly, we have some acceptance criteria to follow. These criteria define what the page should look like and how it should behave.

  1. Page Creation: We've already covered this! We need to create the space-list.page.ts, space-list.page.html, and space-list.page.css files and declare the page in the AppModule.
  2. Layout and Components: The page should use an <h2> tag for the title "Lista de Espaços Acadêmicos" and include the SpaceManagementTableComponent.
  3. Logic (TS):
    • The page should be a "smart container," meaning it handles the data fetching and manipulation.
    • It should inject the SalaService and fetch the data for the spaces.
    • It should pass the data ([data]), pagination information ([totalPages], [currentPage]), and event handlers to the SpaceManagementTableComponent.
    • The (edit) event should navigate to /ad/cadastrar-espaco/:id.
    • The (delete) event should call the service/action to delete the space, possibly after opening a ConfirmationModal.

Wrapping Up

Creating the Academic Space List page is a big step towards making our administrative dashboard more efficient and user-friendly. By following these steps and keeping the acceptance criteria in mind, we can build a page that meets the needs of our users and makes managing academic spaces a breeze. Remember, focus on creating high-quality content and providing value to the readers – that's what truly matters in the long run!

So, let's get to work and make this page awesome! If you have any questions or run into any issues, don't hesitate to ask. We're all in this together, and together, we can build something great. Happy coding, guys!