+ settings update

2025-01-24 16:42:16 +03:00
parent ba3ff888cf
commit 9369285b44
6 changed files with 69 additions and 14 deletions
--- a/src/components/ListBox.vue
+++ 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>
--- 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'"/>
--- 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);
--- 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"/>
--- 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);

--- 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>-->