Improvement of document show component

assets/css/scss/_documents.scss

@@ -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;
+    }
+  }
+}

assets/css/scss/index.scss

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

assets/vue/router/documents.js

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

assets/vue/views/documents/DocumentShow.vue

@@ -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>

assets/vue/views/documents/Show.vue

@@ -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>