ResourceSelector.vue 4.78 KB
Newer Older
1
2
3
4
<template>
  <div v-if="resource">
    <article class="panel is-primary">
      <p class="panel-heading">
Thomas Citharel's avatar
Thomas Citharel committed
5
6
7
        {{
          $t('Move "{resourceName}"', { resourceName: initialResource.title })
        }}
8
      </p>
Thomas Citharel's avatar
Thomas Citharel committed
9
10
11
12
13
      <a
        class="panel-block clickable"
        @click="resource = resource.parent"
        v-if="resource.parent"
      >
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
        <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>
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
      <template v-if="resource.children">
        <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>
      </template>
55
56
      <p
        class="panel-block content has-text-grey has-text-centered"
57
        v-if="resource.children && resource.children.total === 0"
58
59
60
      >
        {{ $t("No resources in this folder") }}
      </p>
61
      <b-pagination
Thomas Citharel's avatar
Thomas Citharel committed
62
        v-if="resource.children && resource.children.total > RESOURCES_PER_PAGE"
63
64
65
66
67
68
69
70
71
        :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')"
      />
72
    </article>
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
    <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 the root folder") }}
        </template>
        <template v-else
          >{{ $t("Move resource to {folder}", { folder: resource.title }) }}
        </template></b-button
      >
    </div>
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
  </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,
105
106
            page: this.page,
            limit: this.RESOURCES_PER_PAGE,
107
108
109
110
111
112
113
114
115
116
117
118
          };
        }
        return { path: "/", username: this.username };
      },
      skip() {
        return !this.username;
      },
    },
  },
})
export default class ResourceSelector extends Vue {
  @Prop({ required: true }) initialResource!: IResource;
Thomas Citharel's avatar
Thomas Citharel committed
119

120
121
122
123
  @Prop({ required: true }) username!: string;

  resource: IResource | undefined = this.initialResource.parent;

124
125
126
127
  RESOURCES_PER_PAGE = 10;

  page = 1;

Thomas Citharel's avatar
Thomas Citharel committed
128
  goDown(element: IResource): void {
129
130
131
132
133
    if (element.type === "folder" && element.id !== this.initialResource.id) {
      this.resource = element;
    }
  }

Thomas Citharel's avatar
Thomas Citharel committed
134
  updateResource(): void {
135
    this.$emit(
Thomas Citharel's avatar
Thomas Citharel committed
136
      "update-resource",
137
138
139
      {
        id: this.initialResource.id,
        title: this.initialResource.title,
Thomas Citharel's avatar
Thomas Citharel committed
140
141
        parent:
          this.resource && this.resource.path === "/" ? null : this.resource,
142
143
144
145
146
147
        path: this.initialResource.path,
      },
      this.initialResource.parent
    );
  }

Thomas Citharel's avatar
Thomas Citharel committed
148
  get moveDisabled(): boolean | undefined {
149
150
151
152
    return (
      (this.initialResource.parent &&
        this.resource &&
        this.initialResource.parent.path === this.resource.path) ||
Thomas Citharel's avatar
Thomas Citharel committed
153
154
155
      (this.initialResource.parent === undefined &&
        this.resource &&
        this.resource.path === "/")
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
    );
  }
}
</script>
<style lang="scss" scoped>
.panel {
  a.panel-block {
    cursor: default;

    &.clickable {
      cursor: pointer;
    }
  }

  &.is-primary .panel-heading {
    background: $primary;
    color: #fff;
  }
}
175
176
177
178
179
180
181
.buttons {
  justify-content: flex-end;
}

nav.pagination {
  margin: 0.5rem;
}
182
</style>