Skip to content
GitLab
Commit d3d2b963 authored by gj4210's avatar gj4210 👁
Browse files

ADD: Added CopyField 

+ refactored in Tokens.vue
+ used it in TransactionList
+ fixed TransactionList layout
parent 868199d2
Pipeline #91377 passed with stages
in 7 minutes and 40 seconds
Hide whitespace changes
Inline Side-by-side
frontend/src/App.vue
View file @ d3d2b963
......@@ -122,8 +122,4 @@
top: 0;
}
}
.popover-wide {
max-width: 100%;
}
</style>
\ No newline at end of file
frontend/src/assets/css/net-suite.css
View file @ d3d2b963
......@@ -275,3 +275,12 @@ table.collapse.in {
.pull-left {
float: left;
}
.invisible-scrollbar::-webkit-scrollbar {
width: 0;
background: transparent;
}
.popover-wide {
max-width: 100%;
}
\ No newline at end of file
frontend/src/components/CopyField.vue 0 → 100644
View file @ d3d2b963
<template>
<div class="copy-field">
<b-input-group class="mb-2">
<b-form-textarea v-if="multiline" rows="10" :id="'text-input' + id" ref="textInput" v-model="text"
readonly :class="`border-${variant} text-${variant} invisible-scrollbar`"/>
<b-form-input v-else :id="'text-input' + id" ref="textInput" v-model="text" readonly/>
<b-tooltip :target="'text-input' + id" :show.sync="text_copied" :disabled="!text_copied" placement="bottom"
:variant="variant" :class="`border-${variant} text-${variant}`">
Kopiert.
</b-tooltip>
<b-input-group-append>
<b-button :variant="variant" @click="copyText">
<font-awesome-icon :icon="['fas', 'copy']"/>
</b-button>
</b-input-group-append>
</b-input-group>
</div>
</template>
<script>
export default {
name: "CopyField",
props: {
'text': String,
'variant': {
'type': String,
'default': 'primary'
},
'multiline': {
'type': Boolean,
'default': false
}
},
data() {
return {
id: null,
text_copied: false
}
},
methods: {
copyText() {
// https://www.w3schools.com/howto/howto_js_copy_clipboard.asp
let text_input = this.$refs.textInput
text_input.select()
text_input.setSelectionRange(0, 99999) // For mobile devices
document.execCommand("copy")
this.text_copied = true
},
},
mounted() {
this.id = this._uid
}
}
</script>
\ No newline at end of file
frontend/src/components/TransactionList.vue
View file @ d3d2b963
<template>
<div class="transaction-list">
<div class="transaction-list invisible-scrollbar">
<b-button-toolbar justify>
<b-button-group class="mx-auto">
<b-button-group v-b-tooltip.hover title="Rückgängig machen">
......@@ -22,77 +22,77 @@
<Draggable v-else v-model="$store.state.ta_list" @start="drag=true" @end="drag=false" handle=".handle">
<b-card v-for="(element, index) in $store.state.ta_list" :key="element.id"
:border-variant="function2variant(element.object_function)" class="mb-3 shadow" no-body>
<b-row no-gutters>
<b-col cols="1" class="mb-0">
<b-badge :variant="function2variant(element.object_function)" class="element-number">
<div class="handle">
{{index + 1}}
</div>
<!-- TODO: Mouse feedback on click -->
<font-awesome-icon class="move-icon"
:icon="['fas','caret-up']"
@click="$store.state.ta_list.move(index, index - 1)"/>
<font-awesome-icon class="move-icon"
:icon="['fas','caret-down']"
@click="$store.state.ta_list.move(index, index + 1)"/>
</b-badge>
</b-col>
<b-col>
<b-card-body>
<b-row>
<b-col>
{{function2text(element.object_function)}} in {{element.object_fq_name}}
<ul>
<li v-for="field in element.preview_fields" v-bind:key="field">{{element.func_descr[field].descriptionObjTypeScope}}: <code>{{element.parameters.new[field]}}</code></li>
</ul>
<div class="error-warning"
v-if="$store.state.transaction_error && $store.state.transaction_error.uuid === element.uuid">
<font-awesome-icon :icon="['fas','exclamation-triangle']"/>
Etwas ist schiefgelaufen.
</div>
</b-col>
<b-col cols="3" class="mb-0">
<b-button-group vertical>
<b-button :disabled="should_edit" block variant="outline-primary"
:id="'button-edit-action-' + index"
@click="editElement(element)">
<font-awesome-icon :icon="['far', 'edit']"/>
</b-button>
<b-tooltip placement="left" :target="'button-edit-action-' + index"
triggers="hover" variant="primary" container="sidebar">
Aktion bearbeiten
</b-tooltip>
<b-button block variant="outline-danger"
:id="'button-delete-action-' + index"
@click="$store.commit('removeTransactionElement', element)">
<font-awesome-icon :icon="['far', 'trash-alt']"/>
</b-button>
<b-tooltip placement="left" :target="'button-delete-action-' + index"
triggers="hover" variant="danger" container="sidebar">
Aktion löschen
</b-tooltip>
</b-button-group>
</b-col>
</b-row>
</b-card-body>
</b-col>
</b-row>
<div class="element-number handle" :class="`badge badge-${function2variant(element.object_function)}`">
{{index + 1}}
<!-- TODO: Mouse feedback on click -->
<div class="move-icons">
<font-awesome-icon class="move-icon"
:icon="['fas','caret-up']"
@click="$store.state.ta_list.move(index, index - 1)"/>
<font-awesome-icon class="move-icon"
:icon="['fas','caret-down']"
@click="$store.state.ta_list.move(index, index + 1)"/>
</div>
</div>
<b-card-body class="element-content">
{{function2text(element.object_function)}} in {{element.object_fq_name}}
<ul>
<li v-for="field in element.preview_fields" v-bind:key="field">
{{element.func_descr[field].descriptionObjTypeScope}}: <code>{{element.parameters.new[field]}}</code>
</li>
</ul>
<div class="error-warning"
v-if="$store.state.transaction_error && $store.state.transaction_error.uuid === element.uuid">
<font-awesome-icon :icon="['fas','exclamation-triangle']"/>
{{$store.state.transaction_error.error.error.description}}
</div>
<b-button-group class="d-flex">
<b-button :disabled="should_edit" variant="outline-primary"
:id="'button-edit-action-' + index"
@click="editElement(element)">
<font-awesome-icon :icon="['far', 'edit']"/>
</b-button>
<b-tooltip placement="bottom" :target="'button-edit-action-' + index"
triggers="hover" variant="primary" container="sidebar">
Aktion bearbeiten
</b-tooltip>
<b-button variant="outline-danger"
:id="'button-delete-action-' + index"
@click="$store.commit('removeTransactionElement', element)">
<font-awesome-icon :icon="['far', 'trash-alt']"/>
</b-button>
<b-tooltip placement="bottom" :target="'button-delete-action-' + index"
triggers="hover" variant="danger" container="sidebar">
Aktion löschen
</b-tooltip>
</b-button-group>
</b-card-body>
</b-card>
</Draggable>
<hr/>
<b-button-toolbar justify>
<b-button-group class="mx-auto">
<b-button :disabled="$store.state.ta_list == null || $store.state.ta_list.length === 0" @click="$store.commit('emptyTransactionList')" variant="outline-danger">
<font-awesome-icon :icon="['far', 'trash-alt']"></font-awesome-icon>
Liste löschen
</b-button>
<b-button :disabled="$store.state.ta_list == null || $store.state.ta_list.length === 0" variant="outline-primary" @click="$store.commit('testTransaction')">Testen</b-button>
<b-button :disabled="$store.state.ta_list == null || $store.state.ta_list.length === 0" variant="outline-success" @click="$store.commit('executeTransaction')">
<font-awesome-icon :icon="['far', 'paper-plane']"></font-awesome-icon>
Anwenden
</b-button>
</b-button-group>
</b-button-toolbar>
<b-button-group class="d-flex mb-3">
<b-button :disabled="$store.state.ta_list == null || $store.state.ta_list.length === 0"
@click="$store.commit('emptyTransactionList')" variant="outline-danger">
<font-awesome-icon :icon="['far', 'trash-alt']"></font-awesome-icon>
Liste löschen
</b-button>
<b-button :disabled="$store.state.ta_list == null || $store.state.ta_list.length === 0"
variant="outline-primary" @click="$store.commit('testTransaction')">Testen
</b-button>
<b-button :disabled="$store.state.ta_list == null || $store.state.ta_list.length === 0"
variant="outline-success" @click="$store.commit('executeTransaction')">
<font-awesome-icon :icon="['far', 'paper-plane']"></font-awesome-icon>
Anwenden
</b-button>
</b-button-group>
<template v-if="$store.state.transaction_error">
<hr/>
<p class="text-center text-danger">
<font-awesome-icon :icon="['fas','exclamation-triangle']"/>
Weitere Fehlerinformationen:
</p>
<CopyField variant="danger" :text="$store.state.transaction_error" multiline/>
</template>
<DBEditor modal_id="ta-edit"
:object_fq_name="edit_elem.object_fq_name"
:object_function="edit_elem.object_function"
......@@ -113,10 +113,11 @@
import DBEditor from "./DBEditor";
import TransactionUtil from '@/util/transactionutil';
import Vue from 'vue'
import CopyField from "./CopyField";
export default {
name: "TransactionList",
components: {Draggable, DBEditor},
components: {CopyField, Draggable, DBEditor},
methods: {
function2variant: TransactionUtil.function2variant,
function2text: TransactionUtil.function2text,
......@@ -156,17 +157,24 @@
<style scoped>
.element-number {
height: 100%;
position: absolute;
top: 0;
bottom: 0;
border-radius: 0;
font-size: 100%;
padding-left: 0;
padding-right: 0;
text-align: center;
width: 30px;
}
.handle {
cursor: grab;
height: 60px;
width: 30px;
}
.move-icons {
position: absolute;
bottom: 10px;
}
.move-icon {
......@@ -178,10 +186,22 @@
font-size: 24px;
width: 30px;
user-select: none;
z-index: 90001;
cursor: auto;
}
.element-content {
margin-left: 30px;
}
.element-buttons {
position: relative;
right: 0;
top: 0;
}
.error-warning {
position: absolute;
position: relative;
bottom: 0;
color: red;
}
......
frontend/src/views/netdb/Tokens.vue
View file @ d3d2b963
......@@ -94,6 +94,16 @@
:target="'account-create-role-badge-' + role.mgr_login_name + '-' + role.role_fq_name"
triggers="focus" custom-class="popover-wide"
placement="bottom">
<template v-for="contained_role in role.contained_roles">
<b-button
:key="'role-badge-' + role.mgr_login_name + '-contained-' + contained_role"
:id="'account-create-role-badge-' + role.mgr_login_name + '-contained-' + contained_role"
:style="{background: contained_role.toHSL({lit: [30, 40]}), border: 'none'}"
class="mr-1 mb-1 badge">
{{contained_role.split('.')[0].toUpperCase()}}<br>{{contained_role.split('.')[1]}}
<b-checkbox v-model="new_account.role_selection[index]"/>
</b-button>
</template>
<b-table :fields="permission_list_fields"
:items="role.contained_permissions"
sticky-header/>
......@@ -164,18 +174,7 @@
</template>
</b-modal>
<b-modal id="modal-token" size=lg title="Token erstellt">
<b-input-group>
<b-form-input id="input-token" v-model="token" readonly/>
<b-tooltip target="input-token" :show.sync="token_copied" :disabled="!token_copied" placement="bottom"
variant="primary">
Kopiert.
</b-tooltip>
<b-input-group-append>
<b-button variant="primary" @click="copyToken">
<font-awesome-icon :icon="['fas', 'copy']"/>
</b-button>
</b-input-group-append>
</b-input-group>
<CopyField :text="token"/>
<b-alert show variant="warning" class="mb-0 mt-3">Bewahren Sie das Token gut auf. Hier werden Sie es nicht
mehr einsehen können!
</b-alert>
......@@ -316,8 +315,7 @@
class="m-0"
striped
responsive
:tbody-transition-props="leaving_transition_properties"
primary-key="description"> <!-- TODO: Get table animations to work -->
primary-key="description">
<template v-slot:head(buttons)>
<template v-if="account.parent_login_name !== null">
<b-button block variant="outline-success"
......@@ -366,10 +364,11 @@
import DateTimePicker from "../../components/DateTimePicker";
import RoleService from '@/api-services.gen/cntl.mgr2role'
import Loading from "../../components/Loading";
import CopyField from "../../components/CopyField";
export default {
name: 'tokens',
components: {Loading, DateTimePicker},
components: {CopyField, Loading, DateTimePicker},
data() {
return {
tokens_by_account: null,
......@@ -432,10 +431,6 @@
modal_alert_content: "",
waiting: false,
token: "",
token_copied: false,
leaving_transition_properties: { // TODO: Get table animations to work
name: 'flip-list'
},
max_role_badge_count: 10,
max_permission_count: 10
}
......@@ -549,7 +544,6 @@
roles.push(this.roles_by_account[this.$store.state.user.login_name][index].role_fq_name)
}
})
window.console.log(roles)
AccountTokenService.update(this.$store.state.netdb_axios_config, {
description_new: this.new_account.description,
login_name_old: this.new_account.login_name,
......@@ -641,14 +635,6 @@
d.setDate(d.getDate() + 29)
return d
},
copyToken() {
// https://www.w3schools.com/howto/howto_js_copy_clipboard.asp
let text = document.getElementById("input-token")
text.select()
text.setSelectionRange(0, 99999) /*For mobile devices*/
document.execCommand("copy")
this.token_copied = true
},
formatExpiredTokens(tokens) {
tokens.forEach(token => {
if (token.is_expired) {
......@@ -673,19 +659,4 @@
}
}
}
</script>
<style scoped>
.collapse-icon {
transition: .2s transform ease-in-out;
}
.collapsed .collapse-icon {
transform: rotate(-180deg);
}
table .flip-list-move { /* TODO: Get table animations to work */
transition: transform 1s;
}
</style>
</script>
\ No newline at end of file
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment

Imprint