From 7896205cb9291dd6dc53e96d50b6a7ff64667162 Mon Sep 17 00:00:00 2001
From: Boris Voropaev <boris1voropaev@gmail.com>
Date: Tue, 9 Jan 2024 14:36:47 +0300
Subject: [PATCH] wating spinner

---
 .../tree/item/pages-tree-item.component.ts    |  8 +--
 .../cms-dialog/cms-dialog.component.html      | 18 ++++--
 .../cms-dialog/cms-dialog.component.scss      | 12 ++++
 .../widjet/cms-modal/cms-modal.component.html |  4 +-
 .../widjet/spinner/spinner.component.html     |  3 +
 .../widjet/spinner/spinner.component.scss     | 61 +++++++++++++++++++
 .../widjet/spinner/spinner.component.ts       | 10 +++
 src/app/_modules/widjet/widjet.module.ts      |  7 ++-
 src/vniigaz-v2/images/ico/spinner_48.svg      | 14 +++++
 9 files changed, 122 insertions(+), 15 deletions(-)
 create mode 100644 src/app/_modules/widjet/spinner/spinner.component.html
 create mode 100644 src/app/_modules/widjet/spinner/spinner.component.scss
 create mode 100644 src/app/_modules/widjet/spinner/spinner.component.ts
 create mode 100644 src/vniigaz-v2/images/ico/spinner_48.svg

diff --git a/src/app/_modules/pages/tree/item/pages-tree-item.component.ts b/src/app/_modules/pages/tree/item/pages-tree-item.component.ts
index 845547c..e8e5477 100644
--- a/src/app/_modules/pages/tree/item/pages-tree-item.component.ts
+++ b/src/app/_modules/pages/tree/item/pages-tree-item.component.ts
@@ -110,13 +110,11 @@ export class PagesTreeItemComponent {
 
   clone() {
     this.dialog.confirm(`Копировать страницу ${this.page.name}?`).subscribe(
-      resp=>{
-        
+      resp=>{        
         if (resp) {
-          this.dialog.waiting('Осуществляется копирование выбранных страниц')
+          this.dialog.waiting('Выполняется копирование данных. Подождите, пожалуйста')
           this.pagesService.clone(this.page.id, {recursive: true}).subscribe(res => {
-            this.dialog.waiting(null)
-            console.log('end')
+            this.dialog.waiting(null);
             this.listsService.refresh(this.parentListId);
             this.refresh();
           });
diff --git a/src/app/_modules/widjet/cms-dialog/cms-dialog.component.html b/src/app/_modules/widjet/cms-dialog/cms-dialog.component.html
index b4c757b..16c4bf2 100644
--- a/src/app/_modules/widjet/cms-dialog/cms-dialog.component.html
+++ b/src/app/_modules/widjet/cms-dialog/cms-dialog.component.html
@@ -30,11 +30,17 @@
 </cms-modal>
 
 <cms-modal *ngIf="showWaiting" [blocked]="true">
-    <div header>
-        <h4>Ожидание</h4>
-    </div>
-    <div body>
-        {{waiting}}
-    </div>
+
+        <div body>
+            <div>
+                {{waiting}}
+            </div>
+            <spinner>
+                <ico [size]="48" ico="spinner_48"></ico>
+            </spinner>
+        </div>
+
+
+    
 </cms-modal>
 
diff --git a/src/app/_modules/widjet/cms-dialog/cms-dialog.component.scss b/src/app/_modules/widjet/cms-dialog/cms-dialog.component.scss
index a86f021..c204c68 100644
--- a/src/app/_modules/widjet/cms-dialog/cms-dialog.component.scss
+++ b/src/app/_modules/widjet/cms-dialog/cms-dialog.component.scss
@@ -3,4 +3,16 @@
     justify-content: flex-end;
     gap: 20px;
     margin-bottom: 24px;
+}
+
+[body]{
+    display: flex;
+    flex-direction: column;
+    spinner {
+        align-self: center;
+        padding-top: 16px;
+    }
+    div{
+        text-align: center;
+    }
 }
\ No newline at end of file
diff --git a/src/app/_modules/widjet/cms-modal/cms-modal.component.html b/src/app/_modules/widjet/cms-modal/cms-modal.component.html
index 7735517..e3b7248 100644
--- a/src/app/_modules/widjet/cms-modal/cms-modal.component.html
+++ b/src/app/_modules/widjet/cms-modal/cms-modal.component.html
@@ -2,9 +2,9 @@
 
 </div>
 <div class="cms-modal-bar">
-    <div class="cms-modal-header">
+    <div class="cms-modal-header" *ngIf="!blocked">
         <ng-content select="[header]"></ng-content>
-        <ico (click)="cls()" *ngIf="!blocked"></ico>
+        <ico (click)="cls()"></ico>
     </div>
     <div class="cms-modal-body">
         <ng-content></ng-content>
diff --git a/src/app/_modules/widjet/spinner/spinner.component.html b/src/app/_modules/widjet/spinner/spinner.component.html
new file mode 100644
index 0000000..ce70674
--- /dev/null
+++ b/src/app/_modules/widjet/spinner/spinner.component.html
@@ -0,0 +1,3 @@
+<div class="spinner">
+    <ng-content></ng-content>
+</div>
diff --git a/src/app/_modules/widjet/spinner/spinner.component.scss b/src/app/_modules/widjet/spinner/spinner.component.scss
new file mode 100644
index 0000000..e68b39f
--- /dev/null
+++ b/src/app/_modules/widjet/spinner/spinner.component.scss
@@ -0,0 +1,61 @@
+.spinner {
+    display: inline-flex;
+     -webkit-animation-name: rotation;
+     -webkit-animation-duration: 2s;
+     -webkit-animation-iteration-count: infinite;
+     -webkit-animation-timing-function: linear;
+     -moz-animation-name: rotation;
+     -moz-animation-duration: 2s;
+     -moz-animation-iteration-count: infinite;
+     -moz-animation-timing-function: linear;
+     -o-animation-name: rotation;
+     -o-animation-duration: 2s;
+     -o-animation-iteration-count: infinite;
+     -o-animation-timing-function: linear;
+     animation-name: rotation;
+     animation-duration: 2s;
+     animation-iteration-count: infinite;
+     animation-timing-function: linear;
+ }
+  
+ @-webkit-keyframes rotation {
+     0% {-webkit-transform:rotate(0deg);
+         -moz-transform:rotate(0deg);
+         -o-transform:rotate(0deg);
+         transform:rotate(0deg);}
+     100% {-webkit-transform:rotate(360deg);
+         -moz-transform:rotate(360deg);
+         -o-transform:rotate(360deg);
+         transform:rotate(360deg);}
+ }
+ @-moz-keyframes rotation {
+     0% {-webkit-transform:rotate(0deg);
+         -moz-transform:rotate(0deg);
+         -o-transform:rotate(0deg);
+         transform:rotate(0deg);}
+     100% {-webkit-transform:rotate(360deg);
+         -moz-transform:rotate(360deg);
+         -o-transform:rotate(360deg);
+         transform:rotate(360deg);}
+ }
+ @-o-keyframes rotation {
+     0% {-webkit-transform:rotate(0deg);
+         -moz-transform:rotate(0deg);
+         -o-transform:rotate(0deg);
+         transform:rotate(0deg);}
+     100% {-webkit-transform:rotate(360deg);
+         -moz-transform:rotate(360deg);
+         -o-transform:rotate(360deg);
+         transform:rotate(360deg);}
+ }
+ @keyframes rotation {
+     0% {-webkit-transform:rotate(0deg);
+         -moz-transform:rotate(0deg);
+         -o-transform:rotate(0deg);
+         transform:rotate(0deg);}
+     100% {-webkit-transform:rotate(360deg);
+         -moz-transform:rotate(720deg);
+         -o-transform:rotate(360deg);
+         transform:rotate(360deg);}
+ }
+ 
\ No newline at end of file
diff --git a/src/app/_modules/widjet/spinner/spinner.component.ts b/src/app/_modules/widjet/spinner/spinner.component.ts
new file mode 100644
index 0000000..c5046fb
--- /dev/null
+++ b/src/app/_modules/widjet/spinner/spinner.component.ts
@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'spinner',
+  templateUrl: './spinner.component.html',
+  styleUrls: ['./spinner.component.scss']
+})
+export class SpinnerComponent {
+
+}
diff --git a/src/app/_modules/widjet/widjet.module.ts b/src/app/_modules/widjet/widjet.module.ts
index 686a167..ee2b1e0 100644
--- a/src/app/_modules/widjet/widjet.module.ts
+++ b/src/app/_modules/widjet/widjet.module.ts
@@ -15,6 +15,7 @@ import { SwiperGalleryComponent } from './swiper-gallery/swiper-gallery.componen
 import {FullscreenGalleryComponent} from "@app/_modules/widjet/swiper-gallery/fullscreen/fullscreen-gallery.component";
 import { CmsModalComponent } from './cms-modal/cms-modal.component';
 import { CmsDialogComponent } from './cms-dialog/cms-dialog.component';
+import { SpinnerComponent } from './spinner/spinner.component';
 
 
 @NgModule({
@@ -36,7 +37,8 @@ import { CmsDialogComponent } from './cms-dialog/cms-dialog.component';
     SwiperGalleryComponent,
     FullscreenGalleryComponent,
     CmsModalComponent,
-    CmsDialogComponent
+    CmsDialogComponent,
+    SpinnerComponent
   ],
   exports: [
     IcoComponent,
@@ -50,7 +52,8 @@ import { CmsDialogComponent } from './cms-dialog/cms-dialog.component';
     SwiperGalleryComponent,
     FullscreenGalleryComponent,
     CmsModalComponent,
-    CmsDialogComponent
+    CmsDialogComponent,
+    SpinnerComponent
   ]
 })
 export class WidjetModule {
diff --git a/src/vniigaz-v2/images/ico/spinner_48.svg b/src/vniigaz-v2/images/ico/spinner_48.svg
new file mode 100644
index 0000000..866f947
--- /dev/null
+++ b/src/vniigaz-v2/images/ico/spinner_48.svg
@@ -0,0 +1,14 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48" fill="none" id="ico">
+  <circle cx="24" cy="8" r="2" fill="#C2C2C2"/>
+  <circle cx="40" cy="24" r="2" fill="#F0F0F0"/>
+  <circle cx="8" cy="24" r="2" fill="#D1D1D1"/>
+  <circle cx="24" cy="40" r="2" fill="#E0E0E0"/>
+  <circle cx="32" cy="10.1406" r="2" fill="#FAFAFA"/>
+  <circle cx="37.8555" cy="32" r="2" fill="#EBEBEB"/>
+  <circle cx="10.1406" cy="16" r="2" fill="#CCCCCC"/>
+  <circle cx="16" cy="37.8594" r="2" fill="#DBDBDB"/>
+  <circle cx="16" cy="10.1406" r="2" fill="#C7C7C7"/>
+  <circle cx="37.8555" cy="16" r="2" fill="#F5F5F5"/>
+  <circle cx="10.1406" cy="32" r="2" fill="#D6D6D6"/>
+  <circle cx="32" cy="37.8594" r="2" fill="#E6E6E6"/>
+</svg>
\ No newline at end of file