LevelsBeyond Collections

This library was generated with Angular CLI version 11.2.14.

Code scaffolding

Run ng generate component component-name --project collections to generate a new component. You can also use ng generate directive|pipe|service|class|guard|interface|enum|module --project collections.

Lint

Run ng lint lb-collections to lint the project.

Build

Run ng build lb-collections to build the project. The build artifacts will be stored in the dist/ directory.

Publishing

After building your library with ng build lb-collections, go to the dist folder cd dist/lb-collections and run npm publish.

Running unit tests

Run ng test lb-collections to execute the unit tests via Karma.

Further help

To get more help on the Angular CLI use ng help or go check out the Angular CLI Overview and Command Reference page.

Getting Started

1. Library Installation

npm install @levelsbeyond/collections

Library postinstall, update script for package.json

"scripts": {
    "postinstall": "node ./node_modules/@levelsbeyond/collections/scripts/fix-angular-11-casl-webpack.js && ngcc --properties es2015 browser module main",
}

2. Setting Fonts

Add fonts for index.html

  <link rel="preconnect" href="https://fonts.gstatic.com" />
  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet" />
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons|Material+Icons+Round" rel="stylesheet" />
  <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300&display=swap" rel="stylesheet" />

3. Setting Css

Add css for angular.json

"styles": [
  "node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
  "node_modules/bootstrap/dist/css/bootstrap.min.css",
  "node_modules/ngx-toastr/toastr.css",
  "node_modules/ng-drag-drop/style.css",
  "src/styles.scss"
],

Add library styles into styles.scss

@import '~@levelsbeyond/collections/scss/styles';

4. Setting i18n assets

Update angular.json to copy i18n to assets

"build": {
  "options": {
    "assets": [
      {
        "glob": "**/*",
        "input": "node_modules/@levelsbeyond/collections/i18n/",
        "output": "/assets/i18n/"
      }
    ]
  }
}

5. Setting Environments

environment.ts

import { IEnvironment } from '@levelsbeyond/collections';

const levelsbeyondHost = 'https://permissions.dev.l5.levelsbeyond.io';
const contentServiceHost = 'https://content.dev.l5.levelsbeyond.io';
const personalizationHost = 'https://personalization.dev.l5.levelsbeyond.io';
const collectionServiceHost = 'https://collections.dev.l5.levelsbeyond.io';
const workflowServiceHost = 'https://workflow.dev.l5.levelsbeyond.io';
const assetServiceHost = 'https://assets.dev.l5.levelsbeyond.io';
const metadataServiceHost = 'https://metadata.dev.l5.levelsbeyond.io';

export const environment: IEnvironment = {
  production: false,
  getPersonalizationUrl: (path: string) => {
    if (path.startsWith('/')) {
      return `${personalizationHost}${path}`;
    } else {
      return `${personalizationHost}/${path}`;
    }
  },
  getApiUrl: (path: string) => {
    if (path.startsWith('/')) {
      return `${levelsbeyondHost}${path}`;
    } else {
      return `${levelsbeyondHost}/${path}`;
    }
  },
  getContentApiUrl: (path: string) => {
    return path.startsWith('/') ? `${contentServiceHost}${path}` : `${contentServiceHost}/${path}`;
  },
  getCollectionApiUrl: (path: string) => {
    return path.startsWith('/') ? `${collectionServiceHost}${path}` : `${collectionServiceHost}/${path}`;
  },
  getWorkflowApiUrl: (path: string) => {
    return path.startsWith('/') ? `${workflowServiceHost}${path}` : `${workflowServiceHost}/${path}`;
  },
  getGoogleAnalyticsMeasurementId: () => {
    return 'G-NTMMME03S4';
  },
  getShareUrl: (id: string) => {
    return collectionServiceHost + '/collection/' + id;
  },
  getAssetApiUrl: (path: string) => {
    return path.startsWith('/') ? `${assetServiceHost}${path}` : `${assetServiceHost}/${path}`;
  },
  getMetadataApiUrl: (path: string) => {
    return path.startsWith('/') ? `${metadataServiceHost}${path}` : `${metadataServiceHost}/${path}`;
  }
};

6. Setting app.module.ts

imports: [
  LevelsBeyondCollectionsModule.forRoot(environment),
  StoreModule.forRoot(lbRootReducer, {
    metaReducers: getMetaReducers(environment.production),
    runtimeChecks: {
      strictStateImmutability: true,
      strictActionImmutability: true,
      strictStateSerializability: false,
      strictActionSerializability: true
    }
  }),
  EffectsModule.forRoot([]),
],
providers: [
  {
    provide: APP_INITIALIZER,
    useFactory: lbTranslateFactory,
    deps: [TranslateService],
    multi: true
  }
]

7. Render Sidebar Collection Tabs

app.module.html

<app-sidebar-collections-tab></app-sidebar-collections-tab>

8. LIST COMPONENTS

8.1 Create/Edit/Duplicate collection dialog

Overview

The create-sub/edit/duplicate collection share the same dialog. Which function the dialog going to be used in is based on what is being passed in to the dialog.

API

You need to import CreateCollectionFormComponent from the library and MatDialog service from Angular Material import { CreateCollectionFormComponent } from '@levelsbeyond/collections'; import {MatDialogModule} from '@angular/material/dialog';

| Name | Description | | :-------------------------------------: | :--------------------------------------: | | collectionId: string | Id of collection user wants to edit. | | parentCollectionId: string | Id of collections's parent's collection. | | collectionToDuplicate: ICollectionModel | Collection user wants to duplicate. |

EXAMPLE

Using with file *.ts

-Create new sub collection mode: passing the Id of the collection we want to create a sub collection for as data, collectionId is required and must be '' to enable create mode, parentCollectionId is optional and will decide if the created collection is children of parentCollectionId or not.

import { CreateCollectionFormComponent } from '@levelsbeyond/collections';

export class ExampleComponent { constructor( public dialog: MatDialog, ) {};

this.dialog.open(CreateCollectionFormComponent, { width: '40%', panelClass: 'create-collection-dialog-container', height: 'auto', disableClose: true, data: {parentCollectionId,collectionId} });

}

-Edit collection mode: passing the id of the collection we want to edit as data, parentCollectionId is required and can be '' or falsy values to enable edit mode.

import { CreateCollectionFormComponent } from '@levelsbeyond/collections';

export class ExampleComponent { constructor( public dialog: MatDialog, ) {};

this.dialog.open(CreateCollectionFormComponent, { width: '40%', panelClass: 'create-collection-dialog-container', height: 'auto', disableClose: true, data: {parentCollectionId,collectionId} });

}

-Duplicate collection mode: passing the collection we want to duplicate as data, parentCollectionId is required and can be '' or falsy values to enable duplicate mode.

import { CreateCollectionFormComponent } from '@levelsbeyond/collections';

export class ExampleComponent { constructor( public dialog: MatDialog, ) {};

this.dialog.open(CreateCollectionFormComponent, { width: '40%', panelClass: 'create-collection-dialog-container', height: 'auto', disableClose: true, data: {parentCollectionId, collectionToDuplicate} });

}

8.2 Create-smart collection dialog

Overview

The Create-smart collection dialog allow the user to create smart collection.

API

You need to import SmartCollectionFormComponent from the library and MatDialog service from Angular Material import { SmartCollectionFormComponent } from '@levelsbeyond/collections'; import {MatDialogModule} from '@angular/material/dialog';

| Name | Description | | :----------------------------------: | :---------------------------------------------------: | | selectedCollection: ICollectionModel | Collection user wants to convert to smart. | | isEdit: boolean | Either its edit mode of an existing smart collection. |

EXAMPLE

Using with file *.ts

import { SmartCollectionFormComponent } from '@levelsbeyond/collections';

export class ExampleComponent { constructor( public dialog: MatDialog, ) {};

this.dialog.open(SmartCollectionFormComponent, { width: '426px', data: { selectedCollection, isEdit }, disableClose: true });

}

8.3 Collection-Gallery

Overview

The Gallery collection component can be used to display the list of collection recently added or recently accessed.The Gallery collection component can be used to display the list of collection recently added or recently accessed.

• Collections displayed in Recently Added : These will display the collections the user has access to which have been created in the system (only from the ALL tab) in the period of time stipulated in the filter. By default last 24h is selected.

• Collections displayed in Recently Accessed : These will be the collections the user has accessed in the period of time stipulated in the filter. By accessed we mean :

○ Collections the user has opened and where he viewed some content ○ Collections the user added/removed content to/from ○ Collections the user modified some metadata

The user can click on the right and left arrows to see more collections. The right and left arrows will not be displayed if there is no more collection to display.

API

You need add AppLayoutService into app module from @levelsbeyond/collections

Properties

| Name | Description | | :------------------------------: | :----------------------------------------------------------------: | | type: recentAdded/recentAccessed | Display collections recently added or accessed based on type input | | title: string | Title of list collection |

Method

| Name | Description | | :-------------------------------: | :------------------------------------------: | | clickCollection(id: string) | Event when user click in a collection | | doubleClickCollection(id: string) | Event when user double click in a collection |

EXAMPLE

<app-collections-gallery
  type="recentAccessed"
  title="Title"
  (doubleClickCollection)="doubleClickCollection($event)"
  (clickCollection)="clickCollection($event)"
></app-collections-gallery>

8.4 Share Collection Dialog

Overview

The share collection dialog allows user can share collections with other users or teams. A user can search for teams and users they want to share with. With 2 options to help process sharing it quickly: share with sub collections and share with sub assets.

API

You need to import ShareCollectionFormComponent from the library and MatDialog service from Angular Material import { ShareCollectionFormComponent } from '@levelsbeyond/collections'; import {MatDialogModule} from '@angular/material/dialog';

| Name | Description | | :----------: | :-----------------------------------: | | data: string | Id of collection user wants to share. |

EXAMPLE

Using with file *.ts

import { ShareCollectionFormComponent }  from '@levelsbeyond/collections';

export class ExampleComponent {
  constructor(
    public dialog: MatDialog,
  ) {};

    this.dialog.open(ShareCollectionFormComponent, {
      panelClass: 'share-collection-dialog-container',
      disableClose: true,
      data: id
   });
}