Update: Changes in Participating Organizations Search (rpdm/issues#39)

.eslintrc.js

+module.exports = {
+  root: true,
+  env: {
+    node: true,
+  },
+  extends: [
+    "plugin:vue/essential",
+    "eslint:recommended",
+    "@vue/typescript/recommended",
+    "@vue/prettier",
+    "@vue/prettier/@typescript-eslint",
+  ],
+  parserOptions: {
+    ecmaVersion: 2020,
+  },
+  rules: {
+    "no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
+    "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off",
+  },
+};

package.json

@@ -42,17 +42,34 @@
     "@semantic-release/npm": "^7.0.6",
     "@semantic-release/release-notes-generator": "^9.0.1",
     "@types/node": "^14.14.20",
-    "@typescript-eslint/eslint-plugin": "^4.12.0",
-    "@typescript-eslint/parser": "^4.12.0",
+    "@typescript-eslint/eslint-plugin": "^4.18.0",
+    "@typescript-eslint/parser": "^4.18.0",
+    "@vue/cli-plugin-eslint": "~4.5.0",
     "@vue/cli-plugin-typescript": "^4.5.7",
     "@vue/cli-service": "^4.5.7",
+    "@vue/eslint-config-prettier": "^6.0.0",
+    "@vue/eslint-config-typescript": "^7.0.0",
     "conventional-changelog-eslint": "3.0.9",
     "core-js": "^3.8.2",
-    "eslint": "^7.17.0",
+    "eslint": "^6.7.2",
+    "eslint-plugin-prettier": "^3.3.1",
+    "eslint-plugin-vue": "^6.2.2",
+    "lint-staged": "^9.5.0",
+    "prettier": "^2.2.1",
     "semantic-release": "^17.3.1",
-    "typescript": "^4.0.3",
+    "tslib": "^2.3.0",
+    "typescript": "^4.3.3",
     "vue-template-compiler": "^2.6.12"
   },
+  "gitHooks": {
+    "pre-commit": "lint-staged"
+  },
+  "lint-staged": {
+    "*.{js,jsx,vue,ts,tsx}": [
+      "vue-cli-service lint",
+      "git add"
+    ]
+  },
   "repository": {
     "type": "git",
     "url": "https://git.rwth-aachen.de/coscine/frontend/libraries/project-creation.git"

src/components/DeleteModal.vue

 <template>
   <div>
-    <b-button variant="danger" @click="resetModal = true">{{ $t('deleteButton') }}</b-button>
+    <b-button variant="danger" @click="resetModal = true">{{
+      $t("deleteButton")
+    }}</b-button>
     <coscine-modal
       v-model="resetModal"
       :title="$t('deleteModalHeadline')"
       :headerText="$t('deleteModalDescription')"
       :hideFooter="false"
-      @confirmModal="handleSubmit">
-      <form ref="form" @submit.stop.prevent="handleSubmit">
-        <b-form-group
-          :state="deleteInputState"
+      @confirmModal="handleSubmit"
     >
+      <form ref="form" @submit.stop.prevent="handleSubmit">
+        <b-form-group :state="deleteInputState">
           <div id="displayName">
             {{ this.displayName }}
           </div>
@@ -22,40 +23,44 @@
             @change="disableHelp"
           ></b-form-input>
           <div class="invalid-tooltip" v-show="showHelp">
-            {{ $t('deleteModalHelp') }}
+            {{ $t("deleteModalHelp") }}
           </div>
         </b-form-group>
       </form>
     </coscine-modal>
-    <coscine-loading-spinner 
-      :isWaitingForResponse="isWaitingForResponse"
-    />      
+    <coscine-loading-spinner :isWaitingForResponse="isWaitingForResponse" />
   </div>
 </template>
 
 <script lang="ts">
-import { FormGroupPlugin , BFormInput } from 'bootstrap-vue';
-import Vue from 'vue';
+import { FormGroupPlugin, BFormInput } from "bootstrap-vue";
+import Vue from "vue";
 Vue.use(FormGroupPlugin);
-Vue.component('b-form-input', BFormInput);
+Vue.component("b-form-input", BFormInput);
 
-import { CoscineLoadingSpinner, CoscineModal } from '@coscine/component-library';
-import '@coscine/component-library/dist/index.css';
-import { ProjectApi, SubProjectApi } from '@coscine/api-connection';
+import {
+  CoscineLoadingSpinner,
+  CoscineModal,
+} from "@coscine/component-library";
+import "@coscine/component-library/dist/index.css";
+import { ProjectApi, SubProjectApi } from "@coscine/api-connection";
 
-import VueI18n from 'vue-i18n';
-import { LinkUtil } from '@coscine/app-util';
+import VueI18n from "vue-i18n";
+import { LinkUtil } from "@coscine/app-util";
 Vue.use(VueI18n);
 
 const i18n = new VueI18n({
-  locale: 'en',
-  messages: coscine.i18n['project-creation'],
+  locale: "en",
+  messages:
+    window.coscine && window.coscine.i18n
+      ? window.coscine.i18n["project-creation"]
+      : undefined,
   silentFallbackWarn: true,
 });
 
 export default Vue.extend({
   i18n,
-  name: 'DeleteModal',
+  name: "DeleteModal",
   components: {
     CoscineLoadingSpinner,
     CoscineModal,
@@ -63,7 +68,7 @@ export default Vue.extend({
   data() {
     return {
       resetModal: false,
-      deleteName: '',
+      deleteName: "",
       deleteInputState: null,
       showHelp: false,
       isWaitingForResponse: false,
@@ -74,7 +79,7 @@ export default Vue.extend({
   },
   props: {
     languageLocale: {
-      default: 'en',
+      default: "en",
       type: String,
     },
     projectId: String,
@@ -83,7 +88,7 @@ export default Vue.extend({
   // --- reset modal by changing visibility state (show/hide modal) ---
   watch: {
     resetModal() {
-      this.deleteName = '';
+      this.deleteName = "";
       this.deleteInputState = null;
     },
   },
@@ -99,8 +104,8 @@ export default Vue.extend({
     disableHelp() {
       this.showHelp = false;
     },
-    afterDeleteHandler(projectSlug: string = '') {
-      if (projectSlug !== '') {
+    afterDeleteHandler(projectSlug = "") {
+      if (projectSlug !== "") {
         LinkUtil.redirectToExternalProject(projectSlug);
       } else {
         LinkUtil.redirectToRoot();
@@ -115,7 +120,8 @@ export default Vue.extend({
       this.isWaitingForResponse = true;
       SubProjectApi.getAccessibleParent(this.projectId, (response: any) => {
         const parentId = response.data.id;
-        ProjectApi.getProjectInformation(parentId,
+        ProjectApi.getProjectInformation(
+          parentId,
           (response: any) => {
             ProjectApi.deleteProject(
               this.projectId,
@@ -124,8 +130,10 @@ export default Vue.extend({
               },
               (innerErrorResponse: any) => {
                 this.afterDeleteHandler(response.data.slug);
-            });
-        }, (error: any) => {
+              }
+            );
+          },
+          (error: any) => {
             ProjectApi.deleteProject(
               this.projectId,
               (innerResponse: any) => {
@@ -133,8 +141,10 @@ export default Vue.extend({
               },
               (innerErrorResponse: any) => {
                 this.afterDeleteHandler();
-            });
-        });
+              }
+            );
+          }
+        );
       });
       this.resetModal = false;
     },
@@ -156,10 +166,8 @@ export default Vue.extend({
   min-width: auto;
 }
 .modal-backdrop {
-    opacity: .5;
+  opacity: 0.5;
 }
-  </style>
-  <style scoped>
 .invalid-tooltip {
   margin-top: -5rem;
 }

src/coscine.d.ts

-declare var coscine: {
+declare type CoscineType = {
   language: {
-        locale: string,
-    },
+    locale: string;
+  };
   i18n: {
-        'project-creation': {},
-    },
+    "project-creation": VueI18n.LocaleMessages | undefined;
+  };
 };
 
-declare var _spPageContextInfo: any;
+declare const coscine: CoscineType;
+
+declare interface Window {
+  coscine: CoscineType;
+}
+
+declare let _spPageContextInfo: any;
 
 declare class Organization {
   public url: string;

src/index.ts

-import CreateProject from './CreateProject.vue';
+import CreateProject from "./CreateProject.vue";
 
 export default {
   install(Vue: any, options: any) {
     // Let's register our component globally
     // https://vuejs.org/v2/guide/components-registration.html
-   Vue.component('CreateProject', CreateProject);
+    Vue.component("CreateProject", CreateProject);
   },
 };

src/shims-tsx.d.ts

-import Vue, { VNode } from 'vue';
+import Vue, { VNode } from "vue";
 
 declare global {
   namespace JSX {

src/shims-vue.d.ts

-declare module '*.vue' {
-  import Vue from 'vue';
+declare module "*.vue" {
+  import Vue from "vue";
   export default Vue;
 }
 
-declare module '@voerro/vue-tagsinput';
-declare module '@coscine/api-connection';
-declare module '@coscine/app-util';
-declare module '@coscine/component-library';
+declare module "@voerro/vue-tagsinput";
+declare module "@coscine/api-connection";
+declare module "@coscine/app-util";
+declare module "@coscine/component-library";

src/utils/tag_inputs_helper.ts

@@ -2,7 +2,7 @@ export default {
   checkKeywords(value: any, maxCount: any) {
     // check if the total sum of characters for keywords is <= 1000
     let count = 0;
-        if (typeof value === 'string') {
+    if (typeof value === "string") {
       count = value.length;
     } else if (value !== undefined) {
       for (const keyword of value) {
@@ -11,10 +11,10 @@ export default {
     }
     return count <= maxCount;
   },
-    parseKeywords(form: any, delimiter = ';') {
+  parseKeywords(form: any, delimiter = ";") {
     // combine array values to a string (using the 'keyword'  form input)
-        if (typeof form.Keywords !== 'string') {
-            let keywordString = '';
+    if (typeof form.Keywords !== "string") {
+      let keywordString = "";
       for (const keyword of form.Keywords) {
         keywordString += keyword + delimiter;
       }

tsconfig.json

 {
   "compilerOptions": {
-    "target": "esnext",
-    "module": "esnext",
+    "target": "es6",
+    "module": "es6",
     "strict": true,
     "jsx": "preserve",
     "importHelpers": true,
@@ -24,7 +24,7 @@
       ]
     },
     "lib": [
-      "esnext",
+      "es6",
       "dom",
       "dom.iterable",
       "scripthost"