some mobile

2024-10-25 01:15:27 +03:00
parent bfa1500b99
commit aed83364a4
9 changed files with 171 additions and 17 deletions
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,11 +1,12 @@
 <template>

-  <div id="app" class="flex flex-col h-screen bg-gray-100">
+  <div id="app" class="flex flex-col h-screen bg-gray-100 gap-4">
    <!-- MenuBar всегда фиксирован сверху -->
-    <MenuBar class="w-full fixed top-0 z-10"/>
+    <MenuBar  class="w-full sticky  invisible lg:visible top-0 z-10"/>
+    <ToolBar class=" fixed  visible lg:invisible bottom-0 z-10"/>

    <!-- Контентная часть заполняет оставшееся пространство -->
-    <div class="flex-grow mt-16 ">
+    <div class="flex-grow  ">

      <router-view class="w-full h-full "/>
    </div>
@@ -16,6 +17,7 @@
 <script setup lang="ts">
 import MenuBar from "./components/MenuBar.vue";
 import OverlayView from "@/components/OverlayView.vue";
+import ToolBar from "@/components/ToolBar.vue";

 // @Options({
 //   components: {
--- a/src/components/MenuBar.vue
+++ b/src/components/MenuBar.vue
@@ -1,7 +1,7 @@

 <template>
-  <div class="card">
-    <Menubar :model="items">
+  <div class="card  ">
+    <Menubar :model="items" >
      <template #start>
 <!--        <svg width="35" height="40" viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg" class="h-8">-->
 <!--          <path-->
@@ -27,17 +27,17 @@
      <template #end>
        <div class="flex items-center gap-2">
 <!--          <InputText placeholder="Search" type="text" class="w-32 sm:w-auto" />-->
-          <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" shape="circle" />
+<!--          <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" shape="circle" />-->
        </div>
      </template>
    </Menubar>
  </div>
+
 </template>

 <script setup>
 import { ref } from "vue";
 import Badge from "primevue/badge";
-import Avatar from "primevue/avatar";
 import Menubar from "primevue/menubar";

 const items = ref([
--- a/src/components/OverlayView.vue
+++ b/src/components/OverlayView.vue
@@ -23,7 +23,7 @@ const openDrawer = (selectedTransactionType = null, selectedCategoryType = null)
    transactionType.value = selectedTransactionType;
    categoryType.value = 'EXPENSE'
  }
-  console.log('we tut testsete')
+
  drawerOpened.value = true;
 }

@@ -72,7 +72,7 @@ onMounted(() => {

 <template>

-  {{ drawerOpened }}
+
  <div v-if="loading">Loding...</div>
  <div v-else>
    <TransactionEditDrawer v-if="drawerOpened" :visible="drawerOpened"
@@ -85,7 +85,7 @@ onMounted(() => {
    />

    <SpeedDial :model="items" :radius="120" type="quarter" direction="up"
-               class=" mb-10 h-fit !items-end me-10" :style="{ position: 'fixed', right: 0, bottom: 0 }"
+               class=" mb-10 h-fit !items-end me-10 hidden lg:!fixed" :style="{  right: 0, bottom: 0 }"
               pt:menuitem="m-2">
      <template #item="{ item, toggleCallback }" >
        <div
--- a/src/components/ToolBar.vue
+++ b/src/components/ToolBar.vue
@@ -0,0 +1,151 @@
+<template>
+  <div class=" items-center  toolbar-example justify-between " style="width: 80%; left:10%; bottom: 1.5rem;">
+    <TransactionEditDrawer v-if="drawerOpened" :visible="drawerOpened"
+
+
+                           :transaction-type="transactionType"
+                           :category-type="categoryType"
+
+                           @close-drawer="closeDrawer()"
+    />
+    <Toolbar class="flex flex-row ">
+<!--      <template #start>-->
+<!--        &lt;!&ndash; Кнопка "Edit" слева &ndash;&gt;-->
+<!--        <Button label="Edit" icon="pi pi-pencil" class="p-button-text" @click="onEditClick"/>-->
+<!--      </template>-->
+      <template #center >
+        <!-- Заголовок по центру -->
+        <div class="!flex flex-row !gap-5">
+        <router-link to="/budgets">
+        <Button icon="pi pi-plus" class="p-button-text !p-0 !gap-0" @click="toggleCallback " label="Бюджеты" icon-pos="top" />
+        </router-link>
+        <router-link to="/transactions">
+          <Button icon="pi pi-plus" class="p-button-text !p-0 !gap-0" @click="toggleCallback " label="Транзакции" icon-pos="top" />
+        </router-link>
+        <router-link to="/settings">
+          <Button icon="pi pi-plus" class="p-button-text !p-0 !gap-0" @click="toggleCallback " label="Настройки" icon-pos="top" />
+        </router-link>
+        </div>
+
+      </template>
+      <template #end>
+        <!-- Кнопка "Add" справа -->
+
+        <SpeedDial :model="items" :radius="120" type="quarter" direction="up"
+                   class=" mb-10 h-fit !items-end me-10" :style="{ position: 'fixed' }"
+                   pt:menuitem="m-2">
+          <template #button="{ toggleCallback }">
+            <Button icon="pi pi-plus" class="p-button-text" @click="toggleCallback" label="Создать" icon-pos="top" />
+          </template>
+          <template #item="{ item, toggleCallback }">
+            <div
+                class="flex flex-row items-start gap-2 justify-between right-10 p-2 border  bg-white rounded border-surface-200 dark:border-surface-700 cursor-pointer"
+                @click="toggleCallback"> <!-- Установлена минимальная ширина -->
+
+              <span>{{ item.label }}</span>
+              <span :class="item.icon"></span>
+            </div>
+          </template>
+        </SpeedDial>
+
+
+      </template>
+      <div class="flex flex-col-reverse fixed bottom-6">
+        <p>hui</p>
+        <p>hui</p>
+        <p>hui</p>
+        <p>hui</p>
+        <p>hui</p>
+      </div>
+    </Toolbar>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {onMounted, ref} from 'vue';
+import Toolbar from 'primevue/toolbar';
+import Button from 'primevue/button';
+import SpeedDial from "primevue/speeddial";
+import TransactionEditDrawer from "@/components/budgets/TransactionEditDrawer.vue";
+import {TransactionType} from "@/models/Transaction";
+import {CategoryType} from "@/models/Category";
+import {useRoute} from "vue-router";
+
+
+const route = useRoute()
+
+const transactionType = ref<TransactionType>()
+const categoryType = ref<CategoryType>()
+const drawerOpened = ref(false);
+
+
+const openDrawer = (selectedTransactionType = null, selectedCategoryType = null) => {
+  if (selectedTransactionType && selectedCategoryType) {
+    transactionType.value = selectedTransactionType;
+    categoryType.value = selectedCategoryType;
+  } else if (selectedTransactionType) {
+    transactionType.value = selectedTransactionType;
+    categoryType.value = 'EXPENSE'
+  }
+
+  drawerOpened.value = true;
+}
+
+
+const closeDrawer = () => {
+  drawerOpened.value = false;
+}
+const items = ref([
+  {
+    label: 'Create instant transaction',
+    icon: 'pi pi-pencil',
+    command: () => {
+      openDrawer('INSTANT')
+    }
+  },
+  {
+    label: 'Create planned income',
+    icon: 'pi pi-refresh',
+    command: () => {
+      openDrawer('PLANNED', 'INCOME')
+    }
+  },
+  {
+    label: 'Create planned expense',
+    icon: 'pi pi-trash',
+    command: () => {
+      openDrawer('PLANNED', 'EXPENSE')
+    }
+  }
+])
+
+const onEditClick = () => {
+  console.log("Edit button clicked");
+};
+
+const onAddClick = () => {
+  console.log("Add button clicked");
+};
+
+onMounted(() => {
+  setTimeout(() => {
+    console.log(route.params['mode']);
+    if (route.params['mode']) {
+      console.log(route.params['mode']);
+
+      openDrawer('INSTANT')
+
+    }
+  }, 10)
+})
+</script>
+
+<style scoped>
+.toolbar-example {
+  //margin: 20px;
+}
+
+h3 {
+  margin: 0;
+}
+</style>
--- a/src/components/budgets/BudgetList.vue
+++ b/src/components/budgets/BudgetList.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="p-4">
+  <div class="px-4 bg-gray-100 h-full ">
    <!-- Заголовок -->
    <h2 class="text-4xl mb-6  font-bold">Monthly Budgets</h2>

--- a/src/components/settings/SettingsView.vue
+++ b/src/components/settings/SettingsView.vue
@@ -5,9 +5,10 @@ import RecurrentSettingView from "@/components/settings/RecurrentSettingView.vue
 </script>

 <template>
-  <div class="flex flex-col items-center justify-center h-full ">
-    <h1 class="text-2xl font-bold">Settings</h1>
-    <div class="grid grid-cols-1 lg:grid-cols-2 gap-4  h-full w-full px-6">
+
+  <div class="flex flex-col h-full px-4 ">
+    <h2 class="text-4xl font-bold ">Monthly Budgets</h2>
+    <div class="grid grid-cols-1 lg:grid-cols-2 gap-4  ">
        <CategorySettingView />
        <RecurrentSettingView />
    </div>
--- a/src/components/transactions/TransactionList.vue
+++ b/src/components/transactions/TransactionList.vue
@@ -54,7 +54,7 @@ onMounted(async () => {
 </script>

 <template>
-  <div class="p-4">
+    <div class="px-4 bg-gray-100 h-full ">
    <!-- Заголовок -->
    <h2 class="text-4xl mb-6  font-bold">Transaction list</h2>
    <div class="flex flex-col gap-2">
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -10,7 +10,7 @@ import TransactionList from "@/components/transactions/TransactionList.vue";

 const routes = [

-    {path: '/', name: 'Budgets', component: BudgetList},
+    {path: '/', name: 'Budgets main', component: BudgetList},
    {path: '/budgets', name: 'Budgets', component: BudgetList},
    {path: '/budgets/:id', name: 'BudgetView', component: BudgetView},
    {path: '/transactions/:mode*', name: 'Transaction List', component: TransactionList},