FOUR-18634: New view "cases" and Implement new UI tabs

ProcessMaker/Http/Controllers/RequestController.php

@@ -281,4 +281,9 @@ public function summaryScreenTranslation(ProcessRequest $request): void
             $request->summary_screen['config'] = $translatedConf;
         }
     }
+
+    public function edit(ProcessRequest $request)
+    {
+        return view('cases.edit');
+    }
 }

resources/js/cases/components/CaseDetail.vue

@@ -0,0 +1,48 @@
+<template>
+  <div class="container-fluid">
+    <Tabs
+      :tab-default="tabDefault"
+      :tabs="tabs"
+    />
+  </div>
+</template>
+
+<script>
+import { defineComponent, ref } from "vue";
+import Tabs from "./Tabs.vue";
+
+export default defineComponent({
+  components: { Tabs },
+  setup() {
+    const translate = ProcessMaker.i18n;
+
+    const tabDefault = ref("tasks");
+
+    const tabs = [
+      {
+        name: translate.t("Tasks"), href: "#tasks", current: "tasks", show: true, content: "",
+      },
+      {
+        name: translate.t("Overview"), href: "#overview", current: "overview", show: true, content: "",
+      },
+      {
+        name: translate.t("Completed & Form"), href: "#completed_form", current: "completed", show: true, content: "",
+      },
+      {
+        name: translate.t("File Manager"), href: "#file_manager", current: "file_manager", show: false, content: "",
+      },
+      {
+        name: translate.t("History"), href: "#history", current: "history", show: true, content: "",
+      },
+      {
+        name: translate.t("Requests"), href: "#requests", current: "requests", show: true, content: "",
+      },
+    ];
+
+    return {
+      tabs,
+      tabDefault,
+    };
+  },
+});
+</script>

resources/js/cases/components/Tabs.vue

@@ -0,0 +1,66 @@
+<template>
+  <div class="tw-block">
+    <div class="tw-border-b tw-border-gray-200">
+      <nav
+        class="tw-mb-px tw-flex tw-space-x-8"
+        aria-label="Tabs"
+      >
+        <template v-for="(tab, index) in tabs">
+          <a
+            v-if="tab.show"
+            :key="index"
+            :href="tab.href"
+            class="tw-whitespace-nowrap tw-border-b-2 tw-px-1 tw-py-4 tw-text-sm tw-font-medium"
+            :class="[tabSelected === tab.current ? 'tw-border-blue-500 tw-text-blue-500'
+                       : 'tw-border-transparent tw-text-gray-500 hover:tw-border-gray-600 hover:tw-text-gray-600'
+            ]"
+            :aria-current="tab.current ? 'page' : undefined"
+            @click="selectTab(tab)"
+          >
+            {{ tab.name }}
+          </a>
+        </template>
+      </nav>
+      <div class="content">
+        <component :is="content" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { defineComponent, ref, onMounted } from "vue";
+
+export default defineComponent({
+  props: {
+    tabDefault: {
+      type: String,
+      required: true,
+    },
+    tabs: {
+      type: Array,
+      required: true,
+    },
+  },
+  setup(props) {
+    const content = ref(null);
+    const tabSelected = ref(props.tabDefault);
+    const selectTab = (tab) => {
+      content.value = tab.content;
+      tabSelected.value = tab.current;
+    };
+
+    const defaultTab = () => props.tabs.find((tab) => tab.current === tabSelected.value);
+
+    onMounted(() => {
+      selectTab(defaultTab());
+    });
+
+    return {
+      content,
+      selectTab,
+      tabSelected,
+    };
+  },
+});
+</script>

resources/js/cases/edit.js

@@ -0,0 +1,8 @@
+import Vue from "vue";
+import CaseDetail from "./components/CaseDetail.vue";
+
+new Vue({
+  el: "#case-detail",
+  components: { CaseDetail },
+  data() {},
+});

resources/views/cases/edit.blade.php

@@ -0,0 +1,25 @@
+@extends('layouts.layout')
+
+@section('title')
+  {{ __('Case Detail') }}
+@endsection
+
+@section('sidebar')
+  @include('layouts.sidebar', ['sidebar' => Menu::get('sidebar_request')])
+@endsection
+
+@section('breadcrumbs')
+  @include('shared.breadcrumbs', ['routes' => [
+      __('Cases') => route('cases.index'),
+  ]])
+@endsection
+
+@section('content')
+<div id="case-detail" class="containe-fluid mr-3 ml-3 px-3 bg-light">
+  <case-detail></case-detail>
+</div>
+@endsection
+
+@section('js')
+  <script src="{{mix('js/cases/edit.js')}}"></script>
+@endsection

resources/views/layouts/layout.blade.php

@@ -39,6 +39,7 @@
     <link rel="icon" type="image/png" sizes="16x16" href="{{ \ProcessMaker\Models\Setting::getFavicon() }}">
     <link href="{{ mix('css/app.css') }}" rel="stylesheet">
     <link href="{{ mix('css/sidebar.css') }}" rel="stylesheet">
+    <link href="{{ mix('css/tailwind.css') }}" rel="stylesheet">
     <link href="/css/bpmn-symbols/css/bpmn.css" rel="stylesheet">
     @yield('css')
     <script type="text/javascript">