mirror of
https://gitlab.com/Chill-Projet/chill-bundles.git
synced 2025-09-28 09:34:59 +00:00
Refactor third-party type imports and update related components
- Changed import path for ThirdParty type in TypeThirdParty.vue and updated its usage. - Refactored PersonText.vue to import Person and AltName types from ChillPersonAssets. - Updated types.ts in ChillThirdPartyBundle to include a new 'type' field in the Thirdparty interface. - Modified TicketBundle types to accommodate Thirdparty type in CallerState. - Adjusted AddresseeSelectorComponent.vue to use 'thirdparty' instead of 'third_party'. - Refined BannerComponent.vue to improve readability and maintainability. - Updated CallerSelectorComponent.vue to reflect changes in entity types. - Enhanced TicketHistoryListComponent.vue to handle both Person and Thirdparty types. - Refactored TicketHistoryPersonComponent.vue to accept both Person and Thirdparty entities.
This commit is contained in:
borisw
@@ -1,41 +1,37 @@
|
||||
<template>
|
||||
<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"
|
||||
>
|
||||
<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>
|
||||
<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">
|
||||
<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>
|
||||
<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 lang="ts" setup>
|
||||
@@ -43,135 +39,135 @@ import { ref, computed, defineProps, defineEmits, defineComponent } from "vue";
|
||||
import AddPersons from "ChillPersonAssets/vuejs/_components/AddPersons.vue";
|
||||
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,
|
||||
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";
|
||||
|
||||
defineComponent({
|
||||
components: {
|
||||
AddPersons,
|
||||
},
|
||||
components: {
|
||||
AddPersons,
|
||||
},
|
||||
});
|
||||
const props = defineProps<{
|
||||
multiple: boolean;
|
||||
types: EntityType[];
|
||||
picked: Entities[];
|
||||
uniqid: string;
|
||||
removableIfSet?: boolean;
|
||||
displayPicked?: boolean;
|
||||
suggested?: Entities[];
|
||||
label?: string;
|
||||
multiple: boolean;
|
||||
types: EntityType[];
|
||||
picked: Entities[];
|
||||
uniqid: string;
|
||||
removableIfSet?: boolean;
|
||||
displayPicked?: boolean;
|
||||
suggested?: Entities[];
|
||||
label?: string;
|
||||
}>();
|
||||
|
||||
const emits = defineEmits<{
|
||||
(e: "addNewEntity", payload: { entity: Entities }): void;
|
||||
(e: "removeEntity", payload: { entity: Entities }): void;
|
||||
(e: "addNewEntityProcessEnded"): void;
|
||||
(e: "addNewEntity", payload: { entity: Entities }): void;
|
||||
(e: "removeEntity", payload: { entity: Entities }): void;
|
||||
(e: "addNewEntityProcessEnded"): void;
|
||||
}>();
|
||||
|
||||
const addPersons = ref();
|
||||
|
||||
const addPersonsOptions = computed(
|
||||
() =>
|
||||
({
|
||||
uniq: !props.multiple,
|
||||
type: props.types,
|
||||
priority: null,
|
||||
button: {
|
||||
size: "btn-sm",
|
||||
class: "btn-submit",
|
||||
},
|
||||
}) as SearchOptions,
|
||||
() =>
|
||||
({
|
||||
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;
|
||||
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 "thirdparty":
|
||||
return trans(PICK_ENTITY_THIRDPARTY, {
|
||||
count: props.multiple ? 2 : 1,
|
||||
});
|
||||
case "user_group":
|
||||
return trans(PICK_ENTITY_USER_GROUP, {
|
||||
count: props.multiple ? 2 : 1,
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
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(", ")}`;
|
||||
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,
|
||||
"badge-suggest": true,
|
||||
"remove-items": props.removableIfSet !== false,
|
||||
inline: true,
|
||||
}));
|
||||
|
||||
function addNewSuggested(entity: Entities) {
|
||||
emits("addNewEntity", { entity });
|
||||
emits("addNewEntity", { entity });
|
||||
}
|
||||
|
||||
function addNewEntity({ selected }: addNewEntities) {
|
||||
Object.values(selected).forEach((item) => {
|
||||
emits("addNewEntity", { entity: item.result });
|
||||
});
|
||||
addPersons.value?.resetSearch();
|
||||
Object.values(selected).forEach((item) => {
|
||||
emits("addNewEntity", { entity: item.result });
|
||||
});
|
||||
addPersons.value?.resetSearch();
|
||||
|
||||
emits("addNewEntityProcessEnded");
|
||||
emits("addNewEntityProcessEnded");
|
||||
}
|
||||
|
||||
function removeEntity(entity: Entities) {
|
||||
if (props.removableIfSet === false) {
|
||||
return;
|
||||
}
|
||||
emits("removeEntity", { entity });
|
||||
if (props.removableIfSet === false) {
|
||||
return;
|
||||
}
|
||||
emits("removeEntity", { entity });
|
||||
}
|
||||
|
||||
function getBadgeClass(entities: Entities) {
|
||||
if (entities.type !== "user_group") {
|
||||
return entities.type;
|
||||
}
|
||||
return "";
|
||||
if (entities.type !== "user_group") {
|
||||
return entities.type;
|
||||
}
|
||||
return "";
|
||||
}
|
||||
|
||||
function getBadgeStyle(entities: Entities) {
|
||||
if (entities.type === "user_group") {
|
||||
return [
|
||||
`ul.badge-suggest li > span {
|
||||
if (entities.type === "user_group") {
|
||||
return [
|
||||
`ul.badge-suggest li > span {
|
||||
color: ${entities.foregroundColor}!important;
|
||||
border-bottom-color: ${entities.backgroundColor};
|
||||
}`,
|
||||
];
|
||||
}
|
||||
return [];
|
||||
];
|
||||
}
|
||||
return [];
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.grey-card {
|
||||
background: #f8f9fa;
|
||||
border-radius: 8px;
|
||||
padding: 1.5rem;
|
||||
min-height: 160px;
|
||||
background: #f8f9fa;
|
||||
border-radius: 8px;
|
||||
padding: 1.5rem;
|
||||
min-height: 160px;
|
||||
}
|
||||
|
||||
.btn-check:checked + .btn,
|
||||
@@ -179,94 +175,94 @@ function getBadgeStyle(entities: Entities) {
|
||||
.btn:first-child:active,
|
||||
.btn.active,
|
||||
.btn.show {
|
||||
color: white;
|
||||
box-shadow: 0 0 0 0.2rem var(--bs-chill-green);
|
||||
outline: 0;
|
||||
color: white;
|
||||
box-shadow: 0 0 0 0.2rem var(--bs-chill-green);
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
.as-user-group {
|
||||
display: inline-block;
|
||||
display: inline-block;
|
||||
}
|
||||
ul.badge-suggest {
|
||||
list-style-type: none;
|
||||
padding-left: 0;
|
||||
margin-bottom: 0px;
|
||||
list-style-type: none;
|
||||
padding-left: 0;
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
ul.badge-suggest li > span {
|
||||
white-space: normal;
|
||||
text-align: start;
|
||||
margin-bottom: 3px;
|
||||
white-space: normal;
|
||||
text-align: start;
|
||||
margin-bottom: 3px;
|
||||
}
|
||||
|
||||
ul.badge-suggest.inline li {
|
||||
display: inline-block;
|
||||
margin-right: 0.2em;
|
||||
display: inline-block;
|
||||
margin-right: 0.2em;
|
||||
}
|
||||
ul.badge-suggest.add-items li {
|
||||
position: relative;
|
||||
position: relative;
|
||||
}
|
||||
ul.badge-suggest.add-items li span {
|
||||
cursor: pointer;
|
||||
padding-left: 2rem;
|
||||
cursor: pointer;
|
||||
padding-left: 2rem;
|
||||
}
|
||||
ul.badge-suggest.add-items li span:hover {
|
||||
color: #ced4da;
|
||||
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%);
|
||||
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;
|
||||
position: relative;
|
||||
}
|
||||
ul.badge-suggest.remove-items li span {
|
||||
cursor: pointer;
|
||||
padding-left: 2rem;
|
||||
cursor: pointer;
|
||||
padding-left: 2rem;
|
||||
}
|
||||
ul.badge-suggest.remove-items li span:hover {
|
||||
color: #ced4da;
|
||||
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%);
|
||||
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;
|
||||
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;
|
||||
border-bottom-color: #43b29d;
|
||||
}
|
||||
ul.badge-suggest li > span.thirdparty {
|
||||
border-bottom-color: rgb(198.9, 72, 98.1);
|
||||
border-bottom-color: rgb(198.9, 72, 98.1);
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user