mirror of https://github.com/lissy93/dashy
140 lines
3.5 KiB
Vue
140 lines
3.5 KiB
Vue
<template>
|
|
<Collapsable
|
|
:title="title"
|
|
:uniqueKey="groupId"
|
|
:collapsed="displayData.collapsed"
|
|
:cols="displayData.cols"
|
|
:rows="displayData.rows"
|
|
:color="displayData.color"
|
|
:customStyles="displayData.customStyles"
|
|
>
|
|
<div v-if="!items || items.length < 1" class="no-items">
|
|
No Items to Show Yet
|
|
</div>
|
|
<div v-else
|
|
:class="`there-are-items ${isGridLayout? 'item-group-grid': ''}`"
|
|
:style="gridStyle"
|
|
>
|
|
<Item
|
|
v-for="(item, index) in items"
|
|
:id="`${index}_${makeId(item.title)}`"
|
|
:key="`${index}_${makeId(item.title)}`"
|
|
:url="item.url"
|
|
:title="item.title"
|
|
:description="item.description"
|
|
:icon="item.icon"
|
|
:target="item.target"
|
|
:color="item.color"
|
|
:backgroundColor="item.backgroundColor"
|
|
:itemSize="newItemSize"
|
|
@itemClicked="$emit('itemClicked')"
|
|
@triggerModal="triggerModal"
|
|
/>
|
|
<div ref="modalContainer"></div>
|
|
</div>
|
|
<IframeModal
|
|
:ref="`iframeModal-${groupId}`"
|
|
:name="`iframeModal-${groupId}`"
|
|
@closed="$emit('itemClicked')"
|
|
@modalChanged="modalChanged"
|
|
/>
|
|
</Collapsable>
|
|
</template>
|
|
|
|
<script>
|
|
import Item from '@/components/LinkItems/Item.vue';
|
|
import Collapsable from '@/components/LinkItems/Collapsable.vue';
|
|
import IframeModal from '@/components/LinkItems/IframeModal.vue';
|
|
|
|
export default {
|
|
name: 'ItemGroup',
|
|
props: {
|
|
groupId: String,
|
|
title: String,
|
|
displayData: Object,
|
|
items: Array,
|
|
itemSize: String,
|
|
modalOpen: Boolean,
|
|
},
|
|
components: {
|
|
Collapsable,
|
|
Item,
|
|
IframeModal,
|
|
},
|
|
computed: {
|
|
newItemSize() {
|
|
return this.displayData.itemSize || this.itemSize;
|
|
},
|
|
isGridLayout() {
|
|
return this.displayData.layout === 'grid'
|
|
|| !!(this.displayData.itemCountX || this.displayData.itemCountY);
|
|
},
|
|
gridStyle() {
|
|
let styles = '';
|
|
styles += this.displayData.itemCountX
|
|
? `grid-template-columns: repeat(${this.displayData.itemCountX}, 1fr);` : '';
|
|
styles += this.displayData.itemCountY
|
|
? `grid-template-rows: repeat(${this.displayData.itemCountY}, 1fr);` : '';
|
|
return styles;
|
|
},
|
|
},
|
|
methods: {
|
|
/* Returns a unique lowercase string, based on name, for section ID */
|
|
makeId(str) {
|
|
return str.replace(/\s+/g, '-').replace(/[^a-zA-Z ]/g, '').toLowerCase();
|
|
},
|
|
/* Opens the iframe modal */
|
|
triggerModal(url) {
|
|
this.$refs[`iframeModal-${this.groupId}`].show(url);
|
|
},
|
|
modalChanged(changedTo) {
|
|
this.$emit('change-modal-visibility', changedTo);
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
@import '@/styles/media-queries.scss';
|
|
|
|
.no-items {
|
|
width: 100px;
|
|
margin: 0 auto;
|
|
padding: 0.8rem;
|
|
text-align: center;
|
|
cursor: default;
|
|
border-radius: var(--curve-factor);
|
|
background: #607d8b33;
|
|
color: var(--primary);
|
|
box-shadow: var(--item-shadow);
|
|
}
|
|
|
|
.there-are-items {
|
|
height: 100%;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
&.item-group-grid {
|
|
display: grid;
|
|
@include phone {
|
|
grid-template-columns: repeat(1, 1fr);
|
|
}
|
|
@include tablet {
|
|
grid-template-columns: repeat(2, 1fr);
|
|
}
|
|
@include laptop {
|
|
grid-template-columns: repeat(2, 1fr);
|
|
}
|
|
@include monitor {
|
|
grid-template-columns: repeat(3, 1fr);
|
|
}
|
|
@include big-screen {
|
|
grid-template-columns: repeat(4, 1fr);
|
|
}
|
|
@include big-screen-up {
|
|
grid-template-columns: repeat(5, 1fr);
|
|
}
|
|
}
|
|
}
|
|
|
|
</style>
|