saving and loasding defaultPrompts user properties

customprompts/mzta-custom-prompts.css

@@ -14,11 +14,16 @@
     }
 
     table th {
-        background-color: #23222B;
+        background-color: #4c4e58;
         border: 1px solid rgb(251, 251, 254);
         color: rgb(194, 194, 194);
         padding: 8px;
         text-align: left;
+        cursor: pointer;
+    }
+
+    table tr:nth-child(even) {
+        background-color: #2E2F36;
     }
 }
 

customprompts/mzta-custom-prompts.html

@@ -15,14 +15,14 @@
       <button id="btnNew">__MSG_customPrompts_btnNew__</button>
     </div>
     <div id="formNew">
-        <label for="txtIdNew">ID:</label>
+        <label for="txtIdNew">*ID:</label>
-        <input type="text" id="txtIdNew" name="id"> [Must be unique and without spaces]
+        <input type="text" id="txtIdNew" name="id" class="input_new"> [Must be unique and without spaces]
         <br>
-        <label for="txtNameNew">Name:</label>
+        <label for="txtNameNew">*Name:</label>
-        <input type="text" id="txtNameNew" name="name">
+        <input type="text" id="txtNameNew" name="name" class="input_new">
         <br>
-        <label for="txtTextNew">Text:</label>
+        <label for="txtTextNew">*Text:</label>
-        <textarea id="txtTextNew" name="text"></textarea>
+        <textarea id="txtTextNew" name="text" class="input_new"></textarea>
         <br>
         <label for="selectTypeNew">__MSG_customPrompts_add_to_menu__:</label>
         <select id="selectTypeNew" name="type">
@@ -56,15 +56,18 @@
           <option value="1">Custom text needed</option>
         </select>
         <br>
-        <button id="btnAddNew">__MSG_customPrompts_btnAddNewCommit__</button>
+        * Required fields.
+        <br>
+        <button id="btnAddNew" disabled>__MSG_customPrompts_btnAddNewCommit__</button>
     </div>
     <div id="all_prompts">
         <table>
             <thead>
               <tr>
-                <th>ID</th>
+                <th class="sort" data-sort="id">ID</th>
-                <th>Name</th>
+                <th class="sort" data-sort="name">Name</th>
-                <th>Text</th>
+                <th class="sort" data-sort="text">Text</th>
+                <th class="sort" data-sort="type">__MSG_customPrompts_add_to_menu__</th>
                 <th>Properties</th>
                 <th>Action</th>
               </tr>

customprompts/mzta-custom-prompts.js

@@ -16,14 +16,16 @@
  *  along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-import { getPrompts } from "../js/mzta-prompts.js";
+import { getPrompts, setDefaultPromptsProperties, setCustomPrompts } from "../js/mzta-prompts.js";
 
+var promptsList = null;
 var somethingChanged = false;
-var positionMax = 0;
+var positionMax_compose = 0;
+var positionMax_display = 0;
 
 document.addEventListener('DOMContentLoaded', async () => {
     let options = {
-        valueNames: [ { data: ['idnum'] }, 'id', 'name', 'text', 'type', 'action', 'position', { name: 'need_selected', attr: 'checked_val'}, { name: 'need_signature', attr: 'checked_val'}, { name: 'need_custom_text', attr: 'checked_val'}, { name: 'is_default', attr: 'is_default_val'}, { name: 'enabled', attr: 'checked_val'} ],
+        valueNames: [ { data: ['idnum'] }, 'is_default', 'id', 'name', 'text', 'type', 'action', 'position_compose', 'position_display', { name: 'need_selected', attr: 'checked_val'}, { name: 'need_signature', attr: 'checked_val'}, { name: 'need_custom_text', attr: 'checked_val'}, { name: 'enabled', attr: 'checked_val'} ],
         // item: `<tr>
         //     <td class="id"></td>
         //     <td class="name"></td>
@@ -40,41 +42,69 @@ document.addEventListener('DOMContentLoaded', async () => {
         //         <input type="checkbox" class="enabled"> Enabled
         //     </td>
         // </tr>`
-        item: function(values) {
+        item: function(values) {        //TODO: manage ACTION and TYPE edit with the select
+            let type_output = '';
+            switch(values.type){
+                case 0:
+                    type_output = `<span>__MSG_customPrompts_add_to_menu_always__</span>`;
+                    break;
+                case 1:
+                    type_output = `<span>__MSG_customPrompts_add_to_menu_reading__</span>`;
+                    break;
+                case 2:
+                    type_output = `<span>__MSG_customPrompts_add_to_menu_composing__</span>`;
+                    break;
+            }
+
             let output = `<tr ` + ((values.is_default == 1) ? 'class="is_default"':'') + `>
                 <td class="id"></td>
                 <td class="name"></td>
                 <td class="text"></td>
+                <td>` + ((values.is_default == 1) ? type_output :                
+                `<select class="input_mod">
+                <option value="0"` + ((values.type == 0) ? ' selected':'') + `>__MSG_customPrompts_add_to_menu_always__</option>
+                <option value="1"` + ((values.type == 1) ? ' selected':'') + `>__MSG_customPrompts_add_to_menu_reading__</option>
+                <option value="2"` + ((values.type == 2) ? ' selected':'') + `>__MSG_customPrompts_add_to_menu_composing__</option>
+              </select>`) +
+              `<span class="type hiddendata">type</span>
+              </td>
                 <td class="properties">
-                    Type: ` + values.type + `
+                    Action: <select class="input_mod"` + ((values.is_default == 1) ? ' disabled':'') + `>
+                    <option value="0"` + ((values.action == 0) ? ' selected':'') + `>Close button</option>
+                    <option value="1"` + ((values.action == 1) ? ' selected':'') + `>Do reply</option>
+                    <option value="2"` + ((values.action == 2) ? ' selected':'') + `>Substitute text</option>
+                  </select>
+                  <span class="action hiddendata">action</span>
                     <br>
-                    Action: ` + values.action + `
+                    <input type="checkbox" class="need_selected input_mod"` + ((values.is_default == 1) ? ' disabled':'') + `> Need Select
                     <br>
-                    <input type="checkbox" class="need_selected"` + ((values.is_default == 1) ? 'disabled':'') + `> Need Select
+                    <input type="checkbox" class="need_signature input_mod" ` + ((values.is_default == 1) ? ' disabled':'') + `> Need Signature
                     <br>
-                    <input type="checkbox" class="need_signature" ` + ((values.is_default == 1) ? 'disabled':'') + `> Need Signature
+                    <input type="checkbox" class="need_custom_text input_mod"` + ((values.is_default == 1) ? ' disabled':'') + `> Need Custom Text
                     <br>
-                    <input type="checkbox" class="need_custom_text"` + ((values.is_default == 1) ? 'disabled':'') + `> Need Custom Text
+                    <input type="checkbox" class="enabled input_mod"> Enabled
-                    <br>
+                    <span class="is_default hiddendata"></span>
-                    <input type="checkbox" class="enabled"> Enabled
+                    <span class="position_compose hiddendata"></span>
-                    <span class="is_default hiddendata">is_default</span>
+                    <span class="position_display hiddendata"></span>
                 </td>
                 <td>
-                ` + ((values.is_default == 0) ? '<button class="btnEdit">Edit</button>':'') + `
+                <button class="btnEditItem"` + ((values.is_default == 1) ? ' disabled':'') + `>Edit</button>
+                <br>
+                <button class="btnDeleteItem"` + ((values.is_default == 1) ? ' disabled':'') + `>Delete</button>
                </td>
             </tr>`;
             //console.log('>>>>>>>> values.name: ' + JSON.stringify(values.name));
-            positionMax = Math.max(positionMax, values.position);
+            positionMax_compose = Math.max(positionMax_compose, values.position_compose);
+            positionMax_display = Math.max(positionMax_display, values.position_display);
             return output;
         }
     };
 
-    //let values = getDefaultPrompts_withProps; // test in browser
+    let values = await getPrompts();
-    let values = await getPrompts();  // production
 
     console.log('>>>>>>>>>>>>>>>> values: ' + JSON.stringify(values));
 
-    let promptsList = new List('all_prompts', options, values);
+    promptsList = new List('all_prompts', options, values);
 
     checkSelectedBoxes();
 
@@ -83,6 +113,8 @@ document.addEventListener('DOMContentLoaded', async () => {
     btnSave.addEventListener('click', (e) => {
         e.preventDefault();
         saveAll();
+        clearFields();
+        document.getElementById('btnSave').disabled = true;
     });
 
     const btnNew = document.getElementById('btnNew');
@@ -91,7 +123,7 @@ document.addEventListener('DOMContentLoaded', async () => {
         document.getElementById('formNew').style.display = 'block';
     });
 
-    document.querySelectorAll('input').forEach(element => {
+    document.querySelectorAll('.input_mod').forEach(element => {
         element.addEventListener('change', (e) => {
             e.preventDefault();
             btnSave.disabled = false;
@@ -99,9 +131,9 @@ document.addEventListener('DOMContentLoaded', async () => {
         });
     })
 
-    let btnEdit_elements = document.querySelectorAll(".btnEdit")
+    let btnEditItem_elements = document.querySelectorAll(".btnEditItem");
-    if(btnEdit_elements) {
+    if(btnEditItem_elements) {
-        btnEdit_elements.forEach(element => {
+        btnEditItem_elements.forEach(element => {
             element.addEventListener('click', (e) => {
                 e.preventDefault();
                 const tr = e.target.parentNode.parentNode;          //TODO
@@ -110,6 +142,42 @@ document.addEventListener('DOMContentLoaded', async () => {
         });
     }
 
+    let btnDeleteItem_elements = document.querySelectorAll(".btnDeleteItem");
+    if(btnDeleteItem_elements) {
+        btnDeleteItem_elements.forEach(element => {
+            element.addEventListener('click', (e) => {
+                e.preventDefault();
+                const check_confirm = window.confirm("Sei sicuro di voler cancellare questo elemento?");
+                if(!check_confirm) {
+                    return;
+                }
+                const tr = e.target.parentNode.parentNode;          //TODO
+                console.log('>>>>>>>> tr: ' + tr.getAttribute('data-idnum'));
+            });
+        });
+    }
+
+    let btnNew_elements = document.querySelectorAll(".input_new");
+    if(btnNew_elements) {
+        btnNew_elements.forEach(element => {
+            element.addEventListener('change', (e) => {
+                e.preventDefault();
+                checkFields();
+            });
+        });
+    }
+
+    let checkbox_elements = document.querySelectorAll("input[type='checkbox']");
+    if(checkbox_elements) {
+        checkbox_elements.forEach(element => {
+            element.addEventListener('change', (e) => {
+                e.preventDefault();
+                element.setAttribute('checked_val', element.checked ? '1' : '0');
+                console.log('>>>>>>>> checked_val: ' + element.getAttribute('checked_val'));
+            });
+        });
+    }
+
     i18n.updateDocument();
 
     //To add a new item
@@ -125,29 +193,72 @@ document.addEventListener('DOMContentLoaded', async () => {
     const btnAddNew = document.getElementById('btnAddNew');
     btnAddNew.addEventListener('click', (e) => {    //TODO
         e.preventDefault();
+        if(!checkFields()) {
+            return;
+        }
         //TODO check the id must be unique and without spaces
         promptsList.add({
-            id: txtIdNew.value,
+            id: txtIdNew.value.trim(),
-            name: txtNameNew.value,
+            name: txtNameNew.value.trim(),
-            text: txtTextNew.value,
+            text: txtTextNew.value.trim(),
             type: selectTypeNew.value,
             action: selectActionNew.value,
             need_selected: selectNeedSelectedNew.value,
             need_signature: selectNeedSignatureNew.value,
             need_custom_text: selectNeedCustomTextNew.value,
             enabled: 1,
-            position: positionMax + 1,
+            position_compose: positionMax_compose + 1,
+            position_display: positionMax_display + 1,
             is_default: 0,
         });
         //checkSelectedBoxes([selectTypeNew, selectActionNew, selectNeedSelectedNew, selectNeedSignatureNew, selectNeedCustomTextNew]);
         checkSelectedBoxes();
         clearFields();
+        somethingChanged = true;
+        document.getElementById('btnSave').disabled = false;
+        i18n.updateDocument();
     });
 
-
 }, { once: true });
  
 
+function checkFields() {
+    //console.log('>>>>>>>>>>>>> typeof promptsList: ' + typeof promptsList);
+    //console.log('>>>>>>>>>>>>> Array.isArray(promptsList): ' + Array.isArray(promptsList));
+    // the id must be unique and without spaces
+    let is_error = false;
+    let id_value = document.getElementById('txtIdNew').value.trim();
+    if ((id_value == '')||
+    (/\s/.test(id_value))) {
+        inputSetError('txtIdNew');
+        is_error = true;
+    } else {
+        let exists = promptsList.get("id", id_value);
+        //console.log('>>>>>>>>>>>>> exists: ' + JSON.stringify(exists));
+        if(exists && exists.length > 0) {
+            inputSetError('txtIdNew');
+            is_error = true;
+        } else {
+            inputClearError('txtIdNew');
+        }
+    }
+    if (document.getElementById('txtNameNew').value.trim() == '') {
+        inputSetError('txtNameNew');
+        is_error = true;
+    } else {
+        inputClearError('txtNameNew');
+    }
+    if (document.getElementById('txtTextNew').value.trim() == '') {
+        inputSetError('txtTextNew');
+        is_error = true;
+    } else {
+        inputClearError('txtTextNew');
+    }
+    document.getElementById('btnAddNew').disabled = is_error;
+    return !is_error;
+}
+
+
 function clearFields() {
     document.getElementById('txtIdNew').value = '';
     document.getElementById('txtNameNew').value = '';
@@ -160,6 +271,14 @@ function clearFields() {
     document.getElementById('formNew').style.display = 'none';
 }
 
+function inputSetError(input) {
+    document.getElementById(input).style.borderColor = 'red';
+}
+
+function inputClearError(input) {
+    document.getElementById(input).style.borderColor = 'green';
+}
+
 function checkSelectedBoxes(checkboxes = null) {
     if(checkboxes == null){
         checkboxes = [
@@ -183,8 +302,23 @@ function checkSelectedBoxes(checkboxes = null) {
 }
 
 //Save all prompts
-function saveAll() {
+function saveAll() {                //TODO
-    //TODO
+    somethingChanged = false;
+    if(promptsList != null) {
+        promptsList.reIndex();
+        let newPrompts = promptsList.items.map(item => {
+            // For each item in the array, return only the '_values' part
+            return item.values();
+        });
+        // newPrompts.forEach(prompt => {
+        //     console.log('>>>>>>>>>>>>> id: ' + JSON.stringify(prompt));
+        // });
+        console.log('>>>>>>>>>>>>> saveAll: ' + JSON.stringify(newPrompts));
+        let newDefaultPrompts = newPrompts.filter(item => item.is_default == 1);
+        console.log('>>>>>>>>>>>>> newDefaultPrompts: ' + JSON.stringify(newDefaultPrompts));
+        //let newCustomPrompts = newPrompts.filter(item => item.is_default == 0);
+        setDefaultPromptsProperties(newDefaultPrompts);
+    }
 }
 
 // window.addEventListener('beforeunload', function (event) {

js/mzta-prompts.js

@@ -151,10 +151,8 @@ export async function getPrompts(){
 
 
 async function getDefaultPrompts_withProps() {
-    //  let prefs = await browser.storage.sync.get({_default_prompts_properties: null}); //production
+    let prefs = await browser.storage.sync.get({_default_prompts_properties: null}); //production
     let defaultPrompts_prop = [...defaultPrompts];
-    let prefs = {}; //test
-    prefs._default_prompts_properties = null; //test
     if(prefs._default_prompts_properties === null){     // no default prompts properties saved
         let pos = 1;
         defaultPrompts_prop.forEach((prompt) => {
@@ -163,7 +161,7 @@ async function getDefaultPrompts_withProps() {
             prompt.enabled = 1;
             pos++;
         })
-    } else {    // we have saved the default prompts properties
+    } else {    // we have saved default prompts properties
         defaultPrompts_prop.forEach((prompt) => {
             prompt.position_compose = prefs._default_prompts_properties[prompt.id].position_compose;
             prompt.position_display = prefs._default_prompts_properties[prompt.id].position_display;
@@ -188,6 +186,7 @@ export async function setDefaultPromptsProperties(prompts) {
     prompts.forEach((prompt) => {
         default_prompts_properties[prompt.id] = {position_compose: prompt.position_compose, position_display: prompt.position_display, enabled: prompt.enabled};
     });
+    console.log('>>>>>>>>>>>>>> default_prompts_properties: ' + JSON.stringify(default_prompts_properties));
     await browser.storage.sync.set({_default_prompts_properties: default_prompts_properties});
 }