Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feature/cases card deadlines #208

Merged
merged 6 commits into from
Dec 26, 2024
2 changes: 2 additions & 0 deletions src/app/locale/en/en.js
Original file line number Diff line number Diff line change
Expand Up @@ -155,6 +155,8 @@ export default {
rating: 'Rating',
persons: 'Persons',
selectAService: 'Select a service',
deadlines: 'Deadlines',
createdAt: 'Created at',
caseInfo: {
caseInfo: 'Case info',
contactInfo: 'Contact info',
Expand Down
2 changes: 2 additions & 0 deletions src/app/locale/ru/ru.js
Original file line number Diff line number Diff line change
Expand Up @@ -154,6 +154,8 @@ export default {
rating: 'Оценка',
persons: 'Персоны',
selectAService: 'Выберите сервис',
deadlines: 'Сроки',
createdAt: 'Создано',
caseInfo: {
caseInfo: 'Информация',
contactInfo: 'Контактная информация',
Expand Down
2 changes: 2 additions & 0 deletions src/app/locale/ua/ua.js
Original file line number Diff line number Diff line change
Expand Up @@ -155,6 +155,8 @@ export default {
rating: 'Оцінка',
persons: 'Особи',
selectAService: 'Виберіть сервіс',
deadlines: 'Терміни',
createdAt: 'Створено',
caseInfo: {
caseInfo: 'Інформація',
contactInfo: 'Контактна інформація',
Expand Down
154 changes: 75 additions & 79 deletions src/modules/cases/api/CasesAPI.js
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ const data = {
id: "u1",
name: "User One"
},
createdAt: "2024-11-01T10:00:00Z",
createdAt: "1734950841253",
updatedBy: {
id: "u2",
name: "User Two"
Expand All @@ -30,8 +30,8 @@ const data = {
subject: "Network Issue",
description: "The network is experiencing downtime.",
contactInfo: "[email protected]",
plannedReactionAt: "2024-11-01T12:00:00Z",
plannedResolveAt: "2024-11-03T12:00:00Z",
plannedReactionAt: "1734961322138",
plannedResolveAt: "1734961322138",
status: {
id: "s1",
name: "Open"
Expand Down Expand Up @@ -84,42 +84,40 @@ const data = {
ratingComment: "Issue resolved promptly."
},
timing: {
resolvedAt: "2024-11-03T10:00:00Z",
reactedAt: "2024-11-01T10:30:00Z",
differenceInReaction: "30m",
differenceInResolve: "2d"
},
slaCondition: [
{
id: "sla1",
name: "Critical SLA",
priorities: [
{
id: "p1",
name: "High"
}
],
reactionTime: {
hours: 1,
minutes: 0
},
resolutionTime: {
hours: 48,
minutes: 0
},
slaId: "slaId1",
createdAt: "2024-10-01T10:00:00Z",
updatedAt: "2024-10-01T12:00:00Z",
createdBy: {
id: "u5",
name: "SLA Manager"
},
updatedBy: {
id: "u6",
name: "SLA Admin"
resolvedAt: "1734961389622",
reactedAt: "1734950841253",
differenceInReaction: "1800",
differenceInResolve: "-172800000"
},
slaCondition: {
id: "sla1",
name: "Critical SLA",
priorities: [
{
id: "p1",
name: "High"
}
],
reactionTime: {
hours: 1,
minutes: 0
},
resolutionTime: {
hours: 48,
minutes: 0
},
slaId: "slaId1",
createdAt: "2024-10-01T10:00:00Z",
updatedAt: "2024-10-01T12:00:00Z",
createdBy: {
id: "u5",
name: "SLA Manager"
},
updatedBy: {
id: "u6",
name: "SLA Admin"
}
],
},
service: {
id: "subservice2",
name: "Network Support"
Expand Down Expand Up @@ -224,8 +222,8 @@ const data = {
subject: "Login Issue",
description: "Users are unable to log in to the system.",
contactInfo: "[email protected]",
plannedReactionAt: "2024-11-05T12:00:00Z",
plannedResolveAt: "2024-11-07T12:00:00Z",
plannedReactionAt: "1734961322138",
plannedResolveAt: "1734961322138",
status: {
id: "s2",
name: "In Progress"
Expand Down Expand Up @@ -278,42 +276,40 @@ const data = {
ratingComment: "Issue is being addressed."
},
timing: {
resolvedAt: "2024-11-07T10:00:00Z",
reactedAt: "2024-11-05T11:30:00Z",
differenceInReaction: "30m",
differenceInResolve: "2d"
},
slaCondition: [
{
id: "sla2",
name: "Standard SLA",
priorities: [
{
id: "p2",
name: "Medium"
}
],
reactionTime: {
hours: 2,
minutes: 0
},
resolutionTime: {
hours: 72,
minutes: 0
},
slaId: "slaId2",
createdAt: "2024-10-05T10:00:00Z",
updatedAt: "2024-10-05T12:00:00Z",
createdBy: {
id: "u5",
name: "SLA Manager"
},
updatedBy: {
id: "u6",
name: "SLA Admin"
resolvedAt: "1734950841253",
reactedAt: "1734950841253",
differenceInReaction: "1800",
differenceInResolve: "172800000"
},
slaCondition: {
id: "sla2",
name: "Standard SLA",
priorities: [
{
id: "p2",
name: "Medium"
}
],
reactionTime: {
hours: 2,
minutes: 0
},
resolutionTime: {
hours: 72,
minutes: 0
},
slaId: "slaId2",
createdAt: "2024-10-05T10:00:00Z",
updatedAt: "2024-10-05T12:00:00Z",
createdBy: {
id: "u5",
name: "SLA Manager"
},
updatedBy: {
id: "u6",
name: "SLA Admin"
}
],
},
service: {
id: "srv2",
name: "Login Support"
Expand Down Expand Up @@ -405,11 +401,11 @@ const fieldsToSend = [
'name',
'subject',
'description',
'contact_info',
'planned_reaction_at',
'planned_resolve_at',
'contactInfo',
'plannedReactionAt',
'plannedResolveAt',
'status_lookup',
'close_reason_lookup',
'closeReasonLookup',
'author',
'assignee',
'reporter',
Expand All @@ -421,13 +417,13 @@ const fieldsToSend = [
'close',
'rate',
'timing',
'sla_condition',
'slaCondition',
'sla',
'service',
'comments',
'related',
'links',
'status_condition'
'statusCondition'
];


Expand Down
4 changes: 4 additions & 0 deletions src/modules/cases/components/opened-case-general.vue
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,9 @@
<case-priority
:namespace="namespace"
/>
<case-deadlines
:namespace="namespace"
/>
<case-service
:namespace="namespace"
/>
Expand All @@ -19,6 +22,7 @@
</template>

<script setup>
import CaseDeadlines from '../modules/deadlines/components/case-deadlines.vue';
import CasePersons from '../modules/persons/components/case-persons.vue';
import CasePriority from '../modules/priority/components/case-priority.vue';
import CaseService from '../modules/service/components/case-service.vue';
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -7,15 +7,16 @@
v-if="!editMode"
class="editable-field__content"
>
<div class="editable-field__label-wrapper">
<div
v-if="label"
class="editable-field__label-wrapper"
>
<wt-icon
v-if="icon"
:color="color"
:icon="icon"
/>
<wt-label
v-if="label"
>
<wt-label>
{{ label }}
</wt-label>
</div>
Expand Down
96 changes: 96 additions & 0 deletions src/modules/cases/modules/deadlines/components/case-deadline.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,96 @@
<template>
<div class="case-deadline">
<wt-label>{{ label }}</wt-label>
<div class="case-deadline__item-content">
<div
v-if="time"
class="case-deadline__value-wrapper"
>
<span>{{ prettifyDate(time) }}</span>
</div>
<span
v-if="timeDifference"
:class="{
'case-deadline__time-difference_positive': timeDifference > 0,
'case-deadline__time-difference_negative': timeDifference < 0
}"
>{{ formatTimeDifference(timeDifference) }}</span>
VladimirBeria marked this conversation as resolved.
Show resolved Hide resolved
</div>
</div>
</template>

<script setup>
const props = defineProps({
label: {
type: String,
required: true,
},
time: {
type: String,
default: '',
},
timeDifference: {
type: String,
default: '',
},
});

function prettifyDate(timestamp) {
console.log(timestamp);
// timestamp is in milliseconds
const date = new Date(Number(timestamp));

const time = date.toLocaleTimeString('en-GB', {
hour: '2-digit',
minute: '2-digit',
});

const datePart = date.toLocaleDateString('en-GB').replace(/\//g, '.');

return `${time} ${datePart}`;
}

function formatTimeDifference(value) {
VladimirBeria marked this conversation as resolved.
Show resolved Hide resolved
//value is in seconds
const totalSeconds = Math.abs(Number(value));
const isNegative = value < 0;

const days = Math.floor(totalSeconds / (24 * 60 * 60));
const hours = Math.floor((totalSeconds % (24 * 60 * 60)) / (60 * 60));
const minutes = Math.floor((totalSeconds % (60 * 60)) / 60);

const formatted = `${days}d ${hours}h ${minutes}m`;

return isNegative ? `- ${formatted}` : formatted;
}
</script>

<style lang="scss" scoped>
.case-deadline {
display: flex;
align-items: flex-start;
justify-content: space-between;

&__value-wrapper {
display: flex;
gap: var(--spacing-xs);
text-align: end;
}

&__item-content {
display: flex;
align-items: end;
flex-direction: column;
}

&__time-difference {
&_positive {
color: var(--success-color);
}

&_negative {
color: var(--error-color);
}
}
}
</style>
Loading