Custom ListFooter and ListSelectBanner for localisation

crm/locale/main.pot

@@ -7,8 +7,8 @@ msgid ""
 msgstr ""
 "Project-Id-Version: Frappe CRM VERSION\n"
 "Report-Msgid-Bugs-To: [email protected]\n"
-"POT-Creation-Date: 2024-12-23 04:28+0000\n"
-"PO-Revision-Date: 2024-12-23 04:28+0000\n"
+"POT-Creation-Date: 2024-12-23 16:46+0000\n"
+"PO-Revision-Date: 2024-12-23 16:46+0000\n"
 "Last-Translator: [email protected]\n"
 "Language-Team: [email protected]\n"
 "MIME-Version: 1.0\n"
@@ -1949,6 +1949,7 @@ msgid "Load Default Columns"
 msgstr ""
 
 #: frontend/src/components/Kanban/KanbanView.vue:142
+#: frontend/src/components/custom-ui/ListFooter.vue:14
 msgid "Load More"
 msgstr ""
 
@@ -3069,6 +3070,14 @@ msgstr ""
 msgid "Select"
 msgstr ""
 
+#: frontend/src/components/custom-ui/ListSelectBanner.vue:58
+msgid "Select All"
+msgstr ""
+
+#: frontend/src/components/custom-ui/ListSelectBanner.vue:81
+msgid "Selected"
+msgstr ""
+
 #: frontend/src/components/EmailEditor.vue:159
 msgid "Send"
 msgstr ""

crm/locale/ru.po

@@ -7,17 +7,16 @@ msgid ""
 msgstr ""
 "Project-Id-Version: Frappe CRM VERSION\n"
 "Report-Msgid-Bugs-To: [email protected]\n"
-"POT-Creation-Date: 2024-12-23 04:28+0000\n"
-"PO-Revision-Date: 2024-12-23 08:33+0400\n"
+"POT-Creation-Date: 2024-12-23 16:46+0000\n"
+"PO-Revision-Date: 2024-12-23 20:50+0400\n"
 "Last-Translator: AlexKuzin <[email protected]>\n"
-"Language-Team: [email protected]\n"
 "Language: ru\n"
+"Language-Team: [email protected]\n"
+"Plural-Forms: nplurals=3; plural=(n%10==1 && n%100!=11 ? 0 : n%10>=2 && n%10<=4 && (n%100<10 || n%100>=20) ? 1 : 2);\n"
 "MIME-Version: 1.0\n"
 "Content-Type: text/plain; charset=utf-8\n"
 "Content-Transfer-Encoding: 8bit\n"
-"Plural-Forms: nplurals=3; plural=(n%10==1 && n%100!=11 ? 0 : n%10>=2 && n%10<=4 && (n%100<10 || n%100>=20) ? 1 : 2);\n"
 "Generated-By: Babel 2.13.1\n"
-"X-Generator: Poedit 3.5\n"
 
 #: frontend/src/components/ViewControls.vue:980
 msgid " (New)"
@@ -1952,6 +1951,7 @@ msgid "Load Default Columns"
 msgstr "Загрузка колонок по умолчанию"
 
 #: frontend/src/components/Kanban/KanbanView.vue:142
+#: frontend/src/components/custom-ui/ListFooter.vue:14
 msgid "Load More"
 msgstr "Загрузить больше"
 
@@ -3071,6 +3071,14 @@ msgstr "Поиск по сайту или отрасли..."
 msgid "Select"
 msgstr "Выберите"
 
+#: frontend/src/components/custom-ui/ListSelectBanner.vue:58
+msgid "Select All"
+msgstr "Выбрать все"
+
+#: frontend/src/components/custom-ui/ListSelectBanner.vue:81
+msgid "Selected"
+msgstr "Выбрано"
+
 #: frontend/src/components/EmailEditor.vue:159
 msgid "Send"
 msgstr "Отправить"
@@ -3868,3 +3876,4 @@ msgstr "{0} - недопустимый адрес электронной поч
 #: frontend/src/components/Settings/SettingsPage.vue:155
 msgid "{0} is mandatory"
 msgstr "{0} является обязательным"
+

frontend/src/components/ListViews/CallLogsListView.vue

@@ -170,12 +170,12 @@ import {
   ListRows,
   ListRow,
   ListRowItem,
-  ListFooter,
   Tooltip,
   Dropdown,
   Button,
-  ListSelectBanner,
 } from 'frappe-ui'
+import ListSelectBanner from '@/components/custom-ui/ListSelectBanner.vue'
+import ListFooter from '@/components/custom-ui/ListFooter.vue'
 import { sessionStore } from '@/stores/session'
 import { ref, computed, watch } from 'vue'
 

frontend/src/components/ListViews/ContactsListView.vue

@@ -169,12 +169,12 @@ import {
   ListRows,
   ListRow,
   ListRowItem,
-  ListFooter,
   Tooltip,
   Dropdown,
   Button,
-  ListSelectBanner,
 } from 'frappe-ui'
+import ListSelectBanner from '@/components/custom-ui/ListSelectBanner.vue'
+import ListFooter from '@/components/custom-ui/ListFooter.vue'
 import { sessionStore } from '@/stores/session'
 import { ref, computed, watch } from 'vue'
 import { useRoute } from 'vue-router'

frontend/src/components/ListViews/DealsListView.vue

@@ -205,12 +205,12 @@ import {
   ListHeader,
   ListHeaderItem,
   ListRowItem,
-  ListFooter,
   Dropdown,
   Tooltip,
   Button,
-  ListSelectBanner,
 } from 'frappe-ui'
+import ListSelectBanner from '@/components/custom-ui/ListSelectBanner.vue'
+import ListFooter from '@/components/custom-ui/ListFooter.vue'
 import { sessionStore } from '@/stores/session'
 import { ref, computed, watch } from 'vue'
 import { useRoute } from 'vue-router'

frontend/src/components/ListViews/EmailTemplatesListView.vue

@@ -156,12 +156,12 @@ import {
   ListRows,
   ListRow,
   ListRowItem,
-  ListFooter,
   Dropdown,
   Tooltip,
   Button,
-  ListSelectBanner,
 } from 'frappe-ui'
+import ListSelectBanner from '@/components/custom-ui/ListSelectBanner.vue'
+import ListFooter from '@/components/custom-ui/ListFooter.vue'
 import { sessionStore } from '@/stores/session'
 import { ref, computed, watch } from 'vue'
 

frontend/src/components/ListViews/LeadsListView.vue

@@ -215,12 +215,12 @@ import {
   ListView,
   ListHeader,
   ListHeaderItem,
-  ListSelectBanner,
   ListRowItem,
-  ListFooter,
   Dropdown,
   Tooltip,
 } from 'frappe-ui'
+import ListSelectBanner from '@/components/custom-ui/ListSelectBanner.vue'
+import ListFooter from '@/components/custom-ui/ListFooter.vue'
 import { sessionStore } from '@/stores/session'
 import { ref, computed, watch } from 'vue'
 import { useRoute } from 'vue-router'

frontend/src/components/ListViews/OrganizationsListView.vue

@@ -159,12 +159,12 @@ import {
   ListRows,
   ListRow,
   ListRowItem,
-  ListFooter,
   Tooltip,
   Dropdown,
   Button,
-  ListSelectBanner,
 } from 'frappe-ui'
+import ListSelectBanner from '@/components/custom-ui/ListSelectBanner.vue'
+import ListFooter from '@/components/custom-ui/ListFooter.vue'
 import { sessionStore } from '@/stores/session'
 import { ref, computed, watch } from 'vue'
 import { useRoute } from 'vue-router'

frontend/src/components/ListViews/TasksListView.vue

@@ -177,12 +177,12 @@ import {
   ListRows,
   ListRow,
   ListRowItem,
-  ListFooter,
   Tooltip,
   Dropdown,
   Button,
-  ListSelectBanner,
 } from 'frappe-ui'
+import ListSelectBanner from '@/components/custom-ui/ListSelectBanner.vue'
+import ListFooter from '@/components/custom-ui/ListFooter.vue'
 import { sessionStore } from '@/stores/session'
 import { ref, computed, watch } from 'vue'
 

frontend/src/components/custom-ui/ListFooter.vue

@@ -0,0 +1,63 @@
+<template>
+  <ListFooter
+    :model-value="modelValue"
+    :show-more="showMore"
+    :loading="loading"
+    :options="options"
+    @update:model-value="$emit('update:modelValue', $event)"
+    @load-more="$emit('load-more')"
+  >
+    <template #right>
+      <div class="flex items-center">
+        <Button
+          v-if="showLoadMore"
+              :label="__('Load More')"
+          @click="$emit('load-more')"
+        />
+        <div v-if="showLoadMore" class="mx-3 h-[80%] border-l" />
+        <div class="flex items-center gap-1 text-base text-ink-gray-5">
+          <div>{{ options.rowCount || '0' }}</div>
+          <div>из</div>
+          <div>{{ options.totalCount || '0' }}</div>
+        </div>
+      </div>
+    </template>
+  </ListFooter>
+</template> 
+
+<script setup>
+import { ListFooter } from 'frappe-ui'
+import { computed } from 'vue'
+
+const props = defineProps({
+  modelValue: {
+    type: Number,
+    default: 20,
+  },
+  showMore: {
+    type: Boolean,
+    default: false,
+  },
+  loading: {
+    type: Boolean,
+    default: false,
+  },
+  options: {
+    type: Object,
+    default: () => ({
+      rowCount: 0,
+      totalCount: 0,
+    }),
+  },
+})
+
+defineEmits(['load-more', 'update:modelValue'])
+
+const showLoadMore = computed(() => {
+  return (
+    props.options.rowCount &&
+    props.options.totalCount &&
+    props.options.rowCount < props.options.totalCount
+  )
+})
+</script>

frontend/src/components/custom-ui/ListSelectBanner.vue

@@ -0,0 +1,85 @@
+<template>
+  <transition
+    enter-active-class="duration-300 ease-out"
+    enter-from-class="transform opacity-0"
+    enter-to-class="opacity-100"
+    leave-active-class="duration-300 ease-in"
+    leave-from-class="opacity-100"
+    leave-to-class="transform opacity-0"
+  >
+    <div
+      v-if="list.selections.size"
+      class="absolute inset-x-0 bottom-6 mx-auto w-max text-base"
+    >
+      <div
+        class="flex min-w-[596px] items-center space-x-3 rounded-lg bg-surface-white px-4 py-2 shadow-2xl"
+        :class="$attrs.class"
+      >
+        <slot
+          v-bind="{
+            selections: list.selections,
+            allRowsSelected: list.allRowsSelected,
+            selectAll: () => list.toggleAllRows(true),
+            unselectAll: () => list.toggleAllRows(false),
+          }"
+        >
+          <div
+            class="flex flex-1 justify-between border-r border-outline-gray-2 text-ink-gray-9"
+          >
+            <div class="flex items-center space-x-3">
+              <FormControl
+                type="checkbox"
+                :modelValue="true"
+                :disabled="true"
+                class="text-ink-gray-9"
+              />
+              <div>{{ selectedText }}</div>
+            </div>
+            <div class="mr-3">
+              <slot
+                name="actions"
+                v-bind="{
+                  selections: list.selections,
+                  allRowsSelected: list.allRowsSelected,
+                  selectAll: () => list.toggleAllRows(true),
+                  unselectAll: () => list.toggleAllRows(false),
+                }"
+              />
+            </div>
+          </div>
+          <div class="flex items-center space-x-1">
+            <Button
+              class="w- text-ink-gray-7"
+              :disabled="list.allRowsSelected"
+              :class="list.allRowsSelected ? 'cursor-not-allowed' : ''"
+              variant="ghost"
+              @click="list.toggleAllRows(true)"
+            >
+              {{ __('Select All') }}
+            </Button>
+            <Button
+              icon="x"
+              variant="ghost"
+              @click="list.toggleAllRows(false)"
+            />
+          </div>
+        </slot>
+      </div>
+    </div>
+  </transition>
+</template>
+
+<script setup>
+import { Button, FormControl } from 'frappe-ui'
+import { computed, inject } from 'vue'
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const list = inject('list')
+const Selected = __('Selected')
+let selectedText = computed(() => {
+  return `${Selected}: ${list.value.selections.size}`
+})
+</script> 

frontend/src/pages/Notes.vue

@@ -111,7 +111,8 @@ import NoteModal from '@/components/Modals/NoteModal.vue'
 import ViewControls from '@/components/ViewControls.vue'
 import { usersStore } from '@/stores/users'
 import { timeAgo, formatDate } from '@/utils'
-import { TextEditor, call, Dropdown, Tooltip, ListFooter } from 'frappe-ui'
+import { TextEditor, call, Dropdown, Tooltip } from 'frappe-ui'
+import ListFooter from '@/components/custom-ui/ListFooter.vue'
 import { ref, watch } from 'vue'
 
 const { getUser } = usersStore()