Changes 0228092025 Laptop

resources/js/Pages/Cases/Show.vue

@@ -3,7 +3,7 @@ import PersonInfoGrid from "@/Components/PersonInfoGrid.vue";
 import SectionTitle from "@/Components/SectionTitle.vue";
 import AppLayout from "@/Layouts/AppLayout.vue";
 import { FwbButton } from "flowbite-vue";
-import { onBeforeMount, ref } from "vue";
+import { onBeforeMount, ref, computed } from "vue";
 import ContractDrawer from "./Partials/ContractDrawer.vue";
 import ContractTable from "./Partials/ContractTable.vue";
 import ActivityDrawer from "./Partials/ActivityDrawer.vue";
@@ -12,10 +12,11 @@ import DocumentsTable from "@/Components/DocumentsTable.vue";
 import DocumentUploadDialog from "@/Components/DocumentUploadDialog.vue";
 import DocumentViewerDialog from "@/Components/DocumentViewerDialog.vue";
 import { classifyDocument } from "@/Services/documents";
-import { router } from '@inertiajs/vue3';
+import { router, useForm } 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';
 
 const props = defineProps({
   client: Object,
@@ -25,7 +26,9 @@ const props = defineProps({
   contract_types: Array,
   actions: Array,
   types: Object,
-  documents: Array
+  documents: Array,
+  segments: { type: Array, default: () => [] },
+  all_segments: { type: Array, default: () => [] },
 });
 
 const showUpload = ref(false);
@@ -99,6 +102,27 @@ const showClientDetails = () => {
 const hideClietnDetails = () => {
   clientDetails.value = true;
 };
+
+// Attach segment to case
+const showAttachSegment = ref(false)
+const openAttachSegment = () => { showAttachSegment.value = true }
+const closeAttachSegment = () => { showAttachSegment.value = false }
+const attachForm = useForm({ segment_id: null })
+const availableSegments = computed(() => {
+  const current = new Set((props.segments || []).map(s => s.id))
+  return (props.all_segments || []).filter(s => !current.has(s.id))
+})
+const submitAttachSegment = () => {
+  if (!attachForm.segment_id) { return }
+  attachForm.post(route('clientCase.segments.attach', props.client_case), {
+    preserveScroll: true,
+    only: ['segments'],
+    onSuccess: () => {
+      closeAttachSegment()
+      attachForm.reset('segment_id')
+    }
+  })
+}
 </script>
 <template>
   <AppLayout title="Client case">
@@ -169,12 +193,18 @@ const hideClietnDetails = () => {
               <SectionTitle>
                 <template #title> Pogodbe </template>
               </SectionTitle>
-              <FwbButton @click="openDrawerCreateContract">Nova</FwbButton>
+              <div class="flex items-center gap-2">
+                <FwbButton @click="openDrawerCreateContract">Nova</FwbButton>
+                <FwbButton color="light" :disabled="availableSegments.length === 0" @click="openAttachSegment">
+                  {{ availableSegments.length ? 'Dodaj segment' : 'Ni razpoložljivih segmentov' }}
+                </FwbButton>
+              </div>
             </div>
             <ContractTable
               :client_case="client_case"
               :contracts="contracts"
               :contract_types="contract_types"
+              :segments="segments"
               @edit="openDrawerEditContract"
               @delete="requestDeleteContract"
               @add-activity="openDrawerAddActivity"
@@ -252,4 +282,21 @@ const hideClietnDetails = () => {
     @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>
+    </template>
+  </DialogModal>
 </template>