Skip to content
Snippets Groups Projects
Commit 1574f0af authored by Tobias Kuhnert's avatar Tobias Kuhnert Committed by Marc Hanisch
Browse files

Resolve "Fix Attachment Behavior"

parent e05c7611
No related branches found
No related tags found
2 merge requests!324Release Candidate 2,!309Resolve "Fix Attachment Behavior"
Hide whitespace changes
Inline Side-by-side
Showing
with 208 additions and 161 deletions
components/devices/DevicesAttachmentListItem.vue
+ 45
− 31
View file @ 1574f0af
......@@ -30,38 +30,50 @@ implied. See the Licence for the specific language governing
permissions and limitations under the Licence.
-->
<template>
<base-expandable-list-item>
<template #header>
<span class="text-caption">
{{ attachment.url | shortenMiddle }}
</span>
</template>
<template #dot-menu-items>
<slot name="dot-menu-items" />
</template>
<template #actions>
<v-btn
v-if="$auth.loggedIn"
color="primary"
text
small
nuxt
:to="'/devices/' + deviceId + '/attachments/' + attachment.id + '/edit'"
<v-hover
v-slot="{ hover }"
>
<v-card
:elevation="hover ? 6 : 2"
class="ma-2"
>
<v-card-text
class="py-2 px-3"
>
Edit
</v-btn>
</template>
<template #default>
<v-icon>
{{ filetypeIcon(attachment) }}
</v-icon>
<span class="text-caption">
<a :href="attachment.url" target="_blank">
{{ attachment.label }}&nbsp;<v-icon small>mdi-open-in-new</v-icon>
</a>
</span>
</template>
</base-expandable-list-item>
<div class="d-flex align-center">
<span class="text-caption">
{{ attachment.url | shortenMiddle }}
</span>
<v-spacer />
<DotMenu>
<template #actions>
<slot name="dot-menu-items" />
</template>
</DotMenu>
</div>
<v-row
no-gutters
>
<v-col cols="8" class="text-subtitle-1">
<v-icon>
{{ filetypeIcon(attachment) }}
</v-icon>
<span class="text-caption">
<a :href="attachment.url" target="_blank">
{{ attachment.label }}&nbsp;<v-icon small>mdi-open-in-new</v-icon>
</a>
</span>
</v-col>
<v-col
align-self="end"
class="text-right"
>
<slot name="edit-action" />
</v-col>
</v-row>
</v-card-text>
</v-card>
</v-hover>
</template>
<script lang="ts">
......@@ -72,9 +84,11 @@ import { Attachment } from '@/models/Attachment'
import BaseExpandableListItem from '@/components/shared/BaseExpandableListItem.vue'
import { AttachmentsMixin } from '@/mixins/AttachmentsMixin'
import DotMenu from '@/components/DotMenu.vue'
@Component({
components: {
DotMenu,
BaseExpandableListItem
}
})
......
components/platforms/PlatformsAttachmentListItem.vue
+ 45
− 31
View file @ 1574f0af
......@@ -30,38 +30,50 @@ implied. See the Licence for the specific language governing
permissions and limitations under the Licence.
-->
<template>
<base-expandable-list-item>
<template #header>
<span class="text-caption">
{{ attachment.url | shortenMiddle }}
</span>
</template>
<template #dot-menu-items>
<slot name="dot-menu-items" />
</template>
<template #actions>
<v-btn
v-if="$auth.loggedIn"
color="primary"
text
small
nuxt
:to="'/platforms/' + platformId + '/attachments/' + attachment.id + '/edit'"
<v-hover
v-slot="{ hover }"
>
<v-card
:elevation="hover ? 6 : 2"
class="ma-2"
>
<v-card-text
class="py-2 px-3"
>
Edit
</v-btn>
</template>
<template #default>
<v-icon>
{{ filetypeIcon(attachment) }}
</v-icon>
<span class="text-caption">
<a :href="attachment.url" target="_blank">
{{ attachment.label }}&nbsp;<v-icon small>mdi-open-in-new</v-icon>
</a>
</span>
</template>
</base-expandable-list-item>
<div class="d-flex align-center">
<span class="text-caption">
{{ attachment.url | shortenMiddle }}
</span>
<v-spacer />
<DotMenu>
<template #actions>
<slot name="dot-menu-items" />
</template>
</DotMenu>
</div>
<v-row
no-gutters
>
<v-col cols="8" class="text-subtitle-1">
<v-icon>
{{ filetypeIcon(attachment) }}
</v-icon>
<span class="text-caption">
<a :href="attachment.url" target="_blank">
{{ attachment.label }}&nbsp;<v-icon small>mdi-open-in-new</v-icon>
</a>
</span>
</v-col>
<v-col
align-self="end"
class="text-right"
>
<slot name="edit-action" />
</v-col>
</v-row>
</v-card-text>
</v-card>
</v-hover>
</template>
<script lang="ts">
......@@ -72,9 +84,11 @@ import { Attachment } from '@/models/Attachment'
import BaseExpandableListItem from '@/components/shared/BaseExpandableListItem.vue'
import { AttachmentsMixin } from '@/mixins/AttachmentsMixin'
import DotMenu from '@/components/DotMenu.vue'
@Component({
components: {
DotMenu,
BaseExpandableListItem
}
})
......
mixins/AttachmentsMixin.ts
+ 0
− 10
View file @ 1574f0af
......@@ -69,16 +69,6 @@ export class AttachmentsMixin extends Vue {
return paths.pop()
}
/**
* returns the timestamp of the upload date
*
* @TODO this must be implemented when the file API is ready
* @return {string} a readable timestamp
*/
uploadedDateTime (_attachment: Attachment): string {
return '2020-06-17 16:35 (TODO)'
}
/**
* returns a material design icon name based on the file type extension
*
......
pages/devices/_deviceId/attachments/_attachmentId/edit.vue
+ 48
− 49
View file @ 1574f0af
......@@ -43,56 +43,52 @@ permissions and limitations under the Licence.
/>
</v-card-actions>
<v-card>
<v-container>
<v-row no-gutters>
<v-form ref="attachmentsEditForm" class="pb-2" @submit.prevent>
<v-avatar class="mt-0 align-self-center">
<v-icon large>
{{ filetypeIcon(valueCopy) }}
</v-icon>
</v-avatar>
<v-col>
<v-row
no-gutters
>
<v-col>
<v-card-subtitle>
{{ filename(valueCopy) }}, uploaded at {{ uploadedDateTime(valueCopy) }}
</v-card-subtitle>
</v-col>
</v-row>
<v-row
no-gutters
<v-card-text
class="py-2 px-3"
>
<div class="d-flex align-center">
<span class="text-caption">
{{ filename(valueCopy) }}
</span>
</div>
<v-row
no-gutters
>
<v-col cols="8" class="text-subtitle-1">
<v-icon>
{{ filetypeIcon(valueCopy) }}
</v-icon>
<v-form ref="attachmentsEditForm" class="pb-2" @submit.prevent>
<v-text-field
v-model="valueCopy.label"
label="Label"
required
class="required"
:rules="[rules.required]"
/>
</v-form>
</v-col>
<v-col
align-self="end"
class="text-right"
>
<v-btn
:href="valueCopy.url"
target="_blank"
text
small
nuxt
>
<v-icon
small
>
<v-col class="text-subtitle-1">
<v-text-field
v-model="valueCopy.label"
label="Label"
required
class="required"
:rules="[rules.required]"
/>
</v-col>
<v-col
align-self="end"
class="text-right"
>
<v-btn
icon
color="primary"
:href="valueCopy.url"
target="_blank"
>
<v-icon>
mdi-open-in-new
</v-icon>
</v-btn>
</v-col>
</v-row>
</v-col>
</v-form>
mdi-open-in-new
</v-icon>
Open in new tab
</v-btn>
</v-col>
</v-row>
</v-container>
</v-card-text>
</v-card>
</div>
</template>
......@@ -122,7 +118,10 @@ import { AttachmentsMixin } from '@/mixins/AttachmentsMixin'
* @extends Vue
*/
@Component({
components: { SaveAndCancelButtons, ProgressIndicator },
components: {
SaveAndCancelButtons,
ProgressIndicator
},
middleware: ['auth'],
computed: mapState('devices', ['deviceAttachment']),
methods: mapActions('devices', ['loadDeviceAttachment', 'loadDeviceAttachments', 'updateDeviceAttachment'])
......
pages/devices/_deviceId/attachments/index.vue
+ 12
− 0
View file @ 1574f0af
......@@ -65,6 +65,18 @@ permissions and limitations under the Licence.
@click="initDeleteDialog(item)"
/>
</template>
<template #edit-action>
<v-btn
v-if="editable"
color="primary"
text
small
nuxt
:to="'/devices/' + deviceId + '/attachments/' + item.id + '/edit'"
>
Edit
</v-btn>
</template>
</DevicesAttachmentListItem>
</template>
</BaseList>
......
pages/platforms/_platformId/attachments/_attachmentId/edit.vue
+ 46
− 40
View file @ 1574f0af
......@@ -47,51 +47,52 @@ permissions and limitations under the Licence.
/>
</v-card-actions>
<v-card>
<v-container>
<v-row no-gutters>
<v-avatar class="mt-0 align-self-center">
<v-icon large>
<v-card-text
class="py-2 px-3"
>
<div class="d-flex align-center">
<span class="text-caption">
{{ filename(valueCopy) }}
</span>
</div>
<v-row
no-gutters
>
<v-col cols="8" class="text-subtitle-1">
<v-icon>
{{ filetypeIcon(valueCopy) }}
</v-icon>
</v-avatar>
<v-col>
<v-row
no-gutters
>
<v-col>
<v-card-subtitle>
{{ filename(valueCopy) }}, uploaded at {{ uploadedDateTime(valueCopy) }}
</v-card-subtitle>
</v-col>
</v-row>
<v-row
no-gutters
<v-form ref="attachmentsEditForm" class="pb-2" @submit.prevent>
<v-text-field
v-model="valueCopy.label"
label="Label"
required
class="required"
:rules="[rules.required]"
/>
</v-form>
</v-col>
<v-col
align-self="end"
class="text-right"
>
<v-btn
:href="valueCopy.url"
target="_blank"
text
small
nuxt
>
<v-col class="text-subtitle-1">
<v-text-field
v-model="valueCopy.label"
label="Label"
/>
</v-col>
<v-col
align-self="end"
class="text-right"
<v-icon
small
>
<v-btn
icon
color="primary"
:href="valueCopy.url"
target="_blank"
>
<v-icon>
mdi-open-in-new
</v-icon>
</v-btn>
</v-col>
</v-row>
mdi-open-in-new
</v-icon>
Open in new tab
</v-btn>
</v-col>
</v-row>
</v-container>
</v-card-text>
</v-card>
</div>
</template>
......@@ -113,6 +114,7 @@ import SaveAndCancelButtons from '@/components/configurations/SaveAndCancelButto
import ProgressIndicator from '@/components/ProgressIndicator.vue'
import { AttachmentsMixin } from '@/mixins/AttachmentsMixin'
import { Rules } from '@/mixins/Rules'
/**
* A class component that displays a single attached file
......@@ -125,7 +127,7 @@ import { AttachmentsMixin } from '@/mixins/AttachmentsMixin'
methods: mapActions('platforms', ['loadPlatformAttachment', 'loadPlatformAttachments', 'updatePlatformAttachment'])
})
// @ts-ignore
export default class AttachmentEditPage extends mixins(AttachmentsMixin) {
export default class AttachmentEditPage extends mixins(Rules, AttachmentsMixin) {
@InjectReactive()
editable!: boolean
......@@ -166,6 +168,10 @@ export default class AttachmentEditPage extends mixins(AttachmentsMixin) {
}
async save () {
if (!(this.$refs.attachmentsEditForm as Vue & { validate: () => boolean }).validate()) {
this.$store.commit('snackbar/setError', 'Please correct your input')
return
}
try {
this.isSaving = true
await this.updatePlatformAttachment({
......
pages/platforms/_platformId/attachments/index.vue
+ 12
− 0
View file @ 1574f0af
......@@ -68,6 +68,18 @@ permissions and limitations under the Licence.
@click="initDeleteDialog(item)"
/>
</template>
<template #edit-action>
<v-btn
v-if="editable"
color="primary"
text
small
nuxt
:to="'/platforms/' + platformId + '/attachments/' + item.id + '/edit'"
>
Edit
</v-btn>
</template>
</PlatformsAttachmentListItem>
</template>
</BaseList>
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment

A HIFIS Service | Privacy | Imprint | Support | Documentation | Changelog