Merge pull request #140 from GSA/feature/95_ART_frame

ART API Integration

angular.json

@@ -26,7 +26,7 @@
               "src/nginx.conf"
             ],
             "styles": [
-              "src/styles.css",
+              "src/styles.scss",
               "node_modules/font-awesome/css/font-awesome.min.css"
             ],
             "scripts": [
@@ -113,7 +113,7 @@
               "node_modules/chart.js/dist/chart.js"
             ],
             "styles": [
-              "src/styles.css",
+              "src/styles.scss",
               "node_modules/font-awesome/css/font-awesome.min.css"
             ],
             "assets": [
@@ -133,6 +133,11 @@
             "exclude": []
           }
         }
+      },
+      "schematics": {
+        "@schematics/angular:component": {
+          "style": "scss"
+        }
       }
     },
     "srt-e2e": {

gulpfile.js

@@ -0,0 +1,31 @@
+/* gulpfile.js */
+
+/**
+* Import uswds-compile
+*/
+const uswds = require("@uswds/compile");
+
+/**
+* USWDS version
+* Set the major version of USWDS you're using
+* (Current options are the numbers 2 or 3)
+*/
+uswds.settings.version = 3;
+
+/**
+* Path settings
+* Set as many as you need
+*/
+uswds.paths.dist.css = './src/assets/uswds/css';
+uswds.paths.dist.img = './src/assets/uswds/img';
+uswds.paths.dist.fonts = './src/assets/uswds/fonts';
+uswds.paths.dist.js = './src/assets/uswds/js';
+uswds.paths.dist.theme = './src/assets/uswds/sass';
+
+/**
+* Exports
+* Add as many as you need
+*/
+exports.init = uswds.init;
+exports.compile = uswds.compile;
+exports.watch = uswds.watch;

package.json

@@ -35,6 +35,7 @@
     "@fullcalendar/core": "^6.1.14",
     "@types/jquery": "^3.5.29",
     "@types/quill": "2.0.14",
+    "@uswds/uswds": "^3.8.0",
     "ag-grid": "^18.1.2",
     "ag-grid-angular": "^29.3.5",
     "angular2-font-awesome": "^1.3.0",
@@ -77,6 +78,7 @@
     "@schematics/angular": "~15.2.8",
     "@types/jasmine": "4.3.2",
     "@types/node": "^20.2.5",
+    "@uswds/compile": "^1.1.0",
     "codelyzer": "^6.0.2",
     "jasmine-core": "~5.0.0",
     "jasmine-spec-reporter": "^7.0.0",
@@ -90,6 +92,7 @@
     "phantomjs-prebuilt": "^2.1.16",
     "protractor": "^7.0.0",
     "puppeteer": "^21.0.1",
+    "schematics-scss-migrate": "^2.3.17",
     "snyk": "^1.1175.0",
     "stream-browserify": "^3.0.0",
     "ts-node": "~10.9.1",

src/app/admin-guard.service.ts

@@ -1,16 +1,19 @@
-import { Injectable } from '@angular/core';
+import { Injectable, inject } from '@angular/core';
 import {
   CanActivate, Router,
   ActivatedRouteSnapshot,
-  RouterStateSnapshot
+  RouterStateSnapshot,
+  CanActivateFn
 } from '@angular/router';
 import { AuthService } from './shared/services/auth.service';
 import {AuthGuard} from './auth-guard.service';
 
 
 
-@Injectable()
-export class AdminGuard implements CanActivate {
+@Injectable({
+  providedIn: 'root'
+})
+export class AdminGuard {
 
 
   /* CONSTRUCTOR */
@@ -40,3 +43,6 @@ export class AdminGuard implements CanActivate {
 }
 
 
+export const AdminGuardFn: CanActivateFn = (next: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean => {
+  return inject(AdminGuard).canActivate(next, state);
+}

src/app/admin-header/admin-header.component.ts

@@ -3,7 +3,7 @@ import {Component, EventEmitter, OnInit, Output} from '@angular/core';
 @Component({
   selector: 'app-admin-header',
   templateUrl: './admin-header.component.html',
-  styleUrls: ['./admin-header.component.css']
+  styleUrls: ['./admin-header.component.scss']
 })
 export class AdminHeaderComponent implements OnInit {
 

src/app/admin/admin-reports/feedback-report-table.component.ts

@@ -5,7 +5,7 @@ import {FeedbackReportService} from './feedback-report.service';
 @Component({
   selector: 'app-admin-feedback',
   templateUrl: './feedback-report-table.component.html',
-  styleUrls: ['./feedback-report-table.component.css']
+  styleUrls: ['./feedback-report-table.component.scss']
 })
 export class FeedbackReportTableComponent implements OnInit {
 

src/app/admin/admin-reports/login-reports.component.ts

@@ -12,7 +12,7 @@ interface TimeSelection {
 @Component({
   selector: 'app-login-reports',
   templateUrl: './login-reports.component.html',
-  styleUrls: ['./login-reports.component.css']
+  styleUrls: ['./login-reports.component.scss']
 })
 
 export class LoginReportsComponent implements OnInit {

src/app/admin/admin.component.ts

@@ -8,7 +8,7 @@ import {Title} from '@angular/platform-browser';
 @Component({
   selector: 'app-admin',
   templateUrl: './admin.component.html',
-  styleUrls: ['./admin.component.css']
+  styleUrls: ['./admin.component.scss']
 })
 export class AdminComponent extends BaseComponent implements OnInit {
 

src/app/admin/metric-downloads/metric-downloads.component.ts

@@ -10,7 +10,7 @@ import {AnalyticsService} from '../../analytics/services/analytics.service';
 @Component({
   selector: 'metric-downloads',
   templateUrl: './metric-downloads.component.html',
-  styleUrls: ['./metric-downloads.component.css']
+  styleUrls: ['./metric-downloads.component.scss']
 })
 export class MetricDownloadsComponent implements OnInit {
 

src/app/analytics/analytics.component.ts

@@ -8,7 +8,7 @@ import {Title} from '@angular/platform-browser';
 @Component({
   selector: 'app-analytics',
   templateUrl: './analytics.component.html',
-  styleUrls: ['./analytics.component.css']
+  styleUrls: ['./analytics.component.scss']
 })
 
 //@Directive({selector: 'baseChart'})

src/app/analytics/donut-chart/donut-chart.component.ts

@@ -9,7 +9,7 @@ import * as $ from 'jquery';
 @Component({
   selector: 'app-donut-chart',
   templateUrl: './donut-chart.component.html',
-  styleUrls: ['../analytics.component.css', './donut-chart.component.css']
+  styleUrls: ['../analytics.component.scss', './donut-chart.component.scss']
 })
 export class DonutChartComponent implements OnInit, OnChanges {
 

src/app/analytics/line-charts/line-charts.component.ts

@@ -6,7 +6,7 @@ import { BaseChartDirective } from 'ng2-charts';
 @Component({
   selector: 'app-line-charts',
   templateUrl: './line-charts.component.html',
-  styleUrls: ['../analytics.component.css', './line-charts.component.css']
+  styleUrls: ['../analytics.component.scss', './line-charts.component.scss']
 })
 export class LineChartsComponent implements OnInit {
 

src/app/analytics/machine-readable/machine-readable.component.ts

@@ -5,7 +5,7 @@ import {BaseChartDirective} from 'ng2-charts';
 @Component({
   selector: 'app-machine-readable',
   templateUrl: './machine-readable.component.html',
-  styleUrls: ['../analytics.component.css', './machine-readable.component.css']
+  styleUrls: ['../analytics.component.scss', './machine-readable.component.scss']
 })
 
 //@Directive({selector: 'baseChart'})

src/app/analytics/prediction-result/prediction-result.component.ts

@@ -8,7 +8,7 @@ import {Globals} from 'globals';
 @Component({
   selector: 'app-prediction-result',
   templateUrl: './prediction-result.component.html',
-  styleUrls: ['../analytics.component.css', './prediction-result.component.css']
+  styleUrls: ['../analytics.component.scss', './prediction-result.component.scss']
 })
 export class PredictionResultComponent implements OnInit {
 

src/app/analytics/scanned-solicitation/scanned-solicitation.component.ts

@@ -10,7 +10,7 @@ import * as _ from 'underscore';
 @Component({
     selector: 'app-scanned-solicitation',
     templateUrl: './scanned-solicitation.component.html',
-    styleUrls: ['../analytics.component.css', './scanned-solicitation.component.css']
+    styleUrls: ['../analytics.component.scss', './scanned-solicitation.component.scss']
 })
 
 //@Directive({selector: 'baseChart'})

src/app/analytics/solicitation-result/solicitation-result.component.ts

@@ -5,7 +5,7 @@ import { getChartLabelPlugin, PLUGIN_ID } from 'chart.js-plugin-labels-dv';
 @Component({
   selector: 'app-solicitation-result',
   templateUrl: './solicitation-result.component.html',
-  styleUrls: ['./solicitation-result.component.css']
+  styleUrls: ['./solicitation-result.component.scss']
 })
 export class SolicitationResultComponent {
 

src/app/analytics/top-agencies-percentage/top-agencies-percentage.component.ts

@@ -7,7 +7,7 @@ import * as _ from 'underscore';
 @Component({
   selector: 'app-top-agencies-percentage',
   templateUrl: './top-agencies-percentage.component.html',
-  styleUrls: ['../analytics.component.css', './top-agencies-percentage.component.css']
+  styleUrls: ['../analytics.component.scss', './top-agencies-percentage.component.scss']
 })
 export class TopAgenciesPercentageComponent implements OnInit {
 

src/app/analytics/top-agencies/top-agencies.component.ts

@@ -5,7 +5,7 @@ import * as _ from 'underscore';
 @Component({
   selector: 'app-top-agencies',
   templateUrl: './top-agencies.component.html',
-  styleUrls: ['../analytics.component.css', './top-agencies.component.css']
+  styleUrls: ['../analytics.component.scss', './top-agencies.component.scss']
 })
 export class TopAgenciesComponent implements OnInit {
 

src/app/analytics/top-srt-actions/top-srt-actions.component.ts

@@ -3,7 +3,7 @@ import { Component, OnInit, Input } from '@angular/core';
 @Component({
   selector: 'app-top-srt-actions',
   templateUrl: './top-srt-actions.component.html',
-  styleUrls: ['./top-srt-actions.component.css']
+  styleUrls: ['./top-srt-actions.component.scss']
 })
 export class TopSrtActionsComponent implements OnInit {
 

src/app/analytics/undetermined-solicitations/undetermined-solicitations.component.ts

@@ -8,7 +8,7 @@ import { getChartLabelPlugin, PLUGIN_ID } from 'chart.js-plugin-labels-dv';
 @Component({
   selector: 'app-undetermined-solicitations',
   templateUrl: './undetermined-solicitations.component.html',
-  styleUrls: ['./undetermined-solicitations.component.css']
+  styleUrls: ['./undetermined-solicitations.component.scss']
 })
 export class UndeterminedSolicitationsComponent implements OnInit {
 

src/app/analytics/user-login/user-login.component.ts

@@ -8,7 +8,7 @@ import { BaseChartDirective } from 'ng2-charts';
 @Component({
   selector: 'app-user-login',
   templateUrl: './user-login.component.html',
-  styleUrls: ['./user-login.component.css']
+  styleUrls: ['./user-login.component.scss']
 })
 export class UserLoginComponent implements OnInit {
 

src/app/app.component.ts

@@ -10,7 +10,7 @@ import {ClientVersionService} from './shared/services/clientVersion.service';
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
-  styleUrls: ['./app.component.css']
+  styleUrls: ['./app.component.scss']
 })
 export class AppComponent implements OnInit {
 

src/app/app.module.ts

@@ -24,6 +24,7 @@ import { DropdownModule } from 'primeng/dropdown';
 import { CalendarModule } from 'primeng/calendar';
 import { TableModule } from 'primeng/table';
 import { TooltipModule } from 'primeng/tooltip';
+import { DialogModule } from 'primeng/dialog';
 
 import { AutoCompleteModule } from 'primeng/autocomplete';
 
@@ -79,6 +80,7 @@ import { AdminHeaderComponent } from './admin-header/admin-header.component';
     HttpClientModule,
     AppRoutingModule,
     TooltipModule,
+    DialogModule,
     AuthModule,
     HomeModule,
     HelpModule,

src/app/app.routing.ts

@@ -6,20 +6,20 @@ import { Routes, RouterModule } from '@angular/router';
 import { AdminComponent } from './admin/admin.component';
 import { AnalyticsComponent } from './analytics/analytics.component';
 import { AuthComponent } from './auth/auth.component';
-import { AuthGuard } from './auth-guard.service';
+import { AuthGuardFn } from './auth-guard.service';
 import { HelpComponent } from './help/help.component';
 import {MasqComponent} from './user/masq/masq.component';
-import {AdminGuard} from './admin-guard.service';
+import {AdminGuardFn} from './admin-guard.service';
 
 
 const routes: Routes = [
   {path: '', redirectTo: 'home', pathMatch: 'full'},
   {path: 'auth', component: AuthComponent},
-  {path: 'admin/accepted', component: AdminComponent, canActivate: [AuthGuard] , data: { isAccepted: true, isRejected: false }},
-  {path: 'admin/masq', component: MasqComponent, canActivate: [AuthGuard] , data: {}},
-  {path: 'admin', component: AdminComponent, canActivate: [AdminGuard] , data: { isAccepted: false, isRejected: false }},
-  {path: 'analytics', component: AnalyticsComponent, canActivate: [AdminGuard]},
-  {path: 'help', component: HelpComponent, canActivate: [AuthGuard]},
+  {path: 'admin/accepted', component: AdminComponent, canActivate: [AuthGuardFn] , data: { isAccepted: true, isRejected: false }},
+  {path: 'admin/masq', component: MasqComponent, canActivate: [AuthGuardFn] , data: {}},
+  {path: 'admin', component: AdminComponent, canActivate: [AdminGuardFn] , data: { isAccepted: false, isRejected: false }},
+  {path: 'analytics', component: AnalyticsComponent, canActivate: [AdminGuardFn]},
+  {path: 'help', component: HelpComponent, canActivate: [AuthGuardFn]},
 ];
 
 @NgModule({

src/app/auth-guard.service.ts

@@ -1,16 +1,19 @@
-import { Injectable } from '@angular/core';
+import { Injectable, inject } from '@angular/core';
 import {
   CanActivate, Router,
   ActivatedRouteSnapshot,
-  RouterStateSnapshot
+  RouterStateSnapshot,
+  CanActivateFn
 } from '@angular/router';
 import { AuthService } from './shared/services/auth.service';
 import { Observable } from 'rxjs';
 
 
 
-@Injectable()
-export class AuthGuard implements CanActivate {
+@Injectable({
+  providedIn: 'root'
+})
+export class AuthGuard  {
 
   /* ATTRIBUTES */
 
@@ -109,3 +112,6 @@ export class AuthGuard implements CanActivate {
 }
 
 
+export const AuthGuardFn: CanActivateFn = (next: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean => {
+  return inject(AuthGuard).canActivate(next, state);
+}

src/app/auth/auth.component.ts

@@ -3,7 +3,7 @@ import { Component, OnInit } from '@angular/core';
 @Component({
   selector: 'app-auth',
   templateUrl: './auth.component.html',
-  styleUrls: ['./auth.component.css']
+  styleUrls: ['./auth.component.scss']
 })
 export class AuthComponent implements OnInit {
 

src/app/auth/userlogin/userlogin.component.ts

@@ -14,7 +14,7 @@ import {Title} from '@angular/platform-browser';
 @Component({
   selector: 'app-userlogin',
   templateUrl: './userlogin.component.html',
-  styleUrls: ['./userlogin.component.css']
+  styleUrls: ['./userlogin.component.scss']
 })
 export class UserloginComponent extends BaseComponent implements OnInit {
 

src/app/header/header.component.ts

@@ -12,7 +12,7 @@ import { GoogleAnalyticsService } from 'ngx-google-analytics';
 @Component({
   selector: 'app-header',
   templateUrl: './header.component.html',
-  styleUrls: ['./header.component.css']
+  styleUrls: ['./header.component.scss']
 })
 export class HeaderComponent implements OnInit {
 

src/app/help/contact-us/contact-us.component.ts

@@ -10,7 +10,7 @@ import {Title} from '@angular/platform-browser';
 @Component({
   selector: 'app-contact-us',
   templateUrl: './contact-us.component.html',
-  styleUrls: ['./contact-us.component.css']
+  styleUrls: ['./contact-us.component.scss']
 })
 export class ContactUsComponent extends BaseComponent implements OnInit {