Spythere/pojazdownik
1
0
Fork 0
mirror of https://github.com/Spythere/pojazdownik.git synced 2026-05-03 11:45:34 +00:00
Code Issues Packages Projects Releases Wiki Activity

chore: improved stock actions layout; added stock bookmarking

Browse Source
This commit is contained in:
Spythere
2025-03-08 02:14:43 +01:00
parent 90e257127c
commit 7596b7ec2c
7 changed files with 283 additions and 113 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/tabs/StorageTab.vue
+151 -75
View File
@@ -6,91 +6,106 @@
</div>
<div class="tab_content">
<div class="tab_actions">
<button
class="btn btn--image"
@click="saveStockDataToStorage"
:disabled="store.stockList.length == 0"
:data-disabled="store.stockList.length == 0"
>
<FolderArrowDownIcon />
ZAPISZ OBECNY SKŁAD
</button>
<button
class="btn btn--image"
@click="removeStockIndexFromStorage"
:disabled="currentStockIndex == -1"
:data-disabled="currentStockIndex == -1"
>
<TrashIcon />
<span>USUŃ ZAPISANY SKŁAD</span>
</button>
</div>
<div class="storage-list-wrapper">
<transition-group name="storage-list-anim" tag="ul" class="storage-list">
<li
v-for="(stockString, stockName) in store.storageStockData"
:key="stockName"
:data-current="store.chosenStorageStockName == stockName"
>
<div class="storage-item-top">
<button class="btn btn--text btn-name" @click="chooseStorageStock(stockName)">
{{ stockName }}
</button>
<ul class="storage-stock-list">
<li v-for="(stockList, i) in storageStockData" :key="i">
</li>
</ul>
<div class="storage-item-top-actions">
<button class="btn btn--text" @click="toggleStorageEntryExpand(stockName)">
<ChevronDownIcon
v-if="!expandedEntries.includes(stockName)"
style="width: 25px"
/>
<ChevronUpIcon v-else style="width: 25px" />
</button>
<button class="btn btn--text" @click="removeStockIndexFromStorage(stockName)">
<TrashIcon style="width: 25px" />
</button>
</div>
</div>
<div class="storage-item-expandable" v-if="expandedEntries.includes(stockName)">
{{
stockString
.split(';')
.map((s) => s.split(/:|,/)[0])
.join(' + ')
}}
</div>
</li>
</transition-group>
</div>
</div>
</section>
</template>
<script setup lang="ts">
import { onActivated, Reactive, reactive, ref } from 'vue';
import { IStock } from '../../types/common.types';
import { FolderArrowDownIcon, TrashIcon } from '@heroicons/vue/20/solid';
<script lang="ts">
import { defineComponent } from 'vue';
import {
ChevronDownIcon,
ChevronUpIcon,
FolderArrowDownIcon,
TrashIcon,
} from '@heroicons/vue/20/solid';
import { useStore } from '../../store';
import stockMixin from '../../mixins/stockMixin';
const store = useStore();
export default defineComponent({
components: {
ChevronDownIcon,
ChevronUpIcon,
FolderArrowDownIcon,
TrashIcon,
},
let storageStockData: Reactive<IStock[][]> = reactive([]);
const currentStockIndex = ref(-1);
mixins: [stockMixin],
onActivated(() => {
// loadStockDataFromStorage();
data: () => ({
store: useStore(),
expandedEntries: [] as string[],
}),
methods: {
removeStockIndexFromStorage(stockName: string) {
delete this.store.storageStockData[stockName];
this.store.chosenStorageStockName = '';
try {
localStorage.setItem('savedStockData', JSON.stringify(this.store.storageStockData));
} catch (error) {
console.error('Wystąpił błąd podczas usuwania składu z localStorage!', error);
}
},
chooseStorageStock(stockName: string) {
try {
this.loadStockFromString(this.store.storageStockData[stockName]);
this.store.chosenStorageStockName = stockName;
} catch (error) {
console.log(error);
}
},
toggleStorageEntryExpand(stockName: string) {
const stockIndex = this.expandedEntries.indexOf(stockName);
if (stockIndex == -1) this.expandedEntries.push(stockName);
else this.expandedEntries.splice(stockIndex, 1);
},
},
});
function loadStockDataFromStorage() {
const savedData = localStorage.getItem('savedStockData');
if (!savedData) {
localStorage.setItem('savedStockData', JSON.stringify([]));
return;
}
try {
storageStockData = JSON.parse(savedData);
} catch (error) {
console.error('Wystąpił błąd podczas przetwarzania danych o składach z localStorage!', error);
}
}
function saveStockDataToStorage() {
if (store.stockList.length == 0) return;
storageStockData.push(store.stockList);
try {
localStorage.setItem('savedStockData', JSON.stringify(storageStockData));
currentStockIndex.value = storageStockData.length;
} catch (error) {
console.error('Wystąpił błąd podczas zapisywania składu do localStorage!', error);
storageStockData.pop();
}
}
function removeStockIndexFromStorage() {
if (currentStockIndex.value == -1) return;
storageStockData.splice(currentStockIndex.value, 1);
try {
localStorage.setItem('savedStockData', JSON.stringify(storageStockData));
currentStockIndex.value = currentStockIndex.value - 1;
} catch (error) {
console.error('Wystąpił błąd podczas usuwania składu z localStorage!', error);
}
}
</script>
<style lang="scss" scoped>
@@ -99,4 +114,65 @@ function removeStockIndexFromStorage() {
.tab_actions {
grid-template-columns: repeat(2, 1fr);
}
.storage-list-wrapper {
position: relative;
}
ul.storage-list {
display: flex;
flex-direction: column;
gap: 0.5em;
margin-top: 0.5em;
}
ul.storage-list > li {
padding: 0.5em;
background-color: global.$secondaryColor;
&[data-current='true'] {
background-color: #3b3b3b;
}
}
.storage-item-top {
display: flex;
align-items: center;
}
.storage-item-top button.btn-name {
font-size: 1.2em;
width: 100%;
text-align: left;
}
.storage-item-top-actions {
display: flex;
gap: 0.5em;
}
.storage-item-expandable {
margin-top: 0.5em;
}
.storage-list-anim {
&-move,
&-enter-active,
&-leave-active {
transition: all 120ms ease-in-out;
}
&-enter-from {
opacity: 0;
transform: translateY(-25px);
}
&-leave-to {
opacity: 0;
}
&-leave-active {
position: absolute;
}
}
</style>