chamilo
/
chamilo-lms
mirror of https://github.com/chamilo/chamilo-lms/tree/1.11.x
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

Improvement of document show component

Browse Source
pull/5081/head
Angel Fernando Quiroz Campos 2 years ago
parent b40cd23a65
commit 46c37efebf
5 changed files with 175 additions and 181 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 30
      assets/css/scss/_documents.scss
  2. 2
      assets/css/scss/index.scss
  3. 2
      assets/vue/router/documents.js
  4. 142
      assets/vue/views/documents/DocumentShow.vue
  5. 180
      assets/vue/views/documents/Show.vue

30
assets/css/scss/_documents.scss
Unescape View File

@ -0,0 +1,30 @@
.document-show {
&__section {
@apply flex flex-row mt-4 gap-4;
}
&__content-side {
@apply w-2/3 flex justify-center;
img {
@apply block;
}
video {
@apply w-full;
}
iframe {
@apply aspect-square w-full border-0;
}
}
&__details-side {
@apply w-1/3;
table {
@apply mb-4;
}
}
}

2
assets/css/scss/index.scss
Unescape View File

@ -60,6 +60,8 @@
@import "course_home"; @import "course_home";
@import "documents";
@import 'login'; @import 'login';
@import 'forums'; @import 'forums';

2
assets/vue/router/documents.js
Unescape View File

@ -40,7 +40,7 @@ export default {
{ {
name: 'DocumentsShow', name: 'DocumentsShow',
path: 'show', path: 'show',
component: () => import('../views/documents/Show.vue') component: () => import('../views/documents/DocumentShow.vue')
}, },
{ {
name: 'DocumentForHtmlEditor', name: 'DocumentForHtmlEditor',

142
assets/vue/views/documents/DocumentShow.vue
Unescape View File

@ -0,0 +1,142 @@
<template>
<div
v-if="item"
class="document-show"
>
<Toolbar
v-if="item && isCurrentTeacher"
:handle-delete="del"
:handle-edit="editHandler"
/>
<div class="section-header section-header--h6">
<h6 v-text="item.title" />
</div>
<div
class="document-show__section"
>
<div class="document-show__content-side">
<div
v-if="item['resourceNode']['resourceFile']"
>
<img
v-if="item.resourceNode.resourceFile.image"
:src="item.contentUrl + '&w=500'"
:alt="item.title"
/>
<video
v-else-if="item['resourceNode']['resourceFile']['video']"
controls
>
<source :src="item['contentUrl']" />
</video>
<iframe
v-if="'text/html' === item['resourceNode']['resourceFile']['mimeType']"
:src="item['contentUrl']"
/>
</div>
<div
v-else
>
<BaseIcon icon="folder-generic" />
</div>
</div>
<div class="document-show__details-side">
<table>
<tr>
<th v-text="$t('Author')" />
<td v-text="item.resourceNode.creator.username" />
</tr>
<tr
v-if="item.comment"
>
<th v-text="$t('Comment')" />
<td v-text="item.comment" />
</tr>
<tr>
<th v-text="$t('Created at')" />
<td>
{{ item["resourceNode"] ? relativeDatetime(item["resourceNode"].createdAt) : "" }}
</td>
</tr>
<tr>
<th v-text="$t('Updated at')" />
<td>
{{ item["resourceNode"] ? relativeDatetime(item["resourceNode"].updatedAt) : "" }}
</td>
</tr>
<tr v-if="item['resourceNode']['resourceFile']">
<th v-text="$t('File')" />
<td>
<a
:href="item['downloadUrl']"
class="btn btn--primary"
>
<BaseIcon icon="download" /> {{ $t("Download file") }}
</a>
</td>
</tr>
</table>
<ShowLinks :item="item" />
</div>
</div>
</div>
<Loading :visible="isLoading" />
</template>
<script>
import { mapActions, mapGetters } from "vuex"
import { mapFields } from "vuex-map-fields"
import Loading from "../../components/Loading.vue"
import ShowMixin from "../../mixins/ShowMixin"
import Toolbar from "../../components/Toolbar.vue"
import ShowLinks from "../../components/resource_links/ShowLinks.vue"
import BaseIcon from "../../components/basecomponents/BaseIcon.vue"
import { useFormatDate } from "../../composables/formatDate"
const servicePrefix = "Documents"
export default {
name: "DocumentsShow",
components: {
BaseIcon,
Loading,
Toolbar,
ShowLinks,
},
mixins: [ShowMixin],
data() {
const { relativeDatetime } = useFormatDate()
return {
relativeDatetime,
}
},
computed: {
...mapFields("documents", {
isLoading: "isLoading",
}),
...mapGetters("documents", ["find"]),
...mapGetters({
isAuthenticated: "security/isAuthenticated",
isAdmin: "security/isAdmin",
isCurrentTeacher: "security/isCurrentTeacher",
}),
},
methods: {
...mapActions("documents", {
deleteItem: "del",
reset: "resetShow",
retrieve: "loadWithQuery",
}),
},
servicePrefix,
}
</script>

180
assets/vue/views/documents/Show.vue
Unescape View File

@ -1,180 +0,0 @@
<template>
<div>
<Toolbar
v-if="item && isCurrentTeacher"
:handle-delete="del"
:handle-edit="editHandler"
></Toolbar>
<div
v-if="item"
class="flex flex-row"
>
<div class="w-1/2">
<p class="text-lg">
{{ item["title"] }}
</p>
<div
v-if="item['resourceNode']['resourceFile']"
class="flex justify-center"
>
<div class="w-4/5">
<q-img
v-if="item['resourceNode']['resourceFile']['image']"
:src="item['contentUrl'] + '&w=300'"
spinner-color="primary"
/>
<span v-else-if="item['resourceNode']['resourceFile']['video']">
<video controls>
<source :src="item['contentUrl']" />
</video>
</span>
<span v-if="'text/html' === item['resourceNode']['resourceFile']['mimeType']">
<iframe
:src="item['contentUrl']"
border="0"
height="100%"
width="100%"
/>
</span>
<!-- <span v-else>-->
<!-- <q-btn-->
<!-- class="btn btn--primary"-->
<!-- :to="item['downloadUrl']"-->
<!-- >-->
<!-- <v-icon icon="mdi-file-download"/>-->
<!-- {{ $t('Download file') }}-->
<!-- </q-btn>-->
<!-- </span>-->
</div>
</div>
<div
v-else
class="flex justify-center"
>
<v-icon icon="mdi-folder" />
</div>
</div>
<span class="w-1/2">
<q-markup-table>
<tbody>
<tr>
<td>
<strong>{{ $t("Author") }}</strong>
</td>
<td>
{{ item["resourceNode"].creator.username }}
</td>
<td></td>
<td />
</tr>
<tr>
<td>
<strong>{{ $t("Comment") }}</strong>
</td>
<td>
{{ item["comment"] }}
</td>
</tr>
<tr>
<td>
<strong>{{ $t("Created at") }}</strong>
</td>
<td>
{{ item["resourceNode"] ? relativeDatetime(item["resourceNode"].createdAt) : "" }}
</td>
<td />
</tr>
<tr>
<td>
<strong>{{ $t("Updated at") }}</strong>
</td>
<td>
{{ item["resourceNode"] ? relativeDatetime(item["resourceNode"].updatedAt) : "" }}
</td>
<td />
</tr>
<tr v-if="item['resourceNode']['resourceFile']">
<td>
<strong>{{ $t("File") }}</strong>
</td>
<td>
<div>
<a
:href="item['downloadUrl']"
class="btn btn--primary"
>
<v-icon icon="mdi-file-download" />
{{ $t("Download file") }}
</a>
</div>
</td>
<td />
</tr>
</tbody>
</q-markup-table>
<hr />
<ShowLinks :item="item" />
</span>
</div>
<Loading :visible="isLoading" />
</div>
</template>
<script>
import { mapActions, mapGetters } from "vuex"
import { mapFields } from "vuex-map-fields"
import Loading from "../../components/Loading.vue"
import ShowMixin from "../../mixins/ShowMixin"
import Toolbar from "../../components/Toolbar.vue"
import ShowLinks from "../../components/resource_links/ShowLinks.vue"
import { useFormatDate } from "../../composables/formatDate"
const servicePrefix = "Documents"
export default {
name: "DocumentsShow",
components: {
Loading,
Toolbar,
ShowLinks,
},
mixins: [ShowMixin],
data() {
const { relativeDatetime } = useFormatDate()
return {
relativeDatetime,
}
},
computed: {
...mapFields("documents", {
isLoading: "isLoading",
}),
...mapGetters("documents", ["find"]),
...mapGetters({
isAuthenticated: "security/isAuthenticated",
isAdmin: "security/isAdmin",
isCurrentTeacher: "security/isCurrentTeacher",
}),
},
methods: {
...mapActions("documents", {
deleteItem: "del",
reset: "resetShow",
retrieve: "loadWithQuery",
}),
},
servicePrefix,
}
</script>
Write Preview
Loading…
Cancel
Save