Resources view improvements

Signed-off-by: Thomas Citharel <tcit@tcit.fr>
This commit is contained in:
Thomas Citharel 2022-11-03 17:21:36 +01:00
parent d75a95cccd
commit afd164a449
No known key found for this signature in database
GPG Key ID: A061B9DDE0CA0773
1 changed files with 21 additions and 12 deletions

View File

@ -1,17 +1,20 @@
<template> <template>
<section class="bg-white p-2"> <section class="bg-white dark:bg-zinc-700 p-2 pt-0.5">
<h1>{{ t("Resources") }}</h1>
<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="pl-6 mt-2 flex items-center gap-3"> <div class="pl-6 mt-2 flex items-center gap-3">
<o-checkbox v-model="checkedAll" v-if="resources.length > 0" /> <o-checkbox v-model="checkedAll" v-if="resources.length > 0">
<span class="sr-only">{{ t("Select all resources") }}</span>
</o-checkbox>
<div <div
class="flex items-center gap-3" class="flex items-center gap-3"
v-if="validCheckedResources.length > 0" v-if="validCheckedResources.length > 0"
> >
<small> <small>
{{ {{
$t( t(
"No resources selected", "No resources selected",
{ {
count: validCheckedResources.length, count: validCheckedResources.length,
@ -25,7 +28,7 @@
icon-right="delete" icon-right="delete"
size="small" size="small"
@click="deleteMultipleResources" @click="deleteMultipleResources"
>{{ $t("Delete") }}</o-button >{{ t("Delete") }}</o-button
> >
</div> </div>
</div> </div>
@ -43,7 +46,9 @@
class="resource-checkbox px-2" class="resource-checkbox px-2"
:class="{ checked: checkedResources[element.id as string] }" :class="{ checked: checkedResources[element.id as string] }"
> >
<o-checkbox v-model="checkedResources[element.id as string]" /> <o-checkbox v-model="checkedResources[element.id as string]">
<span class="sr-only">{{ t("Select this resource") }}</span>
</o-checkbox>
</div> </div>
<resource-item <resource-item
:resource="element" :resource="element"
@ -63,12 +68,12 @@
</div> </div>
</template> </template>
</draggable> </draggable>
<div <EmptyContent icon="link" :inline="true" v-if="resources.length === 0">
class="content has-text-centered has-text-grey" {{ t("No resources in this folder") }}
v-if="resources.length === 0" <template #desc>
> {{ t("You can add resources by using the button above.") }}
<p>{{ $t("No resources in this folder") }}</p> </template>
</div> </EmptyContent>
</section> </section>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
@ -78,6 +83,8 @@ 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";
import { useI18n } from "vue-i18n";
import EmptyContent from "@/components/Utils/EmptyContent.vue";
const props = withDefaults( const props = withDefaults(
defineProps<{ resources: IResource[]; isRoot: boolean; group: IGroup }>(), defineProps<{ resources: IResource[]; isRoot: boolean; group: IGroup }>(),
@ -90,6 +97,8 @@ const emit = defineEmits<{
(e: "delete", resourceID: string): void; (e: "delete", resourceID: string): void;
}>(); }>();
const { t } = useI18n({ useScope: "global" });
const groupObject: Record<string, unknown> = { const groupObject: Record<string, unknown> = {
name: "resources", name: "resources",
pull: "clone", pull: "clone",