Merge branch 'resource-pagination' into 'master'

Add pagination to resources

Closes #727

See merge request framasoft/mobilizon!939

js/src/components/Resource/FolderItem.vue

@@ -162,7 +162,7 @@ a {
   }
 
   .body {
-    padding: 10px 8px 8px;
+    padding: 8px;
     flex: 1 1 auto;
     overflow: hidden;
 

js/src/components/Resource/ResourceItem.vue

@@ -20,21 +20,30 @@
         </div>
       </div>
       <div class="body">
+        <div class="title-wrapper">
           <img
             class="favicon"
             v-if="resource.metadata && resource.metadata.faviconUrl"
             :src="resource.metadata.faviconUrl"
           />
           <h3>{{ resource.title }}</h3>
-        <span class="host" v-if="inline">{{
+        </div>
-          resource.updatedAt | formatDateTimeString
+        <div class="metadata-wrapper">
-        }}</span>
+          <span class="host" v-if="!inline || preview">{{ urlHostname }}</span>
-        <span class="host" v-else>{{ urlHostname }}</span>
+          <span
+            class="published-at is-hidden-mobile"
+            v-if="resource.updatedAt || resource.publishedAt"
+            >{{
+              (resource.updatedAt || resource.publishedAt)
+                | formatDateTimeString
+            }}</span
+          >
+        </div>
       </div>
     </a>
     <resource-dropdown
       class="actions"
-      v-if="!inline"
+      v-if="!inline || !preview"
       @delete="$emit('delete', resource.id)"
       @move="$emit('move', resource)"
       @rename="$emit('rename', resource)"
@@ -53,6 +62,7 @@ export default class ResourceItem extends Vue {
   @Prop({ required: true, type: Object }) resource!: IResource;
 
   @Prop({ required: false, default: false }) inline!: boolean;
+  @Prop({ required: false, default: false }) preview!: boolean;
 
   list = [];
 
@@ -74,11 +84,12 @@ export default class ResourceItem extends Vue {
   display: flex;
   flex: 1;
   align-items: center;
+  width: 100%;
 
   .actions {
     flex: 0;
     display: block;
-    margin: auto 1rem auto 2rem;
+    margin: auto 1rem;
     cursor: pointer;
   }
 }
@@ -111,10 +122,15 @@ a {
   }
 
   .body {
-    padding: 10px 8px 8px;
+    padding: 8px;
     flex: 1 1 auto;
     overflow: hidden;
 
+    .title-wrapper {
+      display: flex;
+      max-width: calc(100vw - 122px);
+    }
+
     img.favicon {
       display: inline-block;
       width: 16px;
@@ -134,14 +150,30 @@ a {
       vertical-align: middle;
     }
 
-    .host {
+    .metadata-wrapper {
-      display: block;
+      max-width: calc(100vw - 122px);
-      margin-top: 5px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      span {
+        &:last-child::before {
+          content: "⋅";
+          padding: 0 5px;
+        }
+        &:first-child::before {
+          content: "";
+          padding: initial;
+        }
+
+        &.host,
+        &.published-at {
           font-size: 13px;
           overflow: hidden;
           text-overflow: ellipsis;
           white-space: nowrap;
         }
       }
+    }
+  }
 }
 </style>

js/src/components/Resource/ResourceSelector.vue

@@ -58,18 +58,34 @@
       >
         {{ $t("No resources in this folder") }}
       </p>
+      <b-pagination
+        v-if="resource.children.total > RESOURCES_PER_PAGE"
+        :total="resource.children.total"
+        v-model="page"
+        size="is-small"
+        :per-page="RESOURCES_PER_PAGE"
+        :aria-next-label="$t('Next page')"
+        :aria-previous-label="$t('Previous page')"
+        :aria-page-label="$t('Page')"
+        :aria-current-label="$t('Current page')"
+      />
     </article>
+    <div class="buttons">
+      <b-button type="is-text" @click="$emit('close-move-modal')">{{
+        $t("Cancel")
+      }}</b-button>
       <b-button
         type="is-primary"
         @click="updateResource"
         :disabled="moveDisabled"
-      >{{
+        ><template v-if="resource.path === '/'">
-        $t("Move resource to {folder}", { folder: resource.title })
+          {{ $t("Move resource to the root folder") }}
-      }}</b-button
+        </template>
+        <template v-else
+          >{{ $t("Move resource to {folder}", { folder: resource.title }) }}
+        </template></b-button
       >
-    <b-button type="is-text" @click="$emit('close-move-modal')">{{
+    </div>
-      $t("Cancel")
-    }}</b-button>
   </div>
 </template>
 <script lang="ts">
@@ -86,6 +102,8 @@ import { IResource } from "../../types/resource";
           return {
             path: this.resource.path,
             username: this.username,
+            page: this.page,
+            limit: this.RESOURCES_PER_PAGE,
           };
         }
         return { path: "/", username: this.username };
@@ -103,6 +121,10 @@ export default class ResourceSelector extends Vue {
 
   resource: IResource | undefined = this.initialResource.parent;
 
+  RESOURCES_PER_PAGE = 10;
+
+  page = 1;
+
   goDown(element: IResource): void {
     if (element.type === "folder" && element.id !== this.initialResource.id) {
       this.resource = element;
@@ -150,4 +172,11 @@ export default class ResourceSelector extends Vue {
     color: #fff;
   }
 }
+.buttons {
+  justify-content: flex-end;
+}
+
+nav.pagination {
+  margin: 0.5rem;
+}
 </style>

js/src/graphql/resources.ts

@@ -11,7 +11,12 @@ export const RESOURCE_METADATA_BASIC_FIELDS_FRAGMENT = gql`
 `;
 
 export const GET_RESOURCE = gql`
-  query GetResource($path: String!, $username: String!) {
+  query GetResource(
+    $path: String!
+    $username: String!
+    $page: Int
+    $limit: Int
+  ) {
     resource(path: $path, username: $username) {
       id
       title
@@ -38,7 +43,7 @@ export const GET_RESOURCE = gql`
         name
         domain
       }
-      children {
+      children(page: $page, limit: $limit) {
         total
         elements {
           id
@@ -53,6 +58,9 @@ export const GET_RESOURCE = gql`
             path
             type
           }
+          publishedAt
+          updatedAt
+          insertedAt
           metadata {
             ...ResourceMetadataBasicFields
           }

js/src/views/Event/Participants.vue

@@ -275,7 +275,7 @@ export default class Participants extends Vue {
   }
 
   set page(page: number) {
-    this.pushRouter(RouteName.RELAY_FOLLOWINGS, {
+    this.pushRouter(RouteName.PARTICIPATIONS, {
       page: page.toString(),
     });
   }

js/src/views/Resources/ResourceFolder.vue

@@ -145,6 +145,17 @@
         <p>{{ $t("No resources in this folder") }}</p>
       </div>
     </section>
+    <b-pagination
+      v-if="resource.children.total > RESOURCES_PER_PAGE"
+      :total="resource.children.total"
+      v-model="page"
+      :per-page="RESOURCES_PER_PAGE"
+      :aria-next-label="$t('Next page')"
+      :aria-previous-label="$t('Previous page')"
+      :aria-page-label="$t('Page')"
+      :aria-current-label="$t('Current page')"
+    >
+    </b-pagination>
     <b-modal :active.sync="renameModal" has-modal-card>
       <div class="modal-card">
         <section class="modal-card-body">
@@ -187,7 +198,11 @@
         </section>
       </div>
     </b-modal>
-    <b-modal :active.sync="createLinkResourceModal" has-modal-card>
+    <b-modal
+      :active.sync="createLinkResourceModal"
+      has-modal-card
+      class="link-resource-modal"
+    >
       <div class="modal-card">
         <section class="modal-card-body">
           <b-message type="is-danger" v-if="modalError">
@@ -204,7 +219,7 @@
             </b-field>
 
             <div class="new-resource-preview" v-if="newResource.title">
-              <resource-item :resource="newResource" />
+              <resource-item :resource="newResource" :preview="true" />
             </div>
 
             <b-field :label="$t('Title')">
@@ -250,6 +265,8 @@ import { IConfig } from "../../types/config.model";
 import ResourceMixin from "../../mixins/resource";
 import ResourceSelector from "../../components/Resource/ResourceSelector.vue";
 import { ApolloCache, FetchResult } from "@apollo/client/core";
+import VueRouter from "vue-router";
+const { isNavigationFailure, NavigationFailureType } = VueRouter;
 
 @Component({
   components: { FolderItem, ResourceItem, Draggable, ResourceSelector },
@@ -265,6 +282,8 @@ import { ApolloCache, FetchResult } from "@apollo/client/core";
         return {
           path,
           username: this.$route.params.preferredUsername,
+          page: this.page,
+          limit: this.RESOURCES_PER_PAGE,
         };
       },
       error({ graphQLErrors }) {
@@ -303,6 +322,8 @@ export default class Resources extends Mixins(ResourceMixin) {
 
   usernameWithDomain = usernameWithDomain;
 
+  RESOURCES_PER_PAGE = 10;
+
   newResource: IResource = {
     title: "",
     summary: "",
@@ -344,6 +365,16 @@ export default class Resources extends Mixins(ResourceMixin) {
 
   mapServiceTypeToIcon = mapServiceTypeToIcon;
 
+  get page(): number {
+    return parseInt((this.$route.query.page as string) || "1", 10);
+  }
+
+  set page(page: number) {
+    this.pushRouter({
+      page: page.toString(),
+    });
+  }
+
   get actualPath(): string {
     const path = Array.isArray(this.$route.params.path)
       ? this.$route.params.path.join("/")
@@ -641,16 +672,51 @@ export default class Resources extends Mixins(ResourceMixin) {
     }
   }
 
+  @Watch("page")
+  loadMoreResources(): void {
+    this.$apollo.queries.resource.fetchMore({
+      // New variables
+      variables: {
+        page: this.page,
+        limit: this.RESOURCES_PER_PAGE,
+      },
+    });
+  }
+
   handleErrors(errors: any[]): void {
     if (errors.some((error) => error.status_code === 404)) {
       this.$router.replace({ name: RouteName.PAGE_NOT_FOUND });
     }
   }
+
+  async pushRouter(args: Record<string, string>): Promise<void> {
+    try {
+      const path = this.filteredPath.toString();
+      const routeName =
+        path === ""
+          ? RouteName.RESOURCE_FOLDER_ROOT
+          : RouteName.RESOURCE_FOLDER;
+
+      await this.$router.push({
+        name: routeName,
+        params: { path },
+        query: { ...this.$route.query, ...args },
+      });
+    } catch (e) {
+      if (isNavigationFailure(e, NavigationFailureType.redirected)) {
+        throw Error(e.toString());
+      }
+    }
+  }
 }
 </script>
 <style lang="scss" scoped>
 .container.section {
   background: $white;
+
+  & > nav.pagination {
+    margin-top: 1rem;
+  }
 }
 
 nav.breadcrumb ul {
@@ -675,6 +741,10 @@ nav.breadcrumb ul {
     display: flex;
     align-items: center;
 
+    ::v-deep .b-checkbox.checkbox {
+      margin-left: 10px;
+    }
+
     .actions {
       margin-right: 5px;
 
@@ -693,11 +763,16 @@ nav.breadcrumb ul {
   border-radius: 4px;
   color: #444b5d;
   margin-top: 14px;
+  margin-bottom: 14px;
 
   .resource-checkbox {
     align-self: center;
-    padding: 0 3px 0 10px;
+    padding-left: 10px;
     opacity: 0.3;
+
+    ::v-deep .b-checkbox.checkbox {
+      margin-right: 0.25rem;
+    }
   }
 
   &:hover .resource-checkbox,

lib/graphql/resolvers/resource.ex

@@ -50,7 +50,7 @@ defmodule Mobilizon.GraphQL.Resolvers.Resource do
 
   def find_resources_for_parent(
         %Resource{actor_id: group_id} = parent,
-        _args,
+        %{page: page, limit: limit},
         %{
           context: %{
             current_user: %User{} = user
@@ -59,7 +59,7 @@ defmodule Mobilizon.GraphQL.Resolvers.Resource do
       ) do
     with %Actor{id: actor_id} <- Users.get_actor_for_user(user),
          {:member, true} <- {:member, Actors.is_member?(actor_id, group_id)},
-         %Page{} = page <- Resources.get_resources_for_folder(parent) do
+         %Page{} = page <- Resources.get_resources_for_folder(parent, page, limit) do
       {:ok, page}
     end
   end

lib/graphql/schema/resource.ex

@@ -20,6 +20,7 @@ defmodule Mobilizon.GraphQL.Schema.ResourceType do
     field(:actor, :actor, description: "The resource's owner")
     field(:inserted_at, :naive_datetime, description: "The resource's creation date")
     field(:updated_at, :naive_datetime, description: "The resource's last update date")
+    field(:published_at, :naive_datetime, description: "The resource's publication date")
     field(:type, :string, description: "The resource's type (if it's a folder)")
     field(:path, :string, description: "The resource's path")
 
@@ -27,6 +28,14 @@ defmodule Mobilizon.GraphQL.Schema.ResourceType do
 
     field :children, :paginated_resource_list do
       description("Children resources in folder")
+
+      arg(:page, :integer,
+        default_value: 1,
+        description: "The page in the paginated resource list"
+      )
+
+      arg(:limit, :integer, default_value: 10, description: "The limit of resources per page")
+
       resolve(&Resource.find_resources_for_parent/3)
     end
   end

lib/mobilizon/resources/resources.ex

@@ -47,7 +47,7 @@ defmodule Mobilizon.Resources do
       ) do
     Resource
     |> where([r], r.actor_id == ^group_id and is_nil(r.parent_id))
-    |> order_by(asc: :type)
+    |> order_by(asc: :type, asc: :title)
     |> preload([r], [:actor, :creator])
     |> Page.build_page(page, limit)
   end
@@ -55,7 +55,7 @@ defmodule Mobilizon.Resources do
   def get_resources_for_folder(%Resource{id: resource_id}, page, limit) do
     Resource
     |> where([r], r.parent_id == ^resource_id)
-    |> order_by(asc: :type)
+    |> order_by(asc: :type, asc: :title)
     |> preload([r], [:actor, :creator])
     |> Page.build_page(page, limit)
   end