viewer: Isolated the Directory and Image views in their own components

3 files changed, 44 insertions, 8 deletions

diff --git a/viewer/src/views/Gallery.vue b/viewer/src/views/Gallery.vue
index 55b93db..10ff323 100644
--- a/viewer/src/views/Gallery.vue
+++ b/viewer/src/views/Gallery.vue
@@ -1,19 +1,18 @@
 <template>
   <div id="test-flex-col">
-    <div v-if="isDirectory">
-      <strong>Directory: {{currentItem.path}}</strong>
-      <div v-for="(item, index) in currentItem.properties.items" :key="item.path">
-        <router-link :to="item.path">Thumbnail: {{index}}-{{item.path}}</router-link>
-      </div>
-    </div>
-    <div v-if="isImage">Image: {{currentItem.path}}</div>
+    <gallery-directory v-if="isDirectory" :directory="currentItem" />
+    <gallery-image v-if="isImage" :image="currentItem" />
   </div>
 </template>
 
 <script lang="ts">
 import { Component, Vue, Prop } from "vue-property-decorator";
+import GalleryDirectory from "./GalleryDirectory.vue";
+import GalleryImage from "./GalleryImage.vue";
 
-@Component
+@Component({
+  components: { GalleryDirectory, GalleryImage },
+})
 export default class Root extends Vue {
   @Prop(String) readonly pathMatch!: string;
 
diff --git a/viewer/src/views/GalleryDirectory.vue b/viewer/src/views/GalleryDirectory.vue
new file mode 100644
index 0000000..bed1664
--- /dev/null
+++ b/viewer/src/views/GalleryDirectory.vue
@@ -0,0 +1,20 @@
+<template>
+  <div>
+    <strong>Directory: {{directory.path}}</strong>
+    <div v-for="(item, index) in directory.properties.items" :key="item.path">
+      <router-link :to="item.path">Thumbnail: {{index}}-{{item.path}}</router-link>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { Component, Vue, Prop } from "vue-property-decorator";
+
+@Component
+export default class GalleryDirectory extends Vue {
+  @Prop({ type: Array, required: true }) readonly directory!: Gallery.Directory;
+}
+</script>
+
+<style lang="scss">
+</style>
diff --git a/viewer/src/views/GalleryImage.vue b/viewer/src/views/GalleryImage.vue
new file mode 100644
index 0000000..daaa504
--- /dev/null
+++ b/viewer/src/views/GalleryImage.vue
@@ -0,0 +1,17 @@
+<template>
+  <div>
+    <strong>Image: {{image.path}}</strong>
+  </div>
+</template>
+
+<script lang="ts">
+import { Component, Vue, Prop } from "vue-property-decorator";
+
+@Component
+export default class GalleryDirectory extends Vue {
+  @Prop({ required: true }) readonly image!: Gallery.Image;
+}
+</script>
+
+<style lang="scss">
+</style>