Skip to content

Commit

Permalink
♻️ [ecw/cp] refactor to composition API
Browse files Browse the repository at this point in the history
  • Loading branch information
jxn-30 committed Aug 30, 2023
1 parent 07659df commit ef51959
Show file tree
Hide file tree
Showing 4 changed files with 187 additions and 248 deletions.
4 changes: 2 additions & 2 deletions src/components/EnhancedTable.vue
Original file line number Diff line number Diff line change
Expand Up @@ -77,7 +77,7 @@ const tableRight = ref<string>('0px');
const props = withDefaults(
defineProps<{
columns: Column<ColumnKey, boolean>[];
columnTranslations: Record<ColumnKey, string>;
columnTranslations?: Record<ColumnKey, string>;
sort?: ColumnKey;
sortDir?: 'asc' | 'desc';
noSearch?: boolean;
Expand All @@ -87,7 +87,7 @@ const props = withDefaults(
noBody?: boolean;
}>(),
{
columnTranslations: () => {},
columnTranslations: () => ({}),
sort: '',
sortDir: 'asc',
noSearch: false,
Expand Down
4 changes: 2 additions & 2 deletions src/modules/extendedCallWindow/assets/collapsablePatients.ts
Original file line number Diff line number Diff line change
Expand Up @@ -77,8 +77,8 @@ export default (
.querySelector<HTMLDivElement>('.mission_patient')
?.before(summaryBox);
import(
/* webpackChunkName: "modules/extendedCallWindow/components/collapsablePatients" */
'../components/collapsablePatients/collapsablePatients.vue'
/* webpackChunkName: "modules/extendedCallWindow/components/CollapsablePatients" */
'../components/collapsablePatients/CollapsablePatients.vue'
).then(({ default: collapsablePatients }) =>
new LSSM.$vue({
pinia: LSSM.$pinia,
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,183 @@
<template>
<div
class="alert alert-danger col-xs-12"
:class="{ 'patients-collapsed': collapsed }"
>
<span class="col-xs-12">
<b>{{ amountTotal.toLocaleString() }}</b>
{{ $m('summary.total') }}
<b>{{ amountTreated.toLocaleString() }}</b>
{{ $m('summary.treated') }}
</span>
<div
v-if="hasRedTexts"
:class="hasLabels ? 'col-md-2 col-xs-4' : 'col-xs-12'"
>
<ul>
<li v-for="[req, amount] in redRequirements" :key="req">
<b>{{ amount.toLocaleString() }}x</b> {{ req }}
</li>
</ul>
</div>
<div
v-if="hasLabels"
class="col-xs-8"
:class="hasRedTexts ? 'col-md-4' : 'col-md-6'"
>
<ul class="labels-list">
<li v-for="[label, details] in labels" :key="label">
<span
v-for="(amount, detail) in details"
class="patient-label"
:key="`${label}_${detail}`"
>
<b>{{ amount.toLocaleString() }}x</b>
<span class="label label-default label-left">
{{ label }}
</span>
<span
class="label label-right"
:class="labelColors[label][detail]"
>
{{ detail }}
</span>
</span>
</li>
</ul>
</div>
<div v-if="hasLabels" class="col-xs-12 col-md-6">
<enhanced-table
:columns="[
{
key: 'combi',
title: $m('combis').toString(),
noSort: true,
},
{
key: 'amount',
title: $m('amount').toString(),
noSort: true,
},
]"
:table-attrs="{ class: 'table table-striped table-condensed' }"
no-search
>
<tr
v-for="([combi, amount], index) in labelCombis"
:key="index"
>
<td>
<span
v-for="(detail, desc) in combi"
:key="`${index}_${desc}_${detail}`"
class="patient-label"
>
<span class="label label-default label-left">
{{ desc }}
</span>
<span
class="label label-right"
:class="labelColors[desc][detail]"
>
{{ detail }}
</span>
<wbr />
</span>
</td>
<td>
<b>{{ amount.toLocaleString() }}</b>
</td>
</tr>
</enhanced-table>
</div>
<div class="clearfix"></div>
<font-awesome-icon
class="pull-left"
:icon="collapsed ? faChevronCircleUp : faChevronCircleDown"
style="cursor: pointer"
@click="() => (collapsed = !collapsed)"
></font-awesome-icon>
</div>
</template>

<script setup lang="ts">
import { computed, onBeforeMount, ref } from 'vue';
import { faChevronCircleDown } from '@fortawesome/free-solid-svg-icons/faChevronCircleDown';
import { faChevronCircleUp } from '@fortawesome/free-solid-svg-icons/faChevronCircleUp';
import EnhancedTable from '../../../../components/EnhancedTable.vue';
import { useI18nModule } from '../../../../i18n';
const { $m } = useI18nModule('extendedCallWindow.patientCollapse');
const collapsed = ref<boolean>(true);
const amountTotal = ref<number>(0);
const amountTreated = ref<number>(0);
const props = defineProps<{
requirements: {
red: Record<string, number>;
detailed: Record<string, Record<string, number>>;
};
labelColors: Record<string, Record<string, string>>;
patientLabelCombis: Record<string, number>;
}>();
const hasRedTexts = computed<boolean>(
() => Object.keys(props.requirements.red).length > 0
);
const hasLabels = computed<boolean>(
() => Object.keys(props.requirements.detailed).length > 0
);
const redRequirements = computed<[string, number][]>(() =>
Object.entries(props.requirements.red).sort((reqA, reqB) =>
reqA[0].localeCompare(reqB[0])
)
);
const labels = computed<[string, Record<string, number>][]>(() =>
Object.entries(props.requirements.detailed).sort((reqA, reqB) =>
reqA[0].localeCompare(reqB[0])
)
);
const labelCombis = computed<[Record<string, string>, number][]>(() =>
Object.entries(props.patientLabelCombis)
.sort((reqA, reqB) => reqA[1] - reqB[1])
.map(([combis, amount]) => [JSON.parse(combis), amount])
);
onBeforeMount(() => {
amountTotal.value = document.querySelectorAll('.mission_patient').length;
amountTreated.value = document.querySelectorAll(
'.mission_patient .progress-striped-inner-active'
).length;
});
</script>

<style scoped lang="sass">
.alert
margin: 5px
width: calc(100% - 10px)
border-radius: 5px
padding: 5px
ul
list-style: none
padding-left: 0
margin-bottom: 0
&.labels-list
padding-left: 0.5em
span.patient-label
display: inline-block
&:not(:first-child)
padding-left: 0.5em
:deep(table)
margin-bottom: 0
&.patients-collapsed ~ :deep(.mission_patient)
display: none
</style>
Loading

0 comments on commit ef51959

Please sign in to comment.