F t31116 demosplan UI no longer use routing

CHANGELOG.md

@@ -2,6 +2,10 @@
 
 ## UNRELEASED
 
+### Changed
+- ([#91](https://github.com/demos-europe/demosplan-ui/pull/91)) Pass routes as props ([@ahmad-demos](https://github.com/ahmad-demos))
+
+
 ## v0.0.12 - 2023-02-13
 
 ### Fixed

src/components/core/DpAutocomplete.vue

@@ -33,12 +33,6 @@ export default {
   mixins: [prefixClassMixin],
 
   props: {
-    additionalRouteParams: {
-      type: Object,
-      required: false,
-      default: () => ({})
-    },
-
     height: {
       type: String,
       required: false,
@@ -63,14 +57,8 @@ export default {
       default: () => Translator.trans('search')
     },
 
-    queryParam: {
-      type: String,
-      required: false,
-      default: 'query'
-    },
-
-    route: {
-      type: String,
+    routeGenerator: {
+      type: Function,
       required: true
     },
 
@@ -110,7 +98,8 @@ export default {
     async fetchOptions (searchString) {
       this.isLoading = true
       try {
-        const response = await dpApi.get(Routing.generate(this.route, { ...this.additionalRouteParams, [this.queryParam]: searchString }))
+        const route = this.routeGenerator(searchString)
+        const response = await dpApi.get(route)
         // Only emit results that match the current search -> prevents race conditions
         if (this.currentQuerry === searchString) this.$emit('search-changed', response)
         this.isLoading = false

src/components/core/DpEditor/DpBoilerPlateModal.vue

@@ -14,8 +14,9 @@
         @boilerplate-text-added="addBoilerplateText" />
       <div class="flex flex-items-center u-mt">
         <a
-          class="weight--bold font-size-small"
-          :href="Routing.generate('DemosPlan_procedure_boilerplate_list', { procedure: procedureId })">
+            v-if="boilerplateEditViewRoute"
+            class="weight--bold font-size-small"
+            :href="boilerplateEditViewRoute">
           {{ Translator.trans('boilerplates.edit') }} ({{ Translator.trans('view.leave.hint') }})
         </a>
         <dp-button-row
@@ -59,6 +60,16 @@ export default {
       default: ''
     },
 
+    /**
+     * Route to a view that allows editing the available boilerplates
+     * Displayed as a link at the bottom of the modal
+     */
+    boilerplateEditViewRoute: {
+      required: false,
+      type: String,
+      default: ''
+    },
+
     editorId: {
       required: false,
       type: String,

src/components/core/DpEditor/DpEditor.vue

@@ -8,6 +8,7 @@
       v-if="toolbar.boilerPlate && boilerPlateEnabled"
       ref="boilerPlateModal"
       :editor-id="editorId"
+      :boilerplate-edit-view-route="routes.boilerplateEditViewRoute"
       :procedure-id="procedureId"
       :boiler-plate-type="toolbar.boilerPlate"
       @insertBoilerPlate="text => handleInsertText(text)" />
@@ -18,6 +19,7 @@
     <dp-upload-modal
       v-if="toolbar.imageButton"
       ref="uploadModal"
+      :get-file-by-hash="routes.getFileByHash"
       @insert-image="insertImage"
       @add-alt="addAltTextToImage"
       @close="resetEditingImage" />
@@ -26,7 +28,8 @@
       ref="recommendationModal"
       @insert-recommendation="text => appendText(text)"
       :procedure-id="procedureId"
-      :segment-id="segmentId" />
+      :segment-id="segmentId"
+      :similar-recommendations-route="routes.similarRecommendationsRoute" />
     <div :class="prefixClass('row tiptap')">
       <div :class="prefixClass('col')">
         <div
@@ -577,6 +580,29 @@ export default {
       default: false
     },
 
+    /**
+     * boilerplateEditViewRoute: (Optional) route to a view that allows editing 
+     * boilerplates. Displayed as a link at the bottom of the boilerplate modal, if 
+     * toolbar.boilerplate is set
+     * getFileByHash: (Required) function that receives a file hash as parameter 
+     * and returns a route to that file. Used for displaying images.
+     * similarRecommendationsRoute: (Optional) route to fetch similar 
+     * recommendations (needed if toolbar.recommendationButton is set to 
+     * true)
+     */
+    routes: {
+      type: Object,
+      required: false,
+      default: () => ({}),
+      validator: (prop) => {
+        return Object.keys(prop).every(key => [
+          'boilerplateEditViewRoute',
+          'getFileByHash',
+          'similarRecommendationsRoute'
+        ].includes(key))
+      }
+    },
+
     segmentId: {
       type: String,
       required: false,
@@ -907,7 +933,7 @@ export default {
           const imageHash = placeholder.substr(7, 36)
           const imageWidth = placeholder.match(/width=(\d*?)&/)[1]
           const imageHeight = placeholder.match(/height=(\d*?)$/)[1]
-          return `<img src="${Routing.generate('core_file', { hash: imageHash })}" width="${imageWidth}" height="${imageHeight}" alt="${altText}">`
+          return `<img src="${this.routes.getFileByHash(imageHash)}" width="${imageWidth}" height="${imageHeight}" alt="${altText}">`
         })
       } catch (e) {
         return text

src/components/core/DpEditor/DpRecommendationModal.vue

@@ -89,6 +89,11 @@ export default {
     segmentId: {
       type: String,
       required: true
+    },
+
+    similarRecommendationsRoute: {
+      type: String,
+      required: true
     }
   },
 
@@ -212,7 +217,7 @@ export default {
     },
 
     fetchSimilarRecommendations () {
-      const url = Routing.generate('api_resource_list', { resourceType: 'StatementSegment' })
+      const url = this.similarRecommendationsRoute
       const params = {
         include: 'parentStatement,parentStatement.procedure',
         fields: {

src/components/core/DpEditor/DpUploadModal.vue

@@ -17,6 +17,7 @@
         <dp-upload-files
           allowed-file-types="img"
           id="imageFile"
+          :get-file-by-hash="getFileByHash"
           :max-file-size="20 * 1024 * 1024/* 20 MiB */"
           :max-number-of-files="1"
           ref="uploader"
@@ -63,6 +64,13 @@ export default {
     DpUploadFiles
   },
 
+  props: {
+    getFileByHash: {
+      type: Function,
+      required: true
+    }
+  },
+
   data () {
     return {
       fileUrl: '',
@@ -90,7 +98,7 @@ export default {
     },
 
     setFile ({ hash }) {
-      this.fileUrl = Routing.generate('core_file', { hash: hash })
+      this.fileUrl = this.getFileByHash(hash)
       // Force-update the component so that DpModal updates and therefore check for new focusable elements
       this.$forceUpdate()
     },

src/components/core/DpUpload/DpUploadFiles.vue

@@ -58,6 +58,12 @@ export default {
 
   mixins: [prefixClassMixin],
 
+  provide () {
+    return {
+      getFileByHash: this.getFileByHash
+    }
+  },
+
   props: {
     /**
      * Array of mimeTypes or a defined preset as String
@@ -88,6 +94,11 @@ export default {
       default: false
     },
 
+    getFileByHash: {
+      type: Function,
+      required: true
+    },
+
     id: {
       type: String,
       required: false,

src/components/core/DpUpload/DpUploadedFile.vue

@@ -8,7 +8,7 @@
     </span>
     <span v-if="isImage">
       <img
-        :src="Routing.generate('core_file', { hash: file.hash })"
+        :src="getFileByHash(file.hash)"
         :aria-label="Translator.trans('image.preview')"
         width="50px">
     </span>
@@ -37,6 +37,8 @@ import { prefixClassMixin } from '../../../mixins'
 export default {
   name: 'DpUploadedFile',
 
+  inject: ['getFileByHash'],
+
   mixins: [prefixClassMixin],
 
   props: {

src/components/core/DpUpload/utils/GetFileIdsByHash.js

@@ -7,9 +7,9 @@ import { dpApi } from '../../../../lib'
  *
  * @returns {Array<Ids>}
  */
-function getFileIdsByHash (hashes) {
+function getFileIdsByHash (hashes, route) {
   return dpApi.get(
-    Routing.generate('api_resource_list', { resourceType: 'File' }),
+    route,
     {
       filter: {
         hasHash: {