Skip to content

Commit

Permalink
Update Service Categories table to use AG-Grid (#7880)
Browse files Browse the repository at this point in the history 
* update UI service categories to AG-Grid

* update integration tests Service Categories
  • Loading branch information
@ntheanh201
ntheanh201 committed Dec 18, 2023
1 parent 36e3ae1 commit 0c5607e
Show file tree
Hide file tree
Showing 4 changed files with 168 additions and 131 deletions.
81 changes: 62 additions & 19 deletions ...portal/app/src/common/modules/table/serviceCategories/TableServiceCategoriesController.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,36 +18,79 @@
*/

/**
* @param {*} serviceCategories
*@typedef ServiceCategory
* @property {string} name
* @property {string} lastUpdated
*/

/**
* @param {ServiceCategory} serviceCategories
* @param {*} $scope
* @param {*} $state
* @param {import("../../../service/utils/LocationUtils")} locationUtils
*/
var TableServiceCategoriesController = function(serviceCategories, $scope, $state, locationUtils) {
var TableServiceCategoriesController = function (
serviceCategories,
$scope,
$state,
locationUtils
) {
/**** Constants, scope data, etc. ****/

$scope.serviceCategories = serviceCategories;
/** The columns of the ag-grid table */
$scope.columns = [
{
headerName: "Name",
field: "name",
hide: false,
},
{
headerName: "Last Updated",
field: "lastUpdated",
hide: true,
filter: "agDateColumnFilter",
},
];

$scope.editServiceCategory = function(name) {
locationUtils.navigateToPath('/service-categories/edit?name=' + encodeURIComponent(name));
};
/** @type {import("../agGrid/CommonGridController").CGC.DropDownOption[]} */
$scope.dropDownOptions = [
{
name: "createServiceCategoryMenuItem",
href: "#!/service-categories/new",
text: "Create New Service Category",
type: 2,
},
];

$scope.createServiceCategory = function() {
locationUtils.navigateToPath('/service-categories/new');
/** Reloads all resolved data for the view. */
$scope.refresh = () => {
$state.reload();
};

$scope.refresh = function() {
$state.reload(); // reloads all the resolves for the view
/** Options, configuration, data and callbacks for the ag-grid table. */
/** @type {import("../agGrid/CommonGridController").CGC.GridSettings} */
$scope.gridOptions = {
onRowClick: (row) => {
locationUtils.navigateToPath(
`/service-categories/edit?name=${encodeURIComponent(
row.data.name
)}`
);
},
};

angular.element(document).ready(function () {
$('#serviceCategoriesTable').dataTable({
"aLengthMenu": [[25, 50, 100, -1], [25, 50, 100, "All"]],
"iDisplayLength": 25,
"aaSorting": []
});
});

$scope.serviceCategories = serviceCategories.map((serviceCategory) => ({
...serviceCategory,
lastUpdated: new Date(
serviceCategory.lastUpdated.replace(" ", "T").replace("+00", "Z")
),
}));
};

TableServiceCategoriesController.$inject = ['serviceCategories', '$scope', '$state', 'locationUtils'];
TableServiceCategoriesController.$inject = [
"serviceCategories",
"$scope",
"$state",
"locationUtils",
];
module.exports = TableServiceCategoriesController;
35 changes: 9 additions & 26 deletions ...ic_portal/app/src/common/modules/table/serviceCategories/table.serviceCategories.tpl.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,30 +18,13 @@
-->

<div class="x_panel">
<div class="x_title">
<ol class="breadcrumb pull-left">
<li class="active">Service Categories</li>
</ol>
<div class="pull-right">
<button name="createServiceCategoryButton" class="btn btn-primary" title="Create Service Category" ng-click="createServiceCategory()"><i class="fa fa-plus"></i></button>
<button type=button class="btn btn-default" title="Refresh" ng-click="refresh()"><i class="fa fa-refresh"></i></button>
</div>
<div class="clearfix"></div>
</div>
<div class="x_content">
<br>
<table id="serviceCategoriesTable" class="table responsive-utilities jambo_table">
<thead>
<tr class="headings">
<th>Name</th>
</tr>
</thead>
<tbody>
<tr ng-click="editServiceCategory(sc.name)" ng-repeat="sc in ::serviceCategories">
<td name="name" data-search="^{{::sc.name}}$">{{::sc.name}}</td>
</tr>
</tbody>
</table>
</div>
<common-grid-controller
table-title="Service Categories"
table-name="serviceCategories"
options="gridOptions"
data="serviceCategories"
columns="columns"
drop-down-options="dropDownOptions"
>
</common-grid-controller>
</div>

122 changes: 57 additions & 65 deletions traffic_portal/test/integration/PageObjects/ServiceCategories.po.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,104 +16,96 @@
* specific language governing permissions and limitations
* under the License.
*/
import { browser, by, element } from 'protractor';
import { by, element } from "protractor";

import { randomize } from '../config';
import { BasePage } from './BasePage.po';
import { SideNavigationPage } from './SideNavigationPage.po';
import { randomize } from "../config";
import { SideNavigationPage } from "./SideNavigationPage.po";

interface CreateServiceCategory {
Name: string;
validationMessage?: string;
}

interface UpdateServiceCategory {
description: string;
NewName: string;
validationMessage?: string;
}

interface DeleteServiceCategory {
Name: string;
validationMessage?: string;
}

export class ServiceCategoriesPage extends BasePage {

private btnCreateServiceCategories = element(by.name("createServiceCategoryButton"));
private txtSearch = element(by.id('serviceCategoriesTable_filter')).element(by.css('label input'));
private txtName = element(by.id('name'));

private btnDelete = element(by.buttonText('Delete'));
private txtConfirmName = element(by.name('confirmWithNameInput'));
private randomize = randomize;

export class ServiceCategoriesPage extends SideNavigationPage {
private txtName = element(by.name("name"));
async OpenServicesMenu() {
let snp = new SideNavigationPage();
await snp.ClickServicesMenu();
await this.ClickServicesMenu();
}

/**
* Navigates the browser to the Service Categories table page.
*/
async OpenServiceCategoriesPage() {
let snp = new SideNavigationPage();
await snp.NavigateToServiceCategoriesPage();
await this.NavigateToServiceCategoriesPage();
}

public async CreateServiceCategories(serviceCategories: CreateServiceCategory): Promise<boolean> {
let result = false;
let basePage = new BasePage();
await this.btnCreateServiceCategories.click();
await this.txtName.sendKeys(serviceCategories.Name + this.randomize);
await basePage.ClickCreate();
result = await basePage.GetOutputMessage().then(function (value) {
if (value.indexOf(serviceCategories.validationMessage ?? "") > -1) {
return true;
} else {
return false;
}
})
return result;
public async CreateServiceCategories(
serviceCategories: CreateServiceCategory,
outputMessage: string
): Promise<boolean> {
await this.OpenServiceCategoriesPage();
await element(by.buttonText("More")).click();
await element(by.linkText("Create New Service Category")).click();
this.txtName.sendKeys(serviceCategories.Name + randomize);
await this.ClickCreate();
return this.GetOutputMessage().then(
(v) => v.indexOf(outputMessage ?? "") > -1
);
}

public async SearchServiceCategories(nameServiceCategories: string): Promise<boolean> {
let name = nameServiceCategories + this.randomize;
await this.txtSearch.clear();
await this.txtSearch.sendKeys(name);
if (await browser.isElementPresent(element(by.xpath("//td[@data-search='^" + name + "$']"))) == true) {
await element(by.xpath("//td[@data-search='^" + name + "$']")).click();
return true;
}
return false;
public async SearchServiceCategories(
nameServiceCategories: string
): Promise<void> {
nameServiceCategories += randomize;
await this.OpenServiceCategoriesPage();
const searchInput = element(by.id("quickSearch"));
await searchInput.clear();
await searchInput.sendKeys(nameServiceCategories);
await element(
by.cssContainingText("span", nameServiceCategories)
).click();
}

public async UpdateServiceCategories(serviceCategories: UpdateServiceCategory): Promise<boolean | undefined> {
let basePage = new BasePage();
public async UpdateServiceCategories(
serviceCategories: UpdateServiceCategory,
outputMessage: string
): Promise<boolean | undefined> {
switch (serviceCategories.description) {
case "update service categories name":
await this.txtName.clear();
await this.txtName.sendKeys(serviceCategories.NewName + this.randomize);
await basePage.ClickUpdate();
await this.txtName.sendKeys(
serviceCategories.NewName + randomize
);
await this.ClickUpdate();
break;
default:
return undefined;
}
return await basePage.GetOutputMessage().then(value => serviceCategories.validationMessage === value || (serviceCategories.validationMessage !== undefined && value.includes(serviceCategories.validationMessage)));
return await this.GetOutputMessage().then(
(v) =>
outputMessage === v ||
(outputMessage !== undefined && v.includes(outputMessage))
);
}

public async DeleteServiceCategories(serviceCategories: DeleteServiceCategory): Promise<boolean> {
let name = serviceCategories.Name + this.randomize;
let result = false;
let basePage = new BasePage();
await this.btnDelete.click();
await this.txtConfirmName.sendKeys(name);
await basePage.ClickDeletePermanently();
result = await basePage.GetOutputMessage().then(function (value) {
if (value.indexOf(serviceCategories.validationMessage ?? "") > -1) {
return true;
} else {
return false;
}
})
return result;

public async DeleteServiceCategories(
serviceCategories: DeleteServiceCategory,
outputMessage: string
): Promise<boolean> {
const name = serviceCategories.Name + randomize;
await element(by.buttonText("Delete")).click();
await element(by.name("confirmWithNameInput")).sendKeys(name);
await this.ClickDeletePermanently();
return this.GetOutputMessage().then(
(v) => v.indexOf(outputMessage ?? "") > -1
);
}
}

0 comments on commit 0c5607e

Please sign in to comment.