New: Add adaptable save and delete handler (coscine/issues#607)

.gitignore

 .DS_Store
 node_modules
 /dist
-package-lock.json
-
 
 # local env files
 .env.local

package.json

@@ -22,44 +22,43 @@
     "dist/*"
   ],
   "dependencies": {
-    "@coscine/api-connection": "^1.2.0",
-    "@types/jquery": "^3.3.30",
-    "@types/vuelidate": "^0.7.5",
-    "axios": "^0.19.0",
-    "bootstrap-vue": "^2.0.0-rc.28",
+    "@coscine/api-connection": "^1.6.0",
+    "@types/jquery": "^3.3.31",
+    "@types/vuelidate": "^0.7.10",
+    "bootstrap-vue": "^2.3.0",
     "jquery": "^3.4.1",
-    "vue": "^2.6.6",
-    "vue-i18n": "^8.14.0",
+    "vue": "^2.6.11",
+    "vue-i18n": "^8.15.3",
     "vue-multiselect": "^2.1.6",
     "vuejs-datepicker": "^1.6.2",
     "vue-loading-overlay": "^3.2.0",
-    "vuelidate": "^0.7.4"
+    "vuelidate": "^0.7.5"
   },
   "devDependencies": {
-    "@semantic-release/commit-analyzer": "^6.1.0",
-    "@semantic-release/git": "^7.0.5",
-    "@semantic-release/gitlab": "^3.0.5",
-    "@semantic-release/npm": "^5.1.1",
-    "@semantic-release/release-notes-generator": "^7.1.4",
-    "@types/chai": "^4.1.0",
-    "@types/mocha": "^5.2.4",
-    "@vue/cli-plugin-babel": "^3.5.0",
-    "@vue/cli-plugin-typescript": "^3.5.0",
-    "@vue/cli-plugin-unit-mocha": "^3.5.0",
-    "@vue/cli-service": "^3.5.0",
-    "@vue/test-utils": "1.0.0-beta.29",
+    "@semantic-release/commit-analyzer": "^8.0.0",
+    "@semantic-release/git": "^9.0.0",
+    "@semantic-release/gitlab": "^6.0.0",
+    "@semantic-release/npm": "^7.0.0",
+    "@semantic-release/release-notes-generator": "^9.0.0",
+    "@types/chai": "^4.2.7",
+    "@types/mocha": "^5.2.7",
+    "@vue/cli-plugin-babel": "^4.1.2",
+    "@vue/cli-plugin-typescript": "^4.1.2",
+    "@vue/cli-plugin-unit-mocha": "^4.1.2",
+    "@vue/cli-service": "^4.1.2",
+    "@vue/test-utils": "1.0.0-beta.31",
     "bili": "^4.8.1",
-    "chai": "^4.1.2",
-    "rollup-plugin-typescript2": "^0.22.1",
-    "rollup-plugin-vue": "5.0.1",
-    "semantic-release": "^15.12.0",
-    "semantic-release-gitlab": "^7.1.0",
-    "typescript": "^3.5.3",
-    "vue-template-compiler": "^2.6.10"
+    "chai": "^4.2.0",
+    "rollup-plugin-typescript2": "^0.25.3",
+    "rollup-plugin-vue": "5.1.6",
+    "semantic-release": "^17.0.1",
+    "@hutson/semantic-delivery-gitlab": "^9.1.0",
+    "typescript": "^3.7.5",
+    "vue-template-compiler": "^2.6.11"
   },
   "repository": {
     "type": "git",
     "url": "https://git.rwth-aachen.de/coscine/vue/project-creation.git"
   },
-  "license": "ISC"
+  "license": "MIT"
 }

src/CreateProject.vue

@@ -184,8 +184,9 @@
             <DeleteModal
               :projectId="projectId"
               :displayName="form.DisplayName"
-              :projectParentId="parentId"
+              :projectParentId="form.ParentId"
               :languageLocale="languageLocale"
+              :handleDelete="$props.deleteHandler"
               @back="clickBack"
               style="display: inline;"
               v-show="isOwner"></DeleteModal>
@@ -193,7 +194,7 @@
               type="submit"
               variant="primary"
               class="btn-float-right"
-              :disabled="$v.form.$invalid || isUploadInProgess"
+              :disabled="$v.form.$invalid || isUploadInProgess || !$v.form.$anyDirty"
               name="save"
               @click.prevent="clickSave"
               v-show="isOwner || isNewProject"
@@ -338,7 +339,7 @@ export default Vue.extend({
         Keywords: [] as object[],
         Visibility: {},
         GrantId: '',
-        ParentId: String,
+        ParentId: '',
       },
       initialState: {
         ProjectName: '',
@@ -362,9 +363,16 @@ export default Vue.extend({
     };
   },
   props: {
-    parentId: String,
     projectId: String,
     languageLocale: String,
+    saveHandler: {
+      type: Function,
+      default: redirectToProject,
+    },
+    deleteHandler: {
+      type: Function,
+      default: redirectToProject,
+    },
   },
   methods: {
     addTag(newTag: any) {
@@ -390,7 +398,7 @@ export default Vue.extend({
     },
     clickSave() {
       this.$v.$touch();
-      if (this.$v.$anyError) {
+      if (this.$v.$anyError || !this.$v.$anyDirty) {
         return;
       }
       tag_inputs_helper.parseKeywords(this.form, ';');
@@ -405,7 +413,10 @@ export default Vue.extend({
         if (this.isNewProject) {
           ProjectApi.storeProject(
             this.form,
-            (response: any) => redirectToProject(response.data),
+            (response: any) => { 
+              this.$props.saveHandler(response.data);
+              this.handleAfterSave();
+            },
             defaultOnCatch,
           );
         } else {
@@ -413,14 +424,20 @@ export default Vue.extend({
             this.form,
             (response: any) => {
               response.data === 1
-                ? redirectToProject({id: this.projectId}) 
-                : redirectToProject({id: this.form.ParentId});
+                ? this.$props.saveHandler({id: this.projectId}) 
+                : this.$props.saveHandler({id: this.form.ParentId});
+              this.handleAfterSave();
             },
             defaultOnCatch,
           );
         }
       }
     },
+    handleAfterSave() {
+      this.isWaitingForResponse = false;
+      this.isUploadInProgess = false;
+      this.$v.$reset();
+    },
     translateProjectNameToDisplayName() {
       if (this.displayNameIsLocked) {
         return;
@@ -532,11 +549,11 @@ export default Vue.extend({
     background-color: #ffffff;
   }
   #CreateProject .multiselect {
-    height: calc(1.4em + .75rem + 2px);
+    min-height: calc(1.4em + .75rem + 2px);
   }
   #CreateProject .multiselect__input {
     border: 0px;
-    height: calc(1.4em + .75rem + 2px);
+    min-height: calc(1.4em + .75rem + 2px);
   }
   #CreateProject .multiselect__tags {
     border-radius: 0px;

src/components/DeleteModal.vue

@@ -52,7 +52,7 @@
 
 <script lang="ts">
 import Vue from 'vue';
-import { ProjectApi, defaultOnCatch, redirectToProject } from '@coscine/api-connection';
+import { ProjectApi, defaultOnCatch } from '@coscine/api-connection';
 
 import Loading from 'vue-loading-overlay';
 import 'vue-loading-overlay/dist/vue-loading.css';
@@ -92,6 +92,7 @@ export default Vue.extend({
     projectId: String,
     displayName: String,
     projectParentId: String,
+    handleDelete: Function,
   },
   methods: {
     checkFormValidity() {
@@ -122,7 +123,21 @@ export default Vue.extend({
       this.isDeletionInProgress = true;
       ProjectApi.deleteProject(
         this.projectId, 
-        (response: any) => { redirectToProject( { id: this.projectParentId }); },
+        (response: any) => { 
+          ProjectApi.getProjectInformation(
+            this.projectParentId, 
+            (response: any) => {
+              this.handleDelete({ id: this.projectParentId });
+              this.isWaitingForResponse = false;
+              this.isDeletionInProgress = false;
+            }, 
+            (errorResponse: any) => {
+              this.handleDelete({ id: null });
+              this.isWaitingForResponse = false;
+              this.isDeletionInProgress = false;
+            },
+          );
+        },
         defaultOnCatch,
       );
     },