Skip to content

Commit

Permalink
add functional checkbox and spinner
Browse files Browse the repository at this point in the history
  • Loading branch information
@J0ris-K
J0ris-K committed Nov 26, 2024
1 parent 2752bac commit 5f4955f
Showing 1 changed file with 50 additions and 68 deletions.
118 changes: 50 additions & 68 deletions @xen-orchestra/lite/src/views/pool/PoolNetworkView.vue
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@
<!-- v1 -->
<template>
<div class="network-view-container">
<UiCard class="card-wrapper">
Expand All @@ -17,13 +16,15 @@
<div>
<UiTopBottomTable
:selected-items="selectedItemsNetwork"
:total-items="networksWithVLANs.length"
:total-items="reactiveNetworksWithVLANs.length"
@toggle-select-all="toggleSelectNetwork"
/>
<VtsTable>
<thead>
<tr>
<th><UiCheckbox accent="info" @change="toggleSelectNetwork" /></th>
<th class="checkbox-header">
<UiCheckbox accent="info" @update:model-value="toggleSelectNetwork($event)" />
</th>
<ColumnTitle id="name" :icon="faAlignLeft">{{ $t('name') }}</ColumnTitle>
<ColumnTitle id="description" :icon="faAlignLeft">{{ $t('description') }}</ColumnTitle>
<ColumnTitle id="pifs" :icon="faPowerOff">{{ $t('pifs-status') }}</ColumnTitle>
Expand All @@ -33,14 +34,14 @@
</tr>
</thead>
<tbody>
<tr v-for="(item, index) in networksWithVLANs" :key="index">
{{
item.selected
}}
<td><UiCheckbox v-model="item.selected" accent="info" /></td>
<tr v-for="(item, index) in reactiveNetworksWithVLANs" :key="index">
<td>
<UiCheckbox v-model="item.selected" accent="info" />
</td>
<td>{{ item.name_label }}</td>
<td>{{ item.name_description }}</td>
<td>
<!-- TODO improvement required -->
<UiInfo v-if="item.status === 'connected'" accent="success"> {{ item.status }}</UiInfo>
<UiInfo v-else-if="item.status === 'disconnected'" accent="danger"> {{ item.status }}</UiInfo>
<UiInfo v-else accent="warning"> {{ item.status }}</UiInfo>
Expand All @@ -53,11 +54,12 @@
</VtsTable>
<UiTopBottomTable
:selected-items="selectedItemsNetwork"
:total-items="networksWithVLANs.length"
:total-items="reactiveNetworksWithVLANs.length"
@toggle-select-all="toggleSelectNetwork"
/>
</div>
</div>
<UiCardSpinner v-if="!isReady" />
<div class="host-internal-networks-container">
<UiTitle>
{{ $t('host-internal-network') }}
Expand All @@ -73,22 +75,26 @@
<div>
<UiTopBottomTable
:selected-items="selectedItemsHostInternalNW"
:total-items="hostPrivateNetworks.length"
:total-items="reactiveHostPrivateNetworks.length"
@toggle-select-all="toggleSelectHostInternalNW"
/>
<VtsTable>
<thead>
<tr>
<th><UiCheckbox accent="info" @change="toggleSelectHostInternalNW" /></th>
<th class="checkbox-header">
<UiCheckbox accent="info" @update:model-value="toggleSelectHostInternalNW($event)" />
</th>
<ColumnTitle id="name" :icon="faAlignLeft">{{ $t('name') }}</ColumnTitle>
<ColumnTitle id="description" :icon="faAlignLeft">{{ $t('description') }}</ColumnTitle>
<ColumnTitle id="mtu" :icon="faHashtag">{{ $t('mtu') }}</ColumnTitle>
<ColumnTitle id="locking" :icon="faCaretDown">{{ $t('locking-mode-default') }}</ColumnTitle>
</tr>
</thead>
<tbody>
<tr v-for="(item, index) in hostPrivateNetworks" :key="index">
<td><UiCheckbox v-model="item.selected" accent="info" /></td>
<tr v-for="(item, index) in reactiveHostPrivateNetworks" :key="index">
<td>
<UiCheckbox v-model="item.selected" accent="info" />
</td>
<td>{{ item.name_label }}</td>
<td>{{ item.name_description }}</td>
<td>{{ item.MTU }}</td>
Expand All @@ -98,69 +104,26 @@
</VtsTable>
<UiTopBottomTable
:selected-items="selectedItemsHostInternalNW"
:total-items="hostPrivateNetworks.length"
:total-items="reactiveHostPrivateNetworks.length"
@toggle-select-all="toggleSelectHostInternalNW"
/>
</div>
</div>
<UiCardSpinner v-if="!isReady" />
</UiCard>
<UiPanel>
<template #header>
<UiButton variant="tertiary" size="medium" accent="info" :left-icon="faEdit">{{ $t('edit') }}</UiButton>
<UiButton variant="tertiary" size="medium" accent="danger" :left-icon="faTrash">{{ $t('delete') }}</UiButton>
<UiButtonIcon accent="info" size="medium" :icon="faEllipsis" />
</template>
<!--
<UiCard class="card-container">
<div class="typo p1-medium">Network Name</div>
<div>
<div class="typo p3-regular content-details">
<div>UUID</div>
<div>71df26a2-678a-49c7-823..</div>
<UiButtonIcon accent="info" size="medium" :icon="faCopy" />
</div>
<div class="typo p3-regular content-details">
<div>{{ $t('description') }}</div>
<div>Lorem ipsum</div>
<UiButtonIcon accent="info" size="medium" :icon="faCopy" />
</div>
<div class="typo p3-regular content-details">
<div>Vlan</div>
<div>100</div>
<UiButtonIcon accent="info" size="medium" :icon="faCopy" />
</div>
<div class="typo p3-regular content-details">
<div>MTU</div>
<div>1500</div>
<UiButtonIcon accent="info" size="medium" :icon="faCopy" />
</div>
<div class="typo p3-regular content-details">
<div>Network block device</div>
<div>Lorem</div>
<UiButtonIcon accent="info" size="medium" :icon="faCopy" />
</div>
<div class="typo p3-regular content-details">
<div>Defaut locking mode</div>
<div>true</div>
</div>
</div>
</UiCard>
-->
</UiPanel>
</div>
</template>

<script lang="ts" setup>
import UiCard from '@/components/ui/UiCard.vue'
import UiCardSpinner from '@/components/ui/UiCardSpinner.vue'
import { usePageTitleStore } from '@/stores/page-title.store'
import { useNetworkStore } from '@/stores/xen-api/network.store'
import ColumnTitle from '@core/components/table/ColumnTitle.vue'
import VtsTable from '@core/components/table/VtsTable.vue'
import UiButton from '@core/components/ui/button/UiButton.vue'
import UiButtonIcon from '@core/components/ui/button-icon/UiButtonIcon.vue'
import UiCheckbox from '@core/components/ui/checkbox/UiCheckbox.vue'
import UiInfo from '@core/components/ui/info/UiInfo.vue'
import UiPanel from '@core/components/ui/panel/UiPanel.vue'
import UiQuerySearchBar from '@core/components/ui/query-search-bar/UiQuerySearchBar.vue'
import UiTableActions from '@core/components/ui/table-actions/UiTableActions.vue'
import UiTitle from '@core/components/ui/title/UiTitle.vue'
Expand All @@ -169,31 +132,46 @@ import {
faAlignLeft,
faCaretDown,
faEdit,
faEllipsis,
faHashtag,
faPlus,
faPowerOff,
faTrash,
} from '@fortawesome/free-solid-svg-icons'
import { computed } from 'vue'
import { computed, ref, watchEffect } from 'vue'
import { useI18n } from 'vue-i18n'
usePageTitleStore().setTitle(useI18n().t('network'))
const { networksWithVLANs, hostPrivateNetworks } = useNetworkStore().subscribe()
const { networksWithVLANs, hostPrivateNetworks, isReady } = useNetworkStore().subscribe()
const reactiveNetworksWithVLANs = ref(networksWithVLANs.value || [])
const reactiveHostPrivateNetworks = ref(hostPrivateNetworks.value || [])
const toggleSelectNetwork = (isSelected: boolean) => {
networksWithVLANs.value.forEach(item => {
const selectedItemsNetwork = computed(() => reactiveNetworksWithVLANs.value.filter(item => item.selected).length)
const selectedItemsHostInternalNW = computed(
() => reactiveHostPrivateNetworks.value.filter(item => item.selected).length
)
const toggleSelectNetwork = (isSelected: any) => {
reactiveNetworksWithVLANs.value.forEach(item => {
item.selected = isSelected
})
}
const toggleSelectHostInternalNW = (isSelected: boolean) => {
hostPrivateNetworks.value.forEach(item => (item.selected = isSelected))
const toggleSelectHostInternalNW = (isSelected: any) => {
reactiveHostPrivateNetworks.value.forEach(item => {
item.selected = isSelected
})
}
const selectedItemsNetwork = computed(() => networksWithVLANs.value.filter(item => item.selected).length)
const selectedItemsHostInternalNW = computed(() => hostPrivateNetworks.value.filter(item => item.selected).length)
watchEffect(() => {
if (networksWithVLANs.value) {
reactiveNetworksWithVLANs.value = networksWithVLANs.value || []
}
if (hostPrivateNetworks.value) {
reactiveHostPrivateNetworks.value = hostPrivateNetworks.value || []
}
})
</script>

<style lang="postcss" scoped>
Expand All @@ -216,6 +194,10 @@ const selectedItemsHostInternalNW = computed(() => hostPrivateNetworks.value.fil
.ui-info {
align-items: center;
}
.checkbox-header {
width: 4.8rem;
}
.card-container {
display: flex;
flex-direction: column;
Expand Down

0 comments on commit 5f4955f

Please sign in to comment.