@eturnity/eturnity_reusable_components 8.16.2--EPDM-14330.6 → 8.16.2--EPDM-14330.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eturnity/eturnity_reusable_components",
-  "version": "8.16.2--EPDM-14330.6",
+  "version": "8.16.2--EPDM-14330.8",
   "files": [
     "dist",
     "src"

package/src/components/buttons/buttonIcon/index.vue

@@ -34,6 +34,9 @@
       <ButtonContainer :button-size="buttonSize">
         {{ text }}
       </ButtonContainer>
+      <NumberContainer v-if="numberCount">
+        <NumberText>{{ numberCount }}</NumberText>
+      </NumberContainer>
     </ButtonWrapper>
   </PageContainer>
 </template>
@@ -68,7 +71,7 @@
   }
   const ButtonWrapper = styled('div', ButtonAttrs)`
     display: grid;
-    grid-template-columns: auto 1fr;
+    grid-template-columns: auto 1fr auto;
     font-size: ${(props) =>
       props.theme?.mainButton?.size?.[props.buttonSize]?.fontSize};
     color: ${(props) => {
@@ -159,6 +162,25 @@
     }};
   `
 
+  const NumberContainer = styled.div`
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-right: 10px;
+  `
+
+  const NumberText = styled.div`
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 12px;
+    font-weight: 400;
+    color: ${(props) => props.theme.semanticColors.purple[500]};
+    padding: 3px 8px;
+    border-radius: 8px;
+    background-color: ${(props) => props.theme.semanticColors.purple[50]};
+  `
+
   export default {
     name: 'ButtonIcon',
     components: {
@@ -167,6 +189,8 @@
       ButtonWrapper,
       IconContainer,
       Icon,
+      NumberContainer,
+      NumberText,
     },
     props: {
       type: {
@@ -241,6 +265,11 @@
         type: Boolean,
         default: false,
       },
+      numberCount: {
+        type: Number,
+        required: false,
+        default: null,
+      },
     },
     data() {
       return {

package/src/components/filterComponent/viewFilter.vue

@@ -5,6 +5,7 @@
       class="button-icon"
       fill-type="stroke"
       icon-name="filter"
+      :number-count="getNumberCount()"
       :text="$gettext('filter')"
       type="filter"
       @click="toggleOptions"
@@ -438,6 +439,17 @@
           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 = [
           {
@@ -472,10 +484,17 @@
             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
       },
       getSelectedLabel({ type, value, index }) {

package/src/components/filterComponent/viewSettings.vue

@@ -42,6 +42,34 @@
             @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>
@@ -52,6 +80,8 @@
   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``
 
@@ -138,6 +168,18 @@
     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: {
@@ -154,6 +196,10 @@
       LineSeparator,
       RCToggle,
       ToggleContainer,
+      SelectComponent,
+      RcOption,
+      SelectedText,
+      SelectedContainer,
     },
     props: {
       columnsData: {
@@ -164,6 +210,11 @@
         type: Array,
         required: false,
       },
+      pageSize: {
+        type: Number,
+        required: false,
+        default: 20,
+      },
     },
     emits: ['onSelectColumn', 'onSelectAllColumns'],
     data() {
@@ -171,8 +222,14 @@
         isOptionsVisible: false,
       }
     },
-    mounted() {
-      // Remove the mounted event listener since we now handle it in toggleOptions
+    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)
@@ -215,6 +272,10 @@
           document.removeEventListener('click', this.handleClickOutside)
         }
       },
+      onPageSizeChange(value) {
+        console.log('value', value)
+        this.$emit('onPageSizeChange', value)
+      },
     },
   }
 </script>

package/src/components/filterComponent/viewSort.vue

@@ -3,6 +3,7 @@
     <ButtonIcon
       class="button-icon"
       icon-name="sorting"
+      :number-count="getNumberCount()"
       :text="$gettext('sort')"
       type="filter"
       @click="toggleOptions"
@@ -286,6 +287,13 @@
           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) {

package/src/components/inputs/searchInput/index.vue

@@ -56,7 +56,7 @@
   const InputContainer = styled('input', inputAttrs)`
     border: 1px solid ${(props) => props.theme.colors.grey4};
     padding: ${(props) =>
-      props.isFilter ? '7px 30px 7px 10px' : '11px 30px 11px 10px'};
+      props.isFilter ? '8px 30px 8px 10px' : '11px 30px 11px 10px'};
     border-radius: 4px;
     font-size: 13px;
     color: ${(props) => props.theme.colors.black};