mirror of
https://gitlab.com/Chill-Projet/chill-bundles.git
synced 2025-09-27 17:15:02 +00:00
Apply prettier rules
This commit is contained in:
@@ -1,228 +1,243 @@
|
||||
<template>
|
||||
<teleport to="#social-issues-acc">
|
||||
<div class="mb-3 row">
|
||||
<div class="col-4">
|
||||
<label :class="socialIssuesClassList">{{ $t('activity.social_issues') }}</label>
|
||||
</div>
|
||||
<div class="col-8">
|
||||
<check-social-issue
|
||||
v-for="issue in socialIssuesList"
|
||||
:key="issue.id"
|
||||
:issue="issue"
|
||||
:selection="socialIssuesSelected"
|
||||
@update-selected="updateIssuesSelected"
|
||||
/>
|
||||
|
||||
<div class="my-3">
|
||||
<VueMultiselect
|
||||
name="otherIssues"
|
||||
label="text"
|
||||
track-by="id"
|
||||
open-direction="bottom"
|
||||
:close-on-select="true"
|
||||
:preserve-search="false"
|
||||
:reset-after="true"
|
||||
:hide-selected="true"
|
||||
:taggable="false"
|
||||
:multiple="false"
|
||||
:searchable="true"
|
||||
:allow-empty="true"
|
||||
:show-labels="false"
|
||||
:loading="issueIsLoading"
|
||||
:placeholder="$t('activity.choose_other_social_issue')"
|
||||
:options="socialIssuesOther"
|
||||
@select="addIssueInList"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mb-3 row">
|
||||
<div class="col-4">
|
||||
<label :class="socialActionsClassList">{{ $t('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" />
|
||||
</div>
|
||||
|
||||
<span
|
||||
v-else-if="socialIssuesSelected.length === 0"
|
||||
class="inline-choice chill-no-data-statement mt-3"
|
||||
>
|
||||
{{ $t('activity.select_first_a_social_issue') }}
|
||||
</span>
|
||||
|
||||
<template v-else-if="socialActionsList.length > 0">
|
||||
<div v-if="socialIssuesSelected.length || socialActionsSelected.length">
|
||||
<check-social-action
|
||||
v-for="action in socialActionsList"
|
||||
:key="action.id"
|
||||
:action="action"
|
||||
:selection="socialActionsSelected"
|
||||
@update-selected="updateActionsSelected"
|
||||
/>
|
||||
<teleport to="#social-issues-acc">
|
||||
<div class="mb-3 row">
|
||||
<div class="col-4">
|
||||
<label :class="socialIssuesClassList">{{
|
||||
$t("activity.social_issues")
|
||||
}}</label>
|
||||
</div>
|
||||
</template>
|
||||
<div class="col-8">
|
||||
<check-social-issue
|
||||
v-for="issue in socialIssuesList"
|
||||
:key="issue.id"
|
||||
:issue="issue"
|
||||
:selection="socialIssuesSelected"
|
||||
@update-selected="updateIssuesSelected"
|
||||
/>
|
||||
|
||||
<span
|
||||
v-else-if="actionAreLoaded && socialActionsList.length === 0"
|
||||
class="inline-choice chill-no-data-statement mt-3"
|
||||
>
|
||||
{{ $t('activity.social_action_list_empty') }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</teleport>
|
||||
<div class="my-3">
|
||||
<VueMultiselect
|
||||
name="otherIssues"
|
||||
label="text"
|
||||
track-by="id"
|
||||
open-direction="bottom"
|
||||
:close-on-select="true"
|
||||
:preserve-search="false"
|
||||
:reset-after="true"
|
||||
:hide-selected="true"
|
||||
:taggable="false"
|
||||
:multiple="false"
|
||||
:searchable="true"
|
||||
:allow-empty="true"
|
||||
:show-labels="false"
|
||||
:loading="issueIsLoading"
|
||||
:placeholder="$t('activity.choose_other_social_issue')"
|
||||
:options="socialIssuesOther"
|
||||
@select="addIssueInList"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mb-3 row">
|
||||
<div class="col-4">
|
||||
<label :class="socialActionsClassList">{{
|
||||
$t("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" />
|
||||
</div>
|
||||
|
||||
<span
|
||||
v-else-if="socialIssuesSelected.length === 0"
|
||||
class="inline-choice chill-no-data-statement mt-3"
|
||||
>
|
||||
{{ $t("activity.select_first_a_social_issue") }}
|
||||
</span>
|
||||
|
||||
<template v-else-if="socialActionsList.length > 0">
|
||||
<div
|
||||
v-if="
|
||||
socialIssuesSelected.length ||
|
||||
socialActionsSelected.length
|
||||
"
|
||||
>
|
||||
<check-social-action
|
||||
v-for="action in socialActionsList"
|
||||
:key="action.id"
|
||||
:action="action"
|
||||
:selection="socialActionsSelected"
|
||||
@update-selected="updateActionsSelected"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<span
|
||||
v-else-if="
|
||||
actionAreLoaded && socialActionsList.length === 0
|
||||
"
|
||||
class="inline-choice chill-no-data-statement mt-3"
|
||||
>
|
||||
{{ $t("activity.social_action_list_empty") }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</teleport>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import VueMultiselect from 'vue-multiselect';
|
||||
import CheckSocialIssue from './SocialIssuesAcc/CheckSocialIssue.vue';
|
||||
import CheckSocialAction from './SocialIssuesAcc/CheckSocialAction.vue';
|
||||
import { getSocialIssues, getSocialActionByIssue } from '../api.js';
|
||||
import VueMultiselect from "vue-multiselect";
|
||||
import CheckSocialIssue from "./SocialIssuesAcc/CheckSocialIssue.vue";
|
||||
import CheckSocialAction from "./SocialIssuesAcc/CheckSocialAction.vue";
|
||||
import { getSocialIssues, getSocialActionByIssue } from "../api.js";
|
||||
|
||||
export default {
|
||||
name: "SocialIssuesAcc",
|
||||
components: {
|
||||
CheckSocialIssue,
|
||||
CheckSocialAction,
|
||||
VueMultiselect
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
issueIsLoading: false,
|
||||
actionIsLoading: false,
|
||||
actionAreLoaded: false,
|
||||
socialIssuesClassList:
|
||||
`col-form-label ${document.querySelector('input#chill_activitybundle_activity_socialIssues').getAttribute('required') ? 'required' : ''}`,
|
||||
socialActionsClassList:
|
||||
`col-form-label ${document.querySelector('input#chill_activitybundle_activity_socialActions').getAttribute('required') ? 'required' : ''}`,
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
socialIssuesList() {
|
||||
return this.$store.state.activity.accompanyingPeriod.socialIssues;
|
||||
},
|
||||
socialIssuesSelected() {
|
||||
return this.$store.state.activity.socialIssues;
|
||||
},
|
||||
socialIssuesOther() {
|
||||
return this.$store.state.socialIssuesOther;
|
||||
},
|
||||
socialActionsList() {
|
||||
return this.$store.getters.socialActionsListSorted;
|
||||
},
|
||||
socialActionsSelected() {
|
||||
return this.$store.state.activity.socialActions;
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
/* Load others issues in multiselect
|
||||
*/
|
||||
this.issueIsLoading = true;
|
||||
this.actionAreLoaded = false;
|
||||
getSocialIssues().then(response => new Promise((resolve, reject) => {
|
||||
this.$store.commit('updateIssuesOther', response.results);
|
||||
|
||||
/* Add in list the issues already associated (if not yet listed)
|
||||
name: "SocialIssuesAcc",
|
||||
components: {
|
||||
CheckSocialIssue,
|
||||
CheckSocialAction,
|
||||
VueMultiselect,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
issueIsLoading: false,
|
||||
actionIsLoading: false,
|
||||
actionAreLoaded: false,
|
||||
socialIssuesClassList: `col-form-label ${document.querySelector("input#chill_activitybundle_activity_socialIssues").getAttribute("required") ? "required" : ""}`,
|
||||
socialActionsClassList: `col-form-label ${document.querySelector("input#chill_activitybundle_activity_socialActions").getAttribute("required") ? "required" : ""}`,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
socialIssuesList() {
|
||||
return this.$store.state.activity.accompanyingPeriod.socialIssues;
|
||||
},
|
||||
socialIssuesSelected() {
|
||||
return this.$store.state.activity.socialIssues;
|
||||
},
|
||||
socialIssuesOther() {
|
||||
return this.$store.state.socialIssuesOther;
|
||||
},
|
||||
socialActionsList() {
|
||||
return this.$store.getters.socialActionsListSorted;
|
||||
},
|
||||
socialActionsSelected() {
|
||||
return this.$store.state.activity.socialActions;
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
/* Load others issues in multiselect
|
||||
*/
|
||||
this.socialIssuesSelected.forEach(issue => {
|
||||
if (this.socialIssuesList.filter(i => i.id === issue.id).length !== 1) {
|
||||
this.$store.commit('addIssueInList', issue);
|
||||
}
|
||||
}, this);
|
||||
this.issueIsLoading = true;
|
||||
this.actionAreLoaded = false;
|
||||
getSocialIssues().then(
|
||||
(response) =>
|
||||
new Promise((resolve, reject) => {
|
||||
this.$store.commit("updateIssuesOther", response.results);
|
||||
|
||||
/* Remove from multiselect the issues that are not yet in checkbox list
|
||||
*/
|
||||
this.socialIssuesList.forEach(issue => {
|
||||
this.$store.commit('removeIssueInOther', issue);
|
||||
}, this);
|
||||
/* Add in list the issues already associated (if not yet listed)
|
||||
*/
|
||||
this.socialIssuesSelected.forEach((issue) => {
|
||||
if (
|
||||
this.socialIssuesList.filter(
|
||||
(i) => i.id === issue.id,
|
||||
).length !== 1
|
||||
) {
|
||||
this.$store.commit("addIssueInList", issue);
|
||||
}
|
||||
}, this);
|
||||
|
||||
/* Filter issues
|
||||
*/
|
||||
this.$store.commit('filterList', 'issues');
|
||||
/* Remove from multiselect the issues that are not yet in checkbox list
|
||||
*/
|
||||
this.socialIssuesList.forEach((issue) => {
|
||||
this.$store.commit("removeIssueInOther", issue);
|
||||
}, this);
|
||||
|
||||
/* Add in list the actions already associated (if not yet listed)
|
||||
*/
|
||||
this.socialActionsSelected.forEach(action => {
|
||||
this.$store.commit('addActionInList', action);
|
||||
}, this);
|
||||
/* Filter issues
|
||||
*/
|
||||
this.$store.commit("filterList", "issues");
|
||||
|
||||
/* Filter issues
|
||||
*/
|
||||
this.$store.commit('filterList', 'actions');
|
||||
/* Add in list the actions already associated (if not yet listed)
|
||||
*/
|
||||
this.socialActionsSelected.forEach((action) => {
|
||||
this.$store.commit("addActionInList", action);
|
||||
}, this);
|
||||
|
||||
this.issueIsLoading = false;
|
||||
this.actionAreLoaded = true;
|
||||
this.updateActionsList();
|
||||
resolve();
|
||||
}));
|
||||
},
|
||||
methods: {
|
||||
/* Filter issues
|
||||
*/
|
||||
this.$store.commit("filterList", "actions");
|
||||
|
||||
/* When choosing an issue in multiselect, add it in checkboxes (as selected),
|
||||
this.issueIsLoading = false;
|
||||
this.actionAreLoaded = true;
|
||||
this.updateActionsList();
|
||||
resolve();
|
||||
}),
|
||||
);
|
||||
},
|
||||
methods: {
|
||||
/* When choosing an issue in multiselect, add it in checkboxes (as selected),
|
||||
remove it from multiselect, and add socialActions concerned
|
||||
*/
|
||||
addIssueInList(value) {
|
||||
//console.log('addIssueInList', value);
|
||||
this.$store.commit('addIssueInList', value);
|
||||
this.$store.commit('removeIssueInOther', value);
|
||||
this.$store.dispatch('addIssueSelected', value);
|
||||
this.updateActionsList();
|
||||
},
|
||||
/* Update value for selected issues checkboxes
|
||||
*/
|
||||
updateIssuesSelected(issues) {
|
||||
//console.log('updateIssuesSelected', issues);
|
||||
this.$store.dispatch('updateIssuesSelected', issues);
|
||||
this.updateActionsList();
|
||||
},
|
||||
/* Update value for selected actions checkboxes
|
||||
*/
|
||||
updateActionsSelected(actions) {
|
||||
//console.log('updateActionsSelected', actions);
|
||||
this.$store.dispatch('updateActionsSelected', actions);
|
||||
},
|
||||
/* Add socialActions concerned: after reset, loop on each issue selected
|
||||
addIssueInList(value) {
|
||||
//console.log('addIssueInList', value);
|
||||
this.$store.commit("addIssueInList", value);
|
||||
this.$store.commit("removeIssueInOther", value);
|
||||
this.$store.dispatch("addIssueSelected", value);
|
||||
this.updateActionsList();
|
||||
},
|
||||
/* Update value for selected issues checkboxes
|
||||
*/
|
||||
updateIssuesSelected(issues) {
|
||||
//console.log('updateIssuesSelected', issues);
|
||||
this.$store.dispatch("updateIssuesSelected", issues);
|
||||
this.updateActionsList();
|
||||
},
|
||||
/* Update value for selected actions checkboxes
|
||||
*/
|
||||
updateActionsSelected(actions) {
|
||||
//console.log('updateActionsSelected', actions);
|
||||
this.$store.dispatch("updateActionsSelected", actions);
|
||||
},
|
||||
/* Add socialActions concerned: after reset, loop on each issue selected
|
||||
to get social actions concerned
|
||||
*/
|
||||
updateActionsList() {
|
||||
this.resetActionsList();
|
||||
this.socialIssuesSelected.forEach(item => {
|
||||
updateActionsList() {
|
||||
this.resetActionsList();
|
||||
this.socialIssuesSelected.forEach((item) => {
|
||||
this.actionIsLoading = true;
|
||||
getSocialActionByIssue(item.id).then(
|
||||
(actions) =>
|
||||
new Promise((resolve, reject) => {
|
||||
actions.results.forEach((action) => {
|
||||
this.$store.commit("addActionInList", action);
|
||||
}, this);
|
||||
|
||||
this.actionIsLoading = true;
|
||||
getSocialActionByIssue(item.id)
|
||||
.then(actions => new Promise((resolve, reject) => {
|
||||
this.$store.commit("filterList", "actions");
|
||||
|
||||
actions.results.forEach(action => {
|
||||
this.$store.commit('addActionInList', action);
|
||||
}, this);
|
||||
|
||||
this.$store.commit('filterList', 'actions');
|
||||
|
||||
this.actionIsLoading = false;
|
||||
this.actionAreLoaded = true;
|
||||
resolve();
|
||||
}));
|
||||
}, this);
|
||||
},
|
||||
/* Reset socialActions List: flush list and restore selected actions
|
||||
*/
|
||||
resetActionsList() {
|
||||
this.$store.commit('resetActionsList');
|
||||
this.actionAreLoaded = false;
|
||||
this.socialActionsSelected.forEach(item => {
|
||||
this.$store.commit('addActionInList', item);
|
||||
}, this);
|
||||
}
|
||||
}
|
||||
}
|
||||
this.actionIsLoading = false;
|
||||
this.actionAreLoaded = true;
|
||||
resolve();
|
||||
}),
|
||||
);
|
||||
}, this);
|
||||
},
|
||||
/* Reset socialActions List: flush list and restore selected actions
|
||||
*/
|
||||
resetActionsList() {
|
||||
this.$store.commit("resetActionsList");
|
||||
this.actionAreLoaded = false;
|
||||
this.socialActionsSelected.forEach((item) => {
|
||||
this.$store.commit("addActionInList", item);
|
||||
}, this);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style src="vue-multiselect/dist/vue-multiselect.css"></style>
|
||||
<style lang="scss" scoped>
|
||||
span.multiselect__single {
|
||||
display: none !important;
|
||||
}
|
||||
span.multiselect__single {
|
||||
display: none !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user