GT-2095 - Support creating & managing collections Tool Groups

README.md

@@ -18,6 +18,7 @@ Run `ng build` to build the project. The build artifacts will be stored in the `
 ## Running unit tests
 
 Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
+If you want to only run a single test on a file, change the file's root `describe` to `fdescribe` and Jamsine will only test that file. 
 
 ## Running end-to-end tests
 

package.json

@@ -11,6 +11,7 @@
     "test": "ng test",
     "test:codecov": "ng test --watch=false --browsers=ChromeHeadless --code-coverage",
     "lint": "ng lint",
+    "lint:fix": "ng lint --fix",
     "lint:type": "ng lint --type-check",
     "e2e": "ng e2e",
     "prettier:check": "prettier '{{src,e2e,__{tests,mocks}__}/**/*.{js,json,ts,tsx,html},./*.{js,json,ts,tsx,yml,html}}' --list-different",
@@ -33,7 +34,9 @@
     "angular2-uuid": "1.1.1",
     "components-font-awesome": "4.7.0",
     "core-js": "2.6.12",
+    "countries-list": "^3.0.5",
     "jsonapi-datastore": "0.4.0-beta",
+    "lodash": "^4.17.21",
     "ng2-ace-editor": "0.3.9",
     "ng2-file-upload": "1.4.0",
     "ngx-pipes": "2.7.8",

src/app/_tests/toolGroupMocks.ts

@@ -0,0 +1,113 @@
+import { Language } from '../models/language';
+import { Resource } from '../models/resource';
+import { CountriesType, ToolGroup } from '../models/tool-group';
+
+export class ToolGroupMocks {
+  languageUKMock = {
+    code: 'en-GB',
+    name: 'English (British)',
+    id: 5,
+    customPages: null,
+    canConfirmDelete: null,
+  } as Language;
+
+  languageUSMock = {
+    code: 'en-US',
+    name: 'English (American)',
+    id: 2,
+    customPages: null,
+    canConfirmDelete: null,
+  } as Language;
+
+  countryUKMock = {
+    code: 'GB',
+    name: 'United Kingdom',
+    native: 'United Kingdom',
+    phone: [44],
+    continent: 'EU',
+    capital: 'London',
+    currency: ['GBP'],
+    languages: ['en'],
+  } as CountriesType;
+
+  countryUSMock = {
+    code: 'US',
+    name: 'United States',
+    native: 'United States',
+    phone: [1],
+    continent: 'NA',
+    capital: 'Washington D.C.',
+    currency: ['USD', 'USN', 'USS'],
+    languages: ['en'],
+  } as CountriesType;
+
+  getLanguagesResponse = [
+    {
+      code: 'ar-SA',
+      name: 'Arabic (Saudi Arabia)',
+      id: 9,
+      customPages: null,
+      canConfirmDelete: null,
+    },
+    this.languageUKMock,
+    this.languageUSMock,
+  ] as Language[];
+
+  toolGroupFullDetails = () => {
+    const resource = new Resource();
+    resource.id = 13;
+    resource.name = 'Test Resource';
+
+    return ({
+      id: 8,
+      'suggestions-weight': '3.0',
+      name: 'Test Tool Group',
+      'rules-country': [
+        {
+          id: 1,
+          'negative-rule': false,
+          'tool-group': {
+            id: 8,
+          },
+          countries: [this.countryUKMock.code, this.countryUSMock.code],
+        },
+      ],
+      'rules-language': [
+        {
+          id: 2,
+          'negative-rule': true,
+          'tool-group': {
+            id: 8,
+          },
+          languages: [this.languageUKMock.code, this.languageUSMock.code],
+        },
+      ],
+      'rules-praxis': [
+        {
+          id: 3,
+          'negative-rule': false,
+          'tool-group': {
+            id: 8,
+          },
+          confidence: ['1', '2'],
+          openness: ['3'],
+        },
+      ],
+      tools: [
+        {
+          id: 17,
+          'suggestions-weight': '12',
+          suggestionsWeight: '12',
+          tool: {
+            ...resource,
+            id: 15,
+            name: 'Resource Name',
+          },
+          'tool-group': {
+            id: 8,
+          },
+        },
+      ],
+    } as unknown) as ToolGroup;
+  };
+}

src/app/app-routing.module.ts

@@ -7,6 +7,7 @@ import { AttachmentsComponent } from './components/attachments/attachments.compo
 import { AuthGuardService } from './service/auth-guard/auth-guard.service';
 import { OktaLoginComponent } from './components/okta-login/okta-login.component';
 import { MyAccountComponent } from './components/my-account/my-account.component';
+import { ToolGroupsComponent } from './components/tool-groups/tool-groups.component';
 
 const routes: Routes = [
   { path: '', redirectTo: '/translations', pathMatch: 'full' },
@@ -30,6 +31,11 @@ const routes: Routes = [
     component: MyAccountComponent,
     canActivate: [AuthGuardService],
   },
+  {
+    path: 'tool-groups',
+    component: ToolGroupsComponent,
+    canActivate: [AuthGuardService],
+  },
   {
     path: 'auth/okta',
     component: OktaLoginComponent,

src/app/app.component.html

@@ -7,6 +7,9 @@ <h5>{{ title }}</h5>
     <a *ngIf="sessionReady$ | async" routerLink="/attachments" class="nav-link"
       >Attachments</a
     >
+    <a *ngIf="sessionReady$ | async" routerLink="/tool-groups" class="nav-link"
+      >Tool Groups</a
+    >
     <a *ngIf="sessionReady$ | async" routerLink="/languages" class="nav-link"
       >Languages</a
     >

src/app/app.module.ts

@@ -54,6 +54,15 @@ import { OAuthModule } from 'angular-oauth2-oidc';
 import { HttpClientModule } from '@angular/common/http';
 import { OktaLoginErrorComponent } from './components/okta-login-error/okta-login-error.component';
 import { MyAccountComponent } from './components/my-account/my-account.component';
+import { ToolGroupsComponent } from './components/tool-groups/tool-groups.component';
+import { ToolGroupService } from './service/tool-group/tool-group.service';
+import { CreateToolGroupComponent } from './components/edit-tool-group/create-tool-group/create-tool-group.component';
+import { ToolGroupComponent } from './components/tool-group/tool-group.component';
+import { UpdateToolGroupComponent } from './components/edit-tool-group/update-tool-group/update-tool-group.component';
+import { ToolGroupRuleComponent } from './components/edit-tool-group-rule/tool-group-rule.component';
+import { ToolGroupRuleReuseableComponent } from './components/edit-tool-group-rule-reuseable/tool-group-rule-reuseable.component';
+import { ToolGroupToolReuseableComponent } from './components/edit-tool-group-tool-reuseable/tool-group-tool-reuseable.component';
+import { ToolGroupResourceComponent } from './components/edit-tool-group-resource/tool-group-resource.component';
 
 @NgModule({
   declarations: [
@@ -82,6 +91,14 @@ import { MyAccountComponent } from './components/my-account/my-account.component
     OktaLoginComponent,
     OktaLoginErrorComponent,
     MyAccountComponent,
+    ToolGroupsComponent,
+    CreateToolGroupComponent,
+    ToolGroupComponent,
+    UpdateToolGroupComponent,
+    ToolGroupRuleComponent,
+    ToolGroupRuleReuseableComponent,
+    ToolGroupResourceComponent,
+    ToolGroupToolReuseableComponent,
   ],
   imports: [
     AceEditorModule,
@@ -113,6 +130,7 @@ import { MyAccountComponent } from './components/my-account/my-account.component
     CustomManifestService,
     UserAuthSessionService,
     AttributeTranslationService,
+    ToolGroupService,
   ],
   entryComponents: [
     UpdateResourceComponent,
@@ -130,6 +148,10 @@ import { MyAccountComponent } from './components/my-account/my-account.component
     LoginComponent,
     MultipleDraftGeneratorComponent,
     OktaLoginErrorComponent,
+    CreateToolGroupComponent,
+    UpdateToolGroupComponent,
+    ToolGroupRuleComponent,
+    ToolGroupResourceComponent,
   ],
   bootstrap: [AppComponent],
 })

src/app/components/edit-tool-group-resource/tool-group-resource.component.html

@@ -0,0 +1,49 @@
+<div class="modal-header">
+  <h5>Connect Tools</h5>
+</div>
+<div class="modal-body">
+  <div
+    class="tools"
+    style="
+      max-height: calc(100vh - 350px);
+      overflow-y: auto;
+      overflow-x: hidden;
+    "
+  >
+    <admin-tool-group-tool-reuseable
+      *ngFor="let tool of tools"
+      [tool]="tool"
+      [resources]="resources"
+      (updatedToolEmit)="updateTool($event)"
+      (deleteTool)="deleteTool($event)"
+    ></admin-tool-group-tool-reuseable>
+  </div>
+
+  <button (click)="addResource()" class="btn btn-default">Add Tool</button>
+
+  <div class="row">
+    <div class="col">
+      <ngb-alert type="info" [dismissible]="false" *ngIf="saving">
+        Saving...
+      </ngb-alert>
+    </div>
+  </div>
+
+  <div class="row">
+    <div class="col">
+      <ngb-alert
+        type="danger"
+        class="mt-2"
+        [dismissible]="false"
+        *ngFor="let error of errorMessage"
+      >
+        {{ error }}
+      </ngb-alert>
+    </div>
+  </div>
+</div>
+
+<div class="modal-footer" style="justify-content: space-between">
+  <button (click)="cancel()" class="btn btn-danger">Cancel</button>
+  <button (click)="createOrUpdate()" class="btn btn-success">Save</button>
+</div>