regestry GBU custom component

angular.json

@@ -355,6 +355,10 @@
                 {
                   "replace": "src/app/_modules/pages/menu/slider-menu/slider-menu.component.ts",
                   "with": "src/gbu/component/pages/menu/slider-menu/slider-menu.component.ts"
+                },
+                {
+                  "replace": "src/app/_modules/registries/registry/entries/entry/registry-entry.component.ts",
+                  "with": "src/gbu/component/registries/registry/entries/entry/registry-entry.component.ts"
                 }
               ],
               "inlineStyleLanguage": "scss",

src/gbu/component/registries/registry/entries/entry/registry-entry.component.html

@@ -0,0 +1,49 @@
+<div class="main">
+  <div class="block row">
+    <div class="name">
+      <div *ngIf="link">        
+        <a [href]="link" target="_blank">
+          <ico ico="document_24"></ico> {{title}}
+        </a>
+      </div>
+      <span *ngIf="!link">{{title}}</span>
+    </div>
+    <drop-down *ngIf="isExpandable && withToggle" (click)="toggle()" [visible]="isExpanded"></drop-down>
+  </div>
+  <div class="block" *ngIf="registryOptions?.states && activeSince">
+    <div class="state {{entry.state?.name}}">{{entry.state?.title}}</div>
+    <div class="dates">
+      <table class="default">
+        <tr><td class="caption">Дата выдачи</td><td class="value">{{activeSince || '—'}}</td></tr>
+        <tr><td class="caption">Срок действия</td><td class="value">{{activeTill || '—'}}</td></tr>
+      </table>
+    </div>
+  </div>
+  <div class="block" *ngIf="editMode">
+    <div class="menu menu-entry">
+      <ico ico="drag-n-drop_24" class="move" title="Переместить"></ico>
+      <ico ico="edit_24" title="Редактировать" (click)="edit()"></ico>
+      <!-- <ico ico="add_notes_24" title="Добавить запись" (click)="add()"></ico> -->
+      <ico ico="delete_24" title="Удалить категорию" (click)="delete()"></ico>
+    </div>
+  </div>
+</div>
+<div class="details" *ngIf="isExpanded && withToggle">
+  <div class="block" *ngIf="registryOptions?.properties">
+    <entry-properties [entry]="entry"></entry-properties>
+  </div>
+  <div class="block" *ngIf="registryOptions?.operations">
+    <entry-operations [entry]="entry" [editMode]="editMode"></entry-operations>
+  </div>
+</div>
+<div *ngIf="!withToggle">
+  <entry-properties [entry]="entry"></entry-properties>
+</div>
+<!-- <pre>
+  {{entry|json}}
+</pre>
+
+<pre>
+  {{registry|json}}
+</pre> -->
+<!-- <pre>{{entry|json}}</pre> -->

src/gbu/component/registries/registry/entries/entry/registry-entry.component.ts

@@ -0,0 +1,86 @@
+import {Component, Input} from '@angular/core';
+import {FormsService, ListsService} from "@app/_services";
+import {RegistryEntriesService} from "@app/_services/registry-entries.service";
+import {DatePipe} from "@angular/common";
+
+@Component({
+  selector: 'registry-entry',
+  templateUrl: 'registry-entry.component.html',
+  styleUrls: ['registry-entry.component.scss']
+})
+export class RegistryEntryComponent {
+  @Input() registry: any;
+  @Input() category: any;
+  @Input() entry: any;
+  @Input() editMode: boolean;
+
+  public isExpanded = false;
+
+  constructor(private entriesService: RegistryEntriesService, private formsService: FormsService, private listsService: ListsService, private datePipe: DatePipe) {
+  }
+
+
+  get operationsListId() {
+    return this.entry.id;
+  }
+  get parentListId() {
+    return (this.category?.id || this.registry?.id) + '-entries';
+  }
+
+  get isExpandable() {
+    return this.registryOptions?.properties || this.registryOptions?.operations
+  }
+
+  get title() {
+    return this.entry.number ? `${this.entry.number} «${this.entry.name}»` : this.entry.name;
+  }
+  get activeSince() {
+    return this.entry.activeSince ? this.datePipe.transform(this.entry.activeSince, 'dd.MM.yyyy') : null;
+  }
+  get activeTill() {
+    return this.entry.activeTill ? this.datePipe.transform(this.entry.activeTill, 'dd.MM.yyyy') : null;
+  }
+  get asset() {
+    return this.entry.asset?.data;
+  }
+  get link() {
+    return this.asset?.links?.open || this.entry.link;
+  }
+
+  get registryOptions() {
+    return this.registry?.type?.options || this.entry?.registry?.data.type?.options;
+  }
+
+
+  ngOnInit() {
+
+  }
+
+
+  add() {
+    if (this.isExpandable) this.isExpanded = true;
+    this.formsService.createModel('entryOperation', {extraProps: {entry: this.entry.id}}, this.operationsListId);
+  }
+
+  edit() {
+    this.formsService.editModel('registryEntry', this.entry.id, {extraProps: {registry: this.registry?.id}}, this.parentListId);
+  }
+
+  delete() {
+    if (confirm('r u sure?')) {
+      this.entriesService.delete(this.entry.id).subscribe(res => {
+        this.listsService.refresh(this.parentListId);
+      });
+    }
+  }
+
+
+  toggle() {
+    this.isExpanded = !this.isExpanded;
+  }
+
+  get withToggle(){
+    return this.registry.type.name !== 'workshops'
+  }
+
+}