Skip to content
Snippets Groups Projects
Commit 2a6d26f7 authored by Benedikt Heinrichs's avatar Benedikt Heinrichs
Browse files

Merge branch 'Topic/1225-CleanUpApps' into 'Product/1273-CleanUpUserProfileProjectCreation'

Update: Cleanup Apps

See merge request !66
parents 9c28d012 8fb18f32
No related branches found
No related tags found
3 merge requests!68Product/1273 clean up user profile project creation,!67Sprint/2021 02,!66Update: Cleanup Apps
This diff is collapsed.
This diff is collapsed.
<template> <template>
<div> <div>
<b-button variant="danger" v-b-modal.modal-prevent-closing>{{ $t('deleteButton') }}</b-button> <b-button variant="danger" @click="resetModal = true">{{ $t('deleteButton') }}</b-button>
<b-modal <coscine-modal
id="modal-prevent-closing" v-model="resetModal"
ref="modal"
:title="$t('deleteModalHeadline')" :title="$t('deleteModalHeadline')"
@show="resetModal" :headerText="$t('deleteModalDescription')"
@hidden="resetModal" :hideFooter="false"
@ok="handleOk" @confirmModal="handleSubmit">
v-bind:displayName="displayName"
>
<form ref="form" @submit.stop.prevent="handleSubmit"> <form ref="form" @submit.stop.prevent="handleSubmit">
<b-form-group <b-form-group
:state="deleteInputState" :state="deleteInputState"
:label="$t('deleteModalDescription')"
label-for="delete_name_input"
> >
<div id="displayName"> <div id="displayName">
{{ this.displayName }} {{ this.displayName }}
...@@ -31,15 +26,7 @@ ...@@ -31,15 +26,7 @@
</div> </div>
</b-form-group> </b-form-group>
</form> </form>
<template v-slot:modal-footer="{ ok, cancel }"> </coscine-modal>
<b-button variant="secondary" @click="cancel()">
{{$t('cancel')}}
</b-button>
<b-button :disabled="isWaitingForResponse" variant="danger" @click="ok()">
{{$t('deleteButton')}}
</b-button>
</template>
</b-modal>
<coscine-loading-spinner <coscine-loading-spinner
:isWaitingForResponse="isWaitingForResponse" :isWaitingForResponse="isWaitingForResponse"
/> />
...@@ -48,11 +35,11 @@ ...@@ -48,11 +35,11 @@
<script lang="ts"> <script lang="ts">
import Vue from 'vue'; import Vue from 'vue';
import { CoscineLoadingSpinner } from '@coscine/component-library'; import { CoscineLoadingSpinner, CoscineModal } from '@coscine/component-library';
import { ProjectApi, SubProjectApi } from '@coscine/api-connection'; import { ProjectApi, SubProjectApi } from '@coscine/api-connection';
import VueI18n from 'vue-i18n'; import VueI18n from 'vue-i18n';
import { GuidUtil, LinkUtil } from '@coscine/app-util'; import { LinkUtil } from '@coscine/app-util';
Vue.use(VueI18n); Vue.use(VueI18n);
const i18n = new VueI18n({ const i18n = new VueI18n({
...@@ -66,9 +53,11 @@ export default Vue.extend({ ...@@ -66,9 +53,11 @@ export default Vue.extend({
name: 'DeleteModal', name: 'DeleteModal',
components: { components: {
CoscineLoadingSpinner, CoscineLoadingSpinner,
CoscineModal,
}, },
data() { data() {
return { return {
resetModal: false,
deleteName: '', deleteName: '',
deleteInputState: null, deleteInputState: null,
showHelp: false, showHelp: false,
...@@ -86,6 +75,13 @@ export default Vue.extend({ ...@@ -86,6 +75,13 @@ export default Vue.extend({
projectId: String, projectId: String,
displayName: String, displayName: String,
}, },
// --- reset modal by changing visibility state (show/hide modal) ---
watch: {
resetModal() {
this.deleteName = '';
this.deleteInputState = null;
},
},
methods: { methods: {
checkFormValidity() { checkFormValidity() {
let valid = (this.$refs.form as any).checkValidity(); let valid = (this.$refs.form as any).checkValidity();
...@@ -98,14 +94,6 @@ export default Vue.extend({ ...@@ -98,14 +94,6 @@ export default Vue.extend({
disableHelp() { disableHelp() {
this.showHelp = false; this.showHelp = false;
}, },
resetModal() {
this.deleteName = '';
this.deleteInputState = null;
},
handleOk(bvModalEvt: any) {
bvModalEvt.preventDefault();
this.handleSubmit();
},
afterDeleteHandler(projectSlug: string = '') { afterDeleteHandler(projectSlug: string = '') {
if (projectSlug !== '') { if (projectSlug !== '') {
LinkUtil.redirectToExternalProject(projectSlug); LinkUtil.redirectToExternalProject(projectSlug);
...@@ -143,6 +131,7 @@ export default Vue.extend({ ...@@ -143,6 +131,7 @@ export default Vue.extend({
}); });
}); });
}); });
this.resetModal = false;
}, },
}, },
}); });
...@@ -165,10 +154,9 @@ export default Vue.extend({ ...@@ -165,10 +154,9 @@ export default Vue.extend({
opacity: .5; opacity: .5;
} }
</style> </style>
<style scoped> <style scoped>
.invalid-tooltip { .invalid-tooltip {
margin-top: -20px; margin-top: -5rem;
} }
#displayName { #displayName {
font-size: large; font-size: large;
......
declare module 'vuejs-datepicker';
declare module 'vuejs-datepicker/dist/locale';
This diff is collapsed.
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment