From 71466600c24c042faa3b56fe75b9cccb47769d98 Mon Sep 17 00:00:00 2001
From: mrPadre <51297778+mrPadre@users.noreply.github.com>
Date: Wed, 19 Aug 2020 13:52:59 +0300
Subject: [PATCH] =?UTF-8?q?HM-94=20=D0=9F=D0=B5=D1=80=D0=B5=D0=BC=D0=B5?=
 =?UTF-8?q?=D1=81=D1=82=D0=B8=D0=BB=20=D0=BA=D0=BD=D0=BE=D0=BF=D0=BA=D0=B8?=
 =?UTF-8?q?=20=D1=83=D0=BF=D1=80=D0=B0=D0=B2=D0=BB=D0=B5=D0=BD=D0=B8=D1=8F?=
 =?UTF-8?q?=20=D0=B2=D0=BD=D0=B8=D0=B7=20=D0=B8=20=D0=BE=D0=B6=D0=B8=D0=B2?=
 =?UTF-8?q?=D0=B8=D0=BB=20=D0=BA=D0=BD=D0=BE=D0=BF=D0=BA=D1=83=20=D1=80?=
 =?UTF-8?q?=D0=B5=D0=B4=D0=B0=D0=BA=D1=82=D0=B8=D1=80=D0=BE=D0=B2=D0=B0?=
 =?UTF-8?q?=D0=BD=D0=B8=D1=8F=D0=B1=20=D0=BF=D0=BE=D0=BA=D0=B0=20=D0=B1?=
 =?UTF-8?q?=D0=B5=D0=B7=20=D0=B2=D0=BE=D0=B7=D0=BC=D0=BE=D0=B6=D0=BD=D0=BE?=
 =?UTF-8?q?=D1=81=D1=82=D0=B8=20=D1=81=D0=BE=D1=85=D1=80=D0=B0=D0=BD=D0=B8?=
 =?UTF-8?q?=D1=82=D1=8C=20=D0=B8=D0=B7=D0=BC=D0=B5=D0=BD=D0=B5=D0=BD=D0=B8?=
 =?UTF-8?q?=D1=8F=20(#57)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app.html                                  | 37 ++++++++--------
 .../api-table-view-form/ApiTableViewForm.css  | 44 +++++++++++++++----
 .../api-table-view-form/ApiTableViewForm.js   | 36 ++++++++++++++-
 3 files changed, 87 insertions(+), 30 deletions(-)

diff --git a/src/app.html b/src/app.html
index f95174c..a528d43 100644
--- a/src/app.html
+++ b/src/app.html
@@ -388,29 +388,28 @@
 
     <!-- Шаблоны форм для просмотры api -->
     <template id="api-view-form">
-        <div class="h-100 overflow-auto">
+        <div class="h-100 overflow-auto Api__view-container">
             <p class="h2 mb-2 p-3 pr-5 sticky-top border-bottom bg-light"></p>
-            <div class="Api__view-controls">
-                <button class="Button__edit">
-                    <svg width="1em" height="1em" viewBox="0 0 16 16" class="Icon__edit bi bi-pencil"
-                        fill="currentColor" xmlns="http://www.w3.org/2000/svg">
-                        <path fill-rule="evenodd"
-                            d="M11.293 1.293a1 1 0 0 1 1.414 0l2 2a1 1 0 0 1 0 1.414l-9 9a1 1 0 0 1-.39.242l-3 1a1 1 0 0 1-1.266-1.265l1-3a1 1 0 0 1 .242-.391l9-9zM12 2l2 2-9 9-3 1 1-3 9-9z" />
-                        <path fill-rule="evenodd"
-                            d="M12.146 6.354l-2.5-2.5.708-.708 2.5 2.5-.707.708zM3 10v.5a.5.5 0 0 0 .5.5H4v.5a.5.5 0 0 0 .5.5H5v.5a.5.5 0 0 0 .5.5H6v-1.5a.5.5 0 0 0-.5-.5H5v-.5a.5.5 0 0 0-.5-.5H3z" />
-                    </svg>
+            
+            <form class="p-3"></form>
+            <div class="Api__view-controls stricky-bottom">
+                <button class="Button__edit btn btn-light">
+                    <i class="fas fa-pencil-alt Edit__icon">
+                        <span class="Button__edit-text"></span>
+                    </i>
+                    
                 </button>
-                <button class="Button__delete">
-                    <svg width="1em" height="1em" viewBox="0 0 16 16" class="Icon__delete bi bi-trash"
-                        fill="currentColor" xmlns="http://www.w3.org/2000/svg">
-                        <path
-                            d="M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0V6z" />
-                        <path fill-rule="evenodd"
-                            d="M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1v1zM4.118 4L4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4H4.118zM2.5 3V2h11v1h-11z" />
-                    </svg>
+                <button class="Button__delete btn btn-light">
+                    <i class="far fa-trash-alt">
+                        <span class="Button__delete-text"></span>
+                    </i>
+                </button>
+                <button class="Button__cancel btn btn-light">
+                    <i class="fas fa-ban">
+                        <span class="Button__cancel-text"></span>
+                    </i>
                 </button>
             </div>
-            <form class="p-3"></form>
         </div>
     </template>
 
diff --git a/src/components/api-table-view-form/ApiTableViewForm.css b/src/components/api-table-view-form/ApiTableViewForm.css
index 986f690..50e5e9d 100644
--- a/src/components/api-table-view-form/ApiTableViewForm.css
+++ b/src/components/api-table-view-form/ApiTableViewForm.css
@@ -2,17 +2,43 @@
     height: 200px;
 }
 .Api__view-controls {
-    position: absolute;
-    right: 40px;
-    top: 10px;
-    font-size: 20px;
-    z-index: 10000;
+    position: sticky;
+    bottom: 0;
+    width: 100%;
+    font-size: 1em;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-around;
+    background-color: white;
+    min-height: 50px;
 }
 .Button__delete {
-    background: none;
-    border: none;
+    width: 100%;
+}
+.Button__delete-text {
+    margin: 10px;
 }
 .Button__edit {
-    background: none;
-    border: none;
+    width: 100%;
+}
+.Button__edit-text {
+    margin: 10px;
+}
+.Button__cancel {
+    width: 100%;
+}
+.Button__cancel-text {
+    margin: 10px;
+}
+
+@media (max-width: 600px) {
+    .Button__delete-text {
+        display: none;
+    }
+    .Button__edit-text {
+        display: none;
+    }
+    .Button__cancel-text {
+        display: none;
+    }
 }
\ No newline at end of file
diff --git a/src/components/api-table-view-form/ApiTableViewForm.js b/src/components/api-table-view-form/ApiTableViewForm.js
index 1b52c93..73728d9 100644
--- a/src/components/api-table-view-form/ApiTableViewForm.js
+++ b/src/components/api-table-view-form/ApiTableViewForm.js
@@ -13,6 +13,7 @@ class ApiTableViewForm extends Component {
             content: this.mainNode
         });
         this.key = null;
+        this.isEdit = false;
 
         this.title = this.mainNode.querySelector('.h2');
         this.form = this.mainNode.querySelector('form');
@@ -22,10 +23,23 @@ class ApiTableViewForm extends Component {
                 this.deleteApi(this.key);
             }
         });
+        this.editBtn = this.mainNode.querySelector('.Button__edit');
+        this.addEventListener(this.editBtn, 'click', () => {
+            this.editApi();
+        });
+        this.editIcon = this.mainNode.querySelector('.Edit__icon');
+        this.editBtnText = this.mainNode.querySelector('.Button__edit-text');
+        this.editBtnText.textContent = 'Редактировать';
+
+        this.deleteBtnText = this.mainNode.querySelector('.Button__delete-text');
+        this.deleteBtnText.textContent = 'Удалить';
+
+        this.cancelBtnText = this.mainNode.querySelector('.Button__cancel-text');
+        this.cancelBtnText.textContent = 'Отменить';
 
         this.title.textContent = 'Информация о хранилище';
 
-        const inputs = [
+        this.inputs = [
             this.keyInput = this.createComponent(FormControl, this.form, {
                 id: 'api-key-input',
                 label: 'Название хранилища'
@@ -50,7 +64,7 @@ class ApiTableViewForm extends Component {
             }),
         ];
 
-        inputs.forEach((input) => {
+        this.inputs.forEach((input) => {
             input.disabled(true);
         });
     }
@@ -76,5 +90,23 @@ class ApiTableViewForm extends Component {
         this.next('deleteApi');
         this.sidebar.hide();
     }
+
+    editApi () {
+        if (!this.isEdit) {
+            this.inputs.forEach((input) => {
+                input.disabled(false);
+            });
+            this.editBtnText.textContent = 'Сохранить';
+            this.editIcon.className = 'fas fa-check Edit__icon';
+            this.isEdit = true;
+        } else {
+            this.inputs.forEach((input) => {
+                input.disabled(true);
+            });
+            this.editBtnText.textContent = 'Редактировать';
+            this.editIcon.className = 'fas fa-pencil-alt Edit__icon';
+            this.isEdit = false;
+        }
+    }
 }
 export default ApiTableViewForm;