Merge remote-tracking branch 'origin/GH#2834' into GH#2834

assets/css/app.scss

@@ -168,10 +168,6 @@
   }
 }
 
-.mdi {
-  @apply align-middle inline-flex leading-none;
-}
-
 //@import 'primevue-md-light-indigo/theme.css';
 //@import '~primevue/resources/primevue.min.css';
 //@import '~primeflex/primeflex.css';

assets/css/scss/_catalog_course.scss

@@ -16,28 +16,6 @@
   position: absolute;
   top: 50%;
 }
-.p-input-icon-left > .p-inputtext {
-  padding-left: 2.5rem;
-}
-.p-inputtext {
-  font-size: 1rem;
-  color: #495057;
-  background: #ffffff;
-  padding: 0.75rem 0.75rem;
-  border: 1px solid #ced4da;
-  transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
-  appearance: none;
-  border-radius: 6px;
-}
-.p-inputtext:enabled:hover {
-  border-color: #3B82F6;
-}
-.p-inputtext:enabled:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  box-shadow: 0 0 0 0.2rem #BFDBFE;
-  border-color: #3B82F6;
-}
 ::v-deep(.p-datatable.p-datatable-courses) {
   .p-datatable-header {
     padding: 1rem;

assets/css/scss/_catalog_session.scss

@@ -19,28 +19,6 @@
   position: absolute;
   top: 50%;
 }
-.p-input-icon-left > .p-inputtext {
-  padding-left: 2.5rem;
-}
-.p-inputtext {
-  font-size: 1rem;
-  color: #495057;
-  background: #ffffff;
-  padding: 0.75rem 0.75rem;
-  border: 1px solid #ced4da;
-  transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
-  appearance: none;
-  border-radius: 6px;
-}
-.p-inputtext:enabled:hover {
-  border-color: #3B82F6;
-}
-.p-inputtext:enabled:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  box-shadow: 0 0 0 0.2rem #BFDBFE;
-  border-color: #3B82F6;
-}
 .orders-subtable {
   padding: 1rem;
 }

assets/css/scss/atoms/_dropdown.scss

@@ -1,108 +1,90 @@
-select.p-dropdown {
-  @apply p-4;
-}
-
 .p-dropdown {
-  @apply bg-white border border-solid border-support-3 p-3.5 rounded-lg transition gap-3
-    hover:border-primary;
+  @apply border border-support-3 bg-white rounded-lg transition w-full duration-200
+    hover:border-primary hover:text-gray-90 hover:outline-0 hover:outline-none;
 
+  &.p-dropdown-clearable {
     .p-dropdown-label {
-    @apply outline-none;
-  }
-
-  .p-dropdown-trigger {
-    .p-dropdown-trigger-icon {
-      @apply text-gray-90;
-    }
-  }
-
-  &.p-inputwrapper-filled {
-    ~ label {
-      @apply text-primary text-caption;
+      //padding-right: nth($inputPadding, 2) + $primeIconFontSize;
     }
   }
 
-  &.p-invalid {
-    @apply border-error text-error;
+  .p-dropdown-label {
+    @apply bg-transparent border-none
+      focus:outline-0 focus:outline-none;
 
-    ~ label {
-      @apply text-error;
-    }
+    &.p-placeholder {
+      //color: $inputPlaceholderTextColor;
     }
   }
 
-.p-float-label {
-  .p-dropdown {
-    @apply w-full;
-
-    &.p-inputwrapper-focus {
-      @apply border-primary;
-
-      ~ label {
-        @apply top-0 text-primary text-caption;
+  .p-dropdown-trigger {
+    @apply bg-transparent rounded-r-lg w-12;
   }
 
-      .p-placeholder {
-        @apply text-body-1 text-gray-90;
-      }
+  .p-dropdown-clear-icon {
   }
 
-    &.p-inputwrapper-filled {
-      ~ label {
-        @apply top-0;
-      }
-    }
+  &.p-invalid.p-component {
+    @apply border-error text-error;
   }
 }
 
-$color_1: #3f3f46;
-
 .p-dropdown-panel {
-  @apply bg-white text-gray-50 border-none rounded-lg drop-shadow-lg;
+  @apply bg-white rounded-lg text-gray-90 shadow-lg;
 
   .p-dropdown-header {
-    @apply p-2 border-none bg-gray-15 rounded-t-lg;
+    //padding: $inputListHeaderPadding;
+    //border-bottom: $inputListHeaderBorder;
+    //color: $inputListHeaderTextColor;
+    //background: $inputOverlayHeaderBg;
+    //margin: $inputListHeaderMargin;
+    //border-top-right-radius: $borderRadius;
+    //border-top-left-radius: $borderRadius;
 
-    .p-dropdown-filter.p-inputtext {
-      @apply py-2 px-3.5 -mr-10;
+    .p-dropdown-filter {
+      //padding-right: nth($inputPadding, 2) + $primeIconFontSize;
+      //margin-right: -1 * (nth($inputPadding, 2) + $primeIconFontSize);
     }
 
     .p-dropdown-filter-icon {
-      @apply right-4 text-gray-90;
+      //right: nth($inputPadding, 2);
+      //color: $inputIconColor;
     }
   }
 
   .p-dropdown-items {
-    @apply p-0;
+    @apply py-1.5;
 
     .p-dropdown-item {
-      @apply outline-none m-0 px-3 py-2 border-none text-gray-50 text-body-2;
+      @apply px-4 py-2 transition text-body-2 outline-0 outline-none text-gray-90;
 
-      &:not(.p-highlight) {
-        &:not(.p-disabled) {
-          &.p-focus,
-          &:hover {
-            @apply text-gray-90;
+      &.p-highlight {
+        @apply bg-support-3 text-support-4;
+
+        &.p-focus {
         }
       }
+
+      &:not(.p-highlight):not(.p-disabled) {
+        &.p-focus,
+        &:hover {
+          @apply bg-support-1;
         }
       }
-
-    .p-dropdown-item.p-highlight {
-      @apply text-primary;
     }
 
     .p-dropdown-item-group {
-      margin: 0;
-      padding: 0.75rem 1rem;
-      color: $color_1;
-      background: #ffffff;
-      font-weight: 600;
+      //margin: $submenuHeaderMargin;
+      //padding: $submenuHeaderPadding;
+      //color: $submenuHeaderTextColor;
+      //background: $submenuHeaderBg;
+      //font-weight: $submenuHeaderFontWeight;
     }
+
     .p-dropdown-empty-message {
-      padding: 0.75rem 1rem;
-      color: $color_1;
-      background: transparent;
+      //padding: $inputListItemPadding;
+      //color: $inputListItemTextColor;
+      //background: $inputListItemBg;
     }
   }
 }

assets/css/scss/atoms/_form.scss

@@ -14,7 +14,7 @@
   [multiple],
   textarea,
   select {
-    @apply text-body-1 text-gray-90
+    @apply text-body-1 text-gray-90 outline-0 outline-none
       placeholder:text-gray-90
       focus:outline-none focus:outline-offset-0 focus:ring-0 focus:ring-offset-0;
   }
@@ -26,12 +26,6 @@
       @apply hidden;
     }
   }
-
-  form {
-    small {
-      @apply text-caption;
-    }
-  }
 }
 
 @layer components {
@@ -63,6 +57,11 @@
   }
 }
 
+.field {
+  > small {
+    @apply text-caption;
+  }
+}
 
 .p-error {
   @apply text-error;
@@ -71,3 +70,35 @@
 .p-disabled {
   @apply opacity-60;
 }
+
+.p-float-label {
+  label {
+    @apply left-4 text-support-3 bg-transparent transition-all duration-200;
+  }
+
+  input:focus,
+  input.p-filled,
+  textarea:focus,
+  textarea.p-filled,
+  .p-inputwrapper-focus,
+  .p-inputwrapper-filled {
+    ~ label {
+      @apply bg-white px-1 text-primary top-0 left-2;
+    }
+  }
+
+  .p-invalid ~ label {
+    @apply text-error;
+  }
+
+  input:focus,
+  input.p-filled,
+  textarea:focus,
+  textarea.p-filled,
+  .p-inputwrapper-focus,
+  .p-inputwrapper-filled {
+    &.p-invalid ~ label {
+      @apply text-error;
+    }
+  }
+}

assets/css/scss/atoms/_input_text.scss

@@ -1,61 +1,55 @@
-input.p-inputtext {
-  @apply bg-white border border-solid border-support-3 p-3.5 rounded-lg transition outline-none w-full
-    hover:border-primary focus:border-primary;
-
-  &:focus,
-  &.p-filled {
-    ~ {
-      label {
-        @apply text-caption text-primary;
-      }
-    }
-  }
+.p-inputtext {
+  @apply border border-support-3 px-4 py-3 text-body-1 bg-white rounded-lg text-gray-90 transition w-full duration-200
+    placeholder:text-support-3
+    hover:border-primary hover:text-gray-90 hover:outline-0 hover:outline-none
+    focus:border-primary focus:text-gray-90 hover:outline-0 hover:outline-none;
 
   &.p-invalid.p-component {
-    @apply border-error text-error;
+    @apply border-error
+      placeholder:text-error;
   }
 
   &.p-inputtext-sm {
-    @apply px-2 py-1;
+    @apply px-2 py-1.5 text-body-2;
   }
 
   &.p-inputtext-lg {
-    @apply px-6 py-5;
-  }
-
-  &.p-invalid {
-    ~ label,
-    &:focus ~ label {
-      @apply text-error;
-    }
+    @apply py-4;
   }
 }
 
-.p-input-icon-right {
-  > .p-inputtext {
-    @apply pr-10;
+.p-input-icon-left > i:first-of-type {
+  //left: nth($inputPadding, 2);
+  //color: $inputIconColor;
 }
 
-  > i:last-of-type {
-    @apply right-3;
-  }
+.p-input-icon-left > .p-inputtext {
+  //padding-left: nth($inputPadding, 2) * 2 + $primeIconFontSize;
 }
 
-.p-float-label {
-  input.p-inputtext {
-    @apply w-full;
+.p-input-icon-left.p-float-label > label {
+  //left: nth($inputPadding, 2) * 2 + $primeIconFontSize;
+}
 
-    &:focus,
-    &.p-filled {
-      ~ {
-        label {
-          @apply top-0;
+.p-input-icon-right > i:last-of-type  {
+  //right: nth($inputPadding, 2);
+  //color: $inputIconColor;
 }
+
+.p-input-icon-right > .p-inputtext {
+  //padding-right: nth($inputPadding, 2) * 2 + $primeIconFontSize;
 }
+
+.p-inputtext-sm {
+  .p-inputtext {
+    //@include scaledFontSize($inputTextFontSize, $scaleSM);
+    //@include scaledPadding($inputPadding, $scaleSM);
   }
 }
 
-  > label {
-    @apply bg-white duration-200 left-2 px-1 text-support-3;
+.p-inputtext-lg {
+  .p-inputtext {
+    //@include scaledFontSize($inputTextFontSize, $scaleLG);
+    //@include scaledPadding($inputPadding, $scaleLG);
   }
 }

assets/css/scss/atoms/_toast.scss

@@ -0,0 +1,46 @@
+$color_1: #01579B;
+$color_2: #1B5E20;
+$color_3: #7f6003;
+$color_4: #B71C1C;
+
+.p-toast {
+  @apply opacity-95;
+
+  &-message {
+    @apply rounded-md mb-3.5 shadow-gray-30 shadow-md;
+
+    &-content {
+      @apply py-4 px-6 gap-2.5;
+
+      .p-toast-message-text {
+        @apply text-body-1;
+      }
+      .p-toast-message-icon {
+      }
+      .p-toast-summary {
+        @apply font-semibold;
+      }
+      .p-toast-detail {
+      }
+    }
+
+    .p-toast-icon-close {
+      @apply rounded-full transition duration-200 w-4 h-6
+        focus:outline-none;
+    }
+
+    &.p-toast-message-info {
+      @apply bg-primary text-white;
+    }
+
+    &.p-toast-message-success {
+      @apply bg-success text-white;
+    }
+    &.p-toast-message-warn {
+      @apply bg-warning text-gray-90;
+    }
+    &.p-toast-message-error {
+      @apply bg-error text-white;
+    }
+  }
+}

assets/css/scss/index.scss

@@ -13,11 +13,11 @@
 
 @import "settings/typography";
 
+@import "atoms/form";
 @import "atoms/avatar";
 @import "atoms/buttons";
 @import "atoms/checkbox";
 @import "atoms/dropdown";
-@import "atoms/form";
 @import "atoms/fieldset";
 @import "atoms/inline_message";
 @import "atoms/input_switch";
@@ -29,6 +29,7 @@
 @import "atoms/radio";
 @import "atoms/skeleton";
 @import "atoms/tags";
+@import "atoms/toast";
 
 @import "molecules/course_tool";
 @import "molecules/datepicker";

assets/vue/App.vue

@@ -3,18 +3,32 @@
     :is="layout"
     :show-breadcrumb="route.meta.showBreadcrumb"
   >
-    <transition-group
-      name="p-message"
-      tag="div"
+    <Toast
+      position="top-center"
     >
-      <Message
-        v-for="(toastObj, index) in flashMessageList"
-        :key="index"
-        :severity="toastObj.severity"
-      >
-        <div v-html="toastObj.detail" />
-      </Message>
-    </transition-group>
+      <template #message="slotProps">
+        <span
+          :class="{
+            'mdi-close-outline': 'error' === slotProps.message.severity,
+            'mdi-information-outline': 'info' === slotProps.message.severity,
+            'mdi-check-outline': 'success' === slotProps.message.severity,
+            'mdi-alert-outline': 'warn' === slotProps.message.severity
+          }"
+          class="p-toast-message-icon mdi"
+        />
+        <div class="p-toast-message-text">
+          <span
+            v-if="slotProps.message.summary"
+            class="p-toast-summary"
+            v-text="slotProps.message.summary"
+          />
+          <div
+            class="p-toast-detail"
+            v-html="slotProps.message.detail"
+          />
+        </div>
+      </template>
+    </Toast>
     <slot />
     <div
       id="legacy_content"
@@ -32,8 +46,9 @@ import {ApolloClient, createHttpLink, InMemoryCache} from '@apollo/client/core';
 import {useStore} from "vuex";
 import axios from "axios";
 import {isEmpty} from "lodash";
-import Message from "primevue/message";
 import ConfirmDialog from "primevue/confirmdialog";
+import Toast from 'primevue/toast';
+import { useToast } from 'primevue/usetoast';
 
 const apolloClient = new ApolloClient({
   link: createHttpLink({
@@ -47,6 +62,8 @@ provide(DefaultApolloClient, apolloClient);
 const route = useRoute();
 const router = useRouter();
 
+const toast = useToast();
+
 const layout = computed(
   () => {
     const queryParams = new URLSearchParams(window.location.search);
@@ -137,10 +154,6 @@ const payload = {isAuthenticated, user};
 
 store.dispatch('security/onRefresh', payload);
 
-const flashMessageList = ref([]);
-
-provide('flashMessageList', flashMessageList);
-
 onMounted(() => {
   const app = document.getElementById('app');
 
@@ -152,9 +165,10 @@ onMounted(() => {
 
   for (const key in flashes) {
     for (const flashText in flashes[key]) {
-      flashMessageList.value.push({
+      toast.add({
         severity: key,
         detail: flashes[key][flashText],
+        life: 3500,
       });
     }
   }
@@ -164,14 +178,16 @@ axios.interceptors.response.use(
   undefined,
   (error) => new Promise(() => {
     if (401 === error.response.status) {
-      flashMessageList.value.push({
+      toast.add({
         severity: 'warn',
         detail: error.response.data.error,
+        life: 3500,
       });
     } else if (500 === error.response.status) {
-      flashMessageList.value.push({
+      toast.add({
         severity: 'warn',
         detail: error.response.data.detail,
+        life: 3500,
       });
     }
 

assets/vue/components/ccalendarevent/Form.vue

@@ -20,8 +20,8 @@
       />
     </div>
 
-    <div class="flex flex-col md:flex-row gap-5">
-      <div class="md:w-1/2 flex flex-col gap-5">
+    <div class="flex flex-col md:flex-row gap-x-5">
+      <div class="md:w-1/2 flex flex-col">
         <div class="field">
           <div class="p-float-label">
             <Calendar
@@ -87,7 +87,7 @@
         />
       </div>
 
-      <div class="md:w-1/2 flex flex-col gap-5">
+      <div class="md:w-1/2 flex flex-col">
         <div
           v-t="'Invitees'"
           class="text-h6"
@@ -98,9 +98,10 @@
           :item="item"
           :links-type="linksType"
           :show-status="false"
+          show-share-with-user
         />
 
-        <div class="field flex-row">
+        <div class="field-checkbox">
           <Checkbox
             id="is_collective"
             v-model="item.collective"

assets/vue/components/page/Form.vue

@@ -6,6 +6,7 @@
           id="item_title"
           v-model="v$.item.title.$model"
           :class="{ 'p-invalid': v$.item.title.$invalid }"
+          type="text"
         />
         <label
           v-t="'Title'"

assets/vue/components/resource_links/ShowLinks.vue

@@ -1,31 +1,42 @@
 <template>
-  <div v-if="item && item['resourceLinkListFromEntity']">
-    <v-card>
-      <v-list-item
-        v-for="link in item['resourceLinkListFromEntity']"
+  <div
+    v-for="(link, index) in item.resourceLinkListFromEntity"
+    :key="index"
+    class="field space-y-2"
   >
-        <v-list-item-content>
-          <div v-if="link['course']">
-            <v-icon icon="mdi-book" />
-            {{ $t('Course') }}: {{ link.course.resourceNode.title }}
+    <div
+      v-if="link.course"
+      :class="{ 'text-right text-body-2': editStatus }"
+    >
+      <span class="mdi mdi-book" />
+      {{ t('Course: {0}', [ link.course.resourceNode.title ]) }}
     </div>
 
-          <div v-if="link['session']">
-            <v-icon icon="mdi-book-open" />
-            {{ $t('Session') }}: {{ link.session.name }}
+    <div
+      v-if="link.session"
+      :class="{ 'text-right text-body-2': editStatus }"
+    >
+      <span class="mdi mdi-book-open" />
+      {{ t('Session: {0}', [ link.session.name ]) }}
     </div>
 
-          <div v-if="link['group']">
-            <v-icon icon="mdi-people" />
-            {{ $t('Group') }}: {{ link.group.resourceNode.title }}
+    <div
+      v-if="link.group"
+      :class="{ 'text-right text-body-2': editStatus }"
+    >
+      <span class="mdi mdi-people" />
+      {{ t('Group: {0}', [ link.group.resourceNode.title ]) }}
     </div>
 
-          <div v-if="link['userGroup']">
-            {{ $t('Class') }}: {{ link.userGroup.resourceNode.title }}
-          </div>
+    <div
+      v-if="link.userGroup"
+      v-t="{ path: 'Class: {0}', args: [ link.userGroup.resourceNode.title ] }"
+    />
 
-          <div v-if="link['user']">
-            <v-icon icon="mdi-account" />
+    <div
+      v-if="link.user"
+    >
+      <span class="mdi mdi-account" />
       <!--  @todo add avatar        -->
       <!--  <q-avatar size="32px">-->
       <!--    <img :src="link.user.illustrationUrl + '?w=80&h=80&fit=crop'" />-->
@@ -33,34 +44,44 @@
       {{ link.user.username }}
     </div>
 
-          <div v-if="showStatus">
-            {{ $t('Status') }}: {{ link.visibilityName }}
-          </div>
+    <div
+      v-if="showStatus"
+      v-t="{ path: 'Status: {0}', args: [link.visibilityName] }"
+    />
 
-          <q-select
+    <div
       v-if="editStatus"
+    >
+      <div class="p-float-label">
+        <Dropdown
           v-model="link.visibility"
-            :options="visibilityList"
-            emit-value
-            filled
-            label="Status"
-            map-options
+          :input-id="`link-${link.id}-status`"
+          :options="visibilityOptions"
+          option-label="label"
+          option-value="value"
         />
-        </v-list-item-content>
-      </v-list-item>
-    </v-card>
+        <label
+          v-t="'Status'"
+          :for="`link-${link.id}-status`"
+        />
+      </div>
+    </div>
   </div>
 </template>
 
-<script>
+<script setup>
 import { RESOURCE_LINK_PUBLISHED, RESOURCE_LINK_DRAFT } from "./visibility";
+import { useI18n } from 'vue-i18n';
+
+const { t } = useI18n();
 
-export default {
-  name: 'ShowLinks',
-  props: {
+defineProps({
   item: {
     type: Object,
-      required: true
+    required: true,
+    default: () => ({
+      resourceLinkListFromEntity: [],
+    })
   },
   showStatus: {
     type: Boolean,
@@ -72,16 +93,10 @@ export default {
     required: false,
     default: false
   }
-  },
-  setup() {
-    const visibilityList = [
-      {value: RESOURCE_LINK_PUBLISHED, label: 'Published'},
-      {value: RESOURCE_LINK_DRAFT, label: 'Draft'},
-    ];
+});
 
-    return {
-      visibilityList,
-    };
-  }
-};
+const visibilityOptions = [
+  { value: RESOURCE_LINK_PUBLISHED, label: t('Published') },
+  { value: RESOURCE_LINK_DRAFT, label: t('Draft') },
+];
 </script>

assets/vue/composables/datatableCreate.js

@@ -1,7 +1,7 @@
-import { inject } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRoute, useRouter } from 'vue-router';
 import { useStore } from 'vuex';
+import { useToast } from 'primevue/usetoast';
 
 export function useDatatableCreate (servicePrefix) {
     const moduleName = servicePrefix.toLowerCase();
@@ -11,14 +11,15 @@ export function useDatatableCreate (servicePrefix) {
     const route = useRoute();
     const { t } = useI18n();
 
-    const flashMessageList = inject('flashMessageList');
+    const toast = useToast();
 
     function onCreated (item) {
-        flashMessageList.value.push({
+        toast.add({
             severity: 'success',
             detail: t('{resource} created', {
                 'resource': item['resourceNode'] ? item['resourceNode'].title : item.title,
             }),
+            life: 3500,
         });
 
         let folderParams = route.query;

assets/vue/composables/datatableList.js

@@ -121,10 +121,11 @@ export function useDatatableList (servicePrefix) {
 
     onUpdateOptions(options.value);
 
-    flashMessageList.value.push({
+    toast.add({
       severity: 'success',
-      detail: t('Deleted')
-    })
+      detail: t('Deleted'),
+      life: 3500,
+    });
   }
 
   return {

assets/vue/composables/datatableUpdate.js

@@ -1,8 +1,9 @@
-import { computed, inject, ref, watch } from 'vue';
+import { computed, ref, watch } from 'vue';
 import { useStore } from 'vuex';
 import { useRoute } from 'vue-router';
 import { isEmpty } from 'lodash';
 import { useI18n } from 'vue-i18n';
+import { useToast } from 'primevue/usetoast';
 
 export function useDatatableUpdate (servicePrefix) {
     const moduleName = servicePrefix.toLowerCase();
@@ -11,7 +12,7 @@ export function useDatatableUpdate (servicePrefix) {
     const route = useRoute();
     const { t } = useI18n();
 
-    const flashMessageList = inject('flashMessageList');
+    const toast = useToast();
 
     const isLoading = computed(() => store.getters[`${moduleName}/isLoading`]);
 
@@ -74,11 +75,12 @@ export function useDatatableUpdate (servicePrefix) {
     }
 
     function onUpdated (item) {
-        flashMessageList.value.push({
+        toast.add({
             severity: 'success',
             detail: t('{resource} updated', {
                 'resource': item['@id'],
             }),
+            life: 3500,
         });
     }
 

assets/vue/views/ccalendarevent/List.vue

@@ -93,7 +93,7 @@
 </template>
 
 <script setup>
-import { computed, inject, reactive, ref, watch } from 'vue';
+import { computed, reactive, ref, watch } from 'vue';
 import { useStore } from 'vuex';
 import { useRoute } from 'vue-router';
 import { useI18n } from 'vue-i18n';
@@ -113,6 +113,7 @@ import allLocales from '@fullcalendar/core/locales-all';
 import toInteger from 'lodash/toInteger';
 import Dialog from 'primevue/dialog';
 import Button from 'primevue/button';
+import { useToast } from 'primevue/usetoast';
 
 const store = useStore();
 const route = useRoute();
@@ -367,17 +368,18 @@ function onCreateEventForm () {
   dialog.value = false;
 }
 
-const flashMessageList = inject('flashMessageList');
+const toast = useToast();
 
 watch(
   () => store.state.ccalendarevent.created,
   (created) => {
-    flashMessageList.value.push({
+    toast.add({
       severity: 'success',
       detail: t(
         '{resource} created',
         { 'resource': created.resourceNode.title }
       ),
+      life: 3500,
     });
 
     reFetch();
@@ -387,12 +389,13 @@ watch(
 watch(
   () => store.state.ccalendarevent.updated,
   (updated) => {
-    flashMessageList.value.push({
+    toast.add({
       severity: 'success',
       detail: t(
         '{resource} updated',
         { 'resource': updated.resourceNode.title }
       ),
+      life: 3500,
     });
 
     reFetch();

assets/vue/views/documents/List.vue

@@ -252,11 +252,12 @@ import { useRoute, useRouter } from 'vue-router'
 import { useI18n } from 'vue-i18n'
 import Toolbar from 'primevue/toolbar'
 import Dialog from 'primevue/dialog'
-import { computed, inject, onMounted, ref, watch } from 'vue'
+import { computed, onMounted, ref, watch } from 'vue'
 import { useCidReq } from '../../composables/cidReq'
 import { useDatatableList } from '../../composables/datatableList'
 import { useRelativeDatetime } from '../../composables/formatDate'
 import axios from 'axios'
+import { useToast } from 'primevue/usetoast';
 
 const store = useStore()
 const route = useRoute()
@@ -265,7 +266,7 @@ const { t } = useI18n()
 
 const { filters, options, onUpdateOptions, deleteItem } = useDatatableList('Documents')
 
-const flashMessageList = inject('flashMessageList')
+const toast = useToast();
 
 const { cid, sid, gid } = useCidReq()
 
@@ -352,9 +353,10 @@ function saveItem () {
 
       store.dispatch('documents/createWithFormData', item.value)
           .then(() => {
-            flashMessageList.value.push({
+            toast.add({
               severity: 'success',
-              detail: t('Saved')
+              detail: t('Saved'),
+              life: 3500,
             })
 
             onUpdateOptions(options.value)

assets/vue/views/documents/Update.vue

@@ -7,7 +7,8 @@
       <EditLinks
         :item="item"
         links-type="users"
-        show-share-with-user
+        :show-status="false"
+        :show-share-with-user="false"
       />
     </DocumentsForm>
     <Loading :visible="isLoading" />

assets/vue/views/page/Create.vue

@@ -9,19 +9,20 @@
 </template>
 
 <script setup>
-import { computed, inject, ref, watch } from 'vue';
+import { computed, ref, watch } from 'vue';
 import { useStore } from 'vuex';
 
 import PageForm from '../../components/page/Form.vue';
 import Loading from '../../components/Loading.vue';
 
 import { useDatatableCreate } from '../../composables/datatableCreate';
+import { useToast } from 'primevue/usetoast';
 
 const store = useStore();
 
 const { createItem, onCreated } = useDatatableCreate('Page');
 
-const flashMessageList = inject('flashMessageList');
+const toast = useToast();
 
 const error = computed(() => store.state['page'].error);
 const isLoading = computed(() => store.state['page'].isLoading);
@@ -40,9 +41,10 @@ watch(created, (newCreated) => {
 });
 
 watch(error, (newError) => {
-  flashMessageList.value.push({
+  toast.add({
     severity: 'error',
     detail: newError,
+    life: 3500,
   });
 });
 </script>

assets/vue/views/page/List.vue

@@ -228,8 +228,9 @@
 import PrimeToolbar from 'primevue/toolbar';
 import { useStore } from 'vuex';
 import { useDatatableList } from '../../composables/datatableList';
-import { computed, inject, onMounted, ref } from 'vue';
+import { computed, onMounted, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
+import { useToast } from 'primevue/usetoast';
 
 const store = useStore();
 
@@ -237,7 +238,7 @@ const { t } = useI18n();
 
 const { filters, options, onUpdateOptions, goToAddItem, onShowItem, goToEditItem, deleteItem } = useDatatableList('Page');
 
-const flashMessageList = inject('flashMessageList');
+const toast = useToast();
 
 onMounted(() => {
   filters.value.loadNode = 0;
@@ -290,9 +291,10 @@ const saveItem = () => {
     if (!item.value.id) {
       // item.value.creator
       //createCategory.value(item.value);
-      flashMessageList.value.push({
+      toast.add({
         severity: 'success',
-        detail: t('Saved')
+        detail: t('Saved'),
+        life: 3500,
       });
     }
 
@@ -308,9 +310,10 @@ const deleteMultipleItems = () => {
     deleteMultipleDialog.value = false;
     selectedItems.value = [];
 
-    flashMessageList.value.push({
+    toast.add({
       severity: 'success',
-      detail: t('Pages deleted')
+      detail: t('Pages deleted'),
+        life: 3500,
     });
   });