Creation of PersonResource

src/Bundle/ChillPersonBundle/Resources/public/mod/AccompanyingPeriod/setReferrer.js

@@ -0,0 +1,47 @@
+import {createApp} from 'vue';
+import SetReferrer from 'ChillPersonAssets/vuejs/_components/AccompanyingPeriod/SetReferrer.vue';
+import {fetchResults} from 'ChillMainAssets/lib/api/apiMethods.js';
+
+document.querySelectorAll('[data-set-referrer-app]').forEach(function (el) {
+  let
+    periodId = Number.parseInt(el.dataset.setReferrerAccompanyingPeriodId);
+
+  const url = `/api/1.0/person/accompanying-course/${periodId}/referrers-suggested.json`;
+  fetchResults(url).then(suggested => {
+    const app = createApp({
+      components: {
+        SetReferrer,
+      },
+      template:
+        '<set-referrer :suggested="this.suggested" :periodId="periodId" @referrerSet="onReferrerSet"></set-referrer>',
+      data() {
+        return {
+          suggested, periodId,
+        }
+      },
+      methods: {
+        onReferrerSet(ref) {
+          const bloc = document.querySelector(`[data-accompanying-period-id="${this.periodId}"]`);
+          if (bloc === null) {
+            console.error('bloc not found');
+            return;
+          }
+
+          const label = bloc.querySelector('[data-referrer-text]');
+
+          if (label === null) {
+            console.error('label not found');
+            return;
+          }
+
+          label.textContent = ref.text;
+          label.classList.remove('chill-no-data-statement');
+
+        }
+      }
+    });
+
+    app.mount(el);
+
+  })
+})