Custom views

frontend/components.d.ts

@@ -14,10 +14,7 @@ declare module '@vue/runtime-core' {
     ElButton: typeof import('element-plus/es')['ElButton']
     ElButtonGroup: typeof import('element-plus/es')['ElButtonGroup']
     ElCard: typeof import('element-plus/es')['ElCard']
-    ElCarousel: typeof import('element-plus/es')['ElCarousel']
-    ElCarouselItem: typeof import('element-plus/es')['ElCarouselItem']
     ElCheckbox: typeof import('element-plus/es')['ElCheckbox']
-    ElCol: typeof import('element-plus/es')['ElCol']
     ElCollapse: typeof import('element-plus/es')['ElCollapse']
     ElCollapseItem: typeof import('element-plus/es')['ElCollapseItem']
     ElContainer: typeof import('element-plus/es')['ElContainer']
@@ -49,12 +46,10 @@ declare module '@vue/runtime-core' {
     ElTabPane: typeof import('element-plus/es')['ElTabPane']
     ElTabs: typeof import('element-plus/es')['ElTabs']
     ElTag: typeof import('element-plus/es')['ElTag']
-    ElTextarea: typeof import('element-plus/es')['ElTextarea']
     ElTimeline: typeof import('element-plus/es')['ElTimeline']
     ElTimelineItem: typeof import('element-plus/es')['ElTimelineItem']
     ElTimeSelect: typeof import('element-plus/es')['ElTimeSelect']
     ElTooltip: typeof import('element-plus/es')['ElTooltip']
-    ElUpload: typeof import('element-plus/es')['ElUpload']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
   }

frontend/index.html

@@ -70,7 +70,7 @@
       if (!segmentKey || segmentKey.startsWith('%VUE_APP_SEGMENT_KEY')) {
         segmentKey = 'CROWD_VUE_APP_SEGMENT_KEY'
       }
-      
+
       !(function() {
         var analytics = (window.analytics =
                 window.analytics || [])
@@ -136,7 +136,7 @@
             analytics.load(segmentKey)
           }
       })()
-      
+
 
       let pendoKey = '%VUE_APP_PENDO_KEY%'
 

frontend/package.json

@@ -61,6 +61,7 @@
     "vite": "^4.4.7",
     "vue": "^3.3.1",
     "vue-3-sanitize": "^0.1.4",
+    "vue-draggable-next": "^2.2.1",
     "vue-grid-layout": "3.0.0-beta1",
     "vue-json-pretty": "^2.2.4",
     "vue-router": "^4.1.6",

frontend/src/assets/scss/tooltip.scss

@@ -12,10 +12,11 @@
     width: max-content;
     max-width: 20rem;
     display: block;
-    @apply bg-gray-900 text-white rounded-md text-xs leading-5 py-0.5 px-1.5 opacity-0 transition invisible;
+    padding: 5px 6px;
+    @apply bg-gray-900 text-white rounded-md text-2xs leading-5 opacity-0 transition invisible;
   }
 
   &:hover:before {
     @apply opacity-100 visible;
   }
-}
+}

frontend/src/modules/dashboard/components/dashboard-members.vue

@@ -7,7 +7,7 @@
       :total="members.total"
       :route="{
         name: 'member',
-        query: filterQueryService().setQuery(allMembers.filter),
+        query: filterQueryService().setQuery(allContacts.config),
       }"
       button-title="All contacts"
       report-name="Members report"
@@ -92,7 +92,7 @@
                 :to="{
                   name: 'member',
                   query: filterQueryService().setQuery({
-                    ...allMembers.filter,
+                    ...allContacts.config,
                     joinedDate: {
                       value: periodRange,
                       operator: 'between',
@@ -180,7 +180,7 @@
                 :to="{
                   name: 'member',
                   query: filterQueryService().setQuery({
-                    ...allMembers.filter,
+                    ...allContacts.config,
                     lastActivityDate: {
                       value: periodRange,
                       operator: 'between',
@@ -217,8 +217,7 @@ import { DAILY_GRANULARITY_FILTER } from '@/modules/widget/widget-constants';
 import AppDashboardMemberItem from '@/modules/dashboard/components/member/dashboard-member-item.vue';
 import AppDashboardCount from '@/modules/dashboard/components/dashboard-count.vue';
 import { filterQueryService } from '@/shared/modules/filters/services/filter-query.service';
-import newAndActive from '@/modules/member/config/saved-views/views/new-and-active';
-import allMembers from '@/modules/member/config/saved-views/views/all-members';
+import allContacts from '@/modules/member/config/saved-views/views/all-contacts';
 
 export default {
   name: 'AppDashboardMember',
@@ -237,8 +236,7 @@ export default {
       activeMembersCount,
       formatDateToTimeAgo,
       filterQueryService,
-      newAndActive,
-      allMembers,
+      allContacts,
     };
   },
   computed: {

frontend/src/modules/dashboard/components/dashboard-organizations.vue

@@ -7,7 +7,7 @@
       :total="organizations.total"
       :route="{
         name: 'organization',
-        query: filterQueryService().setQuery(allOrganizations.filter),
+        query: filterQueryService().setQuery(allOrganizations.config),
       }"
       button-title="All organizations"
       report-name="Organizations report"
@@ -79,7 +79,7 @@
                 :to="{
                   name: 'organization',
                   query: filterQueryService().setQuery({
-                    ...allOrganizations.filter,
+                    ...allOrganizations.config,
                     joinedDate: {
                       value: periodRange,
                       operator: 'between',
@@ -159,7 +159,7 @@
                 :to="{
                   name: 'organization',
                   query: filterQueryService().setQuery({
-                    ...allOrganizations.filter,
+                    ...allOrganizations.config,
                     lastActivityDate: {
                       value: periodRange,
                       operator: 'between',

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

@@ -1,25 +1,32 @@
 import { SavedView, SavedViewsConfig } from '@/shared/modules/saved-views/types/SavedViewsConfig';
-import allMembers from './views/all-members';
+import allContacts from './views/all-contacts';
 import newAndActive from './views/new-and-active';
 import slippingAway from './views/slipping-away';
 import mostEngaged from './views/most-engaged';
 import influential from './views/influential';
 import teamMembers from './views/team-members';
 
-import bot from './settings/bot';
-import teamMember from './settings/teamMember';
-import organization from './settings/organization';
+import bot from './settings/bot/config';
+import teamMember from './settings/teamMember/config';
+import organization from './settings/organization/config';
 
 export const memberSavedViews: SavedViewsConfig = {
-  defaultView: allMembers,
+  defaultView: allContacts,
   settings: {
-    bot,
     teamMember,
+    bot,
     organization,
   },
+  sorting: {
+    displayName: 'Contact',
+    activityCount: '# of activities',
+    score: 'Engagement level',
+    lastActive: 'Last activity',
+    joinedAt: 'Joined date',
+    numberOfOpenSourceContributions: '# of OSS contributions',
+  },
 };
 
-// Hardcoded views until we have backend done for it
 export const memberViews: SavedView[] = [
   newAndActive,
   slippingAway,

frontend/src/modules/member/config/saved-views/settings/bot/MemberBotSetting.vue

@@ -0,0 +1,41 @@
+<template>
+  <article>
+    <p class="text-xs font-semibold leading-5 mb-3">
+      Bot contacts visibility
+    </p>
+    <el-radio-group v-model="value">
+      <el-radio :label="IncludeEnum.EXCLUDE" class="!h-5">
+        <span class="text-xs">Exclude bot contacts</span>
+      </el-radio>
+      <el-radio :label="IncludeEnum.INCLUDE" class="!h-5">
+        <span class="text-xs">Include bot contacts</span>
+      </el-radio>
+    </el-radio-group>
+  </article>
+</template>
+
+<script setup lang="ts">
+import { IncludeEnum } from '@/modules/member/config/saved-views/settings/common/types/IncludeEnum';
+import { computed } from 'vue';
+
+const props = defineProps<{
+  modelValue: IncludeEnum,
+}>();
+
+const emit = defineEmits<{(e: 'update:modelValue', value: IncludeEnum): any }>();
+
+const value = computed<IncludeEnum>({
+  get() {
+    return props.modelValue;
+  },
+  set(val: IncludeEnum) {
+    emit('update:modelValue', val);
+  },
+});
+</script>
+
+<script lang="ts">
+export default {
+  name: 'CrMemberTeamMemberSetting',
+};
+</script>

frontend/src/modules/member/config/saved-views/settings/bot.ts → frontend/src/modules/member/config/saved-views/settings/bot/config.ts

@@ -1,8 +1,11 @@
 import { SavedViewsSetting } from '@/shared/modules/saved-views/types/SavedViewsConfig';
-import { IncludeEnum } from '@/modules/member/config/saved-views/settings/types/IncludeEnum';
+import { IncludeEnum } from '@/modules/member/config/saved-views/settings/common/types/IncludeEnum';
 import { includeFilterRenderer } from '@/modules/member/config/saved-views/settings/common/includeFilterRenderer';
+import MemberBotSetting from './MemberBotSetting.vue';
 
 const bot: SavedViewsSetting<IncludeEnum> = {
+  inSettings: true,
+  settingsComponent: MemberBotSetting,
   defaultValue: IncludeEnum.EXCLUDE,
   queryUrlParser(value: string): IncludeEnum {
     return value as IncludeEnum;

frontend/src/modules/member/config/saved-views/settings/common/includeFilterRenderer.ts

@@ -1,4 +1,4 @@
-import { IncludeEnum } from '@/modules/member/config/saved-views/settings/types/IncludeEnum';
+import { IncludeEnum } from '@/modules/member/config/saved-views/settings/common/types/IncludeEnum';
 
 export const includeFilterRenderer = (property: string, value: IncludeEnum) => {
   if (value === IncludeEnum.FILTER) {

frontend/src/modules/member/config/saved-views/settings/organization.ts → frontend/src/modules/member/config/saved-views/settings/organization/config.ts

@@ -1,8 +1,9 @@
 import { SavedViewsSetting } from '@/shared/modules/saved-views/types/SavedViewsConfig';
 import { includeFilterRenderer } from '@/modules/member/config/saved-views/settings/common/includeFilterRenderer';
-import { IncludeEnum } from '@/modules/member/config/saved-views/settings/types/IncludeEnum';
+import { IncludeEnum } from '@/modules/member/config/saved-views/settings/common/types/IncludeEnum';
 
 const organization: SavedViewsSetting<IncludeEnum> = {
+  inSettings: false,
   defaultValue: IncludeEnum.EXCLUDE,
   queryUrlParser(value: string): IncludeEnum {
     return value as IncludeEnum;

frontend/src/modules/member/config/saved-views/settings/teamMember/MemberTeamMemberSetting.vue

@@ -0,0 +1,44 @@
+<template>
+  <article>
+    <p class="text-xs font-semibold leading-5 mb-3">
+      Team contacts visibility
+    </p>
+    <el-radio-group v-model="value">
+      <el-radio :label="IncludeEnum.EXCLUDE" class="!h-5">
+        <span class="text-xs">Exclude team contacts</span>
+      </el-radio>
+      <el-radio :label="IncludeEnum.INCLUDE" class="!h-5">
+        <span class="text-xs">Include team contacts</span>
+      </el-radio>
+      <el-radio :label="IncludeEnum.FILTER" class="!h-5">
+        <span class="text-xs">Team contacts only</span>
+      </el-radio>
+    </el-radio-group>
+  </article>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import { IncludeEnum } from '@/modules/member/config/saved-views/settings/common/types/IncludeEnum';
+
+const props = defineProps<{
+  modelValue: IncludeEnum,
+}>();
+
+const emit = defineEmits<{(e: 'update:modelValue', value: IncludeEnum): any }>();
+
+const value = computed<IncludeEnum>({
+  get() {
+    return props.modelValue;
+  },
+  set(val: IncludeEnum) {
+    emit('update:modelValue', val);
+  },
+});
+</script>
+
+<script lang="ts">
+export default {
+  name: 'CrMemberTeamMemberSetting',
+};
+</script>

frontend/src/modules/member/config/saved-views/settings/teamMember.ts → frontend/src/modules/member/config/saved-views/settings/teamMember/config.ts

@@ -1,8 +1,11 @@
 import { SavedViewsSetting } from '@/shared/modules/saved-views/types/SavedViewsConfig';
 import { includeFilterRenderer } from '@/modules/member/config/saved-views/settings/common/includeFilterRenderer';
-import { IncludeEnum } from '@/modules/member/config/saved-views/settings/types/IncludeEnum';
+import { IncludeEnum } from '@/modules/member/config/saved-views/settings/common/types/IncludeEnum';
+import MemberTeamMemberSetting from './MemberTeamMemberSetting.vue';
 
 const teamMember: SavedViewsSetting<IncludeEnum> = {
+  inSettings: true,
+  settingsComponent: MemberTeamMemberSetting,
   defaultValue: IncludeEnum.EXCLUDE,
   queryUrlParser(value: string): IncludeEnum {
     return value as IncludeEnum;

frontend/src/modules/member/config/saved-views/views/all-members.ts → frontend/src/modules/member/config/saved-views/views/all-contacts.ts

@@ -1,9 +1,11 @@
 import { SavedView } from '@/shared/modules/saved-views/types/SavedViewsConfig';
 
-const allMembers: SavedView = {
+const allContacts: SavedView = {
   id: 'all-contacts',
-  label: 'All contacts',
-  filter: {
+  name: 'All contacts',
+  placement: 'member',
+  visibility: 'tenant',
+  config: {
     search: '',
     relation: 'and',
     order: {
@@ -18,4 +20,4 @@ const allMembers: SavedView = {
   },
 };
 
-export default allMembers;
+export default allContacts;

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

@@ -2,8 +2,10 @@ import { SavedView } from '@/shared/modules/saved-views/types/SavedViewsConfig';
 
 const influential: SavedView = {
   id: 'influential',
-  label: 'Influential',
-  filter: {
+  name: 'Influential',
+  placement: 'member',
+  visibility: 'tenant',
+  config: {
     search: '',
     relation: 'and',
     order: {
@@ -15,7 +17,6 @@ const influential: SavedView = {
       teamMember: 'exclude',
       organization: 'exclude',
     },
-
     reach: {
       operator: 'gte',
       value: 500,