From 9369285b44ee3bb564fd490b4f5192fba087b168 Mon Sep 17 00:00:00 2001
From: Vladimir Voronin <voroninvyu@gmail.com>
Date: Fri, 24 Jan 2025 16:42:16 +0300
Subject: [PATCH] + settings update

---
 src/components/ListBox.vue                    | 43 +++++++++++++++++++
 src/components/settings/SettingsView.vue      | 16 +++++--
 .../settings/categories/CategoriesList.vue    | 13 +++---
 .../categories/CreateCategoryModal.vue        |  2 +-
 .../settings/recurrent/RecurrentList.vue      |  5 ++-
 .../transactions/TransactionList.vue          |  4 +-
 6 files changed, 69 insertions(+), 14 deletions(-)
 create mode 100644 src/components/ListBox.vue

diff --git a/src/components/ListBox.vue b/src/components/ListBox.vue
new file mode 100644
index 0000000..ab350a4
--- /dev/null
+++ b/src/components/ListBox.vue
@@ -0,0 +1,43 @@
+<script setup lang="ts">
+
+
+import {PropType} from "vue";
+import {Transaction} from "@/models/Transaction";
+
+const props = defineProps(
+    {
+      elements: {
+        type: Object,
+        required: true,
+      },
+      selectedElement: {
+        type: String,
+        required: true,
+      }
+    }
+)
+</script>
+
+<template>
+  <div
+      class="sm:col-span-1 w-full h-56 lg:h-[42rem] p-2 overflow-y-scroll outline outline-1 outline-gray-300 rounded-lg">
+    <!--                <IconField>-->
+
+    <!--                  <InputText v-model="filterText" placeholder="Поиск категории"/>-->
+    <!--                  <InputIcon class="pi pi-search"/>-->
+    <!--                </IconField>-->
+    <ul class=" min-w-fit w-full">
+
+      <li v-for="el in elements"
+          class="px-2 py-2 hover:bg-blue-50 rounded-md line-clamp-1 w-full"
+          :class="selectedElement == el.id? '!bg-emerald-50 text-emerald-700': '' "
+          @click="selectedElement=el">
+        {{ category.icon }} {{ e.name }}
+      </li>
+    </ul>
+  </div>
+</template>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/src/components/settings/SettingsView.vue b/src/components/settings/SettingsView.vue
index e9f246e..5ceff10 100644
--- a/src/components/settings/SettingsView.vue
+++ b/src/components/settings/SettingsView.vue
@@ -35,9 +35,9 @@ const pages = ref([
   <div class="flex bg-gray-100 flex-col h-full px-4 gap-4 ">
     <h2 class="text-4xl font-bold ">Настройки</h2>
 
-    <div class="grid grid-cols-8 w-full h-full ">
-      <div class="flex flex-row items-center justify-end col-start-2 col-span-1 ">
-        <ul class=" flex flex-col  gap-1  ">
+    <div class="xl:grid xl:grid-cols-8 w-full h-full ">
+      <div class=" hidden xl:flex flex-row items-center justify-end col-start-2 col-span-1 ">
+        <ul class="  flex-col  gap-1 ">
           <li v-for="page in pages" :key="page.code"
               class="flex flex-row gap-2 p-2 hover:bg-emerald-100 hover:text-emerald-700 hover:rounded-md items-center"
               :class="selectedModeCode == page.code ? 'bg-blue-100' : ''" @click="selectedModeCode = page.code">
@@ -46,6 +46,16 @@ const pages = ref([
         </ul>
         <Divider layout="vertical"/>
       </div>
+      <div class="flex xl:hidden sm:col-span-1 w-full h-fit p-2 mb-2 overflow-y-scroll outline outline-1 outline-gray-300 rounded-xl">
+        <ul class=" min-w-fit w-full">
+
+          <li v-for="page in pages"
+              class=" flex flex-row gap-2  items-center px-2 py-2 hover:bg-blue-50 rounded-md line-clamp-1 w-full"
+              :class="selectedModeCode == page.code ? '!bg-emerald-50 text-emerald-700': '' " @click="selectedModeCode=page.code">
+            <i :class="page.icon"/>{{ page.title }}
+          </li>
+        </ul>
+      </div>
       <div class=" flex flex-col col-span-5 gap-2 max-h-[90dvh] overflow-y-scroll justify-items-start">
         <CategoriesList v-if="selectedModeCode == 'categories'"/>
         <RecurrentList v-else-if="selectedModeCode == 'recurrent'"/>
diff --git a/src/components/settings/categories/CategoriesList.vue b/src/components/settings/categories/CategoriesList.vue
index 292a15f..ad59591 100644
--- a/src/components/settings/categories/CategoriesList.vue
+++ b/src/components/settings/categories/CategoriesList.vue
@@ -1,13 +1,13 @@
 <template>
   <div v-if="loading">
-
+  <LoadingView/>
   </div>
   <div v-else class="flex flex-col bg-gray-100 dark:bg-gray-800 h-screen p-4">
     <ConfirmDialog/>
     <!-- Заголовок и кнопка добавления категории -->
-    <div class="flex flex-row justify-between  bg-gray-100">
+    <div class="flex flex-col gap-4 xl:flex-row justify-between  bg-gray-100">
       <h2 class="text-5xl font-bold">Категории</h2>
-      <Button label="Добавить категорию" icon="pi pi-plus" @click="openCreateDialog(null)"/>
+      <Button label="Добавить категорию" icon="pi pi-plus" class="text-sm" @click="openCreateDialog(null)"/>
     </div>
 
     <!-- Поле для поиска -->
@@ -19,7 +19,7 @@
     </div>
 
     <!-- Переключатель категорий (доходы/расходы) -->
-    <div class="card flex sm:hidden justify-center mb-4">
+    <div class="card flex lg:hidden justify-center mb-4">
       <SelectButton v-model="selectedCategoryType" :options="categoryTypes" optionLabel="name"
                     aria-labelledby="category-switch"/>
     </div>
@@ -27,7 +27,7 @@
 
     <!-- Список категорий с прокруткой для больших экранов -->
     <div class="flex">
-      <div class="hidden sm:grid grid-cols-2 gap-x-10 w-full h-full justify-items-center overflow-y-auto">
+      <div class="hidden lg:grid grid-cols-2 gap-x-10 w-full h-full justify-items-center overflow-y-auto">
         <!-- Категории доходов -->
         <div class="grid  h-full w-full  min-w-fit overflow-y-auto">
           <div class=" gap-4    ">
@@ -73,7 +73,7 @@
     </div>
 
     <!-- Для маленьких экранов -->
-    <div class="flex sm:hidden flex-wrap rounded w-full">
+    <div class="flex lg:hidden flex-wrap rounded w-full">
       <CategoryListItem
           v-for="category in filteredCategories"
           :key="category.id"
@@ -117,6 +117,7 @@ import {
 
 import {useConfirm} from "primevue/useconfirm";
 import {useToast} from "primevue/usetoast";
+import LoadingView from "@/components/LoadingView.vue";
 
 
 const loading = ref(true);
diff --git a/src/components/settings/categories/CreateCategoryModal.vue b/src/components/settings/categories/CreateCategoryModal.vue
index 5f4aa2f..65bde63 100644
--- a/src/components/settings/categories/CreateCategoryModal.vue
+++ b/src/components/settings/categories/CreateCategoryModal.vue
@@ -1,6 +1,6 @@
 <template>
   <Dialog :visible="show" modal :header="isEditing ? 'Edit Category' : 'Create New Category'" :closable="false"
-          class="!w-1/3">
+          class="w-[95%] xl:!w-1/3">
     <div class="flex justify-center gap-4">
       <Button rounded outlined @click="toggleEmojiPicker" class=" flex justify-center !rounded-full !text-4xl !p-4"
               size="large" :label="icon"/>
diff --git a/src/components/settings/recurrent/RecurrentList.vue b/src/components/settings/recurrent/RecurrentList.vue
index 439f8fc..77982b0 100644
--- a/src/components/settings/recurrent/RecurrentList.vue
+++ b/src/components/settings/recurrent/RecurrentList.vue
@@ -1,7 +1,7 @@
 <!-- RecurrentPaymentsList.vue -->
 <template>
-  <div v-if="loading" class="flex flex-col items-center justify-center h-full bg-gray-100 py-15">
-    Loading...
+  <div v-if="loading" >
+   <LoadingView/>
   </div>
   <div v-else class="flex flex-col  h-full bg-gray-100 py-15">
     <!-- Заголовок -->
@@ -51,6 +51,7 @@ import {getRecurrentPayments} from "@/services/recurrentService";
 import CreateRecurrentModal from "@/components/settings/recurrent/CreateRecurrentModal.vue";
 import {Category, CategoryType} from "@/models/Category";
 import {getCategories, getCategoryTypes} from "@/services/categoryService";
+import LoadingView from "@/components/LoadingView.vue";
 
 const loading = ref(true);
 
diff --git a/src/components/transactions/TransactionList.vue b/src/components/transactions/TransactionList.vue
index 49cd339..ab8565a 100644
--- a/src/components/transactions/TransactionList.vue
+++ b/src/components/transactions/TransactionList.vue
@@ -124,11 +124,11 @@ onUnmounted( async () => {
 
 <template>
   <div class="px-4 bg-gray-100 h-full">
-    <h2 class="text-4xl mb-6 font-bold">Transaction list</h2>
+    <h2 class="text-4xl mb-6 font-bold">Список транзакций </h2>
     <div class="flex flex-col gap-2">
       <IconField>
         <InputIcon class="pi pi-search"/>
-        <InputText v-model="searchText" placeholder="Search"></InputText>
+        <InputText v-model="searchText" placeholder="поиск"></InputText>
       </IconField>
       <div class="flex flex-row gap-2">
         <!--      <span v-for="user in users">{{user.id}}</span>-->