Send layout & search

src/app/send/access.component.html

@@ -0,0 +1,7 @@
+<div class="details">
+    <div clas="content">
+        <div class="inner-content">
+            <p>Under construction</p>
+        </div>
+    </div>
+</div>

src/app/send/access.component.ts

@@ -0,0 +1,14 @@
+import {
+    Component,
+    OnInit,
+} from '@angular/core';
+
+@Component({
+    selector: 'app-send-access',
+    templateUrl: 'access.component.html',
+})
+export class AccessComponent implements OnInit {
+    constructor() { }
+
+    ngOnInit() { }
+}

src/app/send/add-edit.component.html

@@ -0,0 +1,7 @@
+<div class="details">
+    <div clas="content">
+        <div class="inner-content">
+            <p>Under construction</p>
+        </div>
+    </div>
+</div>

src/app/send/add-edit.component.ts

@@ -0,0 +1,26 @@
+import { DatePipe } from '@angular/common';
+
+import { Component } from '@angular/core';
+
+import { EnvironmentService } from 'jslib/abstractions/environment.service';
+import { I18nService } from 'jslib/abstractions/i18n.service';
+import { MessagingService } from 'jslib/abstractions/messaging.service';
+import { PlatformUtilsService } from 'jslib/abstractions/platformUtils.service';
+import { SendService } from 'jslib/abstractions/send.service';
+import { UserService } from 'jslib/abstractions/user.service';
+
+import { AddEditComponent as BaseAddEditComponent } from 'jslib/angular/components/send/add-edit.component';
+
+@Component({
+    selector: 'app-send-add-edit',
+    templateUrl: 'add-edit.component.html',
+})
+export class AddEditComponent extends BaseAddEditComponent {
+    constructor(i18nService: I18nService, platformUtilsService: PlatformUtilsService,
+        environmentService: EnvironmentService, datePipe: DatePipe,
+        sendService: SendService, userService: UserService,
+        messagingService: MessagingService) {
+        super(i18nService, platformUtilsService, environmentService,
+              datePipe, sendService, userService, messagingService);
+    }
+}

src/app/send/send.component.html

@@ -0,0 +1,80 @@
+<div id="sends" class="vault">
+    <div class="groupings">
+        <div class="mac-bar"></div>
+        <div class="content">
+            <div class="inner-content">
+                <div class="top-content">
+                    <h2 class="sr-only">{{'filters' | i18n}}</h2>
+                    <ul>
+                        <li [ngClass]="{active: selectedAll}">
+                            <a href="#" appStopClick appBlurClick (click)="selectAll()">
+                                <i class="fa fa-fw fa-th" aria-hidden="true"></i>&nbsp;{{'allSends' | i18n}}
+                            </a>
+                        </li>
+                    </ul>
+                    <h2>{{'types' | i18n}}</h2>
+                    <ul>
+                        <li [ngClass]="{active: selectedType === sendType.Text}">
+                            <a href="#" appStopClick appBlurClick (click)="selectType(sendType.Text)">
+                                <i class="fa fa-fw fa-file-text-o" aria-hidden="true"></i>&nbsp;{{'sendTypeText' | i18n}}
+                            </a>
+                        </li>
+                        <li [ngClass]="{active: selectedType === sendType.File}">
+                            <a href="#" appStopClick appBlurClick (click)="selectType(sendType.File)">
+                                <i class="fa fa-fw fa-file-o" aria-hidden="true"></i>&nbsp;{{'sendTypeFile' | i18n}}
+                            </a>
+                        </li>
+                    </ul>
+                </div>
+                <div class="bottom-content">
+                    <a routerLink="/" class="fa fa-lock btn primary icon-link" title="Bitwarden Vault"></a>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div id="items" class="items">
+        <div class="header header-search">
+            <div class="search">
+                <input type="search" placeholder="{{'searchSends' | i18n}}" id="search"
+                    [(ngModel)]="searchText" (input)="searchTextChanged()" autocomplete="off" appAutofocus>
+                <i class="fa fa-search" aria-hidden="true"></i>
+            </div>
+        </div>
+        <div class="content">
+            <div class="list" *ngIf="filteredSends.length" infiniteScroll [infiniteScrollDistance]="1"
+                [infiniteScrollContainer]="'#items .content'" [fromRoot]="true" (scrolled)="loadMore()">
+                <a *ngFor="let s of filteredSends" appStopClick (click)="selectSend(s)"
+                    href="#" title="{{'viewItem' | i18n}}"
+                    [ngClass]="{'active': s.id === activeSendId}">
+                    <div class="icon" aria-hidden="true">
+                        <i class="fa fa-fw fa-lg" [ngClass]="s.type == 0 ? 'fa-file-o' : 'fa-file-text-o'"></i>
+                    </div>
+                    <span class="text">
+                        {{s.name}}
+                    </span>
+                    <span class="detail">{{s.deletionDate | date}}</span>
+                </a>
+            </div>
+            <div class="no-items" *ngIf="!filteredSends.length">
+                <i class="fa fa-spinner fa-spin fa-3x" *ngIf="!loaded" aria-hidden="true"></i>
+                <ng-container *ngIf="loaded">
+                    <i class="fa fa-frown-o fa-4x" aria-hidden="true"></i>
+                    <p>{{'noItemsInList' | i18n}}</p>
+                </ng-container>
+            </div>
+        </div>
+        <div class="footer">
+            <button appBlurClick (click)="addSend()" class="block primary" appA11yTitle="{{'addItem' | i18n}}">
+                <i class="fa fa-plus fa-lg" aria-hidden="true"></i>
+            </button>
+        </div>
+    </div>
+    <app-send-add-edit *ngIf="action == 'add' || action == 'edit'"></app-send-add-edit>
+    <div class="logo" *ngIf="!action">
+        <div class="content">
+            <div class="inner-content">
+                <img class="logo-image" alt="Bitwarden" aria-hidden="true" />
+            </div>
+        </div>
+    </div>
+</div>

src/app/send/send.component.ts

@@ -0,0 +1,126 @@
+import {
+    Component,
+    NgZone,
+    OnInit,
+} from '@angular/core';
+
+import {
+    ActivatedRoute ,
+    Router,
+} from '@angular/router';
+
+import { EnvironmentService } from 'jslib/abstractions/environment.service';
+import { I18nService } from 'jslib/abstractions/i18n.service';
+import { PlatformUtilsService } from 'jslib/abstractions/platformUtils.service';
+import { SearchService } from 'jslib/abstractions/search.service';
+import { SendService } from 'jslib/abstractions/send.service';
+
+import { ModalComponent } from 'jslib/angular/components/modal.component';
+import { SendComponent as BaseSendComponent } from 'jslib/angular/components/send/send.component';
+
+import { BroadcasterService } from 'jslib/angular/services/broadcaster.service';
+
+import { SendType } from 'jslib/enums/sendType';
+import { SendView } from 'jslib/models/view/sendView';
+
+enum Action {
+    None = '',
+    Add = 'add',
+    Edit = 'edit',
+    View = 'view',
+}
+
+@Component({
+    selector: 'app-send',
+    templateUrl: 'send.component.html',
+})
+export class SendComponent extends BaseSendComponent implements OnInit {
+    sendId: string;
+    modal: ModalComponent = null;
+    action: Action = Action.None;
+
+    constructor(sendService: SendService, i18nService: I18nService,
+        platformUtilsService: PlatformUtilsService, environmentService: EnvironmentService,
+        broadcasterService: BroadcasterService, ngZone: NgZone,
+        private router: Router, private route: ActivatedRoute, searchService: SearchService) {
+        super(sendService, i18nService, platformUtilsService,
+              environmentService, broadcasterService, ngZone, searchService);
+    }
+
+    async load(filter: (send: SendView) => boolean = null) {
+        this.loading = true;
+        this.sends = await this.sendService.getAllDecrypted();
+
+        this.route.queryParams.subscribe(async (params) => {
+            if (params == null) {
+                this.selectedAll = true;
+                await this.reload();
+            } else {
+                const sendView = new SendView();
+                if (params.sendId) {
+                    sendView.id = params.sendId;
+                    if (params.action === 'edit') {
+                        this.editSend(sendView);
+                    } else if (params.action === 'view') {
+                        // TODO: this
+                        // this.viewSend(sendView);
+                    }
+                } else if (params.action === 'add') {
+                    this.addSend();
+                } else {
+                    if (params.files) {
+                        sendView.type = SendType.File;
+                        this.filter = (s) => {
+                            return filter(s) && s.text != null;
+                        };
+                        this.filter(sendView);
+                    } else if (params.text) {
+                        sendView.type = SendType.Text;
+                        this.filter = (s) => {
+                            return filter(s) && s.file != null;
+                        };
+                        this.filter(sendView);
+                    } else {
+                        this.selectAll();
+                    }
+                }
+            }
+        });
+
+        this.loading = false;
+        this.loaded = true;
+    }
+
+    addSend() {
+        if (this.action === Action.Add) {
+            return;
+        }
+
+        this.action = Action.Add;
+        this.sendId = null;
+        this.go();
+    }
+
+    editSend(send: SendView) {
+        if (this.action === Action.Edit && this.sendId === send.id) {
+            return;
+        }
+        this.action = Action.Edit;
+        this.sendId = send.id;
+        this.go();
+    }
+
+    private go(queryParams: any = null) {
+        if (queryParams == null) {
+            queryParams = {
+                id: this.sendId,
+                action: this.action,
+            };
+        }
+        this.router.navigate([], {
+            relativeTo: this.route,
+            queryParams: queryParams,
+            replaceUrl: true,
+        });
+    }
+}