FOUR-19004: Create a NEW VIEW for cases Part Counters

ProcessMaker/Http/Controllers/CasesController.php

@@ -0,0 +1,44 @@
+<?php
+
+namespace ProcessMaker\Http\Controllers;
+
+use Facades\ProcessMaker\RollbackProcessRequest;
+use Illuminate\Http\Request;
+use Illuminate\Support\Facades\Auth;
+use Illuminate\Support\Facades\Route;
+use ProcessMaker\Cache\CacheRemember;
+use ProcessMaker\Events\FilesDownloaded;
+use ProcessMaker\Events\ScreenBuilderStarting;
+use ProcessMaker\Filters\SaveSession;
+use ProcessMaker\Helpers\DefaultColumns;
+use ProcessMaker\Helpers\MobileHelper;
+use ProcessMaker\Http\Controllers\Controller;
+use ProcessMaker\Managers\DataManager;
+use ProcessMaker\Managers\ScreenBuilderManager;
+use ProcessMaker\Models\Comment;
+use ProcessMaker\Models\Process;
+use ProcessMaker\Models\ProcessRequest;
+use ProcessMaker\Models\ProcessRequestToken;
+use ProcessMaker\Models\Screen;
+use ProcessMaker\Models\ScreenVersion;
+use ProcessMaker\Models\UserResourceView;
+use ProcessMaker\Package\PackageComments\PackageServiceProvider;
+use ProcessMaker\ProcessTranslations\ProcessTranslation;
+use ProcessMaker\RetryProcessRequest;
+use ProcessMaker\Traits\HasControllerAddons;
+use ProcessMaker\Traits\SearchAutocompleteTrait;
+use Spatie\MediaLibrary\MediaCollections\Models\Media;
+
+class CasesController extends Controller
+{
+ /**
+ * Get the list of requests.
+ *
+ * @return \Illuminate\View\View|\Illuminate\Contracts\View
+ */
+ public function index($type = null)
+ {
+ // This is a temporary API the engine team will provide the new
+ return view('cases.casesMain');
+ }
+}

resources/jscomposition/base/buttons/OutlineButton.vue

@@ -0,0 +1,32 @@
+<template>
+ <button
+ type="button"
+ :class="`tw-flex tw-rounded-lg tw-border tw-border-${color}-300 tw-text-${color}-500
+ tw-space-x-2 tw-px-3 tw-py-3 hover:tw-bg-${color}-200 tw-justify-center tw-items-center`"
+ @click="onClick"
+ >
+ <slot />
+ </button>
+</template>
+
+<script>
+import { defineComponent } from "vue";
+
+export default defineComponent({
+ props: {
+ color: {
+ type: String,
+ default: () => "gray",
+ },
+ },
+ emits: ["click"],
+ setup(props, { emit }) {
+ const onClick = () => {
+ emit("click");
+ };
+ return {
+ onClick,
+ };
+ },
+});
+</script>

resources/jscomposition/base/buttons/index.js

@@ -0,0 +1,3 @@
+import OutlineButton from "./OutlineButton.vue";
+
+export { OutlineButton };

resources/jscomposition/base/cards/ThreeSectionCard.vue

@@ -0,0 +1,68 @@
+<template>
+ <div
+ class="tw-flex tw-justify-between tw-items-center
+ tw-p-4 tw-transition tw-duration-150 tw-ease-out
+ hover:tw-ease-in tw-border tw-cursor-pointer tw-rounded-lg tw-text-gray-600"
+ :class="[{
+ [`tw-bg-${color}-100/50 hover:tw-bg-${color}-100`]:!active,
+ [`tw-outline tw-bg-${color}-100 tw-border-${color}-500 tw-outline-${color}-300 tw-bg-${color}-100 hover:tw-bg-${color}-200`]:active
+ }]"
+ @click="handleClick"
+ >
+ <div>
+ <slot name="header">
+ <div class="tw-text-xs">
+ {{ header }}
+ </div>
+ </slot>
+ <slot name="body">
+ <div class="tw-text-2xl">
+ {{ body }}
+ </div>
+ </slot>
+ </div>
+
+ <slot name="icon">
+ <i
+ :class="[`tw-text-${color}-500 tw-text-3xl`, icon]"
+ />
+ </slot>
+ </div>
+</template>
+
+<script>
+import { defineComponent } from "vue";
+
+export default defineComponent({
+ props: {
+ header: {
+ type: String,
+ default: () => "header",
+ },
+ body: {
+ type: String,
+ default: () => "body",
+ },
+ icon: {
+ type: String,
+ default: () => "",
+ },
+ active: {
+ type: Boolean,
+ default: () => false,
+ },
+ color: {
+ type: String,
+ default: () => "gray",
+ },
+ },
+ setup(props, { emit }) {
+ const handleClick = () => {
+ emit("click");
+ };
+ return {
+ handleClick,
+ };
+ },
+});
+</script>

resources/jscomposition/base/cards/index.js

@@ -0,0 +1,3 @@
+import ThreeSectionCard from "./ThreeSectionCard.vue";
+
+export { ThreeSectionCard };

resources/jscomposition/base/form/Dropdown.vue

@@ -0,0 +1,207 @@
+<template>
+ <div class="t-relative">
+ <slot
+ v-bind="{
+ toogleShow,
+ data,
+ }"
+ name="input">
+ <button
+ @click.prevent.stop="show = !show"
+ class="t-flex t-w-full t-justify-between t-items-center t-py-2 t-px-3 t-ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-inset focus:ring-primary-400">
+ <span>{{ data?.label || data?.value || "" }} </span>
+
+ <i class="fas fa-chevron-down" />
+ </button>
+ </slot>
+
+ <transition :name="animation">
+ <div
+ v-if="show"
+ :class="'bg-' + color + '-500'"
+ class="block mt-1 rounded absolute z-10 shadow-lg w-full bg-white">
+ <ul class="list-none overflow-hidden rounded">
+ <li
+ v-for="(option, index) in optionsModel"
+ :key="index"
+ class="hover:bg-gray-200"
+ :class="{
+ 'bg-gray-300': option?.value === data?.value,
+ }"
+ @click.prevent.stop="onClick(option, index)">
+ <slot
+ name="option"
+ v-bind="{
+ option,
+ }">
+ <span
+ class="flex py-2 px-4 transition duration-300"
+ :class="'theme-' + color"
+ >{{ option.label || option.value }}</span
+ >
+ </slot>
+ </li>
+ </ul>
+ </div>
+ </transition>
+ </div>
+</template>
+
+<script>
+import {
+ defineComponent,
+ ref,
+ computed,
+ onMounted,
+ onUnmounted,
+} from "vue";
+
+export default defineComponent({
+ props: {
+ color: {
+ type: String,
+ default: () => "blue",
+ },
+ animation: {
+ type: String,
+ default: () => "fade",
+ },
+ // Example input options {"label":"Label 1" , "value": "1"}
+ options: {
+ type: Array,
+ default: () => [],
+ },
+ modelValue: {
+ type: Object,
+ default: () => null,
+ },
+ },
+ emits: ["update:modelValue", "change"],
+ setup(props, { emit }) {
+ const show = ref(false);
+ const count = ref(0);
+
+ const data = computed({
+ get() {
+ return props.modelValue;
+ },
+ set(value) {
+ emit("update:modelValue", value);
+ },
+ });
+
+ const optionsModel = computed({
+ get() {
+ return props.options;
+ },
+ set(val) {
+ emit("update:options", val);
+ },
+ });
+
+ const onClick = (option, index) => {
+ show.value = false;
+ data.value = option;
+
+ emit("change", option);
+ };
+
+ const addBodyListener = () => {
+ show.value = false;
+ };
+
+ const toogleShow = () => {
+ show.value = !show.value;
+ };
+
+ onMounted(() => {
+ document.body.addEventListener("click", addBodyListener);
+ });
+
+ onUnmounted(() => {
+ document.body.removeEventListener("click", addBodyListener);
+ });
+
+ return {
+ show,
+ data,
+ optionsModel,
+ count,
+ onClick,
+ toogleShow,
+ };
+ },
+});
+</script>
+
+<style scoped>
+/* Animations */
+.fade-enter-active,
+.fade-leave-active {
+ transition: opacity 0.1s;
+}
+.fade-enter,
+.fade-leave-to {
+ opacity: 0;
+}
+
+/* Slide-in-up animation*/
+.slide-in-up-enter-active,
+.slide-in-up-leave-active {
+ transition: all 0.5s;
+ transform: translateY(0);
+}
+.slide-in-up-enter,
+.slide-in-up-leave-to {
+ opacity: 0;
+ transform: translateY(20px);
+}
+
+/* Slide-in-right animation*/
+.slide-in-right-enter-active,
+.slide-in-right-leave-active {
+ transition: all 0.5s;
+ transform: translateX(0);
+}
+.slide-in-right-enter,
+.slide-in-right-leave-to {
+ opacity: 0;
+ transform: translateX(20px);
+}
+
+/* Slide-in-left animation*/
+.slide-in-left-enter-active,
+.slide-in-left-leave-active {
+ transition: all 0.5s;
+ transform: translateX(0);
+}
+.slide-in-left-enter,
+.slide-in-left-leave-to {
+ opacity: 0;
+ transform: translateX(-20px);
+}
+
+/* Scale animation*/
+.scale-enter-active,
+.scale-leave-active {
+ transition: all 0.5s;
+ transform: scale(1);
+}
+.scale-enter,
+.scale-leave-to {
+ opacity: 0;
+ transform: scale(0);
+}
+
+/* Rotate animation*/
+.rotate-enter-active,
+.rotate-leave-active {
+ transition: all 0.5s;
+ transform: scale(1) rotate(-360deg);
+}
+.rotate-enter,
+.rotate-leave-to {
+ opacity: 0;
+ transform: scale(0) rotate(360deg);
+}
+</style>

resources/jscomposition/base/form/InputLeading.vue

@@ -0,0 +1,33 @@
+<template>
+ <div class="tw-relative tw-rounded-lg tw-shadow-sm tw-text-gray-500">
+ <div class="tw-pointer-events-none tw-absolute tw-inset-y-0 tw-left-0 tw-flex tw-items-center tw-pl-3">
+ <slot name="icon">
+ <i :class="icon"></i>
+ </slot>
+ </div>
+ <input class="tw-block tw-w-full tw-rounded-md tw-border-0 tw-py-2 tw-pl-10 
+ tw-text-gray-900 tw-ring-1 tw-ring-inset tw-ring-gray-300 
+ placeholder:tw-text-gray-400 focus:tw-ring-2 focus:tw-ring-inset
+ focus-visible:tw-outline-none
+ sm:tw-text-sm sm:tw-leading-6" :placeholder="placeholder">
+ </div>
+</template>
+<script>
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+ props: {
+ placeholder: {
+ type: String,
+ default: () => ""
+ },
+ icon: {
+ type: String,
+ default: () => ("fa-solid fa-magnifying-glass")
+ }
+ },
+ setup(props, { emit }) {
+ return {};
+ }
+});
+</script>

ProcessMaker/Http/Controllers/CasesController.php

@@ -0,0 +1,44 @@
+<?php
+
+namespace ProcessMaker\Http\Controllers;
+
+use Facades\ProcessMaker\RollbackProcessRequest;
+use Illuminate\Http\Request;
+use Illuminate\Support\Facades\Auth;
+use Illuminate\Support\Facades\Route;
+use ProcessMaker\Cache\CacheRemember;
+use ProcessMaker\Events\FilesDownloaded;
+use ProcessMaker\Events\ScreenBuilderStarting;
+use ProcessMaker\Filters\SaveSession;
+use ProcessMaker\Helpers\DefaultColumns;
+use ProcessMaker\Helpers\MobileHelper;
+use ProcessMaker\Http\Controllers\Controller;
+use ProcessMaker\Managers\DataManager;
+use ProcessMaker\Managers\ScreenBuilderManager;
+use ProcessMaker\Models\Comment;
+use ProcessMaker\Models\Process;
+use ProcessMaker\Models\ProcessRequest;
+use ProcessMaker\Models\ProcessRequestToken;
+use ProcessMaker\Models\Screen;
+use ProcessMaker\Models\ScreenVersion;
+use ProcessMaker\Models\UserResourceView;
+use ProcessMaker\Package\PackageComments\PackageServiceProvider;
+use ProcessMaker\ProcessTranslations\ProcessTranslation;
+use ProcessMaker\RetryProcessRequest;
+use ProcessMaker\Traits\HasControllerAddons;
+use ProcessMaker\Traits\SearchAutocompleteTrait;
+use Spatie\MediaLibrary\MediaCollections\Models\Media;
+
+class CasesController extends Controller
+{
+ /**
+ * Get the list of requests.
+ *
+ * @return \Illuminate\View\View|\Illuminate\Contracts\View
+ */
+ public function index($type = null)
+ {
+ // This is a temporary API the engine team will provide the new
+ return view('cases.casesMain');
+ }
+}

resources/jscomposition/base/buttons/OutlineButton.vue

@@ -0,0 +1,32 @@
+<template>
+ <button
+ type="button"
+ :class="`tw-flex tw-rounded-lg tw-border tw-border-${color}-300 tw-text-${color}-500
+ tw-space-x-2 tw-px-3 tw-py-3 hover:tw-bg-${color}-200 tw-justify-center tw-items-center`"
+ @click="onClick"
+ >
+ <slot />
+ </button>
+</template>
+
+<script>
+import { defineComponent } from "vue";
+
+export default defineComponent({
+ props: {
+ color: {
+ type: String,
+ default: () => "gray",
+ },
+ },
+ emits: ["click"],
+ setup(props, { emit }) {
+ const onClick = () => {
+ emit("click");
+ };
+ return {
+ onClick,
+ };
+ },
+});
+</script>

resources/jscomposition/base/buttons/index.js

@@ -0,0 +1,3 @@
+import OutlineButton from "./OutlineButton.vue";
+
+export { OutlineButton };

resources/jscomposition/base/cards/ThreeSectionCard.vue

@@ -0,0 +1,68 @@
+<template>
+ <div
+ class="tw-flex tw-justify-between tw-items-center
+ tw-p-4 tw-transition tw-duration-150 tw-ease-out
+ hover:tw-ease-in tw-border tw-cursor-pointer tw-rounded-lg tw-text-gray-600"
+ :class="[{
+ [`tw-bg-${color}-100/50 hover:tw-bg-${color}-100`]:!active,
+ [`tw-outline tw-bg-${color}-100 tw-border-${color}-500 tw-outline-${color}-300 tw-bg-${color}-100 hover:tw-bg-${color}-200`]:active
+ }]"
+ @click="handleClick"
+ >
+ <div>
+ <slot name="header">
+ <div class="tw-text-xs">
+ {{ header }}
+ </div>
+ </slot>
+ <slot name="body">
+ <div class="tw-text-2xl">
+ {{ body }}
+ </div>
+ </slot>
+ </div>
+
+ <slot name="icon">
+ <i
+ :class="[`tw-text-${color}-500 tw-text-3xl`, icon]"
+ />
+ </slot>
+ </div>
+</template>
+
+<script>
+import { defineComponent } from "vue";
+
+export default defineComponent({
+ props: {
+ header: {
+ type: String,
+ default: () => "header",
+ },
+ body: {
+ type: String,
+ default: () => "body",
+ },
+ icon: {
+ type: String,
+ default: () => "",
+ },
+ active: {
+ type: Boolean,
+ default: () => false,
+ },
+ color: {
+ type: String,
+ default: () => "gray",
+ },
+ },
+ setup(props, { emit }) {
+ const handleClick = () => {
+ emit("click");
+ };
+ return {
+ handleClick,
+ };
+ },
+});
+</script>

resources/jscomposition/base/cards/index.js

@@ -0,0 +1,3 @@
+import ThreeSectionCard from "./ThreeSectionCard.vue";
+
+export { ThreeSectionCard };

resources/jscomposition/base/form/Dropdown.vue

@@ -0,0 +1,207 @@
+<template>
+ <div class="t-relative">
+ <slot
+ v-bind="{
+ toogleShow,
+ data,
+ }"
+ name="input">
+ <button
+ @click.prevent.stop="show = !show"
+ class="t-flex t-w-full t-justify-between t-items-center t-py-2 t-px-3 t-ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-inset focus:ring-primary-400">
+ <span>{{ data?.label || data?.value || "" }} </span>
+
+ <i class="fas fa-chevron-down" />
+ </button>
+ </slot>
+
+ <transition :name="animation">
+ <div
+ v-if="show"
+ :class="'bg-' + color + '-500'"
+ class="block mt-1 rounded absolute z-10 shadow-lg w-full bg-white">
+ <ul class="list-none overflow-hidden rounded">
+ <li
+ v-for="(option, index) in optionsModel"
+ :key="index"
+ class="hover:bg-gray-200"
+ :class="{
+ 'bg-gray-300': option?.value === data?.value,
+ }"
+ @click.prevent.stop="onClick(option, index)">
+ <slot
+ name="option"
+ v-bind="{
+ option,
+ }">
+ <span
+ class="flex py-2 px-4 transition duration-300"
+ :class="'theme-' + color"
+ >{{ option.label || option.value }}</span
+ >
+ </slot>
+ </li>
+ </ul>
+ </div>
+ </transition>
+ </div>
+</template>
+
+<script>
+import {
+ defineComponent,
+ ref,
+ computed,
+ onMounted,
+ onUnmounted,
+} from "vue";
+
+export default defineComponent({
+ props: {
+ color: {
+ type: String,
+ default: () => "blue",
+ },
+ animation: {
+ type: String,
+ default: () => "fade",
+ },
+ // Example input options {"label":"Label 1" , "value": "1"}
+ options: {
+ type: Array,
+ default: () => [],
+ },
+ modelValue: {
+ type: Object,
+ default: () => null,
+ },
+ },
+ emits: ["update:modelValue", "change"],
+ setup(props, { emit }) {
+ const show = ref(false);
+ const count = ref(0);
+
+ const data = computed({
+ get() {
+ return props.modelValue;
+ },
+ set(value) {
+ emit("update:modelValue", value);
+ },
+ });
+
+ const optionsModel = computed({
+ get() {
+ return props.options;
+ },
+ set(val) {
+ emit("update:options", val);
+ },
+ });
+
+ const onClick = (option, index) => {
+ show.value = false;
+ data.value = option;
+
+ emit("change", option);
+ };
+
+ const addBodyListener = () => {
+ show.value = false;
+ };
+
+ const toogleShow = () => {
+ show.value = !show.value;
+ };
+
+ onMounted(() => {
+ document.body.addEventListener("click", addBodyListener);
+ });
+
+ onUnmounted(() => {
+ document.body.removeEventListener("click", addBodyListener);
+ });
+
+ return {
+ show,
+ data,
+ optionsModel,
+ count,
+ onClick,
+ toogleShow,
+ };
+ },
+});
+</script>
+
+<style scoped>
+/* Animations */
+.fade-enter-active,
+.fade-leave-active {
+ transition: opacity 0.1s;
+}
+.fade-enter,
+.fade-leave-to {
+ opacity: 0;
+}
+
+/* Slide-in-up animation*/
+.slide-in-up-enter-active,
+.slide-in-up-leave-active {
+ transition: all 0.5s;
+ transform: translateY(0);
+}
+.slide-in-up-enter,
+.slide-in-up-leave-to {
+ opacity: 0;
+ transform: translateY(20px);
+}
+
+/* Slide-in-right animation*/
+.slide-in-right-enter-active,
+.slide-in-right-leave-active {
+ transition: all 0.5s;
+ transform: translateX(0);
+}
+.slide-in-right-enter,
+.slide-in-right-leave-to {
+ opacity: 0;
+ transform: translateX(20px);
+}
+
+/* Slide-in-left animation*/
+.slide-in-left-enter-active,
+.slide-in-left-leave-active {
+ transition: all 0.5s;
+ transform: translateX(0);
+}
+.slide-in-left-enter,
+.slide-in-left-leave-to {
+ opacity: 0;
+ transform: translateX(-20px);
+}
+
+/* Scale animation*/
+.scale-enter-active,
+.scale-leave-active {
+ transition: all 0.5s;
+ transform: scale(1);
+}
+.scale-enter,
+.scale-leave-to {
+ opacity: 0;
+ transform: scale(0);
+}
+
+/* Rotate animation*/
+.rotate-enter-active,
+.rotate-leave-active {
+ transition: all 0.5s;
+ transform: scale(1) rotate(-360deg);
+}
+.rotate-enter,
+.rotate-leave-to {
+ opacity: 0;
+ transform: scale(0) rotate(360deg);
+}
+</style>

resources/jscomposition/base/form/InputLeading.vue

@@ -0,0 +1,33 @@
+<template>
+ <div class="tw-relative tw-rounded-lg tw-shadow-sm tw-text-gray-500">
+ <div class="tw-pointer-events-none tw-absolute tw-inset-y-0 tw-left-0 tw-flex tw-items-center tw-pl-3">
+ <slot name="icon">
+ <i :class="icon"></i>
+ </slot>
+ </div>
+ <input class="tw-block tw-w-full tw-rounded-md tw-border-0 tw-py-2 tw-pl-10 
+ tw-text-gray-900 tw-ring-1 tw-ring-inset tw-ring-gray-300 
+ placeholder:tw-text-gray-400 focus:tw-ring-2 focus:tw-ring-inset
+ focus-visible:tw-outline-none
+ sm:tw-text-sm sm:tw-leading-6" :placeholder="placeholder">
+ </div>
+</template>
+<script>
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+ props: {
+ placeholder: {
+ type: String,
+ default: () => ""
+ },
+ icon: {
+ type: String,
+ default: () => ("fa-solid fa-magnifying-glass")
+ }
+ },
+ setup(props, { emit }) {
+ return {};
+ }
+});
+</script>

ProcessMaker/Http/Controllers/CasesController.php

@@ -0,0 +1,44 @@
+<?php
+
+namespace ProcessMaker\Http\Controllers;
+
+use Facades\ProcessMaker\RollbackProcessRequest;
+use Illuminate\Http\Request;
+use Illuminate\Support\Facades\Auth;
+use Illuminate\Support\Facades\Route;
+use ProcessMaker\Cache\CacheRemember;
+use ProcessMaker\Events\FilesDownloaded;
+use ProcessMaker\Events\ScreenBuilderStarting;
+use ProcessMaker\Filters\SaveSession;
+use ProcessMaker\Helpers\DefaultColumns;
+use ProcessMaker\Helpers\MobileHelper;
+use ProcessMaker\Http\Controllers\Controller;
+use ProcessMaker\Managers\DataManager;
+use ProcessMaker\Managers\ScreenBuilderManager;
+use ProcessMaker\Models\Comment;
+use ProcessMaker\Models\Process;
+use ProcessMaker\Models\ProcessRequest;
+use ProcessMaker\Models\ProcessRequestToken;
+use ProcessMaker\Models\Screen;
+use ProcessMaker\Models\ScreenVersion;
+use ProcessMaker\Models\UserResourceView;
+use ProcessMaker\Package\PackageComments\PackageServiceProvider;
+use ProcessMaker\ProcessTranslations\ProcessTranslation;
+use ProcessMaker\RetryProcessRequest;
+use ProcessMaker\Traits\HasControllerAddons;
+use ProcessMaker\Traits\SearchAutocompleteTrait;
+use Spatie\MediaLibrary\MediaCollections\Models\Media;
+
+class CasesController extends Controller
+{
+ /**
+ * Get the list of requests.
+ *
+ * @return \Illuminate\View\View|\Illuminate\Contracts\View
+ */
+ public function index($type = null)
+ {
+ // This is a temporary API the engine team will provide the new
+ return view('cases.casesMain');
+ }
+}

resources/jscomposition/base/buttons/OutlineButton.vue

@@ -0,0 +1,32 @@
+<template>
+ <button
+ type="button"
+ :class="`tw-flex tw-rounded-lg tw-border tw-border-${color}-300 tw-text-${color}-500
+ tw-space-x-2 tw-px-3 tw-py-3 hover:tw-bg-${color}-200 tw-justify-center tw-items-center`"
+ @click="onClick"
+ >
+ <slot />
+ </button>
+</template>
+
+<script>
+import { defineComponent } from "vue";
+
+export default defineComponent({
+ props: {
+ color: {
+ type: String,
+ default: () => "gray",
+ },
+ },
+ emits: ["click"],
+ setup(props, { emit }) {
+ const onClick = () => {
+ emit("click");
+ };
+ return {
+ onClick,
+ };
+ },
+});
+</script>

resources/jscomposition/base/buttons/index.js

@@ -0,0 +1,3 @@
+import OutlineButton from "./OutlineButton.vue";
+
+export { OutlineButton };

resources/jscomposition/base/cards/ThreeSectionCard.vue

@@ -0,0 +1,68 @@
+<template>
+ <div
+ class="tw-flex tw-justify-between tw-items-center
+ tw-p-4 tw-transition tw-duration-150 tw-ease-out
+ hover:tw-ease-in tw-border tw-cursor-pointer tw-rounded-lg tw-text-gray-600"
+ :class="[{
+ [`tw-bg-${color}-100/50 hover:tw-bg-${color}-100`]:!active,
+ [`tw-outline tw-bg-${color}-100 tw-border-${color}-500 tw-outline-${color}-300 tw-bg-${color}-100 hover:tw-bg-${color}-200`]:active
+ }]"
+ @click="handleClick"
+ >
+ <div>
+ <slot name="header">
+ <div class="tw-text-xs">
+ {{ header }}
+ </div>
+ </slot>
+ <slot name="body">
+ <div class="tw-text-2xl">
+ {{ body }}
+ </div>
+ </slot>
+ </div>
+
+ <slot name="icon">
+ <i
+ :class="[`tw-text-${color}-500 tw-text-3xl`, icon]"
+ />
+ </slot>
+ </div>
+</template>
+
+<script>
+import { defineComponent } from "vue";
+
+export default defineComponent({
+ props: {
+ header: {
+ type: String,
+ default: () => "header",
+ },
+ body: {
+ type: String,
+ default: () => "body",
+ },
+ icon: {
+ type: String,
+ default: () => "",
+ },
+ active: {
+ type: Boolean,
+ default: () => false,
+ },
+ color: {
+ type: String,
+ default: () => "gray",
+ },
+ },
+ setup(props, { emit }) {
+ const handleClick = () => {
+ emit("click");
+ };
+ return {
+ handleClick,
+ };
+ },
+});
+</script>

resources/jscomposition/base/cards/index.js

@@ -0,0 +1,3 @@
+import ThreeSectionCard from "./ThreeSectionCard.vue";
+
+export { ThreeSectionCard };

resources/jscomposition/base/form/Dropdown.vue

@@ -0,0 +1,207 @@
+<template>
+ <div class="t-relative">
+ <slot
+ v-bind="{
+ toogleShow,
+ data,
+ }"
+ name="input">
+ <button
+ @click.prevent.stop="show = !show"
+ class="t-flex t-w-full t-justify-between t-items-center t-py-2 t-px-3 t-ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-inset focus:ring-primary-400">
+ <span>{{ data?.label || data?.value || "" }} </span>
+
+ <i class="fas fa-chevron-down" />
+ </button>
+ </slot>
+
+ <transition :name="animation">
+ <div
+ v-if="show"
+ :class="'bg-' + color + '-500'"
+ class="block mt-1 rounded absolute z-10 shadow-lg w-full bg-white">
+ <ul class="list-none overflow-hidden rounded">
+ <li
+ v-for="(option, index) in optionsModel"
+ :key="index"
+ class="hover:bg-gray-200"
+ :class="{
+ 'bg-gray-300': option?.value === data?.value,
+ }"
+ @click.prevent.stop="onClick(option, index)">
+ <slot
+ name="option"
+ v-bind="{
+ option,
+ }">
+ <span
+ class="flex py-2 px-4 transition duration-300"
+ :class="'theme-' + color"
+ >{{ option.label || option.value }}</span
+ >
+ </slot>
+ </li>
+ </ul>
+ </div>
+ </transition>
+ </div>
+</template>
+
+<script>
+import {
+ defineComponent,
+ ref,
+ computed,
+ onMounted,
+ onUnmounted,
+} from "vue";
+
+export default defineComponent({
+ props: {
+ color: {
+ type: String,
+ default: () => "blue",
+ },
+ animation: {
+ type: String,
+ default: () => "fade",
+ },
+ // Example input options {"label":"Label 1" , "value": "1"}
+ options: {
+ type: Array,
+ default: () => [],
+ },
+ modelValue: {
+ type: Object,
+ default: () => null,
+ },
+ },
+ emits: ["update:modelValue", "change"],
+ setup(props, { emit }) {
+ const show = ref(false);
+ const count = ref(0);
+
+ const data = computed({
+ get() {
+ return props.modelValue;
+ },
+ set(value) {
+ emit("update:modelValue", value);
+ },
+ });
+
+ const optionsModel = computed({
+ get() {
+ return props.options;
+ },
+ set(val) {
+ emit("update:options", val);
+ },
+ });
+
+ const onClick = (option, index) => {
+ show.value = false;
+ data.value = option;
+
+ emit("change", option);
+ };
+
+ const addBodyListener = () => {
+ show.value = false;
+ };
+
+ const toogleShow = () => {
+ show.value = !show.value;
+ };
+
+ onMounted(() => {
+ document.body.addEventListener("click", addBodyListener);
+ });
+
+ onUnmounted(() => {
+ document.body.removeEventListener("click", addBodyListener);
+ });
+
+ return {
+ show,
+ data,
+ optionsModel,
+ count,
+ onClick,
+ toogleShow,
+ };
+ },
+});
+</script>
+
+<style scoped>
+/* Animations */
+.fade-enter-active,
+.fade-leave-active {
+ transition: opacity 0.1s;
+}
+.fade-enter,
+.fade-leave-to {
+ opacity: 0;
+}
+
+/* Slide-in-up animation*/
+.slide-in-up-enter-active,
+.slide-in-up-leave-active {
+ transition: all 0.5s;
+ transform: translateY(0);
+}
+.slide-in-up-enter,
+.slide-in-up-leave-to {
+ opacity: 0;
+ transform: translateY(20px);
+}
+
+/* Slide-in-right animation*/
+.slide-in-right-enter-active,
+.slide-in-right-leave-active {
+ transition: all 0.5s;
+ transform: translateX(0);
+}
+.slide-in-right-enter,
+.slide-in-right-leave-to {
+ opacity: 0;
+ transform: translateX(20px);
+}
+
+/* Slide-in-left animation*/
+.slide-in-left-enter-active,
+.slide-in-left-leave-active {
+ transition: all 0.5s;
+ transform: translateX(0);
+}
+.slide-in-left-enter,
+.slide-in-left-leave-to {
+ opacity: 0;
+ transform: translateX(-20px);
+}
+
+/* Scale animation*/
+.scale-enter-active,
+.scale-leave-active {
+ transition: all 0.5s;
+ transform: scale(1);
+}
+.scale-enter,
+.scale-leave-to {
+ opacity: 0;
+ transform: scale(0);
+}
+
+/* Rotate animation*/
+.rotate-enter-active,
+.rotate-leave-active {
+ transition: all 0.5s;
+ transform: scale(1) rotate(-360deg);
+}
+.rotate-enter,
+.rotate-leave-to {
+ opacity: 0;
+ transform: scale(0) rotate(360deg);
+}
+</style>

resources/jscomposition/base/form/InputLeading.vue

@@ -0,0 +1,33 @@
+<template>
+ <div class="tw-relative tw-rounded-lg tw-shadow-sm tw-text-gray-500">
+ <div class="tw-pointer-events-none tw-absolute tw-inset-y-0 tw-left-0 tw-flex tw-items-center tw-pl-3">
+ <slot name="icon">
+ <i :class="icon"></i>
+ </slot>
+ </div>
+ <input class="tw-block tw-w-full tw-rounded-md tw-border-0 tw-py-2 tw-pl-10 
+ tw-text-gray-900 tw-ring-1 tw-ring-inset tw-ring-gray-300 
+ placeholder:tw-text-gray-400 focus:tw-ring-2 focus:tw-ring-inset
+ focus-visible:tw-outline-none
+ sm:tw-text-sm sm:tw-leading-6" :placeholder="placeholder">
+ </div>
+</template>
+<script>
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+ props: {
+ placeholder: {
+ type: String,
+ default: () => ""
+ },
+ icon: {
+ type: String,
+ default: () => ("fa-solid fa-magnifying-glass")
+ }
+ },
+ setup(props, { emit }) {
+ return {};
+ }
+});
+</script>

ProcessMaker/Http/Controllers/CasesController.php

@@ -0,0 +1,44 @@
+<?php
+
+namespace ProcessMaker\Http\Controllers;
+
+use Facades\ProcessMaker\RollbackProcessRequest;
+use Illuminate\Http\Request;
+use Illuminate\Support\Facades\Auth;
+use Illuminate\Support\Facades\Route;
+use ProcessMaker\Cache\CacheRemember;
+use ProcessMaker\Events\FilesDownloaded;
+use ProcessMaker\Events\ScreenBuilderStarting;
+use ProcessMaker\Filters\SaveSession;
+use ProcessMaker\Helpers\DefaultColumns;
+use ProcessMaker\Helpers\MobileHelper;
+use ProcessMaker\Http\Controllers\Controller;
+use ProcessMaker\Managers\DataManager;
+use ProcessMaker\Managers\ScreenBuilderManager;
+use ProcessMaker\Models\Comment;
+use ProcessMaker\Models\Process;
+use ProcessMaker\Models\ProcessRequest;
+use ProcessMaker\Models\ProcessRequestToken;
+use ProcessMaker\Models\Screen;
+use ProcessMaker\Models\ScreenVersion;
+use ProcessMaker\Models\UserResourceView;
+use ProcessMaker\Package\PackageComments\PackageServiceProvider;
+use ProcessMaker\ProcessTranslations\ProcessTranslation;
+use ProcessMaker\RetryProcessRequest;
+use ProcessMaker\Traits\HasControllerAddons;
+use ProcessMaker\Traits\SearchAutocompleteTrait;
+use Spatie\MediaLibrary\MediaCollections\Models\Media;
+
+class CasesController extends Controller
+{
+ /**
+ * Get the list of requests.
+ *
+ * @return \Illuminate\View\View|\Illuminate\Contracts\View
+ */
+ public function index($type = null)
+ {
+ // This is a temporary API the engine team will provide the new
+ return view('cases.casesMain');
+ }
+}

resources/jscomposition/base/buttons/OutlineButton.vue

@@ -0,0 +1,32 @@
+<template>
+ <button
+ type="button"
+ :class="`tw-flex tw-rounded-lg tw-border tw-border-${color}-300 tw-text-${color}-500
+ tw-space-x-2 tw-px-3 tw-py-3 hover:tw-bg-${color}-200 tw-justify-center tw-items-center`"
+ @click="onClick"
+ >
+ <slot />
+ </button>
+</template>
+
+<script>
+import { defineComponent } from "vue";
+
+export default defineComponent({
+ props: {
+ color: {
+ type: String,
+ default: () => "gray",
+ },
+ },
+ emits: ["click"],
+ setup(props, { emit }) {
+ const onClick = () => {
+ emit("click");
+ };
+ return {
+ onClick,
+ };
+ },
+});
+</script>

resources/jscomposition/base/buttons/index.js

@@ -0,0 +1,3 @@
+import OutlineButton from "./OutlineButton.vue";
+
+export { OutlineButton };

resources/jscomposition/base/cards/ThreeSectionCard.vue

@@ -0,0 +1,68 @@
+<template>
+ <div
+ class="tw-flex tw-justify-between tw-items-center
+ tw-p-4 tw-transition tw-duration-150 tw-ease-out
+ hover:tw-ease-in tw-border tw-cursor-pointer tw-rounded-lg tw-text-gray-600"
+ :class="[{
+ [`tw-bg-${color}-100/50 hover:tw-bg-${color}-100`]:!active,
+ [`tw-outline tw-bg-${color}-100 tw-border-${color}-500 tw-outline-${color}-300 tw-bg-${color}-100 hover:tw-bg-${color}-200`]:active
+ }]"
+ @click="handleClick"
+ >
+ <div>
+ <slot name="header">
+ <div class="tw-text-xs">
+ {{ header }}
+ </div>
+ </slot>
+ <slot name="body">
+ <div class="tw-text-2xl">
+ {{ body }}
+ </div>
+ </slot>
+ </div>
+
+ <slot name="icon">
+ <i
+ :class="[`tw-text-${color}-500 tw-text-3xl`, icon]"
+ />
+ </slot>
+ </div>
+</template>
+
+<script>
+import { defineComponent } from "vue";
+
+export default defineComponent({
+ props: {
+ header: {
+ type: String,
+ default: () => "header",
+ },
+ body: {
+ type: String,
+ default: () => "body",
+ },
+ icon: {
+ type: String,
+ default: () => "",
+ },
+ active: {
+ type: Boolean,
+ default: () => false,
+ },
+ color: {
+ type: String,
+ default: () => "gray",
+ },
+ },
+ setup(props, { emit }) {
+ const handleClick = () => {
+ emit("click");
+ };
+ return {
+ handleClick,
+ };
+ },
+});
+</script>

resources/jscomposition/base/cards/index.js

@@ -0,0 +1,3 @@
+import ThreeSectionCard from "./ThreeSectionCard.vue";
+
+export { ThreeSectionCard };

resources/jscomposition/base/form/Dropdown.vue

@@ -0,0 +1,207 @@
+<template>
+ <div class="t-relative">
+ <slot
+ v-bind="{
+ toogleShow,
+ data,
+ }"
+ name="input">
+ <button
+ @click.prevent.stop="show = !show"
+ class="t-flex t-w-full t-justify-between t-items-center t-py-2 t-px-3 t-ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-inset focus:ring-primary-400">
+ <span>{{ data?.label || data?.value || "" }} </span>
+
+ <i class="fas fa-chevron-down" />
+ </button>
+ </slot>
+
+ <transition :name="animation">
+ <div
+ v-if="show"
+ :class="'bg-' + color + '-500'"
+ class="block mt-1 rounded absolute z-10 shadow-lg w-full bg-white">
+ <ul class="list-none overflow-hidden rounded">
+ <li
+ v-for="(option, index) in optionsModel"
+ :key="index"
+ class="hover:bg-gray-200"
+ :class="{
+ 'bg-gray-300': option?.value === data?.value,
+ }"
+ @click.prevent.stop="onClick(option, index)">
+ <slot
+ name="option"
+ v-bind="{
+ option,
+ }">
+ <span
+ class="flex py-2 px-4 transition duration-300"
+ :class="'theme-' + color"
+ >{{ option.label || option.value }}</span
+ >
+ </slot>
+ </li>
+ </ul>
+ </div>
+ </transition>
+ </div>
+</template>
+
+<script>
+import {
+ defineComponent,
+ ref,
+ computed,
+ onMounted,
+ onUnmounted,
+} from "vue";
+
+export default defineComponent({
+ props: {
+ color: {
+ type: String,
+ default: () => "blue",
+ },
+ animation: {
+ type: String,
+ default: () => "fade",
+ },
+ // Example input options {"label":"Label 1" , "value": "1"}
+ options: {
+ type: Array,
+ default: () => [],
+ },
+ modelValue: {
+ type: Object,
+ default: () => null,
+ },
+ },
+ emits: ["update:modelValue", "change"],
+ setup(props, { emit }) {
+ const show = ref(false);
+ const count = ref(0);
+
+ const data = computed({
+ get() {
+ return props.modelValue;
+ },
+ set(value) {
+ emit("update:modelValue", value);
+ },
+ });
+
+ const optionsModel = computed({
+ get() {
+ return props.options;
+ },
+ set(val) {
+ emit("update:options", val);
+ },
+ });
+
+ const onClick = (option, index) => {
+ show.value = false;
+ data.value = option;
+
+ emit("change", option);
+ };
+
+ const addBodyListener = () => {
+ show.value = false;
+ };
+
+ const toogleShow = () => {
+ show.value = !show.value;
+ };
+
+ onMounted(() => {
+ document.body.addEventListener("click", addBodyListener);
+ });
+
+ onUnmounted(() => {
+ document.body.removeEventListener("click", addBodyListener);
+ });
+
+ return {
+ show,
+ data,
+ optionsModel,
+ count,
+ onClick,
+ toogleShow,
+ };
+ },
+});
+</script>
+
+<style scoped>
+/* Animations */
+.fade-enter-active,
+.fade-leave-active {
+ transition: opacity 0.1s;
+}
+.fade-enter,
+.fade-leave-to {
+ opacity: 0;
+}
+
+/* Slide-in-up animation*/
+.slide-in-up-enter-active,
+.slide-in-up-leave-active {
+ transition: all 0.5s;
+ transform: translateY(0);
+}
+.slide-in-up-enter,
+.slide-in-up-leave-to {
+ opacity: 0;
+ transform: translateY(20px);
+}
+
+/* Slide-in-right animation*/
+.slide-in-right-enter-active,
+.slide-in-right-leave-active {
+ transition: all 0.5s;
+ transform: translateX(0);
+}
+.slide-in-right-enter,
+.slide-in-right-leave-to {
+ opacity: 0;
+ transform: translateX(20px);
+}
+
+/* Slide-in-left animation*/
+.slide-in-left-enter-active,
+.slide-in-left-leave-active {
+ transition: all 0.5s;
+ transform: translateX(0);
+}
+.slide-in-left-enter,
+.slide-in-left-leave-to {
+ opacity: 0;
+ transform: translateX(-20px);
+}
+
+/* Scale animation*/
+.scale-enter-active,
+.scale-leave-active {
+ transition: all 0.5s;
+ transform: scale(1);
+}
+.scale-enter,
+.scale-leave-to {
+ opacity: 0;
+ transform: scale(0);
+}
+
+/* Rotate animation*/
+.rotate-enter-active,
+.rotate-leave-active {
+ transition: all 0.5s;
+ transform: scale(1) rotate(-360deg);
+}
+.rotate-enter,
+.rotate-leave-to {
+ opacity: 0;
+ transform: scale(0) rotate(360deg);
+}
+</style>

resources/jscomposition/base/form/InputLeading.vue

@@ -0,0 +1,33 @@
+<template>
+ <div class="tw-relative tw-rounded-lg tw-shadow-sm tw-text-gray-500">
+ <div class="tw-pointer-events-none tw-absolute tw-inset-y-0 tw-left-0 tw-flex tw-items-center tw-pl-3">
+ <slot name="icon">
+ <i :class="icon"></i>
+ </slot>
+ </div>
+ <input class="tw-block tw-w-full tw-rounded-md tw-border-0 tw-py-2 tw-pl-10 
+ tw-text-gray-900 tw-ring-1 tw-ring-inset tw-ring-gray-300 
+ placeholder:tw-text-gray-400 focus:tw-ring-2 focus:tw-ring-inset
+ focus-visible:tw-outline-none
+ sm:tw-text-sm sm:tw-leading-6" :placeholder="placeholder">
+ </div>
+</template>
+<script>
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+ props: {
+ placeholder: {
+ type: String,
+ default: () => ""
+ },
+ icon: {
+ type: String,
+ default: () => ("fa-solid fa-magnifying-glass")
+ }
+ },
+ setup(props, { emit }) {
+ return {};
+ }
+});
+</script>

ProcessMaker/Http/Controllers/CasesController.php

@@ -0,0 +1,44 @@
+<?php
+
+namespace ProcessMaker\Http\Controllers;
+
+use Facades\ProcessMaker\RollbackProcessRequest;
+use Illuminate\Http\Request;
+use Illuminate\Support\Facades\Auth;
+use Illuminate\Support\Facades\Route;
+use ProcessMaker\Cache\CacheRemember;
+use ProcessMaker\Events\FilesDownloaded;
+use ProcessMaker\Events\ScreenBuilderStarting;
+use ProcessMaker\Filters\SaveSession;
+use ProcessMaker\Helpers\DefaultColumns;
+use ProcessMaker\Helpers\MobileHelper;
+use ProcessMaker\Http\Controllers\Controller;
+use ProcessMaker\Managers\DataManager;
+use ProcessMaker\Managers\ScreenBuilderManager;
+use ProcessMaker\Models\Comment;
+use ProcessMaker\Models\Process;
+use ProcessMaker\Models\ProcessRequest;
+use ProcessMaker\Models\ProcessRequestToken;
+use ProcessMaker\Models\Screen;
+use ProcessMaker\Models\ScreenVersion;
+use ProcessMaker\Models\UserResourceView;
+use ProcessMaker\Package\PackageComments\PackageServiceProvider;
+use ProcessMaker\ProcessTranslations\ProcessTranslation;
+use ProcessMaker\RetryProcessRequest;
+use ProcessMaker\Traits\HasControllerAddons;
+use ProcessMaker\Traits\SearchAutocompleteTrait;
+use Spatie\MediaLibrary\MediaCollections\Models\Media;
+
+class CasesController extends Controller
+{
+ /**
+ * Get the list of requests.
+ *
+ * @return \Illuminate\View\View|\Illuminate\Contracts\View
+ */
+ public function index($type = null)
+ {
+ // This is a temporary API the engine team will provide the new
+ return view('cases.casesMain');
+ }
+}

resources/jscomposition/base/buttons/OutlineButton.vue

@@ -0,0 +1,32 @@
+<template>
+ <button
+ type="button"
+ :class="`tw-flex tw-rounded-lg tw-border tw-border-${color}-300 tw-text-${color}-500
+ tw-space-x-2 tw-px-3 tw-py-3 hover:tw-bg-${color}-200 tw-justify-center tw-items-center`"
+ @click="onClick"
+ >
+ <slot />
+ </button>
+</template>
+
+<script>
+import { defineComponent } from "vue";
+
+export default defineComponent({
+ props: {
+ color: {
+ type: String,
+ default: () => "gray",
+ },
+ },
+ emits: ["click"],
+ setup(props, { emit }) {
+ const onClick = () => {
+ emit("click");
+ };
+ return {
+ onClick,
+ };
+ },
+});
+</script>

resources/jscomposition/base/buttons/index.js

@@ -0,0 +1,3 @@
+import OutlineButton from "./OutlineButton.vue";
+
+export { OutlineButton };

resources/jscomposition/base/cards/ThreeSectionCard.vue

@@ -0,0 +1,68 @@
+<template>
+ <div
+ class="tw-flex tw-justify-between tw-items-center
+ tw-p-4 tw-transition tw-duration-150 tw-ease-out
+ hover:tw-ease-in tw-border tw-cursor-pointer tw-rounded-lg tw-text-gray-600"
+ :class="[{
+ [`tw-bg-${color}-100/50 hover:tw-bg-${color}-100`]:!active,
+ [`tw-outline tw-bg-${color}-100 tw-border-${color}-500 tw-outline-${color}-300 tw-bg-${color}-100 hover:tw-bg-${color}-200`]:active
+ }]"
+ @click="handleClick"
+ >
+ <div>
+ <slot name="header">
+ <div class="tw-text-xs">
+ {{ header }}
+ </div>
+ </slot>
+ <slot name="body">
+ <div class="tw-text-2xl">
+ {{ body }}
+ </div>
+ </slot>
+ </div>
+
+ <slot name="icon">
+ <i
+ :class="[`tw-text-${color}-500 tw-text-3xl`, icon]"
+ />
+ </slot>
+ </div>
+</template>
+
+<script>
+import { defineComponent } from "vue";
+
+export default defineComponent({
+ props: {
+ header: {
+ type: String,
+ default: () => "header",
+ },
+ body: {
+ type: String,
+ default: () => "body",
+ },
+ icon: {
+ type: String,
+ default: () => "",
+ },
+ active: {
+ type: Boolean,
+ default: () => false,
+ },
+ color: {
+ type: String,
+ default: () => "gray",
+ },
+ },
+ setup(props, { emit }) {
+ const handleClick = () => {
+ emit("click");
+ };
+ return {
+ handleClick,
+ };
+ },
+});
+</script>

resources/jscomposition/base/cards/index.js

@@ -0,0 +1,3 @@
+import ThreeSectionCard from "./ThreeSectionCard.vue";
+
+export { ThreeSectionCard };

resources/jscomposition/base/form/Dropdown.vue

@@ -0,0 +1,207 @@
+<template>
+ <div class="t-relative">
+ <slot
+ v-bind="{
+ toogleShow,
+ data,
+ }"
+ name="input">
+ <button
+ @click.prevent.stop="show = !show"
+ class="t-flex t-w-full t-justify-between t-items-center t-py-2 t-px-3 t-ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-inset focus:ring-primary-400">
+ <span>{{ data?.label || data?.value || "" }} </span>
+
+ <i class="fas fa-chevron-down" />
+ </button>
+ </slot>
+
+ <transition :name="animation">
+ <div
+ v-if="show"
+ :class="'bg-' + color + '-500'"
+ class="block mt-1 rounded absolute z-10 shadow-lg w-full bg-white">
+ <ul class="list-none overflow-hidden rounded">
+ <li
+ v-for="(option, index) in optionsModel"
+ :key="index"
+ class="hover:bg-gray-200"
+ :class="{
+ 'bg-gray-300': option?.value === data?.value,
+ }"
+ @click.prevent.stop="onClick(option, index)">
+ <slot
+ name="option"
+ v-bind="{
+ option,
+ }">
+ <span
+ class="flex py-2 px-4 transition duration-300"
+ :class="'theme-' + color"
+ >{{ option.label || option.value }}</span
+ >
+ </slot>
+ </li>
+ </ul>
+ </div>
+ </transition>
+ </div>
+</template>
+
+<script>
+import {
+ defineComponent,
+ ref,
+ computed,
+ onMounted,
+ onUnmounted,
+} from "vue";
+
+export default defineComponent({
+ props: {
+ color: {
+ type: String,
+ default: () => "blue",
+ },
+ animation: {
+ type: String,
+ default: () => "fade",
+ },
+ // Example input options {"label":"Label 1" , "value": "1"}
+ options: {
+ type: Array,
+ default: () => [],
+ },
+ modelValue: {
+ type: Object,
+ default: () => null,
+ },
+ },
+ emits: ["update:modelValue", "change"],
+ setup(props, { emit }) {
+ const show = ref(false);
+ const count = ref(0);
+
+ const data = computed({
+ get() {
+ return props.modelValue;
+ },
+ set(value) {
+ emit("update:modelValue", value);
+ },
+ });
+
+ const optionsModel = computed({
+ get() {
+ return props.options;
+ },
+ set(val) {
+ emit("update:options", val);
+ },
+ });
+
+ const onClick = (option, index) => {
+ show.value = false;
+ data.value = option;
+
+ emit("change", option);
+ };
+
+ const addBodyListener = () => {
+ show.value = false;
+ };
+
+ const toogleShow = () => {
+ show.value = !show.value;
+ };
+
+ onMounted(() => {
+ document.body.addEventListener("click", addBodyListener);
+ });
+
+ onUnmounted(() => {
+ document.body.removeEventListener("click", addBodyListener);
+ });
+
+ return {
+ show,
+ data,
+ optionsModel,
+ count,
+ onClick,
+ toogleShow,
+ };
+ },
+});
+</script>
+
+<style scoped>
+/* Animations */
+.fade-enter-active,
+.fade-leave-active {
+ transition: opacity 0.1s;
+}
+.fade-enter,
+.fade-leave-to {
+ opacity: 0;
+}
+
+/* Slide-in-up animation*/
+.slide-in-up-enter-active,
+.slide-in-up-leave-active {
+ transition: all 0.5s;
+ transform: translateY(0);
+}
+.slide-in-up-enter,
+.slide-in-up-leave-to {
+ opacity: 0;
+ transform: translateY(20px);
+}
+
+/* Slide-in-right animation*/
+.slide-in-right-enter-active,
+.slide-in-right-leave-active {
+ transition: all 0.5s;
+ transform: translateX(0);
+}
+.slide-in-right-enter,
+.slide-in-right-leave-to {
+ opacity: 0;
+ transform: translateX(20px);
+}
+
+/* Slide-in-left animation*/
+.slide-in-left-enter-active,
+.slide-in-left-leave-active {
+ transition: all 0.5s;
+ transform: translateX(0);
+}
+.slide-in-left-enter,
+.slide-in-left-leave-to {
+ opacity: 0;
+ transform: translateX(-20px);
+}
+
+/* Scale animation*/
+.scale-enter-active,
+.scale-leave-active {
+ transition: all 0.5s;
+ transform: scale(1);
+}
+.scale-enter,
+.scale-leave-to {
+ opacity: 0;
+ transform: scale(0);
+}
+
+/* Rotate animation*/
+.rotate-enter-active,
+.rotate-leave-active {
+ transition: all 0.5s;
+ transform: scale(1) rotate(-360deg);
+}
+.rotate-enter,
+.rotate-leave-to {
+ opacity: 0;
+ transform: scale(0) rotate(360deg);
+}
+</style>

resources/jscomposition/base/form/InputLeading.vue

@@ -0,0 +1,33 @@
+<template>
+ <div class="tw-relative tw-rounded-lg tw-shadow-sm tw-text-gray-500">
+ <div class="tw-pointer-events-none tw-absolute tw-inset-y-0 tw-left-0 tw-flex tw-items-center tw-pl-3">
+ <slot name="icon">
+ <i :class="icon"></i>
+ </slot>
+ </div>
+ <input class="tw-block tw-w-full tw-rounded-md tw-border-0 tw-py-2 tw-pl-10 
+ tw-text-gray-900 tw-ring-1 tw-ring-inset tw-ring-gray-300 
+ placeholder:tw-text-gray-400 focus:tw-ring-2 focus:tw-ring-inset
+ focus-visible:tw-outline-none
+ sm:tw-text-sm sm:tw-leading-6" :placeholder="placeholder">
+ </div>
+</template>
+<script>
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+ props: {
+ placeholder: {
+ type: String,
+ default: () => ""
+ },
+ icon: {
+ type: String,
+ default: () => ("fa-solid fa-magnifying-glass")
+ }
+ },
+ setup(props, { emit }) {
+ return {};
+ }
+});
+</script>

ProcessMaker/Http/Controllers/CasesController.php

@@ -0,0 +1,44 @@
+<?php
+
+namespace ProcessMaker\Http\Controllers;
+
+use Facades\ProcessMaker\RollbackProcessRequest;
+use Illuminate\Http\Request;
+use Illuminate\Support\Facades\Auth;
+use Illuminate\Support\Facades\Route;
+use ProcessMaker\Cache\CacheRemember;
+use ProcessMaker\Events\FilesDownloaded;
+use ProcessMaker\Events\ScreenBuilderStarting;
+use ProcessMaker\Filters\SaveSession;
+use ProcessMaker\Helpers\DefaultColumns;
+use ProcessMaker\Helpers\MobileHelper;
+use ProcessMaker\Http\Controllers\Controller;
+use ProcessMaker\Managers\DataManager;
+use ProcessMaker\Managers\ScreenBuilderManager;
+use ProcessMaker\Models\Comment;
+use ProcessMaker\Models\Process;
+use ProcessMaker\Models\ProcessRequest;
+use ProcessMaker\Models\ProcessRequestToken;
+use ProcessMaker\Models\Screen;
+use ProcessMaker\Models\ScreenVersion;
+use ProcessMaker\Models\UserResourceView;
+use ProcessMaker\Package\PackageComments\PackageServiceProvider;
+use ProcessMaker\ProcessTranslations\ProcessTranslation;
+use ProcessMaker\RetryProcessRequest;
+use ProcessMaker\Traits\HasControllerAddons;
+use ProcessMaker\Traits\SearchAutocompleteTrait;
+use Spatie\MediaLibrary\MediaCollections\Models\Media;
+
+class CasesController extends Controller
+{
+ /**
+ * Get the list of requests.
+ *
+ * @return \Illuminate\View\View|\Illuminate\Contracts\View
+ */
+ public function index($type = null)
+ {
+ // This is a temporary API the engine team will provide the new
+ return view('cases.casesMain');
+ }
+}

resources/jscomposition/base/buttons/OutlineButton.vue

@@ -0,0 +1,32 @@
+<template>
+ <button
+ type="button"
+ :class="`tw-flex tw-rounded-lg tw-border tw-border-${color}-300 tw-text-${color}-500
+ tw-space-x-2 tw-px-3 tw-py-3 hover:tw-bg-${color}-200 tw-justify-center tw-items-center`"
+ @click="onClick"
+ >
+ <slot />
+ </button>
+</template>
+
+<script>
+import { defineComponent } from "vue";
+
+export default defineComponent({
+ props: {
+ color: {
+ type: String,
+ default: () => "gray",
+ },
+ },
+ emits: ["click"],
+ setup(props, { emit }) {
+ const onClick = () => {
+ emit("click");
+ };
+ return {
+ onClick,
+ };
+ },
+});
+</script>

resources/jscomposition/base/buttons/index.js

@@ -0,0 +1,3 @@
+import OutlineButton from "./OutlineButton.vue";
+
+export { OutlineButton };

resources/jscomposition/base/cards/ThreeSectionCard.vue

@@ -0,0 +1,68 @@
+<template>
+ <div
+ class="tw-flex tw-justify-between tw-items-center
+ tw-p-4 tw-transition tw-duration-150 tw-ease-out
+ hover:tw-ease-in tw-border tw-cursor-pointer tw-rounded-lg tw-text-gray-600"
+ :class="[{
+ [`tw-bg-${color}-100/50 hover:tw-bg-${color}-100`]:!active,
+ [`tw-outline tw-bg-${color}-100 tw-border-${color}-500 tw-outline-${color}-300 tw-bg-${color}-100 hover:tw-bg-${color}-200`]:active
+ }]"
+ @click="handleClick"
+ >
+ <div>
+ <slot name="header">
+ <div class="tw-text-xs">
+ {{ header }}
+ </div>
+ </slot>
+ <slot name="body">
+ <div class="tw-text-2xl">
+ {{ body }}
+ </div>
+ </slot>
+ </div>
+
+ <slot name="icon">
+ <i
+ :class="[`tw-text-${color}-500 tw-text-3xl`, icon]"
+ />
+ </slot>
+ </div>
+</template>
+
+<script>
+import { defineComponent } from "vue";
+
+export default defineComponent({
+ props: {
+ header: {
+ type: String,
+ default: () => "header",
+ },
+ body: {
+ type: String,
+ default: () => "body",
+ },
+ icon: {
+ type: String,
+ default: () => "",
+ },
+ active: {
+ type: Boolean,
+ default: () => false,
+ },
+ color: {
+ type: String,
+ default: () => "gray",
+ },
+ },
+ setup(props, { emit }) {
+ const handleClick = () => {
+ emit("click");
+ };
+ return {
+ handleClick,
+ };
+ },
+});
+</script>

resources/jscomposition/base/cards/index.js

@@ -0,0 +1,3 @@
+import ThreeSectionCard from "./ThreeSectionCard.vue";
+
+export { ThreeSectionCard };

resources/jscomposition/base/form/Dropdown.vue

@@ -0,0 +1,207 @@
+<template>
+ <div class="t-relative">
+ <slot
+ v-bind="{
+ toogleShow,
+ data,
+ }"
+ name="input">
+ <button
+ @click.prevent.stop="show = !show"
+ class="t-flex t-w-full t-justify-between t-items-center t-py-2 t-px-3 t-ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-inset focus:ring-primary-400">
+ <span>{{ data?.label || data?.value || "" }} </span>
+
+ <i class="fas fa-chevron-down" />
+ </button>
+ </slot>
+
+ <transition :name="animation">
+ <div
+ v-if="show"
+ :class="'bg-' + color + '-500'"
+ class="block mt-1 rounded absolute z-10 shadow-lg w-full bg-white">
+ <ul class="list-none overflow-hidden rounded">
+ <li
+ v-for="(option, index) in optionsModel"
+ :key="index"
+ class="hover:bg-gray-200"
+ :class="{
+ 'bg-gray-300': option?.value === data?.value,
+ }"
+ @click.prevent.stop="onClick(option, index)">
+ <slot
+ name="option"
+ v-bind="{
+ option,
+ }">
+ <span
+ class="flex py-2 px-4 transition duration-300"
+ :class="'theme-' + color"
+ >{{ option.label || option.value }}</span
+ >
+ </slot>
+ </li>
+ </ul>
+ </div>
+ </transition>
+ </div>
+</template>
+
+<script>
+import {
+ defineComponent,
+ ref,
+ computed,
+ onMounted,
+ onUnmounted,
+} from "vue";
+
+export default defineComponent({
+ props: {
+ color: {
+ type: String,
+ default: () => "blue",
+ },
+ animation: {
+ type: String,
+ default: () => "fade",
+ },
+ // Example input options {"label":"Label 1" , "value": "1"}
+ options: {
+ type: Array,
+ default: () => [],
+ },
+ modelValue: {
+ type: Object,
+ default: () => null,
+ },
+ },
+ emits: ["update:modelValue", "change"],
+ setup(props, { emit }) {
+ const show = ref(false);
+ const count = ref(0);
+
+ const data = computed({
+ get() {
+ return props.modelValue;
+ },
+ set(value) {
+ emit("update:modelValue", value);
+ },
+ });
+
+ const optionsModel = computed({
+ get() {
+ return props.options;
+ },
+ set(val) {
+ emit("update:options", val);
+ },
+ });
+
+ const onClick = (option, index) => {
+ show.value = false;
+ data.value = option;
+
+ emit("change", option);
+ };
+
+ const addBodyListener = () => {
+ show.value = false;
+ };
+
+ const toogleShow = () => {
+ show.value = !show.value;
+ };
+
+ onMounted(() => {
+ document.body.addEventListener("click", addBodyListener);
+ });
+
+ onUnmounted(() => {
+ document.body.removeEventListener("click", addBodyListener);
+ });
+
+ return {
+ show,
+ data,
+ optionsModel,
+ count,
+ onClick,
+ toogleShow,
+ };
+ },
+});
+</script>
+
+<style scoped>
+/* Animations */
+.fade-enter-active,
+.fade-leave-active {
+ transition: opacity 0.1s;
+}
+.fade-enter,
+.fade-leave-to {
+ opacity: 0;
+}
+
+/* Slide-in-up animation*/
+.slide-in-up-enter-active,
+.slide-in-up-leave-active {
+ transition: all 0.5s;
+ transform: translateY(0);
+}
+.slide-in-up-enter,
+.slide-in-up-leave-to {
+ opacity: 0;
+ transform: translateY(20px);
+}
+
+/* Slide-in-right animation*/
+.slide-in-right-enter-active,
+.slide-in-right-leave-active {
+ transition: all 0.5s;
+ transform: translateX(0);
+}
+.slide-in-right-enter,
+.slide-in-right-leave-to {
+ opacity: 0;
+ transform: translateX(20px);
+}
+
+/* Slide-in-left animation*/
+.slide-in-left-enter-active,
+.slide-in-left-leave-active {
+ transition: all 0.5s;
+ transform: translateX(0);
+}
+.slide-in-left-enter,
+.slide-in-left-leave-to {
+ opacity: 0;
+ transform: translateX(-20px);
+}
+
+/* Scale animation*/
+.scale-enter-active,
+.scale-leave-active {
+ transition: all 0.5s;
+ transform: scale(1);
+}
+.scale-enter,
+.scale-leave-to {
+ opacity: 0;
+ transform: scale(0);
+}
+
+/* Rotate animation*/
+.rotate-enter-active,
+.rotate-leave-active {
+ transition: all 0.5s;
+ transform: scale(1) rotate(-360deg);
+}
+.rotate-enter,
+.rotate-leave-to {
+ opacity: 0;
+ transform: scale(0) rotate(360deg);
+}
+</style>

resources/jscomposition/base/form/InputLeading.vue

@@ -0,0 +1,33 @@
+<template>
+ <div class="tw-relative tw-rounded-lg tw-shadow-sm tw-text-gray-500">
+ <div class="tw-pointer-events-none tw-absolute tw-inset-y-0 tw-left-0 tw-flex tw-items-center tw-pl-3">
+ <slot name="icon">
+ <i :class="icon"></i>
+ </slot>
+ </div>
+ <input class="tw-block tw-w-full tw-rounded-md tw-border-0 tw-py-2 tw-pl-10 
+ tw-text-gray-900 tw-ring-1 tw-ring-inset tw-ring-gray-300 
+ placeholder:tw-text-gray-400 focus:tw-ring-2 focus:tw-ring-inset
+ focus-visible:tw-outline-none
+ sm:tw-text-sm sm:tw-leading-6" :placeholder="placeholder">
+ </div>
+</template>
+<script>
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+ props: {
+ placeholder: {
+ type: String,
+ default: () => ""
+ },
+ icon: {
+ type: String,
+ default: () => ("fa-solid fa-magnifying-glass")
+ }
+ },
+ setup(props, { emit }) {
+ return {};
+ }
+});
+</script>

ProcessMaker/Http/Controllers/CasesController.php

@@ -0,0 +1,44 @@
+<?php
+
+namespace ProcessMaker\Http\Controllers;
+
+use Facades\ProcessMaker\RollbackProcessRequest;
+use Illuminate\Http\Request;
+use Illuminate\Support\Facades\Auth;
+use Illuminate\Support\Facades\Route;
+use ProcessMaker\Cache\CacheRemember;
+use ProcessMaker\Events\FilesDownloaded;
+use ProcessMaker\Events\ScreenBuilderStarting;
+use ProcessMaker\Filters\SaveSession;
+use ProcessMaker\Helpers\DefaultColumns;
+use ProcessMaker\Helpers\MobileHelper;
+use ProcessMaker\Http\Controllers\Controller;
+use ProcessMaker\Managers\DataManager;
+use ProcessMaker\Managers\ScreenBuilderManager;
+use ProcessMaker\Models\Comment;
+use ProcessMaker\Models\Process;
+use ProcessMaker\Models\ProcessRequest;
+use ProcessMaker\Models\ProcessRequestToken;
+use ProcessMaker\Models\Screen;
+use ProcessMaker\Models\ScreenVersion;
+use ProcessMaker\Models\UserResourceView;
+use ProcessMaker\Package\PackageComments\PackageServiceProvider;
+use ProcessMaker\ProcessTranslations\ProcessTranslation;
+use ProcessMaker\RetryProcessRequest;
+use ProcessMaker\Traits\HasControllerAddons;
+use ProcessMaker\Traits\SearchAutocompleteTrait;
+use Spatie\MediaLibrary\MediaCollections\Models\Media;
+
+class CasesController extends Controller
+{
+ /**
+ * Get the list of requests.
+ *
+ * @return \Illuminate\View\View|\Illuminate\Contracts\View
+ */
+ public function index($type = null)
+ {
+ // This is a temporary API the engine team will provide the new
+ return view('cases.casesMain');
+ }
+}

resources/jscomposition/base/buttons/OutlineButton.vue

@@ -0,0 +1,32 @@
+<template>
+ <button
+ type="button"
+ :class="`tw-flex tw-rounded-lg tw-border tw-border-${color}-300 tw-text-${color}-500
+ tw-space-x-2 tw-px-3 tw-py-3 hover:tw-bg-${color}-200 tw-justify-center tw-items-center`"
+ @click="onClick"
+ >
+ <slot />
+ </button>
+</template>
+
+<script>
+import { defineComponent } from "vue";
+
+export default defineComponent({
+ props: {
+ color: {
+ type: String,
+ default: () => "gray",
+ },
+ },
+ emits: ["click"],
+ setup(props, { emit }) {
+ const onClick = () => {
+ emit("click");
+ };
+ return {
+ onClick,
+ };
+ },
+});
+</script>

resources/jscomposition/base/buttons/index.js

@@ -0,0 +1,3 @@
+import OutlineButton from "./OutlineButton.vue";
+
+export { OutlineButton };

resources/jscomposition/base/cards/ThreeSectionCard.vue

@@ -0,0 +1,68 @@
+<template>
+ <div
+ class="tw-flex tw-justify-between tw-items-center
+ tw-p-4 tw-transition tw-duration-150 tw-ease-out
+ hover:tw-ease-in tw-border tw-cursor-pointer tw-rounded-lg tw-text-gray-600"
+ :class="[{
+ [`tw-bg-${color}-100/50 hover:tw-bg-${color}-100`]:!active,
+ [`tw-outline tw-bg-${color}-100 tw-border-${color}-500 tw-outline-${color}-300 tw-bg-${color}-100 hover:tw-bg-${color}-200`]:active
+ }]"
+ @click="handleClick"
+ >
+ <div>
+ <slot name="header">
+ <div class="tw-text-xs">
+ {{ header }}
+ </div>
+ </slot>
+ <slot name="body">
+ <div class="tw-text-2xl">
+ {{ body }}
+ </div>
+ </slot>
+ </div>
+
+ <slot name="icon">
+ <i
+ :class="[`tw-text-${color}-500 tw-text-3xl`, icon]"
+ />
+ </slot>
+ </div>
+</template>
+
+<script>
+import { defineComponent } from "vue";
+
+export default defineComponent({
+ props: {
+ header: {
+ type: String,
+ default: () => "header",
+ },
+ body: {
+ type: String,
+ default: () => "body",
+ },
+ icon: {
+ type: String,
+ default: () => "",
+ },
+ active: {
+ type: Boolean,
+ default: () => false,
+ },
+ color: {
+ type: String,
+ default: () => "gray",
+ },
+ },
+ setup(props, { emit }) {
+ const handleClick = () => {
+ emit("click");
+ };
+ return {
+ handleClick,
+ };
+ },
+});
+</script>

resources/jscomposition/base/cards/index.js

@@ -0,0 +1,3 @@
+import ThreeSectionCard from "./ThreeSectionCard.vue";
+
+export { ThreeSectionCard };

resources/jscomposition/base/form/Dropdown.vue

@@ -0,0 +1,207 @@
+<template>
+ <div class="t-relative">
+ <slot
+ v-bind="{
+ toogleShow,
+ data,
+ }"
+ name="input">
+ <button
+ @click.prevent.stop="show = !show"
+ class="t-flex t-w-full t-justify-between t-items-center t-py-2 t-px-3 t-ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-inset focus:ring-primary-400">
+ <span>{{ data?.label || data?.value || "" }} </span>
+
+ <i class="fas fa-chevron-down" />
+ </button>
+ </slot>
+
+ <transition :name="animation">
+ <div
+ v-if="show"
+ :class="'bg-' + color + '-500'"
+ class="block mt-1 rounded absolute z-10 shadow-lg w-full bg-white">
+ <ul class="list-none overflow-hidden rounded">
+ <li
+ v-for="(option, index) in optionsModel"
+ :key="index"
+ class="hover:bg-gray-200"
+ :class="{
+ 'bg-gray-300': option?.value === data?.value,
+ }"
+ @click.prevent.stop="onClick(option, index)">
+ <slot
+ name="option"
+ v-bind="{
+ option,
+ }">
+ <span
+ class="flex py-2 px-4 transition duration-300"
+ :class="'theme-' + color"
+ >{{ option.label || option.value }}</span
+ >
+ </slot>
+ </li>
+ </ul>
+ </div>
+ </transition>
+ </div>
+</template>
+
+<script>
+import {
+ defineComponent,
+ ref,
+ computed,
+ onMounted,
+ onUnmounted,
+} from "vue";
+
+export default defineComponent({
+ props: {
+ color: {
+ type: String,
+ default: () => "blue",
+ },
+ animation: {
+ type: String,
+ default: () => "fade",
+ },
+ // Example input options {"label":"Label 1" , "value": "1"}
+ options: {
+ type: Array,
+ default: () => [],
+ },
+ modelValue: {
+ type: Object,
+ default: () => null,
+ },
+ },
+ emits: ["update:modelValue", "change"],
+ setup(props, { emit }) {
+ const show = ref(false);
+ const count = ref(0);
+
+ const data = computed({
+ get() {
+ return props.modelValue;
+ },
+ set(value) {
+ emit("update:modelValue", value);
+ },
+ });
+
+ const optionsModel = computed({
+ get() {
+ return props.options;
+ },
+ set(val) {
+ emit("update:options", val);
+ },
+ });
+
+ const onClick = (option, index) => {
+ show.value = false;
+ data.value = option;
+
+ emit("change", option);
+ };
+
+ const addBodyListener = () => {
+ show.value = false;
+ };
+
+ const toogleShow = () => {
+ show.value = !show.value;
+ };
+
+ onMounted(() => {
+ document.body.addEventListener("click", addBodyListener);
+ });
+
+ onUnmounted(() => {
+ document.body.removeEventListener("click", addBodyListener);
+ });
+
+ return {
+ show,
+ data,
+ optionsModel,
+ count,
+ onClick,
+ toogleShow,
+ };
+ },
+});
+</script>
+
+<style scoped>
+/* Animations */
+.fade-enter-active,
+.fade-leave-active {
+ transition: opacity 0.1s;
+}
+.fade-enter,
+.fade-leave-to {
+ opacity: 0;
+}
+
+/* Slide-in-up animation*/
+.slide-in-up-enter-active,
+.slide-in-up-leave-active {
+ transition: all 0.5s;
+ transform: translateY(0);
+}
+.slide-in-up-enter,
+.slide-in-up-leave-to {
+ opacity: 0;
+ transform: translateY(20px);
+}
+
+/* Slide-in-right animation*/
+.slide-in-right-enter-active,
+.slide-in-right-leave-active {
+ transition: all 0.5s;
+ transform: translateX(0);
+}
+.slide-in-right-enter,
+.slide-in-right-leave-to {
+ opacity: 0;
+ transform: translateX(20px);
+}
+
+/* Slide-in-left animation*/
+.slide-in-left-enter-active,
+.slide-in-left-leave-active {
+ transition: all 0.5s;
+ transform: translateX(0);
+}
+.slide-in-left-enter,
+.slide-in-left-leave-to {
+ opacity: 0;
+ transform: translateX(-20px);
+}
+
+/* Scale animation*/
+.scale-enter-active,
+.scale-leave-active {
+ transition: all 0.5s;
+ transform: scale(1);
+}
+.scale-enter,
+.scale-leave-to {
+ opacity: 0;
+ transform: scale(0);
+}
+
+/* Rotate animation*/
+.rotate-enter-active,
+.rotate-leave-active {
+ transition: all 0.5s;
+ transform: scale(1) rotate(-360deg);
+}
+.rotate-enter,
+.rotate-leave-to {
+ opacity: 0;
+ transform: scale(0) rotate(360deg);
+}
+</style>

resources/jscomposition/base/form/InputLeading.vue

@@ -0,0 +1,33 @@
+<template>
+ <div class="tw-relative tw-rounded-lg tw-shadow-sm tw-text-gray-500">
+ <div class="tw-pointer-events-none tw-absolute tw-inset-y-0 tw-left-0 tw-flex tw-items-center tw-pl-3">
+ <slot name="icon">
+ <i :class="icon"></i>
+ </slot>
+ </div>
+ <input class="tw-block tw-w-full tw-rounded-md tw-border-0 tw-py-2 tw-pl-10 
+ tw-text-gray-900 tw-ring-1 tw-ring-inset tw-ring-gray-300 
+ placeholder:tw-text-gray-400 focus:tw-ring-2 focus:tw-ring-inset
+ focus-visible:tw-outline-none
+ sm:tw-text-sm sm:tw-leading-6" :placeholder="placeholder">
+ </div>
+</template>
+<script>
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+ props: {
+ placeholder: {
+ type: String,
+ default: () => ""
+ },
+ icon: {
+ type: String,
+ default: () => ("fa-solid fa-magnifying-glass")
+ }
+ },
+ setup(props, { emit }) {
+ return {};
+ }
+});
+</script>

ProcessMaker/Http/Controllers/CasesController.php

@@ -0,0 +1,44 @@
+<?php
+
+namespace ProcessMaker\Http\Controllers;
+
+use Facades\ProcessMaker\RollbackProcessRequest;
+use Illuminate\Http\Request;
+use Illuminate\Support\Facades\Auth;
+use Illuminate\Support\Facades\Route;
+use ProcessMaker\Cache\CacheRemember;
+use ProcessMaker\Events\FilesDownloaded;
+use ProcessMaker\Events\ScreenBuilderStarting;
+use ProcessMaker\Filters\SaveSession;
+use ProcessMaker\Helpers\DefaultColumns;
+use ProcessMaker\Helpers\MobileHelper;
+use ProcessMaker\Http\Controllers\Controller;
+use ProcessMaker\Managers\DataManager;
+use ProcessMaker\Managers\ScreenBuilderManager;
+use ProcessMaker\Models\Comment;
+use ProcessMaker\Models\Process;
+use ProcessMaker\Models\ProcessRequest;
+use ProcessMaker\Models\ProcessRequestToken;
+use ProcessMaker\Models\Screen;
+use ProcessMaker\Models\ScreenVersion;
+use ProcessMaker\Models\UserResourceView;
+use ProcessMaker\Package\PackageComments\PackageServiceProvider;
+use ProcessMaker\ProcessTranslations\ProcessTranslation;
+use ProcessMaker\RetryProcessRequest;
+use ProcessMaker\Traits\HasControllerAddons;
+use ProcessMaker\Traits\SearchAutocompleteTrait;
+use Spatie\MediaLibrary\MediaCollections\Models\Media;
+
+class CasesController extends Controller
+{
+ /**
+ * Get the list of requests.
+ *
+ * @return \Illuminate\View\View|\Illuminate\Contracts\View
+ */
+ public function index($type = null)
+ {
+ // This is a temporary API the engine team will provide the new
+ return view('cases.casesMain');
+ }
+}

resources/jscomposition/base/buttons/OutlineButton.vue

@@ -0,0 +1,32 @@
+<template>
+ <button
+ type="button"
+ :class="`tw-flex tw-rounded-lg tw-border tw-border-${color}-300 tw-text-${color}-500
+ tw-space-x-2 tw-px-3 tw-py-3 hover:tw-bg-${color}-200 tw-justify-center tw-items-center`"
+ @click="onClick"
+ >
+ <slot />
+ </button>
+</template>
+
+<script>
+import { defineComponent } from "vue";
+
+export default defineComponent({
+ props: {
+ color: {
+ type: String,
+ default: () => "gray",
+ },
+ },
+ emits: ["click"],
+ setup(props, { emit }) {
+ const onClick = () => {
+ emit("click");
+ };
+ return {
+ onClick,
+ };
+ },
+});
+</script>

resources/jscomposition/base/buttons/index.js

@@ -0,0 +1,3 @@
+import OutlineButton from "./OutlineButton.vue";
+
+export { OutlineButton };

resources/jscomposition/base/cards/ThreeSectionCard.vue

@@ -0,0 +1,68 @@
+<template>
+ <div
+ class="tw-flex tw-justify-between tw-items-center
+ tw-p-4 tw-transition tw-duration-150 tw-ease-out
+ hover:tw-ease-in tw-border tw-cursor-pointer tw-rounded-lg tw-text-gray-600"
+ :class="[{
+ [`tw-bg-${color}-100/50 hover:tw-bg-${color}-100`]:!active,
+ [`tw-outline tw-bg-${color}-100 tw-border-${color}-500 tw-outline-${color}-300 tw-bg-${color}-100 hover:tw-bg-${color}-200`]:active
+ }]"
+ @click="handleClick"
+ >
+ <div>
+ <slot name="header">
+ <div class="tw-text-xs">
+ {{ header }}
+ </div>
+ </slot>
+ <slot name="body">
+ <div class="tw-text-2xl">
+ {{ body }}
+ </div>
+ </slot>
+ </div>
+
+ <slot name="icon">
+ <i
+ :class="[`tw-text-${color}-500 tw-text-3xl`, icon]"
+ />
+ </slot>
+ </div>
+</template>
+
+<script>
+import { defineComponent } from "vue";
+
+export default defineComponent({
+ props: {
+ header: {
+ type: String,
+ default: () => "header",
+ },
+ body: {
+ type: String,
+ default: () => "body",
+ },
+ icon: {
+ type: String,
+ default: () => "",
+ },
+ active: {
+ type: Boolean,
+ default: () => false,
+ },
+ color: {
+ type: String,
+ default: () => "gray",
+ },
+ },
+ setup(props, { emit }) {
+ const handleClick = () => {
+ emit("click");
+ };
+ return {
+ handleClick,
+ };
+ },
+});
+</script>

resources/jscomposition/base/cards/index.js

@@ -0,0 +1,3 @@
+import ThreeSectionCard from "./ThreeSectionCard.vue";
+
+export { ThreeSectionCard };

resources/jscomposition/base/form/Dropdown.vue

@@ -0,0 +1,207 @@
+<template>
+ <div class="t-relative">
+ <slot
+ v-bind="{
+ toogleShow,
+ data,
+ }"
+ name="input">
+ <button
+ @click.prevent.stop="show = !show"
+ class="t-flex t-w-full t-justify-between t-items-center t-py-2 t-px-3 t-ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-inset focus:ring-primary-400">
+ <span>{{ data?.label || data?.value || "" }} </span>
+
+ <i class="fas fa-chevron-down" />
+ </button>
+ </slot>
+
+ <transition :name="animation">
+ <div
+ v-if="show"
+ :class="'bg-' + color + '-500'"
+ class="block mt-1 rounded absolute z-10 shadow-lg w-full bg-white">
+ <ul class="list-none overflow-hidden rounded">
+ <li
+ v-for="(option, index) in optionsModel"
+ :key="index"
+ class="hover:bg-gray-200"
+ :class="{
+ 'bg-gray-300': option?.value === data?.value,
+ }"
+ @click.prevent.stop="onClick(option, index)">
+ <slot
+ name="option"
+ v-bind="{
+ option,
+ }">
+ <span
+ class="flex py-2 px-4 transition duration-300"
+ :class="'theme-' + color"
+ >{{ option.label || option.value }}</span
+ >
+ </slot>
+ </li>
+ </ul>
+ </div>
+ </transition>
+ </div>
+</template>
+
+<script>
+import {
+ defineComponent,
+ ref,
+ computed,
+ onMounted,
+ onUnmounted,
+} from "vue";
+
+export default defineComponent({
+ props: {
+ color: {
+ type: String,
+ default: () => "blue",
+ },
+ animation: {
+ type: String,
+ default: () => "fade",
+ },
+ // Example input options {"label":"Label 1" , "value": "1"}
+ options: {
+ type: Array,
+ default: () => [],
+ },
+ modelValue: {
+ type: Object,
+ default: () => null,
+ },
+ },
+ emits: ["update:modelValue", "change"],
+ setup(props, { emit }) {
+ const show = ref(false);
+ const count = ref(0);
+
+ const data = computed({
+ get() {
+ return props.modelValue;
+ },
+ set(value) {
+ emit("update:modelValue", value);
+ },
+ });
+
+ const optionsModel = computed({
+ get() {
+ return props.options;
+ },
+ set(val) {
+ emit("update:options", val);
+ },
+ });
+
+ const onClick = (option, index) => {
+ show.value = false;
+ data.value = option;
+
+ emit("change", option);
+ };
+
+ const addBodyListener = () => {
+ show.value = false;
+ };
+
+ const toogleShow = () => {
+ show.value = !show.value;
+ };
+
+ onMounted(() => {
+ document.body.addEventListener("click", addBodyListener);
+ });
+
+ onUnmounted(() => {
+ document.body.removeEventListener("click", addBodyListener);
+ });
+
+ return {
+ show,
+ data,
+ optionsModel,
+ count,
+ onClick,
+ toogleShow,
+ };
+ },
+});
+</script>
+
+<style scoped>
+/* Animations */
+.fade-enter-active,
+.fade-leave-active {
+ transition: opacity 0.1s;
+}
+.fade-enter,
+.fade-leave-to {
+ opacity: 0;
+}
+
+/* Slide-in-up animation*/
+.slide-in-up-enter-active,
+.slide-in-up-leave-active {
+ transition: all 0.5s;
+ transform: translateY(0);
+}
+.slide-in-up-enter,
+.slide-in-up-leave-to {
+ opacity: 0;
+ transform: translateY(20px);
+}
+
+/* Slide-in-right animation*/
+.slide-in-right-enter-active,
+.slide-in-right-leave-active {
+ transition: all 0.5s;
+ transform: translateX(0);
+}
+.slide-in-right-enter,
+.slide-in-right-leave-to {
+ opacity: 0;
+ transform: translateX(20px);
+}
+
+/* Slide-in-left animation*/
+.slide-in-left-enter-active,
+.slide-in-left-leave-active {
+ transition: all 0.5s;
+ transform: translateX(0);
+}
+.slide-in-left-enter,
+.slide-in-left-leave-to {
+ opacity: 0;
+ transform: translateX(-20px);
+}
+
+/* Scale animation*/
+.scale-enter-active,
+.scale-leave-active {
+ transition: all 0.5s;
+ transform: scale(1);
+}
+.scale-enter,
+.scale-leave-to {
+ opacity: 0;
+ transform: scale(0);
+}
+
+/* Rotate animation*/
+.rotate-enter-active,
+.rotate-leave-active {
+ transition: all 0.5s;
+ transform: scale(1) rotate(-360deg);
+}
+.rotate-enter,
+.rotate-leave-to {
+ opacity: 0;
+ transform: scale(0) rotate(360deg);
+}
+</style>

resources/jscomposition/base/form/InputLeading.vue

@@ -0,0 +1,33 @@
+<template>
+ <div class="tw-relative tw-rounded-lg tw-shadow-sm tw-text-gray-500">
+ <div class="tw-pointer-events-none tw-absolute tw-inset-y-0 tw-left-0 tw-flex tw-items-center tw-pl-3">
+ <slot name="icon">
+ <i :class="icon"></i>
+ </slot>
+ </div>
+ <input class="tw-block tw-w-full tw-rounded-md tw-border-0 tw-py-2 tw-pl-10 
+ tw-text-gray-900 tw-ring-1 tw-ring-inset tw-ring-gray-300 
+ placeholder:tw-text-gray-400 focus:tw-ring-2 focus:tw-ring-inset
+ focus-visible:tw-outline-none
+ sm:tw-text-sm sm:tw-leading-6" :placeholder="placeholder">
+ </div>
+</template>
+<script>
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+ props: {
+ placeholder: {
+ type: String,
+ default: () => ""
+ },
+ icon: {
+ type: String,
+ default: () => ("fa-solid fa-magnifying-glass")
+ }
+ },
+ setup(props, { emit }) {
+ return {};
+ }
+});
+</script>