130 lines
3.9 KiB
Vue
130 lines
3.9 KiB
Vue
<template>
|
|
<div class="container">
|
|
<div class="row py-4">
|
|
<div class="col arrow pe-3 d-flex align-items-center justify-content-end">
|
|
<button
|
|
class="rounded-pill btn btn-primary px-4 py-1"
|
|
:disabled="previousRange === null"
|
|
:title="previousRange ? t('view_range_products', {'range_name': transField(previousRange, 'name')}) : ''"
|
|
data-bs-toggle="tooltip"
|
|
@click="gotoRange(previousRange)"
|
|
>
|
|
<FontAwesomeIcon :icon="['fas', 'arrow-left']" />
|
|
</button>
|
|
</div>
|
|
<div class="col home text-center px-3">
|
|
<button
|
|
class="rounded-pill btn btn-primary px-4 py-1"
|
|
:title="activeBrand ? t('view_brand_ranges', {'brand_name': transField(activeBrand, 'name')}) : ''"
|
|
data-bs-toggle="tooltip"
|
|
@click="gotoBrand(activeBrand)"
|
|
>
|
|
<FontAwesomeIcon :icon="['fas', 'house']" />
|
|
</button>
|
|
</div>
|
|
<div class="col arrow ps-3 d-flex align-items-center justify-content-start">
|
|
<button
|
|
class="rounded-pill btn btn-primary px-4 py-1"
|
|
:disabled="nextRange === null"
|
|
:title="nextRange ? t('view_range_products', {'range_name': transField(nextRange, 'name')}) : ''"
|
|
data-bs-toggle="tooltip"
|
|
@click="gotoRange(nextRange)"
|
|
>
|
|
<FontAwesomeIcon :icon="['fas', 'arrow-right']" />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
// eslint-disable-next-line import/named
|
|
import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
|
|
import { defineComponent } from "vue";
|
|
import ToolboxHelper from "~/classes/ToolboxHelper";
|
|
|
|
export default defineComponent({
|
|
name: "NavigationMenu",
|
|
components: { FontAwesomeIcon },
|
|
data(): {
|
|
locale: string;
|
|
brands: Array<TypeRange>;
|
|
nextRange: TypeRange | null;
|
|
previousRange: TypeRange | null;
|
|
activeRange: TypeRange | null;
|
|
activeBrand: TypeBrand | null;
|
|
} {
|
|
return {
|
|
locale: "",
|
|
brands: [],
|
|
nextRange: null,
|
|
previousRange: null,
|
|
activeRange: null,
|
|
activeBrand: null,
|
|
};
|
|
},
|
|
watch: {
|
|
$route() {
|
|
this.refreshData();
|
|
},
|
|
},
|
|
mounted() {
|
|
this.refreshData();
|
|
const { locale } = useAppStore().getI18n();
|
|
this.locale = locale;
|
|
},
|
|
methods: {
|
|
t(text: string, params: Record<string,string> = {}, localeToUse: string|null = null): string {
|
|
return ToolboxHelper.trans(text, params, localeToUse);
|
|
},
|
|
transField(model: Typei18nModel, field: Typei18nFieldList) {
|
|
return ToolboxHelper.getTranslatableField(model, field);
|
|
},
|
|
refreshData() {
|
|
this.activeBrand = useAppStore().activeBrand;
|
|
this.activeRange = useAppStore().activeRange;
|
|
this.nextRange = useAppStore().getNextRange();
|
|
this.previousRange = useAppStore().getPreviousRange();
|
|
},
|
|
gotoBrand(activeBrand: TypeBrand|null) {
|
|
if(!activeBrand) {
|
|
return;
|
|
}
|
|
useAppStore().setActiveRange(null);
|
|
navigateTo(useLocaleRoute()({"name": "brands-slug", "params": {"slug": activeBrand.slug[this.locale]}}));
|
|
},
|
|
gotoRange(range: TypeRange|null) {
|
|
if(!range) {
|
|
return;
|
|
}
|
|
useAppStore().setActiveRange(range);
|
|
navigateTo(useLocaleRoute()({"name": "ranges-slug", "params": {"slug": range.slug[this.locale]}}));
|
|
}
|
|
}
|
|
});
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
@import "bootstrap/scss/functions";
|
|
@import "bootstrap/scss/variables";
|
|
@import "bootstrap/scss/variables-dark";
|
|
@import "bootstrap/scss/maps";
|
|
@import "bootstrap/scss/mixins";
|
|
@import "bootstrap/scss/vendor/rfs";
|
|
.arrow > button {
|
|
@include media-breakpoint-up(md) {
|
|
@include rfs(1.5rem, font-size);
|
|
}
|
|
@include media-breakpoint-up(xxl) {
|
|
@include rfs(4rem, font-size);
|
|
}
|
|
}
|
|
.home > button {
|
|
@include media-breakpoint-up(md) {
|
|
@include rfs(2rem, font-size);
|
|
}
|
|
@include media-breakpoint-up(xxl) {
|
|
@include rfs(4rem, font-size);
|
|
}
|
|
}
|
|
</style>
|