fix: implemented liked_by in all listviews

frontend/src/components/ListViews/CallLogsListView.vue

@@ -10,7 +10,24 @@
     }"
     row-key="name"
   >
-    <ListHeader class="mx-5" @columnWidthUpdated="emit('columnWidthUpdated')" />
+    <ListHeader class="mx-5" @columnWidthUpdated="emit('columnWidthUpdated')">
+      <ListHeaderItem
+        v-for="column in columns"
+        :key="column.key"
+        :item="column"
+        @columnWidthUpdated="emit('columnWidthUpdated', column)"
+      >
+        <Button
+          v-if="column.key == '_liked_by'"
+          variant="ghosted"
+          class="!h-4"
+          :class="isLikeFilterApplied ? 'fill-red-500' : 'fill-white'"
+          @click="() => emit('applyLikeFilter')"
+        >
+          <HeartIcon class="h-4 w-4" />
+        </Button>
+      </ListHeaderItem>
+    </ListHeader>
     <ListRows id="list-rows">
       <ListRow
         class="mx-5"
@@ -79,6 +96,19 @@
                 class="text-gray-900"
               />
             </div>
+            <div v-else-if="column.key === '_liked_by'">
+              <Button
+                v-if="column.key == '_liked_by'"
+                variant="ghosted"
+                :class="isLiked(item) ? 'fill-red-500' : 'fill-white'"
+                @click.stop.prevent="
+                  () =>
+                    emit('likeDoc', { name: row.name, liked: isLiked(item) })
+                "
+              >
+                <HeartIcon class="h-4 w-4" />
+              </Button>
+            </div>
             <div
               v-else
               class="truncate text-base"
@@ -129,11 +159,13 @@
   />
 </template>
 <script setup>
+import HeartIcon from '@/components/Icons/HeartIcon.vue'
 import ListBulkActions from '@/components/ListBulkActions.vue'
 import {
   Avatar,
   ListView,
   ListHeader,
+  ListHeaderItem,
   ListRows,
   ListRow,
   ListSelectBanner,
@@ -142,7 +174,8 @@ import {
   Tooltip,
   Dropdown,
 } from 'frappe-ui'
-import { ref, watch } from 'vue'
+import { sessionStore } from '@/stores/session'
+import { ref, computed, watch } from 'vue'
 
 const props = defineProps({
   rows: {
@@ -170,11 +203,26 @@ const emit = defineEmits([
   'updatePageCount',
   'columnWidthUpdated',
   'applyFilter',
+  'applyLikeFilter',
+  'likeDoc',
 ])
 
 const pageLengthCount = defineModel()
 const list = defineModel('list')
 
+const isLikeFilterApplied = computed(() => {
+  return list.value.params?.filters?._liked_by ? true : false
+})
+
+const { user } = sessionStore()
+
+function isLiked(item) {
+  if (item) {
+    let likedByMe = JSON.parse(item)
+    return likedByMe.includes(user)
+  }
+}
+
 watch(pageLengthCount, (val, old_value) => {
   if (val === old_value) return
   emit('updatePageCount', val)

frontend/src/components/ListViews/ContactsListView.vue

@@ -14,7 +14,24 @@
     }"
     row-key="name"
   >
-    <ListHeader class="mx-5" @columnWidthUpdated="emit('columnWidthUpdated')" />
+    <ListHeader class="mx-5" @columnWidthUpdated="emit('columnWidthUpdated')">
+      <ListHeaderItem
+        v-for="column in columns"
+        :key="column.key"
+        :item="column"
+        @columnWidthUpdated="emit('columnWidthUpdated', column)"
+      >
+        <Button
+          v-if="column.key == '_liked_by'"
+          variant="ghosted"
+          class="!h-4"
+          :class="isLikeFilterApplied ? 'fill-red-500' : 'fill-white'"
+          @click="() => emit('applyLikeFilter')"
+        >
+          <HeartIcon class="h-4 w-4" />
+        </Button>
+      </ListHeaderItem>
+    </ListHeader>
     <ListRows id="list-rows">
       <ListRow
         class="mx-5"
@@ -74,6 +91,19 @@
                 class="text-gray-900"
               />
             </div>
+            <div v-else-if="column.key === '_liked_by'">
+              <Button
+                v-if="column.key == '_liked_by'"
+                variant="ghosted"
+                :class="isLiked(item) ? 'fill-red-500' : 'fill-white'"
+                @click.stop.prevent="
+                  () =>
+                    emit('likeDoc', { name: row.name, liked: isLiked(item) })
+                "
+              >
+                <HeartIcon class="h-4 w-4" />
+              </Button>
+            </div>
             <div
               v-else
               class="truncate text-base"
@@ -124,12 +154,14 @@
   />
 </template>
 <script setup>
+import HeartIcon from '@/components/Icons/HeartIcon.vue'
 import PhoneIcon from '@/components/Icons/PhoneIcon.vue'
 import ListBulkActions from '@/components/ListBulkActions.vue'
 import {
   Avatar,
   ListView,
   ListHeader,
+  ListHeaderItem,
   ListRows,
   ListRow,
   ListSelectBanner,
@@ -138,7 +170,8 @@ import {
   Tooltip,
   Dropdown,
 } from 'frappe-ui'
-import { ref, watch } from 'vue'
+import { sessionStore } from '@/stores/session'
+import { ref, computed, watch } from 'vue'
 
 const props = defineProps({
   rows: {
@@ -166,11 +199,26 @@ const emit = defineEmits([
   'updatePageCount',
   'columnWidthUpdated',
   'applyFilter',
+  'applyLikeFilter',
+  'likeDoc',
 ])
 
 const pageLengthCount = defineModel()
 const list = defineModel('list')
 
+const isLikeFilterApplied = computed(() => {
+  return list.value.params?.filters?._liked_by ? true : false
+})
+
+const { user } = sessionStore()
+
+function isLiked(item) {
+  if (item) {
+    let likedByMe = JSON.parse(item)
+    return likedByMe.includes(user)
+  }
+}
+
 watch(pageLengthCount, (val, old_value) => {
   if (val === old_value) return
   emit('updatePageCount', val)

frontend/src/components/ListViews/DealsListView.vue

@@ -11,7 +11,24 @@
     }"
     row-key="name"
   >
-    <ListHeader class="mx-5" @columnWidthUpdated="emit('columnWidthUpdated')" />
+    <ListHeader class="mx-5" @columnWidthUpdated="emit('columnWidthUpdated')">
+      <ListHeaderItem
+        v-for="column in columns"
+        :key="column.key"
+        :item="column"
+        @columnWidthUpdated="emit('columnWidthUpdated', column)"
+      >
+        <Button
+          v-if="column.key == '_liked_by'"
+          variant="ghosted"
+          class="!h-4"
+          :class="isLikeFilterApplied ? 'fill-red-500' : 'fill-white'"
+          @click="() => emit('applyLikeFilter')"
+        >
+          <HeartIcon class="h-4 w-4" />
+        </Button>
+      </ListHeaderItem>
+    </ListHeader>
     <ListRows id="list-rows">
       <ListRow
         class="mx-5"
@@ -62,6 +79,19 @@
             <div v-else-if="column.key === 'mobile_no'">
               <PhoneIcon class="h-4 w-4" />
             </div>
+            <div v-else-if="column.key === '_liked_by'">
+              <Button
+                v-if="column.key == '_liked_by'"
+                variant="ghosted"
+                :class="isLiked(item) ? 'fill-red-500' : 'fill-white'"
+                @click.stop.prevent="
+                  () =>
+                    emit('likeDoc', { name: row.name, liked: isLiked(item) })
+                "
+              >
+                <HeartIcon class="h-4 w-4" />
+              </Button>
+            </div>
           </template>
           <template #default="{ label }">
             <div
@@ -164,6 +194,7 @@
 </template>
 
 <script setup>
+import HeartIcon from '@/components/Icons/HeartIcon.vue'
 import MultipleAvatar from '@/components/MultipleAvatar.vue'
 import IndicatorIcon from '@/components/Icons/IndicatorIcon.vue'
 import PhoneIcon from '@/components/Icons/PhoneIcon.vue'
@@ -172,6 +203,7 @@ import {
   Avatar,
   ListView,
   ListHeader,
+  ListHeaderItem,
   ListRows,
   ListRow,
   ListRowItem,
@@ -180,7 +212,8 @@ import {
   Dropdown,
   Tooltip,
 } from 'frappe-ui'
-import { ref, watch } from 'vue'
+import { sessionStore } from '@/stores/session'
+import { ref, computed, watch } from 'vue'
 
 const props = defineProps({
   rows: {
@@ -208,11 +241,26 @@ const emit = defineEmits([
   'updatePageCount',
   'columnWidthUpdated',
   'applyFilter',
+  'applyLikeFilter',
+  'likeDoc',
 ])
 
 const pageLengthCount = defineModel()
 const list = defineModel('list')
 
+const isLikeFilterApplied = computed(() => {
+  return list.value.params?.filters?._liked_by ? true : false
+})
+
+const { user } = sessionStore()
+
+function isLiked(item) {
+  if (item) {
+    let likedByMe = JSON.parse(item)
+    return likedByMe.includes(user)
+  }
+}
+
 watch(pageLengthCount, (val, old_value) => {
   if (val === old_value) return
   emit('updatePageCount', val)

frontend/src/components/ListViews/EmailTemplatesListView.vue

@@ -10,7 +10,24 @@
     }"
     row-key="name"
   >
-    <ListHeader class="mx-5" @columnWidthUpdated="emit('columnWidthUpdated')" />
+    <ListHeader class="mx-5" @columnWidthUpdated="emit('columnWidthUpdated')">
+      <ListHeaderItem
+        v-for="column in columns"
+        :key="column.key"
+        :item="column"
+        @columnWidthUpdated="emit('columnWidthUpdated', column)"
+      >
+        <Button
+          v-if="column.key == '_liked_by'"
+          variant="ghosted"
+          class="!h-4"
+          :class="isLikeFilterApplied ? 'fill-red-500' : 'fill-white'"
+          @click="() => emit('applyLikeFilter')"
+        >
+          <HeartIcon class="h-4 w-4" />
+        </Button>
+      </ListHeaderItem>
+    </ListHeader>
     <ListRows id="list-rows">
       <ListRow
         class="mx-5"
@@ -68,6 +85,19 @@
                 class="text-gray-900"
               />
             </div>
+            <div v-else-if="column.key === '_liked_by'">
+              <Button
+                v-if="column.key == '_liked_by'"
+                variant="ghosted"
+                :class="isLiked(item) ? 'fill-red-500' : 'fill-white'"
+                @click.stop.prevent="
+                  () =>
+                    emit('likeDoc', { name: row.name, liked: isLiked(item) })
+                "
+              >
+                <HeartIcon class="h-4 w-4" />
+              </Button>
+            </div>
             <div
               v-else
               class="truncate text-base"
@@ -117,10 +147,12 @@
   />
 </template>
 <script setup>
+import HeartIcon from '@/components/Icons/HeartIcon.vue'
 import ListBulkActions from '@/components/ListBulkActions.vue'
 import {
   ListView,
   ListHeader,
+  ListHeaderItem,
   ListRows,
   ListRow,
   ListSelectBanner,
@@ -129,7 +161,8 @@ import {
   Dropdown,
   Tooltip,
 } from 'frappe-ui'
-import { ref, watch } from 'vue'
+import { sessionStore } from '@/stores/session'
+import { ref, computed, watch } from 'vue'
 
 const props = defineProps({
   rows: {
@@ -158,11 +191,26 @@ const emit = defineEmits([
   'showEmailTemplate',
   'columnWidthUpdated',
   'applyFilter',
+  'applyLikeFilter',
+  'likeDoc',
 ])
 
 const pageLengthCount = defineModel()
 const list = defineModel('list')
 
+const isLikeFilterApplied = computed(() => {
+  return list.value.params?.filters?._liked_by ? true : false
+})
+
+const { user } = sessionStore()
+
+function isLiked(item) {
+  if (item) {
+    let likedByMe = JSON.parse(item)
+    return likedByMe.includes(user)
+  }
+}
+
 watch(pageLengthCount, (val, old_value) => {
   if (val === old_value) return
   emit('updatePageCount', val)

frontend/src/components/ListViews/OrganizationsListView.vue

@@ -13,7 +13,24 @@
     }"
     row-key="name"
   >
-    <ListHeader class="mx-5" @columnWidthUpdated="emit('columnWidthUpdated')" />
+    <ListHeader class="mx-5" @columnWidthUpdated="emit('columnWidthUpdated')">
+      <ListHeaderItem
+        v-for="column in columns"
+        :key="column.key"
+        :item="column"
+        @columnWidthUpdated="emit('columnWidthUpdated', column)"
+      >
+        <Button
+          v-if="column.key == '_liked_by'"
+          variant="ghosted"
+          class="!h-4"
+          :class="isLikeFilterApplied ? 'fill-red-500' : 'fill-white'"
+          @click="() => emit('applyLikeFilter')"
+        >
+          <HeartIcon class="h-4 w-4" />
+        </Button>
+      </ListHeaderItem>
+    </ListHeader>
     <ListRows id="list-rows">
       <ListRow
         class="mx-5"
@@ -61,6 +78,19 @@
                 class="text-gray-900"
               />
             </div>
+            <div v-else-if="column.key === '_liked_by'">
+              <Button
+                v-if="column.key == '_liked_by'"
+                variant="ghosted"
+                :class="isLiked(item) ? 'fill-red-500' : 'fill-white'"
+                @click.stop.prevent="
+                  () =>
+                    emit('likeDoc', { name: row.name, liked: isLiked(item) })
+                "
+              >
+                <HeartIcon class="h-4 w-4" />
+              </Button>
+            </div>
             <div
               v-else
               class="truncate text-base"
@@ -110,11 +140,13 @@
   />
 </template>
 <script setup>
+import HeartIcon from '@/components/Icons/HeartIcon.vue'
 import ListBulkActions from '@/components/ListBulkActions.vue'
 import {
   Avatar,
   ListView,
   ListHeader,
+  ListHeaderItem,
   ListRows,
   ListRow,
   ListSelectBanner,
@@ -123,7 +155,8 @@ import {
   Tooltip,
   Dropdown,
 } from 'frappe-ui'
-import { ref, watch } from 'vue'
+import { sessionStore } from '@/stores/session'
+import { ref, computed, watch } from 'vue'
 
 const props = defineProps({
   rows: {
@@ -151,11 +184,26 @@ const emit = defineEmits([
   'updatePageCount',
   'columnWidthUpdated',
   'applyFilter',
+  'applyLikeFilter',
+  'likeDoc',
 ])
 
 const pageLengthCount = defineModel()
 const list = defineModel('list')
 
+const isLikeFilterApplied = computed(() => {
+  return list.value.params?.filters?._liked_by ? true : false
+})
+
+const { user } = sessionStore()
+
+function isLiked(item) {
+  if (item) {
+    let likedByMe = JSON.parse(item)
+    return likedByMe.includes(user)
+  }
+}
+
 watch(pageLengthCount, (val, old_value) => {
   if (val === old_value) return
   emit('updatePageCount', val)

frontend/src/components/ListViews/TasksListView.vue

@@ -10,7 +10,24 @@
     }"
     row-key="name"
   >
-    <ListHeader class="mx-5" @columnWidthUpdated="emit('columnWidthUpdated')" />
+    <ListHeader class="mx-5" @columnWidthUpdated="emit('columnWidthUpdated')">
+      <ListHeaderItem
+        v-for="column in columns"
+        :key="column.key"
+        :item="column"
+        @columnWidthUpdated="emit('columnWidthUpdated', column)"
+      >
+        <Button
+          v-if="column.key == '_liked_by'"
+          variant="ghosted"
+          class="!h-4"
+          :class="isLikeFilterApplied ? 'fill-red-500' : 'fill-white'"
+          @click="() => emit('applyLikeFilter')"
+        >
+          <HeartIcon class="h-4 w-4" />
+        </Button>
+      </ListHeaderItem>
+    </ListHeader>
     <ListRows id="list-rows">
       <ListRow
         class="mx-5"
@@ -74,6 +91,19 @@
                 class="text-gray-900"
               />
             </div>
+            <div v-else-if="column.key === '_liked_by'">
+              <Button
+                v-if="column.key == '_liked_by'"
+                variant="ghosted"
+                :class="isLiked(item) ? 'fill-red-500' : 'fill-white'"
+                @click.stop.prevent="
+                  () =>
+                    emit('likeDoc', { name: row.name, liked: isLiked(item) })
+                "
+              >
+                <HeartIcon class="h-4 w-4" />
+              </Button>
+            </div>
             <div
               v-else
               class="truncate text-base"
@@ -123,6 +153,7 @@
   />
 </template>
 <script setup>
+import HeartIcon from '@/components/Icons/HeartIcon.vue'
 import TaskStatusIcon from '@/components/Icons/TaskStatusIcon.vue'
 import TaskPriorityIcon from '@/components/Icons/TaskPriorityIcon.vue'
 import CalendarIcon from '@/components/Icons/CalendarIcon.vue'
@@ -132,6 +163,7 @@ import {
   Avatar,
   ListView,
   ListHeader,
+  ListHeaderItem,
   ListRows,
   ListRow,
   ListSelectBanner,
@@ -140,7 +172,8 @@ import {
   Dropdown,
   Tooltip,
 } from 'frappe-ui'
-import { ref, watch } from 'vue'
+import { sessionStore } from '@/stores/session'
+import { ref, computed, watch } from 'vue'
 
 const props = defineProps({
   rows: {
@@ -169,11 +202,26 @@ const emit = defineEmits([
   'showTask',
   'columnWidthUpdated',
   'applyFilter',
+  'applyLikeFilter',
+  'likeDoc',
 ])
 
 const pageLengthCount = defineModel()
 const list = defineModel('list')
 
+const isLikeFilterApplied = computed(() => {
+  return list.value.params?.filters?._liked_by ? true : false
+})
+
+const { user } = sessionStore()
+
+function isLiked(item) {
+  if (item) {
+    let likedByMe = JSON.parse(item)
+    return likedByMe.includes(user)
+  }
+}
+
 watch(pageLengthCount, (val, old_value) => {
   if (val === old_value) return
   emit('updatePageCount', val)

frontend/src/pages/CallLogs.vue

@@ -36,6 +36,8 @@
     @columnWidthUpdated="() => triggerResize++"
     @updatePageCount="(count) => (updatedPageCount = count)"
     @applyFilter="(data) => viewControls.applyFilter(data)"
+    @applyLikeFilter="(data) => viewControls.applyLikeFilter(data)"
+    @likeDoc="(data) => viewControls.likeDoc(data)"
   />
   <div
     v-else-if="callLogs.data"

frontend/src/pages/Contacts.vue

@@ -42,6 +42,8 @@
     @columnWidthUpdated="() => triggerResize++"
     @updatePageCount="(count) => (updatedPageCount = count)"
     @applyFilter="(data) => viewControls.applyFilter(data)"
+    @applyLikeFilter="(data) => viewControls.applyLikeFilter(data)"
+    @likeDoc="(data) => viewControls.likeDoc(data)"
   />
   <div
     v-else-if="contacts.data"

frontend/src/pages/Deals.vue

@@ -42,6 +42,8 @@
     @columnWidthUpdated="() => triggerResize++"
     @updatePageCount="(count) => (updatedPageCount = count)"
     @applyFilter="(data) => viewControls.applyFilter(data)"
+    @applyLikeFilter="(data) => viewControls.applyLikeFilter(data)"
+    @likeDoc="(data) => viewControls.likeDoc(data)"
   />
   <div v-else-if="deals.data" class="flex h-full items-center justify-center">
     <div

frontend/src/pages/EmailTemplates.vue

@@ -43,6 +43,8 @@
     @updatePageCount="(count) => (updatedPageCount = count)"
     @showEmailTemplate="showEmailTemplate"
     @applyFilter="(data) => viewControls.applyFilter(data)"
+    @applyLikeFilter="(data) => viewControls.applyLikeFilter(data)"
+    @likeDoc="(data) => viewControls.likeDoc(data)"
   />
   <div
     v-else-if="emailTemplates.data"

frontend/src/pages/Organizations.vue

@@ -42,6 +42,8 @@
     @columnWidthUpdated="() => triggerResize++"
     @updatePageCount="(count) => (updatedPageCount = count)"
     @applyFilter="(data) => viewControls.applyFilter(data)"
+    @applyLikeFilter="(data) => viewControls.applyLikeFilter(data)"
+    @likeDoc="(data) => viewControls.likeDoc(data)"
   />
   <div
     v-else-if="organizations.data"

frontend/src/pages/Tasks.vue

@@ -39,6 +39,8 @@
     @updatePageCount="(count) => (updatedPageCount = count)"
     @showTask="showTask"
     @applyFilter="(data) => viewControls.applyFilter(data)"
+    @applyLikeFilter="(data) => viewControls.applyLikeFilter(data)"
+    @likeDoc="(data) => viewControls.likeDoc(data)"
   />
   <div v-else-if="tasks.data" class="flex h-full items-center justify-center">
     <div