@eturnity/eturnity_reusable_components 8.19.2 → 8.19.4

package/src/components/filterComponent/viewSettings.vue

@@ -0,0 +1,281 @@
+<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

@@ -0,0 +1,330 @@
+<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>