Allow to properly move group resources

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

js/src/components/Resource/FolderItem.vue

@@ -29,7 +29,7 @@
       class="actions"
       v-if="!inline"
       @delete="$emit('delete', resource.id)"
-      @move="$emit('move', resource.id)"
+      @move="$emit('move', resource)"
       @rename="$emit('rename', resource)"
     />
   </div>
@@ -70,8 +70,6 @@ export default class FolderItem extends Mixins(ResourceMixin) {
   usernameWithDomain = usernameWithDomain;
 
   async onChange(evt: ChangeEvent<IResource>): Promise<Route | undefined> {
-    console.log("into folder item");
-    console.log(evt);
     if (evt.added && evt.added.element) {
       const movedResource = evt.added.element as IResource;
       const updatedResource = await this.moveResource(movedResource);

js/src/components/Resource/ResourceItem.vue

@@ -29,7 +29,7 @@
       class="actions"
       v-if="!inline"
       @delete="$emit('delete', resource.id)"
-      @move="$emit('move', resource.id)"
+      @move="$emit('move', resource)"
       @rename="$emit('rename', resource)"
     />
   </div>

js/src/components/Resource/ResourceSelector.vue

@@ -0,0 +1,129 @@
+<template>
+  <div v-if="resource">
+    <article class="panel is-primary">
+      <p class="panel-heading">
+        {{ $t('Move "{resourceName}"', { resourceName: initialResource.title }) }}
+      </p>
+      <a class="panel-block clickable" @click="resource = resource.parent" v-if="resource.parent">
+        <span class="panel-icon">
+          <b-icon icon="chevron-up" size="is-small" />
+        </span>
+        {{ $t("Parent folder") }}
+      </a>
+      <a
+        class="panel-block clickable"
+        @click="resource = { path: '/', username }"
+        v-else-if="resource.path.length > 1"
+      >
+        <span class="panel-icon">
+          <b-icon icon="chevron-up" size="is-small" />
+        </span>
+        {{ $t("Parent folder") }}
+      </a>
+      <a
+        class="panel-block"
+        v-for="element in resource.children.elements"
+        :class="{ clickable: element.type === 'folder' && element.id !== initialResource.id }"
+        :key="element.id"
+        @click="goDown(element)"
+      >
+        <span class="panel-icon">
+          <b-icon icon="folder" size="is-small" v-if="element.type === 'folder'" />
+          <b-icon icon="link" size="is-small" v-else />
+        </span>
+        {{ element.title }}
+        <span v-if="element.id === initialResource.id">
+          <em v-if="element.type === 'folder'"> {{ $t("(this folder)") }}</em>
+          <em v-else> {{ $t("(this link)") }}</em>
+        </span>
+      </a>
+      <p
+        class="panel-block content has-text-grey has-text-centered"
+        v-if="resource.children.total === 0"
+      >
+        {{ $t("No resources in this folder") }}
+      </p>
+    </article>
+    <b-button type="is-primary" @click="updateResource" :disabled="moveDisabled">{{
+      $t("Move resource to {folder}", { folder: resource.title })
+    }}</b-button>
+    <b-button type="is-text" @click="$emit('closeMoveModal')">{{ $t("Cancel") }}</b-button>
+  </div>
+</template>
+<script lang="ts">
+import { Component, Vue, Prop } from "vue-property-decorator";
+import { GET_RESOURCE } from "../../graphql/resources";
+import { IResource } from "../../types/resource";
+
+@Component({
+  apollo: {
+    resource: {
+      query: GET_RESOURCE,
+      variables() {
+        if (this.resource && this.resource.path) {
+          return {
+            path: this.resource.path,
+            username: this.username,
+          };
+        }
+        return { path: "/", username: this.username };
+      },
+      skip() {
+        return !this.username;
+      },
+    },
+  },
+})
+export default class ResourceSelector extends Vue {
+  @Prop({ required: true }) initialResource!: IResource;
+  @Prop({ required: true }) username!: string;
+
+  resource: IResource | undefined = this.initialResource.parent;
+
+  goDown(element: IResource) {
+    if (element.type === "folder" && element.id !== this.initialResource.id) {
+      this.resource = element;
+    }
+  }
+
+  updateResource() {
+    this.$emit(
+      "updateResource",
+      {
+        id: this.initialResource.id,
+        title: this.initialResource.title,
+        parent: this.resource && this.resource.path === "/" ? null : this.resource,
+        path: this.initialResource.path,
+      },
+      this.initialResource.parent
+    );
+  }
+
+  get moveDisabled() {
+    return (
+      (this.initialResource.parent &&
+        this.resource &&
+        this.initialResource.parent.path === this.resource.path) ||
+      (this.initialResource.parent == undefined && this.resource && this.resource.path === "/")
+    );
+  }
+}
+</script>
+<style lang="scss" scoped>
+@import "../../variables.scss";
+
+.panel {
+  a.panel-block {
+    cursor: default;
+
+    &.clickable {
+      cursor: pointer;
+    }
+  }
+
+  &.is-primary .panel-heading {
+    background: $primary;
+    color: #fff;
+  }
+}
+</style>