496 lines
10 KiB
Vue
496 lines
10 KiB
Vue
<!--
|
|
- @copyright Copyright (c) 2018 René Gieling <github@dartcafe.de>
|
|
-
|
|
- @author René Gieling <github@dartcafe.de>
|
|
- @author Natalie Gilbert
|
|
- @author Nick Gallo
|
|
-
|
|
- @license GNU AGPL version 3 or any later version
|
|
-
|
|
- This program is free software: you can redistribute it and/or modify
|
|
- it under the terms of the GNU Affero General Public License as
|
|
- published by the Free Software Foundation, either version 3 of the
|
|
- License, or (at your option) any later version.
|
|
-
|
|
- This program is distributed in the hope that it will be useful,
|
|
- but WITHOUT ANY WARRANTY; without even the implied warranty of
|
|
- MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
|
- GNU Affero General Public License for more details.
|
|
-
|
|
- You should have received a copy of the GNU Affero General Public License
|
|
- along with this program. If not, see <http://www.gnu.org/licenses/>.
|
|
-
|
|
-->
|
|
|
|
<template>
|
|
<div v-if="header" class="wrapper group-master table-row table-header">
|
|
<div class="wrapper group-1">
|
|
<div class="wrapper group-1-1">
|
|
<div class="name">
|
|
{{ t('forms', 'Title') }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="wrapper group-2">
|
|
<div class="wrapper-group-2-5">
|
|
<div class="deletetwo">
|
|
{{ t('forms',"Delete form") }}
|
|
</div>
|
|
</div>
|
|
<div class="wrapper-group-2-5">
|
|
<div class="copyL">
|
|
{{ t('forms', "Copy link") }}
|
|
</div>
|
|
</div>
|
|
<div class="wrapper-group-2-5">
|
|
<div class="result">
|
|
{{ t('forms', "View results") }}
|
|
</div>
|
|
</div>
|
|
<div class="wrapper group-2-1">
|
|
<div class="access">
|
|
{{ t('forms', 'Access') }}
|
|
</div>
|
|
</div>
|
|
<div class="owner">
|
|
{{ t('forms', 'Owner') }}
|
|
</div>
|
|
<div class="wrapper group-2-2">
|
|
<div class="created">
|
|
{{ t('forms', 'Created') }}
|
|
</div>
|
|
<div class="expiry">
|
|
{{ t('forms', 'Expires') }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div v-else class="wrapper table-row table-body group-master">
|
|
<div class="wrapper group-1">
|
|
<div>
|
|
<img class="icontwo">
|
|
</div>
|
|
<div class="symbol icon-voted" />
|
|
<a :href="submitUrl" class="wrapper group-1-1">
|
|
<div class="name">
|
|
{{ form.form.title }}
|
|
</div>
|
|
<div class="description">
|
|
{{ form.form.description }}
|
|
</div>
|
|
</a>
|
|
</div>
|
|
<div class="wrapper group-2">
|
|
<div class="wrapper group-2-8">
|
|
<a class="icon icon-delete svg delete-form" @click="deleteForm" />
|
|
<span class="hidden-visually">
|
|
{{ t('forms', 'Delete form') }}
|
|
</span>
|
|
</div>
|
|
<div class="wrapper group-2-9">
|
|
<a class="icon icon-clippy svg delete-form" @click="copyLink" />
|
|
<span class="hidden-visually">
|
|
{{ t('forms', 'Copy link') }}
|
|
</span>
|
|
</div>
|
|
<div class="list-results wrapper">
|
|
<a class="icon icon-toggle svg delete-form" @click="viewResults" />
|
|
<span class="hidden-visually">
|
|
{{ t('forms', 'View results') }}
|
|
</span>
|
|
</div>
|
|
|
|
<div class="wrapper group-2-1">
|
|
<div v-tooltip="accessType" class="thumbnail access" :class="form.form.access">
|
|
{{ accessType }}
|
|
</div>
|
|
</div>
|
|
<div class="owner">
|
|
<UserDiv :user-id="form.form.ownerId" :display-name="form.form.ownerDisplayName" />
|
|
</div>
|
|
<div class="wrapper group-2-2">
|
|
<div class="created ">
|
|
{{ timeSpanCreated }}
|
|
</div>
|
|
<div class="expiry" :class="{ expired : form.form.expired }">
|
|
{{ timeSpanExpiration }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import moment from '@nextcloud/moment'
|
|
import UserDiv from '../components/_base-UserDiv'
|
|
|
|
export default {
|
|
components: {
|
|
UserDiv,
|
|
},
|
|
props: {
|
|
header: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
form: {
|
|
type: Object,
|
|
default: undefined,
|
|
},
|
|
},
|
|
|
|
data() {
|
|
return {
|
|
openedMenu: false,
|
|
hostName: this.$route.query.page,
|
|
}
|
|
|
|
},
|
|
|
|
computed: {
|
|
accessType() {
|
|
if (this.form.form.access === 'public') {
|
|
return t('forms', 'Public access')
|
|
} else if (this.form.form.access === 'select') {
|
|
return t('forms', 'Only shared')
|
|
} else if (this.form.form.access === 'registered') {
|
|
return t('forms', 'Registered users only')
|
|
} else if (this.form.form.access === 'hidden') {
|
|
return t('forms', 'Hidden form')
|
|
} else {
|
|
return ''
|
|
}
|
|
},
|
|
|
|
timeSpanCreated() {
|
|
return moment(this.form.form.created, 'YYYY-MM-DD HH:mm')
|
|
},
|
|
|
|
timeSpanExpiration() {
|
|
if (this.form.form.expires) {
|
|
return moment(this.form.form.expirationDate)
|
|
} else {
|
|
return t('forms', 'never')
|
|
}
|
|
},
|
|
|
|
countShares() {
|
|
return this.form.shares.length
|
|
},
|
|
|
|
submitUrl() {
|
|
return OC.generateUrl('apps/forms/form/') + this.form.form.hash
|
|
},
|
|
|
|
},
|
|
|
|
methods: {
|
|
toggleMenu() {
|
|
this.openedMenu = !this.openedMenu
|
|
},
|
|
|
|
hideMenu() {
|
|
this.openedMenu = false
|
|
},
|
|
|
|
copyLink() {
|
|
// this.$emit('copyLink')
|
|
this.$copyText(window.location.origin + this.submitUrl).then(
|
|
function(e) {
|
|
OC.Notification.showTemporary(t('forms', 'Link copied to clipboard'))
|
|
},
|
|
function(e) {
|
|
OC.Notification.showTemporary(t('forms', 'Error, while copying link to clipboard'))
|
|
}
|
|
)
|
|
this.hideMenu()
|
|
},
|
|
|
|
deleteForm() {
|
|
this.$emit('deleteForm')
|
|
},
|
|
|
|
viewResults() {
|
|
this.$emit('viewResults')
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
$row-padding: 15px;
|
|
$table-padding: 4px;
|
|
|
|
$date-width: 130px;
|
|
$participants-width: 95px;
|
|
$group-2-2-width: max($date-width, $participants-width);
|
|
|
|
$owner-width: 140px;
|
|
$access-width: 44px;
|
|
$group-2-1-width: max($access-width, $date-width);
|
|
$group-2-width: $owner-width + $group-2-1-width + $group-2-2-width;
|
|
|
|
$action-width: 44px;
|
|
$thumbnail-width: 44px;
|
|
$thumbnail-icon-width: 32px;
|
|
$name-width: 150px;
|
|
$description-width: 150px;
|
|
$group-1-1-width: max($name-width, $description-width);
|
|
$group-1-width: $thumbnail-width + $group-1-1-width + $action-width;
|
|
|
|
$group-master-width: max($group-1-width, $group-2-width);
|
|
|
|
$mediabreak-1: ($group-1-width + $owner-width + $access-width + $date-width + $date-width + $participants-width + $row-padding * 2);
|
|
$mediabreak-2: ($group-1-width + $group-2-width + $row-padding * 2);
|
|
$mediabreak-3: $group-1-width + $owner-width + max($group-2-1-width, $group-2-2-width) + $row-padding *2 ;
|
|
|
|
.table-row {
|
|
width: 100%;
|
|
padding-left: $row-padding;
|
|
padding-right: $row-padding;
|
|
|
|
line-height: 2em;
|
|
transition: background-color 0.3s ease;
|
|
background-color: var(--color-main-background);
|
|
min-height: 4em;
|
|
border-bottom: 1px solid var(--color-border);
|
|
|
|
&.table-header {
|
|
.name, .description {
|
|
padding-left: ($thumbnail-width + $table-padding *2);
|
|
}
|
|
.owner {
|
|
padding-left: 6px;
|
|
}
|
|
}
|
|
|
|
&.table-body {
|
|
&:hover, &:focus, &:active, &.mouseOver {
|
|
transition: background-color 0.3s ease;
|
|
background-color: var(--color-background-dark);
|
|
}
|
|
.icon-more {
|
|
right: 14px;
|
|
opacity: 0.3;
|
|
cursor: pointer;
|
|
height: 44px;
|
|
width: 44px;
|
|
}
|
|
|
|
.symbol {
|
|
padding: 2px;
|
|
}
|
|
|
|
}
|
|
|
|
&.table-header {
|
|
opacity: 0.5;
|
|
}
|
|
}
|
|
|
|
.wrapper {
|
|
display: flex;
|
|
align-items: center;
|
|
position: relative;
|
|
flex-grow: 0;
|
|
}
|
|
|
|
.name {
|
|
width: $name-width;
|
|
}
|
|
|
|
.description {
|
|
width: $description-width;
|
|
opacity: 0.5;
|
|
}
|
|
|
|
.name, .description {
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.actions {
|
|
width: $action-width;
|
|
position: relative;
|
|
overflow: initial;
|
|
}
|
|
|
|
.result {
|
|
width: 60px;
|
|
padding-right: 15px;
|
|
}
|
|
|
|
.deletetwo {
|
|
width: 60px;
|
|
padding-right: 15px;
|
|
}
|
|
.copyL {
|
|
width: 60px;
|
|
padding-right: 15px;
|
|
}
|
|
|
|
.access {
|
|
width: $access-width;
|
|
}
|
|
|
|
.owner {
|
|
width: $owner-width;
|
|
}
|
|
|
|
.created {
|
|
width: $date-width;
|
|
}
|
|
|
|
.expiry {
|
|
width: $date-width;
|
|
&.expired {
|
|
color: red;
|
|
}
|
|
}
|
|
|
|
.delete-form {
|
|
padding-right:70px;
|
|
}
|
|
|
|
.list-results {
|
|
width: 65px;
|
|
}
|
|
|
|
.group-1, .group-1-1 {
|
|
flex-grow: 1;
|
|
}
|
|
|
|
.group-1-1 {
|
|
flex-direction: column;
|
|
width: $group-1-1-width;
|
|
> div {
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
@media all and (max-width: ($mediabreak-1) ) {
|
|
.group-1 {
|
|
width: $group-1-width;
|
|
}
|
|
.group-2-1, .group-2-2 {
|
|
flex-direction: column;
|
|
}
|
|
|
|
.created {
|
|
width: $group-2-1-width;;
|
|
}
|
|
.expiry, .participants {
|
|
width: $group-2-2-width;;
|
|
}
|
|
}
|
|
|
|
@media all and (max-width: ($mediabreak-2) ) {
|
|
.table-row {
|
|
padding: 0;
|
|
}
|
|
|
|
.group-2-1 {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
@media all and (max-width: ($mediabreak-3) ) {
|
|
.group-2 {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
.icontwo {
|
|
width: 44px;
|
|
height: 44px;
|
|
padding-right: 4px;
|
|
font-size: 0;
|
|
background-color: var(--color-text-light);
|
|
mask-image: var(--icon-organization-000) no-repeat 50% 50%;
|
|
-webkit-mask: var(--icon-organization-000) no-repeat 50% 50%;
|
|
mask-size: 16px;
|
|
}
|
|
|
|
.thumbnail {
|
|
width: 44px;
|
|
height: 44px;
|
|
padding-right: 4px;
|
|
font-size: 0;
|
|
background-color: var(--color-text-light);
|
|
&.dateForm {
|
|
mask-image: var(--icon-calendar-000) no-repeat 50% 50%;
|
|
-webkit-mask: var(--icon-calendar-000) no-repeat 50% 50%;
|
|
mask-size: 16px;
|
|
}
|
|
&.textForm {
|
|
mask-image: var(--icon-organization-000) no-repeat 50% 50%;
|
|
-webkit-mask: var(--icon-organization-000) no-repeat 50% 50%;
|
|
mask-size: 16px;
|
|
}
|
|
&.expired {
|
|
background-color: var(--color-background-darker);
|
|
}
|
|
&.access {
|
|
display: inherit;
|
|
&.hidden {
|
|
mask-image: var(--icon-password-000) no-repeat 50% 50%;
|
|
-webkit-mask: var(--icon-password-000) no-repeat 50% 50%;
|
|
mask-size: 16px;
|
|
}
|
|
&.public {
|
|
mask-image: var(--icon-link-000) no-repeat 50% 50%;
|
|
-webkit-mask: var(--icon-link-000) no-repeat 50% 50%;
|
|
mask-size: 16px;
|
|
}
|
|
&.select {
|
|
mask-image: var(--icon-share-000) no-repeat 50% 50%;
|
|
-webkit-mask: var(--icon-share-000) no-repeat 50% 50%;
|
|
mask-size: 16px;
|
|
}
|
|
&.registered {
|
|
mask-image: var(--icon-group-000) no-repeat 50% 50%;
|
|
-webkit-mask: var(--icon-group-000) no-repeat 50% 50%;
|
|
mask-size: 16px;
|
|
}
|
|
|
|
}
|
|
}
|
|
|
|
.icon-voted {
|
|
background-image: var(--icon-checkmark-fff);
|
|
}
|
|
|
|
.app-navigation-entry-utils-counter {
|
|
padding-right: 0 !important;
|
|
overflow: hidden;
|
|
text-align: right;
|
|
font-size: 9pt;
|
|
line-height: 44px;
|
|
padding: 0 12px;
|
|
// min-width: 25px;
|
|
&.highlighted {
|
|
padding: 0;
|
|
text-align: center;
|
|
span {
|
|
padding: 2px 5px;
|
|
border-radius: 10px;
|
|
background-color: var(--color-primary);
|
|
color: var(--color-primary-text);
|
|
}
|
|
}
|
|
}
|
|
|
|
.symbol.icon-voted {
|
|
position: absolute;
|
|
left: 11px;
|
|
top: 16px;
|
|
background-size: 0;
|
|
min-width: 8px;
|
|
min-height: 8px;
|
|
background-color: var(--color-success);
|
|
border-radius: 50%;
|
|
}
|
|
</style>
|