Feature/uu list

assets/vue/example-custom-uu-list/.eslintrc.json

@@ -0,0 +1,47 @@
+{
+    "root": true,
+    "extends": [
+        "eslint:recommended",
+        "plugin:vue/vue3-recommended",
+        "plugin:@typescript-eslint/recommended",
+        "prettier"
+    ],
+    "parserOptions": {
+        "ecmaVersion": "latest",
+        "parser": "@typescript-eslint/parser",
+        "sourceType": "module",
+        "extraFileExtensions": [".vue"]
+    },
+    "overrides": [
+        {
+          "files": ["*.ts"],
+
+          "parserOptions": {
+            "project": ["./tsconfig.json"] // Specify it only for TypeScript files
+          }
+        }
+      ],
+    "plugins": [
+        "vue",
+        "@typescript-eslint"
+    ],
+    "rules": {
+        "@typescript-eslint/no-non-null-assertion": "off",
+        "@typescript-eslint/no-inferrable-types": "off",
+        "vue/html-self-closing": ["error", {
+            "html": {
+                "void": "any",
+                "normal": "always",
+                "component": "always"
+            },
+            "svg": "always",
+            "math": "always"
+        }],
+        "@typescript-eslint/no-unused-vars": ["warn", {
+            "varsIgnorePattern": "(props)|(emits?)|_"
+        }],
+        "vue/require-v-for-key": "warn",
+        "vue/no-v-model-argument": "off" // NO idea why this rule exists
+    },
+    "ignorePatterns": ["**/*.test.ts", "dist/*", "node_modules/*"]
+}

assets/vue/example-custom-uu-list/.gitignore

@@ -0,0 +1,15 @@
+.sass-cache/
+*.css.map
+*.sass.map
+*.scss.map
+!dist/css/*.css.map
+
+node_modules
+vite.config.d.ts
+*.log*
+.cache
+.output
+.env
+generated
+
+.idea

assets/vue/example-custom-uu-list/README.md

@@ -0,0 +1,13 @@
+# Custom UU-List example
+
+An example of a custom DSCList-based UU-List. You can copy this folder
+as a basis.
+
+## Use as a template:
+
+1. Copy the contents of this dir to a folder in your project
+2. Install deps (yarn install)
+3. Update cdh-vue-lib to latest release using yarn
+4. Rename `CustomList.vue` to a more descriptive name, and update the `index.ts` import
+5. Change the indicated values in `vite.config.ts`; use the name you used for the file above
+6. Go make your own implementation!

assets/vue/example-custom-uu-list/package.json

@@ -0,0 +1,22 @@
+{
+  "name": "uu-list",
+  "version": "1.0.0",
+  "author": "Humanities IT Portal development",
+  "license": "Apache-2.0",
+  "scripts": {
+    "dev": "vite dev",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@intlify/unplugin-vue-i18n": "^1.5.0",
+    "cdh-vue-lib": "git+https://github.com/CentreForDigitalHumanities/Vue-lib.git#v0.3.2",
+    "vue-i18n": "9"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^4.3.4",
+    "typescript": "^5.2.2",
+    "vite": "^4.4.9",
+    "vue": "^3.3.4"
+  }
+}

assets/vue/example-custom-uu-list/src/CustomList.vue

@@ -0,0 +1,87 @@
+<script setup>
+import {DSCList} from "cdh-vue-lib/components";
+import {useI18n} from "vue-i18n";
+
+// Required stuff
+const props = defineProps(['config']);
+
+const {t} = useI18n()
+
+// Demo stuff
+function statusColor(status) {
+  switch (status) {
+    case "C":
+      return "green"
+
+    case "R":
+      return "orange"
+
+    case "O":
+      return "red"
+
+    default:
+      return ""
+  }
+}
+</script>
+
+<!-- Here you can define your translations. Please remember to use `t` in your template instead of `$t` -->
+<i18n>
+{
+  "en": {
+    "name": "Name",
+    "refnum": "Reference Number",
+    "status": "Status"
+  },
+  "nl": {
+    "name": "Naam",
+    "refnum": "Referentie Nummer",
+    "status": "Status"
+  }
+}
+</i18n>
+
+<template>
+  <!-- Required stuff -->
+  <DSCList :config="config">
+    <template #data="{data, isLoading}">
+      <!-- Custom stuff -->
+      <!-- Add your table here -->
+      <div>
+        <div v-if="isLoading">
+          <!-- Show a 'loading' message if data is being loaded -->
+          Loading...
+        </div>
+        <table class="table" v-else>
+          <thead>
+          <tr>
+            <th>
+              {{ t('name') }}
+            </th>
+            <th>
+              {{ t('refnum') }}
+            </th>
+            <th>
+              {{ t('status') }}
+            </th>
+          </tr>
+          </thead>
+          <tbody>
+          <tr v-for="datum in data">
+            <td>
+              {{ datum.project_name }}
+            </td>
+            <td>
+              {{ datum.reference_number }}
+            </td>
+            <td :class="`text-bg-${statusColor(datum.status)}`">
+              {{ datum.get_status_display }}
+            </td>
+          </tr>
+          </tbody>
+        </table>
+      </div>
+      <!-- end custom stuff, begin required stuff -->
+    </template>
+  </DSCList>
+</template>

assets/vue/example-custom-uu-list/src/index.ts

@@ -0,0 +1,4 @@
+import CustomList from "./CustomList.vue";
+import "cdh-vue-lib/dist/style.css"
+
+export default CustomList;

assets/vue/example-custom-uu-list/tsconfig.json

@@ -0,0 +1,44 @@
+{
+  "compilerOptions": {
+    "target": "esnext",
+    "module": "esnext",
+    "strict": true,
+    "jsx": "preserve",
+    "moduleResolution": "node",
+    "declaration": true,
+    "outDir": "dist",
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "forceConsistentCasingInFileNames": true,
+    "useDefineForClassFields": true,
+    "resolveJsonModule": true,
+    "sourceMap": true,
+    "baseUrl": ".",
+    "typeRoots": [
+      "src/stubs.d.ts"
+    ],
+    "paths": {
+      "@/*": [
+        "./src/*"
+      ]
+    },
+    "lib": [
+      "esnext",
+      "dom",
+      "dom.iterable",
+      "scripthost"
+    ]
+  },
+  "include": [
+    "src/**/*.ts",
+    "src/**/*.tsx",
+    "src/**/*.vue",
+    "tests/**/*.ts",
+    "tests/**/*.tsx"
+  ],
+  "exclude": [
+    "node_modules",
+    "vite.config.ts"
+  ]
+}

assets/vue/example-custom-uu-list/vite.config.ts

@@ -0,0 +1,48 @@
+import {defineConfig} from "vite";
+import {resolve} from "path";
+import vue from "@vitejs/plugin-vue";
+import VueI18nPlugin from "@intlify/unplugin-vue-i18n/vite";
+
+// https://vitejs.dev/config/
+export default defineConfig({
+    plugins: [vue(), VueI18nPlugin({})],
+    base: '/static/',
+    build: {
+        minify: false,
+        outDir: "../../../dev/dev_vue/static/dev_vue/example-custom-uu-list/", // TODO: change this to your desired static dir
+        emptyOutDir: true,
+        lib: {
+            // src/index.ts is where we have exported the component(s)
+            entry: resolve(__dirname, "src/index.ts"),
+            name: "CustomList", // TODO: CHANGE THIS FOR YOUR OWN COMPONENT
+            // the name of the output files when the build is run
+            fileName: "CustomList",// TODO: CHANGE THIS FOR YOUR OWN COMPONENT
+            formats: ['iife']
+        },
+        rollupOptions: {
+            // make sure to externalize deps that shouldn't be bundled
+            // into your library
+            external: ["vue", "vue-i18n"],
+            output: {
+                // Provide global variables to use in the UMD build
+                // for externalized deps
+                globals: {
+                    vue: "Vue",
+                    'vue-i18n': "VueI18n",
+                },
+                chunkFileNames: undefined,
+            },
+        },
+    },
+    resolve: {
+      alias: {
+        "@": resolve(__dirname, "./src"),
+      },
+    },
+    optimizeDeps: {
+      include: ['src/**/*.vue', 'src/index.ts'],
+    },
+    define: {
+      'process.env': {}
+    }
+});