potsda.mn/mobilizon
10
4
Fork 1
Code Issues 22 Pull requests 1 Projects Releases Wiki Activity

Fix multiselect of resources

Browse source 
Signed-off-by: Thomas Citharel <tcit@tcit.fr>
This commit is contained in:
Thomas Citharel 2022-11-03 16:26:50 +01:00
parent 29de9b346a
commit e03ad73c7f
No known key found for this signature in database
GPG key ID: A061B9DDE0CA0773
2 changed files with 42 additions and 38 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
js/src/assets/oruga-tailwindcss.css
View file

@ -36,6 +36,9 @@ body {
.btn-size-large { .btn-size-large {
@apply text-2xl py-6; @apply text-2xl py-6;
} }
.btn-size-small {
@apply text-sm py-1 px-2;
}
.btn-disabled { .btn-disabled {
@apply opacity-50 cursor-not-allowed; @apply opacity-50 cursor-not-allowed;
} }

77
js/src/components/Resource/DraggableList.vue
View file

@ -1,31 +1,32 @@
<template> <template>
<section> <section class="bg-white p-2">
<p v-if="isRoot"> <p v-if="isRoot">
{{ $t("A place to store links to documents or resources of any type.") }} {{ $t("A place to store links to documents or resources of any type.") }}
</p> </p>
<div class="list-header"> <div class="pl-6 mt-2 flex items-center gap-3">
<div class="list-header-right"> <o-checkbox v-model="checkedAll" v-if="resources.length > 0" />
<o-checkbox v-model="checkedAll" v-if="resources.length > 0" /> <div
<div class="actions" v-if="validCheckedResources.length > 0"> class="flex items-center gap-3"
<small> v-if="validCheckedResources.length > 0"
{{ >
$t( <small>
"No resources selected", {{
{ $t(
count: validCheckedResources.length, "No resources selected",
}, {
validCheckedResources.length count: validCheckedResources.length,
) },
}} validCheckedResources.length
</small> )
<o-button }}
variant="danger" </small>
icon-right="delete" <o-button
size="small" variant="danger"
@click="deleteMultipleResources" icon-right="delete"
>{{ $t("Delete") }}</o-button size="small"
> @click="deleteMultipleResources"
</div> >{{ $t("Delete") }}</o-button
>
</div> </div>
</div> </div>
<draggable <draggable
@ -37,7 +38,7 @@
item-key="id" item-key="id"
> >
<template #item="{ element }"> <template #item="{ element }">
<div class="resource-item"> <div class="flex border m-2 p-2 items-center">
<div <div
class="resource-checkbox px-2" class="resource-checkbox px-2"
:class="{ checked: checkedResources[element.id as string] }" :class="{ checked: checkedResources[element.id as string] }"
@ -73,7 +74,7 @@
<script lang="ts" setup> <script lang="ts" setup>
import ResourceItem from "@/components/Resource/ResourceItem.vue"; import ResourceItem from "@/components/Resource/ResourceItem.vue";
import FolderItem from "@/components/Resource/FolderItem.vue"; import FolderItem from "@/components/Resource/FolderItem.vue";
import { ref, watch } from "vue"; import { reactive, ref, watch } from "vue";
import { IResource } from "@/types/resource"; import { IResource } from "@/types/resource";
import Draggable from "zhyswan-vuedraggable"; import Draggable from "zhyswan-vuedraggable";
import { IGroup } from "@/types/actor"; import { IGroup } from "@/types/actor";
@ -95,22 +96,12 @@ const groupObject: Record<string, unknown> = {
put: true, put: true,
}; };
const checkedResources = ref<{ [key: string]: boolean }>({}); const checkedResources = reactive<{ [key: string]: boolean }>({});
const validCheckedResources = ref<string[]>([]); const validCheckedResources = ref<string[]>([]);
const checkedAll = ref(false); const checkedAll = ref(false);
watch(checkedResources, () => {
const newValidCheckedResources: string[] = [];
Object.entries(checkedResources).forEach(([key, value]) => {
if (value) {
newValidCheckedResources.push(key);
}
});
validCheckedResources.value = newValidCheckedResources;
});
const deleteMultipleResources = async (): Promise<void> => { const deleteMultipleResources = async (): Promise<void> => {
validCheckedResources.value.forEach((resourceID) => { validCheckedResources.value.forEach((resourceID) => {
emit("delete", resourceID); emit("delete", resourceID);
@ -120,10 +111,20 @@ const deleteMultipleResources = async (): Promise<void> => {
watch(checkedAll, () => { watch(checkedAll, () => {
props.resources.forEach(({ id }) => { props.resources.forEach(({ id }) => {
if (!id) return; if (!id) return;
checkedResources.value[id] = checkedAll.value; checkedResources[id] = checkedAll.value;
}); });
}); });
watch(checkedResources, (newCheckedResources) => {
const newValidCheckedResources: string[] = [];
Object.entries(newCheckedResources).forEach(([key, value]) => {
if (value) {
newValidCheckedResources.push(key);
}
});
validCheckedResources.value = newValidCheckedResources;
});
// const deleteResource = (resourceID: string) => { // const deleteResource = (resourceID: string) => {
// validCheckedResources.value = validCheckedResources.value.filter( // validCheckedResources.value = validCheckedResources.value.filter(
// (id) => id !== resourceID // (id) => id !== resourceID