From 8701df1acc547b04179b877ef9cfefc36bbbff79 Mon Sep 17 00:00:00 2001
From: garrettmills <garrett@glmdev.tech>
Date: Fri, 22 May 2020 09:05:17 -0500
Subject: [PATCH] Cobalt form improvements - on insert/update action & taller
 multiselect

---
 TODO.text                                      |  4 ----
 app/assets/app/cobalt/Form.component.js        | 12 +++++++++++-
 app/assets/app/resource/iam/Policy.resource.js |  8 ++++++++
 app/assets/less/dashboard.less                 |  4 ++++
 4 files changed, 23 insertions(+), 5 deletions(-)

diff --git a/TODO.text b/TODO.text
index 2b6b711..d2c4dcd 100644
--- a/TODO.text
+++ b/TODO.text
@@ -1,10 +1,6 @@
 - MFA recovery codes handling
 - Forgot password handling
     - Admin password reset mechanism -> flag users as needing PW resets
-- Cobalt form - when multiselect make selection box taller
-- Cobalt form - after action handlers
-    - e.g. after insert perform action
-    - e.g. after update perform action, &c.
 - OAuth2 -> support refresh tokens
 - Traps -> support session traps; convert MFA challenge to use session trap
     - Allow setting user trap from web UI
diff --git a/app/assets/app/cobalt/Form.component.js b/app/assets/app/cobalt/Form.component.js
index 295a80c..378e03e 100644
--- a/app/assets/app/cobalt/Form.component.js
+++ b/app/assets/app/cobalt/Form.component.js
@@ -32,7 +32,7 @@ const template = `
                     <label :for="uuid+field.field">{{ field.name }}</label>
                     <select
                         :id="uuid+field.field" 
-                        class="form-control" 
+                        :class="['form-control', (field.type.endsWith('.multiple') ? 'multi' : 'normal')]" 
                         v-model="data[field.field]"
                         :required="Array.isArray(field.required) ? field.required.includes(mode) : field.required"
                         :readonly="mode === 'view' || (Array.isArray(field.readonly) ? field.readonly.includes(mode) : field.readonly)"
@@ -238,10 +238,19 @@ export default class FormComponent extends Component {
     async on_create() {
         this.id = this.data.id
         this.mode = 'update'
+        if ( this.definition.handlers && this.definition.handlers.insert ) {
+            await action_service.perform(this.definition.handlers.insert)
+        }
         await this.vue_on_create(true)
         location_service.set_query(`mode=update&id=${this.id}`)
     }
 
+    async on_update() {
+        if ( this.definition.handlers && this.definition.handlers.update ) {
+            await action_service.perform(this.definition.handlers.update)
+        }
+    }
+
     data_to_save() {
         const data = Object.assign({}, this.data)
         for ( const field of this.definition.fields ) {
@@ -270,6 +279,7 @@ export default class FormComponent extends Component {
                 await this.on_create()
             } else if (this.mode === 'update') {
                 await this.resource_class.update(this.id, this.data_to_save())
+                await this.on_update()
             }
 
             this.error_message = ''
diff --git a/app/assets/app/resource/iam/Policy.resource.js b/app/assets/app/resource/iam/Policy.resource.js
index c7a9147..2b850fd 100644
--- a/app/assets/app/resource/iam/Policy.resource.js
+++ b/app/assets/app/resource/iam/Policy.resource.js
@@ -146,6 +146,14 @@ class PolicyResource extends CRUDBase {
                 if: (form_data) => form_data.target_type === 'api_scope'
             },
         ],
+        /*handlers: {
+            insert: {
+                action: 'back',
+            },
+            update: {
+                action: 'back',
+            },
+        },*/
     }
 }
 
diff --git a/app/assets/less/dashboard.less b/app/assets/less/dashboard.less
index 16daa29..8d5b381 100644
--- a/app/assets/less/dashboard.less
+++ b/app/assets/less/dashboard.less
@@ -82,3 +82,7 @@ body {
     opacity: 1;
   }
 }
+
+select.multi {
+  min-height: 200px;
+}