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 {
@apply text-2xl py-6;
}
.btn-size-small {
@apply text-sm py-1 px-2;
}
.btn-disabled {
@apply opacity-50 cursor-not-allowed;
}

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

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