final commit before shipping forwarding registration and quick respon…

…se templates

deletetemplate.php

@@ -26,12 +26,12 @@
          $parameters['template_uuid'] = $_GET['template_uuid'];
          $deleted = $database->select($sql, $parameters, 'all');
       if($deleted){
-          message::add("template deleted.");
+          //message::add("template deleted.");
       } else {
           message::add("error deleting template.", 'negative');
       }
-      echo(json_encode($templates));
-      return json_encode($templates);
+      echo(json_encode($deleted));
+      return json_encode($deleted);
 //       unset($parameters);
 //         //do an edit template
 //         //$domain_uuid;

frontend/components/SendBox/SendBox.vue

@@ -2,7 +2,8 @@
 import { uploadText } from '../../lib/upload';
 import { CPIM } from '../../lib/CPIM';
 import { MessageData, GlobalState, emitter, state } from '../../lib/global';
-import TemplateDropUpItem from '../TemplateDropUp/TemplateDropUpItem.vue';
+import TemplateDropUpItem from '../TemplateDropUp/TemplateDropUpItem.vue'; 
+import TemplateDropUpProps from '../TemplateDropUp/TemplateDropUpItem.vue';
 import moment from 'moment';
 
 type PendingAttachment = {
@@ -13,6 +14,8 @@ type PendingAttachment = {
     uploadedURL: string,
 }
 
+type TemplateDropUpProps = typeof TemplateDropUpProps;
+
 // createRandomToken borrowed from sip.js, which does not export it :(
 // https://github.com/onsip/SIP.js/blob/main/src/core/messages/utils.ts#L85
 function createRandomToken(size: number, base = 32): string {
@@ -365,8 +368,11 @@ export default {
             console.log('Selection Recieved. You selected: ' + payload);
             this.enteredText= payload;
         });
-        emitter.on('backfill-template-complete',(payload) =>{
-            this.templates = payload;
+        emitter.on('backfill-template-complete',(payload:Array<TemplateDropUpProps>) =>{
+            if(payload.length >0){
+                this.templates = payload;
+
+            }
         });
 
         
@@ -383,25 +389,27 @@ export default {
                 <span class="attachment-upload-progress">{{ attachment.progress }}%</span>
             </div>
         </div>
-        <div class="sendbox">
+        <div class="sendbox ">
             <textarea maxlength="160" rows="3" class="textentry" autofocus="true" @keypress="keypress"
                 v-model.trim="enteredText" ref="textbox" v-on:paste="onPaste" name="text-message-entry-box"></textarea>
 
-
-            <label v-if="location === 'Conversation'" for="attachment-upload" class="btn btn-attach">
-                <span v-if="location === 'Conversation'" class="fas fa-paperclip fa-fw"></span>
-            </label>
-            <input v-if="location === 'Conversation'" type="file" id="attachment-upload" style="display: none;"
-                v-on:change="onAttach" multiple />
-            <button class="btn btn-send"
-                :disabled="(pendingAttachments.length == 0 && enteredText.length == 0) || !state.connected"
-                v-on:click="send"><span class="fas fa-paper-plane fa-fw"></span></button>
-            <div class="dropmedown">
-                <button class="btn btn-load dropdown-toggle dropbtn" data-toggle="dropmedown" aria-haspopup="true" aria-expanded="false" @click="loadTemplates">
-                    <i class="fa-clipboard dropbtn" aria-hidden="true"></i>
-                </button>
-                <div id="myDropdown" class="dropdown-content-menu"> 
-                    <TemplateDropUpItem v-for="(message) in this.templates" :templateName="message.template_name" :templateText="message.template_body" :key="message.template_name" />
+            <div class="btn-group align-middle dropup">
+                <label v-if="location === 'Conversation'" for="attachment-upload" class="btn btn-attach">
+                    <span v-if="location === 'Conversation'" class="fas fa-paperclip fa-fw"></span>
+                </label>
+                <input v-if="location === 'Conversation'" type="file" id="attachment-upload" style="display: none;"
+                    v-on:change="onAttach" multiple />
+                <button class="btn btn-send"
+                    :disabled="(pendingAttachments.length == 0 && enteredText.length == 0) || !state.connected"
+                    v-on:click="send"><span class="fas fa-paper-plane fa-fw"></span></button>
+                    <button class="btn dropdown-toggle dropbtn " data-toggle="dropmedown" aria-haspopup="true" aria-expanded="false" @click="loadTemplates">
+                        <span class=" dropbtn fas fa-comment-dots" aria-hidden="true"></span>
+                    </button>
+                <div class="dropmedown dropup">
+
+                    <div id="myDropdown" class="dropdown-content-menu"> 
+                        <TemplateDropUpItem v-for="(message) in this.templates" :templateName="message.template_name" :templateText="message.template_body" :key="message.template_name" />
+                    </div>
                 </div>
             </div>
 
@@ -514,16 +522,14 @@ export default {
     background-color: #3498DB;
     color: white;
     */
-    padding: 16px;
-    font-size: 16px;
     border: none;
     cursor: pointer;
   }
 
   
   .dropmedown {
-    position: relative;
-    display: inline-block;
+    /*position: relative; 
+    display: inline-block;*/
   }
   
   .dropdown-content-menu {
@@ -535,7 +541,7 @@ export default {
     box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
     z-index: 1;
     bottom:4rem;
-    left:-95px;
+    left:-160px;
   }
   
   .dropdown-content-menu a {

frontend/components/TemplateDropUp/TemplateDropUpItem.vue

@@ -1,7 +1,10 @@
 
 <script lang="ts">
 import {emitter} from '../../lib/global';
-
+type TemplateDropUpProps ={
+    templateName:String,
+    templateText:String
+}
 
 export default {
     name: 'TemplateDropUpItem',

frontend/components/TemplatePreview/TemplatePreview.vue

@@ -1,13 +1,13 @@
 <script lang='ts'>
 //lets add a delete button and an edit button
 import {emitter} from '../../lib/global';
-export type TemplatePreviewInterface = {
+type TemplatePreviewInterface = {
         link:{
             type:String,
             optional: true
         },
         template_uuid:{
-            type: String,
+            type: string,
             optional: true
         },
         body:{
@@ -89,7 +89,6 @@ export default {
         }
     },
     mounted(){
-        console.log(this.link);
     },
     //mounted click event emitter
 }
@@ -102,7 +101,7 @@ export default {
             <th scope='col' class="align-middle">{{this.description}}</th>
             <th scope="col" class="align-items-center align-middle">
                 <div class='m-auto'>
-                    <router-link aria="Edit Template Button" :to="this.link" class="btn-primary p-2 btn rounded align-middle text-center" v-bind="this.props" @click="menuLinkClickHandler">
+                    <router-link aria="Edit Template Button" :to="this.link" class="btn-primary p-2 btn rounded align-middle text-center"  @click="menuLinkClickHandler">
                         <span class="fa fa-cog"></span>
 
                     </router-link>    

frontend/components/TemplatesForm/TemplatesForm.vue

@@ -45,9 +45,18 @@ export default {
         },
         requestTemplateSave(event){
             event.preventDefault();
-            //console.log(this.formInputs)
-
-            emitter.emit('edit-template',this.formInputs)
+            console.log(this.formInputs)
+            if(this.formInputs.templateName  || this.formInputs.body ){
+                if(this.formInputs.body.length>160){
+                    alert("Error Submitting Form. Quick Response templates must contain less than 160 characters");
+                }
+                else if( this.formInputs.templateName.length > 0 && this.formInputs.body.length > 0){
+                    emitter.emit('edit-template',this.formInputs)
+                }                
+            }
+            else{
+                alert("Error Submitting Form. Quick Response Templates must include a Name and Body text.");
+            }
         }
     },
     data(){
@@ -66,8 +75,22 @@ export default {
             }
         }
     },
-    created(){
-
+    mounted(){
+        emitter.on('template-save-complete',() => {
+            this.formInputs = {
+                template_uuid:this.$route.query.email_template_uuid,
+                language: this.$route.query.template_language,
+                category:this.$route.query.template_category,
+                subcategory:this.$route.query.template_subcategory,
+                subject:this.$route.query.template_subject,
+                body:this.$route.query.template_body,
+                templateType:"Quick Response",
+                templateName:this.$route.query.template_name,
+                enabled:this.$route.query.template_enabled,
+                description:this.$route.query.template_description,
+            }
+            alert("Template Saved.")
+        })
     },
     
 
@@ -96,58 +119,58 @@ export default {
             <!-- template-form should probably be a component as well -->
             <!-- for now we need to make sure the app -> db connection works so we'll hard code -->
 
-            <div class="template-form ">
+            <div class=" form-group  justify-content-between align-middle align-items-center">
                 <div class="mt-form-row d-none">
                     <div class="category-template-uuid">Template UUID</div>
-                    <div class="area-for-text"> <textarea v-model="formInputs.template_uuid"></textarea></div>
+                    <div class="area-for-text"> <textarea class='form-control' v-model="formInputs.template_uuid"></textarea></div>
 
                 </div>
                 <div class="mt-form-row">
                     <div class="category-desc">Language</div>
-                    <div class="area-for-text"> <textarea v-model="formInputs.language"></textarea></div>
+                    <div class="area-for-text"> <textarea class='form-control' v-model="formInputs.language"></textarea></div>
 
                 </div>
                 <div class="mt-form-row">
                     <div class="category-desc mandatory">Template Name</div>
-                    <div class="area-for-text"> <textarea v-model="formInputs.templateName"></textarea></div>
+                    <div class="area-for-text"> <textarea class='form-control' v-model="formInputs.templateName"></textarea></div>
 
                 </div>
                 <div class="mt-form-row">
                     <div class="category-desc mandatory">Category</div>
-                    <div class="area-for-text"> <textarea v-model="formInputs.category"></textarea></div>
+                    <div class="area-for-text"> <textarea class='form-control' v-model="formInputs.category"></textarea></div>
 
                 </div>
                 <div class="mt-form-row">
                     <div class="category-desc">Subcategory</div>
-                    <div class="area-for-text"> <textarea v-model="formInputs.subcategory"></textarea></div>
+                    <div class="area-for-text"> <textarea class='form-control' v-model="formInputs.subcategory"></textarea></div>
 
                 </div>
                 <div class="mt-form-row">
                     <div class="category-desc">Subject</div>
-                    <div class="area-for-text"> <textarea v-model="formInputs.subject"></textarea></div>
+                    <div class="area-for-text"> <textarea class='form-control' v-model="formInputs.subject"></textarea></div>
 
                 </div>
                 <div class="mt-form-row">
                     <div class="category-desc mandatory">Body</div>
-                    <div class="area-for-text"> <textarea v-model="formInputs.body"></textarea></div>
+                    <div class="area-for-text"> <textarea class='form-control' v-model="formInputs.body"></textarea></div>
 
                 </div>
                 <div class="mt-form-row d-none">
                     <div class="category-desc">Type</div>
-                    <div class="area-for-text"> <textarea v-model="formInputs.templateType"></textarea></div>
+                    <div class="area-for-text"> <textarea class='form-control' v-model="formInputs.templateType"></textarea></div>
 
                 </div>
                 <div class="mt-form-row">
                     <div class="category-desc">Enabled</div>
                     <input type="checkbox" id="ENABLED_CHECKBOX" v-model="formInputs.enabled" />
-                    <label for="ENABLED_CHECKBOX">{{ formInputs.enabled }}</label> 
+                    <label for="ENABLED_CHECKBOX"></label> 
 
                 </div>
                 <div class="mt-form-row">
                     <div class="category-desc">Description</div>
-                    <div class="area-for-text"> <textarea v-model="formInputs.description"></textarea></div>
+                    <div class="area-for-text"> <textarea class='form-control' v-model="formInputs.description"></textarea></div>
                 </div>
-                <button class="submit" @click="requestTemplateSave">Submit</button>
+                <button class="submit btn btn-primary" @click="requestTemplateSave">Submit</button>
 
             </div>
 

frontend/components/TemplatesMenu/TemplatesMenu.vue

@@ -19,23 +19,33 @@ export default {
             emitter.emit('edit-template',this.formInputs)
         },
         buildTemplatePreview(values: loadTemplateResponse){
-            console.log(values);
+            //console.log(values);
             let tempPreview:TemplatePreviewInterface = {
                 link: '/manage_templates.php?'+ new URLSearchParams(values).toString(),
-                template_uuid : values.email_template_uuid,
-                body : values.template_body,
-                category : values.template_category,
-                subcategory : values.template_subcategory,
-                language : values.template_language,
-                subject : values.template_subject,
-                templateType : values.template_type,
-                enabled : values.template_enabled,
-                description : values.template_description,
-                templateName: values.template_name,
+                template_uuid : values.email_template_uuid.trim(),
+                body : values.template_body.trim(),
+                category : values.template_category.trim(),
+                subcategory : values.template_subcategory.trim(),
+                language : values.template_language.trim(),
+                subject : values.template_subject.trim(),
+                templateType : values.template_type.trim(),
+                enabled : values.template_enabled.trim(),
+                description : values.template_description.trim(),
+                templateName: values.template_name.trim(),
             }
-            console.log(tempPreview)
-                
+            //console.log(tempPreview)                
             return tempPreview
+        },
+        removeTemplate(targetUUID: string){
+            let index = 0;
+            for(let value in this.templatePreviews){
+                console.log(this.templatePreviews[value].template_uuid);
+                if(this.templatePreviews[value].template_uuid===targetUUID){
+                    this.templatePreviews.splice(index,1);
+                    console.log("match found removing template from list")
+                }
+                index++;
+            }
         }
     },
     data(){
@@ -60,11 +70,11 @@ export default {
             this.templatesLoaded = true;
             this.templatePreviews = typedTemplatesArray;
         });
-        
+        emitter.on('delete-template-complete',(temp:string) => {
+            console.log( temp);
+            this.removeTemplate(temp);
+        });        
     },
-    
-
-
 }
 </script>
 <template>

frontend/components/WebTextingContainer/WebTextingContainer.vue

@@ -255,6 +255,7 @@ export default {
             args.extension_uuid = this.extensionUUID;
             await deleteTemplate(args);
         });
+        
         emitter.on("register-email-forwarding", async (args: registerForwardingRequest) =>{
             args.extension_uuid = this.extensionUUID;
             await registerForwardAddress(args)

frontend/lib/deleteTemplate.ts

@@ -19,7 +19,7 @@ export async function deleteTemplate(args:deleteTemplateQuery) {
     try {
         // console.log(args);
         if(args){
-            console.log(args);
+            //console.log(args);
             let params: deleteTemplateQuery;
             if (args.template_uuid) {
               params = { template_uuid: args.template_uuid };
@@ -29,7 +29,6 @@ export async function deleteTemplate(args:deleteTemplateQuery) {
             }
             const initialResponse =  await fetch('/app/webtexting/deletetemplate.php?' + new URLSearchParams(params).toString()).then(r => r.json());
             temp = initialResponse;
-            console.log(temp);
 
             fetching = false;
             //console.log('backfillPreviews request complete');
@@ -46,9 +45,8 @@ export async function deleteTemplate(args:deleteTemplateQuery) {
         console.log('delete template error:', e);
     }finally{
 
-        emitter.emit('delete-template-complete',temp);
+        emitter.emit('delete-template-complete',(args.template_uuid));
         fetching= false;
-        console.log(temp)
         return  ( temp);
     }