Setup alias for use in standalone chill-bundles project and replace relative paths

src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/components/SocialIssuesAcc.vue

@@ -3,7 +3,7 @@
         <div class="mb-3 row">
             <div class="col-4">
                 <label :class="socialIssuesClassList">{{
-                    $t("activity.social_issues")
+                    trans(ACTIVITY_SOCIAL_ISSUES)
                 }}</label>
             </div>
             <div class="col-8">
@@ -12,8 +12,9 @@
                     :key="issue.id"
                     :issue="issue"
                     :selection="socialIssuesSelected"
-                    @update-selected="updateIssuesSelected"
-                />
+                    @updateSelected="updateIssuesSelected"
+                >
+                </check-social-issue>
 
                 <div class="my-3">
                     <VueMultiselect
@@ -31,10 +32,11 @@
                         :allow-empty="true"
                         :show-labels="false"
                         :loading="issueIsLoading"
-                        :placeholder="$t('activity.choose_other_social_issue')"
+                        :placeholder="trans(ACTIVITY_CHOOSE_OTHER_SOCIAL_ISSUE)"
                         :options="socialIssuesOther"
                         @select="addIssueInList"
-                    />
+                    >
+                    </VueMultiselect>
                 </div>
             </div>
         </div>
@@ -42,36 +44,38 @@
         <div class="mb-3 row">
             <div class="col-4">
                 <label :class="socialActionsClassList">{{
-                    $t("activity.social_actions")
+                    trans(ACTIVITY_SOCIAL_ACTIONS)
                 }}</label>
             </div>
             <div class="col-8">
                 <div v-if="actionIsLoading === true">
-                    <i class="chill-green fa fa-circle-o-notch fa-spin fa-lg" />
+                    <i
+                        class="chill-green fa fa-circle-o-notch fa-spin fa-lg"
+                    ></i>
                 </div>
 
                 <span
                     v-else-if="socialIssuesSelected.length === 0"
                     class="inline-choice chill-no-data-statement mt-3"
                 >
-                    {{ $t("activity.select_first_a_social_issue") }}
+                    {{ trans(ACTIVITY_SELECT_FIRST_A_SOCIAL_ISSUE) }}
                 </span>
 
-                <template v-else-if="socialActionsList.length > 0">
-                    <div
-                        v-if="
-                            socialIssuesSelected.length ||
-                            socialActionsSelected.length
-                        "
+                <template
+                    v-else-if="
+                        socialActionsList.length > 0 &&
+                        (socialIssuesSelected.length ||
+                            socialActionsSelected.length)
+                    "
+                >
+                    <check-social-action
+                        v-for="action in socialActionsList"
+                        :key="action.id"
+                        :action="action"
+                        :selection="socialActionsSelected"
+                        @updateSelected="updateActionsSelected"
                     >
-                        <check-social-action
-                            v-for="action in socialActionsList"
-                            :key="action.id"
-                            :action="action"
-                            :selection="socialActionsSelected"
-                            @update-selected="updateActionsSelected"
-                        />
-                    </div>
+                    </check-social-action>
                 </template>
 
                 <span
@@ -80,7 +84,7 @@
                     "
                     class="inline-choice chill-no-data-statement mt-3"
                 >
-                    {{ $t("activity.social_action_list_empty") }}
+                    {{ trans(ACTIVITY_SOCIAL_ACTION_LIST_EMPTY) }}
                 </span>
             </div>
         </div>
@@ -92,6 +96,14 @@ import VueMultiselect from "vue-multiselect";
 import CheckSocialIssue from "./SocialIssuesAcc/CheckSocialIssue.vue";
 import CheckSocialAction from "./SocialIssuesAcc/CheckSocialAction.vue";
 import { getSocialIssues, getSocialActionByIssue } from "../api.js";
+import {
+    ACTIVITY_SOCIAL_ACTION_LIST_EMPTY,
+    ACTIVITY_SELECT_FIRST_A_SOCIAL_ISSUE,
+    ACTIVITY_SOCIAL_ACTIONS,
+    ACTIVITY_SOCIAL_ISSUES,
+    ACTIVITY_CHOOSE_OTHER_SOCIAL_ISSUE,
+    trans,
+} from "translator";
 
 export default {
     name: "SocialIssuesAcc",
@@ -100,6 +112,16 @@ export default {
         CheckSocialAction,
         VueMultiselect,
     },
+    setup() {
+        return {
+            trans,
+            ACTIVITY_SOCIAL_ACTION_LIST_EMPTY,
+            ACTIVITY_SELECT_FIRST_A_SOCIAL_ISSUE,
+            ACTIVITY_SOCIAL_ACTIONS,
+            ACTIVITY_SOCIAL_ISSUES,
+            ACTIVITY_CHOOSE_OTHER_SOCIAL_ISSUE,
+        };
+    },
     data() {
         return {
             issueIsLoading: false,
@@ -133,7 +155,7 @@ export default {
         this.actionAreLoaded = false;
         getSocialIssues().then(
             (response) =>
-                new Promise((resolve, reject) => {
+                new Promise((resolve) => {
                     this.$store.commit("updateIssuesOther", response.results);
 
                     /* Add in list the issues already associated (if not yet listed)
@@ -208,7 +230,7 @@ export default {
                 this.actionIsLoading = true;
                 getSocialActionByIssue(item.id).then(
                     (actions) =>
-                        new Promise((resolve, reject) => {
+                        new Promise((resolve) => {
                             actions.results.forEach((action) => {
                                 this.$store.commit("addActionInList", action);
                             }, this);
@@ -235,7 +257,6 @@ export default {
 };
 </script>
 
-<style src="vue-multiselect/dist/vue-multiselect.css"></style>
 <style lang="scss" scoped>
 span.multiselect__single {
     display: none !important;