sajjad
3 years ago
parent
20ba746f93
commit
a9f3257155
|
After Width: | Height: | Size: 36 KiB |
@ -0,0 +1,87 @@
|
||||
<template>
|
||||
<div :class="{'isLoading':loading}">
|
||||
<template v-if="loading">
|
||||
<slot name="loading">
|
||||
<we-loading />
|
||||
</slot>
|
||||
</template>
|
||||
<template v-if="!loading">
|
||||
<slot></slot>
|
||||
</template>
|
||||
<template v-if="!loading && items.length">
|
||||
<slot
|
||||
name="items"
|
||||
:item="item"
|
||||
v-for="(item, i) in items"
|
||||
:index="i"
|
||||
:itemNumber="pagination ? pagination.pageStart + i : i + 1"
|
||||
/>
|
||||
</template>
|
||||
<template v-if="!items.length">
|
||||
<slot name="items-container"> </slot>
|
||||
</template>
|
||||
<template v-if="!loading && !isFiltered && !items.length">
|
||||
<slot name="no-items">
|
||||
<no-items
|
||||
src="/images/Global/Animated/Product.gif"
|
||||
title=""
|
||||
themeColor="product"
|
||||
:hasBtn="false"
|
||||
/>
|
||||
</slot>
|
||||
</template>
|
||||
<template v-if="!loading && isFiltered && !items.length">
|
||||
<slot name="no-results">
|
||||
<no-items
|
||||
src="/images/Global/Animated/NoResult.gif"
|
||||
textFa=" no items found! "
|
||||
textEn=" Sorry, No Items Found! "
|
||||
themeColor="product"
|
||||
:hasBtn="false"
|
||||
/>
|
||||
</slot>
|
||||
</template>
|
||||
<pagination
|
||||
v-if="items.length && !loading && pagination"
|
||||
:pagination="pagination"
|
||||
@pagination="$emit('pagination', $event)"
|
||||
></pagination>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Pagination from "@/components/Global/Pagination/Pagination.vue";
|
||||
export default {
|
||||
name: "data-iterator",
|
||||
components: {
|
||||
Pagination,
|
||||
},
|
||||
props: {
|
||||
pagination: {
|
||||
type: Object,
|
||||
default: null,
|
||||
},
|
||||
items: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
loading: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
isFiltered: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.isLoading {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height : 100vh;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,45 @@
|
||||
<template>
|
||||
<div class="loading-container">
|
||||
<div class="loading">
|
||||
<img :src="src" alt="loading" />
|
||||
</div>
|
||||
<div class="loading__title">{{ title }}</div>
|
||||
<div class="loading__message">{{ message }}</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Idefault from '@/assets/Misterious_mist.gif'
|
||||
export default {
|
||||
props: {
|
||||
src: {
|
||||
default: Idefault,
|
||||
},
|
||||
title: {
|
||||
default: " LOADING... ",
|
||||
},
|
||||
message: {
|
||||
default: " thank you for your patience ",
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.loading-container {
|
||||
text-align: center;
|
||||
}
|
||||
.loading__title,
|
||||
.loading__message {
|
||||
font-family: "Barlow-EL", sans-serif;
|
||||
}
|
||||
.loading__title {
|
||||
letter-spacing: 2px;
|
||||
text-transform: uppercase;
|
||||
font-size: 30px;
|
||||
font-weight: 700;
|
||||
}
|
||||
.loading__message {
|
||||
font-size: 15px;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,62 @@
|
||||
<template>
|
||||
<div class="we-no-result">
|
||||
<!-- <img class="Thumbnail" :src="$_getPath(src, true)" />
|
||||
<div class="Fa">{{ textFa }}</div>
|
||||
<div class="En">{{ textEn }}</div>
|
||||
<router-link v-if="hasBtn" :to="{ name: routeName }" class="flex lg6 xs12">
|
||||
<v-btn
|
||||
class="ma-2"
|
||||
outlined
|
||||
@click.native="emitClickEvent"
|
||||
:color="$_color(themeColor)"
|
||||
>
|
||||
<v-icon left>WMi-{{ btnIcon }}</v-icon> {{ btnText }}
|
||||
</v-btn>
|
||||
</router-link> -->
|
||||
<div class="text-center">There are no items to display</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
src: { default: "/images/Global/Animated/no-result-purple.gif" },
|
||||
textFa: { default: " آیتمی برای نمایش وجود ندارد " },
|
||||
textEn: { default: " NO ITEMS AVAILABLE " },
|
||||
themeColor: { default: "black" },
|
||||
btnText: { default: "ثبت اولین آیتم" },
|
||||
btnIcon: { default: "cancel" },
|
||||
modal: { default: null },
|
||||
routeName: { default: null },
|
||||
hasBtn: { default: true },
|
||||
},
|
||||
methods: {
|
||||
emitClickEvent(e) {
|
||||
this.modal ? this.$_openModal(this.modal) : null;
|
||||
this.$emit("button-clicked", e);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.we-no-result {
|
||||
text-align: center;
|
||||
padding: 10px;
|
||||
width: 100%;
|
||||
}
|
||||
.we-no-result img {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
border-radius: 150px;
|
||||
}
|
||||
.we-no-result .Fa {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.we-no-result .En {
|
||||
direction: ltr;
|
||||
font-size: 12px;
|
||||
letter-spacing: 5px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
</style>
|
||||
@ -1,3 +1,4 @@
|
||||
export default {
|
||||
getProfile: state => state.profile
|
||||
getProfile: state => state.profile,
|
||||
getProfileLoading: state => state.loading,
|
||||
}
|
||||
@ -1,9 +1,15 @@
|
||||
import Vue from 'vue';
|
||||
export default {
|
||||
// SET
|
||||
SET_PROFILE(state, payload) {
|
||||
Vue.set(state, 'profile', payload)
|
||||
},
|
||||
// UPDATE
|
||||
UPDATE_PROFILE(state, payload) {
|
||||
Vue.set(state, 'profile', payload)
|
||||
},
|
||||
// LOADING
|
||||
SET_LOADING_PROFILE(state, status) {
|
||||
Vue.set(state, 'loading', status);
|
||||
}
|
||||
}
|
||||
@ -1,3 +1,4 @@
|
||||
export default {
|
||||
profile: {}
|
||||
profile: {},
|
||||
loading: false,
|
||||
}
|
||||
@ -1,4 +1,6 @@
|
||||
export default {
|
||||
getProgramSeries: state => state.programSeries,
|
||||
getCurrentSeriesId: state => state.currentSeriesId
|
||||
getCurrentSeriesId: state => state.currentSeriesId,
|
||||
isFilteredProgramSeries: state => state.isFiltered,
|
||||
getProgramSeriesLoading: state => state.loading,
|
||||
};
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
export default {
|
||||
getWorkoutsToSeries: state => state.workoutsToSeries,
|
||||
getWorkoutToSeries: state => state.workoutToSeries,
|
||||
getWorkouts: state => state.workouts
|
||||
getWorkouts: state => state.workouts,
|
||||
getProgramSeriesWorkoutsLoading: state => state.loading,
|
||||
}
|
||||
Loading…
Reference in new issue