New: PID Page (coscine/issues#1822)

src/modules/pid/pages/PID.vue

+<template>
+  <div>
+    <section
+      class="container flex flex-col items-center px-5 py-12 mx-auto text-gray-600 body-font md:flex-row"
+    >
+      <div>
+        <Heading1> PID Landing Page </Heading1>
+        <p class="mb-8 leading-relaxed dark:text-white">
+          This is the PID page for this Coscine UIv2 App
+        </p>
+      </div>
+    </section>
+  </div>
+</template>

src/modules/pid/routes.ts

+import PID from "./pages/PID.vue";
+
+export const PidRoutes = [
+  {
+    path: "/pid/:pid",
+    name: "PID Landing Page",
+    component: PID,
+    children: [],
+  },
+];

src/modules/pid/store/actions.ts

+import { CoscineActionTree, RootState } from "@/store/types";
+import axios from "axios";
+import { PidMutations } from "./mutations";
+import { PidState } from "./types";
+
+/*  
+    Asynchronous code comes here (e.g. API calls).
+    To change a state, commit a mutation first by dispatching an action.
+    Verb: dispatch
+
+    In a component use as e.g.:
+        @click = "$store.dispatch('<action_name_as_string>')"
+
+    --------------------------------------------------------------------------------------
+    READ BEFORE EDITING:
+    
+    For auto-completion and highlighting of Action names:
+    - Add a new action here as an entry to the enum with key==value.
+    - const mutations will be highlighted and will hint towards the missing new key.
+    - Add new property using the enum and [] and define the action function as usually.
+*/
+
+export enum PidActions {}
+
+export const actions: CoscineActionTree<PidActions, PidState, RootState> =
+  {};

src/modules/pid/store/getters.ts

+import { RootState } from "@/store/types";
+import { GetterTree } from "vuex";
+import { PidState } from "./types";
+
+/*  Filter or sort a state value before returning it.
+    Verb: commit
+
+    In a component use as e.g.:
+        return this.$store.getters.<getter_name_as_variable>;
+*/
+
+export const getters: GetterTree<PidState, RootState> = {};

src/modules/pid/store/index.ts

+import { Module } from "vuex";
+
+import { RootState } from "@/store/types";
+import { PidState } from "./types";
+
+import { mutations } from "./mutations";
+import { getters } from "./getters";
+import { actions } from "./actions";
+
+export const state = {};
+
+export const PidStore: Module<PidState, RootState> = {
+  state,
+  mutations,
+  getters,
+  actions,
+};

src/modules/pid/store/mutations.ts

+import { CoscineMutationTree } from "@/store/types";
+import { PidState } from "./types";
+
+/*  
+    Can contain only synchronous code.
+    To change a state, commit a mutation.
+    Verb: commit
+
+    In a component use as e.g.:
+        @click = "$store.commit('<mutation_name_as_string>')"
+
+    --------------------------------------------------------------------------------------
+    READ BEFORE EDITING:
+    
+    For auto-completion and highlighting of Mutation names:
+    - Add a new mutation here as an entry to the enum with key==value.
+    - const mutations will be highlighted and will hint towards the missing new key.
+    - Add new property using the enum and [] and define the mutation function as usually.
+*/
+
+export enum PidMutations {}
+
+export const mutations: CoscineMutationTree<PidMutations, PidState> = {};

src/modules/pid/store/types.ts

+export interface PidState {}

src/router/index.ts

@@ -4,6 +4,7 @@ import VueRouter, { RouteConfig } from "vue-router";
 import Home from "@/modules/home/pages/Home.vue";
 
 import { AdminRoutes } from "@/modules/admin/routes";
+import { PidRoutes } from "@/modules/pid/routes";
 import { ProjectRoutes } from "@/modules/project/routes";
 import { UserProfileRoutes } from "@/modules/userprofile/routes";
 import { SearchRoutes } from "@/modules/search/routes";
@@ -20,6 +21,7 @@ export const routes: RouteConfig[] = [
   },
   // Module Routes
   ...AdminRoutes,
+  ...PidRoutes,
   ...ProjectRoutes,
   ...UserProfileRoutes,
   ...SearchRoutes,

src/store/index.ts

@@ -4,6 +4,7 @@ import { RootState } from "./types";
 
 import { HomeStore } from "@/modules/home/store";
 import { AdminStore } from "@/modules/admin/store";
+import { PidStore } from "@/modules/pid/store";
 import { ProjectStore } from "@/modules/project/store";
 import { ResourceStore } from "@/modules/resource/store";
 import { UserProfileStore } from "@/modules/userprofile/store";
@@ -17,6 +18,7 @@ const store: StoreOptions<RootState> = {
   modules: {
     home: HomeStore,
     admin: AdminStore,
+    pid: PidStore,
     project: ProjectStore,
     resource: ResourceStore,
     userprofile: UserProfileStore,