luminic-front/src/components/ToolBar.vue

<template>
  <div
      class=" items-center  toolbar-example justify-between bg-white outline rounded-xl outline-gray-300 shadow-lg h-fit fixed"
      style="width: 90%; left:5%; bottom: 1.5rem;">
    <!--    <TransactionForm v-if="drawerOpened" :visible="drawerOpened" :transaction-type="'INSTANT'"-->
    <!--                     :category-type="'EXPENSE'" @close-drawer="closeDrawer"/>-->
    <div class="flex flex-row rounded-full px-2 justify-between overflow-x-scroll">
      <div class=" flex-col gap-2 p-2  sm:flex">
        <button class="items-center flex flex-col gap-2" @click="openDrawer('INSTANT', 'EXPENSE')">
          <i class="pi pi-plus text-xl" style="font-size: 1rem"></i>
          <p>Запись</p>
        </button>
      </div>
      <div class="flex flex-col gap-2 p-2">
        <router-link to="/spaces" class="items-center flex flex-col gap-2">
          <i class="pi pi-compass text-2xl" style="font-size: 1rem"></i>
          <p>Пространства</p>
        </router-link>
      </div>
      <div class="flex flex-col gap-2 p-2">
        <router-link to="/budgets" class="items-center flex flex-col gap-2">
          <i class="pi pi-briefcase text-2xl" style="font-size: 1rem"></i>
          <p>Бюджеты</p>
        </router-link>
      </div>
      <div class="flex flex-col gap-2 p-2">
        <router-link to="/analytics" class="items-center flex flex-col gap-2">
          <i class="pi pi-chart-line text-2xl" style="font-size: 1rem"></i>
          <p>Аналитика</p>
        </router-link>
      </div>

      <div class="flex flex-col gap-2 p-2">
        <router-link to="/transactions" class="items-center flex flex-col gap-2">
          <i class="pi pi-dollar text-2xl" style="font-size: 1rem"></i>
          <p>Транзакции</p>
        </router-link>
      </div>

      <div class="flex flex-col gap-2 p-2">
        <router-link to="/wishlists" class="items-center flex flex-col gap-2">
          <i class="pi pi-star text-2xl" style="font-size: 1rem"></i>
          <p>Вишлисты</p>
        </router-link>
      </div>

      <div class=" flex-col gap-2 p-2 flex">
        <router-link to="/settings" class="items-center flex flex-col gap-2">
          <i class="pi pi-cog text-2xl" style="font-size: 1rem"></i>
          <p>Настройки</p>
        </router-link>
      </div>
      <div class=" flex-col gap-2 p-2 flex">
        <button @click="router.go(0)" class="items-center flex flex-col gap-2">
          <i class="pi pi-refresh text-2xl" style="font-size: 1rem"></i>
          <p>Обновить</p>
        </button>
      </div>


      <!-- Создать с подменю -->
<!--      <div class="relative  flex-col gap-2 p-2 items-center hidden sm:flex" @click="showSubmenu = !showSubmenu"-->
<!--           @mouseenter="showSubmenu = true" @mouseleave="showSubmenu = false">-->
<!--        &lt;!&ndash;        <router-link to="/transactions/create" class="items-center flex flex-col gap-2">&ndash;&gt;-->
<!--        <i class="pi pi-cog text-2xl" style="font-size: 1rem"></i>-->
<!--        <p>Создать</p>-->
<!--        &lt;!&ndash;        </router-link>&ndash;&gt;-->

<!--        &lt;!&ndash; Подменю для Создать &ndash;&gt;-->
<!--        <div v-if="showSubmenu" class="absolute bottom-full right-0 mb-2 w-48 p-2 bg-white shadow-lg rounded-lg z-50">-->
<!--          <div class="flex flex-col gap-2 items-start">-->
<!--            <button @click="openDrawer('INSTANT')" class="hover:bg-gray-100 p-2 rounded-lg">-->
<!--              <p>Создать текущую</p>-->
<!--            </button>-->
<!--            <button @click="openDrawer('PLANNED', 'INCOME')" class="hover:bg-gray-100 p-2 rounded-lg">-->
<!--              <p> Создать плановый расход</p>-->
<!--            </button>-->
<!--            <button @click=" openDrawer('PLANNED', 'EXPENSE')" class="hover:bg-gray-100 p-2 rounded-lg">-->
<!--              Создать плановое поступление-->
<!--            </button>-->
<!--          </div>-->
<!--        </div>-->
<!--      </div>-->
<!--      <div class="relative  flex-col gap-2 p-2 items-center flex sm:hidden" @click="showSubmenu = !showSubmenu"-->
<!--           @mouseenter="showSubmenu = true" @mouseleave="showSubmenu = false">-->
<!--        &lt;!&ndash;        <router-link to="/transactions/create" class="items-center flex flex-col gap-2">&ndash;&gt;-->
<!--        <i class="pi pi-bars text-2xl" style="font-size: 1rem"></i>-->
<!--        <p>Меню</p>-->
<!--        &lt;!&ndash;        </router-link>&ndash;&gt;-->

<!--        &lt;!&ndash; Подменю для Создать &ndash;&gt;-->
<!--        <div v-if="showSubmenu" class="absolute bottom-full  right-0 w-48 p-2 bg-white shadow-lg rounded-lg z-50">-->
<!--          <div class="flex flex-col-reverse gap-2 items-start">-->
<!--            <button @click="openDrawer('INSTANT')" class="hover:bg-gray-100 p-2 rounded-lg">-->
<!--              <p>Создать текущую</p>-->
<!--            </button>-->
<!--            <button @click="openDrawer('PLANNED', 'EXPENSE')" class="hover:bg-gray-100 p-2 rounded-lg">-->
<!--              <p class="text-left"> Создать плановый расход</p>-->
<!--            </button>-->
<!--            <button @click=" openDrawer('PLANNED', 'INCOME')" class="hover:bg-gray-100 p-2 rounded-lg">-->
<!--              <p class="text-left">Создать плановое поступление</p>-->
<!--            </button>-->
<!--            <router-link to="/settings" class="items-center flex flex-col gap-2 p-2">-->
<!--              &lt;!&ndash;              <i class="pi pi-check text-2xl" style="font-size: 1.5rem"></i>&ndash;&gt;-->
<!--              <p>Настройки</p>-->
<!--            </router-link>-->
<!--            <button @click="refreshPage"><p class="text-left"><i class="pi pi-refresh"/>Обновить страницу</p></button>-->
<!--          </div>-->
<!--        </div>-->
<!--      </div>-->
    </div>


  </div>
</template>

<script setup lang="ts">
import {onMounted, ref} from 'vue';
import Button from 'primevue/button';
import {TransactionType} from "@/models/Transaction";
import {CategoryType} from "@/models/Category";
import {useDrawerStore} from "@/stores/drawerStore";
import {useRoute, useRouter} from "vue-router";
const router = useRouter()
const route = useRoute()

const showSubmenu = ref(false);



const transactionType = ref<TransactionType>()
const categoryType = ref<CategoryType>()
const drawerOpened = ref(false);

const drawerStore = useDrawerStore()


const refreshPage = () => {
  window.location.reload(true)
}
const openDrawer = (selectedTransactionType = null, selectedCategoryType = null) => {
  if (selectedTransactionType && selectedCategoryType) {
    // transactionType.value = selectedTransactionType;
    // categoryType.value = selectedCategoryType;
    drawerStore.setTransactionType(selectedTransactionType)
    drawerStore.setCategoryType(selectedTransactionType)
  } else if (selectedTransactionType) {
    // transactionType.value = selectedTransactionType;
    // categoryType.value = 'EXPENSE'
    drawerStore.setTransactionType(selectedTransactionType)
    drawerStore.setCategoryType('EXPENSE')
  }

  drawerStore.setVisible(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')
    }
  }
])


onMounted(() => {
  // setTimeout(() => {
  //   console.log(route.params['mode']);
  //   if (route.params['mode']) {
  //     console.log(route.params['mode']);
  //
  //     openDrawer('INSTANT')
  //
  //   }
  // }, 10)
})
</script>

<style scoped>


h3 {
  margin: 0;
}
</style>