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

Allow to properly move group resources

Browse Source 
Signed-off-by: Thomas Citharel <tcit@tcit.fr>
This commit is contained in:
Thomas Citharel 2020-06-25 18:47:17 +02:00
parent 3f23d6b2a9
commit 50bf4985b1
10 changed files with 298 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

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

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

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

13
js/src/graphql/resources.ts
View File

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

9
js/src/i18n/en_US.json
View File

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

9
js/src/i18n/fr_FR.json
View File

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

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

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

14
lib/graphql/schema.ex
View File

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

5
lib/graphql/schema/resource.ex
View File

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

13
lib/service/rich_media/parsers/ogp.ex
View File

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