Fix moving resources

Signed-off-by: Thomas Citharel <tcit@tcit.fr>

js/package.json

@@ -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",

js/src/components/Resource/DraggableList.vue

@@ -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(

js/src/components/Resource/FolderItem.vue

@@ -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,
+      id: movedResource.id,
-      path: `${props.resource.path}/${props.resource.title}`,
+      path: props.resource.path,
       parentId: props.resource.id,
     });
   }

js/src/components/Resource/ResourceSelector.vue

@@ -1,34 +1,30 @@
 <template>
   <div v-if="resource">
-    <article class="panel is-primary">
+    <article class="">
-      <h2 class="panel-heading truncate">
+      <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"
+        class="cursor-pointer flex gap-1 items-center border p-2"
-        @click="resourcePath.path = resource?.parent?.path"
+        @click="goUp()"
         v-if="resource.parent"
       >
-        <span class="panel-icon">
+        <ChevronUp :size="16" />
-          <ChevronUp :size="16" />
+        {{ t("Parent folder") }}
-        </span>
-        {{ $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" />
-          <ChevronUp :size="16" />
+        {{ t("Parent folder") }}
-        </span>
-        {{ $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'" />
-              <Folder :size="16" v-if="element.type === 'folder'" />
+            <Link :size="16" v-else />
-              <Link :size="16" v-else />
-            </span>
             <span>{{ element.title }}</span>
           </p>
           <span v-if="element.id === initialResource.id">
-            <em v-if="element.type === 'folder'"> {{ $t("(this folder)") }}</em>
+            <em v-if="element.type === 'folder'"> {{ t("(this folder)") }}</em>
-            <em v-else> {{ $t("(this link)") }}</em>
+            <em v-else> {{ t("(this link)") }}</em>
           </span>
         </a>
       </template>
-      <p
+      <p class="" v-if="resource.children && resource.children.total === 0">
-        class="panel-block content has-text-grey has-text-centered"
+        {{ t("No resources in this folder") }}
-        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-next-label="t('Next page')"
-        :aria-previous-label="$t('Previous page')"
+        :aria-previous-label="t('Previous page')"
-        :aria-page-label="$t('Page')"
+        :aria-page-label="t('Page')"
-        :aria-current-label="$t('Current 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 }>({
+const { t } = useI18n({ useScope: "global" });
-  path: props.initialResource.path,
+
+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,
+      parent: parent,
-      path: props.initialResource.path,
+      path: parent?.path ?? "/",
     },
     props.initialResource.parent
   );
@@ -152,13 +156,18 @@ const updateResource = (): void => {
 const moveDisabled = computed((): boolean | undefined => {
   return (
     (props.initialResource.parent &&
-      resourcePath.value &&
+      resourcePath &&
-      props.initialResource.parent.path === resourcePath.value.path) ||
+      props.initialResource.parent.path === resourcePath.path) ||
     (props.initialResource.parent === undefined &&
-      resourcePath.value &&
+      resourcePath &&
-      resourcePath.value.path === "/")
+      resourcePath.path === "/")
   );
 });
+
+const goUp = () => {
+  resourcePath.id = resource.value?.parent?.id;
+  resourcePath.path = resource.value?.parent?.path;
+};
 </script>
 <style lang="scss" scoped>
 .panel {

js/src/types/resource.ts

@@ -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;

js/src/views/Resources/ResourceFolder.vue

@@ -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,

js/yarn.lock

@@ -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"