Chapril/mobilizon.chapril.org-mobilizon
Chapril/mobilizon.chapril.org-mobilizon
25
0
Fork 0
Code Issues Pull Requests Releases Activity

Fix moving resources

Browse Source 
Signed-off-by: Thomas Citharel <tcit@tcit.fr>
This commit is contained in:
Thomas Citharel 2022-11-03 12:10:59 +01:00
parent 62dd1b85b7
commit 29de9b346a
No known key found for this signature in database
GPG Key ID: A061B9DDE0CA0773
7 changed files with 82 additions and 63 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
js/package.json
View File

@ -87,7 +87,7 @@
"vue-router": "4",
"vue-scrollto": "^2.17.1",
"vue-use-route-query": "^1.1.0",
"vuedraggable": "^4.1.0"
"zhyswan-vuedraggable": "^4.1.3"
},
"devDependencies": {
"@histoire/plugin-vue": "^0.11.0",

2
js/src/components/Resource/DraggableList.vue
View File

@ -75,7 +75,7 @@ import ResourceItem from "@/components/Resource/ResourceItem.vue";
import FolderItem from "@/components/Resource/FolderItem.vue";
import { ref, watch } from "vue";
import { IResource } from "@/types/resource";
import Draggable from "vuedraggable";
import Draggable from "zhyswan-vuedraggable";
import { IGroup } from "@/types/actor";
const props = withDefaults(

19
js/src/components/Resource/FolderItem.vue
View File

@ -26,7 +26,11 @@
:sort="false"
:group="groupObject"
@change="onChange"
/>
>
<template #item="{ element }">
<div>{{ element.name }}</div>
</template>
</draggable>
</router-link>
<resource-dropdown
class="actions"
@ -39,7 +43,7 @@
</template>
<script lang="ts" setup>
import { useRouter } from "vue-router";
import Draggable, { ChangeEvent } from "vuedraggable";
import Draggable from "zhyswan-vuedraggable";
import { IResource } from "@/types/resource";
import RouteName from "@/router/name";
import { IGroup, usernameWithDomain } from "@/types/actor";
@ -75,12 +79,15 @@ const groupObject: Record<string, unknown> = {
put: ["resources"],
};
const onChange = async (evt: ChangeEvent<IResource>) => {
const onChange = async (evt: any) => {
if (evt.added && evt.added.element) {
// const movedResource = evt.added.element as IResource;
const movedResource = evt.added.element as IResource;
console.debug(
`Moving resource « ${movedResource.title} » to path « ${props.resource.path} » (new parent ${props.resource.id})`
);
moveResource({
id: props.resource.id,
path: `${props.resource.path}/${props.resource.title}`,
id: movedResource.id,
path: props.resource.path,
parentId: props.resource.id,
});
}

101
js/src/components/Resource/ResourceSelector.vue
View File

@ -1,34 +1,30 @@
<template>
<div v-if="resource">
<article class="panel is-primary">
<h2 class="panel-heading truncate">
<article class="">
<h2 class="mb-2">
{{
$t('Move "{resourceName}"', { resourceName: initialResource.title })
t('Move "{resourceName}"', { resourceName: initialResource.title })
}}
</h2>
<a
class="panel-block clickable flex gap-1 items-center"
@click="resourcePath.path = resource?.parent?.path"
class="cursor-pointer flex gap-1 items-center border p-2"
@click="goUp()"
v-if="resource.parent"
>
<span class="panel-icon">
<ChevronUp :size="16" />
</span>
{{ $t("Parent folder") }}
<ChevronUp :size="16" />
{{ t("Parent folder") }}
</a>
<a
class="panel-block clickable flex gap-1 items-center"
class="cursor-pointer flex gap-1 items-center border p-2"
@click="resourcePath.path = '/'"
v-else-if="resourcePath?.path && resourcePath?.path.length > 1"
>
<span class="panel-icon">
<ChevronUp :size="16" />
</span>
{{ $t("Parent folder") }}
<ChevronUp :size="16" />
{{ t("Parent folder") }}
</a>
<template v-if="resource.children">
<a
class="panel-block flex flex-wrap gap-1 px-2"
class="cursor-pointer flex flex-wrap gap-1 p-2 border"
v-for="element in resource.children.elements"
:class="{
clickable:
@ -38,23 +34,18 @@
@click="goDown(element)"
>
<p class="truncate flex gap-1 items-center">
<span class="panel-icon">
<Folder :size="16" v-if="element.type === 'folder'" />
<Link :size="16" v-else />
</span>
<Folder :size="16" v-if="element.type === 'folder'" />
<Link :size="16" v-else />
<span>{{ element.title }}</span>
</p>
<span v-if="element.id === initialResource.id">
<em v-if="element.type === 'folder'"> {{ $t("(this folder)") }}</em>
<em v-else> {{ $t("(this link)") }}</em>
<em v-if="element.type === 'folder'"> {{ t("(this folder)") }}</em>
<em v-else> {{ t("(this link)") }}</em>
</span>
</a>
</template>
<p
class="panel-block content has-text-grey has-text-centered"
v-if="resource.children && resource.children.total === 0"
>
{{ $t("No resources in this folder") }}
<p class="" v-if="resource.children && resource.children.total === 0">
{{ t("No resources in this folder") }}
</p>
<o-pagination
v-if="resource.children && resource.children.total > RESOURCES_PER_PAGE"
@ -62,25 +53,25 @@
v-model="page"
size="small"
:per-page="RESOURCES_PER_PAGE"
:aria-next-label="$t('Next page')"
:aria-previous-label="$t('Previous page')"
:aria-page-label="$t('Page')"
:aria-current-label="$t('Current page')"
:aria-next-label="t('Next page')"
:aria-previous-label="t('Previous page')"
:aria-page-label="t('Page')"
:aria-current-label="t('Current page')"
/>
</article>
<div class="flex gap-2 mt-2">
<o-button variant="text" @click="emit('close-move-modal')">{{
$t("Cancel")
t("Cancel")
}}</o-button>
<o-button
variant="primary"
@click="updateResource"
:disabled="moveDisabled"
><template v-if="resource.path === '/'">
{{ $t("Move resource to the root folder") }}
{{ t("Move resource to the root folder") }}
</template>
<template v-else
>{{ $t("Move resource to {folder}", { folder: resource.title }) }}
>{{ t("Move resource to {folder}", { folder: resource.title }) }}
</template></o-button
>
</div>
@ -88,18 +79,26 @@
</template>
<script lang="ts" setup>
import { useQuery } from "@vue/apollo-composable";
import { computed, ref, watch } from "vue";
import { computed, reactive, ref, watch } from "vue";
import { GET_RESOURCE } from "../../graphql/resources";
import { IResource } from "../../types/resource";
import Folder from "vue-material-design-icons/Folder.vue";
import Link from "vue-material-design-icons/Link.vue";
import ChevronUp from "vue-material-design-icons/ChevronUp.vue";
import { useI18n } from "vue-i18n";
const props = defineProps<{ initialResource: IResource; username: string }>();
const emit = defineEmits(["update-resource", "close-move-modal"]);
const resourcePath = ref<{ path: string | undefined; username: string }>({
path: props.initialResource.path,
const { t } = useI18n({ useScope: "global" });
const resourcePath = reactive<{
path: string | undefined;
username: string;
id: string | undefined;
}>({
id: props.initialResource.parent?.id,
path: props.initialResource.parent?.path,
username: props.username,
});
@ -109,9 +108,9 @@ const page = ref(1);
const { result: resourceResult, refetch } = useQuery<{ resource: IResource }>(
GET_RESOURCE,
() => {
if (resourcePath.value?.path) {
if (resourcePath?.path) {
return {
path: resourcePath.value?.path,
path: resourcePath?.path,
username: props.username,
page: page.value,
limit: RESOURCES_PER_PAGE,
@ -125,25 +124,30 @@ const resource = computed(() => resourceResult.value?.resource);
const goDown = (element: IResource): void => {
if (element.type === "folder" && element.id !== props.initialResource.id) {
resourcePath.value.path = element.path;
resourcePath.id = element.id;
resourcePath.path = element.path;
console.debug("Gone into folder", resourcePath);
}
};
watch(props.initialResource, () => {
if (props.initialResource) {
resourcePath.value.path = props.initialResource?.parent?.path;
resourcePath.id = props.initialResource?.parent?.id;
resourcePath.path = props.initialResource?.parent?.path;
refetch();
}
});
const updateResource = (): void => {
console.debug("Emitting updateResource from folder", resourcePath);
const parent = resourcePath?.path === "/" ? null : resourcePath;
emit(
"update-resource",
{
id: props.initialResource.id,
title: props.initialResource.title,
parent: resourcePath.value?.path === "/" ? null : resourcePath.value,
path: props.initialResource.path,
parent: parent,
path: parent?.path ?? "/",
},
props.initialResource.parent
);
@ -152,13 +156,18 @@ const updateResource = (): void => {
const moveDisabled = computed((): boolean | undefined => {
return (
(props.initialResource.parent &&
resourcePath.value &&
props.initialResource.parent.path === resourcePath.value.path) ||
resourcePath &&
props.initialResource.parent.path === resourcePath.path) ||
(props.initialResource.parent === undefined &&
resourcePath.value &&
resourcePath.value.path === "/")
resourcePath &&
resourcePath.path === "/")
);
});
const goUp = () => {
resourcePath.id = resource.value?.parent?.id;
resourcePath.path = resource.value?.parent?.path;
};
</script>
<style lang="scss" scoped>
.panel {

2
js/src/types/resource.ts
View File

@ -1,5 +1,5 @@
import type { Paginate } from "@/types/paginate";
import type { IActor } from "@/types/actor";
import type { IActor, IGroup } from "@/types/actor";
export interface IResourceMetadata {
title?: string;

5
js/src/views/Resources/ResourceFolder.vue
View File

@ -80,7 +80,7 @@
has-modal-card
:close-button-aria-label="t('Close')"
>
<div class="w-full md:w-[640px]">
<div class="w-full">
<section>
<resource-selector
:initialResource="updatedResource"
@ -567,6 +567,9 @@ const updateResource = async (
resourceToUpdate: IResource,
parentPath: string | null = null
): Promise<void> => {
console.debug(
`Update resource « ${resourceToUpdate.title} » at path ${resourceToUpdate.path}`
);
updateResourceMutation(
{
id: resourceToUpdate.id,

14
js/yarn.lock
View File

@ -6438,13 +6438,6 @@ vue@^3.2.37:
"@vue/server-renderer" "3.2.41"
"@vue/shared" "3.2.41"
vuedraggable@^4.1.0:
version "4.1.0"
resolved "https://registry.yarnpkg.com/vuedraggable/-/vuedraggable-4.1.0.tgz#edece68adb8a4d9e06accff9dfc9040e66852270"
integrity sha512-FU5HCWBmsf20GpP3eudURW3WdWTKIbEIQxh9/8GE806hydR9qZqRRxRE3RjqX7PkuLuMQG/A7n3cfj9rCEchww==
dependencies:
sortablejs "1.14.0"
w3c-keyname@^2.2.0, w3c-keyname@^2.2.4:
version "2.2.6"
resolved "https://registry.yarnpkg.com/w3c-keyname/-/w3c-keyname-2.2.6.tgz#8412046116bc16c5d73d4e612053ea10a189c85f"
@ -6804,3 +6797,10 @@ zen-observable@0.8.15, zen-observable@^0.8.0:
version "0.8.15"
resolved "https://registry.yarnpkg.com/zen-observable/-/zen-observable-0.8.15.tgz#96415c512d8e3ffd920afd3889604e30b9eaac15"
integrity sha512-PQ2PC7R9rslx84ndNBZB/Dkv8V8fZEpk83RLgXtYd0fwUgEjseMn1Dgajh2x6S8QbZAFa9p2qVCEuYZNgve0dQ==
zhyswan-vuedraggable@^4.1.3:
version "4.1.3"
resolved "https://registry.yarnpkg.com/zhyswan-vuedraggable/-/zhyswan-vuedraggable-4.1.3.tgz#0304bbf5c676f355e6052919c531802976492993"
integrity sha512-q4Mp52tQIvTAWG0CKxLCVLyG/3RnIskDxoJvfjDZ2kM8yTcMkY80VTc8rd3q9KwqJ0UVtjEGLufb23sjDp0peQ==
dependencies:
sortablejs "1.14.0"