@eturnity/eturnity_reusable_components 8.19.1 → 8.19.2

package/src/components/filterComponent/viewSettings.vue

@@ -1,281 +0,0 @@
-<template>
-  <PageContainer>
-    <ButtonIcon
-      class="button-icon"
-      icon-name="settings"
-      :text="$gettext('view_settings')"
-      type="filter"
-      @click="toggleOptions"
-    />
-    <ButtonWrapper v-if="isOptionsVisible">
-      <BoxContainer class="box-container">
-        <BoxTitle>{{ $gettext('view_settings') }}</BoxTitle>
-        <SectionTitleContainer>
-          <SectionTitle>{{ $gettext('select_columns') }}</SectionTitle>
-          <MainButton
-            :text="$gettext('select_all')"
-            type="ghost"
-            @click="handleSelectAll"
-          />
-        </SectionTitleContainer>
-        <SelectOptionsContainer>
-          <SelectOption
-            v-for="column in columnsData"
-            :key="column.id"
-            :is-last-selected="column.selected && getSelectedCount() <= 1"
-            :is-selected="column.selected"
-            @click="handleSelectColumn(column)"
-          >
-            {{ $gettext(column.text) }}
-          </SelectOption>
-        </SelectOptionsContainer>
-        <LineSeparator v-if="detailedToggleOptions.length > 0" />
-        <SectionTitleContainer>
-          <SectionTitle>{{ $gettext('show_details') }}</SectionTitle>
-        </SectionTitleContainer>
-        <ToggleContainer>
-          <RCToggle
-            v-for="option in detailedToggleOptions"
-            :key="option.label"
-            :is-checked="option.value"
-            :label="$gettext(option.label)"
-            @on-toggle-change="$emit(option.onToggle, $event)"
-          />
-        </ToggleContainer>
-        <LineSeparator />
-        <SelectedContainer>
-          <SectionTitle>{{ $gettext('Shown') }}</SectionTitle>
-          <SelectComponent
-            ref="selectSortDropdown"
-            align-items="vertical"
-            class="sort-dropdown"
-            :dropdown-auto-close="true"
-            select-height="40px"
-            @click.stop
-            @input-change="onPageSizeChange($event)"
-          >
-            <template #selector>
-              <SelectedText>{{
-                pageSize + ' ' + $gettext('projects')
-              }}</SelectedText>
-            </template>
-            <template #dropdown>
-              <RcOption
-                v-for="option in shownOptions"
-                :key="option.label"
-                :value="option.value"
-              >
-                {{ $gettext(option.label) }}
-              </RcOption>
-            </template>
-          </SelectComponent>
-        </SelectedContainer>
-      </BoxContainer>
-    </ButtonWrapper>
-  </PageContainer>
-</template>
-
-<script>
-  import styled from 'vue3-styled-components'
-  import ButtonIcon from '../buttons/buttonIcon/index.vue'
-  import MainButton from '../buttons/mainButton/index.vue'
-  import RCToggle from '../inputs/toggle/index.vue'
-  import SelectComponent from '../inputs/select/index.vue'
-  import RcOption from '../inputs/select/option/index.vue'
-
-  const PageContainer = styled.div``
-
-  const ButtonWrapper = styled.div`
-    position: relative;
-  `
-
-  const BoxContainer = styled.div`
-    position: absolute;
-    z-index: 99;
-    top: 8px;
-    right: 0;
-    width: max-content;
-    max-width: 500px;
-    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 SectionTitleContainer = styled.div`
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    margin-bottom: 16px;
-    white-space: nowrap;
-    gap: 16px;
-  `
-
-  const SectionTitle = styled.div`
-    font-size: 12px;
-    font-weight: 500;
-    color: ${(props) => props.theme.semanticColors.teal[800]};
-  `
-
-  const SelectOptionsContainer = styled.div`
-    display: flex;
-    flex-direction: row;
-    flex-wrap: wrap;
-    gap: 8px;
-  `
-
-  const SelectAttrs = {
-    isSelected: Boolean,
-    isLastSelected: Boolean,
-  }
-  const SelectOption = styled('div', SelectAttrs)`
-    background-color: ${(props) =>
-      props.isSelected
-        ? props.theme.semanticColors.green[400]
-        : props.theme.colors.white};
-    color: ${(props) => props.theme.semanticColors.teal[800]};
-    border: 1px solid
-      ${(props) =>
-        props.isSelected
-          ? props.theme.semanticColors.green[400]
-          : props.theme.semanticColors.green[300]};
-    padding: 1px 10px;
-    font-size: 12px;
-    font-weight: 400;
-    border-radius: 4px;
-    cursor: ${(props) =>
-      props.isSelected && props.isLastSelected ? 'not-allowed' : 'pointer'};
-    user-select: none;
-  `
-
-  const LineSeparator = styled.div`
-    width: 100%;
-    height: 1px;
-    background-color: ${(props) => props.theme.semanticColors.grey[100]};
-    margin: 16px 0;
-  `
-
-  const ToggleContainer = styled.div`
-    display: flex;
-    flex-direction: column;
-    gap: 8px;
-  `
-
-  const SelectedText = styled.div`
-    font-size: 14px;
-    font-weight: 400;
-    color: ${(props) => props.theme.semanticColors.grey[800]};
-  `
-
-  const SelectedContainer = styled.div`
-    display: inline-flex;
-    gap: 8px;
-    flex-direction: column;
-  `
-
-  export default {
-    name: 'ViewSettings',
-    components: {
-      PageContainer,
-      ButtonIcon,
-      ButtonWrapper,
-      BoxContainer,
-      BoxTitle,
-      SectionTitleContainer,
-      SectionTitle,
-      MainButton,
-      SelectOptionsContainer,
-      SelectOption,
-      LineSeparator,
-      RCToggle,
-      ToggleContainer,
-      SelectComponent,
-      RcOption,
-      SelectedText,
-      SelectedContainer,
-    },
-    props: {
-      columnsData: {
-        type: Array,
-        required: true,
-      },
-      detailedToggleOptions: {
-        type: Array,
-        required: false,
-      },
-      pageSize: {
-        type: Number,
-        required: false,
-        default: 20,
-      },
-    },
-    emits: ['onSelectColumn', 'onSelectAllColumns'],
-    data() {
-      return {
-        isOptionsVisible: false,
-      }
-    },
-    computed: {
-      shownOptions() {
-        return [
-          { label: '20' + ' ' + this.$gettext('projects'), value: 20 },
-          { label: '50' + ' ' + this.$gettext('projects'), value: 50 },
-          { label: '100' + ' ' + this.$gettext('projects'), value: 100 },
-        ]
-      },
-    },
-    beforeUnmount() {
-      document.removeEventListener('click', this.handleClickOutside)
-    },
-    methods: {
-      getSelectedCount() {
-        return this.columnsData.filter((col) => col.selected).length
-      },
-      handleSelectAll() {
-        this.$emit('onSelectAllColumns')
-      },
-      handleSelectColumn(column) {
-        // Count currently selected columns
-        const selectedCount = this.getSelectedCount()
-
-        // Prevent deselecting if this is the last selected column
-        if (selectedCount <= 1 && column.selected) {
-          return
-        }
-
-        this.$emit('onSelectColumn', column)
-      },
-      toggleOptions() {
-        this.isOptionsVisible = !this.isOptionsVisible
-        if (this.isOptionsVisible) {
-          document.addEventListener('click', this.handleClickOutside)
-        } else {
-          document.removeEventListener('click', this.handleClickOutside)
-        }
-      },
-      handleClickOutside(event) {
-        const buttonIcon = this.$el.querySelector('.button-icon')
-        const boxContainer = this.$el.querySelector('.box-container')
-
-        if (
-          !buttonIcon.contains(event.target) &&
-          !boxContainer.contains(event.target)
-        ) {
-          this.isOptionsVisible = false
-          document.removeEventListener('click', this.handleClickOutside)
-        }
-      },
-      onPageSizeChange(value) {
-        console.log('value', value)
-        this.$emit('onPageSizeChange', value)
-      },
-    },
-  }
-</script>

package/src/components/filterComponent/viewSort.vue

@@ -1,330 +0,0 @@
-<template>
-  <PageContainer>
-    <ButtonIcon
-      class="button-icon"
-      icon-name="sorting"
-      :number-count="getNumberCount()"
-      :text="$gettext('sort')"
-      type="filter"
-      @click="toggleOptions"
-    />
-    <ButtonWrapper v-if="isOptionsVisible">
-      <BoxContainer class="box-container">
-        <BoxTitle>{{ $gettext('sort') }}</BoxTitle>
-        <SortOptionsContainer>
-          <template v-if="selectedSort.length > 0">
-            <SortDropdownContainer
-              v-for="(item, index) in selectedSort"
-              :key="index"
-            >
-              <SelectComponent
-                ref="selectSortDropdown"
-                align-items="vertical"
-                class="sort-dropdown"
-                :dropdown-auto-close="false"
-                select-height="40px"
-                @input-change="
-                  onSelectSort({
-                    type: 'column',
-                    value: $event,
-                    index: index,
-                  })
-                "
-              >
-                <template #selector>
-                  <SelectedText>{{
-                    getSelectedLabel({ type: 'column', value: item.column }) ||
-                    $gettext('category')
-                  }}</SelectedText>
-                </template>
-                <template #dropdown>
-                  <SelectOption
-                    v-for="(item, index) in sortOptions"
-                    :key="item.value"
-                    :value="item.value"
-                  >
-                    {{ item.label }}
-                  </SelectOption>
-                </template>
-              </SelectComponent>
-              <SelectComponent
-                ref="selectSortDropdown"
-                align-items="vertical"
-                class="sort-dropdown"
-                :dropdown-auto-close="false"
-                select-height="40px"
-                @input-change="
-                  onSelectSort({
-                    type: 'direction',
-                    value: $event,
-                    index: index,
-                  })
-                "
-              >
-                <template #selector>
-                  <SelectedText>{{
-                    getSelectedLabel({
-                      type: 'direction',
-                      value: item.direction,
-                    }) || $gettext('constraint')
-                  }}</SelectedText>
-                </template>
-                <template #dropdown>
-                  <SelectOption
-                    v-for="(item, index) in directionOptions"
-                    :key="item.value"
-                    :value="item.value"
-                  >
-                    {{ item.label }}
-                  </SelectOption>
-                </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>
-              <SelectComponent
-                ref="selectSortDropdown"
-                align-items="vertical"
-                class="sort-dropdown"
-                :dropdown-auto-close="false"
-                select-height="40px"
-                @input-change="
-                  onSelectSort({
-                    type: 'column',
-                    value: $event,
-                    index: 0,
-                  })
-                "
-              >
-                <template #selector>
-                  <SelectedText>{{ $gettext('category') }}</SelectedText>
-                </template>
-                <template #dropdown>
-                  <SelectOption
-                    v-for="(item, index) in sortOptions"
-                    :key="item.value"
-                    :value="item.value"
-                  >
-                    {{ item.label }}
-                  </SelectOption>
-                </template>
-              </SelectComponent>
-              <SelectComponent
-                ref="selectSortDropdown"
-                align-items="vertical"
-                class="sort-dropdown"
-                :dropdown-auto-close="false"
-                select-height="40px"
-                @input-change="
-                  onSelectSort({
-                    type: 'direction',
-                    value: $event,
-                    index: 0,
-                  })
-                "
-              >
-                <template #selector>
-                  <SelectedText>{{ $gettext('constraint') }}</SelectedText>
-                </template>
-                <template #dropdown>
-                  <SelectOption
-                    v-for="(item, index) in directionOptions"
-                    :key="item.value"
-                    :value="item.value"
-                  >
-                    {{ item.label }}
-                  </SelectOption>
-                </template>
-              </SelectComponent>
-            </SortDropdownContainer>
-          </template>
-        </SortOptionsContainer>
-      </BoxContainer>
-    </ButtonWrapper>
-  </PageContainer>
-</template>
-
-<script>
-  import styled from 'vue3-styled-components'
-  import ButtonIcon from '../buttons/buttonIcon/index.vue'
-  import SelectComponent from '../inputs/select/index.vue'
-  import SelectOption from '../inputs/select/option/index.vue'
-  import RCIcon from '../icon'
-  import theme from '../../assets/theme'
-
-  const PageContainer = styled.div``
-
-  const ButtonWrapper = styled.div`
-    position: relative;
-  `
-
-  const BoxContainer = styled.div`
-    position: absolute;
-    z-index: 99;
-    top: 8px;
-    right: 0;
-    width: max-content;
-    max-width: 500px;
-    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: flex;
-    flex-direction: row;
-    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;
-  `
-
-  export default {
-    name: 'ViewSettings',
-    components: {
-      PageContainer,
-      ButtonIcon,
-      ButtonWrapper,
-      BoxContainer,
-      BoxTitle,
-      SortOptionsContainer,
-      SortDropdownContainer,
-      SelectComponent,
-      SelectOption,
-      SelectedText,
-      RCIcon,
-      IconContainer,
-    },
-    props: {
-      sortOptions: {
-        type: Array,
-        required: true,
-      },
-      selectedSort: {
-        type: Array,
-        required: true,
-      },
-    },
-    data() {
-      return {
-        isOptionsVisible: false,
-      }
-    },
-    computed: {
-      directionOptions() {
-        return [
-          {
-            value: 'ascending',
-            label: this.$gettext('ascending'),
-          },
-          {
-            value: 'descending',
-            label: this.$gettext('descending'),
-          },
-        ]
-      },
-      theme() {
-        return theme
-      },
-    },
-    mounted() {},
-    beforeUnmount() {
-      document.removeEventListener('click', this.handleClickOutside)
-    },
-    methods: {
-      handleClickOutside(event) {
-        const buttonIcon = this.$el.querySelector('.button-icon')
-        const boxContainer = this.$el.querySelector('.box-container')
-        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')
-
-        if (
-          !buttonIcon.contains(event.target) &&
-          !boxContainer.contains(event.target) &&
-          !isClickInSelect
-        ) {
-          this.isOptionsVisible = false
-          document.removeEventListener('click', this.handleClickOutside)
-        }
-      },
-      getNumberCount() {
-        return this.selectedSort.filter((item) => {
-          const hasColumn = !!item.column
-          const hasDirection = !!item.direction
-          return hasColumn && hasDirection
-        }).length
-      },
-      toggleOptions() {
-        this.isOptionsVisible = !this.isOptionsVisible
-        if (this.isOptionsVisible) {
-          document.addEventListener('click', this.handleClickOutside)
-        } else {
-          document.removeEventListener('click', this.handleClickOutside)
-        }
-      },
-      getSelectedLabel({ type, value }) {
-        if (!value) return
-        if (type === 'column') {
-          return this.sortOptions.find((option) => option.value === value).label
-        } else if (type === 'direction') {
-          return this.directionOptions.find((option) => option.value === value)
-            .label
-        }
-      },
-      onSelectSort({ type, value, index }) {
-        this.$emit('on-sort-change', {
-          type,
-          value,
-          index,
-        })
-        this.isOptionsVisible = true
-      },
-      removeItem(index) {
-        this.$emit('on-sort-change', {
-          type: 'remove',
-          index,
-        })
-      },
-    },
-  }
-</script>