Skip to content

Commit

Permalink
Renaming tags => transaction categories / account folders, added AI i…
Browse files Browse the repository at this point in the history 
…ntegration, added files, some fixes
  • Loading branch information
@isKONSTANTIN
isKONSTANTIN committed Aug 13, 2024
1 parent 6df6b6b commit 96761e3
Show file tree
Hide file tree
Showing 77 changed files with 5,436 additions and 2,004 deletions.
6 changes: 3 additions & 3 deletions assets/css/multiselect.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,7 @@
}

.multiselect-wrapper {
@apply relative h-12 font-bold text-sm mx-auto w-full flex items-center justify-end box-border cursor-pointer outline-none;
@apply relative h-12 text-sm mx-auto w-full flex items-center justify-end box-border cursor-pointer outline-none;
}

.multiselect-single-label {
Expand Down Expand Up @@ -90,7 +90,7 @@

.multiselect-tags-search-wrapper {
min-width: 3rem;
@apply inline-block relative mx-1 mb-1 flex-grow flex-shrink h-full;
@apply inline-block placeholder-red-700 relative mx-1 mb-1 flex-grow flex-shrink h-full;
}

.multiselect-tags-search {
Expand All @@ -102,7 +102,7 @@
}

.multiselect-placeholder {
@apply flex items-center opacity-90 font-normal h-full absolute left-0 top-0 pointer-events-none bg-transparent leading-snug pl-3.5 text-gray-400 rtl:left-auto rtl:right-0 rtl:pl-0 rtl:pr-3.5;
@apply flex items-center font-bold h-full absolute left-0 top-0 pointer-events-none bg-transparent leading-snug pl-3.5 text-gray-400 rtl:left-auto rtl:right-0 rtl:pl-0 rtl:pr-3.5;
}

.multiselect-caret {
Expand Down
40 changes: 20 additions & 20 deletions components/accounts/tagGroup.vue → components/accounts/folderGroup.vue
View file
Original file line number Diff line number Diff line change
@@ -1,22 +1,22 @@
<template>
<div class="transition-all" :class="{'opacity-70 hover:opacity-100': hideStatus}">
<div class="transition-all tag-info mb-0" :class="{'rounded-2xl': hideStatus}">
<div class="transition-all folder-info mb-0" :class="{'rounded-2xl': hideStatus}">
<div class="flex justify-between">
<p class="font-bold text-lg">
{{tag.name}}
{{folder.name}}
</p>

<div class="flex gap-1 items-center">
<plus-button class="btn btn-xs btn-ghost m-0 p-0.5" v-if="!hideStatus" @event="createAccountModal = true" />
<edit-button class="btn btn-xs btn-ghost m-0 p-0.5" v-if="!hideStatus" @event="tagEditModal = true"/>
<edit-button class="btn btn-xs btn-ghost m-0 p-0.5" v-if="!hideStatus" @event="folderEditModal = true"/>

<delete-button class="btn btn-xs btn-ghost m-0 p-0.5" v-if="hideStatus && accounts.length === 0" @click="deleteTag" />
<delete-button class="btn btn-xs btn-ghost m-0 p-0.5" v-if="hideStatus && accounts.length === 0" @click="deleteFolder" />
<hide-button class="btn btn-xs btn-ghost m-0 p-0.5" :hide-status="hideStatus" @hide="setHide" @unHide="unHide"/>
</div>
</div>

<p v-if="!hideStatus" class="opacity-80 text-sm">
{{tag.description}}
{{folder.description}}
</p>
</div>
<div v-if="!hideStatus" class="bg-base-300 rounded-b-2xl p-2">
Expand Down Expand Up @@ -46,17 +46,17 @@
</div>
</div>

<modal-account-create :tag="tag" @close="createAccountModal = false" :opened="createAccountModal"/>
<modal-account-create :folder="folder" @close="createAccountModal = false" :opened="createAccountModal"/>

<confirmation :opened="tagDeleteModal" :name="'transactionTag-delete-confirmation-modal'" :confirm-style="'error'" @confirm="confirmDelete" @deny="tagDeleteModal = false">
<confirmation :opened="folderDeleteModal" :name="'folder-delete-confirmation-modal'" :confirm-style="'error'" @confirm="confirmDelete" @deny="folderDeleteModal = false">
<div class="flex justify-center">
<p class="text-lg font-bold">
{{ $t("modals.confirmations.deleteAccountTag") }}
{{ $t("modals.confirmations.deleteAccountFolder") }}
</p>
</div>
</confirmation>

<modal-account-tag-edit @close="tagEditModal = false" :opened="tagEditModal" :tag="tag"/>
<modal-account-folder-edit @close="folderEditModal = false" :opened="folderEditModal" :folder="folder"/>
<modal-account-edit :account="accountToEdit" :opened="accountEditModal" @close="accountEditModal = false" @open-accumulation="openAccumulationModal(accountToEdit)" ></modal-account-edit>
<modal-accumulation-set @close="accumulationSetModal = false" :opened="accumulationSetModal" :account="accountToAccumulation" ></modal-accumulation-set>
</div>
Expand All @@ -72,15 +72,15 @@ import DeleteButton from "~/components/buttons/deleteButton.vue";
const emit = defineEmits(['hide', 'unHide']);
const {$serverConfigs, $accountsApi, $accountsTagsApi, $toastsManager} = useNuxtApp();
const {$serverConfigs, $accountsApi, $accountsFoldersApi, $toastsManager} = useNuxtApp();
const { t } = useI18n();
const props = defineProps({
accounts: {
required: true
},
tag: {
folder: {
required: true
},
Expand All @@ -94,8 +94,8 @@ const showedAccounts = computed(() => props.accounts.filter((a) => !a.hidden));
const hiddenAccounts = computed(() => props.accounts.filter((a) => a.hidden));
const createAccountModal = ref(false);
const tagDeleteModal = ref(false);
const tagEditModal = ref(false);
const folderDeleteModal = ref(false);
const folderEditModal = ref(false);
const accumulationSetModal = ref(false);
const accountEditModal = ref(false);
Expand All @@ -109,8 +109,8 @@ const unHide = () => {
emit('unHide');
}
const deleteTag = () => {
tagDeleteModal.value = true;
const deleteFolder = () => {
folderDeleteModal.value = true;
}
const openEditAccountModal = (account) => {
Expand All @@ -124,20 +124,20 @@ const openAccumulationModal = (account) => {
}
const confirmDelete = () => {
tagDeleteModal.value = false;
folderDeleteModal.value = false;
$accountsTagsApi.deleteTag(props.tag.tagId).then((s) => {
$accountsFoldersApi.deleteFolder(props.folder.folderId).then((s) => {
if (s)
$toastsManager.pushToast(t("accountTagEntry.messages.deleted"), 2500, "success")
$toastsManager.pushToast(t("accountFolderEntry.messages.deleted"), 2500, "success")
else
$toastsManager.pushToast(t("accountTagEntry.messages.deleteFail"), 3000,"error")
$toastsManager.pushToast(t("accountFolderEntry.messages.deleteFail"), 3000,"error")
});
}
</script>

<style scoped>
.tag-info {
.folder-info {
@apply p-2 px-3 bg-base-100 rounded-t-2xl;
}
Expand Down
76 changes: 38 additions & 38 deletions components/accounts/panel.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,90 +3,90 @@
<div class="flex gap-1">
<h2 class="font-bold">{{ $t('accountsPanel.label') }}</h2>

<button tabindex="0" @click="createTagModal = true" class="btn btn-ghost min-h-0 h-max m-0 p-0">
<button tabindex="0" @click="createFolderModal = true" class="btn btn-ghost min-h-0 h-max m-0 p-0">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
<path stroke-linecap="round" stroke-linejoin="round" d="M12 9v6m3-3H9m12 0a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
</button>

</div>

<div v-if="tags.length > 0" class="flex flex-col gap-4 mt-2 min-w-fit">
<transition-group name="tags">
<tag-group v-for="tag in tags.filter((t) => !t.hide)"
:key="tag.tagId" :tag="tag"
:hide-status="tag.hide"
@hide="setHideTagStatus(tag, true)"
@unHide="setHideTagStatus(tag, false)"
:accounts="getTagAccounts(tag)">
</tag-group>

<tag-group v-for="tag in tags.filter((t) => t.hide)"
:key="tag.tagId"
:tag="tag"
:hide-status="tag.hide"
@hide="setHideTagStatus(tag, true)"
@unHide="setHideTagStatus(tag, false)"
:accounts="getTagAccounts(tag)">
</tag-group>
<div v-if="folders.length > 0" class="flex flex-col gap-4 mt-2 min-w-fit">
<transition-group name="folders">
<folder-group v-for="folder in folders.filter((t) => !t.hide)"
:key="folder.folderId" :folder="folder"
:hide-status="folder.hide"
@hide="setHideFolderStatus(folder, true)"
@unHide="setHideFolderStatus(folder, false)"
:accounts="getFolderAccounts(folder)">
</folder-group>

<folder-group v-for="folder in folders.filter((t) => t.hide)"
:key="folder.folderId"
:folder="folder"
:hide-status="folder.hide"
@hide="setHideFolderStatus(folder, true)"
@unHide="setHideFolderStatus(folder, false)"
:accounts="getFolderAccounts(folder)">
</folder-group>
</transition-group>
</div>
<div v-else class="card min-w-max template-border mt-2">
<div class="card-body p-5 justify-center items-center h-max">

<button class="btn btn-ghost btn-circle text-opacity-60" @click="createTagModal = true">
<button class="btn btn-ghost btn-circle text-opacity-60" @click="createFolderModal = true">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6"><path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" /></svg>
</button>

</div>
</div>

<modal-account-tag-create @close="createTagModal = false" :opened="createTagModal"/>
<modal-account-folder-create @close="createFolderModal = false" :opened="createFolderModal"/>
</div>
</template>

<script setup>
import TagGroup from "~/components/accounts/tagGroup.vue";
import FolderGroup from "~/components/accounts/folderGroup.vue";
import { useArrayFilter } from '@vueuse/core'
import {useStorage} from "@vueuse/core";
const {$accountsApi, $accountsTagsApi} = useNuxtApp();
const {$accountsApi, $accountsFoldersApi} = useNuxtApp();
const tags = $accountsTagsApi.getTags();
const folders = $accountsFoldersApi.getFolders();
const accounts = $accountsApi.getAccounts();
const getTagAccounts = (t) => {
return useArrayFilter(accounts, a => a.tagId === t.tagId).value
const getFolderAccounts = (t) => {
return useArrayFilter(accounts, a => a.folderId === t.folderId).value
}
tags.value.forEach((t) => {
t.hide = useStorage("hide_status_" + t.tagId, false).value;
folders.value.forEach((t) => {
t.hide = useStorage("hide_status_" + t.folderId, false).value;
})
const setHideTagStatus = (tag, status) => {
tag.hide = status;
useStorage("hide_status_" + tag.tagId, false).value = status;
const setHideFolderStatus = (folder, status) => {
folder.hide = status;
useStorage("hide_status_" + folder.folderId, false).value = status;
}
const createTagModal = ref(false);
const createFolderModal = ref(false);
</script>

<style scoped>
.tags-move,
.tags-enter-active,
.tags-leave-active {
.folders-move,
.folders-enter-active,
.folders-leave-active {
transition: all 0.5s ease;
}
.tags-enter-from,
.tags-leave-to {
.folders-enter-from,
.folders-leave-to {
opacity: 0;
transform: translateX(-30px);
}
.tags-leave-active {
.folders-leave-active {
@apply w-max;
position: absolute;
}
Expand Down
Loading

0 comments on commit 96761e3

Please sign in to comment.