From 27a27a9ed70cb44b35fe5b99e242360af1ab2600 Mon Sep 17 00:00:00 2001
From: Bernhard Reiter <bernhard@intevation.de>
Date: Tue, 14 Feb 2017 11:55:58 +0100
Subject: [PATCH] Contacts: adds pendingOrgs display

 * Adds computation of OrgClass class, so that 'pending' is different.
 * Adds a conditional Commit button.
---
 src/components/dash/Contacts.vue | 22 +++++++++++++++++++---
 src/components/dash/OrgCard.vue  |  8 +++++++-
 2 files changed, 26 insertions(+), 4 deletions(-)

diff --git a/src/components/dash/Contacts.vue b/src/components/dash/Contacts.vue
index 83b4dcb..2e5baac 100644
--- a/src/components/dash/Contacts.vue
+++ b/src/components/dash/Contacts.vue
@@ -105,6 +105,17 @@
                 v-on:click="newOrg"><i class="fa fa-plus-square-o" style="margin-right:.2em"></i>New
         </button>
 
+        <org-card v-for="(org, index) of pendingOrgs" class="col-md-6 col-sm-6"
+                  v-bind:org="org" status="pending"
+                  v-on:clone="cloneOrg(index, $event)"></org-card>
+
+        <button v-if="pendingOrgIDs.length !== 0"
+                class="btn btn-danger btn-lg btn-block"
+                v-on:click="commitPendingOrgs"
+                ><i class="fa fa-pencil-square-o"
+                    style="margin-right:.2em"></i>Commit
+        </button>
+
       </div> <!-- .col... -->
     </div> <!-- /.row -->
   </section>
@@ -127,8 +138,8 @@ module.exports = {
       manualOrgs: [],
       autoOrgIDs: [], // list of ids of auto entries we currently show
       autoOrgs: [],
-      pendingOrgIDs: [], // entries we currently edit
-      pendingOrgs: []
+      pendingOrgIDs: [], // entries we currently edit, null when needing new id
+      pendingOrgs: []  // objects, potentially changed, to be written back
     }
   },
   components: {
@@ -246,6 +257,8 @@ module.exports = {
     },
     newOrg: function () {
       console.log('newOrg() called')
+      // TODO get a template
+      // push it to pendingOrgs
     },
     cloneOrg: function (index, event) {
       console.log('cloneOrg() called with index: ' + index +
@@ -253,7 +266,10 @@ module.exports = {
       // deep-copy the org we want to edit
       var newOrg = JSON.parse(JSON.stringify(this.autoOrgs[index]))
       this.pendingOrgs.push(newOrg)
-      this.pendingOrgIDs.push(newOrg['id'])
+      this.pendingOrgIDs.push(null)
+    },
+    commitPendingOrgs () {
+      console.log('commitPendingOrgs() called')
     }
   }
 }
diff --git a/src/components/dash/OrgCard.vue b/src/components/dash/OrgCard.vue
index f3d13ab..596e617 100644
--- a/src/components/dash/OrgCard.vue
+++ b/src/components/dash/OrgCard.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="panel panel-primary">
+  <div class="panel" v-bind:class="computedPanelClass">
     <div class="panel-heading">
       <h3 class="panel-title">
         <i class="fa fa-address-book-o rme"></i>
@@ -54,6 +54,12 @@ module.exports = {
         }
       }
       return newOrg
+    },
+    computedPanelClass: function () {
+      return {
+        'panel-primary': this.status !== 'pending',
+        'panel-danger': this.status === 'pending'
+      }
     }
   },
   methods: {