Skip to content

Commit

Permalink
perf(ui): reduce vue nodes in lists & unify bordered lists
Browse files Browse the repository at this point in the history
  • Loading branch information
@lukashroch
lukashroch committed Oct 10, 2024
1 parent b766667 commit e5fa775
Show file tree
Hide file tree
Showing 43 changed files with 363 additions and 456 deletions.
125 changes: 61 additions & 64 deletions apps/admin/src/components/dialogs/event-notifications.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,70 +25,67 @@
<v-icon icon="fas fa-paper-plane" start /> {{ $t('notifications.add') }}
</v-btn>
</div>
<v-list class="py-0">
<template v-for="(item, idx) in items" :key="idx">
<v-list-item>
<template #prepend>
<v-icon>fas fa-paper-plane</v-icon>
</template>
<v-container>
<v-row>
<v-col cols="12" md="6">
<v-select
v-model="item.type"
hide-details="auto"
:items="events"
name="type"
:title="$t('notifications.events._')"
variant="outlined"
/>
</v-col>
<v-col cols="12" md="6">
<v-select
v-model="item.channel"
hide-details="auto"
:items="channels"
name="channel"
:title="$t('notifications.channels._')"
variant="outlined"
@update:model-value="updateProps(idx)"
/>
</v-col>
</v-row>
<v-row>
<v-col>
<v-text-field
v-if="item.channel === 'webhook'"
v-model="item.url"
hide-details="auto"
:label="$t('notifications.channels.url')"
variant="outlined"
/>
<v-text-field
v-else-if="item.channel === 'email'"
v-model="item.to"
hide-details="auto"
:label="$t('notifications.channels.to')"
variant="outlined"
/>
<v-text-field
v-else-if="item.channel === 'slack'"
v-model="item.channelId"
hide-details="auto"
:label="$t('notifications.channels.channelId')"
variant="outlined"
/>
</v-col>
</v-row>
</v-container>
<template #append>
<v-list-item-action>
<v-btn icon="$delete" :title="$t('notifications.remove')" @click.stop="remove(idx)" />
</v-list-item-action>
</template>
</v-list-item>
<v-divider v-if="idx + 1 < items.length" :key="`div-${idx}`" />
</template>
<v-list class="list-border py-0">
<v-list-item v-for="(item, idx) in items" :key="idx">
<template #prepend>
<v-icon>fas fa-paper-plane</v-icon>
</template>
<v-container>
<v-row>
<v-col cols="12" md="6">
<v-select
v-model="item.type"
hide-details="auto"
:items="events"
name="type"
:title="$t('notifications.events._')"
variant="outlined"
/>
</v-col>
<v-col cols="12" md="6">
<v-select
v-model="item.channel"
hide-details="auto"
:items="channels"
name="channel"
:title="$t('notifications.channels._')"
variant="outlined"
@update:model-value="updateProps(idx)"
/>
</v-col>
</v-row>
<v-row>
<v-col>
<v-text-field
v-if="item.channel === 'webhook'"
v-model="item.url"
hide-details="auto"
:label="$t('notifications.channels.url')"
variant="outlined"
/>
<v-text-field
v-else-if="item.channel === 'email'"
v-model="item.to"
hide-details="auto"
:label="$t('notifications.channels.to')"
variant="outlined"
/>
<v-text-field
v-else-if="item.channel === 'slack'"
v-model="item.channelId"
hide-details="auto"
:label="$t('notifications.channels.channelId')"
variant="outlined"
/>
</v-col>
</v-row>
</v-container>
<template #append>
<v-list-item-action>
<v-btn icon="$delete" :title="$t('notifications.remove')" @click.stop="remove(idx)" />
</v-list-item-action>
</template>
</v-list-item>
</v-list>
<v-card-actions>
<v-spacer />
Expand Down
27 changes: 12 additions & 15 deletions apps/admin/src/components/dialogs/select-resource.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,21 +41,18 @@
@click:clear="clear"
/>
<template v-if="items.length">
<v-list v-model:selected="selectedItemId" density="compact" min-height="350px">
<template v-for="(item, idx) in items" :key="item[itemId]">
<v-list-item :value="item[itemId]">
<template #prepend="{ isActive }">
<v-list-item-action class="mr-2">
<v-checkbox-btn :model-value="isActive " />
</v-list-item-action>
<v-icon>{{ itemIcon }}</v-icon>
</template>
<slot name="item" v-bind="{ item }">
<v-list-item-title>{{ item[itemName] }}</v-list-item-title>
</slot>
</v-list-item>
<v-divider v-if="idx + 1 < items.length" :key="`div-${item[itemId]}`" />
</template>
<v-list v-model:selected="selectedItemId" class="list-border" density="compact" min-height="350px">
<v-list-item v-for="item in items" :key="item[itemId]" :value="item[itemId]">
<template #prepend="{ isActive }">
<v-list-item-action class="mr-2">
<v-checkbox-btn :model-value="isActive " />
</v-list-item-action>
<v-icon>{{ itemIcon }}</v-icon>
</template>
<slot name="item" v-bind="{ item }">
<v-list-item-title>{{ item[itemName] }}</v-list-item-title>
</slot>
</v-list-item>
</v-list>
<div class="text-center">
<v-pagination v-model="page" :length="lastPage" rounded />
Expand Down
3 changes: 1 addition & 2 deletions apps/admin/src/components/fdbs/associated-foods/associated-food-list.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@
@click.stop="add"
/>
</v-toolbar>
<v-list class="py-0" lines="two">
<v-list class="list-border py-0" lines="two">
<vue-draggable
v-model="items"
:animation="300"
Expand All @@ -24,7 +24,6 @@
<v-list-item
v-for="(item, index) in items"
:key="item._id"
class="drag-and-drop__item"
>
<template #prepend>
<v-avatar class="drag-and-drop__handle" icon="$handle" />
Expand Down
23 changes: 10 additions & 13 deletions apps/admin/src/components/fdbs/categories/add-category-dialog.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,19 +26,16 @@
{{ $t('fdbs.categories.alreadyIncluded', { code: selectedItems[0].code }) }}
</v-alert>
<template v-if="items.length">
<v-list v-model:selected="selected" density="compact" min-height="350px" multiple>
<template v-for="(item, idx) in items" :key="item.code">
<v-list-item :value="item.code">
<template #prepend="{ isActive }">
<v-list-item-action class="mr-2">
<v-checkbox-btn :model-value="isActive " />
</v-list-item-action>
<v-icon>fas fa-list</v-icon>
</template>
<v-list-item-title>{{ item.code }} | {{ item.name }}</v-list-item-title>
</v-list-item>
<v-divider v-if="idx + 1 < items.length" :key="`div-${item.code}`" />
</template>
<v-list v-model:selected="selected" class="list-border" density="compact" min-height="350px" multiple>
<v-list-item v-for="(item) in items" :key="item.code" :value="item.code">
<template #prepend="{ isActive }">
<v-list-item-action class="mr-2">
<v-checkbox-btn :model-value="isActive " />
</v-list-item-action>
<v-icon>fas fa-list</v-icon>
</template>
<v-list-item-title>{{ item.code }} | {{ item.name }}</v-list-item-title>
</v-list-item>
</v-list>
<div class="text-center">
<v-pagination v-model="page" :length="lastPage" rounded />
Expand Down
49 changes: 23 additions & 26 deletions apps/admin/src/components/fdbs/categories/category-list.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,32 +14,29 @@
@add="add"
/>
</v-toolbar>
<v-list class="py-0">
<template v-for="(item, idx) in items" :key="item.code">
<v-list-item link>
<template #prepend>
<v-icon>$categories</v-icon>
</template>
<slot name="item.content" v-bind="{ item }">
<v-list-item-title>{{ item.code }} | {{ item.name }}</v-list-item-title>
</slot>
<template #append>
<slot name="item.action" v-bind="{ item }" />
<v-list-item-action v-if="!disabled">
<confirm-dialog
color="error"
icon
icon-left="$delete"
:label="$t('fdbs.categories.remove')"
@confirm="remove(item.code)"
>
{{ $t('common.action.confirm.remove', { name: item.name }) }}
</confirm-dialog>
</v-list-item-action>
</template>
</v-list-item>
<v-divider v-if="idx + 1 < items.length" :key="`div-${item.code}`" />
</template>
<v-list class="list-border py-0">
<v-list-item v-for="item in items" :key="item.code" link>
<template #prepend>
<v-icon>$categories</v-icon>
</template>
<slot name="item.content" v-bind="{ item }">
<v-list-item-title>{{ item.code }} | {{ item.name }}</v-list-item-title>
</slot>
<template #append>
<slot name="item.action" v-bind="{ item }" />
<v-list-item-action v-if="!disabled">
<confirm-dialog
color="error"
icon
icon-left="$delete"
:label="$t('fdbs.categories.remove')"
@confirm="remove(item.code)"
>
{{ $t('common.action.confirm.remove', { name: item.name }) }}
</confirm-dialog>
</v-list-item-action>
</template>
</v-list-item>
</v-list>
<v-messages
v-if="errors.has('main.parentCategories')"
Expand Down
27 changes: 12 additions & 15 deletions apps/admin/src/components/fdbs/locales/add-locale-dialog.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,21 +26,18 @@
{{ $t('fdbs.categories.alreadyIncluded', { code: selectedItems[0].code }) }}
</v-alert>
<template v-if="items.length">
<v-list v-model:selected="selected" density="compact" min-height="350px" multiple>
<template v-for="(item, idx) in items" :key="item.id">
<v-list-item :value="item.id">
<template #prepend="{ isActive }">
<v-list-item-action class="mr-2">
<v-checkbox-btn :model-value="isActive " />
</v-list-item-action>
<v-icon>$locales</v-icon>
</template>
<v-list-item-title>
{{ item.code }} | {{ item.englishName }}
</v-list-item-title>
</v-list-item>
<v-divider v-if="idx + 1 < items.length" :key="`div-${item.id}`" />
</template>
<v-list v-model:selected="selected" class="list-border" density="compact" min-height="350px" multiple>
<v-list-item v-for="item in items" :key="item.id" :value="item.id">
<template #prepend="{ isActive }">
<v-list-item-action class="mr-2">
<v-checkbox-btn :model-value="isActive " />
</v-list-item-action>
<v-icon>$locales</v-icon>
</template>
<v-list-item-title>
{{ item.code }} | {{ item.englishName }}
</v-list-item-title>
</v-list-item>
</v-list>
<div class="text-center">
<v-pagination v-model="page" :length="lastPage" rounded />
Expand Down
45 changes: 21 additions & 24 deletions apps/admin/src/components/fdbs/locales/locale-list.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,30 +15,27 @@
{{ $t('fdbs.locales.description', { count: items.length }) }}
</v-expansion-panel-title>
<v-expansion-panel-text>
<v-list class="py-0" density="compact">
<template v-for="(item, idx) in items" :key="item.id">
<v-list-item link>
<template #prepend>
<v-icon>$locales</v-icon>
</template>
<v-list-item-title>{{ item.englishName }}</v-list-item-title>
<template #append>
<v-list-item-action v-if="!disabled" class="my-0">
<confirm-dialog
color="error"
icon
icon-left="$delete"
:label="$t('fdbs.locales.remove')"
small
@confirm="remove(item.id)"
>
{{ $t('common.action.confirm.remove', { name: item.englishName }) }}
</confirm-dialog>
</v-list-item-action>
</template>
</v-list-item>
<v-divider v-if="idx + 1 < items.length" :key="`div-${item.id}`" />
</template>
<v-list class="list-border py-0" density="compact">
<v-list-item v-for="item in items" :key="item.id" link>
<template #prepend>
<v-icon>$locales</v-icon>
</template>
<v-list-item-title>{{ item.englishName }}</v-list-item-title>
<template #append>
<v-list-item-action v-if="!disabled" class="my-0">
<confirm-dialog
color="error"
icon
icon-left="$delete"
:label="$t('fdbs.locales.remove')"
small
@confirm="remove(item.id)"
>
{{ $t('common.action.confirm.remove', { name: item.englishName }) }}
</confirm-dialog>
</v-list-item-action>
</template>
</v-list-item>
</v-list>
</v-expansion-panel-text>
</v-expansion-panel>
Expand Down
27 changes: 12 additions & 15 deletions apps/admin/src/components/fdbs/nutrients/add-nutrient-dialog.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,21 +43,18 @@
{{ $t('fdbs.nutrients.alreadyIncluded', { id: selectedRecord?.id }) }}
</v-alert>
<template v-if="items.length">
<v-list v-model:selected="selectedRecordId" density="compact" min-height="350px">
<template v-for="(item, idx) in items" :key="item.id">
<v-list-item :value="item.id">
<template #prepend="{ isActive }">
<v-list-item-action class="mr-2">
<v-checkbox-btn :model-value="isActive " />
</v-list-item-action>
<v-icon>fas fa-list</v-icon>
</template>
<v-list-item-title>
{{ item.nutrientTableRecordId }} | {{ item.name }}
</v-list-item-title>
</v-list-item>
<v-divider v-if="idx + 1 < items.length" :key="`div-${item.id}`" />
</template>
<v-list v-model:selected="selectedRecordId" class="list-border" density="compact" min-height="350px">
<v-list-item v-for="item in items" :key="item.id" :value="item.id">
<template #prepend="{ isActive }">
<v-list-item-action class="mr-2">
<v-checkbox-btn :model-value="isActive " />
</v-list-item-action>
<v-icon>fas fa-list</v-icon>
</template>
<v-list-item-title>
{{ item.nutrientTableRecordId }} | {{ item.name }}
</v-list-item-title>
</v-list-item>
</v-list>
<div class="text-center">
<v-pagination v-model="page" :length="lastPage" rounded />
Expand Down
Loading

0 comments on commit e5fa775

Please sign in to comment.