56 lines
1.1 KiB
Vue
56 lines
1.1 KiB
Vue
<template>
|
|
<div class="integrations">
|
|
<ui-header-bar title="@integration.list" :count="count" :back-button="true" />
|
|
<div class="ui-box">
|
|
<!--<h2 v-if="available.length > 0" class="ui-headline integrations-headline">Available</h2>-->
|
|
<integration-item v-for="(item, index) in items" :key="index" :model="item" @change="onChanged" />
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
|
|
<script>
|
|
import api from './api';
|
|
import IntegrationItem from './integrations-item.vue';
|
|
|
|
export default {
|
|
data: () => ({
|
|
count: 0,
|
|
items: []
|
|
}),
|
|
|
|
components: { IntegrationItem },
|
|
|
|
mounted()
|
|
{
|
|
this.load();
|
|
},
|
|
|
|
methods: {
|
|
|
|
async load()
|
|
{
|
|
const result = await api.getTypes();
|
|
this.items = result.data;
|
|
},
|
|
|
|
onChanged()
|
|
{
|
|
this.load();
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
h2.ui-headline.integrations-headline
|
|
{
|
|
font-family: var(--font);
|
|
color: var(--color-text);
|
|
margin: 0 0 var(--padding);
|
|
font-size: var(--font-size-l);
|
|
font-weight: 700;
|
|
padding-bottom: var(--padding-m);
|
|
border-bottom: 1px dashed var(--color-line-dashed);
|
|
}
|
|
</style> |