From d65bd0cca5208cc1e742f238527ddbdcfa2b3ac9 Mon Sep 17 00:00:00 2001 From: Julian Leucker <leuckerj@gmail.com> Date: Tue, 30 Apr 2024 13:22:31 +0200 Subject: [PATCH] Implement SlideIterator --- .../components/generic/SlideIterator.vue | 121 ++++++++++++++++++ 1 file changed, 121 insertions(+) create mode 100644 aleksis/core/frontend/components/generic/SlideIterator.vue diff --git a/aleksis/core/frontend/components/generic/SlideIterator.vue b/aleksis/core/frontend/components/generic/SlideIterator.vue new file mode 100644 index 000000000..3b139155d --- /dev/null +++ b/aleksis/core/frontend/components/generic/SlideIterator.vue @@ -0,0 +1,121 @@ +<script> +import SecondaryActionButton from "./buttons/SecondaryActionButton.vue"; + +export default { + name: "SlideIterator", + components: { SecondaryActionButton }, + extends: "v-data-iterator", + data() { + return { + expanded: [], + selected: [], + }; + }, + props: { + itemKeyGetter: { + type: Function, + default: (item) => item.id, + required: false, + }, + }, + watch: { + /** + * Emits an event when items are expanded or not anymore. + * + * @param newValue new list of expanded items + * @param oldValue previous list of expanded items + */ + expanded(newValue, oldValue) { + const n = newValue.length > 0; + const o = oldValue.length > 0; + + console.log("Hello", n, o); + + if (n === o) { + // Only emit an event when the length is different + return; + } + + if (n) { + // At least one item is now expanded and previously there were none + this.$emit("update:isExpanded", true); + return; + } + + // no item is expanded anymore + this.$emit("update:isExpanded", false); + }, + }, +}; +</script> + +<template> + <v-data-iterator + disable-pagination + hide-default-footer + single-expand + :expanded.sync="expanded" + v-model="selected" + v-bind="$attrs" + v-on="$listeners" + > + <template #default="{ items, isExpanded, expand }"> + <v-slide-x-transition leave-absolute> + <v-list v-show="expanded.length === 0"> + <v-list-item-group multiple v-model="selected"> + <v-list-item + v-for="item in items" + :key="itemKeyGetter(item)" + :value="item" + > + <template #default="{ active }"> + <v-list-item-action> + <v-checkbox + :input-value="active" + color="primary" + ></v-checkbox> + </v-list-item-action> + <v-list-item-content> + <slot + name="listItemContent" + :item="item" + :selected="selected" + /> + </v-list-item-content> + <v-list-item-action> + <v-btn icon large> + <v-icon large @click.stop="expand(item, true)"> + $next + </v-icon> + </v-btn> + </v-list-item-action> + </template> + </v-list-item> + </v-list-item-group> + </v-list> + </v-slide-x-transition> + <v-slide-x-reverse-transition leave-absolute> + <v-card v-if="expanded.length > 0"> + <slot + name="expandedItem" + :item="expanded[0]" + :close="() => expand(expanded[0], false)" + > + <v-card-title> + {{ $tc("selection.num_items_selected", expanded.length) }} + </v-card-title> + <v-card-text> + <p>{{ expanded[0] }}</p> + <secondary-action-button + @click="expand(expanded[0], false)" + i18n-key="actions.close" + /> + </v-card-text> + </slot> + </v-card> + </v-slide-x-reverse-transition> + </template> + </v-data-iterator> +</template> + +<style scoped></style> -- GitLab