summaryrefslogtreecommitdiffstats
path: root/webapp/src/components/GroupModuleGroupView.vue
diff options
context:
space:
mode:
Diffstat (limited to 'webapp/src/components/GroupModuleGroupView.vue')
-rw-r--r--webapp/src/components/GroupModuleGroupView.vue218
1 files changed, 110 insertions, 108 deletions
diff --git a/webapp/src/components/GroupModuleGroupView.vue b/webapp/src/components/GroupModuleGroupView.vue
index 6706e0a..ebbcfbc 100644
--- a/webapp/src/components/GroupModuleGroupView.vue
+++ b/webapp/src/components/GroupModuleGroupView.vue
@@ -63,128 +63,130 @@
color="primary"
></v-switch>
- <v-tab-item v-if="group.id !== 0" :transition="false" :reverse-transition="false">
- <v-divider></v-divider>
- <v-card-text>
- <v-layout wrap>
- <v-flex lg4 sm6 xs12 order-lg1 order-xs2>
- <v-layout column>
- <v-flex>
- <div class="info-box">
- <div class="body-2 info-heading"><v-icon>label</v-icon><span>{{ $t('name') }}</span></div>
- <div class="info-text">
- <v-text-field v-if="editMode" class="info-input" color="primary" v-model="info.name" hide-details tabindex="1"></v-text-field>
- <div v-else>{{ group.name || '-' }}</div>
+ <v-tabs-items touchless>
+ <v-tab-item v-if="group.id !== 0" :transition="false" :reverse-transition="false">
+ <v-divider></v-divider>
+ <v-card-text>
+ <v-layout wrap>
+ <v-flex lg4 sm6 xs12 order-lg1 order-xs2>
+ <v-layout column>
+ <v-flex>
+ <div class="info-box">
+ <div class="body-2 info-heading"><v-icon>label</v-icon><span>{{ $t('name') }}</span></div>
+ <div class="info-text">
+ <v-text-field v-if="editMode" class="info-input" color="primary" v-model="info.name" hide-details tabindex="1"></v-text-field>
+ <div v-else>{{ group.name || '-' }}</div>
+ </div>
</div>
- </div>
- </v-flex>
- <v-flex>
- <div class="info-box">
- <div class="body-2 info-heading"><v-icon>device_hub</v-icon><span>{{ $t('parents') }}</span></div>
- <div class="info-text">
- <select-box v-if="editMode" v-model="parents" :items="groupList" class="info-input" hide-details></select-box>
- <div v-else class="chip-container non-selectable">
- <v-tooltip v-for="parent in firstParents" :key="parent.id" top open-delay="800">
- <template #activator="{ on }">
- <v-chip v-on="on" small label style="width: calc(50% - 8px)" @click="openParent(parent)">
- <span class="chip-text">{{ parent.name || parent.id }}</span>
- </v-chip>
- </template>
- <span>{{ parent.name || parent.id }}</span>
- </v-tooltip>
- <span v-if="group.parents && group.parents.length > 5" class="and-more">+ {{ group.parents.length - 5 }} {{ $t('more') }}</span>
- <span v-else-if="group.parents === undefined || group.parents.length === 0">-</span>
+ </v-flex>
+ <v-flex>
+ <div class="info-box">
+ <div class="body-2 info-heading"><v-icon>device_hub</v-icon><span>{{ $t('parents') }}</span></div>
+ <div class="info-text">
+ <select-box v-if="editMode" v-model="parents" :items="groupList" class="info-input" hide-details></select-box>
+ <div v-else class="chip-container non-selectable">
+ <v-tooltip v-for="parent in firstParents" :key="parent.id" top open-delay="800">
+ <template #activator="{ on }">
+ <v-chip v-on="on" small label style="width: calc(50% - 8px)" @click="openParent(parent)">
+ <span class="chip-text">{{ parent.name || parent.id }}</span>
+ </v-chip>
+ </template>
+ <span>{{ parent.name || parent.id }}</span>
+ </v-tooltip>
+ <span v-if="group.parents && group.parents.length > 5" class="and-more">+ {{ group.parents.length - 5 }} {{ $t('more') }}</span>
+ <span v-else-if="group.parents === undefined || group.parents.length === 0">-</span>
+ </div>
</div>
</div>
- </div>
- </v-flex>
- <v-flex>
- <div class="info-box">
- <div class="body-2 info-heading"><v-icon>list</v-icon><span>{{ $t('config') }}</span></div>
- <div class="info-text">
- <v-select v-if="editMode"
- class="info-input"
- clearable
- item-text="name"
- item-value="id"
- :menu-props="{ offsetY: '' }"
- hide-details
- color="primary"
- v-model="info.configId"
- :items="configList"
- ></v-select>
- <div v-else>{{ configName || '-' }}</div>
+ </v-flex>
+ <v-flex>
+ <div class="info-box">
+ <div class="body-2 info-heading"><v-icon>list</v-icon><span>{{ $t('config') }}</span></div>
+ <div class="info-text">
+ <v-select v-if="editMode"
+ class="info-input"
+ clearable
+ item-text="name"
+ item-value="id"
+ :menu-props="{ offsetY: '' }"
+ hide-details
+ color="primary"
+ v-model="info.configId"
+ :items="configList"
+ ></v-select>
+ <div v-else>{{ configName || '-' }}</div>
+ </div>
</div>
+ </v-flex>
+ </v-layout>
+ </v-flex>
+ <v-flex lg4 sm6 xs12 order-lg2 order-xs3>
+ <div class="info-box">
+ <div class="body-2 info-heading"><v-icon>description</v-icon><span>{{ $t('description') }}</span></div>
+ <div class="info-text">
+ <v-textarea v-if="editMode" class="info-input" rows="1" auto-grow hide-details color="primary" v-model="info.description" tabindex="2"></v-textarea>
+ <div v-else style="white-space: pre-wrap;">{{ group.description || '-' }}</div>
</div>
- </v-flex>
- </v-layout>
- </v-flex>
- <v-flex lg4 sm6 xs12 order-lg2 order-xs3>
- <div class="info-box">
- <div class="body-2 info-heading"><v-icon>description</v-icon><span>{{ $t('description') }}</span></div>
- <div class="info-text">
- <v-textarea v-if="editMode" class="info-input" rows="1" auto-grow hide-details color="primary" v-model="info.description" tabindex="2"></v-textarea>
- <div v-else style="white-space: pre-wrap;">{{ group.description || '-' }}</div>
</div>
- </div>
- <div class="info-box">
- <div class="body-2 info-heading"><v-icon>settings_ethernet</v-icon><span>{{ $t('ipranges') }}</span></div>
- <div class="info-text">
- <div v-if="editMode">
- <div v-for="(iprange, index) in ipranges" :key="index">
- <div class="iprange">
- <v-btn class="iprange-button" small icon @click="removeIprange(index)"><v-icon>remove</v-icon></v-btn>
- <v-text-field solo flat hide-details :label="$t('startIp')" color="primary" v-model="iprange.startIp" single-line></v-text-field>
- <span class="ip-seperator">-</span>
- <v-text-field solo flat hide-details :label="$t('endIp')" color="primary" v-model="iprange.endIp" single-line></v-text-field>
+ <div class="info-box">
+ <div class="body-2 info-heading"><v-icon>settings_ethernet</v-icon><span>{{ $t('ipranges') }}</span></div>
+ <div class="info-text">
+ <div v-if="editMode">
+ <div v-for="(iprange, index) in ipranges" :key="index">
+ <div class="iprange">
+ <v-btn class="iprange-button" small icon @click="removeIprange(index)"><v-icon>remove</v-icon></v-btn>
+ <v-text-field solo flat hide-details :label="$t('startIp')" color="primary" v-model="iprange.startIp" single-line></v-text-field>
+ <span class="ip-seperator">-</span>
+ <v-text-field solo flat hide-details :label="$t('endIp')" color="primary" v-model="iprange.endIp" single-line></v-text-field>
+ </div>
+ <v-divider></v-divider>
+ </div>
+ <div class="iprange-add-wrapper">
+ <v-btn class="iprange-button" small icon @click="addIprange"><v-icon>add</v-icon></v-btn>
</div>
- <v-divider></v-divider>
</div>
- <div class="iprange-add-wrapper">
- <v-btn class="iprange-button" small icon @click="addIprange"><v-icon>add</v-icon></v-btn>
+ <div v-else>
+ <table>
+ <tr v-for="(iprange, index) in group.ipranges" :key="index">
+ <td class="text-xs-right">{{ iprange.startIp }}</td>
+ <td class="ip-seperator">-</td>
+ <td>{{ iprange.endIp }}</td>
+ </tr>
+ </table>
+ <div v-if="group.ipranges && group.ipranges.length === 0">-</div>
</div>
</div>
+ </div>
+ </v-flex>
+ <v-flex lg4 xs12 order-lg3 order-xs1 class="text-xs-right">
+ <div class="info-box">
+ <div v-if="!editMode">
+ <v-btn color="error" flat @click="deleteGroup" class="info-buttons">
+ <v-icon left>delete</v-icon>{{ $t('delete') }}
+ </v-btn>
+ <v-btn color="primary" flat @click="editInfo" class="info-buttons">
+ <v-icon left>create</v-icon>{{ $t('edit') }}
+ </v-btn>
+ </div>
<div v-else>
- <table>
- <tr v-for="(iprange, index) in group.ipranges" :key="index">
- <td class="text-xs-right">{{ iprange.startIp }}</td>
- <td class="ip-seperator">-</td>
- <td>{{ iprange.endIp }}</td>
- </tr>
- </table>
- <div v-if="group.ipranges && group.ipranges.length === 0">-</div>
+ <v-btn color="primary" flat @click="cancelEdit" class="info-buttons">{{ $t('cancel') }}</v-btn>
+ <v-btn color="primary" @click="saveData" class="info-buttons" tabindex="3">
+ <v-icon left>save</v-icon>{{ $t('save') }}
+ </v-btn>
</div>
</div>
- </div>
- </v-flex>
- <v-flex lg4 xs12 order-lg3 order-xs1 class="text-xs-right">
- <div class="info-box">
- <div v-if="!editMode">
- <v-btn color="error" flat @click="deleteGroup" class="info-buttons">
- <v-icon left>delete</v-icon>{{ $t('delete') }}
- </v-btn>
- <v-btn color="primary" flat @click="editInfo" class="info-buttons">
- <v-icon left>create</v-icon>{{ $t('edit') }}
- </v-btn>
- </div>
- <div v-else>
- <v-btn color="primary" flat @click="cancelEdit" class="info-buttons">{{ $t('cancel') }}</v-btn>
- <v-btn color="primary" @click="saveData" class="info-buttons" tabindex="3">
- <v-icon left>save</v-icon>{{ $t('save') }}
- </v-btn>
- </div>
- </div>
- </v-flex>
- </v-layout>
- </v-card-text>
- </v-tab-item>
- <v-tab-item v-if="group.id !== 'create'" lazy :transition="false" :reverse-transition="false">
- <group-module-group-list :tabIndex="tabIndex" :groupId="group.id" :groups="group.subgroups || []" />
- </v-tab-item>
- <v-tab-item v-if="group.id !== 'create'" lazy :transition="false" :reverse-transition="false">
- <group-module-client-list :tabIndex="tabIndex" :groupId="group.id" :clients="group.clients || []" />
- </v-tab-item>
+ </v-flex>
+ </v-layout>
+ </v-card-text>
+ </v-tab-item>
+ <v-tab-item v-if="group.id !== 'create'" lazy :transition="false" :reverse-transition="false">
+ <group-module-group-list :tabIndex="tabIndex" :groupId="group.id" :groups="group.subgroups || []" />
+ </v-tab-item>
+ <v-tab-item v-if="group.id !== 'create'" lazy :transition="false" :reverse-transition="false">
+ <group-module-client-list :tabIndex="tabIndex" :groupId="group.id" :clients="group.clients || []" />
+ </v-tab-item>
+ </v-tabs-items>
</v-tabs>
</v-card>
</template>