Adds 'selection mode' to collection list for the future features.
This commit is contained in:
parent
06cf31ccea
commit
afdd33d78b
|
@ -3,7 +3,7 @@
|
||||||
class="collection-list-item"
|
class="collection-list-item"
|
||||||
v-for="collection of collections"
|
v-for="collection of collections"
|
||||||
:key="collection.id"
|
:key="collection.id"
|
||||||
@click="goToCollectionPage(collection)">
|
@click="!isInSelectionMode ? goToCollectionPage(collection) : ''">
|
||||||
<ion-thumbnail slot="start">
|
<ion-thumbnail slot="start">
|
||||||
<ion-img :src="(collection.thumbnail && collection.thumbnail.thumbnail && collection.thumbnail.thumbnail[0]) ? collection.thumbnail.thumbnail[0] : thumbnailPlaceholder" :alt="collection.name ? collection.name : $('label_collection_without_name')"></ion-img>
|
<ion-img :src="(collection.thumbnail && collection.thumbnail.thumbnail && collection.thumbnail.thumbnail[0]) ? collection.thumbnail.thumbnail[0] : thumbnailPlaceholder" :alt="collection.name ? collection.name : $('label_collection_without_name')"></ion-img>
|
||||||
</ion-thumbnail>
|
</ion-thumbnail>
|
||||||
|
@ -24,6 +24,11 @@
|
||||||
{{ $t('total_of_published_items', [collection.total_items.publish]) }}
|
{{ $t('total_of_published_items', [collection.total_items.publish]) }}
|
||||||
</p>
|
</p>
|
||||||
</ion-label>
|
</ion-label>
|
||||||
|
<ion-radio
|
||||||
|
v-if="isInSelectionMode"
|
||||||
|
slot="end"
|
||||||
|
:value="collection.id">
|
||||||
|
</ion-radio>
|
||||||
</ion-item>
|
</ion-item>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
@ -33,24 +38,28 @@ import {
|
||||||
IonImg,
|
IonImg,
|
||||||
IonThumbnail,
|
IonThumbnail,
|
||||||
IonLabel,
|
IonLabel,
|
||||||
IonIcon
|
IonIcon,
|
||||||
|
IonRadio
|
||||||
} from '@ionic/vue';
|
} from '@ionic/vue';
|
||||||
import { useRouter } from "vue-router";
|
import { useRouter } from "vue-router";
|
||||||
import { lockClosedOutline, readerOutline, trashOutline } from 'ionicons/icons';
|
import { lockClosedOutline, readerOutline, trashOutline } from 'ionicons/icons';
|
||||||
import { computed } from 'vue';
|
import { computed, defineComponent } from 'vue';
|
||||||
|
|
||||||
export default {
|
export default defineComponent({
|
||||||
props: [
|
props: [
|
||||||
"collections"
|
"collections",
|
||||||
|
"isSelectionMode"
|
||||||
],
|
],
|
||||||
components: {
|
components: {
|
||||||
IonItem,
|
IonItem,
|
||||||
IonImg,
|
IonImg,
|
||||||
IonThumbnail,
|
IonThumbnail,
|
||||||
IonLabel,
|
IonLabel,
|
||||||
IonIcon
|
IonIcon,
|
||||||
|
IonRadio
|
||||||
},
|
},
|
||||||
setup() {
|
setup(props) {
|
||||||
|
const isInSelectionMode = computed(() => props.isSelectionMode);
|
||||||
const thumbnailPlaceholder = computed (() => require('../../assets/placeholder_square_small.png'))
|
const thumbnailPlaceholder = computed (() => require('../../assets/placeholder_square_small.png'))
|
||||||
const router = useRouter();
|
const router = useRouter();
|
||||||
const goToCollectionPage = (collection: any) => {
|
const goToCollectionPage = (collection: any) => {
|
||||||
|
@ -67,10 +76,11 @@ export default {
|
||||||
lockClosedOutline,
|
lockClosedOutline,
|
||||||
readerOutline,
|
readerOutline,
|
||||||
trashOutline,
|
trashOutline,
|
||||||
goToCollectionPage
|
goToCollectionPage,
|
||||||
|
isInSelectionMode
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
}
|
})
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
|
|
|
@ -9,7 +9,7 @@
|
||||||
<ion-refresher-content></ion-refresher-content>
|
<ion-refresher-content></ion-refresher-content>
|
||||||
</ion-refresher>
|
</ion-refresher>
|
||||||
<ion-list>
|
<ion-list>
|
||||||
<collections-list :collections="tainacanStore.collections"></collections-list>
|
<collections-list :collections="tainacanStore.collections" :is-selection-mode="false"></collections-list>
|
||||||
</ion-list>
|
</ion-list>
|
||||||
</base-layout>
|
</base-layout>
|
||||||
</template>
|
</template>
|
||||||
|
|
Loading…
Reference in New Issue