change

src/components/pnActionBar.vue

@@ -0,0 +1,89 @@
+<template>
+  <div 
+    class="flex row q-mx-sm justify-between items-center no-wrap q-py-sm"
+  >
+    <q-btn
+      v-if="showCalendarBtn"
+      flat round
+      :color="calendarActive ? 'primary' : 'grey'"
+      @click="emit('toggle-calendar')"
+      >
+      <div>
+        <q-icon name="mdi-calendar-month-outline" size="sm"/>
+        <q-badge
+          color="red"
+          rounded
+          floating
+          transparent
+          style="position: relative; top: -6px; margin-left: -12px"
+          :style="{ opacity: calendarBadge ? 0.8 : 0 }" 
+        />
+      </div>
+    </q-btn>
+
+    <q-input
+      v-model="search"
+      clearable
+      clear-icon="close"
+      borderless
+      filled
+      :placeholder="$t(placeholder)"
+      dense
+      class="col-grow q-pt-xs q-mx-sm"
+    >
+      <template #prepend>
+        <q-icon name="mdi-magnify" color="grey"/>
+      </template>
+    </q-input>
+
+    <q-btn
+      v-if="showFilterBtn"
+      @click="emit('open-filters')"
+      flat round
+      :color="filterActive ? 'primary' : 'grey'"
+      >
+      <div>
+        <q-icon name="mdi-filter-outline" size="sm"/>
+        <q-badge
+          color="red"
+          rounded
+          floating
+          transparent
+          style="position: relative; top: -6px; margin-left: -12px"
+          :style="{ opacity: filterBadge ? 0.8 : 0 }" 
+        />
+      </div>
+    </q-btn>
+  </div>
+</template>
+
+<script setup lang="ts">
+  const search = defineModel<string>({
+    required: true,
+    default: ''
+  })
+
+  defineProps({
+    placeholder: {
+      type: String,
+      default: 'Search...'
+    },
+    showCalendarBtn: {
+      type: Boolean,
+      default: true
+    },
+    showFilterBtn: {
+      type: Boolean,
+      default: true
+    },
+    calendarActive: Boolean,
+    filterActive: Boolean,
+    calendarBadge: Boolean,
+    filterBadge: Boolean
+  })
+
+  const emit = defineEmits([
+    'toggle-calendar',
+    'open-filters'
+  ])
+</script>