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>

js/src/graphql/resources.ts

@@ -18,6 +18,7 @@ export const GET_RESOURCE = gql`
       summary
       url
       path
+      type
       metadata {
         ...ResourceMetadataBasicFields
         authorName
@@ -28,6 +29,8 @@ export const GET_RESOURCE = gql`
       }
       parent {
         id
+        path
+        type
       }
       actor {
         id
@@ -44,6 +47,11 @@ export const GET_RESOURCE = gql`
           type
           path
           resourceUrl
+          parent {
+            id
+            path
+            type
+          }
           metadata {
             ...ResourceMetadataBasicFields
           }
@@ -112,7 +120,12 @@ export const UPDATE_RESOURCE = gql`
       summary
       url
       path
+      type
       resourceUrl
+      parent {
+        id
+        path
+      }
     }
   }
 `;

js/src/i18n/en_US.json

@@ -696,5 +696,12 @@
   "Can be an email or a link, or just plain text.": "Can be an email or a link, or just plain text.",
   "No profiles found": "No profiles found",
   "URL copied to clipboard": "URL copied to clipboard",
-  "Report #{reportNumber}": "Report #{reportNumber}"
+  "Report #{reportNumber}": "Report #{reportNumber}",
+  "Move \"{resourceName}\"": "Move \"{resourceName}\"",
+  "Parent folder": "Parent folder",
+  "(this folder)": "(this folder)",
+  "(this link)": "(this link)",
+  "Move resource to {folder}": "Move resource to {folder}",
+  "Create a folder": "Create a folder",
+  "No resources in this folder": "No resources in this folder"
 }

js/src/i18n/fr_FR.json

@@ -696,5 +696,12 @@
   "contact uninformed": "contact non renseigné",
   "Can be an email or a link, or just plain text.": "Peut être une adresse email ou bien un lien, ou alors du simple texte brut.",
   "URL copied to clipboard": "URL copiée dans le presse-papiers",
-  "Report #{reportNumber}": "Signalement #{reportNumber}"
+  "Report #{reportNumber}": "Signalement #{reportNumber}",
+  "Move \"{resourceName}\"": "Déplacer « {resourceName} »",
+  "Parent folder": "Dossier parent",
+  "(this folder)": "(ce dossier)",
+  "(this link)": "(ce lien)",
+  "Move resource to {folder}": "Déplacer la ressource dans {folder}",
+  "Create a folder": "Créer un dossier",
+  "No resources in this folder": "Aucune ressource dans ce dossier"
 }

js/src/views/Resources/ResourceFolder.vue

@@ -66,7 +66,7 @@
     <section>
       <div class="list-header">
         <div class="list-header-right">
-          <b-checkbox v-model="checkedAll" />
+          <b-checkbox v-model="checkedAll" v-if="resource.children.total > 0" />
           <div class="actions" v-if="validCheckedResources.length > 0">
             <small>
               {{
@@ -85,7 +85,12 @@
           </div>
         </div>
       </div>
-      <draggable v-model="resource.children.elements" :sort="false" :group="groupObject">
+      <draggable
+        v-model="resource.children.elements"
+        :sort="false"
+        :group="groupObject"
+        v-if="resource.children.total > 0"
+      >
         <transition-group>
           <div v-for="localResource in resource.children.elements" :key="localResource.id">
             <div class="resource-item">
@@ -100,18 +105,22 @@
                 v-if="localResource.type !== 'folder'"
                 @delete="deleteResource"
                 @rename="handleRename"
+                @move="handleMove"
               />
               <folder-item
                 :resource="localResource"
                 :group="resource.actor"
                 @delete="deleteResource"
-                @rename="handleRename"
+                @move="handleMove"
                 v-else
               />
             </div>
           </div>
         </transition-group>
       </draggable>
+      <div class="content has-text-centered has-text-grey">
+        <p>{{ $t("No resources in this folder") }}</p>
+      </div>
     </section>
     <b-modal :active.sync="renameModal" has-modal-card>
       <div class="modal-card">
@@ -126,6 +135,18 @@
         </section>
       </div>
     </b-modal>
+    <b-modal :active.sync="moveModal" has-modal-card>
+      <div class="modal-card">
+        <section class="modal-card-body">
+          <resource-selector
+            :initialResource="updatedResource"
+            :username="resource.actor.preferredUsername"
+            @updateResource="moveResource"
+            @closeMoveModal="moveModal = false"
+          />
+        </section>
+      </div>
+    </b-modal>
     <b-modal :active.sync="createResourceModal" has-modal-card>
       <div class="modal-card">
         <section class="modal-card-body">
@@ -190,9 +211,10 @@ import {
 import { CONFIG } from "../../graphql/config";
 import { IConfig } from "../../types/config.model";
 import ResourceMixin from "../../mixins/resource";
+import ResourceSelector from "../../components/Resource/ResourceSelector.vue";
 
 @Component({
-  components: { FolderItem, ResourceItem, Draggable },
+  components: { FolderItem, ResourceItem, Draggable, ResourceSelector },
   apollo: {
     resource: {
       query: GET_RESOURCE,
@@ -253,6 +275,8 @@ export default class Resources extends Mixins(ResourceMixin) {
 
   createLinkResourceModal = false;
 
+  moveModal = false;
+
   renameModal = false;
 
   groupObject: object = {
@@ -332,6 +356,8 @@ export default class Resources extends Mixins(ResourceMixin) {
 
   createSentenceForType(type: string) {
     switch (type) {
+      case "folder":
+        return this.$t("Create a folder");
       case "pad":
         return this.$t("Create a pad");
       case "calc":
@@ -347,7 +373,6 @@ export default class Resources extends Mixins(ResourceMixin) {
   }
 
   createResourceFromProvider(provider: IProvider) {
-    console.log(provider);
     this.newResource.resourceUrl = this.generateFullResourceUrl(provider);
     this.newResource.type = provider.software;
     this.createResourceModal = true;
@@ -445,24 +470,100 @@ export default class Resources extends Mixins(ResourceMixin) {
 
   handleRename(resource: IResource) {
     this.renameModal = true;
-    this.updatedResource = resource;
+    this.updatedResource = Object.assign({}, resource);
+  }
+
+  handleMove(resource: IResource) {
+    this.moveModal = true;
+    this.updatedResource = Object.assign({}, resource);
+  }
+
+  async moveResource(resource: IResource, oldParent: IResource | undefined) {
+    const parentPath = oldParent && oldParent.path ? oldParent.path || "/" : "/";
+    await this.updateResource(resource, parentPath);
+    this.moveModal = false;
   }
 
   async renameResource() {
     await this.updateResource(this.updatedResource);
+    this.renameModal = false;
   }
 
-  async updateResource(resource: IResource) {
+  async updateResource(resource: IResource, parentPath: string | null = null) {
     try {
-      if (!resource.parent) return;
       await this.$apollo.mutate<{ updateResource: IResource }>({
         mutation: UPDATE_RESOURCE,
         variables: {
           id: resource.id,
           title: resource.title,
-          parentId: resource.parent.id,
+          parentId: resource.parent ? resource.parent.id : null,
           path: resource.path,
         },
+        update: (store, { data }) => {
+          if (!data || data.updateResource == null || parentPath == null) return;
+          if (!this.resource.actor) return;
+
+          console.log("Removing ressource from old parent");
+          const oldParentCachedData = store.readQuery<{ resource: IResource }>({
+            query: GET_RESOURCE,
+            variables: {
+              path: parentPath,
+              username: this.resource.actor.preferredUsername,
+            },
+          });
+          if (oldParentCachedData == null) return;
+          const { resource: oldParentCachedResource } = oldParentCachedData;
+          if (oldParentCachedResource == null) {
+            console.error("Cannot update resource cache, because of null value.");
+            return;
+          }
+          const resource: IResource = data.updateResource;
+
+          oldParentCachedResource.children.elements = oldParentCachedResource.children.elements.filter(
+            (cachedResource) => cachedResource.id !== resource.id
+          );
+
+          store.writeQuery({
+            query: GET_RESOURCE,
+            variables: {
+              path: parentPath,
+              username: this.resource.actor.preferredUsername,
+            },
+            data: { oldParentCachedResource },
+          });
+          console.log("Finished removing ressource from old parent");
+
+          console.log("Adding resource to new parent");
+          if (!resource.parent || !resource.parent.path) {
+            console.log("No cache found for new parent");
+            return;
+          }
+          const newParentCachedData = store.readQuery<{ resource: IResource }>({
+            query: GET_RESOURCE,
+            variables: {
+              path: resource.parent.path,
+              username: this.resource.actor.preferredUsername,
+            },
+          });
+          if (newParentCachedData == null) return;
+          const { resource: newParentCachedResource } = newParentCachedData;
+          if (newParentCachedResource == null) {
+            console.error("Cannot update resource cache, because of null value.");
+            return;
+          }
+
+          newParentCachedResource.children.elements.push(resource);
+
+          store.writeQuery({
+            query: GET_RESOURCE,
+            variables: {
+              path: resource.parent.path,
+              username: this.resource.actor.preferredUsername,
+            },
+            data: { newParentCachedResource },
+          });
+          console.log("Finished adding resource to new parent");
+        },
       });
     } catch (e) {
       console.error(e);

lib/graphql/schema.ex

@@ -5,7 +5,18 @@ defmodule Mobilizon.GraphQL.Schema do
 
   use Absinthe.Schema
 
-  alias Mobilizon.{Actors, Addresses, Conversations, Events, Media, Reports, Todos, Users}
+  alias Mobilizon.{
+    Actors,
+    Addresses,
+    Conversations,
+    Events,
+    Media,
+    Reports,
+    Resources,
+    Todos,
+    Users
+  }
+
   alias Mobilizon.Actors.{Actor, Follower, Member}
   alias Mobilizon.Conversations.Comment
   alias Mobilizon.Events.{Event, Participant}
@@ -109,6 +120,7 @@ defmodule Mobilizon.GraphQL.Schema do
       |> Dataloader.add_source(Addresses, default_source)
       |> Dataloader.add_source(Media, default_source)
       |> Dataloader.add_source(Reports, default_source)
+      |> Dataloader.add_source(Resources, default_source)
       |> Dataloader.add_source(Todos, default_source)
 
     Map.put(ctx, :loader, loader)

lib/graphql/schema/resource.ex

@@ -4,6 +4,8 @@ defmodule Mobilizon.GraphQL.Schema.ResourceType do
   """
   use Absinthe.Schema.Notation
   alias Mobilizon.GraphQL.Resolvers.Resource
+  alias Mobilizon.Resources
+  import Absinthe.Resolution.Helpers, only: [dataloader: 1]
 
   @desc "A resource"
   object :resource do
@@ -19,7 +21,8 @@ defmodule Mobilizon.GraphQL.Schema.ResourceType do
     field(:updated_at, :naive_datetime, description: "The resource's last update date")
     field(:type, :string, description: "The resource's type (if it's a folder)")
     field(:path, :string, description: "The resource's path")
-    field(:parent, :resource, description: "The resource's parent")
+
+    field(:parent, :resource, description: "The resource's parent", resolve: dataloader(Resources))
 
     field :children, :paginated_resource_list do
       description("Children resources in folder")

lib/service/rich_media/parsers/ogp.ex

@@ -30,7 +30,16 @@ defmodule Mobilizon.Service.RichMedia.Parsers.OGP do
   defp transform_tags(data) do
     data
     |> Map.put(:image_remote_url, Map.get(data, :image))
-    |> Map.put(:width, Map.get(data, :"image:width"))
+    |> Map.put(:width, get_integer_value(data, :"image:width"))
-    |> Map.put(:height, Map.get(data, :"image:height"))
+    |> Map.put(:height, get_integer_value(data, :"image:height"))
+  end
+
+  defp get_integer_value(data, key) do
+    with value <- Map.get(data, key),
+         {value, ""} <- Integer.parse(value) do
+      value
+    else
+      _ -> nil
+    end
   end
 end