Open-ILS/src/eg2/src/app/staff/admin/server/custom-org-unit-trees.component.html

   1 <eg-staff-banner bannerText="Custom Org Unit Trees" i18n-bannerText>
   2 </eg-staff-banner>
   3
   4 <ng-template #successStrTmpl i18n>Update Succeeded</ng-template>
   5 <eg-string #successString [template]="successStrTmpl"></eg-string>
   6
   7 <ng-template #updateFailedStrTmpl i18n>Update Failed</ng-template>
   8 <eg-string #updateFailedString [template]="updateFailedStrTmpl"></eg-string>
   9
  10 <eg-confirm-dialog #delConfirm
  11   i18n-dialogTitle i18n-dialogBody
  12   dialogTitle="Confirm Delete"
  13   dialogBody="Delete Org Unit {{selected ? selected.label : ''}}?">
  14 </eg-confirm-dialog>
  15
  16 <eg-custom-org-unit-trees-dialog #moveNodeElsewhereDialog>
  17 </eg-custom-org-unit-trees-dialog>
  18
  19 <div i18n>
  20   To add new nodes to the custom tree, left-click on the node you wish to add on the left and then left-click on a node on the right that will serve as that node's parent. You can then press the "Copy Selected Org Units to Custom Tree" button. You may need to expand the custom tree to see the placement. Changes to the custom org tree will require a web server (Apache) reload by your system administrator before taking effect.
  21 </div>
  22 <div class="row row-cols-auto org-unit-types-row">
  23   <div class="col org-unit-types-col-aside">
  24     <div class="card bg-light rounded p-3" >
  25       <h3 i18n>Full Org Unit Tree</h3>
  26       <eg-tree
  27         [showSelectors]="true"
  28         [disableRootSelector]="true"
  29         [toggleOnClick]="true"
  30         [tree]="tree"
  31         (nodeClicked)="nodeClicked($event)"
  32         (nodeChecked)="nodeChecked($event)">
  33         <div header>
  34           <button type="button" class="btn btn-normal btn-sm label-with-material-icon" [disabled]="!isCopyNodesAllowed()" (click)="copyNodes()">
  35             <span class="material-icons mat-icon-in-button" aria-hidden="true">content_copy</span>
  36             <span i18n>Copy Selected Org Units to Custom Tree</span>
  37           </button>
  38         </div>
  39       </eg-tree>
  40     </div>
  41   </div>
  42   <div class="col org-unit-types-col-aside p-3">
  43     <h3 *ngIf="active">
  44           <span i18n>Custom Org Unit Tree (Active)</span>
  45           <button type="button" class="btn btn-link p-0 ms-2" *ngIf="active" (click)="active = !active" i18n>Deactivate Tree</button>
  46     </h3>
  47     <h3 *ngIf="!active">
  48           <span i18n>Custom Org Unit Tree (Inactive)</span>
  49           <button type="button" class="btn btn-link p-0 ms-2" *ngIf="!active" (click)="active = !active" i18n>Activate Tree</button>
  50     </h3>
  51     <div class="p-1" >
  52       <ng-template #selectedRowButtons let-node>
  53         <div *ngIf="node.selected && custom_tree.selectedNodes().length === 1">
  54           <button type="button" class="btn btn-link lh-1 py-1 px-0 text-dark"
  55             [disabled]="moveNodeUpDisabled" (click)="moveNodeUp(node)"
  56             i18n-title title="Move Up" i18n-aria-label aria-label="Move Up">
  57             <span class="material-icons" aria-hidden="true">arrow_upward</span>
  58           </button>
  59           <button type="button" class="btn btn-link lh-1 py-1 px-0 text-dark"
  60             [disabled]="moveNodeDownDisabled" (click)="moveNodeDown(node)"
  61             i18n-title title="Move Down" i18n-aria-label aria-label="Move Down">
  62             <span class="material-icons" aria-hidden="true">arrow_downward</span>
  63           </button>
  64           <button type="button" class="btn btn-link lh-1 py-1 px-0 text-dark"
  65             [disabled]="moveNodeElsewhereDisabled" (click)="moveNodeElsewhere(node)"
  66             i18n-title title="Move Elsewhere" i18n-aria-label aria-label="Move Elsewhere">
  67             <span class="material-icons" aria-hidden="true">arrow_forward</span>
  68           </button>
  69           <button type="button" class="btn btn-link btn-destroy lh-1 py-1 px-0"
  70             [disabled]="!isDeleteNodesAllowed()" (click)="deleteNode(node)"
  71             i18n-title title="Delete" i18n-aria-label aria-label="Delete">
  72             <span class="material-icons" aria-hidden="true">delete</span>
  73           </button>
  74         </div>
  75       </ng-template>
  76       <eg-tree
  77         [showSelectors]="true"
  78         [disableRootSelector]="false"
  79         [toggleOnClick]="true"
  80         [tree]="custom_tree"
  81         (nodeClicked)="custom_nodeClicked($event)"
  82         (nodeChecked)="custom_nodeChecked($event)"
  83         [rowTrailingTemplate]="selectedRowButtons">
  84         <div header>
  85           <button type="button" class="btn btn-normal btn-sm label-with-material-icon" (click)="applyChanges()">
  86             <span class="material-icons mat-icon-in-button" aria-hidden="true">save</span>
  87             <span i18n>Save Changes</span>
  88           </button>
  89           <button type="button" class="btn btn-destroy btn-sm label-with-material-icon" [disabled]="!isDeleteNodesAllowed()" (click)="deleteSelectedNodes()">
  90             <span class="material-icons mat-icon-in-button" aria-hidden="true">delete</span>
  91             <span i18n>Delete Selected</span>
  92           </button>
  93         </div>
  94         <div footer>
  95         </div>
  96       </eg-tree>
  97     </div>
  98   </div>
  99 </div>