Page MenuHomePhorge
Differential D3071 Diff 8882 src/resources/vue/SharedFolder/Info.vue

Changeset View

Standalone View

View Options

src/resources/vue/SharedFolder/Info.vue

  • This file was copied from src/resources/vue/Resource/Info.vue.
<template> <template>
<div class="container"> <div class="container">
<status-component v-if="resource_id !== 'new'" :status="status" @status-update="statusUpdate"></status-component> <status-component v-if="folder_id !== 'new'" :status="status" @status-update="statusUpdate"></status-component>
<div class="card" id="resource-info"> <div class="card" id="folder-info">
<div class="card-body"> <div class="card-body">
<div class="card-title" v-if="resource_id !== 'new'"> <div class="card-title" v-if="folder_id !== 'new'">
{{ $tc('resource.list-title', 1) }} {{ $tc('shf.list-title', 1) }}
<button class="btn btn-outline-danger button-delete float-end" @click="deleteResource()" tag="button"> <button class="btn btn-outline-danger button-delete float-end" @click="deleteFolder()" tag="button">
<svg-icon icon="trash-alt"></svg-icon> {{ $t('resource.delete') }} <svg-icon icon="trash-alt"></svg-icon> {{ $t('shf.delete') }}
</button> </button>
</div> </div>
<div class="card-title" v-if="resource_id === 'new'">{{ $t('resource.new') }}</div> <div class="card-title" v-if="folder_id === 'new'">{{ $t('shf.new') }}</div>
<div class="card-text"> <div class="card-text">
<ul class="nav nav-tabs mt-3" role="tablist"> <ul class="nav nav-tabs mt-3" role="tablist">
<li class="nav-item"> <li class="nav-item">
<a class="nav-link active" id="tab-general" href="#general" role="tab" aria-controls="general" aria-selected="true" @click="$root.tab"> <a class="nav-link active" id="tab-general" href="#general" role="tab" aria-controls="general" aria-selected="true" @click="$root.tab">
{{ $t('form.general') }} {{ $t('form.general') }}
</a> </a>
</li> </li>
<li v-if="resource_id !== 'new'" class="nav-item"> <li v-if="folder_id !== 'new'" class="nav-item">
<a class="nav-link" id="tab-settings" href="#settings" role="tab" aria-controls="settings" aria-selected="false" @click="$root.tab"> <a class="nav-link" id="tab-settings" href="#settings" role="tab" aria-controls="settings" aria-selected="false" @click="$root.tab">
{{ $t('form.settings') }} {{ $t('form.settings') }}
</a> </a>
</li> </li>
</ul> </ul>
<div class="tab-content"> <div class="tab-content">
<div class="tab-pane show active" id="general" role="tabpanel" aria-labelledby="tab-general"> <div class="tab-pane show active" id="general" role="tabpanel" aria-labelledby="tab-general">
<form @submit.prevent="submit" class="card-body"> <form @submit.prevent="submit" class="card-body">
<div v-if="resource_id !== 'new'" class="row plaintext mb-3"> <div v-if="folder_id !== 'new'" class="row plaintext mb-3">
<label for="status" class="col-sm-4 col-form-label">{{ $t('form.status') }}</label> <label for="status" class="col-sm-4 col-form-label">{{ $t('form.status') }}</label>
<div class="col-sm-8"> <div class="col-sm-8">
<span :class="$root.resourceStatusClass(resource) + ' form-control-plaintext'" id="status">{{ $root.resourceStatusText(resource) }}</span> <span :class="$root.folderStatusClass(folder) + ' form-control-plaintext'" id="status">{{ $root.folderStatusText(folder) }}</span>
</div> </div>
</div> </div>
<div class="row mb-3"> <div class="row mb-3">
<label for="name" class="col-sm-4 col-form-label">{{ $t('form.name') }}</label> <label for="name" class="col-sm-4 col-form-label">{{ $t('form.name') }}</label>
<div class="col-sm-8"> <div class="col-sm-8">
<input type="text" class="form-control" id="name" v-model="resource.name"> <input type="text" class="form-control" id="name" v-model="folder.name">
</div>
</div>
<div class="row mb-3">
<label for="type" class="col-sm-4 col-form-label">{{ $t('form.type') }}</label>
<div class="col-sm-8">
<select id="type" class="form-select" v-model="folder.type" :disabled="folder_id !== 'new'">
<option v-for="type in types" :key="type" :value="type">{{ $t('shf.type-' + type) }}</option>
</select>
</div> </div>
</div> </div>
<div v-if="domains.length" class="row mb-3"> <div v-if="domains.length" class="row mb-3">
<label for="domain" class="col-sm-4 col-form-label">{{ $t('form.domain') }}</label> <label for="domain" class="col-sm-4 col-form-label">{{ $t('form.domain') }}</label>
<div class="col-sm-8"> <div v-if="domains.length" class="col-sm-8">
<select class="form-select" v-model="resource.domain"> <select class="form-select" v-model="folder.domain">
<option v-for="_domain in domains" :key="_domain" :value="_domain.namespace">{{ _domain.namespace }}</option> <option v-for="_domain in domains" :key="_domain.id" :value="_domain.namespace">{{ _domain.namespace }}</option>
</select> </select>
</div> </div>
</div> </div>
<div v-if="resource.email" class="row mb-3"> <div v-if="folder.email" class="row mb-3">
<label for="email" class="col-sm-4 col-form-label">{{ $t('form.email') }}</label> <label for="email" class="col-sm-4 col-form-label">{{ $t('form.email') }}</label>
<div class="col-sm-8"> <div class="col-sm-8">
<input type="text" class="form-control" id="email" disabled v-model="resource.email"> <input type="text" class="form-control" id="email" disabled v-model="folder.email">
</div> </div>
</div> </div>
<button class="btn btn-primary" type="submit"><svg-icon icon="check"></svg-icon> {{ $t('btn.submit') }}</button> <button class="btn btn-primary" type="submit"><svg-icon icon="check"></svg-icon> {{ $t('btn.submit') }}</button>
</form> </form>
</div> </div>
<div class="tab-pane" id="settings" role="tabpanel" aria-labelledby="tab-settings"> <div class="tab-pane" id="settings" role="tabpanel" aria-labelledby="tab-settings">
<form @submit.prevent="submitSettings" class="card-body"> <form @submit.prevent="submitSettings" class="card-body">
<div class="row mb-3"> <div class="row mb-3">
<label for="invitation_policy" class="col-sm-4 col-form-label">{{ $t('resource.invitation-policy') }}</label> <label for="acl-input" class="col-sm-4 col-form-label">{{ $t('form.acl') }}</label>
<div class="col-sm-8"> <div class="col-sm-8">
<div class="input-group input-group-select mb-1"> <acl-input id="acl" v-model="folder.config.acl" :list="folder.config.acl" class="mb-1"></acl-input>
<select class="form-select" id="invitation_policy" v-model="resource.config.invitation_policy" @change="policyChange"> <small id="acl-hint" class="text-muted">
<option value="accept">{{ $t('resource.ipolicy-accept') }}</option> {{ $t('shf.acl-text') }}
<option value="manual">{{ $t('resource.ipolicy-manual') }}</option>
<option value="reject">{{ $t('resource.ipolicy-reject') }}</option>
</select>
<input type="text" class="form-control" id="owner" v-model="resource.config.owner" :placeholder="$t('form.email')">
</div>
<small id="invitation-policy-hint" class="text-muted">
{{ $t('resource.invitation-policy-text') }}
</small> </small>
</div> </div>
</div> </div>
<button class="btn btn-primary" type="submit"><svg-icon icon="check"></svg-icon> {{ $t('btn.submit') }}</button> <button class="btn btn-primary" type="submit"><svg-icon icon="check"></svg-icon> {{ $t('btn.submit') }}</button>
</form> </form>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</template> </template>
<script> <script>
import AclInput from '../Widgets/AclInput'
import StatusComponent from '../Widgets/Status' import StatusComponent from '../Widgets/Status'
export default { export default {
components: { components: {
AclInput,
StatusComponent StatusComponent
}, },
data() { data() {
return { return {
domains: [], domains: [],
resource_id: null, folder_id: null,
resource: { config: {} }, folder: { type: 'mail', config: {} },
status: {} status: {},
types: [ 'mail', 'event', 'task', 'contact', 'note', 'file' ]
} }
}, },
created() { created() {
this.resource_id = this.$route.params.resource this.folder_id = this.$route.params.folder
if (this.resource_id != 'new') { if (this.folder_id != 'new') {
this.$root.startLoading() this.$root.startLoading()
axios.get('/api/v4/resources/' + this.resource_id) axios.get('/api/v4/shared-folders/' + this.folder_id)
.then(response => { .then(response => {
this.$root.stopLoading() this.$root.stopLoading()
this.resource = response.data this.folder = response.data
this.status = response.data.statusInfo this.status = response.data.statusInfo
if (this.resource.config.invitation_policy.match(/^manual:(.+)$/)) {
this.resource.config.owner = RegExp.$1
this.resource.config.invitation_policy = 'manual'
}
this.$nextTick().then(() => { this.policyChange() })
}) })
.catch(this.$root.errorHandler) .catch(this.$root.errorHandler)
} else { } else {
this.$root.startLoading() this.$root.startLoading()
axios.get('/api/v4/domains') axios.get('/api/v4/domains')
.then(response => { .then(response => {
this.$root.stopLoading() this.$root.stopLoading()
this.domains = response.data this.domains = response.data
this.resource.domain = this.domains[0].namespace this.folder.domain = this.domains[0].namespace
}) })
.catch(this.$root.errorHandler) .catch(this.$root.errorHandler)
} }
}, },
mounted() { mounted() {
$('#name').focus() $('#name').focus()
}, },
methods: { methods: {
deleteResource() { deleteFolder() {
axios.delete('/api/v4/resources/' + this.resource_id) axios.delete('/api/v4/shared-folders/' + this.folder_id)
.then(response => { .then(response => {
if (response.data.status == 'success') { if (response.data.status == 'success') {
this.$toast.success(response.data.message) this.$toast.success(response.data.message)
this.$router.push({ name: 'resources' }) this.$router.push({ name: 'shared-folders' })
} }
}) })
}, },
policyChange() { statusUpdate(folder) {
let select = $('#invitation_policy') this.folder = Object.assign({}, this.folder, folder)
select.parent()[select.val() == 'manual' ? 'addClass' : 'removeClass']('selected')
},
statusUpdate(resource) {
this.resource = Object.assign({}, this.resource, resource)
}, },
submit() { submit() {
this.$root.clearFormValidation($('#resource-info form')) this.$root.clearFormValidation($('#folder-info form'))
let method = 'post' let method = 'post'
let location = '/api/v4/resources' let location = '/api/v4/shared-folders'
if (this.resource_id !== 'new') { if (this.folder_id !== 'new') {
method = 'put' method = 'put'
location += '/' + this.resource_id location += '/' + this.folder_id
} }
const post = this.$root.pick(this.resource, ['id', 'name', 'domain']) const post = this.$root.pick(this.folder, ['id', 'name', 'domain', 'type'])
axios[method](location, post) axios[method](location, post)
.then(response => { .then(response => {
this.$toast.success(response.data.message) this.$toast.success(response.data.message)
this.$router.push({ name: 'resources' }) this.$router.push({ name: 'shared-folders' })
}) })
}, },
submitSettings() { submitSettings() {
this.$root.clearFormValidation($('#settings form')) this.$root.clearFormValidation($('#settings form'))
let post = {...this.resource.config} let post = {...this.folder.config}
if (post.invitation_policy == 'manual') {
post.invitation_policy += ':' + post.owner
}
delete post.owner
axios.post('/api/v4/resources/' + this.resource_id + '/config', post) axios.post('/api/v4/shared-folders/' + this.folder_id + '/config', post)
.then(response => { .then(response => {
this.$toast.success(response.data.message) this.$toast.success(response.data.message)
}) })
} }
} }
} }
</script> </script>