From 89d49d56efacac943fc46aeb24405b9e8387e1b7 Mon Sep 17 00:00:00 2001
From: Sohan Deshar <s.deshar@metaways.de>
Date: Tue, 16 Jan 2024 13:46:27 +0000
Subject: [PATCH] VueAlert: Ext component to show text hints and alerts.

---
 .../js/widgets/dialog/MultiOptionsDialog.js   |  3 ++
 tine20/Tinebase/translations/de.po            |  3 ++
 tine20/library/ExtJS/ext-custom.js            |  1 +
 .../src/widgets/form/VueAlert/VueAlert.vue    | 13 ++++++++
 .../ExtJS/src/widgets/form/VueAlert/index.js  | 32 +++++++++++++++++++
 5 files changed, 52 insertions(+)
 create mode 100644 tine20/library/ExtJS/src/widgets/form/VueAlert/VueAlert.vue
 create mode 100644 tine20/library/ExtJS/src/widgets/form/VueAlert/index.js

diff --git a/tine20/Tinebase/js/widgets/dialog/MultiOptionsDialog.js b/tine20/Tinebase/js/widgets/dialog/MultiOptionsDialog.js
index 776e705627d..d9fd12ab27b 100644
--- a/tine20/Tinebase/js/widgets/dialog/MultiOptionsDialog.js
+++ b/tine20/Tinebase/js/widgets/dialog/MultiOptionsDialog.js
@@ -90,6 +90,9 @@ Ext.extend(Tine.widgets.dialog.MultiOptionsDialog, Ext.FormPanel, {
                     columns: 1,
                     name: 'optionGroup',
                     items: this.getItems()
+                }, {
+                    xtype: 'v-alert',
+                    label: i18n._('Please choose an option.')
                 }]
             }]
         }];
diff --git a/tine20/Tinebase/translations/de.po b/tine20/Tinebase/translations/de.po
index a89aa5c9e68..5884c893822 100644
--- a/tine20/Tinebase/translations/de.po
+++ b/tine20/Tinebase/translations/de.po
@@ -2401,6 +2401,9 @@ msgstr "Passwort generieren"
 msgid "What would you like to do?"
 msgstr "Was möchten Sie machen?"
 
+msgid "Please choose an option."
+msgstr "Bitte wählen Sie eine Option aus."
+
 #: js/widgets/dialog/MultiOptionsDialog.js:32
 #: js/widgets/dialog/MultiOptionsDialog.js:179
 #: js/widgets/dialog/FileListDialog.js:32
diff --git a/tine20/library/ExtJS/ext-custom.js b/tine20/library/ExtJS/ext-custom.js
index 23f3179186a..bbaaac7825f 100644
--- a/tine20/library/ExtJS/ext-custom.js
+++ b/tine20/library/ExtJS/ext-custom.js
@@ -227,6 +227,7 @@ require('./src/widgets/form/FieldSet');
 require('./src/widgets/form/HtmlEditor');
 require('./src/widgets/form/TimeField');
 require('./src/widgets/form/Label');
+require('./src/widgets/form/VueAlert');
 require('./src/widgets/form/Action');
 require('./src/widgets/form/VTypes');
 
diff --git a/tine20/library/ExtJS/src/widgets/form/VueAlert/VueAlert.vue b/tine20/library/ExtJS/src/widgets/form/VueAlert/VueAlert.vue
new file mode 100644
index 00000000000..f3a26e7192c
--- /dev/null
+++ b/tine20/library/ExtJS/src/widgets/form/VueAlert/VueAlert.vue
@@ -0,0 +1,13 @@
+<template>
+  <div class="bootstrap-scope">
+    <BAlert :model-value="true" variant="primary" class="h-25">{{label}}</BAlert>
+  </div>
+</template>
+
+<script setup>
+import {defineProps} from 'vue'
+
+defineProps({
+  label: String,
+})
+</script>
diff --git a/tine20/library/ExtJS/src/widgets/form/VueAlert/index.js b/tine20/library/ExtJS/src/widgets/form/VueAlert/index.js
new file mode 100644
index 00000000000..7557147ddb4
--- /dev/null
+++ b/tine20/library/ExtJS/src/widgets/form/VueAlert/index.js
@@ -0,0 +1,32 @@
+import BootstrapVueNext from 'bootstrap-vue-next'
+
+Ext.form.VueAlert = Ext.extend(Ext.BoxComponent, {
+    vueHandle: null,
+    label: '',
+    props: null,
+
+    initComponent: async function() {
+        const {createApp, h, reactive} = window.vue
+        const {default: VueAlert} = await import(/* webpackChunkName: "Tinebase/vue/VueAlert"*/'./VueAlert.vue')
+        this.props = reactive({
+            label: this.label
+        })
+        this.vueHandle = createApp({
+            render: () => h(VueAlert, this.props)
+        });
+        this.vueHandle.use(BootstrapVueNext)
+        this.vueHandle.mount('#'+this.el.id)
+    },
+
+    beforeDestroy: function() {
+        this.vueHandle.unmount()
+    },
+
+    setText: function(t){
+        // in case the props or vueHandle is not initialized
+        if(!this.props || !this.vueHandle) return;
+        this.props.label = t
+    }
+})
+
+Ext.reg('v-alert', Ext.form.VueAlert)
\ No newline at end of file