Teren-app/resources/js/Pages/Cases/Partials/CaseObjectsDialog.vue

<script setup>
import DialogModal from "@/Components/DialogModal.vue";
import { router } from "@inertiajs/vue3";
import { ref, computed } from "vue";
import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
import { library } from "@fortawesome/fontawesome-svg-core";
import { faTrash, faXmark, faCheck } from "@fortawesome/free-solid-svg-icons";

library.add(faTrash, faXmark, faCheck);

const props = defineProps({
  show: { type: Boolean, default: false },
  client_case: { type: Object, required: true },
  contract: { type: Object, default: null },
  edit: { type: Boolean, default: true },
});

const emit = defineEmits(["close"]);
const close = () => emit("close");

// Local optimistic filtering of removed items so the list updates immediately
const removedIds = ref([]);
const confirmingId = ref(null);
const items = computed(() => {
  const arr = Array.isArray(props.contract?.objects) ? props.contract.objects : [];
  if (!removedIds.value.length) {
    return arr;
  }
  return arr.filter((o) => !removedIds.value.includes(o.id));
});

// Delete handling (no confirmation)
const deleteObject = (o) => {
  if (!o?.id) {
    return;
  }
  const id = o.id;
  router.delete(
    route("clientCase.object.delete", {
      client_case: props.client_case.uuid,
      id,
    }),
    {
      preserveScroll: true,
      onSuccess: () => {
        if (!removedIds.value.includes(id)) {
          removedIds.value.push(id);
        }
        if (confirmingId.value === id) {
          confirmingId.value = null;
        }
      },
    }
  );
};
</script>

<template>
  <DialogModal :show="show" @close="close">
    <template #title>
      Predmeti
      <span v-if="contract" class="ml-2 text-sm text-gray-500"
        >(Pogodba: {{ contract.reference }})</span
      >
    </template>
    <template #content>
      <div class="mt-1 max-h-[60vh] overflow-y-auto">
        <div
          v-if="items.length > 0"
          class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4"
        >
          <div
            v-for="o in items"
            :key="o.id"
            class="rounded-lg border border-gray-200 bg-white shadow-sm"
          >
            <div class="p-4">
              <div class="flex items-start justify-between">
                <div>
                  <div class="text-xs uppercase text-gray-500">Ref.</div>
                  <div class="font-semibold text-gray-900">{{ o.reference || "-" }}</div>
                </div>
                <div class="ml-3 flex items-center gap-2" v-if="edit">
                  <span
                    class="inline-flex items-center rounded-full bg-gray-100 px-2 py-0.5 text-xs text-gray-700"
                    >{{ o.type || "—" }}</span
                  >
                  <template v-if="confirmingId === o.id">
                    <button
                      type="button"
                      class="inline-flex h-8 w-8 items-center justify-center rounded-full hover:bg-gray-100 text-gray-700"
                      :title="'Prekliči'"
                      @click.stop="confirmingId = null"
                    >
                      <FontAwesomeIcon :icon="['fas', 'xmark']" class="text-[16px]" />
                    </button>
                    <button
                      type="button"
                      class="inline-flex h-8 w-8 items-center justify-center rounded-full hover:bg-green-50 text-green-700"
                      :title="'Potrdi brisanje'"
                      @click.stop="deleteObject(o)"
                    >
                      <FontAwesomeIcon :icon="['fas', 'check']" class="text-[16px]" />
                    </button>
                  </template>
                  <template v-else>
                    <button
                      type="button"
                      class="inline-flex h-8 w-8 items-center justify-center rounded-full hover:bg-red-50"
                      :title="'Izbriši'"
                      @click.stop="confirmingId = o.id"
                    >
                      <FontAwesomeIcon :icon="['fas', 'trash']" class="text-red-600" />
                    </button>
                  </template>
                </div>
              </div>
              <div class="mt-3">
                <div class="text-xs uppercase text-gray-500">Naziv</div>
                <div class="text-gray-900">{{ o.name || "-" }}</div>
              </div>
              <div class="mt-3">
                <div class="text-xs uppercase text-gray-500">Opis</div>
                <div class="text-gray-700 whitespace-pre-wrap">
                  {{ o.description || "" }}
                </div>
              </div>
            </div>
          </div>
        </div>
        <div v-else class="text-center text-gray-500 py-3">Ni predmetov.</div>
      </div>
      <div class="mt-4 flex justify-end">
        <button
          type="button"
          class="px-4 py-2 rounded-md border border-gray-300 text-gray-700 hover:bg-gray-50"
          @click="close"
        >
          Zapri
        </button>
      </div>
    </template>
  </DialogModal>
</template>