Clean up filters code

frontend/package.json

@@ -43,7 +43,6 @@
     "eslint-import-resolver-alias": "^1.1.2",
     "eslint-plugin-import": "^2.27.5",
     "file-saver": "2.0.2",
-    "filesize": "6.1.0",
     "lodash": "^4.17.21",
     "logrocket": "^3.0.1",
     "logrocket-vuex": "^0.0.3",

frontend/src/assets/scss/filter.scss

@@ -26,3 +26,161 @@
     @apply text-2xs;
   }
 }
+
+.filter-dropdown {
+  &-search .el-input__wrapper {
+    border: none !important;
+    @apply shadow-none;
+    &.is-focus,
+    &:hover {
+      @apply shadow-none;
+    }
+  }
+
+  &-trigger.el-button,
+  &-trigger.el-button:focus:not(.is-expanded),
+  .el-input-group__append &-trigger.el-button,
+  .el-input-group__append
+    &-trigger.el-button:focus:not(.is-expanded) {
+    @apply h-10 flex justify-center items-center py-0 px-4 bg-white border border-l-0 rounded-l-none border-gray-300 outline-none text-gray-600;
+    transition: all 0.2s ease;
+
+    &.is-expanded,
+    &:hover,
+    &:active {
+      @apply bg-gray-100 outline-none text-gray-600 border-gray-300;
+    }
+  }
+}
+
+.filter-list-operator {
+  @apply text-xs mb-4;
+
+  &-btn.el-button {
+    @apply h-8 flex items-center p-2 bg-white border border-gray-300 outline-none text-gray-600 text-xs;
+    transition: all 0.2s ease;
+
+    &.is-expanded,
+    &:hover,
+    &:active,
+    &:focus,
+    &:visited {
+      @apply bg-gray-100 outline-none text-gray-600 border-gray-300;
+    }
+  }
+
+  &-option {
+    @apply px-3 py-2.5;
+  }
+}
+
+.filter-list {
+  @apply flex items-center -mx-2 mb-2 flex-wrap;
+}
+
+.filter-type-keywords {
+  @apply mb-3;
+  .el-keywords-input-wrapper {
+    @apply h-8 min-h-8;
+    &,
+    &:hover,
+    &.is-focus {
+      @apply bg-gray-50 shadow-none border-none;
+    }
+  }
+}
+
+.filter-type-number {
+  input[type='number']::-webkit-inner-spin-button,
+  input[type='number']::-webkit-outer-spin-button {
+    -webkit-appearance: none;
+    appearance: none;
+    margin: 0;
+  }
+}
+
+.filter-type-select-async {
+  @apply -m-2;
+  &-input {
+    @apply border-b border-gray-200 p-2;
+  }
+  .input-wrapper {
+    @apply min-h-8 bg-gray-50 shadow-none border-none rounded-md max-h-12 overflow-auto;
+    .el-tag {
+      margin: 4px 0 4px 4px;
+    }
+    input {
+      &,
+      &:hover,
+      &:focus {
+        @apply bg-gray-50 shadow-none border-none outline-none h-full px-2 min-h-8;
+      }
+    }
+  }
+}
+
+.filter-type-select {
+  &-input {
+    @apply border-b border-gray-200 px-2 pb-2 -ml-2 -mr-2 mb-2;
+  }
+  .input-wrapper {
+    @apply min-h-8 bg-gray-50 shadow-none border-none rounded-md max-h-12 overflow-auto;
+    .el-tag {
+      margin: 4px 0 4px 4px;
+    }
+    input {
+      &,
+      &:hover,
+      &:focus {
+        @apply bg-gray-50 shadow-none border-none outline-none h-full px-2 min-h-8;
+      }
+    }
+  }
+  &-option.group {
+    @apply justify-between;
+
+    &.is-selected,
+    &:focus.is-selected {
+      i {
+        @apply mr-0;
+      }
+    }
+  }
+}
+
+.filter-type-select {
+  &-option {
+    @apply flex items-center text-black px-4 py-3 text-xs cursor-pointer relative;
+    border-radius: 4px;
+
+    &:not(:last-of-type) {
+      @apply mb-1;
+    }
+
+    i {
+      @apply mr-2;
+    }
+
+    i:not(.ri-delete-bin-line) {
+      @apply text-gray-400;
+    }
+
+    &:focus,
+    &:not(.is-disabled):hover,
+    &:not(.is-disabled):focus {
+      @apply text-black bg-gray-50;
+    }
+
+    &.is-disabled {
+      @apply cursor-not-allowed;
+    }
+
+    &.is-selected,
+    &:focus.is-selected {
+      @apply relative bg-brand-50;
+      i {
+        @apply mr-3 text-brand-600;
+      }
+    }
+  }
+}

frontend/src/integrations/linkedin/config.js

@@ -19,7 +19,7 @@ export default {
     entertainment: 'Funny',
   },
   premium: true,
-  url: (username) => (!username.includes('private-') ? `https://linkedin.com/in/${username}` : null),
+  url: (username) => (!username?.includes('private-') ? `https://linkedin.com/in/${username}` : null),
   chartColor: '#2867B2',
   showProfileLink: true,
   activityDisplay: {

frontend/src/modules/activity/activity-model.js

@@ -1,12 +1,6 @@
 import { i18n, init as i18nInit } from '@/i18n';
-import IdField from '@/shared/fields/id-field';
 import { GenericModel } from '@/shared/model/generic-model';
-import DateTimeRangeField from '@/shared/fields/date-time-range-field';
-import DateTimeField from '@/shared/fields/date-time-field';
-import StringField from '@/shared/fields/string-field';
-import BooleanField from '@/shared/fields/boolean-field';
 import { MemberField } from '@/modules/member/member-field';
-import JsonField from '@/shared/fields/json-field';
 import SearchField from '@/shared/fields/search-field';
 import SentimentField from '@/shared/fields/sentiment-field';
 import ActivityDateField from '@/shared/fields/activity-date-field';
@@ -21,39 +15,6 @@ function label(name) {
 i18nInit();
 
 const fields = {
-  id: new IdField('id', label('id')),
-  title: new StringField('title', label('title')),
-  body: new StringField('body', label('body')),
-  channel: new StringField('channel', label('channel')),
-  url: new StringField('url', label('url')),
-  timestamp: new DateTimeField(
-    'timestamp',
-    label('timestamp'),
-    {
-      required: true,
-    },
-  ),
-  attributes: new JsonField(
-    'attributes',
-    label('attributes'),
-  ),
-  isContribution: new BooleanField(
-    'isContribution',
-    label('isContribution'),
-    {},
-  ),
-  updatedAt: new DateTimeField(
-    'updatedAt',
-    label('updatedAt'),
-  ),
-  createdAtRange: new DateTimeRangeField(
-    'createdAtRange',
-    label('createdAtRange'),
-  ),
-  timestampRange: new DateTimeRangeField(
-    'timestampRange',
-    label('timestampRange'),
-  ),
   search: new SearchField('search', label('search'), {
     fields: ['title', 'body'],
   }),

frontend/src/modules/activity/activity-module.js

@@ -1,7 +1,5 @@
 import routes from '@/modules/activity/activity-routes';
-import store from '@/modules/activity/store';
 
 export default {
   routes,
-  store,
 };