mobilizon/js/src/views/Resources/ResourceFolder.vue

<template>
  <div class="container section" v-if="resource">
    <nav class="breadcrumb" aria-label="breadcrumbs">
      <ul>
        <li>
          <router-link
            :to="{
              name: RouteName.GROUP,
              params: { preferredUsername: usernameWithDomain(resource.actor) },
            }"
            >{{ resource.actor.preferredUsername }}</router-link
          >
        </li>
        <li>
          <router-link
            :to="{
              name: RouteName.RESOURCE_FOLDER_ROOT,
              params: { preferredUsername: usernameWithDomain(resource.actor) },
            }"
            >{{ $t("Resources") }}</router-link
          >
        </li>
        <li
          v-if="resource.path !== '/'"
          :class="{ 'is-active': index + 1 === ResourceMixin.resourcePathArray(resource).length }"
          v-for="(pathFragment, index) in ResourceMixin.resourcePathArray(resource)"
          :key="pathFragment"
        >
          <router-link
            :to="{
              name: RouteName.RESOURCE_FOLDER,
              params: {
                path: ResourceMixin.resourcePathArray(resource).slice(0, index + 1),
                preferredUsername: usernameWithDomain(resource.actor),
              },
            }"
            >{{ pathFragment }}</router-link
          >
        </li>
        <li>
          <b-dropdown aria-role="list">
            <b-button class="button is-primary" slot="trigger">+</b-button>

            <b-dropdown-item aria-role="listitem" @click="createFolderModal">
              <b-icon icon="folder" />
              {{ $t("New folder") }}
            </b-dropdown-item>
            <b-dropdown-item aria-role="listitem" @click="createLinkResourceModal = true">
              <b-icon icon="link" />
              {{ $t("New link") }}
            </b-dropdown-item>
            <hr class="dropdown-divider" v-if="config.resourceProviders.length" />
            <b-dropdown-item
              aria-role="listitem"
              v-for="resourceProvider in config.resourceProviders"
              :key="resourceProvider.software"
              @click="createResourceFromProvider(resourceProvider)"
            >
              <b-icon :icon="mapServiceTypeToIcon[resourceProvider.software]" />
              {{ createSentenceForType(resourceProvider.software) }}
            </b-dropdown-item>
          </b-dropdown>
        </li>
      </ul>
    </nav>
    <section>
      <div class="list-header">
        <div class="list-header-right">
          <b-checkbox v-model="checkedAll" v-if="resource.children.total > 0" />
          <div class="actions" v-if="validCheckedResources.length > 0">
            <small>
              {{
                $tc("No resources selected", validCheckedResources.length, {
                  count: validCheckedResources.length,
                })
              }}
            </small>
            <b-button
              type="is-danger"
              icon-right="delete"
              size="is-small"
              @click="deleteMultipleResources"
              >{{ $t("Delete") }}</b-button
            >
          </div>
        </div>
      </div>
      <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">
              <div
                class="resource-checkbox"
                :class="{ checked: checkedResources[localResource.id] }"
              >
                <b-checkbox v-model="checkedResources[localResource.id]" />
              </div>
              <resource-item
                :resource="localResource"
                v-if="localResource.type !== 'folder'"
                @delete="deleteResource"
                @rename="handleRename"
                @move="handleMove"
              />
              <folder-item
                :resource="localResource"
                :group="resource.actor"
                @delete="deleteResource"
                @move="handleMove"
                v-else
              />
            </div>
          </div>
        </transition-group>
      </draggable>
      <div class="content has-text-centered has-text-grey" v-if="resource.children.total === 0">
        <p>{{ $t("No resources in this folder") }}</p>
      </div>
    </section>
    <b-modal :active.sync="renameModal" has-modal-card>
      <div class="modal-card">
        <section class="modal-card-body">
          <form @submit.prevent="renameResource">
            <b-field :label="$t('Title')">
              <b-input aria-required="true" v-model="updatedResource.title" />
            </b-field>

            <b-button native-type="submit">{{ $t("Rename resource") }}</b-button>
          </form>
        </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">
          <form @submit.prevent="createResource">
            <b-field :label="$t('Title')">
              <b-input aria-required="true" v-model="newResource.title" />
            </b-field>

            <b-button native-type="submit">{{ createResourceButtonLabel }}</b-button>
          </form>
        </section>
      </div>
    </b-modal>
    <b-modal :active.sync="createLinkResourceModal" has-modal-card>
      <div class="modal-card">
        <section class="modal-card-body">
          <form @submit.prevent="createResource">
            <b-field :label="$t('URL')">
              <b-input
                type="url"
                required
                v-model="newResource.resourceUrl"
                @blur="previewResource"
              />
            </b-field>

            <div class="new-resource-preview" v-if="newResource.title">
              <resource-item :resource="newResource" />
            </div>

            <b-field :label="$t('Title')">
              <b-input aria-required="true" v-model="newResource.title" />
            </b-field>

            <b-field :label="$t('Text')">
              <b-input type="textarea" v-model="newResource.summary" />
            </b-field>

            <b-button native-type="submit">{{ $t("Create resource") }}</b-button>
          </form>
        </section>
      </div>
    </b-modal>
  </div>
</template>
<script lang="ts">
import { Component, Mixins, Prop, Watch } from "vue-property-decorator";
import ResourceItem from "@/components/Resource/ResourceItem.vue";
import FolderItem from "@/components/Resource/FolderItem.vue";
import Draggable from "vuedraggable";
import { CURRENT_ACTOR_CLIENT } from "../../graphql/actor";
import { IActor, usernameWithDomain } from "../../types/actor";
import RouteName from "../../router/name";
import { IResource, mapServiceTypeToIcon, IProvider } from "../../types/resource";
import {
  CREATE_RESOURCE,
  DELETE_RESOURCE,
  PREVIEW_RESOURCE_LINK,
  GET_RESOURCE,
  UPDATE_RESOURCE,
} from "../../graphql/resources";
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, ResourceSelector },
  apollo: {
    resource: {
      query: GET_RESOURCE,
      fetchPolicy: "cache-and-network",
      variables() {
        let path = Array.isArray(this.$route.params.path)
          ? this.$route.params.path.join("/")
          : this.$route.params.path || this.path;
        path = path[0] !== "/" ? `/${path}` : path;
        return {
          path,
          username: this.$route.params.preferredUsername,
        };
      },
    },
    config: CONFIG,
    currentActor: CURRENT_ACTOR_CLIENT,
  },
})
export default class Resources extends Mixins(ResourceMixin) {
  @Prop({ required: true }) path!: string;

  resource!: IResource;

  config!: IConfig;

  currentActor!: IActor;

  RouteName = RouteName;

  ResourceMixin = ResourceMixin;

  usernameWithDomain = usernameWithDomain;

  newResource: IResource = {
    title: "",
    summary: "",
    resourceUrl: "",
    children: { elements: [], total: 0 },
    metadata: {},
    type: "link",
  };

  updatedResource: IResource = {
    title: "",
    resourceUrl: "",
    metadata: {},
    children: { elements: [], total: 0 },
    path: undefined,
  };

  checkedResources: { [key: string]: boolean } = {};

  validCheckedResources: string[] = [];

  checkedAll = false;

  createResourceModal = false;

  createLinkResourceModal = false;

  moveModal = false;

  renameModal = false;

  groupObject: object = {
    name: "resources",
    pull: "clone",
    put: true,
  };

  mapServiceTypeToIcon = mapServiceTypeToIcon;

  async createResource() {
    if (!this.resource.actor) return;
    try {
      const { data } = await this.$apollo.mutate({
        mutation: CREATE_RESOURCE,
        variables: {
          title: this.newResource.title,
          summary: this.newResource.summary,
          actorId: this.resource.actor.id,
          resourceUrl: this.newResource.resourceUrl,
          parentId:
            this.resource.id && this.resource.id.startsWith("root_") ? null : this.resource.id,
          type: this.newResource.type,
        },
        update: (store, { data: { createResource } }) => {
          if (createResource == null) return;
          if (!this.resource.actor) return;
          const cachedData = store.readQuery<{ resource: IResource }>({
            query: GET_RESOURCE,
            variables: {
              path: this.resource.path,
              username: this.resource.actor.preferredUsername,
            },
          });
          if (cachedData == null) return;
          const { resource } = cachedData;
          if (resource == null) {
            console.error("Cannot update resource cache, because of null value.");
            return;
          }
          const newResource: IResource = createResource;
          resource.children.elements = resource.children.elements.concat([newResource]);

          store.writeQuery({
            query: GET_RESOURCE,
            variables: {
              path: this.resource.path,
              username: this.resource.actor.preferredUsername,
            },
            data: { resource },
          });
        },
      });
      this.createLinkResourceModal = false;
      this.createResourceModal = false;
      this.newResource.title = "";
      this.newResource.summary = "";
      this.newResource.resourceUrl = "";
    } catch (err) {
      console.error(err);
    }
  }

  async previewResource() {
    if (this.newResource.resourceUrl === "") return;
    const { data } = await this.$apollo.mutate({
      mutation: PREVIEW_RESOURCE_LINK,
      variables: {
        resourceUrl: this.newResource.resourceUrl,
      },
    });
    this.newResource.title = data.previewResourceLink.title;
    this.newResource.summary = data.previewResourceLink.description;
    this.newResource.metadata = data.previewResourceLink;
    this.newResource.type = "link";
  }

  createSentenceForType(type: string) {
    switch (type) {
      case "folder":
        return this.$t("Create a folder");
      case "pad":
        return this.$t("Create a pad");
      case "calc":
        return this.$t("Create a calc");
      case "visio":
        return this.$t("Create a visioconference");
    }
  }

  createFolderModal() {
    this.newResource.type = "folder";
    this.createResourceModal = true;
  }

  createResourceFromProvider(provider: IProvider) {
    this.newResource.resourceUrl = this.generateFullResourceUrl(provider);
    this.newResource.type = provider.software;
    this.createResourceModal = true;
  }

  generateFullResourceUrl(provider: IProvider): string {
    const randomString = [...Array(10)]
      .map(() => Math.random().toString(36)[3])
      .join("")
      .replace(/(.|$)/g, (c) => c[!Math.round(Math.random()) ? "toString" : "toLowerCase"]());
    switch (provider.type) {
      case "ethercalc":
      case "etherpad":
      case "jitsi":
      default:
        return `${provider.endpoint}${randomString}`;
    }
  }

  get createResourceButtonLabel() {
    if (!this.newResource.type) return;
    return this.createSentenceForType(this.newResource.type);
  }

  @Watch("checkedAll")
  watchCheckedAll() {
    this.resource.children.elements.forEach(({ id }) => {
      if (!id) return;
      this.checkedResources[id] = this.checkedAll;
    });
  }

  @Watch("checkedResources", { deep: true })
  watchValidCheckedResources(): string[] {
    const validCheckedResources: string[] = [];
    for (const [key, value] of Object.entries(this.checkedResources)) {
      if (value) {
        validCheckedResources.push(key);
      }
    }
    return (this.validCheckedResources = validCheckedResources);
  }

  async deleteMultipleResources() {
    for (const resourceID of this.validCheckedResources) {
      await this.deleteResource(resourceID);
    }
  }

  async deleteResource(resourceID: string) {
    try {
      await this.$apollo.mutate({
        mutation: DELETE_RESOURCE,
        variables: {
          id: resourceID,
        },
        update: (store, { data: { deleteResource } }) => {
          if (deleteResource == null) return;
          if (!this.resource.actor) return;
          const cachedData = store.readQuery<{ resource: IResource }>({
            query: GET_RESOURCE,
            variables: {
              path: this.resource.path,
              username: this.resource.actor.preferredUsername,
            },
          });
          if (cachedData == null) return;
          const { resource } = cachedData;
          if (resource == null) {
            console.error("Cannot update resource cache, because of null value.");
            return;
          }
          const oldResource: IResource = deleteResource;

          resource.children.elements = resource.children.elements.filter(
            (resource) => resource.id !== oldResource.id
          );

          store.writeQuery({
            query: GET_RESOURCE,
            variables: {
              path: this.resource.path,
              username: this.resource.actor.preferredUsername,
            },
            data: { resource },
          });
        },
      });
      this.validCheckedResources = this.validCheckedResources.filter((id) => id !== resourceID);
      delete this.checkedResources[resourceID];
    } catch (e) {
      console.error(e);
    }
  }

  handleRename(resource: IResource) {
    this.renameModal = true;
    this.updatedResource = { ...resource };
  }

  handleMove(resource: IResource) {
    this.moveModal = true;
    this.updatedResource = { ...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, parentPath: string | null = null) {
    try {
      await this.$apollo.mutate<{ updateResource: IResource }>({
        mutation: UPDATE_RESOURCE,
        variables: {
          id: resource.id,
          title: resource.title,
          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);
    }
  }
}
</script>
<style lang="scss" scoped>
nav.breadcrumb ul {
  align-items: center;

  li:last-child .dropdown {
    margin-left: 5px;

    a {
      justify-content: left;
      color: inherit;
      padding: 0.375rem 1rem;
    }
  }
}

.list-header {
  display: flex;
  justify-content: space-between;

  .list-header-right {
    display: flex;
    align-items: center;

    .actions {
      margin-right: 5px;

      & > * {
        margin-left: 5px;
      }
    }
  }
}

.resource-item,
.new-resource-preview {
  display: flex;
  font-size: 14px;
  border: 1px solid #c0cdd9;
  border-radius: 4px;
  color: #444b5d;
  margin-top: 14px;

  .resource-checkbox {
    align-self: center;
    padding: 0 3px 0 10px;
    opacity: 0.3;
  }

  &:hover .resource-checkbox,
  .resource-checkbox.checked {
    opacity: 1;
  }
}
</style>