diff --git a/app/assets/icons/sort_asc.svg b/app/assets/icons/sort_asc.svg new file mode 100755 index 0000000..5a65ae1 --- /dev/null +++ b/app/assets/icons/sort_asc.svg @@ -0,0 +1,11 @@ + + + + \ No newline at end of file diff --git a/app/assets/icons/sort_desc.svg b/app/assets/icons/sort_desc.svg new file mode 100755 index 0000000..3efa217 --- /dev/null +++ b/app/assets/icons/sort_desc.svg @@ -0,0 +1,4 @@ + + \ No newline at end of file diff --git a/app/assets/styles/form/dropdown.css b/app/assets/styles/form/dropdown.css new file mode 100644 index 0000000..ab1a7ff --- /dev/null +++ b/app/assets/styles/form/dropdown.css @@ -0,0 +1,64 @@ +.DropDown { + --border-color: var(--color-light); + --label-color: var(--color-darkest); + --background-color: var(--color-lightest); + --arrow-color: var(--color-main-dark); + + position: relative; + + &.active { + --background-color: var(--color-main-dark); + --label-color: var(--color-lightest); + --arrow-color: var(--color-lightest); + --border-color: var(--color-main-dark); + + & ul { + scale: 1 1; + } + } + + & button { + all: unset; + cursor: pointer; + color: var(--label-color); + border: 1px solid var(--border-color); + border-radius: var(--radius-default); + background: var(--background-color); + padding: .5rem 1rem; + display: flex; + align-items: center; + justify-content: space-between; + gap: .5rem; + transition: var(--transition-default); + width: 70px; + + & .icon { + color: var(--arrow-color); + } + } + + & ul { + position: absolute; + list-style: none; + transform-origin: top; + scale: 1 0; + transition: var(--transition-default); + color: var(--color-darkest); + border: 1px solid var(--color-main-dark); + border-radius: var(--radius-default); + background: var(--color-lightest); + box-shadow: var(--box-shadow-z2); + width: 100%; + z-index: 2000; + top: 0; + + & li { + padding: .5rem 1rem; + + &.selected { + background: var(--color-main-dark); + color: var(--color-lightest); + } + } + } +} \ No newline at end of file diff --git a/app/assets/styles/form/togglebutton.css b/app/assets/styles/form/togglebutton.css new file mode 100644 index 0000000..1854a47 --- /dev/null +++ b/app/assets/styles/form/togglebutton.css @@ -0,0 +1,14 @@ +.ToggleButton { + all: unset; + color: var(--color-lightest); + background: var(--color-main-dark); + padding: .5rem .8rem; + border-radius: var(--radius-default); + display: flex; + align-items: center; + justify-content: center; + + & .icon { + font-size: 1.2rem; + } +} \ No newline at end of file diff --git a/app/assets/styles/page.css b/app/assets/styles/page.css index d621995..e8695d1 100644 --- a/app/assets/styles/page.css +++ b/app/assets/styles/page.css @@ -14,24 +14,25 @@ } .filter-bar { - background: var(--color-lightest); display: flex; justify-content: space-between; padding: var(--padding-default); - & > button { - all: unset; - cursor: pointer; - color: var(--color-main-darkest); - font-weight: bolder; - font-family: 'Roboto', sans-serif; + & .box { + display: flex; + flex-direction: column; + gap: .5rem; - &.active { - color: var(--color-main-darkest); + & strong { + color: var(--color-darkest); + font-size: .8rem; } - &:not(.active) { - opacity: .5; + & > div { + background: var(--color-lightest); + display: flex; + justify-content: flex-end; + gap: .5rem; } } } diff --git a/app/assets/styles/priceCard.css b/app/assets/styles/priceCard.css index 4abf44e..c4ef36d 100755 --- a/app/assets/styles/priceCard.css +++ b/app/assets/styles/priceCard.css @@ -2,7 +2,7 @@ position: relative; width: 100%; color: var(--color-darkest); - border-bottom: 1px solid var(--color-light); + border-bottom: 1px dashed var(--color-light); .bottom { position: absolute; diff --git a/app/components/Pp/Form/DropDown.vue b/app/components/Pp/Form/DropDown.vue new file mode 100644 index 0000000..93cd611 --- /dev/null +++ b/app/components/Pp/Form/DropDown.vue @@ -0,0 +1,45 @@ + + + diff --git a/app/components/Pp/Form/ToggleButton.vue b/app/components/Pp/Form/ToggleButton.vue new file mode 100644 index 0000000..34796f5 --- /dev/null +++ b/app/components/Pp/Form/ToggleButton.vue @@ -0,0 +1,21 @@ + + + + + \ No newline at end of file diff --git a/app/pages/index.vue b/app/pages/index.vue index a492a64..52fdddf 100755 --- a/app/pages/index.vue +++ b/app/pages/index.vue @@ -13,13 +13,32 @@ @update="updateCard()" />
-
-

Mit ProPapier Preise vergleichen und sparen

-
('cards', []) const currentSort = useLocalStorage('sort', 0) +const currentSortDirection = useLocalStorage('sortDirection', 0) const currentCard = ref() const currentCardIndex = ref(-1) const modal = useTemplateRef('modal') const deleteModal = useTemplateRef('deleteModal') const priceCards = useTemplateRef<(typeof PpPriceCard)[]>('priceCard') +const sortElements : DropDownElement[] = [ + { + label: 'Rollen', + value: 0, + }, + { + label: 'Blatt', + value: 1, + }, + { + label: 'Lagen', + value: 2, + } +] +const currentSortElement = ref(sortElements[0]!) + +const setSortElement = (element : DropDownElement) => { + sort(element.value as number) +} + const createCard = (uuid : string) : Card => ({ uuid, name: '', @@ -70,7 +111,6 @@ const createCard = (uuid : string) : Card => ({ layers: '', }) - const addCard = (card : Card) => { cards.value.unshift({ ...card }) sort() @@ -111,37 +151,23 @@ const openDeleteModal = () => { deleteModal.value?.$el.showModal() } -const filterButtons = ref([ - { - label: 'Rollen', - icon: 'uil:toilet-paper', - active: currentSort.value === 0, - }, - { - label: 'Blatt', - icon: 'uil:file-landscape', - active: currentSort.value === 1, - }, - { - label: 'Lagen', - icon: 'uil:layer-group', - active: currentSort.value === 2, - }, -]) - const sortBy = (key : 'ppr' | 'pps' | 'ppl') => { cards.value.sort((a, b) => { const aCard = priceCards.value?.find(card => card.uuid === a.uuid) || null const bCard = priceCards.value?.find(card => card.uuid === b.uuid) || null if (!aCard || !bCard) return 0 + + if (currentSortDirection.value === 0) { + return bCard[key] - aCard[key] + } + return aCard[key] - bCard[key] }) } const sort = async (index : number = currentSort.value) => { currentSort.value = index - filterButtons.value.forEach(button => { button.active = false }) - filterButtons.value[index]!.active = true + currentSortElement.value = sortElements[index]! await nextTick() @@ -151,4 +177,12 @@ const sort = async (index : number = currentSort.value) => { case 2: return sortBy('ppl') } } + +const countSortDirection = () => { + let newSortDirection = currentSortDirection.value + 1 + if (newSortDirection > 1) newSortDirection = 0 + + currentSortDirection.value = newSortDirection + sort() +} diff --git a/nuxt.config.ts b/nuxt.config.ts index f1fe86c..fe5dc01 100755 --- a/nuxt.config.ts +++ b/nuxt.config.ts @@ -54,11 +54,27 @@ export default defineNuxtConfig({ './app/assets/styles/priceCard.css', './app/assets/styles/form/textfield.css', './app/assets/styles/form/search.css', + './app/assets/styles/form/dropdown.css', + './app/assets/styles/form/togglebutton.css', './app/assets/styles/toolbar.css', './app/assets/styles/page.css', './app/assets/styles/dialog.css', ], + icon: { + customCollections: [ + { + prefix: 'pp', + dir: './app/assets/icons' + } + ], + provider: 'iconify', + serverBundle: 'local', + clientBundle: { + scan: true, + }, + }, + site: { url: 'https://pro-papier.de', name: 'ProPapier', diff --git a/shared/DropDown.ts b/shared/DropDown.ts new file mode 100644 index 0000000..b4c2652 --- /dev/null +++ b/shared/DropDown.ts @@ -0,0 +1,4 @@ +export type DropDownElement = { + label: string + value: string | number +} \ No newline at end of file