From 519a2992883a4be7a0dbf9be869f5c65409101df Mon Sep 17 00:00:00 2001
From: Lera24 <bedulinavalera21@gmail.com>
Date: Wed, 14 Oct 2026 13:30:38 +0300
Subject: [PATCH] refactor: quick replies page migrated to pinia
 [WTEL-10656](https://webitel.atlassian.net/browse/WTEL-10656)

---
 .../modules/quick-replies/api/quickReplies.js |   3 -
 .../components/opened-quick-reply-general.vue |  76 ++---
 .../components/opened-quick-reply.vue         | 126 ++++----
 .../components/the-quick-replies.vue          | 290 +++++++++---------
 .../quick-replies/store/quick-replies.js      |  22 --
 .../stores/card/quickRepliesCardStore.ts      |  12 +
 .../datalist/_internals/headers.ts}           |  11 +-
 .../datalist/quickRepliesDatalistStore.ts     |  13 +
 .../modules/quick-replies/stores/index.ts     |   3 +
 .../modules/quick-replies/stores/namespace.ts |   3 +
 src/modules/lookups/store/lookups.js          |   2 -
 11 files changed, 279 insertions(+), 282 deletions(-)
 delete mode 100644 src/modules/lookups/modules/quick-replies/api/quickReplies.js
 delete mode 100644 src/modules/lookups/modules/quick-replies/store/quick-replies.js
 create mode 100644 src/modules/lookups/modules/quick-replies/stores/card/quickRepliesCardStore.ts
 rename src/modules/lookups/modules/quick-replies/{store/_internals/headers.js => stores/datalist/_internals/headers.ts} (79%)
 create mode 100644 src/modules/lookups/modules/quick-replies/stores/datalist/quickRepliesDatalistStore.ts
 create mode 100644 src/modules/lookups/modules/quick-replies/stores/index.ts
 create mode 100644 src/modules/lookups/modules/quick-replies/stores/namespace.ts

diff --git a/src/modules/lookups/modules/quick-replies/api/quickReplies.js b/src/modules/lookups/modules/quick-replies/api/quickReplies.js
deleted file mode 100644
index 98f35e2a6..000000000
--- a/src/modules/lookups/modules/quick-replies/api/quickReplies.js
+++ /dev/null
@@ -1,3 +0,0 @@
-import { QuickRepliesAPI as quickReplies } from '@webitel/api-services/api';
-
-export default quickReplies;
diff --git a/src/modules/lookups/modules/quick-replies/components/opened-quick-reply-general.vue b/src/modules/lookups/modules/quick-replies/components/opened-quick-reply-general.vue
index 8fd43b097..bf6322e99 100644
--- a/src/modules/lookups/modules/quick-replies/components/opened-quick-reply-general.vue
+++ b/src/modules/lookups/modules/quick-replies/components/opened-quick-reply-general.vue
@@ -1,70 +1,54 @@
 <template>
-  <section>
-    <header class="opened-card-header">
-      <h3 class="opened-card-header__title">
-        {{ $t('objects.generalInfo') }}
-      </h3>
-    </header>
+  <section class="opened-quick-reply-general">
     <div class="opened-card-input-grid">
       <wt-input-text
+        v-model:model-value="modelValue.name"
         :disabled="disableUserInput"
-        :label="$t('objects.name')"
-        :v="v.itemInstance.name"
-        :model-value="itemInstance.name"
+        :label="t('objects.name')"
+        :regle-validation="validationFields?.name"
         required
-        @update:model-value="setItemProp({ prop: 'name', value: $event })"
       />
       <wt-multi-select
+        v-model:model-value="modelValue.teams"
         :disabled="disableUserInput"
-        :label="$t('objects.team')"
-        :search-method="loadDropdownOptionsTeamList"
-        :model-value="itemInstance.teams"
-        @update:model-value="setItemProp({ prop: 'teams', value: $event })"
+        :label="t('objects.team')"
+        :search-method="TeamsAPI.getLookup"
       />
       <wt-textarea
+        v-model:model-value="modelValue.text"
         :disabled="disableUserInput"
-        :label="$t('vocabulary.text')"
-        :model-value="itemInstance.text"
-        :v="v.itemInstance.text"
+        :label="t('vocabulary.text')"
+        :regle-validation="validationFields?.text"
         required
-        @update:model-value="setItemProp({ prop: 'text', value: $event })"
       />
       <wt-multi-select
+        v-model:model-value="modelValue.queues"
         :disabled="disableUserInput"
-        :label="$t('objects.ccenter.queues.queues', 1)"
-        :search-method="loadDropdownOptionsQueueList"
-        :model-value="itemInstance.queues"
-        @update:model-value="setItemProp({ prop: 'queues', value: $event })"
+        :label="t('objects.ccenter.queues.queues', 1)"
+        :search-method="QueuesAPI.getLookup"
       />
     </div>
   </section>
 </template>
 
-<script>
+<script setup lang="ts">
+import type { RegleSchemaFieldStatus } from '@regle/schemas';
 import { QueuesAPI, TeamsAPI } from '@webitel/api-services/api';
+import type { EngineQuickReply } from '@webitel/api-services/gen/models';
+import { useI18n } from 'vue-i18n';
+
 import { useUserAccessControl } from '../../../../../app/composables/useUserAccessControl';
-import openedTabComponentMixin from '../../../../../app/mixins/objectPagesMixins/openedObjectTabMixin/openedTabComponentMixin';
 
-export default {
-	name: 'OpenedBucketGeneral',
-	mixins: [
-		openedTabComponentMixin,
-	],
-	setup: () => {
-		const { disableUserInput } = useUserAccessControl();
-		return {
-			disableUserInput,
-		};
-	},
-	methods: {
-		loadDropdownOptionsTeamList(params) {
-			return TeamsAPI.getLookup(params);
-		},
-		loadDropdownOptionsQueueList(params) {
-			return QueuesAPI.getLookup(params);
-		},
-	},
-};
-</script>
+const modelValue = defineModel<EngineQuickReply>({
+	required: true,
+});
 
-<style scoped></style>
+defineProps<{
+	validationFields?: {
+		[K in keyof EngineQuickReply]?: RegleSchemaFieldStatus<EngineQuickReply[K]>;
+	};
+}>();
+
+const { t } = useI18n();
+const { disableUserInput } = useUserAccessControl();
+</script>
diff --git a/src/modules/lookups/modules/quick-replies/components/opened-quick-reply.vue b/src/modules/lookups/modules/quick-replies/components/opened-quick-reply.vue
index 3b92d6d2d..dfba093c3 100644
--- a/src/modules/lookups/modules/quick-replies/components/opened-quick-reply.vue
+++ b/src/modules/lookups/modules/quick-replies/components/opened-quick-reply.vue
@@ -12,99 +12,83 @@
       </wt-page-header>
     </template>
     <template #main>
+      <wt-loader v-if="debouncedIsLoading" />
       <form
+        v-else
         class="opened-card-form"
         @submit.prevent="save"
       >
         <wt-tabs
           :current="currentTab"
           :tabs="tabs"
+          @change="changeTab"
         />
-        <component
-          :is="currentTab.value"
-          :namespace="namespace"
-          :v="v$"
-        />
+        <router-view v-slot="{ Component }">
+          <component
+            :is="Component"
+            v-model="modelValue"
+            :validation-fields="validationFields"
+          />
+        </router-view>
         <input
           hidden
           type="submit"
-        > <!--  submit form on Enter  -->
+        >
       </form>
     </template>
   </wt-page-wrapper>
 </template>
 
-<script>
-import { useVuelidate } from '@vuelidate/core';
-import { required } from '@vuelidate/validators';
+<script setup lang="ts">
+import type { EngineQuickReply } from '@webitel/api-services/gen/models';
+import { useCardComponent, useCardTabs } from '@webitel/ui-datalist/card';
+import { useClose } from '@webitel/ui-sdk/composables';
+import { computed } from 'vue';
+import { useI18n } from 'vue-i18n';
 
 import { useUserAccessControl } from '../../../../../app/composables/useUserAccessControl';
-import openedObjectMixin from '../../../../../app/mixins/objectPagesMixins/openedObjectMixin/openedObjectMixin';
-import RouteNames from '../../../../../app/router/_internals/RouteNames.enum.js';
-import QuickRepliesRouteNames from '../router/_internals/QuickRepliesRouteNames.enum.js';
-import General from './opened-quick-reply-general.vue';
+import RouteNames from '../../../../../app/router/_internals/RouteNames.enum';
+import QuickRepliesRouteNames from '../router/_internals/QuickRepliesRouteNames.enum';
+import { useQuickRepliesCardStore } from '../stores';
 
-export default {
-	name: 'OpenedQuickReply',
-	components: {
-		General,
-	},
-	mixins: [
-		openedObjectMixin,
-	],
+const { t } = useI18n();
+const { hasSaveActionAccess } = useUserAccessControl();
 
-	setup: () => {
-		const v$ = useVuelidate();
-		const { hasSaveActionAccess } = useUserAccessControl();
-		return {
-			v$,
-			hasSaveActionAccess,
-		};
-	},
-	data: () => ({
-		namespace: 'lookups/quickReplies',
-		routeName: RouteNames.QUICK_REPLIES,
-	}),
-	validations: {
-		itemInstance: {
-			name: {
-				required,
-			},
-			text: {
-				required,
-			},
-		},
+const {
+	modelValue,
+	debouncedIsLoading,
+	originalItemInstance,
+	isNew,
+	saveText,
+	disabledSave,
+	validationFields,
+	save,
+} = useCardComponent<EngineQuickReply>({
+	useCardStore: useQuickRepliesCardStore,
+	hasSaveAccess: hasSaveActionAccess,
+});
+
+const tabs = computed(() => [
+	{
+		text: t('objects.general'),
+		value: 'general',
+		pathName: QuickRepliesRouteNames.GENERAL,
 	},
+]);
 
-	computed: {
-		tabs() {
-			const tabs = [
-				{
-					text: this.$t('objects.general'),
-					value: 'general',
-					pathName: QuickRepliesRouteNames.GENERAL,
-				},
-			];
-			return tabs;
-		},
+const { currentTab, changeTab } = useCardTabs(tabs);
+const { close } = useClose(RouteNames.QUICK_REPLIES);
 
-		path() {
-			const baseUrl = '/lookups/quick-replies';
-			return [
-				{
-					name: this.$t('objects.lookups.lookups'),
-				},
-				{
-					name: this.$t('objects.lookups.quickReplies.quickReplies', 2),
-					route: baseUrl,
-				},
-				{
-					name: this.id ? this.pathName : this.$t('objects.new'),
-				},
-			];
-		},
+const path = computed(() => [
+	{
+		name: t('objects.lookups.lookups'),
 	},
-};
+	{
+		name: t('objects.lookups.quickReplies.quickReplies', 2),
+		route: '/lookups/quick-replies',
+	},
+	{
+		name: isNew.value ? t('objects.new') : originalItemInstance.value?.name,
+	},
+]);
 </script>
-
-<style scoped></style>
diff --git a/src/modules/lookups/modules/quick-replies/components/the-quick-replies.vue b/src/modules/lookups/modules/quick-replies/components/the-quick-replies.vue
index b59274564..190ab1f6b 100644
--- a/src/modules/lookups/modules/quick-replies/components/the-quick-replies.vue
+++ b/src/modules/lookups/modules/quick-replies/components/the-quick-replies.vue
@@ -1,77 +1,77 @@
 <template>
   <wt-page-wrapper
     :actions-panel="false"
-    class="table-page"
+    class="quick-replies table-page"
   >
     <template #header>
       <wt-page-header
         :primary-disabled="!hasCreateAccess"
-        :primary-action="create"
+        :primary-action="add"
       >
         <wt-breadcrumb :path="path" />
       </wt-page-header>
     </template>
-
     <template #main>
-      <delete-confirmation-popup
-        :shown="isDeleteConfirmationPopup"
-        :delete-count="deleteCount"
-        :callback="deleteCallback"
-        @close="closeDelete"
-      />
-
       <section class="table-section">
         <header class="table-title">
           <h3 class="table-title__title">
-            {{ $t('objects.lookups.quickReplies.quickReplies') }}
+            {{ t('objects.lookups.quickReplies.quickReplies') }}
           </h3>
-          <div class="table-title__actions-wrap">
-            <wt-action-bar
-              :include="[IconAction.REFRESH, IconAction.DELETE]"
-              :disabled:delete="!hasDeleteAccess || !selectedRows.length"
-              @click:refresh="loadList"
-              @click:delete="askDeleteConfirmation({
-                deleted: selectedRows,
-                callback: () => deleteData(selectedRows),
-              })"
-            >
-
-              <template #search-bar>
-                <wt-search-bar
-                  :value="search"
-                  debounce
-                  @enter="loadList"
-                  @input="setSearch"
-                  @search="loadList"
-                />
-              </template>
-            </wt-action-bar>
-          </div>
+          <wt-action-bar
+            :include="[IconAction.REFRESH, IconAction.DELETE]"
+            :disabled:delete="!hasDeleteAccess || !selected.length"
+            @click:refresh="loadDataList"
+            @click:delete="
+              askDeleteConfirmation({
+                deleted: selected,
+                callback: () => deleteEls(selected),
+              })
+            "
+          >
+            <template #search-bar>
+              <dynamic-filter-search
+                :filters-manager="filtersManager"
+                single-search-name="search"
+                @filter:add="addFilter"
+                @filter:update="updateFilter"
+                @filter:delete="deleteFilter"
+              />
+            </template>
+          </wt-action-bar>
         </header>
 
-        <wt-loader v-show="!isLoaded" />
-        <wt-dummy
-          v-if="dummy && isLoaded"
-          :show-action="dummy.showAction"
-          :src="dummy.src"
-          :dark-mode="darkMode"
-          :text="dummy.text && $t(dummy.text)"
-          @create="create"
+        <delete-confirmation-popup
+          :shown="isDeleteConfirmationPopup"
+          :callback="deleteCallback"
+          :delete-count="deleteCount"
+          @close="closeDelete"
         />
-        <div
-          v-show="dataList.length && isLoaded"
-          class="table-section__table-wrapper"
-        >
+
+        <div class="table-section__table-wrapper">
+          <wt-empty
+            v-show="showEmpty"
+            :image="imageEmpty"
+            :text="textEmpty"
+            :primary-action-text="primaryActionTextEmpty"
+            :disabled-primary-action="!hasCreateAccess"
+            @click:primary="add"
+          />
+
+          <wt-loader v-show="isLoading" />
+
           <wt-table
+            v-show="dataList.length && !isLoading"
             :data="dataList"
-            :headers="headers"
+            :selected="selected"
+            :headers="shownHeaders"
             sortable
-            @sort="sort"
+            @sort="updateSort"
+            @update:selected="updateSelected"
           >
             <template #name="{ item }">
               <adm-item-link
                 :id="item.id"
-                :route-name="routeName"
+                :route-name="RouteNames.QUICK_REPLIES"
               >
                 {{ item.name }}
               </adm-item-link>
@@ -81,53 +81,54 @@
             </template>
             <template #teams="{ item }">
               <wt-display-chip-items
-                v-if="item?.teams"
-                :items="item?.teams"
+                v-if="item.teams"
+                :items="item.teams"
               />
             </template>
             <template #queues="{ item }">
               <wt-display-chip-items
-                v-if="item?.queues"
-                :items="item?.queues"
+                v-if="item.queues"
+                :items="item.queues"
               />
             </template>
             <template #createdAt="{ item }">
               {{ prettifyDateTime(item.createdAt) }}
             </template>
             <template #createdBy="{ item }">
-              {{ item.createdBy.name }}
+              {{ item.createdBy?.name }}
             </template>
             <template #updatedAt="{ item }">
               {{ prettifyDateTime(item.updatedAt) }}
             </template>
             <template #updatedBy="{ item }">
-              {{ item.updatedBy.name }}
+              {{ item.updatedBy?.name }}
             </template>
             <template #actions="{ item }">
               <wt-icon-action
-                action="edit"
                 :disabled="!hasUpdateAccess"
+                action="edit"
                 @click="edit(item)"
               />
               <wt-icon-action
-                action="delete"
                 :disabled="!hasDeleteAccess"
-                @click="askDeleteConfirmation({
-                  deleted: [item],
-                  callback: () => deleteData(item),
-                })"
+                action="delete"
+                @click="
+                  askDeleteConfirmation({
+                    deleted: [item],
+                    callback: () => deleteEls([item]),
+                  })
+                "
               />
             </template>
           </wt-table>
           <wt-pagination
-            :next="isNext"
+            :next="next"
             :prev="page > 1"
             :size="size"
             debounce
-            @change="loadList"
-            @input="setSize"
-            @next="nextPage"
-            @prev="prevPage"
+            @change="updateSize"
+            @next="updatePage(page + 1)"
+            @prev="updatePage(page - 1)"
           />
         </div>
       </section>
@@ -135,89 +136,104 @@
   </wt-page-wrapper>
 </template>
 
-<script>
+<script setup>
+import { DynamicFilterSearchComponent as DynamicFilterSearch } from '@webitel/ui-datalist/filters';
 import { WtDisplayChipItems } from '@webitel/ui-sdk/components';
 import { FormatDateMode, IconAction } from '@webitel/ui-sdk/enums';
 import DeleteConfirmationPopup from '@webitel/ui-sdk/src/modules/DeleteConfirmationPopup/components/delete-confirmation-popup.vue';
 import { useDeleteConfirmationPopup } from '@webitel/ui-sdk/src/modules/DeleteConfirmationPopup/composables/useDeleteConfirmationPopup';
+import { useTableEmpty } from '@webitel/ui-sdk/src/modules/TableComponentModule/composables/useTableEmpty';
 import { formatDate } from '@webitel/ui-sdk/utils';
+import { storeToRefs } from 'pinia';
+import { computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useRouter } from 'vue-router';
 
-import { useDummy } from '../../../../../app/composables/useDummy.js';
 import { useUserAccessControl } from '../../../../../app/composables/useUserAccessControl';
-import tableComponentMixin from '../../../../../app/mixins/objectPagesMixins/objectTableMixin/tableComponentMixin';
 import RouteNames from '../../../../../app/router/_internals/RouteNames.enum';
-
-const namespace = 'lookups/quickReplies';
-
-export default {
-	name: 'TheQuickReplies',
-	components: {
-		DeleteConfirmationPopup,
+import { useQuickRepliesDatalistStore } from '../stores';
+
+const { hasCreateAccess, hasUpdateAccess, hasDeleteAccess } =
+	useUserAccessControl();
+
+const tableStore = useQuickRepliesDatalistStore();
+
+const {
+	dataList,
+	error,
+	isLoading,
+	page,
+	size,
+	next,
+	selected,
+	shownHeaders,
+	filtersManager,
+} = storeToRefs(tableStore);
+
+const {
+	initialize,
+	loadDataList,
+	updatePage,
+	updateSize,
+	updateSort,
+	deleteEls,
+	addFilter,
+	updateFilter,
+	deleteFilter,
+	updateSelected,
+} = tableStore;
+
+initialize();
+
+const { t } = useI18n();
+const router = useRouter();
+
+const {
+	isVisible: isDeleteConfirmationPopup,
+	deleteCount,
+	deleteCallback,
+	askDeleteConfirmation,
+	closeDelete,
+} = useDeleteConfirmationPopup();
+
+const path = computed(() => [
+	{
+		name: t('objects.lookups.lookups'),
 	},
-	mixins: [
-		tableComponentMixin,
-	],
-
-	setup() {
-		const { dummy } = useDummy({
-			namespace,
-			showAction: true,
-		});
-
-		const {
-			isVisible: isDeleteConfirmationPopup,
-			deleteCount,
-			deleteCallback,
-
-			askDeleteConfirmation,
-			closeDelete,
-		} = useDeleteConfirmationPopup();
-
-		const { hasCreateAccess, hasUpdateAccess, hasDeleteAccess } =
-			useUserAccessControl();
-
-		return {
-			dummy,
-			isDeleteConfirmationPopup,
-			deleteCount,
-			deleteCallback,
-
-			askDeleteConfirmation,
-			closeDelete,
-			hasCreateAccess,
-			hasUpdateAccess,
-			hasDeleteAccess,
-		};
+	{
+		name: t('objects.lookups.quickReplies.quickReplies', 2),
+		route: '/lookups/quick-replies',
 	},
+]);
 
-	data: () => ({
-		namespace,
-		routeName: RouteNames.QUICK_REPLIES,
-		IconAction,
-	}),
-
-	computed: {
-		path() {
-			return [
-				{
-					name: this.$t('objects.lookups.lookups'),
-				},
-				{
-					name: this.$t('objects.lookups.quickReplies.quickReplies', 2),
-					route: '/lookups/quick-replies',
-				},
-			];
+const add = () =>
+	router.push({
+		name: `${RouteNames.QUICK_REPLIES}-card`,
+		params: {
+			id: 'new',
 		},
-		selectedRows() {
-			return this.dataList.filter((item) => item._isSelected);
-		},
-	},
-	methods: {
-		prettifyDateTime(timestamp) {
-			return formatDate(+timestamp, FormatDateMode.DATETIME);
+	});
+
+const edit = (item) =>
+	router.push({
+		name: `${RouteNames.QUICK_REPLIES}-card`,
+		params: {
+			id: item.id,
 		},
-	},
-};
+	});
+
+const prettifyDateTime = (timestamp) =>
+	formatDate(+timestamp, FormatDateMode.DATETIME);
+
+const {
+	showEmpty,
+	image: imageEmpty,
+	text: textEmpty,
+	primaryActionText: primaryActionTextEmpty,
+} = useTableEmpty({
+	dataList,
+	error,
+	filters: computed(() => filtersManager.value.getAllValues()),
+	isLoading,
+});
 </script>
-
-<style scoped></style>
diff --git a/src/modules/lookups/modules/quick-replies/store/quick-replies.js b/src/modules/lookups/modules/quick-replies/store/quick-replies.js
deleted file mode 100644
index bfd0fc275..000000000
--- a/src/modules/lookups/modules/quick-replies/store/quick-replies.js
+++ /dev/null
@@ -1,22 +0,0 @@
-import ObjectStoreModule from '../../../../../app/store/BaseStoreModules/StoreModules/ObjectStoreModule';
-import QuickRepliesAPI from '../api/quickReplies';
-import headers from './_internals/headers';
-
-const resettableState = {
-	itemInstance: {
-		name: '',
-		teams: [],
-		queues: [],
-		text: '',
-	},
-};
-
-const quickReplies = new ObjectStoreModule({
-	resettableState,
-	headers,
-})
-	.attachAPIModule(QuickRepliesAPI)
-	.generateAPIActions()
-	.getModule();
-
-export default quickReplies;
diff --git a/src/modules/lookups/modules/quick-replies/stores/card/quickRepliesCardStore.ts b/src/modules/lookups/modules/quick-replies/stores/card/quickRepliesCardStore.ts
new file mode 100644
index 000000000..0200881fe
--- /dev/null
+++ b/src/modules/lookups/modules/quick-replies/stores/card/quickRepliesCardStore.ts
@@ -0,0 +1,12 @@
+import { QuickRepliesAPI } from '@webitel/api-services/api';
+import type { EngineQuickReply } from '@webitel/api-services/gen/models';
+import { quickReplySchema as standardValidationSchema } from '@webitel/api-services/validations';
+import { createCardStore } from '@webitel/ui-datalist/card';
+
+import { QuickRepliesNamespace } from '../namespace';
+
+export const useQuickRepliesCardStore = createCardStore<EngineQuickReply>({
+	namespace: `${QuickRepliesNamespace}/card`,
+	apiModule: QuickRepliesAPI,
+	standardValidationSchema,
+});
diff --git a/src/modules/lookups/modules/quick-replies/store/_internals/headers.js b/src/modules/lookups/modules/quick-replies/stores/datalist/_internals/headers.ts
similarity index 79%
rename from src/modules/lookups/modules/quick-replies/store/_internals/headers.js
rename to src/modules/lookups/modules/quick-replies/stores/datalist/_internals/headers.ts
index 65cea0848..33313a9b7 100644
--- a/src/modules/lookups/modules/quick-replies/store/_internals/headers.js
+++ b/src/modules/lookups/modules/quick-replies/stores/datalist/_internals/headers.ts
@@ -1,50 +1,59 @@
+import type { DatalistTableHeader } from '@webitel/ui-datalist';
 import { SortSymbols } from '@webitel/ui-sdk/src/scripts/sortQueryAdapters';
 
-export default [
+export const headers: DatalistTableHeader[] = [
 	{
 		value: 'name',
 		locale: 'objects.name',
 		field: 'name',
+		show: true,
 		sort: SortSymbols.NONE,
 	},
 	{
 		value: 'text',
 		locale: 'vocabulary.text',
 		field: 'text',
+		show: true,
 		sort: SortSymbols.NONE,
 	},
 	{
 		value: 'teams',
 		locale: 'objects.team',
 		field: 'teams',
+		show: true,
 	},
 	{
 		value: 'queues',
 		locale: 'objects.ccenter.queues.queues',
 		field: 'queues',
+		show: true,
 	},
 	{
 		value: 'createdAt',
 		locale: 'reusable.createdAt',
 		field: 'created_at',
+		show: true,
 		sort: SortSymbols.NONE,
 	},
 	{
 		value: 'createdBy',
 		locale: 'reusable.createdBy',
 		field: 'created_by',
+		show: true,
 		sort: SortSymbols.NONE,
 	},
 	{
 		value: 'updatedAt',
 		locale: 'reusable.modifiedAt',
 		field: 'updated_at',
+		show: true,
 		sort: SortSymbols.NONE,
 	},
 	{
 		value: 'updatedBy',
 		locale: 'reusable.modifiedBy',
 		field: 'updated_by',
+		show: true,
 		sort: SortSymbols.NONE,
 	},
 ];
diff --git a/src/modules/lookups/modules/quick-replies/stores/datalist/quickRepliesDatalistStore.ts b/src/modules/lookups/modules/quick-replies/stores/datalist/quickRepliesDatalistStore.ts
new file mode 100644
index 000000000..ff724b226
--- /dev/null
+++ b/src/modules/lookups/modules/quick-replies/stores/datalist/quickRepliesDatalistStore.ts
@@ -0,0 +1,13 @@
+import { QuickRepliesAPI } from '@webitel/api-services/api';
+import { createTableStore } from '@webitel/ui-datalist';
+
+import { QuickRepliesNamespace } from '../namespace';
+import { headers } from './_internals/headers';
+
+export const useQuickRepliesDatalistStore = createTableStore(
+	`${QuickRepliesNamespace}/datalist`,
+	{
+		apiModule: QuickRepliesAPI,
+		headers,
+	},
+);
diff --git a/src/modules/lookups/modules/quick-replies/stores/index.ts b/src/modules/lookups/modules/quick-replies/stores/index.ts
new file mode 100644
index 000000000..ae7ca5d47
--- /dev/null
+++ b/src/modules/lookups/modules/quick-replies/stores/index.ts
@@ -0,0 +1,3 @@
+export * from './card/quickRepliesCardStore';
+export * from './datalist/quickRepliesDatalistStore';
+export * from './namespace';
diff --git a/src/modules/lookups/modules/quick-replies/stores/namespace.ts b/src/modules/lookups/modules/quick-replies/stores/namespace.ts
new file mode 100644
index 000000000..eeb679df1
--- /dev/null
+++ b/src/modules/lookups/modules/quick-replies/stores/namespace.ts
@@ -0,0 +1,3 @@
+import { AdminNamespace } from '../../../../../app/namespace';
+
+export const QuickRepliesNamespace = `${AdminNamespace}/lookups/quick-replies`;
diff --git a/src/modules/lookups/store/lookups.js b/src/modules/lookups/store/lookups.js
index a445db348..16a10b59e 100644
--- a/src/modules/lookups/store/lookups.js
+++ b/src/modules/lookups/store/lookups.js
@@ -2,7 +2,6 @@ import skills from '../modules/agent-skills/store/agent-skills';
 import blacklists from '../modules/blacklists/store/blacklists';
 import communications from '../modules/communications/store/communications';
 import media from '../modules/media/store/media';
-import quickReplies from '../modules/quick-replies/store/quick-replies.js';
 import regions from '../modules/regions/store/regions';
 
 const modules = {
@@ -11,7 +10,6 @@ const modules = {
 	regions,
 	communications,
 	media,
-	quickReplies,
 };
 
 export default {