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>