Eagle eye drawers fixes

frontend/package.json

@@ -25,6 +25,8 @@
     "@tiptap/extension-placeholder": "^2.0.0-beta.199",
     "@tiptap/starter-kit": "^2.0.0-beta.199",
     "@tiptap/vue-3": "^2.0.0-beta.199",
+    "@vuelidate/core": "^2.0.0",
+    "@vuelidate/validators": "^2.0.0",
     "@vueuse/core": "^9.7.0",
     "apollo-boost": "^0.4.9",
     "axios": "^0.22.0",

frontend/src/assets/scss/form/select.scss

@@ -69,8 +69,7 @@
 }
 
 // Selected icon for single selection
-.el-select-dropdown
-  .el-select-dropdown__item.selected::after {
+.el-select-dropdown .el-select-dropdown__item:not(.no-checkmark).selected::after {
   content: '';
   position: absolute;
   top: 50%;
@@ -117,7 +116,7 @@
       }
 
       // Select dropdown item selected
-      &.selected {
+      &.selected, &.selected.hover {
         @apply font-medium bg-brand-50 text-gray-900;
       }
 

frontend/src/premium/eagle-eye/components/eagle-eye-platforms-drawers.vue

@@ -0,0 +1,80 @@
+<template>
+  <app-form-item
+    class="mb-0 is-error-above"
+    :validation="$v.platforms"
+    :show-error="false"
+  >
+    <div class="w-full">
+      <article
+        v-for="(platform, name) in platformOptions"
+        :key="name"
+        class="h-12 flex items-center border-b last:border-none border-gray-200 hover:bg-gray-50 hover:cursor-pointer"
+      >
+        <div>
+          <img :src="platform.img" class="w-6 h-6" />
+        </div>
+        <el-switch
+          :model-value="platforms.includes(name)"
+          :inactive-text="platform.label"
+          class="h-full"
+          @update:model-value="
+            handlePlatformChange($event, name)
+          "
+          @change="$v.platforms.$touch"
+        />
+      </article>
+    </div>
+  </app-form-item>
+</template>
+
+<script setup>
+import platformOptions from '@/premium/eagle-eye/constants/eagle-eye-platforms.json'
+import {
+  defineProps,
+  defineEmits,
+  computed,
+  onMounted
+} from 'vue'
+import useVuelidate from '@vuelidate/core'
+import AppFormItem from '@/shared/form/form-item.vue'
+import { required } from '@vuelidate/validators'
+
+const emit = defineEmits(['update:platforms'])
+const props = defineProps({
+  platforms: {
+    type: Array,
+    required: true
+  }
+})
+
+const platforms = computed({
+  get() {
+    return props.platforms
+  },
+  set(v) {
+    emit('update:platforms', v)
+  }
+})
+
+const rules = {
+  platforms: {
+    required
+  }
+}
+
+const $v = useVuelidate(rules, { platforms })
+
+const handlePlatformChange = (enabled, platform) => {
+  if (enabled) {
+    platforms.value.push(platform)
+  } else {
+    platforms.value = platforms.value.filter(
+      (p) => p !== platform
+    )
+  }
+}
+
+onMounted(() => {
+  $v.value.platforms.$touch()
+})
+</script>

frontend/src/premium/eagle-eye/components/form/eagle-eye-settings-include.vue

@@ -0,0 +1,94 @@
+<template>
+  <article class="pb-3 flex items-center">
+    <div class="flex flex-grow items-start">
+      <app-form-item
+        :validation="$v.keyword"
+        :error-messages="{
+          required: 'This field is required'
+        }"
+        class="mr-3 mb-0 no-margin basis-7/12 is-error-relative"
+      >
+        <el-input
+          v-model="include.keyword"
+          placeholder="Keyword"
+          @blur="$v.keyword.$touch"
+          @change="$v.keyword.$touch"
+        ></el-input>
+      </app-form-item>
+      <app-form-item
+        class="mr-3 mb-0 no-margin basis-5/12 is-error-relative"
+      >
+        <el-select
+          v-model="include.match"
+          class="w-full"
+          placeholder="Match type"
+        >
+          <el-option
+            value="semantic"
+            label="Semantic match"
+            class="flex-col !items-start !px-3 !py-2.5 !h-16 no-checkmark"
+          >
+            <h6 class="text-xs leading-5 font-medium">
+              Semantic match
+            </h6>
+            <p class="text-2xs leading-5 text-gray-500">
+              Results semantically related
+            </p>
+          </el-option>
+          <el-option
+            value="exact"
+            label="Exact match"
+            class="flex-col !items-start !px-3 !py-2.5 !h-16 no-checkmark"
+          >
+            <h6 class="text-xs leading-5 font-medium">
+              Exact match
+            </h6>
+            <p class="text-2xs leading-5 text-gray-500">
+              Results containing the keyword
+            </p>
+          </el-option>
+        </el-select>
+      </app-form-item>
+    </div>
+    <slot name="after" />
+  </article>
+</template>
+
+<script>
+export default {
+  name: 'AppEagleEyeSettingsInclude'
+}
+</script>
+
+<script setup>
+import { computed, defineEmits, defineProps } from 'vue'
+import { required } from '@vuelidate/validators'
+import useVuelidate from '@vuelidate/core'
+import AppFormItem from '@/shared/form/form-item.vue'
+
+const emit = defineEmits(['update:modelValue'])
+
+const props = defineProps({
+  modelValue: {
+    type: Object,
+    required: true
+  }
+})
+
+const rules = {
+  keyword: {
+    required
+  }
+}
+
+const include = computed({
+  get() {
+    return props.modelValue
+  },
+  set(value) {
+    emit('update:modelValue', value)
+  }
+})
+
+const $v = useVuelidate(rules, include)
+</script>