Dev branch

resources/js/Pages/Cases/Show.vue

@@ -1,8 +1,8 @@
 <script setup>
-import PersonInfoGrid from "@/Components/PersonInfoGrid.vue";
+import PersonInfoGrid from "@/Components/PersonInfo/PersonInfoGrid.vue";
 import SectionTitle from "@/Components/SectionTitle.vue";
 import AppLayout from "@/Layouts/AppLayout.vue";
-import { FwbButton } from "flowbite-vue";
+import { Button } from "@/Components/ui/button";
 import { onBeforeMount, ref, computed } from "vue";
 import ContractDrawer from "./Partials/ContractDrawer.vue";
 import ContractTable from "./Partials/ContractTable.vue";
@@ -16,14 +16,16 @@ import { classifyDocument } from "@/Services/documents";
 import { router, useForm, usePage } from "@inertiajs/vue3";
 import { AngleDownIcon, AngleUpIcon } from "@/Utilities/Icons";
 import Pagination from "@/Components/Pagination.vue";
-import ConfirmDialog from "@/Components/ConfirmDialog.vue";
-import DialogModal from "@/Components/DialogModal.vue";
+import DeleteDialog from "@/Components/Dialogs/DeleteDialog.vue";
+import CreateDialog from "@/Components/Dialogs/CreateDialog.vue";
 import { hasPermission } from "@/Services/permissions";
+import ActionMenuItem from "@/Components/DataTable/ActionMenuItem.vue";
+import { faPlus } from "@fortawesome/free-solid-svg-icons";
 
 const props = defineProps({
   client: Object,
   client_case: Object,
-  contracts: Array,
+  contracts: [Object, Array], // Can be paginated object or array (backward compatibility)
   activities: Object,
   contract_types: Array,
   account_types: { type: Array, default: () => [] },
@@ -36,6 +38,23 @@ const props = defineProps({
   contract_doc_templates: { type: Array, default: () => [] },
 });
 
+// Extract contracts array from paginated object or use array directly
+const contractsArray = computed(() => {
+  if (Array.isArray(props.contracts)) {
+    return props.contracts;
+  }
+  // Handle paginated contracts
+  if (props.contracts?.data) {
+    return props.contracts.data;
+  }
+  return [];
+});
+
+// Check if contracts are paginated
+const contractsPaginated = computed(() => {
+  return props.contracts && !Array.isArray(props.contracts) && props.contracts.data;
+});
+
 const page = usePage();
 const showUpload = ref(false);
 const openUpload = () => {
@@ -49,6 +68,21 @@ const onUploaded = () => {
   router.reload({ only: ["documents"] });
 };
 
+// Helper to reload contracts while preserving pagination and segment filter
+const reloadContracts = () => {
+  const params = {};
+  try {
+    const url = new URL(window.location.href);
+    const seg = url.searchParams.get("segment");
+    if (seg) params.segment = seg;
+    if (contractsPaginated.value) {
+      const contractsPage = url.searchParams.get("contracts_page");
+      if (contractsPage) params.contracts_page = contractsPage;
+    }
+  } catch (e) {}
+  router.reload({ only: ["contracts"], data: params });
+};
+
 // Expose as a callable computed: use in templates as hasPerm('permission-slug')
 const hasPerm = computed(() => (permission) =>
   hasPermission(page.props.auth?.user, permission)
@@ -139,12 +173,17 @@ const closeConfirmDelete = () => {
 const doDeleteContract = () => {
   const c = confirmDelete.value.contract;
   if (!c) return closeConfirmDelete();
-  // Keep segment filter in redirect
+  // Keep segment filter and pagination in redirect
   const params = {};
   try {
     const url = new URL(window.location.href);
     const seg = url.searchParams.get("segment");
     if (seg) params.segment = seg;
+    // Keep contracts page if paginated
+    if (contractsPaginated.value) {
+      const contractsPage = url.searchParams.get("contracts_page");
+      if (contractsPage) params.contracts_page = contractsPage;
+    }
   } catch (e) {}
   router.delete(
     route("clientCase.contract.delete", {
@@ -155,6 +194,8 @@ const doDeleteContract = () => {
     {
       preserveScroll: true,
       onFinish: () => closeConfirmDelete(),
+      // Reload contracts after delete to refresh pagination
+      only: contractsPaginated.value ? ["contracts"] : undefined,
     }
   );
 };
@@ -302,9 +343,9 @@ const submitAttachSegment = () => {
                 <template #title> Pogodbe </template>
               </SectionTitle>
               <div class="flex items-center gap-2" v-if="hasPerm('contract-edit')">
-                <FwbButton @click="openDrawerCreateContract">Nova</FwbButton>
-                <FwbButton
-                  color="light"
+                <Button @click="openDrawerCreateContract">Nova</Button>
+                <Button
+                  variant="outline"
                   :disabled="availableSegments.length === 0"
                   @click="openAttachSegment"
                 >
@@ -313,13 +354,13 @@ const submitAttachSegment = () => {
                       ? "Dodaj segment"
                       : "Ni razpoložljivih segmentov"
                   }}
-                </FwbButton>
+                </Button>
               </div>
             </div>
             <ContractTable
               :client="client"
               :client_case="client_case"
-              :contracts="contracts"
+              :contracts="contractsArray"
               :contract_types="contract_types"
               :segments="segments"
               :templates="contract_doc_templates"
@@ -329,6 +370,14 @@ const submitAttachSegment = () => {
               @delete="requestDeleteContract"
               @add-activity="openDrawerAddActivity"
             />
+            <div v-if="contractsPaginated" class="border-t border-gray-200">
+              <Pagination
+                :links="contracts.links"
+                :from="contracts.from"
+                :to="contracts.to"
+                :total="contracts.total"
+              />
+            </div>
           </div>
         </div>
       </div>
@@ -342,13 +391,20 @@ const submitAttachSegment = () => {
               <SectionTitle>
                 <template #title>Aktivnosti</template>
               </SectionTitle>
-              <FwbButton @click="openDrawerAddActivity">Nova</FwbButton>
             </div>
             <ActivityTable
               :client_case="client_case"
               :activities="activities"
               :edit="hasPerm('activity-edit')"
-            />
+            >
+              <template #add>
+                <ActionMenuItem
+                  label="Nova aktivnost"
+                  :icon="faPlus"
+                  @click="openDrawerAddActivity"
+                />
+              </template>
+            </ActivityTable>
             <Pagination
               :links="activities.links"
               :from="activities.from"
@@ -368,7 +424,7 @@ const submitAttachSegment = () => {
               <SectionTitle>
                 <template #title>Dokumenti</template>
               </SectionTitle>
-              <FwbButton @click="openUpload">Dodaj</FwbButton>
+              <Button @click="openUpload">Dodaj</Button>
             </div>
             <DocumentsTable
               :documents="documents"
@@ -401,13 +457,13 @@ const submitAttachSegment = () => {
       @close="closeUpload"
       @uploaded="onUploaded"
       :post-url="route('clientCase.document.store', client_case)"
-      :contracts="contracts"
+      :contracts="contractsArray"
     />
     <DocumentEditDialog
       :show="showDocEdit"
       :client_case_uuid="client_case.uuid"
       :document="editingDoc"
-      :contracts="contracts"
+      :contracts="contractsArray"
       @close="closeDocEdit"
       @saved="onDocSaved"
       v-if="hasPerm('doc-edit')"
@@ -427,51 +483,47 @@ const submitAttachSegment = () => {
     :client_case="client_case"
     :contract="contractEditing"
   />
-  <ActivityDrawer
-    :show="drawerAddActivity"
-    @close="closeDrawer"
-    :client_case="client_case"
-    :actions="actions"
-    :contract-uuid="activityContractUuid"
-    :documents="documents"
-    :contracts="contracts"
-  />
-  <ConfirmDialog
+    <ActivityDrawer
+      :show="drawerAddActivity"
+      @close="closeDrawer"
+      :client_case="client_case"
+      :actions="actions"
+      :contract-uuid="activityContractUuid"
+      :documents="documents"
+      :contracts="contractsArray"
+    />
+  <DeleteDialog
     :show="confirmDelete.show"
     title="Izbriši pogodbo"
     message="Ali ste prepričani, da želite izbrisati pogodbo?"
     confirm-text="Izbriši"
-    :danger="true"
+    :processing="false"
     @close="closeConfirmDelete"
     @confirm="doDeleteContract"
   />
-  <DialogModal :show="showAttachSegment" @close="closeAttachSegment">
-    <template #title>Dodaj segment k primeru</template>
-    <template #content>
-      <div class="space-y-2">
-        <label class="block text-sm font-medium text-gray-700">Segment</label>
-        <select
-          v-model="attachForm.segment_id"
-          class="w-full rounded border-gray-300 focus:border-indigo-500 focus:ring-indigo-500"
-        >
-          <option :value="null" disabled>-- izberi segment --</option>
-          <option v-for="s in availableSegments" :key="s.id" :value="s.id">
-            {{ s.name }}
-          </option>
-        </select>
-        <div v-if="attachForm.errors.segment_id" class="text-sm text-red-600">
-          {{ attachForm.errors.segment_id }}
-        </div>
-      </div>
-    </template>
-    <template #footer>
-      <FwbButton color="light" @click="closeAttachSegment">Prekliči</FwbButton>
-      <FwbButton
-        class="ml-2"
-        :disabled="attachForm.processing || !attachForm.segment_id"
-        @click="submitAttachSegment"
-        >Dodaj</FwbButton
+  <CreateDialog
+    :show="showAttachSegment"
+    title="Dodaj segment k primeru"
+    confirm-text="Dodaj"
+    :processing="attachForm.processing"
+    :disabled="!attachForm.segment_id"
+    @close="closeAttachSegment"
+    @confirm="submitAttachSegment"
+  >
+    <div class="space-y-2">
+      <label class="block text-sm font-medium text-gray-700">Segment</label>
+      <select
+        v-model="attachForm.segment_id"
+        class="w-full rounded-md border-gray-300 shadow-sm focus:border-primary-500 focus:ring-primary-500"
       >
-    </template>
-  </DialogModal>
+        <option :value="null" disabled>-- izberi segment --</option>
+        <option v-for="s in availableSegments" :key="s.id" :value="s.id">
+          {{ s.name }}
+        </option>
+      </select>
+      <div v-if="attachForm.errors.segment_id" class="text-sm text-red-600">
+        {{ attachForm.errors.segment_id }}
+      </div>
+    </div>
+  </CreateDialog>
 </template>