Skip to content

Commit

Permalink
Merge pull request #8125 from ever-co/fix/page-registry-providers
Browse files Browse the repository at this point in the history
[Fix] Page Registry Providers
  • Loading branch information
rahul-rocket authored Aug 29, 2024
2 parents 9f34778 + 29a4b2d commit c8f0c2c
Show file tree
Hide file tree
Showing 15 changed files with 238 additions and 203 deletions.
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { PermissionsGuard, TabsetRegistryIdEnum } from '@gauzy/ui-core/core';
import { PermissionsGuard } from '@gauzy/ui-core/core';
import { PermissionsEnum } from '@gauzy/contracts';
import { DateRangePickerResolver } from '@gauzy/ui-core/shared';
import { DashboardComponent } from './dashboard.component';
Expand All @@ -14,7 +14,7 @@ const routes: Routes = [
{
path: '',
component: DashboardComponent,
data: { tabsetId: TabsetRegistryIdEnum.Dashboard },
data: { tabsetId: 'dashboard' },
children: [
{
path: '',
Expand Down
20 changes: 10 additions & 10 deletions apps/gauzy/src/app/pages/dashboard/dashboard.component.ts
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import { NbRouteTab } from '@nebular/theme';
import { TranslateService } from '@ngx-translate/core';
import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
import { ISelectedEmployee, PermissionsEnum } from '@gauzy/contracts';
import { PageTabRegistryService, Store, TabsetRegistryId, TabsetRegistryIdEnum } from '@gauzy/ui-core/core';
import { PageTabRegistryService, Store, PageTabsetRegistryId } from '@gauzy/ui-core/core';
import { TranslationBaseComponent } from '@gauzy/ui-core/i18n';
import { DynamicTabsComponent } from '@gauzy/ui-core/shared';

Expand All @@ -16,7 +16,7 @@ import { DynamicTabsComponent } from '@gauzy/ui-core/shared';
})
export class DashboardComponent extends TranslationBaseComponent implements AfterContentChecked, OnInit, OnDestroy {
public tabs: NbRouteTab[] = [];
public tabsetId: TabsetRegistryId = this._route.snapshot.data.tabsetId; // The identifier for the tabset
public tabsetId: PageTabsetRegistryId = this._route.snapshot.data.tabsetId; // The identifier for the tabset
public selectedEmployee: ISelectedEmployee;

@ViewChild('dynamicTabs') dynamicTabsComponent!: DynamicTabsComponent;
Expand Down Expand Up @@ -72,7 +72,7 @@ export class DashboardComponent extends TranslationBaseComponent implements Afte
if (this._store.hasAnyPermission(PermissionsEnum.ADMIN_DASHBOARD_VIEW, PermissionsEnum.TEAM_DASHBOARD)) {
// Register the teams tab
this._pageTabRegistryService.registerPageTab({
tabsetId: TabsetRegistryIdEnum.Dashboard, // The identifier for the tabset
tabsetId: 'dashboard', // The identifier for the tabset
tabId: 'teams', // The identifier for the tab
tabsetType: 'route', // The type of tabset to use
route: this.getRoute('teams'), // The route for the tab
Expand All @@ -93,7 +93,7 @@ export class DashboardComponent extends TranslationBaseComponent implements Afte
) {
// Register the project management tab
this._pageTabRegistryService.registerPageTab({
tabsetId: TabsetRegistryIdEnum.Dashboard, // The identifier for the tabset
tabsetId: 'dashboard', // The identifier for the tabset
tabId: 'project-management', // The identifier for the tab
tabsetType: 'route', // The type of tabset to use
route: this.getRoute('project-management'), // The route for the tab
Expand All @@ -111,7 +111,7 @@ export class DashboardComponent extends TranslationBaseComponent implements Afte
) {
// Register the time tracking tab
this._pageTabRegistryService.registerPageTab({
tabsetId: TabsetRegistryIdEnum.Dashboard, // The identifier for the tabset
tabsetId: 'dashboard', // The identifier for the tabset
tabId: 'time-tracking', // The identifier for the tab
tabsetType: 'route', // The type of tabset to use
route: this.getRoute('time-tracking'), // The route for the tab
Expand All @@ -130,15 +130,15 @@ export class DashboardComponent extends TranslationBaseComponent implements Afte
*/
registerAccountingTabs(): void {
// Remove the specified page tabs for the current tenant
this._pageTabRegistryService.removePageTab(TabsetRegistryIdEnum.Dashboard, 'accounting');
this._pageTabRegistryService.removePageTab(TabsetRegistryIdEnum.Dashboard, 'hr');
this._pageTabRegistryService.removePageTab('dashboard', 'accounting');
this._pageTabRegistryService.removePageTab('dashboard', 'hr');

// Check if the user has permission to view accounting
if (this._store.hasAnyPermission(PermissionsEnum.ADMIN_DASHBOARD_VIEW, PermissionsEnum.ACCOUNTING_DASHBOARD)) {
if (!this.selectedEmployee || !this.selectedEmployee.id) {
// Register the accounting tab
this._pageTabRegistryService.registerPageTab({
tabsetId: TabsetRegistryIdEnum.Dashboard, // The identifier for the tabset
tabsetId: 'dashboard', // The identifier for the tabset
tabId: 'accounting', // The identifier for the tab
tabsetType: 'route', // The type of tabset to use
route: this.getRoute('accounting'), // The route for the tab
Expand All @@ -161,7 +161,7 @@ export class DashboardComponent extends TranslationBaseComponent implements Afte
if (this.selectedEmployee && this.selectedEmployee.id) {
// Register the human resources tab
this._pageTabRegistryService.registerPageTab({
tabsetId: TabsetRegistryIdEnum.Dashboard, // The identifier for the tabset
tabsetId: 'dashboard', // The identifier for the tabset
tabId: 'hr', // The identifier for the tab
tabsetType: 'route', // The type of tabset to use
route: this.getRoute('hr'), // The route for the tab
Expand All @@ -183,6 +183,6 @@ export class DashboardComponent extends TranslationBaseComponent implements Afte
*/
ngOnDestroy() {
// Delete the dashboard tabset from the registry
this._pageTabRegistryService.deleteTabset(TabsetRegistryIdEnum.Dashboard);
this._pageTabRegistryService.deleteTabset('dashboard');
}
}
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import { ActivatedRoute } from '@angular/router';
import { NbRouteTab } from '@nebular/theme';
import { TranslateService } from '@ngx-translate/core';
import { PermissionsEnum } from '@gauzy/contracts';
import { PageTabRegistryService, Store, TabsetRegistryId, TabsetRegistryIdEnum } from '@gauzy/ui-core/core';
import { PageTabRegistryService, Store, PageTabsetRegistryId } from '@gauzy/ui-core/core';
import { TranslationBaseComponent } from '@gauzy/ui-core/i18n';

@Component({
Expand All @@ -13,7 +13,7 @@ import { TranslationBaseComponent } from '@gauzy/ui-core/i18n';
})
export class TimesheetLayoutComponent extends TranslationBaseComponent implements OnInit, OnDestroy {
public tabs: NbRouteTab[] = [];
public tabsetId: TabsetRegistryId = this._route.snapshot.data.tabsetId; // The identifier for the tabset
public tabsetId: PageTabsetRegistryId = this._route.snapshot.data.tabsetId; // The identifier for the tabset

constructor(
public readonly translateService: TranslateService,
Expand Down Expand Up @@ -47,7 +47,7 @@ export class TimesheetLayoutComponent extends TranslationBaseComponent implement
if (this._store.hasAnyPermission(...permissions)) {
// Register the daily timesheet tab
this._pageTabRegistryService.registerPageTab({
tabsetId: TabsetRegistryIdEnum.Timesheet, // The identifier for the tabset
tabsetId: 'timesheet', // The identifier for the tabset
tabId: 'daily', // The identifier for the tab
tabsetType: 'route', // The type of tabset to use
route: '/pages/employees/timesheets/daily', // The route for the tab
Expand All @@ -59,7 +59,7 @@ export class TimesheetLayoutComponent extends TranslationBaseComponent implement

// Register the weekly timesheet tab
this._pageTabRegistryService.registerPageTab({
tabsetId: TabsetRegistryIdEnum.Timesheet, // The identifier for the tabset
tabsetId: 'timesheet', // The identifier for the tabset
tabId: 'weekly', // The identifier for the tab
tabsetType: 'route', // The type of tabset to use
route: '/pages/employees/timesheets/weekly', // The route for the tab
Expand All @@ -71,7 +71,7 @@ export class TimesheetLayoutComponent extends TranslationBaseComponent implement

// Register the calendar timesheet tab
this._pageTabRegistryService.registerPageTab({
tabsetId: TabsetRegistryIdEnum.Timesheet, // The identifier for the tabset
tabsetId: 'timesheet', // The identifier for the tabset
tabId: 'calendar', // The identifier for the tab
tabsetType: 'route', // The type of tabset to use
route: '/pages/employees/timesheets/calendar', // The route for the tab
Expand All @@ -86,7 +86,7 @@ export class TimesheetLayoutComponent extends TranslationBaseComponent implement
if (this._store.hasPermission(PermissionsEnum.CAN_APPROVE_TIMESHEET)) {
// Register the approvals tab
this._pageTabRegistryService.registerPageTab({
tabsetId: TabsetRegistryIdEnum.Timesheet, // The identifier for the tabset
tabsetId: 'timesheet', // The identifier for the tabset
tabId: 'approvals', // The identifier for the tab
tabsetType: 'route', // The type of tabset to use
route: '/pages/employees/timesheets/approvals', // The route for the tab
Expand All @@ -100,6 +100,6 @@ export class TimesheetLayoutComponent extends TranslationBaseComponent implement

ngOnDestroy(): void {
// Delete the timesheet tabset from the registry
this._pageTabRegistryService.deleteTabset(TabsetRegistryIdEnum.Timesheet);
this._pageTabRegistryService.deleteTabset('timesheet');
}
}
Original file line number Diff line number Diff line change
@@ -1,13 +1,12 @@
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { TabsetRegistryIdEnum } from '@gauzy/ui-core/core';
import { TimesheetLayoutComponent } from './layout/layout.component';

const routes: Routes = [
{
path: '',
component: TimesheetLayoutComponent,
data: { tabsetId: TabsetRegistryIdEnum.Timesheet },
data: { tabsetId: 'timesheet' },
children: [
{
path: '',
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -143,14 +143,14 @@ export class JobEmployeeComponent extends PaginationFilterBaseComponent implemen
registerDataTableColumns(_pageDataTableRegistryService: PageDataTableRegistryService): void {
// Register the data table column
_pageDataTableRegistryService.registerPageDataTableColumn({
location: 'job-employee',
columnId: 'name',
order: 0,
title: 'JOB_EMPLOYEE.EMPLOYEE',
type: 'custom',
width: '20%',
isSortable: true,
isEditable: true,
dataTableId: 'job-employee', // The identifier for the data table location
columnId: 'name', // The identifier for the column
order: 0, // The order of the column in the table
title: () => this.getTranslation('JOB_EMPLOYEE.EMPLOYEE'), // The title of the column
type: 'custom', // The type of the column
width: '20%', // The width of the column
isSortable: true, // Indicates whether the column is sortable
isEditable: true, // Indicates whether the column is editable
renderComponent: EmployeeLinksComponent,
valuePrepareFunction: (_: any, cell: Cell) => this.prepareEmployeeValue(_, cell),
componentInitFunction: (instance: EmployeeLinksComponent, cell: Cell) => {
Expand All @@ -163,40 +163,40 @@ export class JobEmployeeComponent extends PaginationFilterBaseComponent implemen

// Register the data table column
_pageDataTableRegistryService.registerPageDataTableColumn({
location: 'job-employee',
columnId: 'availableJobs',
order: 1,
title: 'JOB_EMPLOYEE.AVAILABLE_JOBS',
type: 'text',
width: '10%',
isSortable: false,
isEditable: false,
dataTableId: 'job-employee', // The identifier for the data table location
columnId: 'availableJobs', // The identifier for the column
order: 1, // The order of the column in the table
title: () => this.getTranslation('JOB_EMPLOYEE.AVAILABLE_JOBS'), // The title of the column
type: 'text', // The type of the column
width: '10%', // The width of the column
isSortable: false, // Indicates whether the column is sortable
isEditable: false, // Indicates whether the column is editable
valuePrepareFunction: (rawValue: any) => rawValue || 0
});

// Register the data table column
_pageDataTableRegistryService.registerPageDataTableColumn({
location: 'job-employee',
columnId: 'appliedJobs',
order: 2,
title: 'JOB_EMPLOYEE.APPLIED_JOBS',
type: 'text',
width: '10%',
isSortable: false,
isEditable: false,
dataTableId: 'job-employee', // The identifier for the data table location
columnId: 'appliedJobs', // The identifier for the column
order: 2, // The order of the column in the table
title: () => this.getTranslation('JOB_EMPLOYEE.APPLIED_JOBS'), // The title of the column
type: 'text', // The type of the column
width: '10%', // The width of the column
isSortable: false, // Indicates whether the column is sortable
isEditable: false, // Indicates whether the column is editable
valuePrepareFunction: (rawValue: any) => rawValue || 0
});

// Register the data table column
_pageDataTableRegistryService.registerPageDataTableColumn({
location: 'job-employee',
columnId: 'billRateValue',
order: 3,
title: 'JOB_EMPLOYEE.BILLING_RATE',
type: 'text',
width: '10%',
isSortable: false,
isEditable: true,
dataTableId: 'job-employee', // The identifier for the data table location
columnId: 'billRateValue', // The identifier for the column
order: 3, // The order of the column in the table
title: () => this.getTranslation('JOB_EMPLOYEE.BILLING_RATE'), // The title of the column
type: 'text', // The type of the column
width: '10%', // The width of the column
isSortable: false, // Indicates whether the column is sortable
isEditable: true, // Indicates whether the column is editable
editor: {
type: 'custom',
component: NumberEditorComponent
Expand All @@ -211,14 +211,14 @@ export class JobEmployeeComponent extends PaginationFilterBaseComponent implemen

// Register the data table column
_pageDataTableRegistryService.registerPageDataTableColumn({
location: 'job-employee',
columnId: 'minimumBillingRate',
order: 4,
title: 'JOB_EMPLOYEE.MINIMUM_BILLING_RATE',
type: 'text',
width: '20%',
isSortable: false,
isEditable: true,
dataTableId: 'job-employee', // The identifier for the data table location
columnId: 'minimumBillingRate', // The identifier for the column
order: 4, // The order of the column in the table
title: () => this.getTranslation('JOB_EMPLOYEE.MINIMUM_BILLING_RATE'), // The title of the column
type: 'text', // The type of the column
width: '20%', // The width of the column
isSortable: false, // Indicates whether the column is sortable
isEditable: true, // Indicates whether the column is editable
editor: {
type: 'custom',
component: NumberEditorComponent
Expand All @@ -231,14 +231,14 @@ export class JobEmployeeComponent extends PaginationFilterBaseComponent implemen

// Register the data table column
_pageDataTableRegistryService.registerPageDataTableColumn({
location: 'job-employee',
columnId: 'isJobSearchActive',
order: 5,
title: 'JOB_EMPLOYEE.JOB_SEARCH_STATUS',
type: 'custom',
width: '20%',
isSortable: false,
isEditable: false,
dataTableId: 'job-employee', // The identifier for the data table location
columnId: 'isJobSearchActive', // The identifier for the column
order: 5, // The order of the column in the table
title: () => this.getTranslation('JOB_EMPLOYEE.JOB_SEARCH_STATUS'), // The title of the column
type: 'custom', // The type of the column
width: '20%', // The width of the column
isSortable: false, // Indicates whether the column is sortable
isEditable: false, // Indicates whether the column is editable
renderComponent: SmartTableToggleComponent,
componentInitFunction: (instance: SmartTableToggleComponent, cell: Cell) => {
// Get the employee data from the cell
Expand Down
41 changes: 14 additions & 27 deletions packages/ui-core/core/src/lib/common/component-registry.types.ts
Original file line number Diff line number Diff line change
Expand Up @@ -14,13 +14,9 @@
*/
export type ComponentRegistryLocationId = 'table' | 'tab' | 'route';

// Define sub-page types for 'jobs', 'employees' and 'sales'
export type JobsSubPageLocationRegistryId = 'job-employee';
export type SalesSubPageLocationRegistryId = 'proposals';

/**
* @description
* Type representing the possible page locations for dynamic routes, tabs, and table columns.
* Type representing the possible page locations for dynamic routes.
*
* This type is used to identify different sections of the application where dynamic
* routes and tabs can be registered. Each value corresponds to a specific page or
Expand All @@ -32,16 +28,10 @@ export type SalesSubPageLocationRegistryId = 'proposals';
* - 'pages': The main pages section of the application.
* - 'dashboard': The main dashboard page of the application.
* - 'jobs': The jobs or job search section of the application.
* - 'job-employee': A sub-page under the jobs section.
* - 'sales': The sales or proposals section of the application.
* - 'proposals': A sub-page under the sales section.
*/
export type PageLocationRegistryId =
| 'auth'
| 'pages'
| 'dashboard'
| 'jobs'
| JobsSubPageLocationRegistryId
| 'sales'
| SalesSubPageLocationRegistryId;
export type PageRouteRegistryId = 'auth' | 'pages' | 'dashboard' | 'jobs' | 'sales' | 'proposals';

/**
* @description
Expand All @@ -56,21 +46,18 @@ export type PageLocationRegistryId =
* - 'timesheet': A timesheet tab.
* - 'time-activity': A time and activity tab.
*/
export type TabsetRegistryId = 'timesheet' | 'time-activity' | 'dashboard';
export type PageTabsetRegistryId = 'dashboard' | 'timesheet' | 'time-activity';

/**
* Enum representing the possible dynamic tabs for pages.
* @description
* Type representing the possible page data table locations for dynamic table columns.
*
* This enum is used to identify different types of tabs that can be registered
* for dynamic pages. Each value corresponds to a specific
* tab type in the application. This allows for flexible and dynamic registration
* based on the context and requirements of the application.
* This type is used to identify different sections of the application where dynamic
* columns can be registered. Each value corresponds to a specific page or
* section in the application. This allows for flexible and dynamic routing based
* on the context and requirements of the application.
*
* @readonly
* @enum {string}
* Possible values:
* - 'job-employee': A sub-page under the jobs section.
*/
export enum TabsetRegistryIdEnum {
Timesheet = 'timesheet', // The identifier for the timesheet tabset
TimeActivity = 'time-activity', // The identifier for the time and activity tabset
Dashboard = 'dashboard' // The identifier for the dashboard tabset
}
export type PageDataTableRegistryId = 'job-employee';
Loading

0 comments on commit c8f0c2c

Please sign in to comment.