summaryrefslogtreecommitdiffstats
path: root/webapp/src/components/RegistrationModule.vue
diff options
context:
space:
mode:
Diffstat (limited to 'webapp/src/components/RegistrationModule.vue')
-rw-r--r--webapp/src/components/RegistrationModule.vue39
1 files changed, 30 insertions, 9 deletions
diff --git a/webapp/src/components/RegistrationModule.vue b/webapp/src/components/RegistrationModule.vue
index 8448dd4..c921e9c 100644
--- a/webapp/src/components/RegistrationModule.vue
+++ b/webapp/src/components/RegistrationModule.vue
@@ -1,12 +1,16 @@
<i18n>
{
"en": {
- "hooks": "Registration hooks",
- "createHook": "Create hook"
+ "hooks": "Registration Hooks",
+ "hooksInOrder": "Registration Hooks (In Order of Execution)",
+ "createHook": "Create hook",
+ "groupRestricted": "Restriced to selected groups"
},
"de": {
- "hooks": "Registrierungs Hooks ",
- "createHook": "Hook erstellen"
+ "hooks": "Registrierungs Hooks",
+ "hooksInOrder": "Registration Hooks (In Ausführungsreihenfolge)",
+ "createHook": "Hook erstellen",
+ "groupRestricted": "Auf ausgewählte Gruppen beschränkt"
}
}
</i18n>
@@ -22,19 +26,24 @@
</v-card>
<v-tabs-items v-model="tabs" style="padding-bottom: 20px">
<v-tab-item>
- <v-subheader>{{ $t('hooks') }}</v-subheader>
+ <v-subheader>{{ $t('hooksInOrder') }}</v-subheader>
<v-card v-if="hooks.length > 0">
<v-list two-line>
<draggable :value="hooks" @input="setHooks($event)" :options="{ handle:'.handle' }">
- <v-list-tile v-for="hook in hooks" :key="hook.id" @click.stop @dblclick="editHook(hook)">
+ <v-list-tile v-for="(hook, index) in hooks" :key="hook.id" @click.stop @dblclick="editHook(hook)">
<v-list-tile-action class="handle">
- <v-icon>drag_handle</v-icon>
+ <v-icon>drag_handle</v-icon>{{ index + 1 }}
</v-list-tile-action>
<v-list-tile-content>
<v-list-tile-title>{{ hook.name }}<small class="type">{{ hook.type }}</small></v-list-tile-title>
<v-list-tile-sub-title>{{ hook.description }}</v-list-tile-sub-title>
</v-list-tile-content>
- <v-icon v-if="hook.groups.length > 0">device_hub</v-icon>
+ <v-tooltip v-if="hook.groups.length > 0" top>
+ <template #activator="{ on }">
+ <v-icon v-on="on" small>category</v-icon>
+ </template>
+ <span>{{ $t('groupRestricted') }}</span>
+ </v-tooltip>
<v-list-tile-action>
<v-btn @click="editHook(hook)" icon><v-icon color="primary">edit</v-icon></v-btn>
</v-list-tile-action>
@@ -111,25 +120,37 @@ export default {
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.handle {
- margin-left: 12px;
+ margin-left: 8px;
+ margin-right: 24px;
+ font-weight: bold;
+ font-size: 18px;
+ display: flex;
+ flex-direction: row;
+ align-items: center;
}
+
.delete {
margin-right: 12px;
}
+
.type {
margin-left: 24px;
}
+
.hook-info {
display: flex;
flex-direction: row;
width: 100%;
}
+
.hook-info > .hook-type {
min-width: 60px;
}
+
.hook-info > .hook-name {
white-space: nowrap;
}
+
.hook-info > .hook-description {
margin-left: 40px;
overflow: hidden;