mirror of
https://gitlab.com/Chill-Projet/chill-bundles.git
synced 2025-10-01 10:59:45 +00:00
Resolve "Fusion actions d'accompagnement"
This commit is contained in:
@@ -0,0 +1,49 @@
|
||||
import { createApp } from "vue";
|
||||
import AccompanyingPeriodWorkSelectorModal from "../../vuejs/_components/AccompanyingPeriodWorkSelector/AccompanyingPeriodWorkSelectorModal.vue";
|
||||
import { AccompanyingPeriodWork } from "../../types";
|
||||
|
||||
document.addEventListener("DOMContentLoaded", () => {
|
||||
const elements = document.querySelectorAll<HTMLDivElement>(
|
||||
'div[data-pick-entities-type="acpw"]',
|
||||
);
|
||||
elements.forEach((el) => {
|
||||
const uniqid = el.dataset.inputUniqid;
|
||||
|
||||
if (undefined === uniqid) {
|
||||
throw "Uniqid not found on this element";
|
||||
}
|
||||
|
||||
const input = document.querySelector<HTMLInputElement>(
|
||||
`input[data-input-uniqid="${uniqid}"]`,
|
||||
);
|
||||
|
||||
if (null === input) {
|
||||
throw "Element with uniqid not found: " + uniqid;
|
||||
}
|
||||
|
||||
const accompanyingPeriodIdAsString = input.dataset.accompanyingPeriodId;
|
||||
|
||||
if (undefined === accompanyingPeriodIdAsString) {
|
||||
throw "accompanying period id not found";
|
||||
}
|
||||
|
||||
const accompanyingPeriodId = Number.parseInt(accompanyingPeriodIdAsString);
|
||||
|
||||
const app = createApp({
|
||||
template:
|
||||
'<accompanying-period-work-selector-modal :accompanying-period-id="accompanyingPeriodId" @pickWork="pickWork"></accompanying-period-work-selector-modal>',
|
||||
components: { AccompanyingPeriodWorkSelectorModal },
|
||||
data() {
|
||||
return { accompanyingPeriodId };
|
||||
},
|
||||
methods: {
|
||||
pickWork: function (payload: { work: AccompanyingPeriodWork }) {
|
||||
console.log("payload", payload);
|
||||
input.value = payload.work.id.toString();
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
app.mount(el);
|
||||
});
|
||||
});
|
||||
@@ -1,12 +1,17 @@
|
||||
import {
|
||||
Address,
|
||||
Center,
|
||||
Civility,
|
||||
DateTime,
|
||||
User,
|
||||
WorkflowAvailable,
|
||||
} from "../../../ChillMainBundle/Resources/public/types";
|
||||
import { StoredObject } from "../../../ChillDocStoreBundle/Resources/public/types";
|
||||
Scope,
|
||||
Center,
|
||||
Civility,
|
||||
DateTime,
|
||||
User,
|
||||
WorkflowAvailable,
|
||||
Job,
|
||||
PrivateCommentEmbeddable,
|
||||
} from "ChillMainAssets/types";
|
||||
import { StoredObject } from "ChillDocStoreAssets/types";
|
||||
import { Thirdparty } from "../../../ChillThirdPartyBundle/Resources/public/types";
|
||||
import { Calendar } from "../../../ChillCalendarBundle/Resources/public/types";
|
||||
|
||||
export interface Person {
|
||||
id: number;
|
||||
@@ -29,6 +34,42 @@ export interface Person {
|
||||
current_residential_addresses: Address[];
|
||||
}
|
||||
|
||||
export interface AccompanyingPeriod {
|
||||
id: number;
|
||||
addressLocation?: Address | null;
|
||||
administrativeLocation?: Location | null;
|
||||
calendars: Calendar[];
|
||||
closingDate?: Date | null;
|
||||
closingMotive?: ClosingMotive | null;
|
||||
comments: Comment[];
|
||||
confidential: boolean;
|
||||
createdAt?: Date | null;
|
||||
createdBy?: User | null;
|
||||
emergency: boolean;
|
||||
intensity?: "occasional" | "regular";
|
||||
job?: Job | null;
|
||||
locationHistories: AccompanyingPeriodLocationHistory[];
|
||||
openingDate?: Date | null;
|
||||
origin?: Origin | null;
|
||||
participations: AccompanyingPeriodParticipation[];
|
||||
personLocation?: Person | null;
|
||||
pinnedComment?: Comment | null;
|
||||
preventUserIsChangedNotification: boolean;
|
||||
remark: string;
|
||||
requestorAnonymous: boolean;
|
||||
requestorPerson?: Person | null;
|
||||
requestorThirdParty?: Thirdparty | null;
|
||||
resources: AccompanyingPeriodResource[];
|
||||
scopes: Scope[];
|
||||
socialIssues: SocialIssue[];
|
||||
step?:
|
||||
| "CLOSED"
|
||||
| "CONFIRMED"
|
||||
| "CONFIRMED_INACTIVE_SHORT"
|
||||
| "CONFIRMED_INACTIVE_LONG"
|
||||
| "DRAFT";
|
||||
}
|
||||
|
||||
export interface AccompanyingPeriodWorkEvaluationDocument {
|
||||
id: number;
|
||||
type: "accompanying_period_work_evaluation_document";
|
||||
@@ -41,3 +82,172 @@ export interface AccompanyingPeriodWorkEvaluationDocument {
|
||||
workflows_availables: WorkflowAvailable[];
|
||||
workflows: object[];
|
||||
}
|
||||
|
||||
export interface AccompanyingPeriodWork {
|
||||
id: number;
|
||||
accompanyingPeriod?: AccompanyingPeriod;
|
||||
accompanyingPeriodWorkEvaluations: AccompanyingPeriodWorkEvaluation[];
|
||||
createdAt?: string;
|
||||
createdAutomatically: boolean;
|
||||
createdAutomaticallyReason: string;
|
||||
createdBy: User;
|
||||
endDate?: string;
|
||||
goals: AccompanyingPeriodWorkGoal[];
|
||||
handlingThierParty?: Thirdparty;
|
||||
note: string;
|
||||
persons: Person[];
|
||||
privateComment: PrivateCommentEmbeddable;
|
||||
referrersHistory: AccompanyingPeriodWorkReferrerHistory[];
|
||||
results: Result[];
|
||||
socialAction?: SocialAction;
|
||||
startDate?: string;
|
||||
thirdParties: Thirdparty[];
|
||||
updatedAt?: string;
|
||||
updatedBy: User;
|
||||
version: number;
|
||||
}
|
||||
|
||||
interface SocialAction {
|
||||
id: number;
|
||||
parent?: SocialAction | null;
|
||||
children: SocialAction[];
|
||||
issue?: SocialIssue | null;
|
||||
ordering: number;
|
||||
title: {
|
||||
fr: string;
|
||||
};
|
||||
defaultNotificationDelay?: string | null;
|
||||
desactivationDate?: string | null;
|
||||
evaluations: Evaluation[];
|
||||
goals: Goal[];
|
||||
results: Result[];
|
||||
}
|
||||
|
||||
export interface AccompanyingPeriodResource {
|
||||
id: number;
|
||||
accompanyingPeriod: AccompanyingPeriod;
|
||||
comment?: string | null;
|
||||
person?: Person | null;
|
||||
thirdParty?: Thirdparty | null;
|
||||
}
|
||||
|
||||
export interface Origin {
|
||||
id: number;
|
||||
label: {
|
||||
fr: string;
|
||||
};
|
||||
noActiveAfter: DateTime;
|
||||
}
|
||||
|
||||
export interface ClosingMotive {
|
||||
id: number;
|
||||
active: boolean;
|
||||
name: {
|
||||
fr: string;
|
||||
};
|
||||
ordering: number;
|
||||
isCanceledAccompanyingPeriod: boolean;
|
||||
parent?: ClosingMotive | null;
|
||||
children: ClosingMotive[];
|
||||
}
|
||||
|
||||
export interface AccompanyingPeriodParticipation {
|
||||
id: number;
|
||||
startDate: DateTime;
|
||||
endDate?: DateTime | null;
|
||||
accompanyingPeriod: AccompanyingPeriod;
|
||||
person: Person;
|
||||
}
|
||||
|
||||
export interface AccompanyingPeriodLocationHistory {
|
||||
id: number;
|
||||
startDate: DateTime;
|
||||
endDate?: DateTime | null;
|
||||
addressLocation?: Address | null;
|
||||
period: AccompanyingPeriod;
|
||||
personLocation?: Person | null;
|
||||
}
|
||||
|
||||
export interface SocialIssue {
|
||||
id: number;
|
||||
parent?: SocialIssue | null;
|
||||
children: SocialIssue[];
|
||||
socialActions?: SocialAction[] | null;
|
||||
ordering: number;
|
||||
title: {
|
||||
fr: string;
|
||||
};
|
||||
desactivationDate?: string | null;
|
||||
}
|
||||
|
||||
export interface Goal {
|
||||
id: number;
|
||||
results: Result[];
|
||||
socialActions?: SocialAction[] | null;
|
||||
title: {
|
||||
fr: string;
|
||||
};
|
||||
}
|
||||
|
||||
export interface Result {
|
||||
id: number;
|
||||
accompanyingPeriodWorks: AccompanyingPeriodWork[];
|
||||
accompanyingPeriodWorkGoals: AccompanyingPeriodWorkGoal[];
|
||||
goals: Goal[];
|
||||
socialActions: SocialAction[];
|
||||
title: {
|
||||
fr: string;
|
||||
};
|
||||
desactivationDate?: string | null;
|
||||
}
|
||||
|
||||
export interface AccompanyingPeriodWorkGoal {
|
||||
id: number;
|
||||
accompanyingPeriodWork: AccompanyingPeriodWork;
|
||||
goal: Goal;
|
||||
note: string;
|
||||
results: Result[];
|
||||
}
|
||||
|
||||
export interface AccompanyingPeriodWorkEvaluation {
|
||||
accompanyingPeriodWork: AccompanyingPeriodWork | null;
|
||||
comment: string;
|
||||
createdAt: DateTime | null;
|
||||
createdBy: User | null;
|
||||
documents: AccompanyingPeriodWorkEvaluationDocument[];
|
||||
endDate: DateTime | null;
|
||||
evaluation: Evaluation | null;
|
||||
id: number | null;
|
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||
key: any;
|
||||
maxDate: DateTime | null;
|
||||
startDate: DateTime | null;
|
||||
updatedAt: DateTime | null;
|
||||
updatedBy: User | null;
|
||||
warningInterval: string | null;
|
||||
timeSpent: number | null;
|
||||
}
|
||||
|
||||
export interface Evaluation {
|
||||
id: number;
|
||||
url: string;
|
||||
socialActions: SocialAction[];
|
||||
title: {
|
||||
fr: string;
|
||||
};
|
||||
active: boolean;
|
||||
delay: string;
|
||||
notificationDelay: string;
|
||||
}
|
||||
|
||||
export interface AccompanyingPeriodWorkReferrerHistory {
|
||||
id: number;
|
||||
accompanyingPeriodWork: AccompanyingPeriodWork;
|
||||
user: User;
|
||||
startDate: DateTime;
|
||||
endDate: DateTime | null;
|
||||
createdAt: DateTime;
|
||||
updatedAt: DateTime | null;
|
||||
createdBy: User;
|
||||
updatedBy: User | null;
|
||||
}
|
||||
|
||||
@@ -0,0 +1,60 @@
|
||||
<template>
|
||||
<div class="container">
|
||||
<div class="item-bloc">
|
||||
<div class="item-row">
|
||||
<h2 class="badge-title">
|
||||
<span class="title_label"></span>
|
||||
<span class="title_action">
|
||||
<span class="chill-entity entity-social-action">
|
||||
<span class="badge bg-light text-dark">
|
||||
{{ acpw?.socialAction?.title.fr }}
|
||||
</span>
|
||||
</span>
|
||||
|
||||
<ul class="small_in_title columns mt-1">
|
||||
<li>
|
||||
<span class="item-key">
|
||||
{{ trans(ACCOMPANYING_COURSE_WORK_START_DATE) }} :
|
||||
</span>
|
||||
<b>{{ formatDate(acpw.startDate) }}</b>
|
||||
</li>
|
||||
|
||||
<li v-if="acpw.endDate">
|
||||
<span class="item-key">
|
||||
{{ trans(ACCOMPANYING_COURSE_WORK_END_DATE) }} :
|
||||
</span>
|
||||
<b>{{ formatDate(acpw.endDate) }}</b>
|
||||
</li>
|
||||
</ul>
|
||||
</span>
|
||||
</h2>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import {
|
||||
ACCOMPANYING_COURSE_WORK_END_DATE,
|
||||
ACCOMPANYING_COURSE_WORK_START_DATE,
|
||||
trans,
|
||||
} from "translator";
|
||||
import { ISOToDate } from "ChillMainAssets/chill/js/date";
|
||||
import { DateTime } from "ChillMainAssets/types";
|
||||
import { AccompanyingPeriodWork } from "../../../types";
|
||||
|
||||
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
||||
const props = defineProps<{ acpw: AccompanyingPeriodWork }>();
|
||||
const formatDate = (dateObject: DateTime) => {
|
||||
if (dateObject) {
|
||||
const parsedDate = ISOToDate(dateObject.datetime);
|
||||
if (parsedDate) {
|
||||
return new Intl.DateTimeFormat("default", { dateStyle: "short" }).format(
|
||||
parsedDate,
|
||||
);
|
||||
} else {
|
||||
return "";
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,47 @@
|
||||
<template>
|
||||
<div class="results">
|
||||
<div
|
||||
v-for="acpw in accompanyingPeriodWorks"
|
||||
:key="acpw.id"
|
||||
class="list-item"
|
||||
>
|
||||
<label class="acpw-item">
|
||||
<div>
|
||||
<input
|
||||
type="radio"
|
||||
:value="acpw"
|
||||
v-model="selectedAcpw"
|
||||
name="item"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<accompanying-period-work-item :acpw="acpw" />
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import AccompanyingPeriodWorkItem from "./AccompanyingPeriodWorkItem.vue";
|
||||
import { AccompanyingPeriodWork } from "../../../types";
|
||||
import { defineProps, ref, watch } from "vue";
|
||||
|
||||
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
||||
const props = defineProps<{
|
||||
accompanyingPeriodWorks: AccompanyingPeriodWork[];
|
||||
}>();
|
||||
const selectedAcpw = ref<AccompanyingPeriodWork | null>(null);
|
||||
|
||||
// eslint-disable-next-line vue/valid-define-emits
|
||||
const emit = defineEmits();
|
||||
|
||||
watch(selectedAcpw, (newValue) => {
|
||||
emit("update:selectedAcpw", newValue);
|
||||
});
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.acpw-item {
|
||||
display: flex;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,101 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="row justify-content-end">
|
||||
<div class="col-md-6 col-sm-10" v-if="selectedAcpw">
|
||||
<ul class="list-suggest remove-items">
|
||||
<li>
|
||||
<span @click="selectedAcpw = null" class="chill-denomination">{{
|
||||
selectedAcpw?.socialAction?.title.fr
|
||||
}}</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<ul class="record_actions">
|
||||
<li>
|
||||
<a class="btn btn-sm btn-create mt-3" @click="openModal">
|
||||
{{ trans(ACPW_DUPLICATE_SELECT_ACCOMPANYING_PERIOD_WORK) }}
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<teleport to="body">
|
||||
<modal
|
||||
v-if="showModal"
|
||||
@close="closeModal"
|
||||
modal-dialog-class="modal-dialog-scrollable modal-xl"
|
||||
>
|
||||
<template #header>
|
||||
<h3>{{ trans(ACPW_DUPLICATE_SELECT_ACCOMPANYING_PERIOD_WORK) }}</h3>
|
||||
</template>
|
||||
|
||||
<template #body>
|
||||
<accompanying-period-work-list
|
||||
:accompanying-period-works="accompanyingPeriodWorks"
|
||||
v-model:selectedAcpw="selectedAcpw"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<template #footer>
|
||||
<button type="button" class="btn btn-save" @click="confirmSelection">
|
||||
{{ trans(CONFIRM) }}
|
||||
</button>
|
||||
</template>
|
||||
</modal>
|
||||
</teleport>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import {onMounted, ref} from "vue";
|
||||
import Modal from "ChillMainAssets/vuejs/_components/Modal.vue";
|
||||
import AccompanyingPeriodWorkList from "./AccompanyingPeriodWorkList.vue";
|
||||
import {AccompanyingPeriodWork} from "../../../types";
|
||||
import {ACPW_DUPLICATE_SELECT_ACCOMPANYING_PERIOD_WORK, CONFIRM, trans,} from "translator";
|
||||
import {fetchResults} from "ChillMainAssets/lib/api/apiMethods";
|
||||
|
||||
interface AccompanyingPeriodWorkSelectorModalProps {
|
||||
accompanyingPeriodId: number;
|
||||
}
|
||||
|
||||
const selectedAcpw = ref<AccompanyingPeriodWork | null>(null);
|
||||
const showModal = ref(false);
|
||||
const accompanyingPeriodWorks = ref<AccompanyingPeriodWork[]>([]);
|
||||
const props = defineProps<AccompanyingPeriodWorkSelectorModalProps>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
pickWork: [payload: { work: AccompanyingPeriodWork | null }];
|
||||
}>();
|
||||
|
||||
onMounted(() => {
|
||||
if (props.accompanyingPeriodId) {
|
||||
getAccompanyingPeriodWorks(props.accompanyingPeriodId);
|
||||
} else {
|
||||
console.error("No accompanyingperiod id was given");
|
||||
}
|
||||
});
|
||||
const getAccompanyingPeriodWorks = async (periodId: number) => {
|
||||
const url = `/api/1.0/person/accompanying-course/${periodId}/works.json`;
|
||||
|
||||
try {
|
||||
accompanyingPeriodWorks.value = await fetchResults(url);
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
}
|
||||
/* makeFetch<number, AccompanyingPeriodWork[]>("GET", url)
|
||||
.then((response) => {
|
||||
accompanyingPeriodWorks.value = response;
|
||||
})
|
||||
.catch((error) => {
|
||||
console.log(error);
|
||||
});*/
|
||||
};
|
||||
|
||||
const openModal = () => (showModal.value = true);
|
||||
const closeModal = () => (showModal.value = false);
|
||||
const confirmSelection = () => {
|
||||
emit("pickWork", { work: selectedAcpw.value });
|
||||
closeModal();
|
||||
};
|
||||
</script>
|
||||
Reference in New Issue
Block a user