-
Notifications
You must be signed in to change notification settings - Fork 155
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Showing
16 changed files
with
335 additions
and
22 deletions.
There are no files selected for viewing
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,9 @@ | ||
Enhancement: Add Tag support | ||
|
||
Managing files via tags is now possible in web, the feature is experimental and will be only available through a dedicated experimental web build. | ||
Beside that the web version is experimental, it also needs a special experimental ocis version. | ||
|
||
Creating Tags, tagging resources and search for tags now is possible and can be used as an alternative way of working and organizing resources. | ||
|
||
https://github.com/owncloud/web/pull/7388 | ||
https://github.com/owncloud/web/pull/7385 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
146 changes: 146 additions & 0 deletions
146
packages/web-app-files/src/components/SideBar/TagsPanel.vue
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,146 @@ | ||
<template> | ||
<div> | ||
<div class="oc-background-highlight oc-p-m"> | ||
<oc-loader v-if="loadAllTagsTask.isRunning" /> | ||
<oc-select | ||
v-else | ||
ref="tagSelect" | ||
v-model="editAssignedTags" | ||
multiple | ||
:options="allTags" | ||
taggable | ||
push-tags | ||
:label="$gettext('Add or edit tags')" | ||
:create-option="createOption" | ||
:selectable="() => editAssignedTags.length <= tagsMaxCount" | ||
:fix-message-line="true" | ||
> | ||
<template #selected-option="{ label }"> | ||
<span class="oc-flex oc-flex-center"> | ||
<avatar-image | ||
class="oc-flex oc-align-self-center oc-mr-s" | ||
:width="16.8" | ||
:userid="label" | ||
:user-name="label" | ||
/> | ||
<span>{{ label }}</span> | ||
</span> | ||
</template> | ||
<template #option="{ label }"> | ||
<div class="oc-flex"> | ||
<span v-if="showSelectNewLabel(label)" v-translate class="oc-mr-s">New</span> | ||
<span class="oc-flex oc-flex-center"> | ||
<avatar-image | ||
class="oc-flex oc-align-self-center oc-mr-s" | ||
:width="16.8" | ||
:userid="label" | ||
:user-name="label" | ||
/> | ||
<span>{{ label }}</span> | ||
</span> | ||
</div> | ||
</template> | ||
</oc-select> | ||
</div> | ||
<compare-save-dialog | ||
class="edit-compare-save-dialog" | ||
:original-object="{ tags: resource.tags }" | ||
:compare-object="{ tags: editAssignedTags }" | ||
@revert="revertChanges" | ||
@confirm="save" | ||
></compare-save-dialog> | ||
</div> | ||
</template> | ||
|
||
<script lang="ts"> | ||
import { mapActions, mapMutations } from 'vuex' | ||
import { defineComponent, ref } from '@vue/composition-api' | ||
import CompareSaveDialog from 'web-pkg/src/components/sidebar/CompareSaveDialog.vue' | ||
import { bus } from 'web-pkg/src/instance' | ||
import { useTask } from 'vue-concurrency' | ||
import { useRequest, useStore } from 'web-pkg/src/composables' | ||
const tagsMaxCount = 100 | ||
export default defineComponent({ | ||
name: 'Tags', | ||
components: { | ||
CompareSaveDialog | ||
}, | ||
inject: ['displayedItem'], | ||
setup() { | ||
const store = useStore() | ||
const allTags = ref([]) | ||
const { makeRequest } = useRequest() | ||
const loadAllTagsTask = useTask(function* (signal, ref) { | ||
const { | ||
data: { tags = [] } | ||
} = yield makeRequest('GET', `${store.getters.configuration.server}experimental/tags`, {}) | ||
allTags.value = tags | ||
}) | ||
return { | ||
loadAllTagsTask, | ||
allTags, | ||
tagsMaxCount | ||
} | ||
}, | ||
data: function () { | ||
return { | ||
editAssignedTags: [] | ||
} | ||
}, | ||
computed: { | ||
resource() { | ||
return this.displayedItem.value | ||
} | ||
}, | ||
mounted() { | ||
this.editAssignedTags = [...this.resource.tags] | ||
this.loadAllTagsTask.perform(this) | ||
}, | ||
methods: { | ||
...mapActions(['showMessage']), | ||
...mapMutations('Files', ['UPDATE_RESOURCE_FIELD']), | ||
revertChanges() { | ||
this.editAssignedTags = [...this.resource.tags] | ||
}, | ||
async save() { | ||
try { | ||
const tagsToAdd = this.editAssignedTags.filter((tag) => !this.resource.tags.includes(tag)) | ||
const tagsToRemove = this.resource.tags.filter( | ||
(tag) => !this.editAssignedTags.includes(tag) | ||
) | ||
if (tagsToAdd.length) { | ||
await this.$client.tags.addResourceTag(this.resource.fileId, tagsToAdd) | ||
} | ||
if (tagsToRemove.length) { | ||
await this.$client.tags.removeResourceTag(this.resource.fileId, tagsToRemove) | ||
} | ||
this.UPDATE_RESOURCE_FIELD({ | ||
id: this.resource.id, | ||
field: 'tags', | ||
value: [...this.editAssignedTags] | ||
}) | ||
this.displayedItem.value.tags = [...this.editAssignedTags] | ||
bus.publish('sidebar.entity.saved') | ||
} catch (e) { | ||
console.error(e) | ||
} | ||
}, | ||
createOption(option) { | ||
return option.toLowerCase() | ||
}, | ||
showSelectNewLabel(option) { | ||
return !this.$refs.tagSelect.$refs.select.optionExists(option) | ||
} | ||
} | ||
}) | ||
</script> | ||
|
||
<style lang="scss"></style> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.