Implement SlideIterator

aleksis/core/frontend/components/generic/SlideIterator.vue

+<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>