From 1f90ddf32e12a2446280a0612e8254441f34356b Mon Sep 17 00:00:00 2001
From: Anna Kuznetsova1 <anna_kuznetsova1@epam.com>
Date: Tue, 15 Dec 2020 13:09:22 +0300
Subject: [PATCH 1/2] #160 Add delete button for user templates

---
 .../ui/dialog/template/template-lib.jsx       | 23 ++++++++++++++-----
 src/script/ui/state/templates/index.js        | 23 +++++++++++++++++++
 src/style/dialogs.less                        | 18 ++++++++++++---
 3 files changed, 55 insertions(+), 9 deletions(-)

diff --git a/src/script/ui/dialog/template/template-lib.jsx b/src/script/ui/dialog/template/template-lib.jsx
index 8ac0ee5fb2..75ade9467e 100644
--- a/src/script/ui/dialog/template/template-lib.jsx
+++ b/src/script/ui/dialog/template/template-lib.jsx
@@ -40,7 +40,8 @@ import {
   changeFilter,
   changeGroup,
   selectTmpl,
-  editTmpl
+  editTmpl,
+  deleteTmpl
 } from '../../state/templates'
 import { onAction } from '../../state'
 
@@ -151,11 +152,20 @@ class TemplateLib extends Component {
               className="struct"
               onClick={() => this.select(tmpl)}
             />
-            <button
-              className="attach-button"
-              onClick={() => this.props.onAttach(tmpl)}>
-              Edit
-            </button>
+            <div class="btn-container">
+              {this.props.group === 'User Templates' && (
+                <button
+                  className="delete-button"
+                  onClick={() => this.props.onDelete(tmpl)}>
+                  Delete
+                </button>
+              )}
+              <button
+                className="attach-button"
+                onClick={() => this.props.onAttach(tmpl)}>
+                Edit
+              </button>
+            </div>
           </div>
         ))}
       </div>
@@ -222,6 +232,7 @@ export default connect(
     onSelect: tmpl => dispatch(selectTmpl(tmpl)),
     onChangeGroup: group => dispatch(changeGroup(group)),
     onAttach: tmpl => dispatch(editTmpl(tmpl)),
+    onDelete: tmpl => dispatch(deleteTmpl(tmpl)),
     onOk: res => {
       dispatch(onAction({ tool: 'template', opts: res }))
       props.onOk(res)
diff --git a/src/script/ui/state/templates/index.js b/src/script/ui/state/templates/index.js
index 1337c813ac..cfe5386c48 100644
--- a/src/script/ui/state/templates/index.js
+++ b/src/script/ui/state/templates/index.js
@@ -91,6 +91,23 @@ export function editTmpl(tmpl) {
   }
 }
 
+export function deleteUserTmpl(tmpl) {
+  return {
+    type: 'TMPL_DELETE',
+    data: {
+      tmpl: tmpl
+    }
+  }
+}
+
+export function deleteTmpl(tmpl) {
+  return (dispatch, getState) => {
+    const lib = getState().templates.lib.filter(value => value !== tmpl)
+    dispatch(deleteUserTmpl(tmpl))
+    updateLocalStore(lib)
+  }
+}
+
 /* SAVE */
 export function saveUserTmpl(struct) {
   // TODO: structStr can be not in mol format => structformat.toString ...
@@ -148,6 +165,12 @@ function templatesReducer(state = initTmplsState, action) {
     return { ...state, attach }
   }
 
+  if (action.type === 'TMPL_DELETE') {
+    const currentState = Object.assign({}, state)
+    const lib = currentState.lib.filter(value => value !== action.data.tmpl)
+    return { ...currentState, lib: lib }
+  }
+
   return state
 }
 
diff --git a/src/style/dialogs.less b/src/style/dialogs.less
index e5e8c0e822..1b3104681b 100644
--- a/src/style/dialogs.less
+++ b/src/style/dialogs.less
@@ -156,11 +156,23 @@ form[role=dialog] {
 			background-color: lighten(@form-selected-background, 15%);
 		}
 	}
-	.attach-button {
-		margin: 0 4px 2px 0;
+	.btn-container {
+		display: flex;
+		flex-direction: row;
 		position: absolute;
-		bottom: 0;
 		right: 0;
+		bottom: 0;
+		margin: 0 4px 2px 0;
+		.attach-button {
+		margin: 0 0 0 0;
+		border-radius: 0;
+		border: 1px solid #ccc;
+		}
+		.delete-button {
+		margin: 0 0 0 0;
+		border-radius: 0;
+		border: 1px solid #ccc;
+		}
 	}
 	.struct {
 		position: absolute;

From 46a2c2c2e6150eb78b8166f9b5313ca3a9c2a4e3 Mon Sep 17 00:00:00 2001
From: Anna Kuznetsova1 <anna_kuznetsova1@epam.com>
Date: Wed, 16 Dec 2020 17:49:10 +0300
Subject: [PATCH 2/2] fix comment after review

---
 src/script/ui/dialog/template/template-lib.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/script/ui/dialog/template/template-lib.jsx b/src/script/ui/dialog/template/template-lib.jsx
index 75ade9467e..6d72c58dde 100644
--- a/src/script/ui/dialog/template/template-lib.jsx
+++ b/src/script/ui/dialog/template/template-lib.jsx
@@ -153,7 +153,7 @@ class TemplateLib extends Component {
               onClick={() => this.select(tmpl)}
             />
             <div class="btn-container">
-              {this.props.group === 'User Templates' && (
+              {tmpl.props.group === 'User Templates' && (
                 <button
                   className="delete-button"
                   onClick={() => this.props.onDelete(tmpl)}>