FOUR-15538: [Summer24] Cases vs Requests in the UI

ProcessMaker/Http/Middleware/GenerateMenus.php

@@ -38,8 +38,8 @@ public function handle(Request $request, Closure $next)
             });
             $menu->group(['prefix' => 'requests'], function ($request_items) {
                 $request_items->add(
-                    __('Requests'),
-                    ['route' => 'requests.index', 'id' => 'requests']
+                    __('Cases'),
+                    ['route' => 'cases.index', 'id' => 'requests']
                 )->active('requests/*');
             });
             //@TODO change the index to the correct blade
@@ -141,21 +141,21 @@ public function handle(Request $request, Closure $next)
         });
         Menu::make('sidebar_request', function ($menu) {
             $submenu = $menu->add(__('Request'));
-            $submenu->add(__('My Requests'), [
-                'route' => ['requests_by_type', ''],
+            $submenu->add(__('My Cases'), [
+                'route' => ['cases_by_type', ''],
                 'icon' => 'fa-id-badge',
             ]);
             $submenu->add(__('In Progress'), [
-                'route' => ['requests_by_type', 'in_progress'],
+                'route' => ['cases_by_type', 'in_progress'],
                 'icon' => 'fa-clipboard-list',
             ]);
             $submenu->add(__('Completed'), [
-                'route' => ['requests_by_type', 'completed'],
+                'route' => ['cases_by_type', 'completed'],
                 'icon' => 'fa-clipboard-check',
             ]);
             if (\Auth::check() && \Auth::user()->can('view-all_requests')) {
-                $submenu->add(__('All Requests'), [
-                    'route' => ['requests_by_type', 'all'],
+                $submenu->add(__('All Cases'), [
+                    'route' => ['cases_by_type', 'all'],
                     'icon' => 'fa-clipboard',
                 ]);
             }

resources/js/components/requests/requestModal.vue

@@ -14,7 +14,7 @@
         md="8"
       >
         <p>
-          {{ $t("We've made it easy for you to start a Case for the following Processes. Select a Process to start your Case.") }}
+          {{ $t("Select a Process below to get started.") }}
         </p>
       </b-col>
       <b-col
@@ -96,34 +96,22 @@
       v-if="loading"
       class="loading no-requests my-3 text-center"
     >
-      <div class="icon-container">
-        <div>
-          <svg
-            class="lds-gear"
-            width="100%"
-            height="100%"
-            xmlns="http://www.w3.org/2000/svg"
-            xmlns:xlink="http://www.w3.org/1999/xlink"
-            viewBox="0 0 100 100"
-            preserveAspectRatio="xMidYMid"
-          >
-            <g transform="translate(50 50)">
-              <g transform="rotate(248.825)">
-                <animateTransform
-                  attributeName="transform"
-                  type="rotate"
-                  values="0;360"
-                  keyTimes="0;1"
-                  dur="4.7s"
-                  repeatCount="indefinite"
-                />
-                <path d="M37.43995192304605 -6.5 L47.43995192304605 -6.5 L47.43995192304605 6.5 L37.43995192304605 6.5 A38 38 0 0 1 35.67394948182593 13.090810836924174 L35.67394948182593 13.090810836924174 L44.33420351967032 18.090810836924174 L37.83420351967032 29.34914108612188 L29.17394948182593 24.34914108612188 A38 38 0 0 1 24.34914108612188 29.17394948182593 L24.34914108612188 29.17394948182593 L29.34914108612188 37.83420351967032 L18.090810836924184 44.33420351967032 L13.090810836924183 35.67394948182593 A38 38 0 0 1 6.5 37.43995192304605 L6.5 37.43995192304605 L6.500000000000001 47.43995192304605 L-6.499999999999995 47.43995192304606 L-6.499999999999996 37.43995192304606 A38 38 0 0 1 -13.09081083692417 35.67394948182593 L-13.09081083692417 35.67394948182593 L-18.09081083692417 44.33420351967032 L-29.34914108612187 37.834203519670325 L-24.349141086121872 29.173949481825936 A38 38 0 0 1 -29.17394948182592 24.34914108612189 L-29.17394948182592 24.34914108612189 L-37.83420351967031 29.349141086121893 L-44.33420351967031 18.0908108369242 L-35.67394948182592 13.090810836924193 A38 38 0 0 1 -37.43995192304605 6.5000000000000036 L-37.43995192304605 6.5000000000000036 L-47.43995192304605 6.500000000000004 L-47.43995192304606 -6.499999999999993 L-37.43995192304606 -6.499999999999994 A38 38 0 0 1 -35.67394948182593 -13.090810836924167 L-35.67394948182593 -13.090810836924167 L-44.33420351967032 -18.090810836924163 L-37.834203519670325 -29.34914108612187 L-29.173949481825936 -24.34914108612187 A38 38 0 0 1 -24.349141086121893 -29.17394948182592 L-24.349141086121893 -29.17394948182592 L-29.349141086121897 -37.834203519670304 L-18.0908108369242 -44.334203519670304 L-13.090810836924195 -35.67394948182592 A38 38 0 0 1 -6.500000000000005 -37.43995192304605 L-6.500000000000005 -37.43995192304605 L-6.500000000000007 -47.43995192304605 L6.49999999999999 -47.43995192304606 L6.499999999999992 -37.43995192304606 A38 38 0 0 1 13.090810836924149 -35.67394948182594 L13.090810836924149 -35.67394948182594 L18.090810836924142 -44.33420351967033 L29.349141086121847 -37.83420351967034 L24.349141086121854 -29.17394948182595 A38 38 0 0 1 29.17394948182592 -24.349141086121893 L29.17394948182592 -24.349141086121893 L37.834203519670304 -29.349141086121897 L44.334203519670304 -18.0908108369242 L35.67394948182592 -13.090810836924197 A38 38 0 0 1 37.43995192304605 -6.500000000000007 M0 -20A20 20 0 1 0 0 20 A20 20 0 1 0 0 -20" />
-              </g>
-            </g>
-          </svg>
-        </div>
-      </div>
-      <h4>{{ $t('Finding Requests available to you...') }}</h4>
+      <img
+        class="m-3"
+        src="/img/new-case-load.svg"
+        alt="new-case-loading"
+        width="209"
+        height="155"
+      >
+      <p class="loading-text loading-title">
+        {{ $t('Finding your processes') }}
+      </p>
+      <p class="loading-text">
+        {{ $t('Please wait a moment while we locate and load your processes.') }}
+      </p>
+      <p class="loading-text">
+        {{ $t('This should only take a few seconds.') }}
+      </p>
     </div>
 
     <pagination
@@ -263,4 +251,21 @@ export default {
 .search {
   width: 100%;
 }
+.loading-text {
+  color: #556271;
+  margin: 0px;
+  font-family: 'Open Sans', sans-serif;
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 27px;
+  letter-spacing: -0.02em;
+}
+.loading-title {
+  margin-bottom: 8px;
+  font-family: 'Open Sans', sans-serif;
+  font-size: 24px;
+  font-weight: 600;
+  line-height: 38px;
+  letter-spacing: -0.04em;
+}
 </style>

resources/js/processes-catalogue/components/DefaultTab.vue

@@ -1,14 +1,12 @@
 <template>
   <div class="d-flex align-items-center justify-content-center flex-column tab-container">
-    <img
-      :src="imageSrc"
-      :alt="altText"
-    />
-    <div class="text-center">
-      <strong>{{ titleText }}</strong>
-    </div>
-    <div class="text-center">
-      {{ descriptionText }}
+    <div class="content-text">
+      <img
+        :src="imageSrc"
+        :alt="altText"
+      />
+      <span class="title">{{ titleText }}</span>
+      <span class="title-section">{{ descriptionText }}</span>
     </div>
   </div>
 </template>
@@ -18,7 +16,7 @@ export default {
   props: {
     imageSrc: {
       type: String,
-      default: "/img/tasks-loading.svg",
+      default: "/img/cases-loading.svg",
     },
     altText: {
       type: String,
@@ -38,8 +36,38 @@ export default {
 
 <style scoped>
 .tab-container {
-    width: auto;
-    height: 622px;
-    background-color: white;
-  }
+  width: auto;
+  height: 622px;
+  background-color: white;
+}
+.content-text .title,
+.content-text .title-section {
+  line-height: 1.2;
+}
+.content-text {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 20px;
+}
+.title {
+  color: var(--text-only, #556271);
+  text-align: center;
+  font-family: "Open Sans", sans-serif;
+  font-size: 24px;
+  font-style: normal;
+  font-weight: 600;
+  line-height: 38px; /* 158.333% */
+  letter-spacing: -0.96px;
+}
+.title-section {
+  color: var(--text-only, #556271);
+  text-align: center;
+  font-family: "Open Sans", sans-serif;
+  font-size: 15px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 27px; /* 180% */
+  letter-spacing: -0.3px;
+}
 </style>

resources/js/processes-catalogue/components/ProcessTab.vue

@@ -6,7 +6,7 @@
       lazy
     >
       <b-tab
-        :title="$t('My Requests')"
+        :title="$t('My Cases')"
         active
       >
         <request-tab

resources/js/processes-catalogue/components/RequestTab.vue

@@ -20,8 +20,8 @@
     <div v-else>
       <default-tab
         :alt-text="$t('No Image')"
-        :title-text="$t('You have made no requests of this process.')"
-        :description-text="$t('All your requests will be shown here')"
+        :title-text="$t('No items to show.')"
+        :description-text="$t('You have to start a Case of this process.')"
       />
     </div>
   </div>

resources/js/processes-catalogue/components/TaskTab.vue

@@ -19,10 +19,8 @@
     <div v-else>
       <default-tab
         :alt-text="$t('No Image')"
-        :title-text="$t('You have no tasks from this process.')"
-        :description-text="
-          $t('All your tasks related to this process will be shown here')
-        "
+        :title-text="$t('No items to show.')"
+        :description-text="$t('You have to start a Case of this process.')"
       />
     </div>
   </div>

resources/lang/de.json

@@ -984,7 +984,7 @@
   "We can't find a user with that e-mail address.": "Wir können keinen Benutzer mit dieser E-Mail-Adresse finden.",
   "We have e-mailed your password reset link!": "Wir haben Ihnen eine E-Mail mit einem Link zum Zurücksetzen Ihres Passworts gesendet!",
   "We recommended a transparent PNG at :size pixels.": "Wir empfehlen ein transparentes PNG mit :size Pixeln.",
-  "We've made it easy for you to start a Case for the following Processes. Select a Process to start your Case.": "Mit unserem Programm ist es ganz einfach, eine Anfrage für die folgenden Prozesse zu generieren. Wählen Sie einen Prozess aus, um Ihre Anfrage zu generieren.",
+  "Select a Process below to get started.": "Wählen Sie einen Prozess aus, um Ihre Anfrage zu generieren.",
   "Web Entry": "Web-Eintrag",
   "week": "Woche",
   "Welcome": "Willkommen",

resources/lang/en.json

@@ -93,6 +93,7 @@
   "Align Top": "Align Top",
   "All {{assets}} will be included in this export.": "All {{assets}} will be included in this export.",
   "All assignments were saved.": "All assignments were saved.",
+  "All Cases": "All Cases",
   "All Clear": "All Clear",
   "All elements related to this process will be imported.": "All elements related to this process will be imported.",
   "All Notifications": "All Notifications",
@@ -262,6 +263,7 @@
   "CAPTCHA controls cannot be placed within a Loop control.": "CAPTCHA controls cannot be placed within a Loop control.",
   "Case": "Case",
   "Case by Status": "Case by Status",
+  "Cases": "Cases",
   "Cases Started": "Cases Started",
   "Catch Events": "Catch Events",
   "Categories are required to create a process": "Categories are required to create a process",
@@ -730,7 +732,7 @@
   "Filter Controls": "Filter Controls",
   "Filter the column:": "Filter the column:",
   "Filter": "Filter",
-  "Finding Requests available to you...": "Finding Requests available to you...",
+  "Finding Cases available to you...": "Finding Cases available to you...",
   "First Name": "First Name",
   "Flow completed": "Flow completed",
   "Flow in loop": "Flow in loop",
@@ -989,11 +991,13 @@
   "Modified By Tasks": "Modified By Tasks",
   "Modified": "Modified",
   "month": "month",
+  "More Information": "More Information",
   "Multi Column": "Multi Column",
   "Multi-Instance (Parallel)": "Multi-Instance (Parallel)",
   "Multi-Instance (Sequential)": "Multi-Instance (Sequential)",
   "Multicolumn / Table": "Multicolumn / Table",
   "Must be unique": "Must be unique",
+  "My Cases": "My Cases",
   "My Bookmarks": "My Bookmarks",
   "My Projects": "My Projects",
   "My Requests": "My Requests",
@@ -1067,6 +1071,7 @@
   "No elements found. Consider changing the search query.": "No elements found. Consider changing the search query.",
   "No Errors": "No Errors",
   "No files available for download": "No files available for download",
+  "No items to show.": "No items to show.",
   "No Image": "No Image",
   "No Loop Mode": "No Loop Mode",
   "No new notifications at the moment.": "No new notifications at the moment.",
@@ -1206,6 +1211,7 @@
   "Position": "Position",
   "Postal Code": "Postal Code",
   "Powered by ProcessMaker AI": "Powered by ProcessMaker AI",
+  "Process Information": "Process Information",
   "Generate single fields or entire forms with our generative assistant": "Generate single fields or entire forms with our generative assistant",
   "Collect a string of text and format it as one of several data types": "Collect a string of text and format it as one of several data types",
   "Collect options from a list, as radio butttons or dropdowns": "Collect options from a list, as radio butttons or dropdowns",
@@ -2066,7 +2072,7 @@
   "We have e-mailed your password reset link!": "We have e-mailed your password reset link!",
   "We recommend using fewer than 25 form elements in your screen for optimal performance.": "We recommend using fewer than 25 form elements in your screen for optimal performance.",
   "We recommended a transparent PNG at :size pixels.": "We recommended a transparent PNG at :size pixels.",
-  "We've made it easy for you to start a Case for the following Processes. Select a Process to start your Case.": "We've made it easy for you to start a Case for the following Processes. Select a Process to start your Case.",
+  "Select a Process below to get started.": "Select a Process to start your Case.",
   "Web Entry": "Web Entry",
   "Webhook URL": "Webhook URL",
   "week": "week",
@@ -2112,6 +2118,7 @@
   "You have {{ inOverDue }} overdue {{ taskText }} pending": "You have {{ inOverDue }} overdue {{ taskText }} pending",
   "You have made no requests of this process.": "You have made no requests of this process.",
   "You have no tasks from this process.": "You have no tasks from this process.",
+  "You have to start a Case of this process.": "You have to start a Case of this process.",
   "You must authorize your account before configuring folders": "You must authorize your account before configuring folders",
   "You must have your database credentials available in order to continue.": "You must have your database credentials available in order to continue.",
   "You must select at least one day.": "You must select at least one day.",

resources/lang/es.json

@@ -39,6 +39,7 @@
   "After importing, you can reassign users and groups to your Process.": "Después de importar, puede reasignar usuarios y grupos a su Proceso.",
   "After": "Después",
   "All assignments were saved.": "Todas las tareas fueron guardadas.",
+  "All Cases": "Todos los casos",
   "All Notifications": "Todas las notificaciones",
   "All Requests": "Todas las solicitudes",
   "All Rights Reserved": "Todos los derechos reservados",
@@ -366,7 +367,7 @@
   "Filter Controls": "Controles de filtro",
   "Filter the column:": "Filtrar la columna:",
   "Filter": "Filtrar",
-  "Finding Requests available to you...": "Buscando solicitudes disponibles para usted...",
+  "Finding Cases available to you...": "Buscando solicitudes disponibles para usted...",
   "First Name": "Nombre de pila",
   "Flow splits implicitly": "El flujo se divide implícitamente",
   "Font Size": "Tamaño de fuente",
@@ -492,6 +493,7 @@
   "Must be unique": "Debe ser único",
   "Multi Column": "Múltiples columnas",
   "Multicolumn / Table": "Columnas múltiples/tabla",
+  "My Cases": "Mis Casos",
   "My Requests": "Mis solicitudes",
   "Name must be unique": "El nombre debe ser único",
   "Name of Variable to store the output": "Nombre de variable para almacenar la salida",
@@ -534,6 +536,7 @@
   "No Data Found": "Ne se encontraron datos",
   "No elements found. Consider changing the search query.": "No se encontraron elementos. Considere cambiar la consulta de búsqueda.",
   "No Errors": "Sin errores",
+  "No items to show.": "No hay casos para mostrar.",
   "No files available for download": "No hay archivos disponibles para descarga",
   "No Notifications Found": "No se encontraron notificaciones",
   "No permissions to access this content": "No tiene permisos para acceder a este contenido",
@@ -985,7 +988,7 @@
   "We can't find a user with that e-mail address.": "No podemos encontrar un usuario con esa dirección de correo electrónico.",
   "We have e-mailed your password reset link!": "¡Le hemos enviado por correo electrónico el enlace para restablecer su contraseña!",
   "We recommended a transparent PNG at :size pixels.": "Recomendamos un PNG transparente en tamaño de píxeles:.",
-  "We've made it easy for you to start a Case for the following Processes. Select a Process to start your Case.": "Le facilitamos el inicio de una Solicitud para los siguientes Procesos. Seleccione un Proceso para iniciar su Solicitud.",
+  "Select a Process below to get started.": "Seleccione un Proceso para iniciar su Solicitud.",
   "Web Entry": "Entrada web",
   "week": "semana",
   "Welcome": "Bienvenido",
@@ -1007,6 +1010,7 @@
   "You don't currently have any tasks assigned to you": "Actualmente no tiene tareas asignadas",
   "You don't have any Processes.": "Usted no tiene ningún proceso.",
   "You have {{ inOverDue }} overdue {{ taskText }} pending": "Tiene {{ inOverDue }} vencidos {{ taskText }} pendiente",
+  "You have to start a Case of this process.": "Usted tiene que iniciar un caso en este proceso",
   "You must have your database credentials available in order to continue.": "Debe tener las credenciales de su base de datos disponibles para poder continuar.",
   "Your account has been timed out for security.": "Se ha finalizado el tiempo de espera por motivos de seguridad.",
   "Your password has been reset!": "¡Su contraseña ha sido restablecida!",
@@ -1303,6 +1307,7 @@
   "Browser": "Navegador",
   "Callback": "Devolución de llamada",
   "Case": "Caso",
+  "Cases": "Casos",
   "Catch Events": "Eventos de captura",
   "Change Version Details": "Cambiar detalles de la versión",
   "Check Flow": "Comprobar flujo",