forked from potsda.mn/mobilizon
Allow to properly move group resources
Signed-off-by: Thomas Citharel <tcit@tcit.fr>
This commit is contained in:
parent
fa5483f081
commit
39c03301c9
|
@ -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);
|
||||
|
|
|
@ -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>
|
||||
|
|
129
js/src/components/Resource/ResourceSelector.vue
Normal file
129
js/src/components/Resource/ResourceSelector.vue
Normal file
|
@ -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>
|
|
@ -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
|
||||
}
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
|
|
@ -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"
|
||||
}
|
||||
|
|
|
@ -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"
|
||||
}
|
||||
|
|
|
@ -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);
|
||||
|
|
|
@ -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)
|
||||
|
|
|
@ -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")
|
||||
|
|
|
@ -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(:height, Map.get(data, :"image:height"))
|
||||
|> Map.put(:width, get_integer_value(data, :"image:width"))
|
||||
|> 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
|
||||
|
|
Loading…
Reference in a new issue