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

pmPaulis · Sep 12, 2024 · Sep 12, 2024 · Sep 12, 2024 · Sep 12, 2024 · Sep 12, 2024
commit 90f4a957456f737689313eca4da3633987d1c591
diff --git a/resources/jscomposition/base/buttons/index.js b/resources/jscomposition/base/buttons/index.js
@@ -1,5 +1,3 @@
 import OutlineButton from "./OutlineButton.vue";
 
-export {
-    OutlineButton
-}
+export { OutlineButton };
diff --git a/resources/jscomposition/base/cards/index.js b/resources/jscomposition/base/cards/index.js
@@ -1,5 +1,3 @@
-import ThreeSectionCard from "./ThreeSectionCard.vue"
+import ThreeSectionCard from "./ThreeSectionCard.vue";
 
-export {
-    ThreeSectionCard
-}
+export { ThreeSectionCard };
diff --git a/resources/jscomposition/base/form/Dropdown.vue b/resources/jscomposition/base/form/Dropdown.vue
@@ -1,16 +1,15 @@
 <template>
-  <div class="t-relative" >
+  <div class="t-relative">
     <slot
       v-bind="{
         toogleShow,
-        data
+        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>
+        <span>{{ data?.label || data?.value || "" }} </span>
 
         <i class="fas fa-chevron-down" />
       </button>
@@ -19,25 +18,27 @@
     <transition :name="animation">
       <div
         v-if="show"
-        :class="'bg-'+color+'-500'"
+        :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"
+            v-for="(option, index) in optionsModel"
             :key="index"
             class="hover:bg-gray-200"
             :class="{
-              'bg-gray-300': option?.value === data?.value
+              'bg-gray-300': option?.value === data?.value,
             }"
             @click.prevent.stop="onClick(option, index)">
             <slot
               name="option"
               v-bind="{
-                option
+                option,
               }">
               <span
                 class="flex py-2 px-4 transition duration-300"
-                :class="'theme-'+color">{{ option.label || option.value }}</span>
+                :class="'theme-' + color"
+                >{{ option.label || option.value }}</span
+              >
             </slot>
           </li>
         </ul>
@@ -48,18 +49,22 @@
 
 <script>
 import {
-  defineComponent, ref, computed, onMounted, onUnmounted, nextTick,
-} from 'vue';
+  defineComponent,
+  ref,
+  computed,
+  onMounted,
+  onUnmounted,
+} from "vue";
 
 export default defineComponent({
   props: {
     color: {
       type: String,
-      default: () => 'blue',
+      default: () => "blue",
     },
     animation: {
       type: String,
-      default: () => 'fade',
+      default: () => "fade",
     },
     // Example input options {"label":"Label 1" , "value": "1"}
     options: {
@@ -71,7 +76,7 @@ export default defineComponent({
       default: () => null,
     },
   },
-  emits: ['update:modelValue', 'change'],
+  emits: ["update:modelValue", "change"],
   setup(props, { emit }) {
     const show = ref(false);
     const count = ref(0);
@@ -81,7 +86,7 @@ export default defineComponent({
         return props.modelValue;
       },
       set(value) {
-        emit('update:modelValue', value);
+        emit("update:modelValue", value);
       },
     });
 
@@ -90,16 +95,15 @@ export default defineComponent({
         return props.options;
       },
       set(val) {
-        emit('update:options', val);
+        emit("update:options", val);
       },
     });
 
     const onClick = (option, index) => {
       show.value = false;
       data.value = option;
 
-
-      emit('change', option);
+      emit("change", option);
     };
 
     const addBodyListener = () => {
@@ -111,11 +115,11 @@ export default defineComponent({
     };
 
     onMounted(() => {
-      document.body.addEventListener('click', addBodyListener);
+      document.body.addEventListener("click", addBodyListener);
     });
 
     onUnmounted(() => {
-      document.body.removeEventListener('click', addBodyListener);
+      document.body.removeEventListener("click", addBodyListener);
     });
 
     return {
@@ -132,59 +136,71 @@ export default defineComponent({
 
 <style scoped>
 /* Animations */
-.fade-enter-active, .fade-leave-active {
-  transition: opacity .1s;
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.1s;
 }
-.fade-enter, .fade-leave-to {
+.fade-enter,
+.fade-leave-to {
   opacity: 0;
 }
 
 /* Slide-in-up animation*/
-.slide-in-up-enter-active, .slide-in-up-leave-active {
-  transition: all .5s;
+.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 {
+.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 .5s;
+.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 {
+.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 .5s;
+.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 {
+.slide-in-left-enter,
+.slide-in-left-leave-to {
   opacity: 0;
   transform: translateX(-20px);
 }
 
 /* Scale animation*/
-.scale-enter-active, .scale-leave-active {
-  transition: all .5s;
+.scale-enter-active,
+.scale-leave-active {
+  transition: all 0.5s;
   transform: scale(1);
 }
-.scale-enter, .scale-leave-to {
+.scale-enter,
+.scale-leave-to {
   opacity: 0;
   transform: scale(0);
 }
 
 /* Rotate animation*/
-.rotate-enter-active, .rotate-leave-active {
-  transition: all .5s;
+.rotate-enter-active,
+.rotate-leave-active {
+  transition: all 0.5s;
   transform: scale(1) rotate(-360deg);
 }
-.rotate-enter, .rotate-leave-to {
+.rotate-enter,
+.rotate-leave-to {
   opacity: 0;
   transform: scale(0) rotate(360deg);
 }

diff --git a/resources/jscomposition/base/table/Pagination.vue b/resources/jscomposition/base/table/Pagination.vue
@@ -1,5 +1,6 @@
 <template>
-  <div class="tw-flex tw-items-center tw-justify-start tw-space-x-2 tw-bg-white tw-tw-px-4 tw-py-3 sm:tw-px-6">
+  <div
+    class="tw-flex tw-items-center tw-justify-start tw-space-x-2 tw-bg-white tw-tw-px-4 tw-py-3 sm:tw-px-6">
     <div>
       <svg
         class="tw-h-5 tw-w-5"
@@ -27,7 +28,8 @@
     </div>
 
     <div>
-      <div class="tw-flex tw-border-1 tw-rounded-md tw-ring-1 tw-ring-inset tw-ring-gray-300">
+      <div
+        class="tw-flex tw-border-1 tw-rounded-md tw-ring-1 tw-ring-inset tw-ring-gray-300">
         <input
           class="tw-block tw-flex-1 tw-border-0 tw-bg-transparent tw-pl-1 focus-visible:tw-outline-none placeholder:tw-text-gray-400"
           placeholder="1" />
@@ -78,4 +80,3 @@ export default defineComponent({
   },
 });
 </script>
-<style lang=""></style>
diff --git a/resources/jscomposition/base/table/TFooter.vue b/resources/jscomposition/base/table/TFooter.vue
diff --git a/resources/jscomposition/base/table/index.js b/resources/jscomposition/base/table/index.js
@@ -4,4 +4,6 @@ import TCell from "./TCell.vue";
 import THeader from "./THeader.vue";
 import TRow from "./TRow.vue";
 
+export default {};
+
 export { BaseTable, Pagination, TCell, THeader, TRow };
diff --git a/routes/web.php b/routes/web.php
@@ -137,6 +137,7 @@
     Route::post('/keep-alive', [LoginController::class, 'keepAlive'])->name('keep-alive');
     // Cases
     Route::get('cases', [RequestController::class, 'index'])->name('cases.index')->middleware('no-cache');
+    // This is a temporary API the engine team will create the API
     Route::get('cases-main', [CasesController::class, 'index'])->name('cases-main.index')->middleware('no-cache');
     Route::get('cases/{type?}', [RequestController::class, 'index'])->name('cases_by_type')
         ->where('type', 'all|in_progress|completed')