vendors: implement views

* Adds brief view. * Adds detail view. * Adds address type component. * Adds link to acquisition menu. Co-Authored-by: Laurent Dubois <laurent.dubois@itld-solutions.be>
rero · Jan 27, 2020 · 4de8ce7 · 4de8ce7
1 parent 7a6cd88
commit 4de8ce7
Show file tree

Hide file tree

Showing 14 changed files with 405 additions and 10 deletions.
diff --git a/projects/admin/src/app/app.module.ts b/projects/admin/src/app/app.module.ts
@@ -76,6 +76,9 @@ import { RemoteAutocompleteInputTypeComponent } from './record/editor/remote-aut
 import { NoCacheHeaderInterceptor } from './interceptor/no-cache-header.interceptor';
 import { InterfaceInfoComponent } from './interface-info/interface-info.component';
 import { DocumentEditorComponent } from './record/custom-editor/document-editor/document-editor.component';
+import { VendorDetailViewComponent } from './record/detail-view/vendor-detail-view/vendor-detail-view.component';
+import { VendorBriefViewComponent } from './record/brief-view/vendor-brief-view.component';
+import { AddressTypeComponent } from './record/detail-view/address-type/address-type.component';
 
 @NgModule({
   declarations: [
@@ -126,7 +129,11 @@ import { DocumentEditorComponent } from './record/custom-editor/document-editor/
     PatronDetailViewComponent,
     InterfaceInfoComponent,
     RefComponent,
-    RemoteAutocompleteInputTypeComponent
+    RemoteAutocompleteInputTypeComponent,
+    InterfaceInfoComponent,
+    VendorDetailViewComponent,
+    VendorBriefViewComponent,
+    AddressTypeComponent
   ],
   imports: [
     AppRoutingModule,
@@ -202,9 +209,10 @@ import { DocumentEditorComponent } from './record/custom-editor/document-editor/
     ItemDetailViewComponent,
     PatronDetailViewComponent,
     RefComponent,
-    RemoteAutocompleteInputTypeComponent
+    RemoteAutocompleteInputTypeComponent,
+    VendorDetailViewComponent,
+    VendorBriefViewComponent
   ],
   bootstrap: [AppComponent]
 })
 export class AppModule {}
-
diff --git a/projects/admin/src/app/class/address-type.ts b/projects/admin/src/app/class/address-type.ts
@@ -0,0 +1,26 @@
+/*
+ * RERO ILS UI
+ * Copyright (C) 2019 RERO
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, version 3 of the License.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+export interface AddressType {
+  contact_person: string;
+  street: string;
+  postal_code: string;
+  city: string;
+  country: string;
+  phone: string;
+  email: string;
+}
diff --git a/projects/admin/src/app/menu/menu.component.ts b/projects/admin/src/app/menu/menu.component.ts
@@ -173,6 +173,14 @@ export class MenuComponent implements OnInit {
             routerLink: '/records/persons',
             iconCssClass: 'fa fa-user'
           }]
+        }, {
+          name: this.translateService.instant('Acquisitions'),
+          iconCssClass: 'fa fa-university',
+          entries: [{
+            name: this.translateService.instant('Vendors'),
+            routerLink: '/records/vendors',
+            iconCssClass: 'fa fa-briefcase'
+          }]
         }, {
           name: this.translateService.instant('Admin & Monitoring'),
           iconCssClass: 'fa fa-cogs',
@@ -202,7 +210,7 @@ export class MenuComponent implements OnInit {
     };
 
     this.localeStorageService.onSet$.subscribe(() => {
-      const link = this.linksMenu.entries[2].entries.find(
+      const link = this.linksMenu.entries[3].entries.find(
         (element: any) => element.routerLink.indexOf('/libraries/detail') > -1
       );
       link.routerLink = this.myLibraryRouterLink();

diff --git a/projects/admin/src/app/record/brief-view/vendor-brief-view.component.ts b/projects/admin/src/app/record/brief-view/vendor-brief-view.component.ts
@@ -0,0 +1,48 @@
+/*
+ * RERO ILS UI
+ * Copyright (C) 2019 RERO
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, version 3 of the License.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import { Component, Input } from '@angular/core';
+import { ResultItem } from '@rero/ng-core';
+
+@Component({
+  selector: 'admin-vendor-brief-view',
+  template: `
+    <h5 class="mb-0 card-title">
+      <a [routerLink]="['/records', 'vendors', 'detail', record.metadata.pid]">
+        {{ record.metadata.name }}
+    </a>
+    </h5>
+    <div class="card-text">
+    <span *ngIf="record.metadata.name">
+      {{ record.metadata.name }}
+    </span>
+    </div>
+  `,
+  styleUrls: []
+})
+export class VendorBriefViewComponent implements ResultItem {
+
+  /** Record  data */
+  record: any;
+
+  /** Resource type */
+  type: string;
+
+  /** Detail URL to navigate to detail view */
+  detailUrl: { link: string, external: boolean };
+
+}
diff --git a/projects/admin/src/app/record/detail-view/address-type/address-type.component.html b/projects/admin/src/app/record/detail-view/address-type/address-type.component.html
@@ -0,0 +1,87 @@
+<!--
+  RERO ILS UI
+  Copyright (C) 2019 RERO
+  
+  This program is free software: you can redistribute it and/or modify
+  it under the terms of the GNU Affero General Public License as published by
+  the Free Software Foundation, version 3 of the License.
+  
+  This program is distributed in the hope that it will be useful,
+  but WITHOUT ANY WARRANTY; without even the implied warranty of
+  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+  GNU Affero General Public License for more details.
+  
+  You should have received a copy of the GNU Affero General Public License
+  along with this program.  If not, see <http://www.gnu.org/licenses/>.
+-->
+<article>
+  <section class="m-2 p-2">
+    <div class="p-2">
+      <!-- CONTACT_PERSON -->
+      <dl class="row mb-0" *ngIf="addressType.contact_person">
+        <dt class="col-sm-3 offset-sm-2 offset-md-0">
+          {{ 'Contact person' | translate }}:
+        </dt>
+        <dd class="col-sm-7 col-md-8 mb-0">
+          {{ addressType.contact_person }}
+        </dd>
+      </dl>
+      <!-- STREET -->
+      <dl class="row mb-0" *ngIf="addressType.street">
+        <dt class="col-sm-3 offset-sm-2 offset-md-0">
+          {{ 'Street' | translate }}:
+        </dt>
+        <dd class="col-sm-7 col-md-8 mb-0">
+          {{ addressType.street }}
+        </dd>
+      </dl>
+      <!-- POSTAL_CODE -->
+      <dl class="row mb-0" *ngIf="addressType.postal_code">
+        <dt class="col-sm-3 offset-sm-2 offset-md-0">
+          {{ 'Postal code' | translate }}:
+        </dt>
+        <dd class="col-sm-7 col-md-8 mb-0">
+          {{ addressType.postal_code }}
+        </dd>
+      </dl>
+      <!-- CITY -->
+      <dl class="row mb-0" *ngIf="addressType.city">
+        <dt class="col-sm-3 offset-sm-2 offset-md-0">
+          {{ 'City' | translate }}:
+        </dt>
+        <dd class="col-sm-7 col-md-8 mb-0">
+          {{ addressType.city }}
+        </dd>
+      </dl>
+      <!-- COUNTRY -->
+      <dl class="row mb-0" *ngIf="addressType.country">
+        <dt class="col-sm-3 offset-sm-2 offset-md-0">
+          {{ 'Country' | translate }}:
+        </dt>
+        <dd class="col-sm-7 col-md-8 mb-0">
+          {{ addressType.country }}
+        </dd>
+      </dl>
+    </div>
+    <div class="p-2">
+      <!-- PHONE -->
+      <dl class="row mb-0" *ngIf="addressType.phone">
+        <dt class="col-sm-3 offset-sm-2 offset-md-0">
+          {{ 'Phone' | translate }}:
+        </dt>
+        <dd class="col-sm-7 col-md-8 mb-0">
+          {{ addressType.phone }}
+        </dd>
+      </dl>
+      <!-- EMAIL -->
+      <dl class="row mb-0" *ngIf="addressType.email">
+        <dt class="col-sm-3 offset-sm-2 offset-md-0">
+          {{ 'Email' | translate }}:
+        </dt>
+        <dd class="col-sm-7 col-md-8 mb-0">
+          {{ addressType.email }}
+        </dd>
+      </dl>
+    </div>
+  </section>
+</article>
diff --git a/projects/admin/src/app/record/detail-view/address-type/address-type.component.ts b/projects/admin/src/app/record/detail-view/address-type/address-type.component.ts
@@ -0,0 +1,30 @@
+/*
+ * RERO ILS UI
+ * Copyright (C) 2019 RERO
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, version 3 of the License.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import { Component, Input } from '@angular/core';
+import { AddressType } from '../../../class/address-type';
+
+@Component({
+  selector: 'admin-address-type',
+  templateUrl: './address-type.component.html',
+  styleUrls: []
+})
+export class AddressTypeComponent {
+
+  @Input() addressType: AddressType;
+
+}
diff --git a/...cts/admin/src/app/record/detail-view/vendor-detail-view/vendor-detail-view.component.html b/...cts/admin/src/app/record/detail-view/vendor-detail-view/vendor-detail-view.component.html
@@ -0,0 +1,69 @@
+<!--
+  RERO ILS UI
+  Copyright (C) 2019 RERO
+  
+  This program is free software: you can redistribute it and/or modify
+  it under the terms of the GNU Affero General Public License as published by
+  the Free Software Foundation, version 3 of the License.
+  
+  This program is distributed in the hope that it will be useful,
+  but WITHOUT ANY WARRANTY; without even the implied warranty of
+  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+  GNU Affero General Public License for more details.
+  
+  You should have received a copy of the GNU Affero General Public License
+  along with this program.  If not, see <http://www.gnu.org/licenses/>.
+-->
+<ng-container *ngIf="record$ | async as record">
+  <h1 class="mb-3">{{ record.metadata.name }}</h1>
+  <article>
+    <section class="m-2 p-2">
+      <!-- WEBSITE -->
+      <dl class="row mb-0" *ngIf="record.metadata.website">
+        <dt class="col-sm-3 offset-sm-2 offset-md-0">
+          {{ 'Website' | translate }}:
+        </dt>
+        <dd class="col-sm-7 col-md-8 mb-0">
+          <a target="_blank" href="{{ record.metadata.website }}">{{ record.metadata.website }}</a>
+        </dd>
+      </dl>
+      <!-- COMMUNICATION_LANGUAGE -->
+      <ng-container *ngIf="record.metadata.communication_language && record.metadata.communication_language.length > 0">
+        <dl class="row mb-0">
+          <dt class="col-sm-3 offset-sm-2 offset-md-0">
+            {{ 'Communication language' | translate }}:
+          </dt>
+          <dd class="col-sm-7 col-md-8 mb-0">
+            {{ record.metadata.communication_language | translateLanguage:currentLanguage }}
+          </dd>
+        </dl>
+      </ng-container>
+      <!-- NOTE -->
+      <dl class="row mb-0" *ngIf="record.metadata.note">
+        <dt class="col-sm-3 offset-sm-2 offset-md-0">
+          {{ 'Note' | translate }}:
+        </dt>
+        <dd class="col-sm-7 col-md-8 mb-0">
+          {{ record.metadata.note }}
+        </dd>
+      </dl>
+    </section>
+
+    <section class="m-2 p-2">
+      <tabset>
+        <!-- DEFAULT CONTACT -->
+        <ng-container *ngIf="record.metadata.default_contact as defaultContact">
+          <tab heading="Default contact details" id="default_address">
+            <admin-address-type [addressType]="defaultContact"></admin-address-type>
+          </tab>
+        </ng-container>
+        <!-- ORDER CONTACT -->
+        <ng-container *ngIf="record.metadata.order_contact as orderContact">
+          <tab heading="Order contact details" id="order_address">
+            <admin-address-type [addressType]="orderContact"></admin-address-type>
+          </tab>
+        </ng-container>
+      </tabset>
+    </section>
+  </article>
+</ng-container>
diff --git a/projects/admin/src/app/record/detail-view/vendor-detail-view/vendor-detail-view.component.ts b/projects/admin/src/app/record/detail-view/vendor-detail-view/vendor-detail-view.component.ts
@@ -0,0 +1,49 @@
+/*
+ * RERO ILS UI
+ * Copyright (C) 2019 RERO
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, version 3 of the License.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import { Component, Input } from '@angular/core';
+import { DetailRecord } from '@rero/ng-core/lib/record/detail/view/detail-record';
+import { Observable } from 'rxjs';
+import { TranslateService } from '@ngx-translate/core';
+
+@Component({
+  selector: 'admin-vendor-detail-view',
+  templateUrl: './vendor-detail-view.component.html',
+  styleUrls: []
+})
+export class VendorDetailViewComponent implements DetailRecord {
+
+  /** Observable resolving record data */
+  record$: Observable<any>;
+
+  /** Resource type */
+  type: string;
+
+  /**
+   * Constructor
+   * @param translateService TranslateService
+   */
+  constructor(private translateService: TranslateService) { }
+
+  /**
+   * Get Current language interface
+   * @return string - language
+   */
+  get currentLanguage() {
+    return this.translateService.currentLang;
+  }
+}