Merge pull request #1198 from snypy/public-snippets

Public snippets

karma.conf.js

@@ -15,6 +15,7 @@ module.exports = function (config) {
  ],
  client: {
  clearContext: false, // leave Jasmine Spec Runner output visible in browser
+ captureConsole: false
  },
  coverageReporter: {
  dir: require('path').join(__dirname, 'coverage'),

src/app/app.component.ts

@@ -1,18 +1,8 @@
-import { Component, OnInit } from '@angular/core';
-import { AuthResource } from './services/resources/auth.resource';
+import { Component } from '@angular/core';
 
 @Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
 })
-export class AppComponent implements OnInit {
- constructor(private authResource: AuthResource) {}
-
- ngOnInit(): void {
- /**
- * Initialize auth for already authenticated users
- */
- this.authResource.init();
- }
-}
+export class AppComponent {}

src/app/app.module.ts

@@ -67,6 +67,7 @@ import { LabelState } from './state/label/label.state';
 import { LanguageState } from './state/language/language.state';
 import { ScopeState } from './state/scope/scope.state';
 import { SnippetState } from './state/snippet/snippet.state';
+import { FullscreenComponent } from './layout/fullscreen/fullscreen.component';
 
 const DEFAULT_PERFECT_SCROLLBAR_CONFIG: PerfectScrollbarConfigInterface = {
  suppressScrollX: true,
@@ -78,6 +79,10 @@ const appRoutes: Routes = [
  component: BaseComponent,
  children: [],
  },
+ {
+ path: 'snippet/:id',
+ component: FullscreenComponent,
+ },
  {
  path: 'verify-user',
  component: AuthActivateComponent,
@@ -135,6 +140,7 @@ const appRoutes: Routes = [
  PasswordResetCompleteComponent,
  SetPasswordComponent,
  RemoveMarkdownPipe,
+ FullscreenComponent,
  ],
  imports: [
  BrowserModule,
@@ -177,6 +183,7 @@ const appRoutes: Routes = [
  useClass: LoadingScreenInterceptor,
  multi: true,
  },
+ { provide: Window, useValue: window },
  ],
  bootstrap: [AppComponent],
 })
@@ -198,7 +205,8 @@ export class AppModule {
  far.faStar,
  fas.faTrash,
  fas.faCircle,
- fas.faHashtag
+ fas.faHashtag,
+ far.faCopy
  );
  }
 }

src/app/components/snippet-options/snippet-options.component.html

@@ -11,6 +11,16 @@
  <small><b>Created</b> {{ activeSnippet.created_date | date: 'medium' }}</small
  ><br />
  <small><b>Last update</b> {{ activeSnippet.modified_date | date: 'medium' }}</small>
+ <br />
+ <small><b>Visibility</b> {{ activeSnippet.visibility }}</small>
+ <br />
+ <small>
+ <b>Share URL</b>
+ <code class="p-1">{{ permalink }}</code>
+ <button anglifyButton appearance="icon" ngxClipboard [cbContent]="permalink" size="small">
+ <fa-icon class="icon button" [icon]="['far', 'copy']"></fa-icon>
+ </button>
+ </small>
  </div>
  <div class="col-3 text-end" style="padding-top: 0">
  <div class="btn-group" role="group" aria-label="Basic example">
@@ -22,9 +32,6 @@
  >
  Edit
  </button>
- <!-- ToDo: Implement in 1.1
- <button type="button" class="btn btn-sm btn-link" (click)="shareSnippet()">Share</button>
- -->
  <button
  type="button"
  class="btn btn-sm btn-link"

src/app/components/snippet-options/snippet-options.component.spec.ts

@@ -16,7 +16,13 @@ describe('SnippetOptionsComponent', () => {
  TestBed.configureTestingModule({
  declarations: [SnippetOptionsComponent],
  imports: [NgxResourceFactoryModule.forRoot(), HttpClientModule, NgxsModule.forRoot()],
- providers: [SnippetLabelResource, AuthResource, UserResource, SnippetResource],
+ providers: [
+ SnippetLabelResource,
+ AuthResource,
+ UserResource,
+ SnippetResource,
+ { provide: Window, useValue: { location: { host: 'localhost', protocol: 'http' } } },
+ ],
  }).compileComponents();
  }));
 

src/app/components/snippet-options/snippet-options.component.ts

@@ -25,6 +25,7 @@ export class SnippetOptionsComponent implements OnInit {
  activeSnippetResource: ResourceModel<Snippet> = null;
  activeLabels: number[] = [];
  currentUser: ResourceModel<User>;
+ permalink = '';
 
  @Select(LabelState) labels$: Observable<Label[]>;
  @Select(state => state.snippet.activeSnippet) activeSnippet$: Observable<Snippet>;
@@ -34,7 +35,8 @@ export class SnippetOptionsComponent implements OnInit {
  private authResource: AuthResource,
  private modalService: NgbModal,
  private snippetResource: SnippetResource,
- private store: Store
+ private store: Store,
+ private window: Window
  ) {}
 
  trackByFn(index: number, label: Label): number {
@@ -48,6 +50,8 @@ export class SnippetOptionsComponent implements OnInit {
  if (snippet) {
  this.activeSnippetResource = this.snippetResource.create(snippet);
  this.activeLabels = this.activeSnippetResource.labels;
+
+ this.permalink = this.window.location.protocol + '//' + this.window.location.host + '/snippet/' + snippet.pk;
  }
  });
  }

src/app/layout/base/base.component.ts

@@ -25,6 +25,11 @@ export class BaseComponent implements OnInit, OnDestroy {
  constructor(private store: Store, private authResource: AuthResource, private activeFilterService: ActiveFilterService) {}
 
  ngOnInit(): void {
+ /**
+ * Initialize auth for already authenticated users
+ */
+ this.authResource.init();
+
  /**
  * Refresh snippets on scope changes
  */

src/app/layout/content/content.component.html

@@ -4,7 +4,7 @@
  <div class="col-12 full-height remove-side-padding">
  <app-header></app-header>
  <app-snippet-options></app-snippet-options>
- <perfect-scrollbar style="max-height: calc(100vh - 210px); padding-right: 15px">
+ <perfect-scrollbar style="max-height: calc(100vh - 262px); padding-right: 15px">
  <app-snippet></app-snippet>
  </perfect-scrollbar>
  <app-footer></app-footer>

src/app/layout/fullscreen/fullscreen.component.html

@@ -0,0 +1,30 @@
+<div class="content" *ngIf="!snippetError">
+ <div class="container-fluid">
+ <div class="row justify-content-end">
+ <button [routerLink]="'/'" anglifyButton appearance="text">
+ <anglify-icon icon="mdi-home" size="small" left></anglify-icon>
+ Dashboard
+ </button>
+ </div>
+ <div class="row">
+ <div class="col-12 full-height remove-side-padding">
+ <app-snippet-options></app-snippet-options>
+ <perfect-scrollbar style="max-height: calc(100vh - 220px); padding-right: 15px">
+ <app-snippet></app-snippet>
+ </perfect-scrollbar>
+ </div>
+ </div>
+ </div>
+</div>
+
+<div *ngIf="snippetError" class="page-wrap d-flex flex-row align-items-center error404">
+ <div class="container">
+ <div class="row justify-content-center">
+ <div class="col-md-12 text-center">
+ <span class="display-1 d-block">404</span>
+ <div class="mb-4 lead">The snippet you are looking for was not found.</div>
+ <a [routerLink]="'/'" class="btn btn-link">Back to Home</a>
+ </div>
+ </div>
+ </div>
+</div>

src/app/layout/fullscreen/fullscreen.component.scss

@@ -0,0 +1,32 @@
+:host {
+ background: #142f43;
+ height: 100vh;
+ width: 100%;
+ display: inline-block;
+}
+
+.content {
+ background: #ffffff;
+ max-width: 1000px;
+ height: 100vh;
+ left: 50%;
+ transform: translate(-50%, 0);
+ position: relative;
+ justify-content: center;
+}
+
+.row > [class^=col-] {
+ padding-top: 0;
+}
+
+.error404 {
+
+ position: relative;
+ top: 50%;
+ transform: translate(0, -50%);
+
+ .container {
+ background: #ffffff;
+ max-width: 1000px;
+ }
+}

src/app/layout/fullscreen/fullscreen.component.spec.ts

@@ -0,0 +1,39 @@
+import { HttpClientModule } from '@angular/common/http';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { ActivatedRoute } from '@angular/router';
+import { NgxsModule } from '@ngxs/store';
+import { NgxResourceFactoryModule } from 'ngx-resource-factory';
+import { SnippetResource } from '../../services/resources/snippet.resource';
+
+import { FullscreenComponent } from './fullscreen.component';
+
+describe('FullscreenComponent', () => {
+ let component: FullscreenComponent;
+ let fixture: ComponentFixture<FullscreenComponent>;
+
+ beforeEach(async () => {
+ await TestBed.configureTestingModule({
+ declarations: [FullscreenComponent],
+ imports: [NgxResourceFactoryModule.forRoot(), HttpClientModule, NgxsModule.forRoot()],
+ providers: [
+ SnippetResource,
+ {
+ provide: ActivatedRoute,
+ useValue: {
+ snapshot: { params: { id: '123' } },
+ },
+ },
+ ],
+ }).compileComponents();
+ });
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(FullscreenComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});

src/app/layout/fullscreen/fullscreen.component.ts

@@ -0,0 +1,29 @@
+import { Component, OnInit } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+import { Store } from '@ngxs/store';
+import { SnippetResource } from '../../services/resources/snippet.resource';
+import { SetActiveSnippet } from '../../state/snippet/snippet.actions';
+
+@Component({
+ selector: 'app-fullscreen',
+ templateUrl: './fullscreen.component.html',
+ styleUrls: ['./fullscreen.component.scss'],
+})
+export class FullscreenComponent implements OnInit {
+ snippetError = false;
+
+ constructor(private route: ActivatedRoute, private snippetResource: SnippetResource, private store: Store) {}
+
+ ngOnInit(): void {
+ const snippetPk = this.route.snapshot.params.id;
+
+ this.snippetResource
+ .get({ pk: snippetPk })
+ .$promise.then(data => {
+ this.store.dispatch(new SetActiveSnippet(data));
+ })
+ .catch(() => {
+ this.snippetError = true;
+ });
+ }
+}