delete QR set command and API

public/scripts/extensions/quick-reply/api/QuickReplyApi.js

@@ -2,18 +2,21 @@ import { QuickReply } from '../src/QuickReply.js';
 import { QuickReplyContextLink } from '../src/QuickReplyContextLink.js';
 import { QuickReplySet } from '../src/QuickReplySet.js';
 import { QuickReplySettings } from '../src/QuickReplySettings.js';
+import { SettingsUi } from '../src/ui/SettingsUi.js';
 
 
 
 
 export class QuickReplyApi {
     /**@type {QuickReplySettings}*/ settings;
+    /**@type {SettingsUi}*/ settingsUi;
 
 
 
 
-    constructor(/**@type {QuickReplySettings}*/settings) {
+    constructor(/**@type {QuickReplySettings}*/settings, /**@type {SettingsUi}*/settingsUi) {
         this.settings = settings;
+        this.settingsUi = settingsUi;
     }
 
 
@@ -322,9 +325,9 @@ export class QuickReplyApi {
      * @param {Boolean} [props.disableSend] whether or not to send the quick replies or put the message or slash command into the char input box
      * @param {Boolean} [props.placeBeforeInput] whether or not to place the quick reply contents before the existing user input
      * @param {Boolean} [props.injectInput] whether or not to automatically inject the user input at the end of the quick reply
-     * @returns {QuickReplySet} the new quick reply set
+     * @returns {Promise<QuickReplySet>} the new quick reply set
      */
-    createSet(name, {
+    async createSet(name, {
         disableSend,
         placeBeforeInput,
         injectInput,
@@ -334,9 +337,19 @@ export class QuickReplyApi {
         set.disableSend = disableSend ?? false;
         set.placeBeforeInput = placeBeforeInput ?? false;
         set.injectInput = injectInput ?? false;
-        QuickReplySet.list.push(set);
+        const oldSet = this.getSetByName(name);
-        set.save();
+        if (oldSet) {
-        //TODO settings UI must be updated
+            QuickReplySet.list.splice(QuickReplySet.list.indexOf(oldSet), 1, set);
+        } else {
+            const idx = QuickReplySet.list.findIndex(it=>it.name.localeCompare(name) == 1);
+            if (idx > -1) {
+                QuickReplySet.list.splice(idx, 0, set);
+            } else {
+                QuickReplySet.list.push(set);
+            }
+        }
+        await set.save();
+        this.settingsUi.rerender();
         return set;
     }
 
@@ -348,9 +361,9 @@ export class QuickReplyApi {
      * @param {Boolean} [props.disableSend] whether or not to send the quick replies or put the message or slash command into the char input box
      * @param {Boolean} [props.placeBeforeInput] whether or not to place the quick reply contents before the existing user input
      * @param {Boolean} [props.injectInput] whether or not to automatically inject the user input at the end of the quick reply
-     * @returns {QuickReplySet} the altered quick reply set
+     * @returns {Promise<QuickReplySet>} the altered quick reply set
      */
-    updateSet(name, {
+    async updateSet(name, {
         disableSend,
         placeBeforeInput,
         injectInput,
@@ -362,8 +375,22 @@ export class QuickReplyApi {
         set.disableSend = disableSend ?? false;
         set.placeBeforeInput = placeBeforeInput ?? false;
         set.injectInput = injectInput ?? false;
-        set.save();
+        await set.save();
-        //TODO settings UI must be updated
+        this.settingsUi.rerender();
         return set;
     }
+
+    /**
+     * Delete an existing quick reply set.
+     *
+     * @param {String} name name of the existing quick reply set
+     */
+    async deleteSet(name) {
+        const set  = this.getSetByName(name);
+        if (!set) {
+            throw new Error(`No quick reply set with name "${name}" found.`);
+        }
+        await set.delete();
+        this.settingsUi.rerender();
+    }
 }

public/scripts/extensions/quick-reply/index.js

@@ -21,6 +21,32 @@ import { SettingsUi } from './src/ui/SettingsUi.js';
 const _VERBOSE = true;
 export const log = (...msg) => _VERBOSE ? console.log('[QR2]', ...msg) : null;
 export const warn = (...msg) => _VERBOSE ? console.warn('[QR2]', ...msg) : null;
+/**
+ * Creates a debounced function that delays invoking func until after wait milliseconds have elapsed since the last time the debounced function was invoked.
+ * @param {Function} func The function to debounce.
+ * @param {Number} [timeout=300] The timeout in milliseconds.
+ * @returns {Function} The debounced function.
+ */
+export function debounceAsync(func, timeout = 300) {
+    let timer;
+    /**@type {Promise}*/
+    let debouncePromise;
+    /**@type {Function}*/
+    let debounceResolver;
+    return (...args) => {
+        clearTimeout(timer);
+        if (!debouncePromise) {
+            debouncePromise = new Promise(resolve => {
+                debounceResolver = resolve;
+            });
+        }
+        timer = setTimeout(() => {
+            debounceResolver(func.apply(this, args));
+            debouncePromise = null;
+        }, timeout);
+        return debouncePromise;
+    };
+}
 
 
 const defaultConfig = {
@@ -154,7 +180,7 @@ const init = async () => {
         }
     }
 
-    quickReplyApi = new QuickReplyApi(settings);
+    quickReplyApi = new QuickReplyApi(settings, manager);
     const slash = new SlashCommandHandler(quickReplyApi);
     slash.init();
 };

public/scripts/extensions/quick-reply/src/QuickReplySet.js

@@ -1,7 +1,6 @@
 import { getRequestHeaders } from '../../../../script.js';
 import { executeSlashCommands } from '../../../slash-commands.js';
-import { debounce } from '../../../utils.js';
+import { debounceAsync, warn } from '../index.js';
-import { warn } from '../index.js';
 import { QuickReply } from './QuickReply.js';
 
 export class QuickReplySet {
@@ -44,7 +43,7 @@ export class QuickReplySet {
 
 
     constructor() {
-        this.save = debounce(()=>this.performSave(), 200);
+        this.save = debounceAsync(()=>this.performSave(), 200);
     }
 
     init() {

public/scripts/extensions/quick-reply/src/SlashCommandHandler.js

@@ -49,8 +49,9 @@ export class SlashCommandHandler {
         before  - bool - place QR before user input
         inject  - bool - inject user input automatically (if disabled use {{input}})
         `.trim();
-        registerSlashCommand('qr-set-create', (args, name)=>this.createSet(name, args), ['qr-presetadd'], `<span class="monospace" style="white-space:pre-line;">[arguments] (label)\n  arguments:\n    ${presetArgs}</span> – create a new preset (overrides existing ones), example: <tt>/qr-presetadd MyNewPreset</tt>`, true, true);
+        registerSlashCommand('qr-set-create', (args, name)=>this.createSet(name, args), ['qr-presetadd'], `<span class="monospace" style="white-space:pre-line;">[arguments] (name)\n  arguments:\n    ${presetArgs}</span> – create a new preset (overrides existing ones), example: <tt>/qr-set-add MyNewPreset</tt>`, true, true);
-        registerSlashCommand('qr-set-update', (args, name)=>this.updateSet(name, args), ['qr-presetupdate'], `<span class="monospace" style="white-space:pre-line;">[arguments] (label)\n  arguments:\n    ${presetArgs}</span> – update an existing preset, example: <tt>/qr-presetupdate enabled=false MyPreset</tt>`, true, true);
+        registerSlashCommand('qr-set-update', (args, name)=>this.updateSet(name, args), ['qr-presetupdate'], `<span class="monospace" style="white-space:pre-line;">[arguments] (name)\n  arguments:\n    ${presetArgs}</span> – update an existing preset, example: <tt>/qr-set-update enabled=false MyPreset</tt>`, true, true);
+        registerSlashCommand('qr-set-delete', (args, name)=>this.deleteSet(name), ['qr-presetdelete'], `<span class="monospace" style="white-space:pre-line;">(name)\n  arguments:\n    ${presetArgs}</span> – delete an existing preset, example: <tt>/qr-set-delete MyPreset</tt>`, true, true);
     }
 
 
@@ -234,5 +235,11 @@ export class SlashCommandHandler {
             toastr.error(ex.message);
         }
     }
+    deleteSet(name) {
+        try {
+            this.api.deleteSet(name ?? '');
+        } catch (ex) {
+            toastr.error(ex.message);
+        }
     }
 }