Documents: Add input title and fix notifications errors - refs BT#21236

assets/vue/components/documents/FormNewDocument.vue

@@ -1,14 +1,17 @@
 <template>
   <q-form>
-    <q-input
-      id="item_title"
-      v-model="item.title"
-      :error="v$.item.title.$error"
-      :error-message="titleErrors"
-      :placeholder="$t('Title')"
-      @blur="v$.item.title.$touch()"
-      @input="v$.item.title.$touch()"
-    />
+
+    <div class="p-field">
+      <InputText
+        id="item_title"
+        v-model.trim="item.title"
+        :error="v$.item.title.$error"
+        :error-message="titleErrors"
+        :placeholder="$t('Title')"
+        @blur="v$.item.title.$touch()"
+        @input="v$.item.title.$touch()"
+      />
+    </div>
 
     <TinyEditor
       v-if="

assets/vue/mixins/CreateMixin.js

@@ -8,12 +8,18 @@ export default {
   methods: {
     formatDateTime,
     onCreated(item) {
+      let message;
       if (item['resourceNode']) {
-        this.showMessage(this.$i18n.t('{resource} created', {'resource': item['resourceNode'].title}));
+        message = this.$i18n && this.$i18n.t
+          ? this.$i18n.t('{resource} created', {'resource': item['resourceNode'].title})
+          : `${item['resourceNode'].title} created`;
       } else {
-        this.showMessage(this.$i18n.t('{resource} created', {'resource': item.title}));
+        message = this.$i18n && this.$i18n.t
+          ? this.$i18n.t('{resource} created', {'resource': item.title})
+          : `${item.title} created`;
       }
 
+      this.showMessage(message);
       let folderParams = this.$route.query;
 
       this.$router.push({

assets/vue/mixins/NotificationMixin.js

@@ -1,105 +1,28 @@
-import {mapFields} from 'vuex-map-fields';
-import Snackbar from "../components/Snackbar.vue";
-//import { useToast } from "vue-toastification";
-// inside of a Vue file
-
-//import { useQuasar } from 'quasar'
+import { mapFields } from 'vuex-map-fields';
 
 export default {
-    setup() {
-    },
-    computed: {
-        ...mapFields('notifications', ['color', 'show', 'subText', 'text', 'timeout'])
+  methods: {
+    showError(error) {
+      this.showMessage(error, 'error'); // Use 'error' for PrimeVue
     },
-    methods: {
-        cleanState() {
-            /*setTimeout(() => {
-                  this.show = false;
-                }, this.timeout
-            );*/
-        },
-        showError(error) {
-            this.showMessage(error, 'danger');
-        },
-        showMessage(message, type = 'success') {
-            /*const content = {
-                // Your component or JSX template
-                component: Snackbar,
-                // Props are just regular props, but these won't be reactive
-                props: {
-                    message: message
-                },
-                // Listeners will listen to and execute on event emission
-                listeners: {
-                    //click: () => console.log("Clicked!"),
-                    //myEvent: myEventHandler
-                }
-            };*/
-
-            let color = 'primary';
-            let icon = 'info';
-
-            switch (type) {
-                case 'info':
-                    break;
-                case 'success':
-                    color = 'green';
-                    break;
-                case 'error':
-                case 'danger':
-                    color = 'red';
-                    icon: 'error';
-                    break;
-                case 'warning':
-                    color = 'yellow';
-                    break;
-
-            }
-            if ('danger' === type) {
-                type = 'error';
-            }
-
-            this.$q.notify({
-                position: 'top',
-                timeout: 10000,
-                message: message,
-                color: color,
-                html: true,
-                multiLine: true,
-            })
-
-            /*const toast = useToast();
-            console.log('toast');
-            console.log(message);
-            console.log(content);
-
-            toast(content, {
-                type: type,
-                position: 'top-center',
-                timeout: 10000, // 10 seconds
-                closeOnClick: false,
-                pauseOnFocusLoss: true,
-                pauseOnHover: true,
-                draggable: true,
-                draggablePercent: 0.6,
-                showCloseButtonOnHover: false,
-                hideProgressBar: true,
-                closeButton: "button",
-                icon: true,
-                rtl: false
-            });*/
-
-            /*this.show = true;
-            this.color = color;
-            if (typeof message === 'string') {
-              this.text = message;
-              this.cleanState();
-
-              return;
-            }
-            this.text = message.message;
-            if (message.response) this.subText = message.response.data.message;
-            this.cleanState();*/
-        }
+    showMessage(message, type = 'success') {
+      // Convert message type to PrimeVue's severity
+      let severity = type;
+      if (type === 'danger') {
+        severity = 'error'; // PrimeVue uses 'error' instead of 'danger'
+      }
+
+      // Use PrimeVue's ToastService
+      this.$toast.add({
+        severity: severity,
+        summary: message,
+        detail: '',
+        life: 5000,  // Message duration in milliseconds
+        closable: true,  // Whether the message can be closed manually
+      });
     }
+  },
+  computed: {
+    ...mapFields('notifications', ['color', 'show', 'subText', 'text', 'timeout'])
+  },
 };