Custom attributes mapping

frontend/src/modules/activity/config/filters/date/options.ts

@@ -3,7 +3,6 @@ import moment from 'moment';
 
 const options: SelectFilterOptionGroup[] = [
   {
-    label: '',
     options: [
       {
         label: 'Last 24 hours',

frontend/src/modules/activity/config/filters/platform/config.ts

@@ -9,7 +9,6 @@ const platform: MultiSelectFilterConfig = {
   options: {
     options: [
       {
-        label: '',
         options: [
           ...(CrowdIntegrations.configs.map((platform) => ({
             label: (platform as any).name,

frontend/src/modules/activity/config/filters/sentiment/options.ts

@@ -2,7 +2,6 @@ import { MultiSelectFilterOptionGroup } from '@/shared/modules/filters/types/fil
 
 const options: MultiSelectFilterOptionGroup[] = [
   {
-    label: '',
     options: [
       {
         label: 'Positive',

frontend/src/modules/member/config/filters/activeOn/config.ts

@@ -11,7 +11,6 @@ const activeOn: MultiSelectFilterConfig = {
   options: {
     options: [
       {
-        label: '',
         options: [
           ...(CrowdIntegrations.configs.map((platform) => ({
             label: (platform as any).name,

frontend/src/modules/member/config/filters/avgSentiment/options.ts

@@ -2,7 +2,6 @@ import { MultiSelectFilterOptionGroup } from '@/shared/modules/filters/types/fil
 
 const options: MultiSelectFilterOptionGroup[] = [
   {
-    label: '',
     options: [
       {
         label: 'Positive',

frontend/src/modules/member/config/filters/engagementLevel/options.ts

@@ -2,7 +2,6 @@ import { MultiSelectFilterOptionGroup } from '@/shared/modules/filters/types/fil
 
 const options: MultiSelectFilterOptionGroup[] = [
   {
-    label: '',
     options: [
       {
         label: 'Silent',

frontend/src/modules/member/config/filters/identities/config.ts

@@ -11,7 +11,6 @@ const identities: MultiSelectFilterConfig = {
   options: {
     options: [
       {
-        label: '',
         options: [
           ...(CrowdIntegrations.configs.map((platform) => ({
             label: (platform as any).name,

frontend/src/modules/member/config/saved-views/views/influential.ts

@@ -19,7 +19,7 @@ const influential: SavedView = {
     reach: {
       operator: '>=',
       value: 500,
-      exclude: false,
+      include: true,
     },
   },
 };

frontend/src/modules/member/config/saved-views/views/most-engaged.ts

@@ -18,7 +18,7 @@ const mostEngaged: SavedView = {
 
     engagementLevel: {
       value: ['fan', 'ultra'],
-      exclude: false,
+      include: true,
     },
   },
 };

frontend/src/modules/member/config/saved-views/views/new-and-active.ts

@@ -20,13 +20,13 @@ const newAndActive: SavedView = {
     joinedDate: {
       operator: 'after',
       value: moment().subtract(1, 'month').format('YYYY-MM-DD'),
-      exclude: false,
+      include: true,
     },
 
     lastActivityDate: {
       operator: 'after',
       value: moment().subtract(1, 'month').format('YYYY-MM-DD'),
-      exclude: false,
+      include: true,
     },
   },
 };

frontend/src/modules/member/config/saved-views/views/slipping-away.ts

@@ -19,13 +19,13 @@ const slippingAway: SavedView = {
 
     engagementLevel: {
       value: ['fan', 'ultra'],
-      exclude: false,
+      include: true,
     },
 
     lastActivityDate: {
       operator: 'after',
       value: moment().subtract(1, 'month').format('YYYY-MM-DD'),
-      exclude: false,
+      include: true,
     },
   },
 };

frontend/src/modules/member/pages/member-list-page.vue

@@ -53,10 +53,12 @@
 
       <cr-saved-views v-model="filters" :config="memberSavedViews" :views="memberViews" />
       <cr-filter
+        v-if="customAttributes"
         v-model="filters"
         :config="memberFilters"
         :search-config="memberSearchFilter"
         :saved-views-config="memberSavedViews"
+        :custom-config="customAttributes"
         @fetch="fetch($event)"
       />
       <!--      <app-member-list-table-->
@@ -86,7 +88,8 @@ import { memberSavedViews, memberViews } from '../config/saved-views/main';
 // import MemberListTabs from '@/modules/member/components/list/member-list-tabs.vue';
 
 const memberStore = useMemberStore();
-const { filters } = storeToRefs(memberStore);
+const { getMemberCustomAttributes } = memberStore;
+const { filters, customAttributes } = storeToRefs(memberStore);
 
 const membersCount = ref(0);
 const membersToMergeCount = ref(0);
@@ -142,6 +145,7 @@ const fetch = ({
 onMounted(() => {
   fetchMembersToMergeCount();
   doGetMembersCount();
+  getMemberCustomAttributes();
   (window as any).analytics.page('Members');
 });
 </script>

frontend/src/modules/member/store/pinia/actions.ts

@@ -1,2 +1,17 @@
+import { MemberService } from '@/modules/member/member-service';
+import { customAttributesService } from '@/shared/modules/filters/services/custom-attributes.service';
+import { FilterCustomAttribute } from '@/shared/modules/filters/types/FilterCustomAttribute';
+import { FilterConfig } from '@/shared/modules/filters/types/FilterConfig';
+import { MemberState } from '@/modules/member/store/pinia/state';
+
+const { buildFilterFromAttributes } = customAttributesService();
+
 export default {
+  getMemberCustomAttributes(this: MemberState): Promise<Record<string, FilterConfig>> {
+    return MemberService.fetchCustomAttributes()
+      .then(({ rows }: {rows: FilterCustomAttribute[]}) => {
+        this.customAttributes = buildFilterFromAttributes(rows);
+        return Promise.resolve(this.customAttributes);
+      });
+  },
 };

frontend/src/modules/member/store/pinia/state.ts

@@ -1,7 +1,8 @@
-import { Filter } from '@/shared/modules/filters/types/FilterConfig';
+import { Filter, FilterConfig } from '@/shared/modules/filters/types/FilterConfig';
 
-interface MemberState {
-  filters: Filter
+export interface MemberState {
+  filters: Filter,
+  customAttributes: Record<string, FilterConfig>
 }
 
 export default () => ({
@@ -17,4 +18,5 @@ export default () => ({
       order: 'descending',
     },
   } as Filter,
+  customAttributes: {},
 } as MemberState);

frontend/src/modules/organization/config/filters/activeOn/options.ts

@@ -2,7 +2,6 @@ import { MultiSelectFilterOptionGroup } from '@/shared/modules/filters/types/fil
 
 const options: MultiSelectFilterOptionGroup[] = [
   {
-    label: '',
     options: [
       {
         label: 'Github',

frontend/src/shared/modules/filters/components/Filter.vue

@@ -3,7 +3,7 @@
     <div class="flex justify-end pb-4">
       <cr-filter-search v-model="filters.search" :placeholder="props.searchConfig.placeholder">
         <template #append>
-          <cr-filter-dropdown v-model="filterList" :config="props.config" :custom-config="props.customConfig || {}" />
+          <cr-filter-dropdown v-model="filterList" :config="props.config" :custom-config="props.customConfig || {}" @open="open = $event" />
         </template>
       </cr-filter-search>
     </div>
@@ -16,7 +16,7 @@
         >
           {{ filters.relation }}
         </el-button>
-        <cr-filter-item v-model="filters[filter]" v-model:open="open" :config="config[filter]" class="mr-4" @remove="removeFilter(filter)" />
+        <cr-filter-item v-model="filters[filter]" v-model:open="open" :config="configuration[filter]" class="mr-4" @remove="removeFilter(filter)" />
       </template>
     </div>
   </div>
@@ -66,6 +66,11 @@ const filters = computed<Filter>({
   },
 });
 
+const configuration = computed(() => ({
+  ...props.config,
+  ...props.customConfig,
+}));
+
 const filterList = ref<string[]>([]);
 
 const switchOperator = () => {

frontend/src/shared/modules/filters/components/FilterDropdown.vue

@@ -19,46 +19,51 @@
           </template>
         </el-input>
       </div>
-      <template v-for="(configuration, key) in props.config" :key="key">
+      <el-dropdown-item
+        v-for="{ key, label } in filteredOptions"
+        :key="key"
+        :class="{ 'is-selected': isSelected(key) }"
+        :disabled="isSelected(key)"
+        @click="add(key)"
+      >
+        <div class="flex justify-between w-full">
+          <span>{{ label }}</span>
+          <i :class="isSelected(key) ? 'opacity-100' : 'opacity-0'" class="ri-check-line !text-brand-600 !mr-0 ml-1" />
+        </div>
+      </el-dropdown-item>
+      <!-- CUSTOM ATTRIBUTES -->
+      <template v-if="props.customConfig && Object.keys(props.customConfig).length > 0 && filteredCustomOptions.length > 0">
+        <div
+          class="el-dropdown-title"
+        >
+          Custom Attributes
+        </div>
         <el-dropdown-item
-          v-if="matchesSearch(configuration.label, search)"
+          v-for="{ key, label } in filteredCustomOptions"
+          :key="key"
           :class="{ 'is-selected': isSelected(key) }"
-          :disabled="isSelected(key)"
           @click="add(key)"
         >
           <div class="flex justify-between w-full">
-            <span>{{ configuration.label }}</span>
+            <span>{{ label }}</span>
             <i :class="isSelected(key) ? 'opacity-100' : 'opacity-0'" class="ri-check-line !text-brand-600 !mr-0 ml-1" />
           </div>
         </el-dropdown-item>
       </template>
-      <!-- CUSTOM ATTRIBUTES -->
-      <template v-if="props.customConfig && Object.keys(props.customConfig).length > 0">
-        <div
 
-          class="el-dropdown-title"
-        >
-          Custom Attributes
-        </div>
-        <template v-for="(configuration, key) in props.customConfig" :key="key">
-          <el-dropdown-item
-            v-if="matchesSearch(configuration.label, search)"
-            :class="{ 'is-selected': isSelected(key) }"
-            @click="add(key)"
-          >
-            <div class="flex justify-between w-full">
-              <span>{{ configuration.label }}</span>
-              <i :class="isSelected(key) ? 'opacity-100' : 'opacity-0'" class="ri-check-line !text-brand-600 !mr-0 ml-1" />
-            </div>
-          </el-dropdown-item>
-        </template>
-      </template>
+      <div
+        v-if="filteredOptions.length === 0 && filteredCustomOptions.length === 0"
+        class="el-dropdown-title"
+      >
+        No results
+      </div>
     </template>
   </el-dropdown>
 </template>
 
 <script setup lang="ts">
 import {
+  computed,
   defineProps, ref,
 } from 'vue';
 import { FilterConfig } from '@/shared/modules/filters/types/FilterConfig';
@@ -69,18 +74,33 @@ const props = defineProps<{
   modelValue: string[]
 }>();
 
-const emit = defineEmits<{(e: 'update:modelValue', value: string[])}>();
+const emit = defineEmits<{(e: 'update:modelValue', value: string[]), (e: 'open', value: string)}>();
 
 const search = ref('');
 
-const matchesSearch = (label: string, search: string): boolean => label.toLowerCase().includes(search.toLowerCase());
+const matchesSearch = (label: string, query: string): boolean => label.toLowerCase().includes(query.toLowerCase());
 const isSelected = (key: string): boolean => props.modelValue.includes(key);
 
+const options = computed(() => Object.entries(props.config).map(([key, configuration]: [string, FilterConfig]) => ({
+  ...configuration,
+  key,
+})));
+
+const customOptions = computed(() => Object.entries(props.customConfig).map(([key, configuration]: [string, FilterConfig]) => ({
+  ...configuration,
+  key,
+})));
+
+const filteredOptions = computed(() => options.value.filter((filter) => matchesSearch(filter.label, search.value)));
+
+const filteredCustomOptions = computed(() => customOptions.value.filter((filter) => matchesSearch(filter.label, search.value)));
+
 const add = (key: string) => {
   if (isSelected(key)) {
     return;
   }
   search.value = '';
+  emit('open', key);
   emit('update:modelValue', [...props.modelValue, key]);
 };
 

frontend/src/shared/modules/filters/components/filterTypes/BooleanFilter.vue

@@ -1,6 +1,6 @@
 <template>
   <div v-if="form">
-    Boolean
+    Boolean filter
     <!-- TODO: prepare boolean filter -->
   </div>
 </template>
@@ -26,7 +26,7 @@ const form = computed({
 
 const defaultForm: BooleanFilterValue = {
   value: true,
-  exclude: false,
+  include: true,
 };
 
 const rules: any = {

frontend/src/shared/modules/filters/components/filterTypes/DateFilter.vue

@@ -1,6 +1,6 @@
 <template>
   <div v-if="form">
-    Date
+    Date filter
     <!-- TODO: prepare date filter -->
   </div>
 </template>
@@ -27,7 +27,7 @@ const form = computed({
 const defaultForm: DateFilterValue = {
   operator: '',
   value: '',
-  exclude: false,
+  include: true,
 };
 
 const rules: any = {

frontend/src/shared/modules/filters/components/filterTypes/MultiSelectFilter.vue

@@ -29,7 +29,7 @@ const form = computed({
 
 const defaultForm: MultiSelectFilterValue = {
   value: [],
-  exclude: false,
+  include: true,
 };
 
 const rules: any = {

frontend/src/shared/modules/filters/components/filterTypes/NumberFilter.vue

@@ -1,5 +1,6 @@
 <template>
   <div v-if="form">
+    Number Filter
     <el-input v-model="form.value" type="number" placeholder="Pick number" />
   </div>
 </template>
@@ -26,7 +27,7 @@ const form = computed<NumberFilterValue>({
 const defaultForm: NumberFilterValue = {
   value: '',
   operator: 'eq',
-  exclude: false,
+  include: true,
 };
 
 const rules: any = {

frontend/src/shared/modules/filters/components/filterTypes/SelectFilter.vue

@@ -29,7 +29,7 @@ const form = computed({
 
 const defaultForm: SelectFilterValue = {
   value: '',
-  exclude: false,
+  include: true,
 };
 
 const rules: any = {