@eturnity/eturnity_reusable_components 8.22.23-EPDM-13618.1 → 8.22.23-EPDM-15710.0

package/src/components/filterComponent/viewFilter.vue

@@ -1,605 +1,701 @@
-<template>
-  <PageContainer>
-    <ButtonIcon
-      ref="buttonIcon"
-      class="button-icon"
-      fill-type="stroke"
-      icon-name="filter"
-      :number-count="getNumberCount()"
-      :text="$gettext('filter')"
-      type="filter"
-      @click="toggleOptions"
-    />
-    <ButtonWrapper v-if="isOptionsVisible">
-      <BoxContainer ref="boxContainer" class="box-container">
-        <BoxTitle>{{ $gettext('filter') }}</BoxTitle>
-        <SortOptionsContainer>
-          <template v-if="selectedSort.length > 0">
-            <SortDropdownContainer
-              v-for="(item, index) in selectedSort"
-              :key="index"
-            >
-              <LeadingText>{{ $gettext('if') }}</LeadingText>
-              <SelectComponent
-                ref="selectSortDropdown"
-                align-items="vertical"
-                class="sort-dropdown"
-                :dropdown-auto-close="false"
-                select-height="40px"
-                @input-change="
-                  onSelectFilter({
-                    type: 'column',
-                    value: $event,
-                    index: index,
-                  })
-                "
-              >
-                <template #selector>
-                  <SelectedText>{{
-                    getSelectedLabel({
-                      type: 'column',
-                      value: item.column,
-                      index,
-                    }) || $gettext('category')
-                  }}</SelectedText>
-                </template>
-                <template #dropdown>
-                  <SelectOption
-                    v-for="category in filterCategories"
-                    :key="category.name"
-                    :value="category.name"
-                  >
-                    {{ $gettext(category.text) }}
-                  </SelectOption>
-                </template>
-              </SelectComponent>
-              <SelectComponent
-                ref="selectSortDropdown"
-                align-items="vertical"
-                class="sort-dropdown"
-                :disabled="!item.column"
-                :dropdown-auto-close="false"
-                select-height="40px"
-                @input-change="
-                  onSelectFilter({
-                    type: 'constraint',
-                    value: $event,
-                    index: index,
-                  })
-                "
-              >
-                <template #selector>
-                  <SelectedText>{{
-                    getSelectedLabel({
-                      type: 'constraint',
-                      value: item.constraint,
-                      index,
-                    }) || $gettext('constraint')
-                  }}</SelectedText>
-                </template>
-                <template #dropdown>
-                  <SelectOption
-                    v-for="(item, index) in constraintOptions(index)"
-                    :key="item.value"
-                    :value="item.value"
-                  >
-                    {{ item.label }}
-                  </SelectOption>
-                </template>
-              </SelectComponent>
-              <template v-if="item.column === 'updated'">
-                <DatePickerContainer>
-                  <VueDatePicker
-                    ref="datePicker"
-                    :auto-apply="true"
-                    :clearable="true"
-                    :disabled="!item.constraint"
-                    :enable-time-picker="false"
-                    :format="datePickerFormat"
-                    :input-class-name="'dp-input'"
-                    :locale="datePickerLocale"
-                    model-type="format"
-                    :model-value="item.selectedDate"
-                    :placeholder="$gettext('Select')"
-                    :range="false"
-                    :single-picker="true"
-                    text-input
-                    @click="handleDatePickerClick"
-                    @open="handleDatePickerClick"
-                    @update:model-value="
-                      onSelectFilter({
-                        type: 'selectedDate',
-                        value: $event,
-                        index: index,
-                        constraint: item.constraint,
-                      })
-                    "
-                  />
-                </DatePickerContainer>
-              </template>
-              <SelectComponent
-                v-else
-                ref="selectSortDropdown"
-                align-items="vertical"
-                class="sort-dropdown"
-                :disabled="!item.column || !item.constraint"
-                :dropdown-auto-close="false"
-                :is-searchable="false"
-                option-width="max-content"
-                select-height="40px"
-                @input-change="
-                  onSelectFilter({
-                    type: 'selectedOptions',
-                    value: $event,
-                    index: index,
-                  })
-                "
-              >
-                <template #selector>
-                  <SelectedText>{{
-                    getSelectedLabel({
-                      type: 'selectedOptions',
-                      value: item.constraint,
-                      index,
-                    }) || $gettext('Options')
-                  }}</SelectedText>
-                </template>
-                <template #dropdown>
-                  <OptionsContainer class="options-container">
-                    <SelectOption
-                      v-for="option in optionsList(index)"
-                      :key="option.value"
-                      :value="option.value"
-                      @click="
-                        onSelectFilter({
-                          type: 'selectedOptions',
-                          value: option.value,
-                          index: index,
-                        })
-                      "
-                    >
-                      <RcCheckbox
-                        :is-checked="
-                          selectedSort[index].selectedOptions?.includes(
-                            option.value
-                          )
-                        "
-                        :label="$gettext(option.label)"
-                        size="small"
-                        @on-event-handler="
-                          onSelectFilter({
-                            type: 'selectedOptions',
-                            value: option.value,
-                            index: index,
-                          })
-                        "
-                      />
-                    </SelectOption>
-                  </OptionsContainer>
-                </template>
-              </SelectComponent>
-              <IconContainer>
-                <RCIcon
-                  :color="theme.semanticColors.teal[800]"
-                  cursor="pointer"
-                  name="close"
-                  size="14px"
-                  @click.stop="removeItem(index)"
-                />
-              </IconContainer>
-            </SortDropdownContainer>
-          </template>
-          <template v-else>
-            <SortDropdownContainer>
-              <LeadingText>{{ $gettext('if') }}</LeadingText>
-              <SelectComponent
-                ref="selectSortDropdown"
-                align-items="vertical"
-                class="sort-dropdown"
-                :dropdown-auto-close="false"
-                select-height="40px"
-                @input-change="
-                  onSelectFilter({
-                    type: 'column',
-                    value: $event,
-                    index: 0,
-                  })
-                "
-              >
-                <template #selector>
-                  <SelectedText>{{ $gettext('category') }}</SelectedText>
-                </template>
-                <template #dropdown>
-                  <SelectOption
-                    v-for="item in filterCategories"
-                    :key="item.name"
-                    :value="item.name"
-                  >
-                    {{ $gettext(item.text) }}
-                  </SelectOption>
-                </template>
-              </SelectComponent>
-              <SelectComponent
-                ref="selectSortDropdown"
-                align-items="vertical"
-                class="sort-dropdown"
-                :disabled="true"
-                :dropdown-auto-close="false"
-                select-height="40px"
-              >
-                <template #selector>
-                  <SelectedText>{{ $gettext('constraint') }}</SelectedText>
-                </template>
-              </SelectComponent>
-              <SelectComponent
-                ref="selectSortDropdown"
-                align-items="vertical"
-                class="sort-dropdown"
-                :disabled="true"
-                :dropdown-auto-close="false"
-                select-height="40px"
-              >
-                <template #selector>
-                  <SelectedText>{{ $gettext('Options') }}</SelectedText>
-                </template>
-              </SelectComponent>
-            </SortDropdownContainer>
-          </template>
-        </SortOptionsContainer>
-        <BottomContainer>
-          <PlaceholderText>{{ $gettext('if') }}</PlaceholderText>
-          <ButtonIcon
-            icon-name="plus_button"
-            :text="$gettext('add_filter')"
-            type="ghost"
-            @click="onAddFilter"
-          />
-        </BottomContainer>
-      </BoxContainer>
-    </ButtonWrapper>
-  </PageContainer>
-</template>
-
-<script>
-  import styled from 'vue3-styled-components'
-  import theme from '../../assets/theme'
-  import ButtonIcon from '../buttons/buttonIcon/index.vue'
-  import SelectComponent from '../inputs/select/index.vue'
-  import SelectOption from '../inputs/select/option/index.vue'
-  import RcCheckbox from '../inputs/checkbox/index.vue'
-  import RCIcon from '../icon'
-  import VueDatePicker from '@vuepic/vue-datepicker'
-  import { datePickerLang, getDateFormat } from '../../helpers/translateLang'
-
-  const PageContainer = styled.div``
-
-  const ButtonWrapper = styled.div`
-    position: relative;
-  `
-
-  const BoxContainer = styled.div`
-    position: absolute;
-    z-index: 99;
-    top: 8px;
-    left: 100%;
-    transform: translateX(-50%);
-    width: max-content;
-    max-width: calc(100vw - 32px);
-    background-color: ${(props) => props.theme.colors.white};
-    border: 1px solid ${(props) => props.theme.semanticColors.grey[300]};
-    border-radius: 4px;
-    padding: 24px;
-  `
-
-  const BoxTitle = styled.div`
-    font-size: 14px;
-    font-weight: 500;
-    color: ${(props) => props.theme.semanticColors.teal[800]};
-    margin-bottom: 16px;
-  `
-
-  const SortOptionsContainer = styled.div`
-    display: flex;
-    flex-direction: column;
-    gap: 16px;
-    white-space: nowrap;
-  `
-
-  const SortDropdownContainer = styled.div`
-    display: grid;
-    grid-template-columns: auto repeat(3, 1fr) auto;
-    grid-gap: 8px;
-    align-items: center;
-  `
-
-  const SelectedText = styled.div`
-    font-size: 14px;
-    font-weight: 400;
-    color: ${(props) => props.theme.semanticColors.grey[800]};
-  `
-
-  const IconContainer = styled.div`
-    margin-left: 12px;
-  `
-
-  const LeadingText = styled.div`
-    font-size: 14px;
-    font-weight: 400;
-    color: ${(props) => props.theme.semanticColors.teal[800]};
-  `
-
-  const BottomContainer = styled.div`
-    display: flex;
-    margin-top: 16px;
-  `
-
-  const PlaceholderText = styled.div`
-    visibility: hidden;
-  `
-
-  const OptionsContainer = styled.div`
-    width: max-content;
-    display: flex;
-    flex-direction: column;
-  `
-
-  const DatePickerContainer = styled.div`
-    height: 40px;
-    display: flex;
-    align-items: center;
-    min-width: 150px;
-  `
-
-  export default {
-    name: 'ViewSettings',
-    components: {
-      PageContainer,
-      ButtonIcon,
-      ButtonWrapper,
-      BoxContainer,
-      BoxTitle,
-      SortOptionsContainer,
-      SortDropdownContainer,
-      SelectComponent,
-      SelectOption,
-      SelectedText,
-      RCIcon,
-      IconContainer,
-      LeadingText,
-      BottomContainer,
-      PlaceholderText,
-      RcCheckbox,
-      OptionsContainer,
-      VueDatePicker,
-      DatePickerContainer,
-    },
-    props: {
-      sortOptions: {
-        type: Array,
-        required: true,
-      },
-      selectedSort: {
-        type: Array,
-        required: true,
-      },
-      filterCategories: {
-        type: Array,
-        required: true,
-      },
-      activeLanguage: {
-        type: String,
-        required: false,
-        default: 'en-us',
-      },
-    },
-    data() {
-      return {
-        isOptionsVisible: false,
-      }
-    },
-    computed: {
-      theme() {
-        return theme
-      },
-      datePickerLocale() {
-        return this.activeLanguage
-      },
-      datePickerFormat() {
-        return getDateFormat(this.activeLanguage)
-      },
-    },
-    beforeUnmount() {
-      document.removeEventListener('click', this.handleClickOutside)
-    },
-    methods: {
-      handleClickOutside(event) {
-        const isClickInSelect =
-          event.target.closest('.sort-dropdown') ||
-          event.target.closest('.rc-select-dropdown') ||
-          event.target.closest('.select-button') ||
-          event.target.closest('.caret_dropdown') ||
-          event.target.closest('.rc-select') ||
-          event.target.closest('.select-option') ||
-          event.target.closest('.icon') ||
-          event.target.closest('svg') ||
-          event.target.closest('.dp-input') ||
-          event.target.closest('.dp__menu')
-
-        if (
-          !this.$refs.buttonIcon.$el.contains(event.target) &&
-          !this.$refs.boxContainer.$el.contains(event.target) &&
-          !isClickInSelect
-        ) {
-          this.isOptionsVisible = false
-          document.removeEventListener('click', this.handleClickOutside)
-        }
-      },
-      toggleOptions() {
-        this.isOptionsVisible = !this.isOptionsVisible
-        if (this.isOptionsVisible) {
-          document.addEventListener('click', this.handleClickOutside)
-        } else {
-          document.removeEventListener('click', this.handleClickOutside)
-        }
-      },
-      getNumberCount() {
-        return this.selectedSort.filter((item) => {
-          const hasColumn = !!item.column
-          const hasConstraint = !!item.constraint
-          const hasSelectedOptions =
-            item.column === 'updated'
-              ? !!item.selectedDate
-              : !!item.selectedOptions?.length
-          return hasColumn && hasConstraint && hasSelectedOptions
-        }).length
-      },
-      constraintOptions(index) {
-        const generalOptions = [
-          {
-            value: 'contains_any',
-            label: this.$gettext('contains_any'),
-          },
-          {
-            value: 'contains_all',
-            label: this.$gettext('contains_all'),
-          },
-          {
-            value: 'contains_none',
-            label: this.$gettext('contains_none'),
-          },
-        ]
-
-        const dateOptions = [
-          {
-            value: 'is_before',
-            label: this.$gettext('is_before'),
-          },
-          {
-            value: 'is_before_or_on',
-            label: this.$gettext('is_before_or_on'),
-          },
-          {
-            value: 'is_after',
-            label: this.$gettext('is_after'),
-          },
-          {
-            value: 'is_after_or_on',
-            label: this.$gettext('is_after_or_on'),
-          },
-        ]
-
-        if (this.selectedSort?.[index]?.column === 'updated') {
-          return dateOptions
-        }
-
-        if (this.selectedSort?.[index]?.column === 'project_status') {
-          return generalOptions.filter(
-            (option) => option.value !== 'contains_none'
-          )
-        }
-
-        return generalOptions
-      },
-      handleDatePickerClick() {
-        // Close all Select dropdowns. This is a workaround to close the dropdown when the date picker is clicked
-        this.$refs.selectSortDropdown.forEach((select) => {
-          select.closeDropdown()
-        })
-      },
-      getSelectedLabel({ type, value, index }) {
-        if (!value) return
-        if (type === 'column') {
-          const categoryName = this.filterCategories.find(
-            (option) => option.name === value
-          ).text
-          return this.$gettext(categoryName) || '-'
-        } else if (type === 'constraint') {
-          return this.constraintOptions(index).find(
-            (option) => option.value === value
-          ).label
-        } else if (type === 'selectedOptions') {
-          const selectedOptions =
-            this.selectedSort[index]?.selectedOptions || []
-          if (selectedOptions.length === 0) return this.$gettext('Options')
-
-          const optionsList = this.optionsList(index)
-          const selectedLabels = selectedOptions
-            .map((optionValue) => {
-              const option = optionsList.find(
-                (opt) => opt.value === optionValue
-              )
-              return option ? option.label : optionValue
-            })
-            .join(', ')
-
-          return selectedLabels.length > 15
-            ? `${selectedLabels.substring(0, 15)}...`
-            : selectedLabels
-        }
-      },
-      onSelectFilter({ type, value, index, constraint }) {
-        if (
-          type === 'constraint' &&
-          (value === 'contains_all' || value === 'contains_none')
-        ) {
-          const options = this.optionsList(index)
-          const allValues = options.map((option) => option.value)
-
-          this.$emit('on-filter-change', {
-            type: 'selectedOptions',
-            value: value === 'contains_all' ? allValues : [],
-            index,
-          })
-        }
-
-        this.$emit('on-filter-change', {
-          type,
-          value,
-          index,
-          constraint,
-        })
-        if (type === 'column') {
-          this.$emit('on-filter-change', {
-            type: 'constraint',
-            value: '',
-            index,
-          })
-        }
-        this.isOptionsVisible = true
-      },
-      removeItem(index) {
-        this.$emit('on-filter-change', {
-          type: 'remove',
-          index,
-        })
-      },
-      onAddFilter() {
-        this.$emit('on-add-filter', {
-          type: 'add',
-          index: this.selectedSort.length,
-        })
-      },
-      optionsList(index) {
-        if (!this.selectedSort[index].column) return []
-        const findIndex = this.filterCategories.findIndex(
-          (category) => category.name === this.selectedSort[index].column
-        )
-        const selectedItem = this.filterCategories[findIndex]
-        return this.filterCategories[findIndex].options.choices.map(
-          (option) => ({
-            ...option,
-            value: option[selectedItem.valueSelector],
-            label: option[selectedItem.labelSelector],
-          })
-        )
-      },
-    },
-  }
-</script>
-
-<style>
-  .dp-input {
-    height: 40px !important;
-    min-width: 150px !important;
-  }
-</style>
+<template>
+  <PageContainer>
+    <ButtonIcon
+      ref="buttonIcon"
+      class="button-icon"
+      fill-type="stroke"
+      icon-name="filter"
+      :number-count="getNumberCount()"
+      :text="$gettext('filter')"
+      type="filter"
+      @click="toggleOptions"
+    />
+    <ButtonWrapper v-if="isOptionsVisible">
+      <BoxContainer ref="boxContainer" class="box-container">
+        <BoxTitle>{{ $gettext('filter') }}</BoxTitle>
+        <SortOptionsContainer>
+          <template v-if="selectedSort.length > 0">
+            <SortDropdownContainer
+              v-for="(item, index) in selectedSort"
+              :key="index"
+            >
+              <LeadingText>{{ $gettext('if') }}</LeadingText>
+              <SelectComponent
+                ref="selectSortDropdown"
+                align-items="vertical"
+                class="sort-dropdown"
+                :data-id="
+                  rowDataId.dataId
+                    .replace('${type}', 'column')
+                    .replace('${index}', index)
+                "
+                :data-qa-id="
+                  rowDataId.dataId
+                    .replace('${type}', 'column')
+                    .replace('${index}', index)
+                "
+                :dropdown-auto-close="false"
+                select-height="40px"
+                @input-change="
+                  onSelectFilter({
+                    type: 'column',
+                    value: $event,
+                    index: index,
+                  })
+                "
+              >
+                <template #selector>
+                  <SelectedText>{{
+                    getSelectedLabel({
+                      type: 'column',
+                      value: item.column,
+                      index,
+                    }) || $gettext('category')
+                  }}</SelectedText>
+                </template>
+                <template #dropdown>
+                  <SelectOption
+                    v-for="category in filterCategories"
+                    :key="category.name"
+                    :value="category.name"
+                  >
+                    {{ $gettext(category.text) }}
+                  </SelectOption>
+                </template>
+              </SelectComponent>
+              <SelectComponent
+                ref="selectSortDropdown"
+                align-items="vertical"
+                class="sort-dropdown"
+                :data-id="
+                  rowDataId.dataId
+                    .replace('${type}', 'constraint')
+                    .replace('${index}', index)
+                "
+                :data-qa-id="
+                  rowDataId.dataId
+                    .replace('${type}', 'constraint')
+                    .replace('${index}', index)
+                "
+                :disabled="!item.column"
+                :dropdown-auto-close="false"
+                select-height="40px"
+                @input-change="
+                  onSelectFilter({
+                    type: 'constraint',
+                    value: $event,
+                    index: index,
+                  })
+                "
+              >
+                <template #selector>
+                  <SelectedText>{{
+                    getSelectedLabel({
+                      type: 'constraint',
+                      value: item.constraint,
+                      index,
+                    }) || $gettext('constraint')
+                  }}</SelectedText>
+                </template>
+                <template #dropdown>
+                  <SelectOption
+                    v-for="(item, index) in constraintOptions(index)"
+                    :key="item.value"
+                    :value="item.value"
+                  >
+                    {{ item.label }}
+                  </SelectOption>
+                </template>
+              </SelectComponent>
+              <template v-if="item.column === 'updated'">
+                <DatePickerContainer
+                  :data-id="
+                    rowDataId.dataId
+                      .replace('${type}', 'selectedDate')
+                      .replace('${index}', index)
+                  "
+                  :data-qa-id="
+                    rowDataId.dataQaId
+                      .replace('${type}', 'selectedDate')
+                      .replace('${index}', index)
+                  "
+                >
+                  <VueDatePicker
+                    ref="datePicker"
+                    :auto-apply="true"
+                    :clearable="true"
+                    :disabled="!item.constraint"
+                    :enable-time-picker="false"
+                    :format="datePickerFormat"
+                    :input-class-name="'dp-input'"
+                    :locale="datePickerLocale"
+                    model-type="format"
+                    :model-value="item.selectedDate"
+                    :placeholder="$gettext('Select')"
+                    :range="false"
+                    :single-picker="true"
+                    text-input
+                    @click="handleDatePickerClick"
+                    @open="handleDatePickerClick"
+                    @update:model-value="
+                      onSelectFilter({
+                        type: 'selectedDate',
+                        value: $event,
+                        index: index,
+                        constraint: item.constraint,
+                      })
+                    "
+                  />
+                </DatePickerContainer>
+              </template>
+              <SelectComponent
+                v-else
+                ref="selectSortDropdown"
+                align-items="vertical"
+                class="sort-dropdown"
+                :data-id="
+                  rowDataId.dataId
+                    .replace('${type}', 'selectedOptions')
+                    .replace('${index}', index)
+                "
+                :data-qa-id="
+                  rowDataId.dataId
+                    .replace('${type}', 'selectedOptions')
+                    .replace('${index}', index)
+                "
+                :disabled="!item.column || !item.constraint"
+                :dropdown-auto-close="false"
+                :is-searchable="false"
+                option-width="max-content"
+                select-height="40px"
+                @input-change="
+                  onSelectFilter({
+                    type: 'selectedOptions',
+                    value: $event,
+                    index: index,
+                  })
+                "
+              >
+                <template #selector>
+                  <SelectedText>{{
+                    getSelectedLabel({
+                      type: 'selectedOptions',
+                      value: item.constraint,
+                      index,
+                    }) || $gettext('Options')
+                  }}</SelectedText>
+                </template>
+                <template #dropdown>
+                  <OptionsContainer class="options-container">
+                    <SelectOption
+                      v-for="option in optionsList(index)"
+                      :key="option.value"
+                      :value="option.value"
+                      @click="
+                        onSelectFilter({
+                          type: 'selectedOptions',
+                          value: option.value,
+                          index: index,
+                        })
+                      "
+                    >
+                      <RcCheckbox
+                        :is-checked="
+                          selectedSort[index].selectedOptions?.includes(
+                            option.value
+                          )
+                        "
+                        :label="$gettext(option.label)"
+                        size="small"
+                        @on-event-handler="
+                          onSelectFilter({
+                            type: 'selectedOptions',
+                            value: option.value,
+                            index: index,
+                          })
+                        "
+                      />
+                    </SelectOption>
+                  </OptionsContainer>
+                </template>
+              </SelectComponent>
+              <IconContainer>
+                <RCIcon
+                  :color="theme.semanticColors.teal[800]"
+                  cursor="pointer"
+                  :data-id="
+                    rowDataId.dataId
+                      .replace('${type}', 'remove')
+                      .replace('${index}', index)
+                  "
+                  :data-qa-id="
+                    rowDataId.dataId
+                      .replace('${type}', 'remove')
+                      .replace('${index}', index)
+                  "
+                  name="close"
+                  size="14px"
+                  @click.stop="removeItem(index)"
+                />
+              </IconContainer>
+            </SortDropdownContainer>
+          </template>
+          <template v-else>
+            <SortDropdownContainer>
+              <LeadingText>{{ $gettext('if') }}</LeadingText>
+              <SelectComponent
+                ref="selectSortDropdown"
+                align-items="vertical"
+                class="sort-dropdown"
+                :data-id="
+                  rowDataId.dataId
+                    .replace('${type}', 'column')
+                    .replace('${index}', 0)
+                "
+                :data-qa-id="
+                  rowDataId.dataId
+                    .replace('${type}', 'column')
+                    .replace('${index}', 0)
+                "
+                :dropdown-auto-close="false"
+                select-height="40px"
+                @input-change="
+                  onSelectFilter({
+                    type: 'column',
+                    value: $event,
+                    index: 0,
+                  })
+                "
+              >
+                <template #selector>
+                  <SelectedText>{{ $gettext('category') }}</SelectedText>
+                </template>
+                <template #dropdown>
+                  <SelectOption
+                    v-for="item in filterCategories"
+                    :key="item.name"
+                    :value="item.name"
+                  >
+                    {{ $gettext(item.text) }}
+                  </SelectOption>
+                </template>
+              </SelectComponent>
+              <SelectComponent
+                ref="selectSortDropdown"
+                align-items="vertical"
+                class="sort-dropdown"
+                :data-id="
+                  rowDataId.dataId
+                    .replace('${type}', 'constraint')
+                    .replace('${index}', 0)
+                "
+                :data-qa-id="
+                  rowDataId.dataId
+                    .replace('${type}', 'constraint')
+                    .replace('${index}', 0)
+                "
+                :disabled="true"
+                :dropdown-auto-close="false"
+                select-height="40px"
+              >
+                <template #selector>
+                  <SelectedText>{{ $gettext('constraint') }}</SelectedText>
+                </template>
+              </SelectComponent>
+              <SelectComponent
+                ref="selectSortDropdown"
+                align-items="vertical"
+                class="sort-dropdown"
+                :data-id="
+                  rowDataId.dataId
+                    .replace('${type}', 'selectedOptions')
+                    .replace('${index}', 0)
+                "
+                :data-qa-id="
+                  rowDataId.dataId
+                    .replace('${type}', 'selectedOptions')
+                    .replace('${index}', 0)
+                "
+                :disabled="true"
+                :dropdown-auto-close="false"
+                select-height="40px"
+              >
+                <template #selector>
+                  <SelectedText>{{ $gettext('Options') }}</SelectedText>
+                </template>
+              </SelectComponent>
+            </SortDropdownContainer>
+          </template>
+        </SortOptionsContainer>
+        <BottomContainer>
+          <PlaceholderText>{{ $gettext('if') }}</PlaceholderText>
+          <ButtonIcon
+            :data-id="
+              rowDataId.dataId
+                .replace('${type}', 'addFilter')
+                .replace('${index}', 0)
+            "
+            :data-qa-id="
+              rowDataId.dataId
+                .replace('${type}', 'addFilter')
+                .replace('${index}', 0)
+            "
+            icon-name="plus_button"
+            :text="$gettext('add_filter')"
+            type="ghost"
+            @click="onAddFilter"
+          />
+        </BottomContainer>
+      </BoxContainer>
+    </ButtonWrapper>
+  </PageContainer>
+</template>
+
+<script>
+  import styled from 'vue3-styled-components'
+  import theme from '../../assets/theme'
+  import ButtonIcon from '../buttons/buttonIcon/index.vue'
+  import SelectComponent from '../inputs/select/index.vue'
+  import SelectOption from '../inputs/select/option/index.vue'
+  import RcCheckbox from '../inputs/checkbox/index.vue'
+  import RCIcon from '../icon'
+  import VueDatePicker from '@vuepic/vue-datepicker'
+  import { datePickerLang, getDateFormat } from '../../helpers/translateLang'
+
+  const PageContainer = styled.div``
+
+  const ButtonWrapper = styled.div`
+    position: relative;
+  `
+
+  const BoxContainer = styled.div`
+    position: absolute;
+    z-index: 99;
+    top: 8px;
+    left: 100%;
+    transform: translateX(-50%);
+    width: max-content;
+    max-width: calc(100vw - 32px);
+    background-color: ${(props) => props.theme.colors.white};
+    border: 1px solid ${(props) => props.theme.semanticColors.grey[300]};
+    border-radius: 4px;
+    padding: 24px;
+  `
+
+  const BoxTitle = styled.div`
+    font-size: 14px;
+    font-weight: 500;
+    color: ${(props) => props.theme.semanticColors.teal[800]};
+    margin-bottom: 16px;
+  `
+
+  const SortOptionsContainer = styled.div`
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+    white-space: nowrap;
+  `
+
+  const SortDropdownContainer = styled.div`
+    display: grid;
+    grid-template-columns: auto repeat(3, 1fr) auto;
+    grid-gap: 8px;
+    align-items: center;
+  `
+
+  const SelectedText = styled.div`
+    font-size: 14px;
+    font-weight: 400;
+    color: ${(props) => props.theme.semanticColors.grey[800]};
+  `
+
+  const IconContainer = styled.div`
+    margin-left: 12px;
+  `
+
+  const LeadingText = styled.div`
+    font-size: 14px;
+    font-weight: 400;
+    color: ${(props) => props.theme.semanticColors.teal[800]};
+  `
+
+  const BottomContainer = styled.div`
+    display: flex;
+    margin-top: 16px;
+  `
+
+  const PlaceholderText = styled.div`
+    visibility: hidden;
+  `
+
+  const OptionsContainer = styled.div`
+    width: max-content;
+    display: flex;
+    flex-direction: column;
+  `
+
+  const DatePickerContainer = styled.div`
+    height: 40px;
+    display: flex;
+    align-items: center;
+    min-width: 150px;
+  `
+
+  export default {
+    name: 'ViewSettings',
+    components: {
+      PageContainer,
+      ButtonIcon,
+      ButtonWrapper,
+      BoxContainer,
+      BoxTitle,
+      SortOptionsContainer,
+      SortDropdownContainer,
+      SelectComponent,
+      SelectOption,
+      SelectedText,
+      RCIcon,
+      IconContainer,
+      LeadingText,
+      BottomContainer,
+      PlaceholderText,
+      RcCheckbox,
+      OptionsContainer,
+      VueDatePicker,
+      DatePickerContainer,
+    },
+    props: {
+      sortOptions: {
+        type: Array,
+        required: true,
+      },
+      selectedSort: {
+        type: Array,
+        required: true,
+      },
+      filterCategories: {
+        type: Array,
+        required: true,
+      },
+      activeLanguage: {
+        type: String,
+        required: false,
+        default: 'en-us',
+      },
+      rowDataId: {
+        type: Object,
+        required: false,
+        default: '',
+      },
+    },
+    data() {
+      return {
+        isOptionsVisible: false,
+      }
+    },
+    computed: {
+      theme() {
+        return theme
+      },
+      datePickerLocale() {
+        return this.activeLanguage
+      },
+      datePickerFormat() {
+        return getDateFormat(this.activeLanguage)
+      },
+    },
+    beforeUnmount() {
+      document.removeEventListener('click', this.handleClickOutside)
+    },
+    methods: {
+      handleClickOutside(event) {
+        const isClickInSelect =
+          event.target.closest('.sort-dropdown') ||
+          event.target.closest('.rc-select-dropdown') ||
+          event.target.closest('.select-button') ||
+          event.target.closest('.caret_dropdown') ||
+          event.target.closest('.rc-select') ||
+          event.target.closest('.select-option') ||
+          event.target.closest('.icon') ||
+          event.target.closest('svg') ||
+          event.target.closest('.dp-input') ||
+          event.target.closest('.dp__menu')
+
+        if (
+          !this.$refs.buttonIcon.$el.contains(event.target) &&
+          !this.$refs.boxContainer.$el.contains(event.target) &&
+          !isClickInSelect
+        ) {
+          this.isOptionsVisible = false
+          document.removeEventListener('click', this.handleClickOutside)
+        }
+      },
+      toggleOptions() {
+        this.isOptionsVisible = !this.isOptionsVisible
+        if (this.isOptionsVisible) {
+          document.addEventListener('click', this.handleClickOutside)
+        } else {
+          document.removeEventListener('click', this.handleClickOutside)
+        }
+      },
+      getNumberCount() {
+        return this.selectedSort.filter((item) => {
+          const hasColumn = !!item.column
+          const hasConstraint = !!item.constraint
+          const hasSelectedOptions =
+            item.column === 'updated'
+              ? !!item.selectedDate
+              : !!item.selectedOptions?.length
+          return hasColumn && hasConstraint && hasSelectedOptions
+        }).length
+      },
+      constraintOptions(index) {
+        const generalOptions = [
+          {
+            value: 'contains_any',
+            label: this.$gettext('contains_any'),
+          },
+          {
+            value: 'contains_all',
+            label: this.$gettext('contains_all'),
+          },
+          {
+            value: 'contains_none',
+            label: this.$gettext('contains_none'),
+          },
+        ]
+
+        const dateOptions = [
+          {
+            value: 'is_before',
+            label: this.$gettext('is_before'),
+          },
+          {
+            value: 'is_before_or_on',
+            label: this.$gettext('is_before_or_on'),
+          },
+          {
+            value: 'is_after',
+            label: this.$gettext('is_after'),
+          },
+          {
+            value: 'is_after_or_on',
+            label: this.$gettext('is_after_or_on'),
+          },
+        ]
+
+        if (this.selectedSort?.[index]?.column === 'updated') {
+          return dateOptions
+        }
+
+        if (this.selectedSort?.[index]?.column === 'project_status') {
+          return generalOptions.filter(
+            (option) => option.value !== 'contains_none'
+          )
+        }
+
+        return generalOptions
+      },
+      handleDatePickerClick() {
+        // Close all Select dropdowns. This is a workaround to close the dropdown when the date picker is clicked
+        this.$refs.selectSortDropdown.forEach((select) => {
+          select.closeDropdown()
+        })
+      },
+      getSelectedLabel({ type, value, index }) {
+        if (!value) return
+        if (type === 'column') {
+          const categoryName = this.filterCategories.find(
+            (option) => option.name === value
+          ).text
+          return this.$gettext(categoryName) || '-'
+        } else if (type === 'constraint') {
+          return this.constraintOptions(index).find(
+            (option) => option.value === value
+          ).label
+        } else if (type === 'selectedOptions') {
+          const selectedOptions =
+            this.selectedSort[index]?.selectedOptions || []
+          if (selectedOptions.length === 0) return this.$gettext('Options')
+
+          const optionsList = this.optionsList(index)
+          const selectedLabels = selectedOptions
+            .map((optionValue) => {
+              const option = optionsList.find(
+                (opt) => opt.value === optionValue
+              )
+              return option ? option.label : optionValue
+            })
+            .join(', ')
+
+          return selectedLabels.length > 15
+            ? `${selectedLabels.substring(0, 15)}...`
+            : selectedLabels
+        }
+      },
+      onSelectFilter({ type, value, index, constraint }) {
+        if (
+          type === 'constraint' &&
+          (value === 'contains_all' || value === 'contains_none')
+        ) {
+          const options = this.optionsList(index)
+          const allValues = options.map((option) => option.value)
+
+          this.$emit('on-filter-change', {
+            type: 'selectedOptions',
+            value: value === 'contains_all' ? allValues : [],
+            index,
+          })
+        }
+
+        this.$emit('on-filter-change', {
+          type,
+          value,
+          index,
+          constraint,
+        })
+        if (type === 'column') {
+          this.$emit('on-filter-change', {
+            type: 'constraint',
+            value: '',
+            index,
+          })
+        }
+        this.isOptionsVisible = true
+      },
+      removeItem(index) {
+        this.$emit('on-filter-change', {
+          type: 'remove',
+          index,
+        })
+      },
+      onAddFilter() {
+        this.$emit('on-add-filter', {
+          type: 'add',
+          index: this.selectedSort.length,
+        })
+      },
+      optionsList(index) {
+        if (!this.selectedSort[index].column) return []
+        const findIndex = this.filterCategories.findIndex(
+          (category) => category.name === this.selectedSort[index].column
+        )
+        const selectedItem = this.filterCategories[findIndex]
+        return this.filterCategories[findIndex].options.choices.map(
+          (option) => ({
+            ...option,
+            value: option[selectedItem.valueSelector],
+            label: option[selectedItem.labelSelector],
+          })
+        )
+      },
+    },
+  }
+</script>
+
+<style>
+  .dp-input {
+    height: 40px !important;
+    min-width: 150px !important;
+  }
+</style>