Chill-project/chill-bundles
6
0
Fork 0
mirror of https://gitlab.com/Chill-Projet/chill-bundles.git synced 2025-07-08 09:56:14 +00:00
Code Issues Actions Projects Releases Wiki Activity

Merge branch '1344-1246-1257-afficher-patient-suggérés-et-selecteur-urgent' into 'ticket-app-master'

Browse Source 
Afficher les patients suggérés et ajouter un sélecteur urgent/non urgent

See merge request Chill-Projet/chill-bundles!841
This commit is contained in:
Julien Fastré 2025-07-04 07:45:34 +00:00
commit 70955573e8
24 changed files with 1539 additions and 1121 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

71
src/Bundle/ChillMainBundle/Resources/public/types.ts
View File

@ -10,6 +10,11 @@ export interface Civility {
// TODO
}
export interface Household {
type: "household";
id: number;
}
export interface Job {
id: number;
type: "user_job";
@ -48,16 +53,10 @@ export interface User {
label: string;
// todo: mainCenter; mainJob; etc..
}
// TODO : Add missing household properties
export interface Household {
type: "household";
id: number;
}
export interface ThirdParty {
type: "thirdparty";
id: number;
text: string;
firstname: string;
name: string;
email: string;
@ -228,3 +227,61 @@ export interface WorkflowAttachment {
export interface PrivateCommentEmbeddable {
comments: Record<number, string>;
}
// API Exception types
export interface TransportExceptionInterface {
name: string;
}
export interface ValidationExceptionInterface
extends TransportExceptionInterface {
name: "ValidationException";
error: object;
violations: string[];
titles: string[];
propertyPaths: string[];
}
export interface AccessExceptionInterface extends TransportExceptionInterface {
name: "AccessException";
violations: string[];
}
export interface NotFoundExceptionInterface
extends TransportExceptionInterface {
name: "NotFoundException";
}
export interface ServerExceptionInterface extends TransportExceptionInterface {
name: "ServerException";
message: string;
code: number;
body: string;
}
export interface ConflictHttpExceptionInterface
extends TransportExceptionInterface {
name: "ConflictHttpException";
violations: string[];
}
export type ApiException =
| ValidationExceptionInterface
| AccessExceptionInterface
| NotFoundExceptionInterface
| ServerExceptionInterface
| ConflictHttpExceptionInterface;
export interface Modal {
showModal: boolean;
modalDialogClass: string;
}
export interface Selected {
result: UserGroupOrUser;
}
export interface addNewEntities {
selected: Selected[];
modal: Modal;
}

390
src/Bundle/ChillMainBundle/Resources/public/vuejs/PickEntity/PickEntity.vue
View File

@ -1,142 +1,272 @@
<template>
<ul :class="listClasses" v-if="picked.length && displayPicked">
<li v-for="p in picked" @click="removeEntity(p)" :key="p.type + p.id">
<span class="chill_denomination">{{ p.text }}</span>
</li>
</ul>
<ul class="record_actions">
<li class="add-persons">
<add-persons
:options="addPersonsOptions"
:key="uniqid"
:buttonTitle="translatedListOfTypes"
:modalTitle="translatedListOfTypes"
ref="addPersons"
@addNewPersons="addNewEntity"
<div class="grey-card">
<ul :class="listClasses" v-if="picked.length && displayPicked">
<li
v-for="p in picked"
@click="removeEntity(p)"
:key="p.type + p.id"
>
</add-persons>
</li>
</ul>
<ul class="list-suggest add-items inline">
<li v-for="s in suggested" :key="s.id" @click="addNewSuggested(s)">
<span>{{ s.text }}</span>
</li>
</ul>
<span
:class="getBadgeClass(p)"
class="chill_denomination"
:style="getBadgeStyle(p)"
>
{{ p.text }}
</span>
</li>
</ul>
<ul class="record_actions">
<li class="add-persons">
<add-persons
:options="addPersonsOptions"
:key="uniqid"
:buttonTitle="translatedListOfTypes"
:modalTitle="translatedListOfTypes"
@addNewPersons="addNewEntity"
>
</add-persons>
</li>
</ul>
<ul class="badge-suggest add-items inline" style="float: right">
<li v-for="s in suggested" :key="s.id" @click="addNewSuggested(s)">
<span :class="getBadgeClass(s)" :style="getBadgeStyle(s)">
{{ s.text }}
</span>
</li>
</ul>
</div>
</template>
<script>
<script lang="ts" setup>
import { ref, computed, defineProps, defineEmits, defineComponent } from "vue";
import AddPersons from "ChillPersonAssets/vuejs/_components/AddPersons.vue";
import { appMessages } from "./i18n";
import { Entities, EntityType, SearchOptions } from "ChillPersonAssets/types";
import {
PICK_ENTITY_MODAL_TITLE,
PICK_ENTITY_USER,
PICK_ENTITY_USER_GROUP,
PICK_ENTITY_PERSON,
PICK_ENTITY_THIRDPARTY,
trans,
} from "translator";
import { addNewEntities } from "ChillMainAssets/types";
export default {
name: "PickEntity",
props: {
multiple: {
type: Boolean,
required: true,
},
types: {
type: Array,
required: true,
},
picked: {
required: true,
},
uniqid: {
type: String,
required: true,
},
removableIfSet: {
type: Boolean,
default: true,
},
displayPicked: {
// display picked entities.
type: Boolean,
default: true,
},
suggested: {
type: Array,
default: [],
},
label: {
type: String,
required: false,
},
},
emits: ["addNewEntity", "removeEntity", "addNewEntityProcessEnded"],
defineComponent({
components: {
AddPersons,
},
data() {
return {
key: "",
};
},
computed: {
addPersonsOptions() {
return {
uniq: !this.multiple,
type: this.types,
priority: null,
button: {
size: "btn-sm",
class: "btn-submit",
},
};
},
translatedListOfTypes() {
if (this.label !== "") {
return this.label;
}
});
const props = defineProps<{
multiple: boolean;
types: EntityType[];
picked: Entities[];
uniqid: string;
removableIfSet?: boolean;
displayPicked?: boolean;
suggested?: Entities[];
label?: string;
}>();
let trans = [];
this.types.forEach((t) => {
if (this.$props.multiple) {
trans.push(appMessages.fr.pick_entity[t].toLowerCase());
} else {
trans.push(
appMessages.fr.pick_entity[t + "_one"].toLowerCase(),
);
}
});
const emits = defineEmits<{
(e: "addNewEntity", payload: { entity: Entities }): void;
(e: "removeEntity", payload: { entity: Entities }): void;
(e: "addNewEntityProcessEnded"): void;
}>();
if (this.$props.multiple) {
return (
appMessages.fr.pick_entity.modal_title + trans.join(", ")
);
} else {
return (
appMessages.fr.pick_entity.modal_title_one +
trans.join(", ")
);
}
},
listClasses() {
return {
"list-suggest": true,
"remove-items": this.$props.removableIfSet,
};
},
},
methods: {
addNewSuggested(entity) {
this.$emit("addNewEntity", { entity: entity });
},
addNewEntity({ selected, modal }) {
selected.forEach((item) => {
this.$emit("addNewEntity", { entity: item.result });
}, this);
this.$refs.addPersons.resetSearch(); // to cast child method
modal.showModal = false;
this.$emit("addNewEntityProcessEnded");
},
removeEntity(entity) {
if (!this.$props.removableIfSet) {
return;
}
this.$emit("removeEntity", { entity: entity });
},
},
};
const addPersons = ref();
const addPersonsOptions = computed(
() =>
({
uniq: !props.multiple,
type: props.types,
priority: null,
button: {
size: "btn-sm",
class: "btn-submit",
},
}) as SearchOptions,
);
const translatedListOfTypes = computed(() => {
if (props.label !== undefined && props.label !== "") {
return props.label;
}
const translatedTypes = props.types.map((type: EntityType) => {
switch (type) {
case "user":
return trans(PICK_ENTITY_USER, {
count: props.multiple ? 2 : 1,
});
case "person":
return trans(PICK_ENTITY_PERSON, {
count: props.multiple ? 2 : 1,
});
case "third_party":
return trans(PICK_ENTITY_THIRDPARTY, {
count: props.multiple ? 2 : 1,
});
case "user_group":
return trans(PICK_ENTITY_USER_GROUP, {
count: props.multiple ? 2 : 1,
});
}
});
return `${trans(PICK_ENTITY_MODAL_TITLE, {
count: props.multiple ? 2 : 1,
})} ${translatedTypes.join(", ")}`;
});
const listClasses = computed(() => ({
"badge-suggest": true,
"remove-items": props.removableIfSet !== false,
inline: true,
}));
function addNewSuggested(entity: Entities) {
emits("addNewEntity", { entity });
}
function addNewEntity({ selected }: addNewEntities) {
Object.values(selected).forEach((item) => {
emits("addNewEntity", { entity: item.result });
});
addPersons.value?.resetSearch();
emits("addNewEntityProcessEnded");
}
function removeEntity(entity: Entities) {
if (props.removableIfSet === false) {
return;
}
emits("removeEntity", { entity });
}
function getBadgeClass(entities: Entities) {
if (entities.type !== "user_group") {
return entities.type;
}
return "";
}
function getBadgeStyle(entities: Entities) {
if (entities.type === "user_group") {
return [
`ul.badge-suggest li > span {
color: ${entities.foregroundColor}!important;
border-bottom-color: ${entities.backgroundColor};
}`,
];
}
return [];
}
</script>
<style lang="scss" scoped>
.grey-card {
background: #f8f9fa;
border-radius: 8px;
padding: 1.5rem;
min-height: 160px;
}
.btn-check:checked + .btn,
:not(.btn-check) + .btn:active,
.btn:first-child:active,
.btn.active,
.btn.show {
color: white;
box-shadow: 0 0 0 0.2rem var(--bs-chill-green);
outline: 0;
}
.as-user-group {
display: inline-block;
}
ul.badge-suggest {
list-style-type: none;
padding-left: 0;
margin-bottom: 0px;
}
ul.badge-suggest li > span {
white-space: normal;
text-align: start;
margin-bottom: 3px;
}
ul.badge-suggest.inline li {
display: inline-block;
margin-right: 0.2em;
}
ul.badge-suggest.add-items li {
position: relative;
}
ul.badge-suggest.add-items li span {
cursor: pointer;
padding-left: 2rem;
}
ul.badge-suggest.add-items li span:hover {
color: #ced4da;
}
ul.badge-suggest.add-items li > span:before {
font: normal normal normal 13px ForkAwesome;
margin-right: 1.8em;
content: "\f067";
color: var(--bs-success);
position: absolute;
display: block;
top: 50%;
left: 0.75rem;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
ul.badge-suggest.remove-items li {
position: relative;
}
ul.badge-suggest.remove-items li span {
cursor: pointer;
padding-left: 2rem;
}
ul.badge-suggest.remove-items li span:hover {
color: #ced4da;
}
ul.badge-suggest.remove-items li > span:before {
font: normal normal normal 13px ForkAwesome;
margin-right: 1.8em;
content: "\f1f8";
color: var(--bs-danger);
position: absolute;
display: block;
top: 50%;
left: 0.75rem;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
ul.badge-suggest li > span {
margin: 0.2rem 0.1rem;
display: inline-block;
padding: 0 1em 0 2.2em !important;
background-color: #fff;
border: 1px solid #dee2e6;
border-bottom-width: 3px;
border-bottom-style: solid;
border-radius: 6px;
font-size: 0.75em;
font-weight: 700;
}
ul.badge-suggest li > span.person {
border-bottom-color: #43b29d;
}
ul.badge-suggest li > span.thirdparty {
border-bottom-color: rgb(198.9, 72, 98.1);
}
</style>

28
src/Bundle/ChillMainBundle/translations/messages+intl-icu.fr.yaml
View File

@ -156,3 +156,31 @@ renderbox:
no_current_address: "Sans adresse actuellement"
new_household: "Nouveau ménage"
no_members_yet: "Aucun membre actuellement"
pick_entity:
add: "Ajouter"
modal_title: >-
{count, plural,
one {Indiquer un}
other {Ajouter des}
}
user: >-
{count, plural,
one {Utilisateur}
other {Utilisateurs}
}
user_group: >-
{count, plural,
one {Groupe d'utilisateur}
other {Groupes d'utilisateurs}
}
person: >-
{count, plural,
one {Usager}
other {Usagers}
}
thirdparty: >-
{count, plural,
one {Tiers}
other {Tiers}
}

476
src/Bundle/ChillPersonBundle/Resources/public/types.ts
View File

@ -1,317 +1,309 @@
import { StoredObject } from "ChillDocStoreAssets/types";
import {
Address,
Scope,
Center,
Civility,
DateTime,
User,
WorkflowAvailable,
Job,
Household,
Center,
Civility,
DateTime,
User,
UserGroup,
WorkflowAvailable,
Household,
ThirdParty,
WorkflowAvailable,
Scope,
Job,
PrivateCommentEmbeddable,
} from "ChillMainAssets/types";
import { StoredObject } from "ChillDocStoreAssets/types";
} from "../../../ChillMainBundle/Resources/public/types";
import { Thirdparty } from "../../../ChillThirdPartyBundle/Resources/public/types";
import { Calendar } from "../../../ChillCalendarBundle/Resources/public/types";
export interface Person {
id: number;
type: "person";
text: string;
textAge: string;
firstName: string;
lastName: string;
current_household_address: Address | null;
birthdate: DateTime | null;
deathdate: DateTime | null;
age: number;
phonenumber: string;
mobilenumber: string;
email: string;
gender: "woman" | "man" | "other";
centers: Center[];
civility: Civility | null;
current_household_id: number;
current_residential_addresses: Address[];
id: number;
type: "person";
text: string;
textAge: string;
firstName: string;
lastName: string;
current_household_address: Address | null;
birthdate: DateTime | null;
deathdate: DateTime | null;
age: number;
phonenumber: string;
mobilenumber: string;
email: string;
gender: "woman" | "man" | "other";
centers: Center[];
civility: Civility | null;
current_household_id: number;
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";
storedObject: StoredObject;
title: string;
createdAt: DateTime | null;
createdBy: User | null;
updatedAt: DateTime | null;
updatedBy: User | null;
workflows_availables: WorkflowAvailable[];
workflows: object[];
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 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;
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 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;
id: number;
accompanyingPeriod: AccompanyingPeriod;
comment?: string | null;
person?: Person | null;
thirdParty?: Thirdparty | null;
}
export interface Origin {
id: number;
label: {
fr: string;
};
noActiveAfter: DateTime;
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[];
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;
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;
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;
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;
id: number;
results: Result[];
socialActions?: SocialAction[] | null;
title: {
fr: string;
};
}
export interface AccompanyingPeriodWorkGoal {
id: number;
accompanyingPeriodWork: AccompanyingPeriodWork;
goal: Goal;
note: string;
results: Result[];
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;
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;
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;
id: number;
accompanyingPeriodWork: AccompanyingPeriodWork;
user: User;
startDate: DateTime;
endDate: DateTime | null;
createdAt: DateTime;
updatedAt: DateTime | null;
createdBy: User;
updatedBy: User | null;
}
export interface AccompanyingPeriodWorkEvaluationDocument {
id: number;
type: "accompanying_period_work_evaluation_document";
storedObject: StoredObject;
title: string;
createdAt: DateTime | null;
createdBy: User | null;
updatedAt: DateTime | null;
updatedBy: User | null;
workflows_availables: WorkflowAvailable[];
workflows: object[];
}
export type EntityType =
| "user_group"
| "user"
| "person"
| "third_party"
| "household";
export type Entities = (UserGroup | User | Person | ThirdParty | Household) & {
address?: Address | null;
kind?: string;
text?: string;
profession?: string;
address?: Address | null;
kind?: string;
text?: string;
profession?: string;
};
export type Result = Entities & {
parent?: Entities | null;
parent?: Entities | null;
};
export interface Suggestion {
key: string;
relevance: number;
result: Result;
key: string;
relevance: number;
result: Result;
}
export interface SearchPagination {
first: number;
items_per_page: number;
next: number | null;
previous: number | null;
more: boolean;
first: number;
items_per_page: number;
next: number | null;
previous: number | null;
more: boolean;
}
export interface Search {
count: number;
pagination: SearchPagination;
results: Suggestion[];
count: number;
pagination: SearchPagination;
results: Suggestion[];
}
export interface SearchOptions {
uniq: boolean;
type: string[];
priority: number | null;
button: {
size: string;
class: string;
type: string;
display: string;
};
uniq: boolean;
type: string[];
priority: number | null;
button: {
size: string;
class: string;
type: string;
display: string;
};
}
export class MakeFetchException extends Error {
sta: number;
txt: string;
violations: unknown | null;
sta: number;
txt: string;
violations: unknown | null;
constructor(txt: string, sta: number, violations: unknown | null = null) {
super(txt);
this.name = "ValidationException";
this.sta = sta;
this.txt = txt;
this.violations = violations;
Object.setPrototypeOf(this, MakeFetchException.prototype);
}
constructor(txt: string, sta: number, violations: unknown | null = null) {
super(txt);
this.name = "ValidationException";
this.sta = sta;
this.txt = txt;
this.violations = violations;
Object.setPrototypeOf(this, MakeFetchException.prototype);
}
}

664
src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/AddPersons.vue
View File

@ -11,10 +11,10 @@
<teleport to="body">
<modal
v-if="showModal"
@close="closeModal"
@close="closeModal"
:modal-dialog-class="modalDialogClass"
:show="showModal"
:hide-footer="false"
:hide-footer="false"
>
<template #header>
<h3 class="modal-title">
@ -22,101 +22,110 @@
</h3>
</template>
<template #body-head>
<div class="modal-body">
<div class="search">
<label class="col-form-label" style="float: right">
{{
trans(ADD_PERSONS_SUGGESTED_COUNTER, {
count: suggestedCounter,
})
}}
</label>
<template #body-head>
<div class="modal-body">
<div class="search">
<label class="col-form-label" style="float: right">
{{
trans(ADD_PERSONS_SUGGESTED_COUNTER, {
count: suggestedCounter,
})
}}
</label>
<input
id="search-persons"
name="query"
v-model="query"
:placeholder="trans(ADD_PERSONS_SEARCH_SOME_PERSONS)"
ref="searchRef"
/>
<i class="fa fa-search fa-lg" />
<i
class="fa fa-times"
v-if="queryLength >= 3"
@click="resetSuggestion"
/>
</div>
</div>
<div class="modal-body" v-if="checkUniq === 'checkbox'">
<div class="count">
<span>
<a v-if="suggestedCounter > 2" @click="selectAll">
{{ trans(ACTION_CHECK_ALL) }}
</a>
<a v-if="selectedCounter > 0" @click="resetSelection">
<i v-if="suggestedCounter > 2"> • </i>
{{ trans(ACTION_RESET) }}
</a>
</span>
<span v-if="selectedCounter > 0">
{{
trans(ADD_PERSONS_SELECTED_COUNTER, {
count: selectedCounter,
})
}}
</span>
</div>
</div>
</template>
<input
id="search-persons"
name="query"
v-model="query"
:placeholder="
trans(ADD_PERSONS_SEARCH_SOME_PERSONS)
"
ref="searchRef"
/>
<i class="fa fa-search fa-lg" />
<i
class="fa fa-times"
v-if="queryLength >= 3"
@click="resetSuggestion"
/>
</div>
</div>
<div class="modal-body" v-if="checkUniq === 'checkbox'">
<div class="count">
<span>
<a v-if="suggestedCounter > 2" @click="selectAll">
{{ trans(ACTION_CHECK_ALL) }}
</a>
<a
v-if="selectedCounter > 0"
@click="resetSelection"
>
<i v-if="suggestedCounter > 2"> • </i>
{{ trans(ACTION_RESET) }}
</a>
</span>
<span v-if="selectedCounter > 0">
{{
trans(ADD_PERSONS_SELECTED_COUNTER, {
count: selectedCounter,
})
}}
</span>
</div>
</div>
</template>
<template #body>
<div class="results">
<person-suggestion
v-for="item in selectedAndSuggested.slice().reverse()"
:key="itemKey(item)"
:item="item"
:search="search"
:type="checkUniq"
@save-form-on-the-fly="saveFormOnTheFly"
@new-prior-suggestion="newPriorSuggestion"
@update-selected="updateSelected"
/>
<template #body>
<div class="results">
<person-suggestion
v-for="item in selectedAndSuggested.slice().reverse()"
:key="itemKey(item)"
:item="item"
:search="search"
:type="checkUniq"
@save-form-on-the-fly="saveFormOnTheFly"
@new-prior-suggestion="newPriorSuggestion"
@update-selected="updateSelected"
/>
<div class="create-button">
<on-the-fly
v-if="
queryLength >= 3 &&
(options.type.includes('person') ||
options.type.includes('thirdparty'))
"
:button-text="trans(ONTHEFLY_CREATE_BUTTON, { q: query })"
:allowed-types="options.type"
:query="query"
action="create"
@save-form-on-the-fly="saveFormOnTheFly"
ref="onTheFly"
/>
</div>
</div>
</template>
<div class="create-button">
<on-the-fly
v-if="
queryLength >= 3 &&
(options.type.includes('person') ||
options.type.includes('thirdparty'))
"
:button-text="
trans(ONTHEFLY_CREATE_BUTTON, { q: query })
"
:allowed-types="options.type"
:query="query"
action="create"
@save-form-on-the-fly="saveFormOnTheFly"
ref="onTheFly"
/>
</div>
</div>
</template>
<template #footer>
<button
class="btn btn-create"
@click.prevent="
() => {
$emit('addNewPersons', { selected: selectedComputed });
query = '';
closeModal();
}
"
>
{{ trans(ACTION_ADD) }}
</button>
</template>
</modal>
</teleport>
<template #footer>
<button
class="btn btn-create"
@click.prevent="
() => {
$emit('addNewPersons', {
selected: selectedComputed,
});
query = '';
closeModal();
}
"
>
{{ trans(ACTION_ADD) }}
</button>
</template>
</modal>
</teleport>
</template>
<script setup lang="ts">
@ -130,31 +139,31 @@ import OnTheFly from "ChillMainAssets/vuejs/OnTheFly/components/OnTheFly.vue";
import { makeFetch } from "ChillMainAssets/lib/api/apiMethods";
import {
trans,
ADD_PERSONS_SUGGESTED_COUNTER,
ADD_PERSONS_SEARCH_SOME_PERSONS,
ADD_PERSONS_SELECTED_COUNTER,
ONTHEFLY_CREATE_BUTTON,
ACTION_CHECK_ALL,
ACTION_RESET,
ACTION_ADD,
trans,
ADD_PERSONS_SUGGESTED_COUNTER,
ADD_PERSONS_SEARCH_SOME_PERSONS,
ADD_PERSONS_SELECTED_COUNTER,
ONTHEFLY_CREATE_BUTTON,
ACTION_CHECK_ALL,
ACTION_RESET,
ACTION_ADD,
} from "translator";
import {
Suggestion,
Search,
Result as OriginalResult,
SearchOptions,
Suggestion,
Search,
Result as OriginalResult,
SearchOptions,
} from "ChillPersonAssets/types";
// Extend Result type to include optional addressId
type Result = OriginalResult & { addressId?: number };
const props = defineProps({
suggested: { type: Array as () => Suggestion[], default: () => [] },
selected: { type: Array as () => Suggestion[], default: () => [] },
buttonTitle: { type: String, required: true },
modalTitle: { type: String, required: true },
options: { type: Object as () => SearchOptions, required: true },
suggested: { type: Array as () => Suggestion[], default: () => [] },
selected: { type: Array as () => Suggestion[], default: () => [] },
buttonTitle: { type: String, required: true },
modalTitle: { type: String, required: true },
options: { type: Object as () => SearchOptions, required: true },
});
defineEmits(["addNewPersons"]);
@ -163,25 +172,25 @@ const showModal = ref(false);
const modalDialogClass = ref("modal-dialog-scrollable modal-xl");
const modal = shallowRef({
showModal: false,
modalDialogClass: "modal-dialog-scrollable modal-xl",
showModal: false,
modalDialogClass: "modal-dialog-scrollable modal-xl",
});
const search = reactive({
query: "" as string,
previousQuery: "" as string,
currentSearchQueryController: null as AbortController | null,
suggested: props.suggested as Suggestion[],
selected: props.selected as Suggestion[],
priorSuggestion: {} as Partial<Suggestion>,
query: "" as string,
previousQuery: "" as string,
currentSearchQueryController: null as AbortController | null,
suggested: props.suggested as Suggestion[],
selected: props.selected as Suggestion[],
priorSuggestion: {} as Partial<Suggestion>,
});
const searchRef = ref<HTMLInputElement | null>(null);
const onTheFly = ref<InstanceType<typeof OnTheFly> | null>(null);
const query = computed({
get: () => search.query,
set: (val) => setQuery(val),
get: () => search.query,
set: (val) => setQuery(val),
});
const queryLength = computed(() => search.query.length);
const suggestedCounter = computed(() => search.suggested.length);
@ -189,18 +198,18 @@ const selectedComputed = computed(() => search.selected);
const selectedCounter = computed(() => search.selected.length);
const getClassButton = computed(() => {
let size = props.options?.button?.size ?? "";
let type = props.options?.button?.type ?? "btn-create";
return size ? size + " " + type : type;
let size = props.options?.button?.size ?? "";
let type = props.options?.button?.type ?? "btn-create";
return size ? size + " " + type : type;
});
const displayTextButton = computed(() =>
props.options?.button?.display !== undefined
? props.options.button.display
: true,
props.options?.button?.display !== undefined
? props.options.button.display
: true,
);
const checkUniq = computed(() =>
props.options.uniq === true ? "radio" : "checkbox",
props.options.uniq === true ? "radio" : "checkbox",
);
const priorSuggestion = computed(() => search.priorSuggestion);
@ -209,229 +218,232 @@ const hasPriorSuggestion = computed(() => !!search.priorSuggestion.key);
const itemKey = (item: Suggestion) => item.result.type + item.result.id;
function addPriorSuggestion() {
if (hasPriorSuggestion.value) {
// Type assertion is safe here due to the checks above
search.suggested.unshift(priorSuggestion.value as Suggestion);
search.selected.unshift(priorSuggestion.value as Suggestion);
newPriorSuggestion(null);
}
if (hasPriorSuggestion.value) {
// Type assertion is safe here due to the checks above
search.suggested.unshift(priorSuggestion.value as Suggestion);
search.selected.unshift(priorSuggestion.value as Suggestion);
newPriorSuggestion(null);
}
}
const selectedAndSuggested = computed(() => {
addPriorSuggestion();
const uniqBy = (a: Suggestion[], key: (item: Suggestion) => string) => [
...new Map(a.map((x) => [key(x), x])).values(),
];
let union = [
...new Set([
...search.suggested.slice().reverse(),
...search.selected.slice().reverse(),
]),
];
return uniqBy(union, (k: Suggestion) => k.key);
addPriorSuggestion();
const uniqBy = (a: Suggestion[], key: (item: Suggestion) => string) => [
...new Map(a.map((x) => [key(x), x])).values(),
];
let union = [
...new Set([
...search.suggested.slice().reverse(),
...search.selected.slice().reverse(),
]),
];
return uniqBy(union, (k: Suggestion) => k.key);
});
function openModal() {
showModal.value = true;
nextTick(() => {
if (searchRef.value) searchRef.value.focus();
});
showModal.value = true;
nextTick(() => {
if (searchRef.value) searchRef.value.focus();
});
}
function closeModal() {
showModal.value = false;
showModal.value = false;
}
function setQuery(q: string) {
search.query = q;
search.query = q;
// Clear previous search if any
if (search.currentSearchQueryController) {
search.currentSearchQueryController.abort();
search.currentSearchQueryController = null;
}
// Clear previous search if any
if (search.currentSearchQueryController) {
search.currentSearchQueryController.abort();
search.currentSearchQueryController = null;
}
if (q === "") {
loadSuggestions([]);
return;
}
if (q === "") {
loadSuggestions([]);
return;
}
// Debounce delay based on query length
const delay = q.length > 3 ? 300 : 700;
// Debounce delay based on query length
const delay = q.length > 3 ? 300 : 700;
setTimeout(() => {
// Only search if query hasn't changed in the meantime
if (q !== search.query) return;
setTimeout(() => {
// Only search if query hasn't changed in the meantime
if (q !== search.query) return;
search.currentSearchQueryController = new AbortController();
search.currentSearchQueryController = new AbortController();
searchEntities(
{ query: q, options: props.options },
search.currentSearchQueryController.signal,
)
.then((suggested: Search) => {
loadSuggestions(suggested.results);
})
.catch((error: DOMException) => {
if (error instanceof DOMException && error.name === "AbortError") {
// Request was aborted, ignore
return;
}
throw error;
});
}, delay);
searchEntities(
{ query: q, options: props.options },
search.currentSearchQueryController.signal,
)
.then((suggested: Search) => {
loadSuggestions(suggested.results);
})
.catch((error: DOMException) => {
if (
error instanceof DOMException &&
error.name === "AbortError"
) {
// Request was aborted, ignore
return;
}
throw error;
});
}, delay);
}
function loadSuggestions(suggestedArr: Suggestion[]) {
search.suggested = suggestedArr;
search.suggested.forEach((item) => {
item.key = itemKey(item);
});
search.suggested = suggestedArr;
search.suggested.forEach((item) => {
item.key = itemKey(item);
});
}
function updateSelected(value: Suggestion[]) {
search.selected = value;
search.selected = value;
}
function resetSuggestion() {
search.query = "";
search.suggested = [];
search.query = "";
search.suggested = [];
}
function resetSelection() {
search.selected = [];
search.selected = [];
}
function resetSearch() {
resetSelection();
resetSuggestion();
resetSelection();
resetSuggestion();
}
function selectAll() {
search.suggested.forEach((item) => {
search.selected.push(item);
});
search.suggested.forEach((item) => {
search.selected.push(item);
});
}
function newPriorSuggestion(entity: Result | null) {
if (entity !== null) {
let suggestion = {
key: entity.type + entity.id,
relevance: 0.5,
result: entity,
};
search.priorSuggestion = suggestion;
} else {
search.priorSuggestion = {};
}
if (entity !== null) {
let suggestion = {
key: entity.type + entity.id,
relevance: 0.5,
result: entity,
};
search.priorSuggestion = suggestion;
} else {
search.priorSuggestion = {};
}
}
async function saveFormOnTheFly({
type,
data,
type,
data,
}: {
type: string;
data: Result;
type: string;
data: Result;
}) {
try {
if (type === "person") {
const responsePerson: Result = await makeFetch(
"POST",
"/api/1.0/person/person.json",
data,
);
newPriorSuggestion(responsePerson);
if (onTheFly.value) onTheFly.value.closeModal();
if (data.addressId != null) {
const household = { type: "household" };
const address = { id: data.addressId };
try {
const responseHousehold: Result = await makeFetch(
"POST",
"/api/1.0/person/household.json",
household,
);
const member = {
concerned: [
{
person: {
type: "person",
id: responsePerson.id,
},
start_date: {
datetime: `${new Date().toISOString().split("T")[0]}T00:00:00+02:00`,
},
holder: false,
comment: null,
},
],
destination: {
type: "household",
id: responseHousehold.id,
},
composition: null,
};
await makeFetch(
"POST",
"/api/1.0/person/household/members/move.json",
member,
);
try {
const _response = await makeFetch(
"POST",
`/api/1.0/person/household/${responseHousehold.id}/address.json`,
address,
try {
if (type === "person") {
const responsePerson: Result = await makeFetch(
"POST",
"/api/1.0/person/person.json",
data,
);
console.log(_response);
} catch (error) {
console.error(error);
}
} catch (error) {
console.error(error);
newPriorSuggestion(responsePerson);
if (onTheFly.value) onTheFly.value.closeModal();
if (data.addressId != null) {
const household = { type: "household" };
const address = { id: data.addressId };
try {
const responseHousehold: Result = await makeFetch(
"POST",
"/api/1.0/person/household.json",
household,
);
const member = {
concerned: [
{
person: {
type: "person",
id: responsePerson.id,
},
start_date: {
datetime: `${new Date().toISOString().split("T")[0]}T00:00:00+02:00`,
},
holder: false,
comment: null,
},
],
destination: {
type: "household",
id: responseHousehold.id,
},
composition: null,
};
await makeFetch(
"POST",
"/api/1.0/person/household/members/move.json",
member,
);
try {
const _response = await makeFetch(
"POST",
`/api/1.0/person/household/${responseHousehold.id}/address.json`,
address,
);
console.log(_response);
} catch (error) {
console.error(error);
}
} catch (error) {
console.error(error);
}
}
} else if (type === "thirdparty") {
const response: Result = await makeFetch(
"POST",
"/api/1.0/thirdparty/thirdparty.json",
data,
);
newPriorSuggestion(response);
if (onTheFly.value) onTheFly.value.closeModal();
}
}
} else if (type === "thirdparty") {
const response: Result = await makeFetch(
"POST",
"/api/1.0/thirdparty/thirdparty.json",
data,
);
newPriorSuggestion(response);
if (onTheFly.value) onTheFly.value.closeModal();
} catch (error) {
console.error(error);
}
} catch (error) {
console.error(error);
}
}
watch(
() => props.selected,
(newSelected) => {
search.selected = newSelected;
},
{ deep: true },
() => props.selected,
(newSelected) => {
search.selected = newSelected;
},
{ deep: true },
);
watch(
() => props.suggested,
(newSuggested) => {
search.suggested = newSuggested;
},
{ deep: true },
() => props.suggested,
(newSuggested) => {
search.suggested = newSuggested;
},
{ deep: true },
);
watch(
() => modal,
(val) => {
showModal.value = val.value.showModal;
modalDialogClass.value = val.value.modalDialogClass;
},
{ deep: true },
() => modal,
(val) => {
showModal.value = val.value.showModal;
modalDialogClass.value = val.value.modalDialogClass;
},
{ deep: true },
);
defineExpose({
resetSearch,
showModal,
resetSearch,
showModal,
});
</script>
@ -442,42 +454,42 @@ li.add-persons {
}
}
div.body-head {
overflow-y: unset;
div.modal-body:first-child {
margin: auto 4em;
div.search {
position: relative;
input {
width: 100%;
padding: 1.2em 1.5em 1.2em 2.5em;
}
i {
position: absolute;
opacity: 0.5;
padding: 0.65em 0;
top: 50%;
}
i.fa-search {
left: 0.5em;
}
i.fa-times {
right: 1em;
padding: 0.75em 0;
cursor: pointer;
}
overflow-y: unset;
div.modal-body:first-child {
margin: auto 4em;
div.search {
position: relative;
input {
width: 100%;
padding: 1.2em 1.5em 1.2em 2.5em;
}
i {
position: absolute;
opacity: 0.5;
padding: 0.65em 0;
top: 50%;
}
i.fa-search {
left: 0.5em;
}
i.fa-times {
right: 1em;
padding: 0.75em 0;
cursor: pointer;
}
}
}
}
div.modal-body:last-child {
padding-bottom: 0;
}
div.count {
margin: -0.5em 0 0.7em;
display: flex;
justify-content: space-between;
a {
cursor: pointer;
div.modal-body:last-child {
padding-bottom: 0;
}
div.count {
margin: -0.5em 0 0.7em;
display: flex;
justify-content: space-between;
a {
cursor: pointer;
}
}
}
}
.create-button > a {
margin-top: 0.5em;

57
src/Bundle/ChillTicketBundle/src/Resources/public/types.ts
View File

@ -15,7 +15,7 @@ export interface Motive {
export type TicketState = "open" | "closed";
export type TicketEmergencyState = "yes"|"no";
export type TicketEmergencyState = "yes" | "no";
interface TicketHistory<T extends string, D extends object> {
event_type: T;
@ -75,42 +75,52 @@ export interface AddresseeState {
export interface PersonsState {
persons: Person[];
}
export interface CallerState {
new_caller: Person | null;
}
export interface StateChange {
new_state: TicketState;
}
export interface StateChange {
new_state: TicketState;
export interface EmergencyChange {
new_emergency: TicketEmergencyState;
}
export interface CreateTicketState {
by: User;
}
interface AddPersonEvent extends TicketHistory<"add_person", PersonHistory> {}
export type AddCommentEvent = TicketHistory<"add_comment", Comment>;
export type SetMotiveEvent = TicketHistory<"set_motive", MotiveHistory>;
//interface AddAddressee extends TicketHistory<"add_addressee", AddresseeHistory> {};
//interface RemoveAddressee extends TicketHistory<"remove_addressee", AddresseeHistory> {};
export interface AddresseesStateEvent
extends TicketHistory<"addressees_state", AddresseeState> {}
export interface CreateTicketEvent
extends TicketHistory<"create_ticket", CreateTicketState> {}
export interface PersonStateEvent
extends TicketHistory<"persons_state", PersonsState> {}
export interface ChangeStateEvent
extends TicketHistory<"state_change", StateChange> {}
export type AddPersonEvent = TicketHistory<"add_person", PersonHistory>;
export type AddresseesStateEvent = TicketHistory<
"addressees_state",
AddresseeState
>;
export type CreateTicketEvent = TicketHistory<
"create_ticket",
CreateTicketState
>;
export type PersonStateEvent = TicketHistory<"persons_state", PersonsState>;
export type ChangeStateEvent = TicketHistory<"state_change", StateChange>;
export type EmergencyStateEvent = TicketHistory<
"emergency_change",
EmergencyChange
>;
export type CallerStateEvent = TicketHistory<"set_caller", CallerState>;
// TODO : Remove add_persont event from TicketHistoryLine
// TODO : Remove add_person event from TicketHistoryLine
export type TicketHistoryLine =
| AddPersonEvent
| CreateTicketEvent
| AddCommentEvent
| SetMotiveEvent /*AddAddressee | RemoveAddressee | */
| SetMotiveEvent
| AddresseesStateEvent
| PersonStateEvent
| ChangeStateEvent;
| ChangeStateEvent
| EmergencyStateEvent
| CallerStateEvent;
export interface Ticket {
type: "ticket_ticket";
@ -124,16 +134,5 @@ export interface Ticket {
updatedBy: User | null;
currentState: TicketState | null;
emergency: TicketEmergencyState | null;
}
export interface addNewPersons {
selected: Selected[];
modal: Modal;
}
export interface Modal {
showModal: boolean;
modalDialogClass: string;
}
export interface Selected {
result: User;
caller: Person | null;
}

1
src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/App.vue
View File

@ -34,6 +34,7 @@ onMounted(async () => {
await store.dispatch("fetchMotives");
await store.dispatch("fetchUserGroups");
await store.dispatch("fetchUsers");
await store.dispatch("getSuggestedPersons");
} catch (error) {
toast.error(error as string);
}

115
src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/components/ActionToolbarComponent.vue
View File

@ -2,25 +2,38 @@
<div class="fixed-bottom">
<div class="footer-ticket-details" v-if="activeTab">
<div class="tab-content p-2">
<div>
<button
type="button"
class="btn btn-link p-0"
style="
position: absolute;
top: 0.5rem;
right: 0.5rem;
font-size: 2rem;
line-height: 1;
color: #888;
text-decoration: none;
"
@click="closeAllActions"
aria-label="Fermer"
title="Fermer"
>
<span aria-hidden="true">&times;</span>
</button>
<div v-if="activeTabTitle">
<label class="col-form-label">
{{ activeTabTitle }}
</label>
</div>
<form
v-if="activeTab !== 'persons_state'"
@submit.prevent="submitAction"
>
<form @submit.prevent="submitAction">
<add-comment-component
v-model="content"
v-if="activeTab === 'add_comment'"
/>
<addressee-selector-component
v-model="addressees"
:user-groups="userGroups"
:users="users"
:suggested="userGroups"
v-if="activeTab === 'addressees_state'"
/>
@ -29,20 +42,40 @@
:motives="motives"
v-if="activeTab === 'set_motive'"
/>
<ul class="record_actions sticky-form-buttons">
<li class="cancel">
<button
@click="activeTab = ''"
class="btn btn-cancel"
>
<div v-if="activeTab === 'persons_state'">
<div class="row">
<label class="col col-form-label">
{{
trans(
CHILL_TICKET_TICKET_ACTIONS_TOOLBAR_CANCEL,
CHILL_TICKET_TICKET_SET_PERSONS_TITLE_CALLER,
)
}}
</button>
</li>
</label>
<label class="col col-form-label">
{{
trans(
CHILL_TICKET_TICKET_SET_PERSONS_TITLE_PERSON,
)
}}
</label>
</div>
<div class="row">
<div class="col">
<caller-selector-component
v-model="caller"
:suggested="[]"
/>
</div>
<div class="col">
<persons-selector-component
v-model="persons"
:suggested="suggestedPersons"
/>
</div>
</div>
</div>
<ul class="record_actions sticky-form-buttons">
<li>
<button class="btn btn-save" type="submit">
{{
@ -54,11 +87,6 @@
</li>
</ul>
</form>
<template v-else>
<persons-selector-component
@closeRequested="closeAllActions()"
/>
</template>
</div>
</div>
<div class="footer-ticket-main">
@ -67,8 +95,16 @@
<a :href="returnPath" class="btn btn-cancel">Annuler</a>
</li>
<li v-else class="nav-item p-2 go-back">
<a href="/fr/ticket/ticket/list" class="btn btn-cancel"
>Annuler</a
<button
type="button"
class="btn btn-link p-0"
style="font-size: 1.5rem; line-height: 1; color: #888"
@click="closeAllActions"
aria-label="Fermer"
title="Fermer"
>
<span aria-hidden="true">&times;</span>
</button>
>
</li>
<li
@ -114,7 +150,7 @@
</template>
<script setup lang="ts">
import { computed, ref } from "vue";
import { computed, ref, watch } from "vue";
import { useStore } from "vuex";
import { useToast } from "vue-toast-notification";
@ -123,6 +159,7 @@ import MotiveSelectorComponent from "./MotiveSelectorComponent.vue";
import AddresseeSelectorComponent from "./AddresseeSelectorComponent.vue";
import AddCommentComponent from "./AddCommentComponent.vue";
import PersonsSelectorComponent from "./PersonsSelectorComponent.vue";
import CallerSelectorComponent from "./CallerSelectorComponent.vue";
// Translations
import {
@ -136,8 +173,10 @@ import {
CHILL_TICKET_TICKET_SET_MOTIVE_TITLE,
CHILL_TICKET_TICKET_SET_MOTIVE_ERROR,
CHILL_TICKET_TICKET_SET_MOTIVE_SUCCESS,
CHILL_TICKET_TICKET_SET_PERSONS_TITLE_PERSON,
CHILL_TICKET_TICKET_SET_PERSONS_TITLE_CALLER,
CHILL_TICKET_TICKET_SET_PERSONS_TITLE,
CHILL_TICKET_TICKET_ACTIONS_TOOLBAR_CANCEL,
CHILL_TICKET_TICKET_SET_PERSONS_SUCCESS,
CHILL_TICKET_TICKET_ACTIONS_TOOLBAR_SAVE,
CHILL_TICKET_TICKET_ACTIONS_TOOLBAR_CLOSE,
CHILL_TICKET_TICKET_ACTIONS_TOOLBAR_CLOSE_SUCCESS,
@ -149,11 +188,11 @@ import {
// Types
import {
User,
UserGroup,
UserGroupOrUser,
} from "../../../../../../../ChillMainBundle/Resources/public/types";
import { Comment, Motive, Ticket } from "../../../types";
import { Person } from "ChillPersonAssets/types";
const store = useStore();
const toast = useToast();
@ -169,8 +208,6 @@ const activeTabTitle = computed((): string => {
return trans(CHILL_TICKET_TICKET_SET_MOTIVE_TITLE);
case "addressees_state":
return trans(CHILL_TICKET_TICKET_ADD_ADDRESSEE_TITLE);
case "persons_state":
return trans(CHILL_TICKET_TICKET_SET_PERSONS_TITLE);
default:
return "";
}
@ -207,8 +244,8 @@ const ticket = computed(() => store.getters.getTicket as Ticket);
const isOpen = computed(() => store.getters.isOpen);
const motives = computed(() => store.getters.getMotives as Motive[]);
const userGroups = computed(() => store.getters.getUserGroups as UserGroup[]);
const users = computed(() => store.getters.getUsers as User[]);
const suggestedPersons = computed(() => store.getters.getPersons as Person[]);
console.log("suggestedPersons", suggestedPersons.value);
const hasReturnPath = computed((): boolean => {
const params = new URL(document.location.toString()).searchParams;
return params.has("returnPath");
@ -232,6 +269,8 @@ const motive = ref(
);
const content = ref("" as Comment["content"]);
const addressees = ref(ticket.value.currentAddressees as UserGroupOrUser[]);
const persons = ref(ticket.value.currentPersons as Person[]);
const caller = ref(ticket.value.caller as Person);
async function submitAction() {
try {
@ -279,6 +318,13 @@ async function submitAction() {
);
}
break;
case "persons_state":
await store.dispatch("setPersons", {
persons: persons.value,
});
activeTab.value = "";
toast.success(trans(CHILL_TICKET_TICKET_SET_PERSONS_SUCCESS));
break;
}
} catch (error) {
toast.error(error as string);
@ -311,6 +357,11 @@ async function reopenTicket() {
function closeAllActions() {
activeTab.value = "";
}
watch(caller, async (newCaller) => {
await store.dispatch("setCaller", { caller: newCaller });
await store.dispatch("getSuggestedPersons");
});
</script>
<style lang="scss" scoped>

8
src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/components/AddresseeComponent.vue
View File

@ -20,12 +20,8 @@
</span>
</div>
<div v-if="users.length > 0" class="col-12">
<span class="badge-user">
<user-render-box-badge
v-for="user in users"
:key="user.id"
:user="user"
></user-render-box-badge>
<span class="badge-user" v-for="user in users" :key="user.id">
<user-render-box-badge :user="user" />
</span>
</div>
</template>

249
src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/components/AddresseeSelectorComponent.vue
View File

@ -1,90 +1,18 @@
<template>
<div class="row">
<div class="col-12 col-lg-6 col-md-6 text-center">
<div class="mb-5 level-line">
<span
v-for="userGroupItem in userGroups.filter(
(userGroup) => userGroup.excludeKey == 'level',
)"
:key="userGroupItem.id"
class="m-2 as-user-group"
>
<input
type="radio"
class="btn-check"
name="options-outlined"
:id="`level-${userGroupItem.id}`"
autocomplete="off"
:value="userGroupItem"
v-model="userGroupLevel"
@click="
Object.values(userGroupLevel).includes(
userGroupItem.id,
)
? (userGroupLevel = {})
: (userGroupLevel = userGroupItem)
"
/>
<label
:class="`btn btn-${userGroupItem.id}`"
:for="`level-${userGroupItem.id}`"
:style="getUserGroupBtnColor(userGroupItem)"
>
{{ userGroupItem.label.fr }}
</label>
</span>
</div>
<div class="mb-2 level-line">
<span
v-for="userGroupItem in userGroups.filter(
(userGroup) => userGroup.excludeKey == '',
)"
:key="userGroupItem.id"
class="m-2"
>
<input
type="checkbox"
class="btn-check"
name="options-outlined"
:id="`user-group-${userGroupItem.id}`"
autocomplete="off"
:value="userGroupItem"
v-model="userGroup"
/>
<label
:class="`btn btn-${userGroupItem.id}`"
:for="`user-group-${userGroupItem.id}`"
:style="getUserGroupBtnColor(userGroupItem)"
>
{{ userGroupItem.label.fr }}
</label>
</span>
</div>
</div>
<div class="col-12 col-lg-6 col-md-6 mb-2 mb-2 text-center">
<add-persons
:options="addPersonsOptions"
key="add-person-ticket"
:buttonTitle="
trans(CHILL_TICKET_TICKET_ADD_ADDRESSEE_USER_LABEL)
"
:modalTitle="
trans(CHILL_TICKET_TICKET_ADD_ADDRESSEE_USER_LABEL)
"
:selected="selectedValues"
<div class="col-12">
<pick-entity
uniqid="ticket-addressee-selector"
:types="['user', 'user_group', 'third_party']"
:picked="selectedEntities"
:suggested="suggestedValues"
@addNewPersons="addNewEntity"
:multiple="true"
:removable-if-set="true"
:display-picked="true"
:label="trans(CHILL_TICKET_TICKET_ADD_ADDRESSEE_USER_LABEL)"
@add-new-entity="addNewEntity"
@remove-entity="removeEntity"
/>
<div class="p-2">
<ul class="list-suggest inline remove-items">
<li v-for="user in users" :key="user.id">
<span :title="user.username" @click="removeUser(user)">
{{ user.username }}
</span>
</li>
</ul>
</div>
</div>
</div>
</template>
@ -93,12 +21,10 @@
import { ref, watch, defineProps, defineEmits } from "vue";
// Components
import AddPersons from "ChillPersonAssets/vuejs/_components/AddPersons.vue";
import PickEntity from "ChillMainAssets/vuejs/PickEntity/PickEntity.vue";
// Types
import type { User, UserGroup, UserGroupOrUser } from "ChillMainAssets/types";
import { SearchOptions, Suggestion } from "ChillPersonAssets/types";
import type { addNewPersons } from "../../../types";
import { Entities } from "ChillPersonAssets/types";
// Translations
import {
@ -107,117 +33,62 @@ import {
} from "translator";
const props = defineProps<{
modelValue?: UserGroupOrUser[];
userGroups: UserGroup[];
users: User[];
modelValue: Entities[];
suggested: Entities[];
}>();
const selectedValues = ref<Suggestion[]>([]);
const suggestedValues = ref<Suggestion[]>([]);
const emit = defineEmits<(e: "update:modelValue", value: Entities[]) => void>();
const emit =
defineEmits<(e: "update:modelValue", value: UserGroupOrUser[]) => void>();
const selectedEntities = ref<Entities[]>([...props.modelValue]);
const suggestedValues = ref<Entities[]>([...props.suggested]);
watch(
() => [props.suggested, props.modelValue],
() => {
const modelValue = props.modelValue ?? [];
const addressees = ref<UserGroupOrUser[]>([...(props.modelValue ?? [])]);
const userGroupsInit = [
...(props.modelValue ?? []).filter(
(addressee: UserGroupOrUser) => addressee.type == "user_group",
),
] as UserGroup[];
const userGroupLevel = ref<UserGroup | Record<string, never>>(
(userGroupsInit.filter(
(userGroup: UserGroup) => userGroup.excludeKey == "level",
)[0] as UserGroup) ?? {},
);
const userGroup = ref<UserGroup[]>(
userGroupsInit.filter(
(userGroup: UserGroup) => userGroup.excludeKey == "",
) as UserGroup[],
);
const users = ref<User[]>([
...(props.modelValue ?? []).filter(
(addressee: UserGroupOrUser) => addressee.type == "user",
),
] as User[]);
const addPersonsOptions = {
uniq: false,
type: ["user"],
priority: null,
button: {
size: "btn-sm",
class: "btn-submit",
suggestedValues.value = props.suggested.filter(
(suggested: Entities) => {
return !modelValue.some((selected: Entities) => {
if (
suggested.type == "user_group" &&
selected.type == "user_group"
) {
switch (selected.excludeKey) {
case "level":
return suggested.excludeKey === "level";
case "":
return (
suggested.excludeKey === "" &&
suggested.id === selected.id
);
default:
return false;
}
} else {
return (
suggested.type === selected.type &&
suggested.id === selected.id
);
}
});
},
);
},
} as SearchOptions;
{ immediate: true, deep: true },
);
function getUserGroupBtnColor(userGroup: UserGroup) {
return [
`color: ${userGroup.foregroundColor};
.btn-check:checked + .btn-${userGroup.id} {
color: ${userGroup.foregroundColor};
background-color: ${userGroup.backgroundColor};
}`,
];
function addNewEntity({ entity }: { entity: Entities }) {
selectedEntities.value.push(entity);
emit("update:modelValue", selectedEntities.value);
}
function addNewEntity(datas: addNewPersons) {
const { selected } = datas;
users.value = selected.map((selected) => selected.result);
addressees.value = addressees.value.filter(
(addressee) => addressee.type === "user_group",
function removeEntity({ entity }: { entity: Entities }) {
const index = selectedEntities.value.findIndex(
(selectedEntity) => selectedEntity === entity,
);
addressees.value = [...addressees.value, ...users.value];
emit("update:modelValue", addressees.value);
selectedValues.value = [];
suggestedValues.value = [];
}
function removeUser(user: User) {
users.value.splice(users.value.indexOf(user), 1);
addressees.value = addressees.value.filter(
(addressee) => addressee.id !== user.id,
);
emit("update:modelValue", addressees.value);
}
watch(userGroupLevel, (userGroupLevelAdd, userGroupLevelRem) => {
const index = addressees.value.indexOf(userGroupLevelRem as UserGroup);
if (index !== -1) {
addressees.value.splice(index, 1);
selectedEntities.value.splice(index, 1);
}
addressees.value.push(userGroupLevelAdd as UserGroup);
emit("update:modelValue", addressees.value);
});
watch(userGroup, (userGroupAdd) => {
const userGroupLevelArr = addressees.value.filter(
(addressee) =>
addressee.type == "user_group" && addressee.excludeKey == "level",
) as UserGroup[];
const usersArr = addressees.value.filter(
(addressee) => addressee.type == "user",
) as User[];
addressees.value = [...usersArr, ...userGroupLevelArr, ...userGroupAdd];
emit("update:modelValue", addressees.value);
});
emit("update:modelValue", selectedEntities.value);
}
</script>
<style lang="scss" scoped>
.btn-check:checked + .btn,
:not(.btn-check) + .btn:active,
.btn:first-child:active,
.btn.active,
.btn.show {
color: white;
box-shadow: 0 0 0 0.2rem var(--bs-chill-green);
outline: 0;
}
.as-user-group {
display: inline-block;
}
</style>

38
src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/components/BannerComponent.vue
View File

@ -3,17 +3,25 @@
<div class="container-xxl text-primary">
<div class="row">
<div class="col-md-6 col-sm-12 ps-md-5 ps-xxl-0">
<h2>#{{ ticket.id }}</h2>
<h1 v-if="ticket.currentMotive">
{{ ticket.currentMotive.label.fr }}
#{{ ticket.id }} {{ ticket.currentMotive.label.fr }}
</h1>
<p class="chill-no-data-statement" v-else>
{{ trans(CHILL_TICKET_TICKET_BANNER_NO_MOTIVE) }}
</p>
<h2 v-if="ticket.currentPersons.length">
{{
ticket.currentPersons
.map((person) => person.text)
.join(", ")
}}
</h2>
</div>
<div class="col-md-6 col-sm-12">
<div class="d-flex justify-content-end">
<toggle-flags />
<span
class="badge text-bg-chill-green text-white"
style="font-size: 1rem"
@ -45,7 +53,25 @@
<Teleport to="#header-ticket-details">
<div class="container-xxl">
<div class="row justify-content-between">
<div class="col-md-6 col-sm-12 ps-md-5 ps-xxl-0">
<div
class="col-md-4 col-sm-12 d-flex flex-column align-items-start"
>
<h3 class="text-primary">
{{ trans(CHILL_TICKET_TICKET_BANNER_CALLER) }}
</h3>
<on-the-fly
v-if="ticket.caller"
:key="ticket.caller.id"
:type="ticket.caller.type"
:id="ticket.caller.id"
:buttonText="ticket.caller.textAge"
:displayBadge="'true' === 'true'"
action="show"
></on-the-fly>
</div>
<div
class="col-md-4 col-sm-12 d-flex flex-column align-items-start"
>
<h3 class="text-primary">
{{ trans(CHILL_TICKET_TICKET_BANNER_CONCERNED_USAGER) }}
</h3>
@ -59,7 +85,9 @@
action="show"
></on-the-fly>
</div>
<div class="col-md-6 col-sm-12">
<div
class="col-md-4 col-sm-12 d-flex flex-column align-items-start"
>
<h3 class="text-primary">
{{ trans(CHILL_TICKET_TICKET_BANNER_SPEAKER) }}
</h3>
@ -84,6 +112,7 @@ import { ref, computed } from "vue";
// Components
import AddresseeComponent from "./AddresseeComponent.vue";
import ToggleFlags from "./ToggleFlags.vue";
import OnTheFly from "ChillMainAssets/vuejs/OnTheFly/components/OnTheFly.vue";
// Types
@ -104,6 +133,7 @@ import {
CHILL_TICKET_TICKET_BANNER_MINUTES,
CHILL_TICKET_TICKET_BANNER_SECONDS,
CHILL_TICKET_TICKET_BANNER_AND,
CHILL_TICKET_TICKET_BANNER_CALLER,
} from "translator";
// Store

85
src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/components/CallerSelectorComponent.vue Normal file
View File

@ -0,0 +1,85 @@
<template>
<pick-entity
uniqid="ticket-person-selector"
:types="['person', 'third_party']"
:picked="selectedEntity ? [selectedEntity] : []"
:suggested="suggestedValues"
:multiple="false"
:removable-if-set="true"
:display-picked="true"
:label="trans(CHILL_TICKET_TICKET_SET_PERSONS_CALLER_LABEL)"
@add-new-entity="addNewEntity"
@remove-entity="removeEntity"
/>
</template>
<script setup lang="ts">
import { ref, watch, defineProps, defineEmits } from "vue";
// Components
import PickEntity from "ChillMainAssets/vuejs/PickEntity/PickEntity.vue";
// Types
import { Entities } from "ChillPersonAssets/types";
// Translations
import {
trans,
CHILL_TICKET_TICKET_SET_PERSONS_CALLER_LABEL,
} from "translator";
const props = defineProps<{
modelValue: Entities | null;
suggested: Entities[];
}>();
const emit =
defineEmits<(event: "update:modelValue", value: Entities | null) => void>();
const selectedEntity = ref<Entities | null>(props.modelValue);
const suggestedValues = ref<Entities[]>([...props.suggested]);
watch(
() => [props.suggested, props.modelValue],
() => {
suggestedValues.value = props.suggested.filter(
(suggested: Entities) =>
suggested.id === selectedEntity.value?.id &&
suggested.type === selectedEntity.value?.type,
);
},
{ immediate: true, deep: true },
);
function addNewEntity({ entity }: { entity: Entities }) {
selectedEntity.value = entity;
emit("update:modelValue", selectedEntity.value);
}
function removeEntity() {
selectedEntity.value = null;
emit("update:modelValue", null);
}
</script>
<style scoped lang="scss">
ul.person-list {
list-style-type: none;
& > li {
display: inline-block;
border: 1px solid transparent;
border-radius: 6px;
button.remove-person {
opacity: 10%;
}
}
& > li:hover {
border: 1px solid white;
button.remove-person {
opacity: 100%;
}
}
}
</style>

163
src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/components/PersonsSelectorComponent.vue
View File

@ -1,135 +1,70 @@
<template>
<div>
<div style="display: flex; flex-direction: column; align-items: center">
<add-persons
:options="addPersonsOptions"
key="add-person-selector"
:buttonTitle="trans(CHILL_TICKET_TICKET_SET_PERSONS_USER_LABEL)"
:modalTitle="trans(CHILL_TICKET_TICKET_SET_PERSONS_USER_LABEL)"
:selected="selectedValues"
:suggested="suggestedValues"
@addNewPersons="addNewEntity"
/>
<div class="p-2">
<ul class="list-suggest inline remove-items">
<li v-for="person in currentPersons" :key="person.id">
<span
:title="`${person.firstName} ${person.lastName}`"
@click="removePerson(person)"
>
{{ `${person.firstName} ${person.lastName}` }}
</span>
</li>
</ul>
</div>
</div>
</div>
<ul class="record_actions">
<li class="cancel">
<button
class="btn btn-cancel"
type="button"
@click="emit('closeRequested')"
>
{{ trans(CHILL_TICKET_TICKET_ACTIONS_TOOLBAR_CANCEL) }}
</button>
</li>
<li>
<button class="btn btn-save" type="submit" @click.prevent="save">
{{ trans(CHILL_TICKET_TICKET_ACTIONS_TOOLBAR_SAVE) }}
</button>
</li>
</ul>
<pick-entity
uniqid="ticket-person-selector"
:types="['person']"
:picked="selectedEntities"
:suggested="suggestedValues"
:multiple="false"
:removable-if-set="true"
:display-picked="true"
:label="trans(CHILL_TICKET_TICKET_SET_PERSONS_USER_LABEL)"
@add-new-entity="addNewEntity"
@remove-entity="removeEntity"
/>
</template>
<script setup lang="ts">
import { computed, inject, reactive, ref } from "vue";
import { useStore } from "vuex";
import { ToastPluginApi } from "vue-toast-notification";
import { ref, watch, defineProps, defineEmits } from "vue";
// Components
import AddPersons from "ChillPersonAssets/vuejs/_components/AddPersons.vue";
import PickEntity from "ChillMainAssets/vuejs/PickEntity/PickEntity.vue";
// Types
import { SearchOptions, Suggestion, Person } from "ChillPersonAssets/types";
import { Ticket } from "../../../types";
import { Entities } from "ChillPersonAssets/types";
// Translations
import {
trans,
CHILL_TICKET_TICKET_SET_PERSONS_USER_LABEL,
CHILL_TICKET_TICKET_ACTIONS_TOOLBAR_CANCEL,
CHILL_TICKET_TICKET_ACTIONS_TOOLBAR_SAVE,
CHILL_TICKET_TICKET_SET_PERSONS_SUCCESS,
} from "translator";
import { trans, CHILL_TICKET_TICKET_SET_PERSONS_USER_LABEL } from "translator";
const emit = defineEmits<(e: "closeRequested") => void>();
const props = defineProps<{
modelValue: Entities[];
suggested: Entities[];
}>();
const emit = defineEmits<{
"update:modelValue": [value: Entities[]];
}>();
const store = useStore();
const toast = inject("toast") as ToastPluginApi;
const ticket = computed<Ticket>(() => store.getters.getTicket);
const persons = computed(() => ticket.value.currentPersons);
const selectedEntities = ref<Entities[]>([...props.modelValue]);
const suggestedValues = ref<Entities[]>([...props.suggested]);
const addPersonsOptions = {
uniq: false,
type: ["person"],
priority: null,
button: {
size: "btn-sm",
class: "btn-submit",
watch(
() => [props.suggested, props.modelValue],
() => {
suggestedValues.value = props.suggested.filter(
(suggested: Entities) =>
!props.modelValue.some(
(selected: Entities) =>
suggested.id === selected.id &&
suggested.type === selected.type,
),
);
},
} as SearchOptions;
{ immediate: true, deep: true },
);
const selectedValues = ref<Suggestion[]>([]);
const suggestedValues = ref<Suggestion[]>([]);
function addNewEntity({ entity }: { entity: Entities }) {
selectedEntities.value.push(entity);
emit("update:modelValue", selectedEntities.value);
}
const added: Person[] = reactive([]);
const removed: Person[] = reactive([]);
const computeCurrentPersons = (
initial: Person[],
added: Person[],
removed: Person[],
): Person[] => {
for (let p of added) {
if (initial.findIndex((element) => element.id === p.id) === -1) {
initial.push(p);
}
}
return initial.filter(
(p) => removed.findIndex((element) => element.id === p.id) === -1,
function removeEntity({ entity }: { entity: Entities }) {
const index = selectedEntities.value.findIndex(
(selectedEntity) => selectedEntity === entity,
);
};
const currentPersons = computed((): Person[] => {
return computeCurrentPersons(persons.value, added, removed);
});
const removePerson = (p: Person) => {
removed.push(p);
};
const addNewEntity = (n: { selected: { result: Person }[] }) => {
for (let p of n.selected) {
added.push(p.result);
if (index !== -1) {
selectedEntities.value.splice(index, 1);
}
selectedValues.value = [];
suggestedValues.value = [];
};
const save = async function (): Promise<void> {
try {
await store.dispatch("setPersons", {
persons: computeCurrentPersons(persons.value, added, removed),
});
toast.success(trans(CHILL_TICKET_TICKET_SET_PERSONS_SUCCESS));
} catch (error) {
toast.error((error as Error).message);
return Promise.resolve();
}
emit("closeRequested");
};
emit("update:modelValue", selectedEntities.value);
}
</script>
<style scoped lang="scss">
ul.person-list {

18
src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/components/TicketHistoryEmergencyComponent.vue Normal file
View File

@ -0,0 +1,18 @@
<template>
<div>
<span
class="badge rounded-pill me-1 mx-2"
:class="{
'bg-danger': new_emergency === 'yes',
'bg-secondary': new_emergency === 'no',
}"
>
{{ trans(CHILL_TICKET_TICKET_BANNER_EMERGENCY) }}
</span>
</div>
</template>
<script setup lang="ts">
import { trans, CHILL_TICKET_TICKET_BANNER_EMERGENCY } from "translator";
defineProps<{ new_emergency: string }>();
</script>

50
src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/components/TicketHistoryListComponent.vue
View File

@ -19,6 +19,10 @@
:new_state="history_line.data.new_state"
v-if="history_line.event_type == 'state_change'"
/>
<TicketHistoryEmergencyComponent
v-if="history_line.event_type == 'emergency_change'"
:new_emergency="history_line.data.new_emergency"
/>
</div>
<div>
<span class="badge-user">
@ -34,12 +38,24 @@
</div>
<div
class="card-body row"
v-if="history_line.event_type != 'state_change'"
v-if="
!['state_change', 'emergency_change'].includes(
history_line.event_type,
)
"
>
<ticket-history-person-component
:personHistory="history_line.data"
:persons="history_line.data.persons"
v-if="history_line.event_type == 'persons_state'"
/>
<ticket-history-person-component
:persons="
history_line.data.new_caller
? [history_line.data.new_caller]
: []
"
v-if="history_line.event_type == 'set_caller'"
/>
<ticket-history-motive-component
:motiveHistory="history_line.data"
v-else-if="history_line.event_type == 'set_motive'"
@ -74,11 +90,25 @@ import TicketHistoryCommentComponent from "./TicketHistoryCommentComponent.vue";
import TicketHistoryAddresseeComponent from "./TicketHistoryAddresseeComponent.vue";
import TicketHistoryCreateComponent from "./TicketHistoryCreateComponent.vue";
import TicketHistoryStateComponent from "./TicketHistoryStateComponent.vue";
import TicketHistoryEmergencyComponent from "./TicketHistoryEmergencyComponent.vue";
import UserRenderBoxBadge from "ChillMainAssets/vuejs/_components/Entity/UserRenderBoxBadge.vue";
// Utils
import { ISOToDatetime } from "../../../../../../../ChillMainBundle/Resources/public/chill/js/date";
// Translations
import {
trans,
CHILL_TICKET_TICKET_HISTORY_ADD_COMMENT,
CHILL_TICKET_TICKET_HISTORY_ADDRESSEES_STATE,
CHILL_TICKET_TICKET_HISTORY_PERSONS_STATE,
CHILL_TICKET_TICKET_HISTORY_SET_MOTIVE,
CHILL_TICKET_TICKET_HISTORY_CREATE_TICKET,
CHILL_TICKET_TICKET_HISTORY_STATE_CHANGE,
CHILL_TICKET_TICKET_HISTORY_EMERGENCY_CHANGE,
CHILL_TICKET_TICKET_HISTORY_SET_CALLER,
} from "translator";
defineProps<{ history: TicketHistoryLine[] }>();
const store = useStore();
@ -88,17 +118,21 @@ const actionIcons = ref(store.getters.getActionIcons);
function explainSentence(history: TicketHistoryLine): string {
switch (history.event_type) {
case "add_comment":
return "Nouveau commentaire";
return trans(CHILL_TICKET_TICKET_HISTORY_ADD_COMMENT);
case "addressees_state":
return "Attributions";
return trans(CHILL_TICKET_TICKET_HISTORY_ADDRESSEES_STATE);
case "persons_state":
return "Usagés concernés";
return trans(CHILL_TICKET_TICKET_HISTORY_PERSONS_STATE);
case "set_motive":
return "Nouveau motifs";
return trans(CHILL_TICKET_TICKET_HISTORY_SET_MOTIVE);
case "create_ticket":
return "Ticket créé";
return trans(CHILL_TICKET_TICKET_HISTORY_CREATE_TICKET);
case "state_change":
return "Status du ticket modifié";
return trans(CHILL_TICKET_TICKET_HISTORY_STATE_CHANGE);
case "emergency_change":
return trans(CHILL_TICKET_TICKET_HISTORY_EMERGENCY_CHANGE);
case "set_caller":
return trans(CHILL_TICKET_TICKET_HISTORY_SET_CALLER);
default:
return "";
}

9
src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/components/TicketHistoryPersonComponent.vue
View File

@ -1,7 +1,7 @@
<template>
<div class="col-12">
<ul class="persons-list">
<li v-for="person in personHistory.persons" :key="person.id">
<ul class="persons-list" v-if="persons.length > 0">
<li v-for="person in persons" :key="person.id">
<on-the-fly
:type="person.type"
:id="person.id"
@ -11,6 +11,7 @@
></on-the-fly>
</li>
</ul>
<div v-else class="text-muted">Aucune personne concernée</div>
</div>
</template>
@ -18,9 +19,9 @@
import OnTheFly from "ChillMainAssets/vuejs/OnTheFly/components/OnTheFly.vue";
// Types
import { PersonsState } from "../../../types";
import { Person } from "ChillPersonAssets/types";
defineProps<{ personHistory: PersonsState }>();
defineProps<{ persons: Person[] }>();
</script>
<style lang="scss" scoped>

17
src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/components/TicketHistoryStateComponent.vue
View File

@ -1,4 +1,19 @@
<template>
<span
class="badge rounded-pill me-1 mx-2"
:class="{
'bg-chill-red': props.new_state == 'closed',
'bg-chill-green': props.new_state == 'open',
}"
>
<template v-if="props.new_state == 'open'">
{{ trans(CHILL_TICKET_TICKET_BANNER_OPEN) }}
</template>
<template v-else-if="props.new_state == 'closed'">
{{ trans(CHILL_TICKET_TICKET_BANNER_CLOSED) }}
</template>
</span>
<!--
<span
class="text-chill-green mx-2"
style="
@ -22,7 +37,7 @@
v-else-if="props.new_state == 'closed'"
>
{{ trans(CHILL_TICKET_TICKET_BANNER_CLOSED) }}
</span>
</span> -->
</template>
<script setup lang="ts">

67
src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/components/ToggleFlags.vue Normal file
View File

@ -0,0 +1,67 @@
<template>
<span class="d-block d-sm-inline-block ms-sm-3 ms-md-0">
<button
class="badge rounded-pill me-1"
:class="{
'bg-danger': isEmergency,
'bg-secondary': !isEmergency,
}"
@click="toggleEmergency"
>
{{ trans(CHILL_TICKET_TICKET_BANNER_EMERGENCY) }}
</button>
</span>
</template>
<script lang="ts" setup>
import { computed } from "vue";
import { useStore } from "vuex";
import { useToast } from "vue-toast-notification";
import { trans, CHILL_TICKET_TICKET_BANNER_EMERGENCY } from "translator";
const store = useStore();
const toast = useToast();
const isEmergency = computed(() => store.getters.isEmergency);
// Methods
function toggleEmergency() {
store
.dispatch("toggleEmergency", isEmergency.value ? "no" : "yes")
.catch(({ name, violations }) => {
if (name === "ValidationException" || name === "AccessException") {
violations.forEach((violation: string) =>
toast.open({ message: violation }),
);
} else {
toast.open({ message: "An error occurred" });
}
});
}
</script>
<style lang="scss" scoped>
a.flag-toggle {
color: white;
cursor: pointer;
&:hover {
color: white;
text-decoration: underline;
border-radius: 20px;
}
i {
margin: auto 0.4em;
}
span.on {
font-weight: bolder;
}
}
button.badge {
&.bg-secondary {
opacity: 0.5;
&:hover {
opacity: 0.7;
}
}
}
</style>

16
src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/store/modules/addressee.ts
View File

@ -7,6 +7,7 @@ import { Module } from "vuex";
import { RootState } from "..";
import {
ApiException,
User,
UserGroup,
UserGroupOrUser,
@ -46,8 +47,9 @@ export const moduleAddressee: Module<State, RootState> = {
commit("setUserGroups", results);
},
);
} catch (e: any) {
throw e.name;
} catch (e: unknown) {
const error = e as ApiException;
throw error.name;
}
},
fetchUsers({ commit }) {
@ -55,8 +57,9 @@ export const moduleAddressee: Module<State, RootState> = {
fetchResults("/api/1.0/main/user.json").then((results) => {
commit("setUsers", results);
});
} catch (e: any) {
throw e.name;
} catch (e: unknown) {
const error = e as ApiException;
throw error.name;
}
},
@ -76,8 +79,9 @@ export const moduleAddressee: Module<State, RootState> = {
},
);
commit("setTicket", result);
} catch (e: any) {
throw e.name;
} catch (e: unknown) {
const error = e as ApiException;
throw error.name;
}
},
},

11
src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/store/modules/comment.ts
View File

@ -1,12 +1,10 @@
import {
fetchResults,
makeFetch,
} from "../../../../../../../../ChillMainBundle/Resources/public/lib/api/apiMethods";
import { makeFetch } from "../../../../../../../../ChillMainBundle/Resources/public/lib/api/apiMethods";
import { Module } from "vuex";
import { RootState } from "..";
import { Comment } from "../../../../types";
import { ApiException } from "../../../../../../../../ChillMainBundle/Resources/public/types";
export interface State {
comments: Comment[];
@ -31,8 +29,9 @@ export const moduleComment: Module<State, RootState> = {
{ content },
);
commit("setTicket", result);
} catch (e: any) {
throw e.name;
} catch (e: unknown) {
const error = e as ApiException;
throw error.name;
}
},
},

11
src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/store/modules/motive.ts
View File

@ -7,6 +7,7 @@ import { Module } from "vuex";
import { RootState } from "..";
import { Motive } from "../../../../types";
import { ApiException } from "../../../../../../../../ChillMainBundle/Resources/public/types";
export interface State {
motives: Motive[];
@ -33,8 +34,9 @@ export const moduleMotive: Module<State, RootState> = {
"/api/1.0/ticket/motive.json",
)) as Motive[];
commit("setMotives", results);
} catch (e: any) {
throw e.name;
} catch (e: unknown) {
const error = e as ApiException;
throw error.name;
}
},
@ -55,8 +57,9 @@ export const moduleMotive: Module<State, RootState> = {
},
);
commit("setTicket", result);
} catch (e: any) {
throw e.name;
} catch (e: unknown) {
const error = e as ApiException;
throw error.name;
}
},
},

59
src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/store/modules/persons.ts
View File

@ -1,12 +1,28 @@
import { makeFetch } from "../../../../../../../../ChillMainBundle/Resources/public/lib/api/apiMethods";
import { Person } from "../../../../../../../../ChillPersonBundle/Resources/public/types";
import { ApiException } from "../../../../../../../../ChillMainBundle/Resources/public/types";
import { Module } from "vuex";
import { RootState } from "..";
import { Ticket } from "../../../../types";
export interface State {}
export interface State {
persons: Person[];
}
export const modulePersons: Module<State, RootState> = {
state: () => ({
persons: [] as Person[],
}),
getters: {
getPersons(state) {
return state.persons;
},
},
mutations: {
setPersons(state, persons: Person[]) {
state.persons = persons;
},
},
actions: {
async setPersons(
{ commit, rootState: RootState },
@ -25,8 +41,45 @@ export const modulePersons: Module<State, RootState> = {
commit("setTicket", result);
return Promise.resolve();
} catch (e: any) {
throw e.name;
} catch (e: unknown) {
const error = e as ApiException;
throw error.name;
}
},
async setCaller(
{ commit, rootState: RootState },
payload: { caller: Person | null },
) {
try {
const caller = payload.caller
? {
id: payload.caller.id,
type: payload.caller.type,
}
: null;
const result: Ticket = await makeFetch(
"POST",
`/api/1.0/ticket/ticket/${RootState.ticket.ticket.id}/set-caller`,
{ caller },
);
commit("setTicket", result as Ticket);
} catch (e: unknown) {
const error = e as ApiException;
throw error.name;
}
},
async getSuggestedPersons({ commit, rootState: RootState }) {
try {
const ticketId = RootState.ticket.ticket.id;
const result: Person[] = await makeFetch(
"GET",
`/api/1.0/ticket/ticket/${ticketId}/suggest-person`,
);
commit("setPersons", result);
} catch (e: unknown) {
const error = e as ApiException;
throw error.name;
}
},
},

39
src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/store/modules/ticket.ts
View File

@ -1,8 +1,9 @@
import { Module } from "vuex";
import { RootState } from "..";
import { Ticket } from "../../../../types";
import { Ticket, TicketEmergencyState } from "../../../../types";
import { makeFetch } from "ChillMainAssets/lib/api/apiMethods";
import { ApiException } from "../../../../../../../../ChillMainBundle/Resources/public/types";
export interface State {
ticket: Ticket;
@ -13,18 +14,23 @@ export const moduleTicket: Module<State, RootState> = {
state: () => ({
ticket: {} as Ticket,
action_icons: {
add_person: "fa fa-eyedropper",
add_person: "fa fa-user-plus",
add_comment: "fa fa-comment",
set_motive: "fa fa-paint-brush",
addressees_state: "fa fa-paper-plane",
persons_state: "fa fa-eyedropper",
state_change: "fa fa-bolt",
persons_state: "fa fa-user",
set_caller: "fa fa-phone",
state_change: "",
emergency_change: "",
},
}),
getters: {
isOpen(state) {
return state.ticket.currentState === "open";
},
isEmergency(state) {
return state.ticket.emergency == "yes" ? true : false;
},
getTicket(state) {
state.ticket.history = state.ticket.history.sort((a, b) =>
b.at.datetime.localeCompare(a.at.datetime),
@ -52,8 +58,9 @@ export const moduleTicket: Module<State, RootState> = {
`/api/1.0/ticket/ticket/${state.ticket.id}/close`,
);
commit("setTicket", result as Ticket);
} catch (e: any) {
throw e.name;
} catch (e: unknown) {
const error = e as ApiException;
throw error.name;
}
},
async reopenTicket({ commit, state }) {
@ -63,8 +70,24 @@ export const moduleTicket: Module<State, RootState> = {
`/api/1.0/ticket/ticket/${state.ticket.id}/open`,
);
commit("setTicket", result as Ticket);
} catch (e: any) {
throw e.name;
} catch (e: unknown) {
const error = e as ApiException;
throw error.name;
}
},
async toggleEmergency(
{ commit, state },
emergency: TicketEmergencyState,
) {
try {
const result: Ticket = await makeFetch(
"POST",
`/api/1.0/ticket/ticket/${state.ticket.id}/emergency/${emergency}`,
);
commit("setTicket", result as Ticket);
} catch (e: unknown) {
const error = e as ApiException;
throw error.name;
}
},
},

18
src/Bundle/ChillTicketBundle/src/translations/messages+intl-icu.fr.yml
View File

@ -6,6 +6,15 @@ chill_ticket:
in_alert: Tickets en alerte (délai de résolution dépassé)
created_between: Créés entre
ticket:
history:
add_comment: "Nouveau commentaire"
addressees_state: "Attributions"
persons_state: "Usagé(s) concerné(s)"
set_caller: "Appelant Concerné"
set_motive: "Nouveau motifs"
create_ticket: "Ticket créé"
state_change: ""
emergency_change: ""
previous_tickets: "Précédents tickets"
actions_toolbar:
cancel: "Annuler"
@ -34,13 +43,17 @@ chill_ticket:
success: "Attribution effectuée"
error: "Aucun destinataire sélectionné"
set_persons:
title: "Usagers concernés"
title: "Appelant et usager(s)"
title_person: "Usager(s)"
title_caller: "Appelant"
user_label: "Ajouter un usager"
success: "Usager ajouté"
caller_label: "Ajouter un appelant"
success: "Appelants et usagers mis à jour"
error: "Aucun usager sélectionné"
banner:
concerned_usager: "Usagers concernés"
speaker: "Attribué à"
caller: "Appelant"
open: "Ouvert"
closed: "Fermé"
since: "Depuis {time}"
@ -70,3 +83,4 @@ chill_ticket:
other {# secondes}
}
no_motive: "Pas de motif"
emergency: "URGENT"