2020-06-25 18:47:17 +02:00
|
|
|
<template>
|
|
|
|
<div v-if="resource">
|
2022-11-03 12:10:59 +01:00
|
|
|
<article class="">
|
|
|
|
<h2 class="mb-2">
|
2020-11-30 10:24:11 +01:00
|
|
|
{{
|
2022-11-03 12:10:59 +01:00
|
|
|
t('Move "{resourceName}"', { resourceName: initialResource.title })
|
2020-11-30 10:24:11 +01:00
|
|
|
}}
|
2022-07-12 10:55:28 +02:00
|
|
|
</h2>
|
2020-11-30 10:24:11 +01:00
|
|
|
<a
|
2022-11-03 12:10:59 +01:00
|
|
|
class="cursor-pointer flex gap-1 items-center border p-2"
|
|
|
|
@click="goUp()"
|
2020-11-30 10:24:11 +01:00
|
|
|
v-if="resource.parent"
|
|
|
|
>
|
2022-11-03 12:10:59 +01:00
|
|
|
<ChevronUp :size="16" />
|
|
|
|
{{ t("Parent folder") }}
|
2020-06-25 18:47:17 +02:00
|
|
|
</a>
|
|
|
|
<a
|
2022-11-03 12:10:59 +01:00
|
|
|
class="cursor-pointer flex gap-1 items-center border p-2"
|
2022-07-12 10:55:28 +02:00
|
|
|
@click="resourcePath.path = '/'"
|
|
|
|
v-else-if="resourcePath?.path && resourcePath?.path.length > 1"
|
2020-06-25 18:47:17 +02:00
|
|
|
>
|
2022-11-03 12:10:59 +01:00
|
|
|
<ChevronUp :size="16" />
|
|
|
|
{{ t("Parent folder") }}
|
2020-06-25 18:47:17 +02:00
|
|
|
</a>
|
2021-02-24 19:06:48 +01:00
|
|
|
<template v-if="resource.children">
|
|
|
|
<a
|
2022-11-03 12:10:59 +01:00
|
|
|
class="cursor-pointer flex flex-wrap gap-1 p-2 border"
|
2021-02-24 19:06:48 +01:00
|
|
|
v-for="element in resource.children.elements"
|
|
|
|
:class="{
|
|
|
|
clickable:
|
|
|
|
element.type === 'folder' && element.id !== initialResource.id,
|
|
|
|
}"
|
|
|
|
:key="element.id"
|
|
|
|
@click="goDown(element)"
|
|
|
|
>
|
2022-07-12 10:55:28 +02:00
|
|
|
<p class="truncate flex gap-1 items-center">
|
2022-11-03 12:10:59 +01:00
|
|
|
<Folder :size="16" v-if="element.type === 'folder'" />
|
|
|
|
<Link :size="16" v-else />
|
2022-03-31 10:41:38 +02:00
|
|
|
<span>{{ element.title }}</span>
|
|
|
|
</p>
|
2021-02-24 19:06:48 +01:00
|
|
|
<span v-if="element.id === initialResource.id">
|
2022-11-03 12:10:59 +01:00
|
|
|
<em v-if="element.type === 'folder'"> {{ t("(this folder)") }}</em>
|
|
|
|
<em v-else> {{ t("(this link)") }}</em>
|
2021-02-24 19:06:48 +01:00
|
|
|
</span>
|
|
|
|
</a>
|
|
|
|
</template>
|
2022-11-03 12:10:59 +01:00
|
|
|
<p class="" v-if="resource.children && resource.children.total === 0">
|
|
|
|
{{ t("No resources in this folder") }}
|
2020-06-25 18:47:17 +02:00
|
|
|
</p>
|
2022-07-12 10:55:28 +02:00
|
|
|
<o-pagination
|
2021-08-20 17:13:04 +02:00
|
|
|
v-if="resource.children && resource.children.total > RESOURCES_PER_PAGE"
|
2021-06-14 15:40:30 +02:00
|
|
|
:total="resource.children.total"
|
|
|
|
v-model="page"
|
2022-07-12 10:55:28 +02:00
|
|
|
size="small"
|
2021-06-14 15:40:30 +02:00
|
|
|
:per-page="RESOURCES_PER_PAGE"
|
2022-11-03 12:10:59 +01:00
|
|
|
:aria-next-label="t('Next page')"
|
|
|
|
:aria-previous-label="t('Previous page')"
|
|
|
|
:aria-page-label="t('Page')"
|
|
|
|
:aria-current-label="t('Current page')"
|
2021-06-14 15:40:30 +02:00
|
|
|
/>
|
2020-06-25 18:47:17 +02:00
|
|
|
</article>
|
2022-07-12 10:55:28 +02:00
|
|
|
<div class="flex gap-2 mt-2">
|
2022-08-26 16:08:58 +02:00
|
|
|
<o-button variant="text" @click="emit('close-move-modal')">{{
|
2022-11-03 12:10:59 +01:00
|
|
|
t("Cancel")
|
2022-07-12 10:55:28 +02:00
|
|
|
}}</o-button>
|
|
|
|
<o-button
|
|
|
|
variant="primary"
|
2021-06-14 15:40:30 +02:00
|
|
|
@click="updateResource"
|
|
|
|
:disabled="moveDisabled"
|
|
|
|
><template v-if="resource.path === '/'">
|
2022-11-03 12:10:59 +01:00
|
|
|
{{ t("Move resource to the root folder") }}
|
2021-06-14 15:40:30 +02:00
|
|
|
</template>
|
|
|
|
<template v-else
|
2022-11-03 12:10:59 +01:00
|
|
|
>{{ t("Move resource to {folder}", { folder: resource.title }) }}
|
2022-07-12 10:55:28 +02:00
|
|
|
</template></o-button
|
2021-06-14 15:40:30 +02:00
|
|
|
>
|
|
|
|
</div>
|
2020-06-25 18:47:17 +02:00
|
|
|
</div>
|
|
|
|
</template>
|
2022-07-12 10:55:28 +02:00
|
|
|
<script lang="ts" setup>
|
|
|
|
import { useQuery } from "@vue/apollo-composable";
|
2022-11-03 12:10:59 +01:00
|
|
|
import { computed, reactive, ref, watch } from "vue";
|
2020-06-25 18:47:17 +02:00
|
|
|
import { GET_RESOURCE } from "../../graphql/resources";
|
|
|
|
import { IResource } from "../../types/resource";
|
2022-07-12 10:55:28 +02:00
|
|
|
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";
|
2022-11-03 12:10:59 +01:00
|
|
|
import { useI18n } from "vue-i18n";
|
2020-06-25 18:47:17 +02:00
|
|
|
|
2022-07-12 10:55:28 +02:00
|
|
|
const props = defineProps<{ initialResource: IResource; username: string }>();
|
|
|
|
const emit = defineEmits(["update-resource", "close-move-modal"]);
|
2020-06-25 18:47:17 +02:00
|
|
|
|
2022-11-03 12:10:59 +01:00
|
|
|
const { t } = useI18n({ useScope: "global" });
|
|
|
|
|
|
|
|
const resourcePath = reactive<{
|
|
|
|
path: string | undefined;
|
|
|
|
username: string;
|
|
|
|
id: string | undefined;
|
|
|
|
}>({
|
|
|
|
id: props.initialResource.parent?.id,
|
|
|
|
path: props.initialResource.parent?.path,
|
2022-07-12 10:55:28 +02:00
|
|
|
username: props.username,
|
|
|
|
});
|
2020-06-25 18:47:17 +02:00
|
|
|
|
2022-07-12 10:55:28 +02:00
|
|
|
const RESOURCES_PER_PAGE = 10;
|
|
|
|
const page = ref(1);
|
2021-06-14 15:40:30 +02:00
|
|
|
|
2022-07-12 10:55:28 +02:00
|
|
|
const { result: resourceResult, refetch } = useQuery<{ resource: IResource }>(
|
|
|
|
GET_RESOURCE,
|
|
|
|
() => {
|
2022-11-03 12:10:59 +01:00
|
|
|
if (resourcePath?.path) {
|
2022-07-12 10:55:28 +02:00
|
|
|
return {
|
2022-11-03 12:10:59 +01:00
|
|
|
path: resourcePath?.path,
|
2022-07-12 10:55:28 +02:00
|
|
|
username: props.username,
|
|
|
|
page: page.value,
|
|
|
|
limit: RESOURCES_PER_PAGE,
|
|
|
|
};
|
2020-06-25 18:47:17 +02:00
|
|
|
}
|
2022-07-12 10:55:28 +02:00
|
|
|
return { path: "/", username: props.username };
|
2020-06-25 18:47:17 +02:00
|
|
|
}
|
2022-07-12 10:55:28 +02:00
|
|
|
);
|
2020-06-25 18:47:17 +02:00
|
|
|
|
2022-07-12 10:55:28 +02:00
|
|
|
const resource = computed(() => resourceResult.value?.resource);
|
2022-03-31 10:41:38 +02:00
|
|
|
|
2022-07-12 10:55:28 +02:00
|
|
|
const goDown = (element: IResource): void => {
|
|
|
|
if (element.type === "folder" && element.id !== props.initialResource.id) {
|
2022-11-03 12:10:59 +01:00
|
|
|
resourcePath.id = element.id;
|
|
|
|
resourcePath.path = element.path;
|
|
|
|
console.debug("Gone into folder", resourcePath);
|
2022-03-31 10:41:38 +02:00
|
|
|
}
|
2022-07-12 10:55:28 +02:00
|
|
|
};
|
2022-03-31 10:41:38 +02:00
|
|
|
|
2022-07-12 10:55:28 +02:00
|
|
|
watch(props.initialResource, () => {
|
|
|
|
if (props.initialResource) {
|
2022-11-03 12:10:59 +01:00
|
|
|
resourcePath.id = props.initialResource?.parent?.id;
|
|
|
|
resourcePath.path = props.initialResource?.parent?.path;
|
2022-07-12 10:55:28 +02:00
|
|
|
refetch();
|
2020-06-25 18:47:17 +02:00
|
|
|
}
|
2022-07-12 10:55:28 +02:00
|
|
|
});
|
2020-06-25 18:47:17 +02:00
|
|
|
|
2022-07-12 10:55:28 +02:00
|
|
|
const updateResource = (): void => {
|
2022-11-03 12:10:59 +01:00
|
|
|
console.debug("Emitting updateResource from folder", resourcePath);
|
|
|
|
const parent = resourcePath?.path === "/" ? null : resourcePath;
|
2022-07-12 10:55:28 +02:00
|
|
|
emit(
|
|
|
|
"update-resource",
|
|
|
|
{
|
|
|
|
id: props.initialResource.id,
|
|
|
|
title: props.initialResource.title,
|
2022-11-03 12:10:59 +01:00
|
|
|
parent: parent,
|
|
|
|
path: parent?.path ?? "/",
|
2022-07-12 10:55:28 +02:00
|
|
|
},
|
|
|
|
props.initialResource.parent
|
|
|
|
);
|
|
|
|
};
|
|
|
|
|
|
|
|
const moveDisabled = computed((): boolean | undefined => {
|
|
|
|
return (
|
|
|
|
(props.initialResource.parent &&
|
2022-11-03 12:10:59 +01:00
|
|
|
resourcePath &&
|
|
|
|
props.initialResource.parent.path === resourcePath.path) ||
|
2022-07-12 10:55:28 +02:00
|
|
|
(props.initialResource.parent === undefined &&
|
2022-11-03 12:10:59 +01:00
|
|
|
resourcePath &&
|
|
|
|
resourcePath.path === "/")
|
2022-07-12 10:55:28 +02:00
|
|
|
);
|
|
|
|
});
|
2022-11-03 12:10:59 +01:00
|
|
|
|
|
|
|
const goUp = () => {
|
|
|
|
resourcePath.id = resource.value?.parent?.id;
|
|
|
|
resourcePath.path = resource.value?.parent?.path;
|
|
|
|
};
|
2020-06-25 18:47:17 +02:00
|
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
|
|
.panel {
|
|
|
|
a.panel-block {
|
|
|
|
cursor: default;
|
|
|
|
|
|
|
|
&.clickable {
|
|
|
|
cursor: pointer;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
&.is-primary .panel-heading {
|
|
|
|
color: #fff;
|
|
|
|
}
|
|
|
|
}
|
2021-06-14 15:40:30 +02:00
|
|
|
.buttons {
|
|
|
|
justify-content: flex-end;
|
|
|
|
}
|
|
|
|
|
|
|
|
nav.pagination {
|
|
|
|
margin: 0.5rem;
|
|
|
|
}
|
2020-06-25 18:47:17 +02:00
|
|
|
</style>
|