[ui] Add interval selector components

Creates an IntervalSelector component to handle set
and custom schedule intervals.

Signed-off-by: Eva Millán <[email protected]>

Author: evamillan

ui/src/components/IntervalSelector.vue

@@ -0,0 +1,90 @@
+<template>
+  <div>
+    <v-btn-toggle
+      :model-value="selected"
+      :density
+      mandatory
+      shaped
+      divided
+      variant="outlined"
+      base-color="#898B8E"
+      height="40"
+      block
+      @update:model-value="handleToggle"
+    >
+      <v-btn class="text-subtitle-2 text-medium-emphasis" color="primary" value="86400">
+        Daily
+      </v-btn>
+      <v-btn class="text-subtitle-2 text-medium-emphasis" color="primary" value="604800">
+        Weekly
+      </v-btn>
+      <v-btn class="text-subtitle-2 text-medium-emphasis" color="primary" value="2629746">
+        Monthly
+      </v-btn>
+      <v-btn
+        class="text-subtitle-2 text-medium-emphasis"
+        color="primary"
+        value="custom"
+        data-test="selector-custom"
+      >
+        Custom interval
+      </v-btn>
+    </v-btn-toggle>
+    <div v-if="selected == 'custom'" class="pt-3 reduced-input">
+      <v-text-field
+        v-model="custom"
+        :density
+        data-test="input"
+        label="Every"
+        variant="outlined"
+        hide-details
+        @update:model-value="handleInput"
+      >
+        <template #append-inner>
+          <span class="text-medium-emphasis">seconds</span>
+        </template>
+      </v-text-field>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  name: 'IntervalSelector',
+  emits: ['update:model-value'],
+  props: {
+    modelValue: {
+      type: [String, Number],
+      required: false,
+      default: ''
+    },
+    density: {
+      type: String,
+      required: false,
+      default: 'compact'
+    }
+  },
+  data() {
+    return {
+      selected: this.modelValue,
+      custom: ''
+    }
+  },
+  methods: {
+    handleToggle(event) {
+      const value = event === 'custom' ? this.custom : event
+      this.selected = event
+      this.$emit('update:model-value', value)
+    },
+    handleInput(event) {
+      if (this.selected === 'custom') {
+        this.$emit('update:model-value', event)
+      }
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.reduced-input {
+  max-width: 366px;
+}
+</style>

ui/src/stories/IntervalSelector.stories.js

@@ -0,0 +1,27 @@
+import IntervalSelector from '@/components/IntervalSelector.vue'
+
+export default {
+  title: 'Components/IntervalSelector',
+  component: IntervalSelector,
+  tags: ['autodocs'],
+  argTypes: {
+    density: {
+      control: { type: 'select' },
+      options: ['compact', 'comfortable', 'default']
+    }
+  }
+}
+
+export const Default = {
+  args: {
+    density: 'compact',
+    modelValue: '604800'
+  }
+}
+
+export const CustomInterval = {
+  args: {
+    density: 'compact',
+    modelValue: 'custom'
+  }
+}

ui/tests/unit/Intervalselector.spec.js

@@ -0,0 +1,22 @@
+import IntervalSelector from '@/components/IntervalSelector.vue'
+import vuetify from '@/plugins/vuetify'
+import { describe, expect, test } from 'vitest'
+import { mount } from '@vue/test-utils'
+
+describe('components/IntervalSelector', () => {
+  test('Emits custom value', async () => {
+    const wrapper = mount(IntervalSelector, {
+      global: {
+        plugins: [vuetify]
+      }
+    })
+
+    await wrapper.get('[data-test="selector-custom"]').trigger('click')
+
+    expect(wrapper.get('[data-test="input"]').isVisible()).toBe(true)
+
+    wrapper.get('[data-test="input"] input').setValue('1234')
+
+    expect(wrapper.emitted('update:model-value')[1]).toEqual(['1234'])
+  })
+})

ui/vitest.config.js

@@ -8,7 +8,8 @@ export default mergeConfig(
     test: {
       environment: 'jsdom',
       exclude: [...configDefaults.exclude, 'e2e/*'],
-      root: fileURLToPath(new URL('./', import.meta.url))
+      root: fileURLToPath(new URL('./', import.meta.url)),
+      pool: 'vmThreads'
     }
   })
 )