feat: Add Grid and Calendar views

src/kc_angular/package.json

@@ -31,6 +31,11 @@
     "@angular/platform-browser-dynamic": "^13.1.1",
     "@angular/router": "~13.1.1",
     "@angular/youtube-player": "^13.1.1",
+    "@fullcalendar/angular": "^5.10.2",
+    "@fullcalendar/daygrid": "^5.10.1",
+    "@fullcalendar/interaction": "^5.10.1",
+    "@fullcalendar/list": "^5.10.1",
+    "@fullcalendar/timegrid": "^5.10.1",
     "chokidar": "^3.5.2",
     "d3": "^7.2.1",
     "eslint": "^8.5.0",

src/kc_angular/src/app/app.module.ts

@@ -94,7 +94,6 @@ import {TooltipModule} from "primeng/tooltip";
 import {TreeModule} from "primeng/tree";
 import {TreeSelectModule} from "primeng/treeselect";
 import {YouTubePlayerModule} from "@angular/youtube-player";
-
 import {ViewportHeaderComponent} from "./components/knowledge-source-components/ks-viewport-components/viewport-header/viewport-header.component";
 import {FileViewComponent} from "./components/knowledge-source-components/ks-viewport-components/file-viewport/file-view.component";
 import {BrowserViewComponent} from "./components/knowledge-source-components/ks-viewport-components/browser-viewport/browser-view.component";
@@ -111,6 +110,8 @@ import {KsDataviewComponent} from './components/knowledge-source-components/ks-d
 import {ProjectCardComponent} from './components/project-components/project-card/project-card.component';
 import {TopicListPipe} from './pipes/text-pipes/topic-list-pipe/topic-list.pipe';
 import {AccordionModule} from "primeng/accordion";
+import {FullCalendarModule} from "@fullcalendar/angular";
+import {TagModule} from "primeng/tag";
 
 @NgModule({
   declarations: [
@@ -206,7 +207,10 @@ import {AccordionModule} from "primeng/accordion";
     SliderModule,
     InputSwitchModule,
     DockModule,
-    AccordionModule
+    AccordionModule,
+    FullCalendarModule,
+    FullCalendarModule,
+    TagModule
   ],
   providers: [
     SettingsService,

src/kc_angular/src/app/components/knowledge-source-components/ks-canvas/knowledge-canvas.component.html

@@ -54,6 +54,7 @@
                    [projectTreeNodes]="projectTreeNodes"
                    (onPreview)="onKsPreview($event)"
                    (onOpen)="onKsOpen($event)"
+                   (onEdit)="onKsEdit($event)"
                    (onRemove)="onKsRemoveFromMoveList($event)"
                    (onProjectChange)="onKsProjectChange($event)"
                    [showThumbnail]="false"

src/kc_angular/src/app/components/knowledge-source-components/ks-canvas/knowledge-canvas.component.ts

@@ -150,12 +150,28 @@ export class KnowledgeCanvasComponent implements OnInit, OnDestroy {
     });
 
     this._subKsCommandUpdate = this.ksCommandService.ksUpdateEvent.subscribe((ksList) => {
-      console.warn('KsCommandUpdate is not implemented yet...');
-      for (let ks of ksList) {
-        if (!ks.associatedProject) {
+      let updates: ProjectUpdateRequest[] = [];
 
+      for (let ks of ksList) {
+        if (ks.associatedProject) {
+          let project = this.projectService.getProject(ks.associatedProject.value);
+          if (project) {
+            ks.dateModified.push(new Date);
+            let req: ProjectUpdateRequest = {
+              id: project.id,
+              updateKnowledgeSource: [ks]
+            }
+            updates.push(req);
+          }
         }
       }
+
+      if (updates.length > 0) {
+        this.projectService.updateProjects(updates).then((_) => {
+        }).catch((reason) => {
+          console.error(reason);
+        });
+      }
     });
 
     this._subKsCommandShowInFiles = this.ksCommandService.ksShowInFilesEvent.subscribe((ks) => {
@@ -247,4 +263,8 @@ export class KnowledgeCanvasComponent implements OnInit, OnDestroy {
       }
     ]);
   }
+
+  onKsEdit($event: KnowledgeSource) {
+    this.ksCommandService.detail($event);
+  }
 }

src/kc_angular/src/app/components/knowledge-source-components/ks-card/ks-card.component.html

@@ -9,39 +9,30 @@
                  [preview]="true">
         </p-image>
         <div *ngIf="!thumbnail && thumbnailUnavailable"
-             class="align-self-center flex-col-center-center"
+             class="flex-col-center-center"
              style="height: 200px; width: 100%; background-color: var(--surface-400); border-radius: 10px">
-          Thumbnail Unavailable
+          <app-ks-icon [ks]="ks"></app-ks-icon>
         </div>
       </div>
     </div>
   </ng-template>
 
   <ng-template pTemplate="title">
-    <h1>{{ks.title | truncate: [28]}}</h1>
+    <div class="grid p-fluid flex-row-center-between">
+      <div class="col text-left">
+        <h1>{{ks.title | truncate: [32]}}</h1>
+        <h2 *ngIf="showContentType">Type: {{contentType | truncate: [24] | titlecase}}</h2>
+        <h2 *ngIf="showProjectName">Project: {{ks.associatedProject | projectName | truncate: [24]}}</h2>
+      </div>
+      <div class="col-2 text-right">
+        <app-ks-icon [ks]="ks"></app-ks-icon>
+      </div>
+    </div>
   </ng-template>
 
   <ng-template pTemplate="subtitle">
-    <h2 *ngIf="showContentType">Content Type: {{contentType | titlecase}}</h2>
-    <h2 *ngIf="showTags && keywords && keywords.length"
-        class="underline"
-        pTooltip="{{keywords | topicList}}"
-        tooltipPosition="bottom">
-      Topics
-    </h2>
-    <h2 *ngIf="showTags && (!keywords || !keywords.length)"
-        class="underline"
-        pTooltip="No topics found"
-        tooltipPosition="bottom">
-      Topics
-    </h2>
-  </ng-template>
 
-  <ng-template pTemplate="content">
     <div class="grid p-fluid">
-      <div class="col-4">
-        <app-ks-icon [ks]="ks"></app-ks-icon>
-      </div>
       <div class="col-12" *ngIf="showDescription && description">
         {{description}}
       </div>
@@ -57,6 +48,33 @@ <h2 *ngIf="showContentType">Content Type: {{contentType | titlecase}}</h2>
 
     </div>
   </ng-template>
+
+  <ng-template pTemplate="content">
+        <h2 *ngIf="showTags && keywords && keywords.length"
+            class="underline"
+            pTooltip="{{keywords | topicList}}"
+            tooltipPosition="bottom">
+          Topics
+        </h2>
+        <h2 *ngIf="showTags && (!keywords || !keywords.length)"
+            class="underline"
+            pTooltip="No topics found"
+            tooltipPosition="bottom">
+          Topics
+        </h2>
+    <div *ngIf="showTags && showExpandedTags" [style]="{'height':'64px', 'overflow':'scroll'}">
+      <p-chips [(ngModel)]="keywords"
+               class="p-fluid w-full"
+               (onChipClick)="onTopicClick.emit({ks: ks, topic: $event.value})"
+               (onAdd)="onTopicAdd()"
+               (onRemove)="onTopicRemove()"
+               [addOnTab]="true"
+               [addOnBlur]="true"
+               [allowDuplicate]="false"
+               placeholder="Add a Topic...">
+      </p-chips>
+    </div>
+  </ng-template>
   <ng-template pTemplate="footer">
     <div class="col text-right">
       <button pButton *ngIf="showRemove"
@@ -69,6 +87,11 @@ <h2 *ngIf="showContentType">Content Type: {{contentType | titlecase}}</h2>
               icon="pi pi-external-link"
               (click)="onOpen.emit(this.ks)">
       </button>
+      <button pButton *ngIf="showEdit"
+              class="p-button-text"
+              icon="pi pi-pencil"
+              (click)="onEdit.emit(this.ks)">
+      </button>
       <button pButton *ngIf="showPreview"
               class="p-button-text"
               icon="pi pi-eye"