feat(content-categories): show categories list with basic implementation

kaltura · Aug 10, 2017 · c220a6a · c220a6a
1 parent 27bb9b4
commit c220a6a
Show file tree

Hide file tree

Showing 20 changed files with 675 additions and 13 deletions.
diff --git a/...ons/content-categories-app/categories/bulk-actions/categories-bulk-actions.component.html b/...ons/content-categories-app/categories/bulk-actions/categories-bulk-actions.component.html
@@ -0,0 +1,9 @@
+<div class="kBulkActions">
+  <button pButton icon="kIcontrash" class="kButtonDanger kBulkDeleteBtn"></button>
+  <button class="kButtonDefault kBulkActionsBtn" icon="kIcondropdown_arrow_bottom" iconPos="right" pButton label="{{'applications.content.categories.bulkActions' | translate}}" ></button>
+</div>
+
+
+
+
+
diff --git a/...ons/content-categories-app/categories/bulk-actions/categories-bulk-actions.component.scss b/...ons/content-categories-app/categories/bulk-actions/categories-bulk-actions.component.scss
@@ -0,0 +1,13 @@
+.kBulkActions{
+  display: flex;
+  align-items: center;
+  .kBulkDeleteBtn{
+    margin-right: 10px;
+    width: 44px;
+    font-size: 18px;
+  }
+  .kBulkActionsBtn{
+    font-weight: 400;
+    font-size: 15px;
+  }
+}
diff --git a/...tions/content-categories-app/categories/bulk-actions/categories-bulk-actions.component.ts b/...tions/content-categories-app/categories/bulk-actions/categories-bulk-actions.component.ts
@@ -0,0 +1,23 @@
+import { AppLocalization } from '@kaltura-ng/kaltura-common';
+import { Component, Input, Output, EventEmitter, OnInit, OnDestroy } from '@angular/core';
+@Component({
+  selector: 'kCategoriesBulkActions',
+  templateUrl: './categories-bulk-actions.component.html',
+  styleUrls: ['./categories-bulk-actions.component.scss']
+})
+export class CategoriesBulkActionsComponent implements OnInit, OnDestroy {
+
+  @Input() selectedCategories: any[];
+
+  @Output() onBulkChange = new EventEmitter<{reload: boolean}>();
+
+  constructor(private _appLocalization: AppLocalization, ) {
+  }
+
+  ngOnInit(){
+  }
+
+  ngOnDestroy(){
+
+  } 
+}
diff --git a/src/applications/content-categories-app/categories/categories-components-list.ts b/src/applications/content-categories-app/categories/categories-components-list.ts
@@ -1,5 +1,11 @@
+import { CategoriesTableComponent } from './categories-table.component';
 import { CategoriesListComponent } from "./categories-list.component";
+import { MaxCategoriesPipe } from './pipes/max-categories.pipe';
+import { CategoriesBulkActionsComponent } from './bulk-actions/categories-bulk-actions.component';
 
 export const CategoriesComponentsList = [
-    CategoriesListComponent
+    CategoriesListComponent,
+    CategoriesTableComponent,
+    MaxCategoriesPipe,
+    CategoriesBulkActionsComponent
 ];
diff --git a/src/applications/content-categories-app/categories/categories-list.component.html b/src/applications/content-categories-app/categories/categories-list.component.html
@@ -1,3 +1,37 @@
-<div>
-  Hello List
-</div>
+<k-area-blocker [showLoader]="_isBusy" [message]="_blockerMessage">
+  <div class="kCategories kOverrideFAIcons">
+    <div #categoriesTableHolder class="kCategoriesHolder kContent">
+      <div class="kCategoriesTableFilters">
+        <button pButton type="button" label="{{'applications.content.categories.addCategory' | translate}}" class="kButtonBranded kAddCategoryBtn"></button>
+        <span class="kSelectedEntriesNum" *ngIf="_categoriesTotalCount">
+          {{_categoriesTotalCount}} {{'applications.content.categories.categories' | translate}}
+        </span>
+        <div [class.kHidden]="!_selectedCategories.length" class="kBulkOperations">
+          <span class="kSelectedEntriesLabel">• {{_selectedCategories.length}} {{'applications.content.categories.selected' | translate}}</span>
+          <kCategoriesBulkActions [selectedCategories]="_selectedCategories"></kCategoriesBulkActions>
+          <!-- <a class="kBulkCancel" (click)="clearSelection()">{{'applications.content.entries.cancel' | translate}}</a> -->
+        </div>
+        <div [class.kHidden]="_selectedCategories.length" class="kFilters">
+          <input type="text" pInputText class="kSearchInput" placeholder="{{'applications.content.categories.search' | translate}}">
+          <div #categoriesFilterBtn class="kCategoriesFilter">
+            <i class="kIconfolder"></i>
+            <span>{{'applications.content.categories.filterCategories' | translate}}</span><i class="kIcondropdown_arrow_bottom dropdown"></i>
+          </div>
+          <div #refineBtn class="kRefine">
+            <i class="kIconfilter"></i>
+            <span>{{'applications.content.categories.refine' | translate}}</span>
+            <i class="kIcondropdown_arrow_bottom dropdown"></i>
+          </div>
+        </div>
+        <button pButton class="kButtonDefault kRefreshBtn small" type="text" icon="kIconrefresh" [kTooltip]="'applications.content.categories.refresh' | translate"></button>
+      </div>
+      <kCategoriesTable class="kCategoriesTable" [categories]="_categories"></kCategoriesTable>
+
+      <div class="kCategoriesTableFooter" #footer *ngIf="_categoriesTotalCount">
+        <p-paginator [totalRecords]="_categoriesTotalCount | kMaxCategories" [rowsPerPageOptions]="[25,50,75,100]"></p-paginator>
+        <span class="kPaginatorShowRowsLabel">{{'applications.content.paginator.showRows' | translate}}</span>
+      </div>
+    </div>
+  </div>
+
+</k-area-blocker>
diff --git a/src/applications/content-categories-app/categories/categories-list.component.scss b/src/applications/content-categories-app/categories/categories-list.component.scss
@@ -0,0 +1,216 @@
+@import 'app-theme/_variables.scss';
+
+.kCategories {
+  font-size: 15px;
+  background-color: $appBkgColor;
+  height: $contentArea;
+  padding-top: 30px;
+  width: 100%;
+  min-width: $minAppWidth;
+  box-sizing: border-box;
+  display: flex;
+  flex-flow: row wrap;
+  margin: 0px;
+  .kCategoriesHolder {
+    height: 100%;
+    border: none;
+    position: relative;
+    display: flex;
+    flex-direction: column;
+  }
+  .kRefreshBtn {
+    font-size: 24px;
+    border: none;
+    min-width: inherit;
+    margin-right: 16px;
+    width: 40px;
+    outline: 0;
+    color: $kGrayscale3;
+    &:active {
+      box-shadow: none;
+      transform: rotate(45deg);
+    }
+    &:hover {
+      background-color: #ffffff;
+      color: $kPrimary;
+    }
+  }
+  .kCategoriesTableFilters {
+    color: $kGrayscale1;
+    width: 100%;
+    height: 66px;
+    background-color: white;
+    flex: 0 0 auto;
+    align-items: center;
+    margin-left: 0px;
+    border-bottom: none;
+    border-top-left-radius: 5px;
+    border-top-right-radius: 5px;
+    display: flex;
+    .kSelectedEntriesNum {
+      padding-left: 16px;
+    }
+  }
+  .kCategoriesTableTags {
+    width: 100%;
+    height: 50px;
+    background-color: #f3f3f3;
+    border: 1px solid grey;
+    flex: 0 0 50px;
+  }
+  .kCategoriesTableFooter {
+    width: 100%;
+    height: 34px;
+    background-color: white;
+    border-top: 1px solid $kGrayscale6;
+    position: relative;
+    box-sizing: border-box;
+    flex: 0 0 auto;
+    padding: 0 14px 28px;
+    display: block;
+  }
+  .kCategoriesTable {
+    border: none;
+    position: relative;
+    background-color: white;
+    flex: 1 1 auto;
+  }
+  .kSelectedEntriesLabel {
+    font-weight: bold;
+    margin-right: 36px;
+    margin-left: 5px;
+  }
+  .kSearchInput {
+    //background: url(../../../styles/assets/magnifier.png) no-repeat 7px 9px;
+    background-color: $kGrayscale6;
+    padding-left: 30px;
+    margin-right: 8px;
+    &:focus {
+      background-color: white;
+    }
+  }
+  .kBulkOperations {
+    width: 400px;
+    display: flex;
+    align-items: center;
+  }
+  .kPaginatorShowRowsLabel {
+    color: $kGrayscale1;
+    position: absolute;
+    top: 7px;
+    right: 80px;
+  }
+	.kAddCategoryBtn {
+		margin-left: 14px;
+		height: 36px;
+	}
+
+  .kBulkCancel {
+    margin-left: 10px;
+  }
+  .kBulkDeleteBtn {
+    margin-right: 10px;
+    width: 44px;
+    font-size: 18px;
+  }
+  .kBulkActionsBtn {
+    font-weight: 400;
+    font-size: 15px;
+  }
+  .kFilters {
+    display: flex;
+    margin-left: auto;
+  }
+  .kCategoriesFilter {
+    border: 1px solid $kGrayscale4;
+    border-radius: 4px;
+    display: flex;
+    background-color: #ffffff;
+    height: 32px;
+    align-items: center;
+    cursor: pointer;
+    color: $kGrayscale1;
+    width: 180px;
+    position: relative;
+    margin-right: 8px;
+    i {
+      margin-right: 12px;
+      margin-left: 8px;
+      color: $kGrayscale4;
+      &.dropdown {
+        font-size: 10px;
+      }
+    }
+    &:hover {
+      color: $kPrimary;
+      i {
+        color: $kPrimary;
+      }
+      i.kIcondropdown_arrow_bottom.dropdown {
+        color: $kGrayscale3;
+      }
+    }
+    .dropdown {
+      position: absolute;
+      right: 4px;
+      top: 12px;
+    }
+  }
+  .kRefine {
+    @extend .kCategoriesFilter;
+    width: 140px;
+  }
+  .kHidden {
+    visibility: hidden;
+    width: 0px;
+    height: 0px;
+  }
+  .kTagContent {
+    display: flex;
+    align-items: center;
+  }
+  .kTagLabel {
+    flex: 0 0 auto;
+    user-select: none;
+    cursor: default;
+  }
+  .kTagRemove {
+    flex: 0 0 auto;
+    margin-top: 2px;
+    margin-left: 8px;
+    padding: 4px;
+    cursor: pointer;
+    font-size: 12px;
+    &:hover {
+      background-color: rgba(255, 255, 255, 0.3);
+      border: 0px solid rgba(255, 255, 255, 0.3);
+      border-radius: 3px;
+    }
+  }
+}
+
+:host /deep/ span.ui-button-icon-left.fa.kIcontrash {
+  margin-left: -.5em;
+}
+
+:host /deep/ .ui-tree {
+  width: 380px;
+}
+
+:host /deep/ .ui-button-icon-right.kIcondropdown_arrow_bottom {
+  font-size: 10px;
+  margin-right: 2px;
+  pointer-events: none;
+}
+
+:host /deep/ .ui-tieredmenu.ui-menu {
+  width: 250px;
+  .ui-submenu-icon {
+    font-size: 10px;
+    margin-top: 3px;
+  }
+}
+
+:host /deep/ .ui-button-icon-only .fa {
+  margin-left: -.5em;
+}
diff --git a/src/applications/content-categories-app/categories/categories-list.component.ts b/src/applications/content-categories-app/categories/categories-list.component.ts
@@ -1,20 +1,41 @@
+import { ISubscription } from 'rxjs/Subscription';
+import { KalturaCategory } from 'kaltura-typescript-client/types/KalturaCategory';
 import { Component, Input, OnInit, OnDestroy } from '@angular/core';
 import { Router } from '@angular/router';
+import { AreaBlockerMessage } from "@kaltura-ng/kaltura-ui";
+import { CategoriesTableComponent } from "./categories-table.component";
+import { CategoriesService, Categories } from './categories.service';
 
 @Component({
     selector: 'kCategoriesList',
     templateUrl: './categories-list.component.html',
-    styleUrls: ['./categories-list.component.scss']
+    styleUrls: ['./categories-list.component.scss'],
+    providers: [CategoriesService]
 })
 
 export class CategoriesListComponent implements OnInit, OnDestroy {
 
-    constructor(private router: Router) {
+    public _isBusy = false
+    public _blockerMessage: AreaBlockerMessage = null;
+    public _selectedCategories: KalturaCategory[] = [];    
+    public _categories : KalturaCategory[] = [];
+    public _categoriesTotalCount : number = null;
+    private categoriesSubscription: ISubscription;
+
+
+    constructor(private _categoriesService: CategoriesService, private router: Router) {
     }
 
     ngOnInit() {
+        this.categoriesSubscription = this._categoriesService.categories$.subscribe(
+            (data) => {
+                this._categories = data.items;
+                this._categoriesTotalCount = data.totalCount;
+            }
+        );
     }
 
     ngOnDestroy() {
+        this.categoriesSubscription.unsubscribe();
     }
 }
diff --git a/src/applications/content-categories-app/categories/categories-table.component.html b/src/applications/content-categories-app/categories/categories-table.component.html
@@ -0,0 +1,16 @@
+<k-area-blocker kFillHeight [showLoader]="(categoriesService.state$ | async)?.loading || this._deferredLoading" [message]="_blockerMessage">
+  <div class="kCategoriesTable" [class.noResults]="!_categories.length">
+    <p-dataTable #dataTable [value]="_categories" scrollable="true" scrollHeight="100%" dataKey="id">      
+      <p-column [style]="{'width':'44px', 'padding-left': '14px'}" selectionMode="multiple"></p-column>
+      <p-column field="name" header="Name" [sortable]="true" [style]="{'width':'100px'}"></p-column>
+      <p-column field="id" header="ID" [sortable]="false" [style]="{'width':'100px'}"></p-column>      
+      <p-column field="createdAt" header="Created On" [sortable]="true" [style]="{'width':'140px'}">
+				<ng-template let-col let-entry="rowData" pTemplate="body">
+					<span>{{entry[col.field] | kDate}}</span>
+				</ng-template>
+			</p-column>
+      <p-column field="directSubCategoriesCount" header="Sub - Categories" [sortable]="true" [style]="{'width':'100px'}"></p-column>
+      <p-column field="entriesCount" header="Entries" [sortable]="true" [style]="{'width':'100px'}"></p-column>
+    </p-dataTable>
+  </div>
+</k-area-blocker>