first commit
This commit is contained in:
172
admin-kalsport/themes/new-theme/js/vue/components/Modal.vue
Normal file
172
admin-kalsport/themes/new-theme/js/vue/components/Modal.vue
Normal file
@@ -0,0 +1,172 @@
|
||||
<!--**
|
||||
* Copyright since 2007 PrestaShop SA and Contributors
|
||||
* PrestaShop is an International Registered Trademark & Property of PrestaShop SA
|
||||
*
|
||||
* NOTICE OF LICENSE
|
||||
*
|
||||
* This source file is subject to the Open Software License (OSL 3.0)
|
||||
* that is bundled with this package in the file LICENSE.md.
|
||||
* It is also available through the world-wide-web at this URL:
|
||||
* https://opensource.org/licenses/OSL-3.0
|
||||
* If you did not receive a copy of the license and are unable to
|
||||
* obtain it through the world-wide-web, please send an email
|
||||
* to license@prestashop.com so we can send you a copy immediately.
|
||||
*
|
||||
* DISCLAIMER
|
||||
*
|
||||
* Do not edit or add to this file if you wish to upgrade PrestaShop to newer
|
||||
* versions in the future. If you wish to customize PrestaShop for your
|
||||
* needs please refer to https://devdocs.prestashop.com/ for more information.
|
||||
*
|
||||
* @author PrestaShop SA and Contributors <contact@prestashop.com>
|
||||
* @copyright Since 2007 PrestaShop SA and Contributors
|
||||
* @license https://opensource.org/licenses/OSL-3.0 Open Software License (OSL 3.0)
|
||||
*-->
|
||||
<template>
|
||||
<div>
|
||||
<transition name="fade">
|
||||
<div class="modal show">
|
||||
<div
|
||||
class="modal-dialog modal-dialog-centered"
|
||||
role="document"
|
||||
>
|
||||
<div
|
||||
class="modal-content"
|
||||
aria-labelledby="modalTitle"
|
||||
aria-describedby="modalDescription"
|
||||
v-click-outside="close"
|
||||
>
|
||||
<header
|
||||
class="modal-header"
|
||||
>
|
||||
<slot name="header">
|
||||
<h5 class="modal-title">
|
||||
{{ modalTitle }}
|
||||
</h5>
|
||||
<button
|
||||
type="button"
|
||||
class="close"
|
||||
data-dismiss="modal"
|
||||
aria-label="Close"
|
||||
@click.prevent.stop="close"
|
||||
>
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</slot>
|
||||
</header>
|
||||
<section
|
||||
class="modal-body"
|
||||
>
|
||||
<slot name="body" />
|
||||
</section>
|
||||
<footer class="modal-footer">
|
||||
<slot
|
||||
name="footer"
|
||||
v-if="!confirmation"
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-outline-secondary"
|
||||
@click.prevent.stop="close"
|
||||
aria-label="Close modal"
|
||||
>
|
||||
{{ closeLabel }}
|
||||
</button>
|
||||
</slot>
|
||||
|
||||
<slot
|
||||
name="footer-confirmation"
|
||||
v-if="confirmation"
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-outline-secondary"
|
||||
@click.prevent.stop="close"
|
||||
aria-label="Close modal"
|
||||
>
|
||||
{{ cancelLabel }}
|
||||
</button>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-primary"
|
||||
@click.prevent.stop="confirm"
|
||||
>
|
||||
{{ confirmLabel }}
|
||||
</button>
|
||||
</slot>
|
||||
</footer>
|
||||
</div>
|
||||
</div>
|
||||
<slot name="outside" />
|
||||
</div>
|
||||
</transition>
|
||||
<div
|
||||
class="modal-backdrop show"
|
||||
@click.prevent.stop="close"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import '@vue/directives/click-outside';
|
||||
|
||||
export default {
|
||||
name: 'Modal',
|
||||
props: {
|
||||
confirmation: {
|
||||
type: Boolean,
|
||||
required: false,
|
||||
default: false,
|
||||
},
|
||||
cancelLabel: {
|
||||
type: String,
|
||||
required: false,
|
||||
default() {
|
||||
return this.$t('modal.cancel');
|
||||
},
|
||||
},
|
||||
confirmLabel: {
|
||||
type: String,
|
||||
required: false,
|
||||
default() {
|
||||
return this.$t('modal.apply');
|
||||
},
|
||||
},
|
||||
closeLabel: {
|
||||
type: String,
|
||||
required: false,
|
||||
default() {
|
||||
return this.$t('modal.close');
|
||||
},
|
||||
},
|
||||
modalTitle: {
|
||||
type: String,
|
||||
required: false,
|
||||
default() {
|
||||
return '';
|
||||
},
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
close() {
|
||||
this.$emit('close');
|
||||
},
|
||||
confirm() {
|
||||
this.$emit('confirm');
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.modal.show {
|
||||
display: block;
|
||||
}
|
||||
.modal-fade-enter-active, .modal-fade-leave-active {
|
||||
transition: opacity .5s;
|
||||
}
|
||||
.modal-fade-enter, .modal-fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
|
||||
opacity: 0;
|
||||
}
|
||||
</style>
|
||||
183
admin-kalsport/themes/new-theme/js/vue/components/Pagination.vue
Normal file
183
admin-kalsport/themes/new-theme/js/vue/components/Pagination.vue
Normal file
@@ -0,0 +1,183 @@
|
||||
<!--**
|
||||
* Copyright since 2007 PrestaShop SA and Contributors
|
||||
* PrestaShop is an International Registered Trademark & Property of PrestaShop SA
|
||||
*
|
||||
* NOTICE OF LICENSE
|
||||
*
|
||||
* This source file is subject to the Open Software License (OSL 3.0)
|
||||
* that is bundled with this package in the file LICENSE.md.
|
||||
* It is also available through the world-wide-web at this URL:
|
||||
* https://opensource.org/licenses/OSL-3.0
|
||||
* If you did not receive a copy of the license and are unable to
|
||||
* obtain it through the world-wide-web, please send an email
|
||||
* to license@prestashop.com so we can send you a copy immediately.
|
||||
*
|
||||
* DISCLAIMER
|
||||
*
|
||||
* Do not edit or add to this file if you wish to upgrade PrestaShop to newer
|
||||
* versions in the future. If you wish to customize PrestaShop for your
|
||||
* needs please refer to https://devdocs.prestashop.com/ for more information.
|
||||
*
|
||||
* @author PrestaShop SA and Contributors <contact@prestashop.com>
|
||||
* @copyright Since 2007 PrestaShop SA and Contributors
|
||||
* @license https://opensource.org/licenses/OSL-3.0 Open Software License (OSL 3.0)
|
||||
*-->
|
||||
<template>
|
||||
<div class="pagination">
|
||||
<ul class="pagination-list">
|
||||
<li class="pagination-item pagination-previous">
|
||||
<button
|
||||
@click="goToPage(currentPage - 1)"
|
||||
:disabled="currentPage === 1"
|
||||
>
|
||||
<i class="material-icons">chevron_left</i>
|
||||
</button>
|
||||
</li>
|
||||
<li
|
||||
:class="['pagination-item', isActive(key)]"
|
||||
v-for="(page, key) of paginatedDatas"
|
||||
:key="key"
|
||||
>
|
||||
<button @click="goToPage(key + 1)">
|
||||
{{ key + 1 }}
|
||||
</button>
|
||||
</li>
|
||||
<li class="pagination-item pagination-next">
|
||||
<button
|
||||
@click="goToPage(currentPage + 1)"
|
||||
:disabled="currentPage === paginatedDatas.length"
|
||||
>
|
||||
<i class="material-icons">chevron_right</i>
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'Pagination',
|
||||
data() {
|
||||
return {
|
||||
paginatedDatas: [],
|
||||
currentPage: 1,
|
||||
};
|
||||
},
|
||||
props: {
|
||||
datas: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
paginationLength: {
|
||||
type: Number,
|
||||
default: 14,
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
/**
|
||||
* Used to switch page state of the pagination
|
||||
*
|
||||
* @param {int} pageNumber
|
||||
*/
|
||||
goToPage(pageNumber) {
|
||||
if (this.paginatedDatas[pageNumber - 1]) {
|
||||
this.currentPage = pageNumber;
|
||||
this.$emit('paginated', {
|
||||
paginatedDatas: this.paginatedDatas,
|
||||
currentPage: this.currentPage,
|
||||
});
|
||||
}
|
||||
},
|
||||
/**
|
||||
* Split items into chunks based on paginationLength
|
||||
*
|
||||
* @param {array} newDatas
|
||||
*/
|
||||
constructDatas(newDatas) {
|
||||
this.paginatedDatas = [];
|
||||
|
||||
for (let i = 0; i < newDatas.length; i += this.paginationLength) {
|
||||
this.paginatedDatas.push(newDatas.slice(i, i + this.paginationLength));
|
||||
}
|
||||
|
||||
this.$emit('paginated', {
|
||||
paginatedDatas: this.paginatedDatas,
|
||||
currentPage: this.currentPage,
|
||||
});
|
||||
},
|
||||
/**
|
||||
* Avoid too much logics in the template
|
||||
*
|
||||
* @param {int} key
|
||||
*/
|
||||
isActive(key) {
|
||||
return this.currentPage === key + 1 ? 'active' : null;
|
||||
},
|
||||
},
|
||||
/**
|
||||
* On mount, split datas into chunks
|
||||
*/
|
||||
mounted() {
|
||||
this.constructDatas(this.datas);
|
||||
},
|
||||
watch: {
|
||||
/**
|
||||
* On datas change, split into chunks again.
|
||||
*
|
||||
* @param {array} newDatas
|
||||
*/
|
||||
datas(newDatas) {
|
||||
this.constructDatas(newDatas);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" type="text/scss">
|
||||
@import "~@scss/config/_settings.scss";
|
||||
|
||||
.pagination {
|
||||
&-list {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&-item {
|
||||
list-style-type: none;
|
||||
|
||||
button {
|
||||
font-size: 1rem;
|
||||
padding: 0.5rem;
|
||||
transition: 0.25s ease-out;
|
||||
cursor: pointer;
|
||||
color: #6c868e;
|
||||
border: 0;
|
||||
background-color: inherit;
|
||||
|
||||
&:disabled {
|
||||
cursor: not-allowed;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
&:hover:not(:disabled) {
|
||||
color: $primary;
|
||||
}
|
||||
}
|
||||
|
||||
&.active {
|
||||
button {
|
||||
color: $primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-previous,
|
||||
&-next {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user