Add more permissions

resources/js/Pages/Settings/Partials/DecisionTable.vue

@@ -31,6 +31,8 @@ const toDelete = ref(null);
 const search = ref("");
 const selectedTemplateId = ref(null);
 const onlyAutoMail = ref(false);
+// Filter: selected events (multi-select)
+const selectedEvents = ref([]);
 
 const actionOptions = ref([]);
 
@@ -214,6 +216,7 @@ function tryAdoptRaw(ev) {
 const filtered = computed(() => {
   const term = search.value?.toLowerCase() ?? "";
   const tplId = selectedTemplateId.value ? Number(selectedTemplateId.value) : null;
+  const evIdSet = new Set((selectedEvents.value || []).map((e) => Number(e.id)));
   return (props.decisions || []).filter((d) => {
     const matchesSearch =
       !term ||
@@ -221,7 +224,10 @@ const filtered = computed(() => {
       d.color_tag?.toLowerCase().includes(term);
     const matchesAuto = !onlyAutoMail.value || !!d.auto_mail;
     const matchesTemplate = !tplId || Number(d.email_template_id || 0) === tplId;
-    return matchesSearch && matchesAuto && matchesTemplate;
+    const rowEvents = Array.isArray(d.events) ? d.events : [];
+    const matchesEvents =
+      evIdSet.size === 0 || rowEvents.some((ev) => evIdSet.has(Number(ev.id)));
+    return matchesSearch && matchesAuto && matchesTemplate && matchesEvents;
   });
 });
 
@@ -343,28 +349,67 @@ const destroyDecision = () => {
 };
 </script>
 <template>
-  <div class="p-4 flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3">
-    <div class="flex flex-col sm:flex-row gap-2 items-start sm:items-center">
-      <TextInput v-model="search" placeholder="Iskanje..." class="w-full sm:w-72" />
-      <select
-        v-model="selectedTemplateId"
-        class="block w-full sm:w-64 border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 rounded-md shadow-sm"
-      >
-        <option :value="null">Vse predloge</option>
-        <option v-for="t in emailTemplates" :key="t.id" :value="t.id">
-          {{ t.name }}
-        </option>
-      </select>
-      <label class="flex items-center gap-2 text-sm">
-        <input
-          type="checkbox"
-          v-model="onlyAutoMail"
-          class="rounded border-gray-300 text-indigo-600 shadow-sm focus:ring-indigo-500"
-        />
-        Samo auto mail
-      </label>
+  <div class="p-4 flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
+    <div class="w-full bg-gray-50 border rounded-md p-3">
+      <div class="grid grid-cols-1 sm:grid-cols-12 gap-3 items-center">
+        <!-- Search -->
+        <div class="relative sm:col-span-3">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            class="h-4 w-4 absolute left-3 top-1/2 -translate-y-1/2 text-gray-400"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+          >
+            <path
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              d="M21 21l-4.35-4.35m0 0A7.5 7.5 0 1010.5 18.5a7.5 7.5 0 006.15-1.85z"
+            />
+          </svg>
+          <TextInput v-model="search" placeholder="Iskanje..." class="w-full pl-9 h-10" />
+        </div>
+        <!-- Template select -->
+        <div class="sm:col-span-3">
+          <select
+            v-model="selectedTemplateId"
+            class="block w-full h-10 border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 rounded-md shadow-sm"
+          >
+            <option :value="null">Vse predloge</option>
+            <option v-for="t in emailTemplates" :key="t.id" :value="t.id">
+              {{ t.name }}
+            </option>
+          </select>
+        </div>
+        <!-- Events multiselect -->
+        <div class="sm:col-span-4">
+          <multiselect
+            v-model="selectedEvents"
+            :options="availableEvents"
+            :multiple="true"
+            track-by="id"
+            label="name"
+            placeholder="Filtriraj po dogodkih"
+            class="w-full"
+          />
+        </div>
+        <!-- Only auto mail -->
+        <div class="sm:col-span-2">
+          <label class="flex items-center gap-2 text-sm">
+            <input
+              type="checkbox"
+              v-model="onlyAutoMail"
+              class="rounded border-gray-300 text-indigo-600 shadow-sm focus:ring-indigo-500 h-4 w-4"
+            />
+            Samo auto mail
+          </label>
+        </div>
+      </div>
+    </div>
+    <div class="flex-shrink-0">
+      <PrimaryButton @click="openCreateDrawer">+ Dodaj odločitev</PrimaryButton>
     </div>
-    <PrimaryButton @click="openCreateDrawer">+ Dodaj odločitev</PrimaryButton>
   </div>
   <div class="px-4 pb-4">
     <DataTableClient