added option to import payments from csv file

2025-10-02 22:09:05 +02:00
parent 971a9e89d1
commit 12de0186cf
21 changed files with 2828 additions and 824 deletions
@@ -12,6 +12,7 @@ import CaseObjectCreateDialog from "./CaseObjectCreateDialog.vue";
 import CaseObjectsDialog from "./CaseObjectsDialog.vue";
 import PaymentDialog from "./PaymentDialog.vue";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
+import ViewPaymentsDialog from "./ViewPaymentsDialog.vue";
 import {
  faCircleInfo,
  faClock,
@@ -102,6 +103,15 @@ const contractActiveSegment = (c) => {
  return arr.find((s) => s.pivot?.active) || arr[0] || null;
 };
 const segmentName = (id) => props.segments.find((s) => s.id === id)?.name || "";
+// Sorted segment lists for dropdowns
+const sortedSegments = computed(() => {
+  const list = Array.isArray(props.segments) ? [...props.segments] : [];
+  return list.sort((a, b) => a.name.localeCompare(b.name, "sl", { sensitivity: "base" }));
+});
+const sortedAllSegments = computed(() => {
+  const list = Array.isArray(props.all_segments) ? [...props.all_segments] : [];
+  return list.sort((a, b) => a.name.localeCompare(b.name, "sl", { sensitivity: "base" }));
+});
 const confirmChange = ref({
  show: false,
  contract: null,
@@ -171,55 +181,25 @@ const submitPayment = () => {
    return;
  }
  const accountId = paymentContract.value.account.id;
-    paymentForm.post(route("accounts.payments.store", { account: accountId }), {
-      preserveScroll: true,
-      onSuccess: () => {
-        closePaymentDialog();
-        // Reload contracts and activities (new payment may create an activity)
-        router.reload({ only: ["contracts", "activities"] });
+  paymentForm.post(route("accounts.payments.store", { account: accountId }), {
+    preserveScroll: true,
+    onSuccess: () => {
+      closePaymentDialog();
+      // Reload contracts and activities (new payment may create an activity)
+      router.reload({ only: ["contracts", "activities"] });
    },
  });
 };

-// View Payments dialog state and logic
+// View Payments dialog state
 const showPaymentsDialog = ref(false);
-const paymentsForContract = ref([]);
-const paymentsLoading = ref(false);
-const openPaymentsDialog = async (c) => {
+const openPaymentsDialog = (c) => {
  selectedContract.value = c;
  showPaymentsDialog.value = true;
-  await loadPayments();
 };
 const closePaymentsDialog = () => {
  showPaymentsDialog.value = false;
  selectedContract.value = null;
-  paymentsForContract.value = [];
-};
-const loadPayments = async () => {
-  if (!selectedContract.value?.account?.id) return;
-  paymentsLoading.value = true;
-  try {
-    const { data } = await axios.get(route("accounts.payments.list", { account: selectedContract.value.account.id }));
-    paymentsForContract.value = data.payments || [];
-  } finally {
-    paymentsLoading.value = false;
-  }
-};
-const deletePayment = (paymentId) => {
-  if (!selectedContract.value?.account?.id) return;
-  const accountId = selectedContract.value.account.id;
-    router.delete(route("accounts.payments.destroy", { account: accountId, payment: paymentId }), {
-      preserveScroll: true,
-      preserveState: true,
-      only: ["contracts", "activities"],
-    onSuccess: async () => {
-      await loadPayments();
-    },
-    onError: async () => {
-      // Even if there is an error, try to refresh payments list
-      await loadPayments();
-    },
-  });
 };
 </script>

@@ -275,7 +255,7 @@ const deletePayment = (paymentId) => {
                <span class="text-gray-700">{{
                  contractActiveSegment(c)?.name || "-"
                }}</span>
-                <Dropdown width="64" align="left">
+                <Dropdown align="left">
                  <template #trigger>
                    <button
                      type="button"
@@ -286,8 +266,8 @@ const deletePayment = (paymentId) => {
                      }"
                      :title="
                        segments && segments.length
-                          ? 'Change segment'
-                          : 'No segments available for this case'
+                          ? 'Spremeni segment'
+                          : 'Ni segmentov na voljo za ta primer'
                      "
                    >
                      <FontAwesomeIcon
@@ -300,7 +280,7 @@ const deletePayment = (paymentId) => {
                    <div class="py-1">
                      <template v-if="segments && segments.length">
                        <button
-                          v-for="s in segments"
+                          v-for="s in sortedSegments"
                          :key="s.id"
                          type="button"
                          class="w-full px-3 py-1.5 text-left text-sm hover:bg-gray-50"
@@ -315,7 +295,7 @@ const deletePayment = (paymentId) => {
                            Ni segmentov v tem primeru. Dodaj in nastavi segment:
                          </div>
                          <button
-                            v-for="s in all_segments"
+                            v-for="s in sortedAllSegments"
                            :key="s.id"
                            type="button"
                            class="w-full px-3 py-1.5 text-left text-sm hover:bg-gray-50"
@@ -326,7 +306,7 @@ const deletePayment = (paymentId) => {
                        </template>
                        <template v-else>
                          <div class="px-3 py-2 text-sm text-gray-500">
-                            No segments configured.
+                            Ni konfiguriranih segmentov.
                          </div>
                        </template>
                      </template>
@@ -356,7 +336,11 @@ const deletePayment = (paymentId) => {
                      class="inline-flex items-center justify-center h-5 w-5 rounded-full"
                      :title="'Pokaži opis'"
                      :disabled="!hasDesc(c)"
-                      :class="hasDesc(c) ? 'hover:bg-gray-100 focus:outline-none' : text-gray-400"
+                      :class="
+                        hasDesc(c)
+                          ? 'hover:bg-gray-100 focus:outline-none'
+                          : 'text-gray-400'
+                      "
                    >
                      <FontAwesomeIcon
                        :icon="faCircleInfo"
@@ -373,7 +357,7 @@ const deletePayment = (paymentId) => {
                    </div>
                  </template>
                </Dropdown>
-               
+
                <!-- Promise date indicator -->
                <Dropdown width="64" align="left">
                  <template #trigger>
@@ -431,7 +415,7 @@ const deletePayment = (paymentId) => {
                  <button
                    type="button"
                    class="inline-flex items-center justify-center h-5 w-5 rounded-full hover:bg-gray-100 focus:outline-none"
-                    :title="'Actions'"
+                    :title="'Dejanja'"
                  >
                    <FontAwesomeIcon
                      :icon="faEllipsisVertical"
@@ -440,6 +424,12 @@ const deletePayment = (paymentId) => {
                  </button>
                </template>
                <template #content>
+                  <!-- Urejanje -->
+                  <div
+                    class="px-3 pt-2 pb-1 text-[11px] uppercase tracking-wide text-gray-400"
+                  >
+                    Urejanje
+                  </div>
                  <button
                    type="button"
                    class="w-full px-3 py-2 text-left text-sm text-gray-700 hover:bg-gray-50 flex items-center gap-2"
@@ -449,15 +439,31 @@ const deletePayment = (paymentId) => {
                      :icon="faPenToSquare"
                      class="h-4 w-4 text-gray-600"
                    />
-                    <span>Edit</span>
+                    <span>Uredi</span>
                  </button>
+                  <button
+                    type="button"
+                    class="w-full px-3 py-2 text-left text-sm text-gray-700 hover:bg-gray-50 flex items-center gap-2"
+                    @click="onAddActivity(c)"
+                  >
+                    <FontAwesomeIcon :icon="faListCheck" class="h-4 w-4 text-gray-600" />
+                    <span>Dodaj aktivnost</span>
+                  </button>
+
+                  <div class="my-1 border-t border-gray-100" />
+                  <!-- Predmeti -->
+                  <div
+                    class="px-3 pt-2 pb-1 text-[11px] uppercase tracking-wide text-gray-400"
+                  >
+                    Predmeti
+                  </div>
                  <button
                    type="button"
                    class="w-full px-3 py-2 text-left text-sm text-gray-700 hover:bg-gray-50 flex items-center gap-2"
                    @click="openObjectsList(c)"
                  >
                    <FontAwesomeIcon :icon="faCircleInfo" class="h-4 w-4 text-gray-600" />
-                    <span>Predmeti</span>
+                    <span>Seznam predmetov</span>
                  </button>
                  <button
                    type="button"
@@ -465,35 +471,24 @@ const deletePayment = (paymentId) => {
                    @click="openObjectDialog(c)"
                  >
                    <FontAwesomeIcon :icon="faPlus" class="h-4 w-4 text-gray-600" />
-                    <span>Predmeti</span>
-                  </button>
-                  <button
-                    type="button"
-                    class="w-full px-3 py-2 text-left text-sm text-red-700 hover:bg-red-50 flex items-center gap-2"
-                    @click="onDelete(c)"
-                  >
-                    <FontAwesomeIcon :icon="faTrash" class="h-4 w-4 text-red-600" />
-                    <span>Briši</span>
+                    <span>Dodaj predmet</span>
                  </button>
+
                  <div class="my-1 border-t border-gray-100" />
+                  <!-- Plačila -->
+                  <div
+                    class="px-3 pt-2 pb-1 text-[11px] uppercase tracking-wide text-gray-400"
+                  >
+                    Plačila
+                  </div>
                  <button
                    type="button"
                    class="w-full px-3 py-2 text-left text-sm text-gray-700 hover:bg-gray-50 flex items-center gap-2"
                    @click="openPaymentsDialog(c)"
                  >
                    <FontAwesomeIcon :icon="faCircleInfo" class="h-4 w-4 text-gray-600" />
-                    <span>Plačila</span>
+                    <span>Pokaži plačila</span>
                  </button>
-                  <div class="my-1 border-t border-gray-100" />
-                  <button
-                    type="button"
-                    class="w-full px-3 py-2 text-left text-sm text-gray-700 hover:bg-gray-50 flex items-center gap-2"
-                    @click="onAddActivity(c)"
-                  >
-                    <FontAwesomeIcon :icon="faListCheck" class="h-4 w-4 text-gray-600" />
-                    <span>Aktivnost</span>
-                  </button>
-                  <div class="my-1 border-t border-gray-100" />
                  <button
                    type="button"
                    class="w-full px-3 py-2 text-left text-sm text-gray-700 hover:bg-gray-50 flex items-center gap-2"
@@ -502,6 +497,17 @@ const deletePayment = (paymentId) => {
                    <FontAwesomeIcon :icon="faPlus" class="h-4 w-4 text-gray-600" />
                    <span>Dodaj plačilo</span>
                  </button>
+
+                  <div class="my-1 border-t border-gray-100" />
+                  <!-- Destruktivno -->
+                  <button
+                    type="button"
+                    class="w-full px-3 py-2 text-left text-sm text-red-700 hover:bg-red-50 flex items-center gap-2"
+                    @click="onDelete(c)"
+                  >
+                    <FontAwesomeIcon :icon="faTrash" class="h-4 w-4 text-red-600" />
+                    <span>Izbriši</span>
+                  </button>
                </template>
              </Dropdown>
            </FwbTableCell>
@@ -556,54 +562,16 @@ const deletePayment = (paymentId) => {
    :contract="selectedContract"
  />

-  <PaymentDialog :show="showPaymentDialog" :form="paymentForm" @close="closePaymentDialog" @submit="submitPayment" />
+  <PaymentDialog
+    :show="showPaymentDialog"
+    :form="paymentForm"
+    @close="closePaymentDialog"
+    @submit="submitPayment"
+  />

-  <!-- View Payments Dialog -->
-  <div v-if="showPaymentsDialog" class="fixed inset-0 z-50 flex items-center justify-center bg-black/30">
-    <div class="bg-white rounded-lg shadow-lg p-4 w-full max-w-lg">
-      <div class="flex items-center justify-between">
-        <div class="text-base font-medium text-gray-800">
-          Plačila za pogodbo
-          <span class="text-gray-600">{{ selectedContract?.reference }}</span>
-        </div>
-        <button type="button" class="text-sm text-gray-500 hover:text-gray-700" @click="closePaymentsDialog">Zapri</button>
-      </div>
-      <div class="mt-3">
-        <div v-if="paymentsLoading" class="text-sm text-gray-500">Nalaganje…</div>
-        <template v-else>
-          <div v-if="paymentsForContract.length === 0" class="text-sm text-gray-500">Ni plačil.</div>
-          <div v-else class="divide-y divide-gray-100 border rounded">
-            <div v-for="p in paymentsForContract" :key="p.id" class="px-3 py-2 flex items-center justify-between">
-              <div>
-                <div class="text-sm text-gray-800">
-                  {{
-                    Intl.NumberFormat('de-DE', { style: 'currency', currency: p.currency || 'EUR' }).format(p.amount ?? 0)
-                  }}
-                </div>
-                <div class="text-xs text-gray-500">
-                  <span>{{ formatDate(p.paid_at) }}</span>
-                  <span v-if="p.reference" class="ml-2">Sklic: {{ p.reference }}</span>
-                </div>
-              </div>
-              <div class="flex items-center gap-2">
-                <button
-                  type="button"
-                  class="inline-flex items-center gap-1 px-2 py-1 rounded text-red-700 hover:bg-red-50"
-                  @click="deletePayment(p.id)"
-                  title="Izbriši plačilo"
-                >
-                  <FontAwesomeIcon :icon="faTrash" class="h-4 w-4 text-red-600" />
-                  <span class="text-sm">Briši</span>
-                </button>
-              </div>
-            </div>
-          </div>
-        </template>
-      </div>
-      <div class="mt-4 flex justify-end gap-2">
-        <button type="button" class="px-3 py-2 rounded bg-gray-200 hover:bg-gray-300" @click="loadPayments">Osveži</button>
-        <button type="button" class="px-3 py-2 rounded bg-indigo-600 text-white hover:bg-indigo-700" @click="closePaymentsDialog">Zapri</button>
-      </div>
-    </div>
-  </div>
+  <ViewPaymentsDialog
+    :show="showPaymentsDialog"
+    :contract="selectedContract"
+    @close="closePaymentsDialog"
+  />
 </template>