From fb092c339252320bd235fb7eee0ea494953b8e5b Mon Sep 17 00:00:00 2001
From: Tobias Klika <cee@live.at>
Date: Sun, 12 Apr 2020 00:55:43 +0200
Subject: [PATCH] 404 view

---
 zero.Web/App/Components/Tables/table.vue |   1 +
 zero.Web/App/Components/pagination.vue   |   9 +-
 zero.Web/App/pages/notfound.vue          | 139 +++++++++++++++++++++++
 zero.Web/App/pages/pages/pages.vue       |   9 +-
 zero.Web/App/pages/pages/recyclebin.vue  |  11 ++
 zero.Web/App/router.config.js            |  28 +++--
 zero.Web/Resources/tree.debug.json       |   2 +-
 7 files changed, 188 insertions(+), 11 deletions(-)
 create mode 100644 zero.Web/App/pages/notfound.vue
 create mode 100644 zero.Web/App/pages/pages/recyclebin.vue

diff --git a/zero.Web/App/Components/Tables/table.vue b/zero.Web/App/Components/Tables/table.vue
index aa74e7c5..bebc4caa 100644
--- a/zero.Web/App/Components/Tables/table.vue
+++ b/zero.Web/App/Components/Tables/table.vue
@@ -213,6 +213,7 @@
     border-bottom: 1px solid var(--color-line-light);
     z-index: 3;
     background: var(--color-box);
+    box-shadow: inset 0 -3px 3px rgba(0,0,0,0.02);
 
     .ui-table-cell
     {
diff --git a/zero.Web/App/Components/pagination.vue b/zero.Web/App/Components/pagination.vue
index ad41165a..69a9efe4 100644
--- a/zero.Web/App/Components/pagination.vue
+++ b/zero.Web/App/Components/pagination.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="ui-pagination" v-if="pages > 1">
-    <ui-icon-button class="ui-pagination-next" type="white" title="@ui.pagination.previous" icon="fth-chevron-left" :disabled="page < 2" @click="set(page - 1)" />
+    <ui-icon-button class="ui-pagination-prev ui-pagination-button" type="white" title="@ui.pagination.previous" icon="fth-chevron-left" :disabled="page < 2" @click="set(page - 1)" />
     <div class="ui-pagination-select">
       <select :value="page" @change="selectChanged">
         <option v-for="value in values" v-bind:value="value">{{value}}</option>
@@ -10,7 +10,7 @@
         <i class="ui-button-caret fth-chevron-down"></i>
       </button>
     </div>
-    <ui-icon-button class="ui-pagination-next" type="white" title="@ui.pagination.next" icon="fth-chevron-right" :disabled="page >= pages" @click="set(page + 1)" />
+    <ui-icon-button class="ui-pagination-next ui-pagination-button" type="white" title="@ui.pagination.next" icon="fth-chevron-right" :disabled="page >= pages" @click="set(page + 1)" />
   </div>
 </template>
 
@@ -85,4 +85,9 @@
       opacity: 0;
     }
   }
+
+  .ui-pagination-button[disabled] .ui-button-icon
+  {
+    color: var(--color-fg-light);
+  }
 </style>
\ No newline at end of file
diff --git a/zero.Web/App/pages/notfound.vue b/zero.Web/App/pages/notfound.vue
new file mode 100644
index 00000000..69942963
--- /dev/null
+++ b/zero.Web/App/pages/notfound.vue
@@ -0,0 +1,139 @@
+<template>
+  <div class="page not-found theme-dark">
+    <i class="not-found-icon fth-cloud-snow"></i>
+    <p class="not-found-text">
+      <strong class="not-found-headline">Not found</strong><br>
+      The requested resource could not be found
+      <br>
+      ({{path}})
+    </p>
+    <ui-button class="not-found-button" type="light" :label="detailsText" @click="details = !details" />
+    <template v-if="details">
+      <br><br>
+      <div class="not-found-routes">
+        <template v-for="(route, index) in routes">
+          <span>{{index + 1}}.</span>
+          <span>{{route}}</span>
+        </template>
+      </div>
+    </template>
+  </div>
+</template>
+
+
+<script>
+  export default {
+
+    data: () => ({
+      path: null,
+      routes: [],
+      details: false
+    }),
+
+    watch: {
+      '$route': function (val)
+      {
+        this.rebuild();
+      }
+    },
+
+    computed: {
+      detailsText()
+      {
+        return this.details ? 'Hide' : 'Defined routes';
+      }
+    },
+
+    mounted()
+    {
+      this.rebuild();
+    },
+
+    methods: {
+
+      rebuild()
+      {
+        this.path = this.$router.options.base + this.$route.path.substring(1);
+        this.routes = [];
+
+        this.$router.options.routes.forEach(route =>
+        {
+          this.routes.push(route.path);
+        });
+      }
+
+    }
+
+  }
+</script>
+
+<style lang="scss">
+  .not-found
+  {
+    width: 100%;
+    min-height: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    background: var(--color-bg-light);
+    color: var(--color-fg);
+    text-align: center;
+    padding: var(--padding);
+    overflow-y: auto;
+  }
+
+  .not-found-icon
+  {
+    font-size: 82px;
+    color: var(--color-fg);
+    margin-bottom: 20px;
+  }
+
+  .not-found-text
+  {
+    font-size: var(--font-size);
+    color: var(--color-fg-light);
+    line-height: 1.4em;
+  }
+
+  .not-found-headline
+  {
+    display: inline-block;
+    margin-bottom: 10px;
+    font-size: var(--font-size-l);
+    color: var(--color-fg);
+  }
+
+  .not-found-button
+  {
+    margin-top: 10px;
+  }
+
+  .not-found-routes
+  {
+    display: grid;
+    grid-template-columns: auto 1fr;
+    width: 100%;
+    max-width: 100%;
+    text-align: left;
+    border-top: 1px solid var(--color-line);
+    border-left: 1px solid var(--color-line);
+    margin-top: 30px;
+
+    span
+    {
+      border: 1px solid var(--color-line);
+      border-left: none;
+      border-top: none;
+      padding: 8px 10px 6px;
+      font-family: Consolas;
+      font-size: 12px;
+
+      &:nth-child(2n+1)
+      {
+        color: var(--color-fg-light);
+      }
+    }
+  }
+</style>
\ No newline at end of file
diff --git a/zero.Web/App/pages/pages/pages.vue b/zero.Web/App/pages/pages/pages.vue
index 8f212d3b..8b9d1d42 100644
--- a/zero.Web/App/pages/pages/pages.vue
+++ b/zero.Web/App/pages/pages/pages.vue
@@ -46,7 +46,7 @@
     computed: {
       isOverview()
       {
-        return !this.$route.params.id;
+        return !this.$route.params.id && this.$route.name !== 'recyclebin';
       }
     },
 
@@ -96,6 +96,13 @@
             item.url = {
               name: 'page',
               params: { id: item.id }
+            };
+
+            if (item.id === "recyclebin")
+            {
+              item.url = {
+                name: 'recyclebin'
+              };
             }
           });
           this.cache[key] = response;
diff --git a/zero.Web/App/pages/pages/recyclebin.vue b/zero.Web/App/pages/pages/recyclebin.vue
new file mode 100644
index 00000000..f329c2f8
--- /dev/null
+++ b/zero.Web/App/pages/pages/recyclebin.vue
@@ -0,0 +1,11 @@
+<template>
+  <div class="page">
+    <ui-header-bar title="Recycle bin" />
+  </div>
+</template>
+
+
+<script>
+  export default {
+  }
+</script>
\ No newline at end of file
diff --git a/zero.Web/App/router.config.js b/zero.Web/App/router.config.js
index 97ee86cf..1b6ec0a2 100644
--- a/zero.Web/App/router.config.js
+++ b/zero.Web/App/router.config.js
@@ -31,12 +31,22 @@ zero.sections.forEach(section =>
 
   if (section.alias === 'pages')
   {
-    route.children = [{
-      path: 'edit/:id',
-      props: true,
-      name: 'page',
-      component: () => import('zero/pages/' + section.alias + '/page')
-    }];
+    route.children = [
+      {
+        path: 'edit/:id',
+        props: true,
+        name: 'page',
+        component: () => import('zero/pages/' + section.alias + '/page')
+      },
+      {
+        path: 'recyclebin',
+        name: 'recyclebin',
+        component: () => import('zero/pages/' + section.alias + '/recyclebin'),
+        meta: {
+          name: '@recyclebin.name'
+        }
+      }
+    ];
   }
 
   if (section.children.length > 0)
@@ -52,7 +62,7 @@ zero.sections.forEach(section =>
 
 // add fallback route (this should probably by 404 page)
 
-//routes.push({ path: '*', component: ViewDefault });
+routes.push({ path: '*', component: () => import('zero/pages/notfound') });
 
 
 
@@ -80,6 +90,10 @@ router.beforeEach((to, from, next) =>
   {
     document.title = Localization.localize(to.meta.section.name) + ' - zero';
   }
+  else if (to.meta.name)
+  {
+    document.title = Localization.localize(to.meta.name) + ' - zero';
+  }
   else
   {
     document.title = 'zero';
diff --git a/zero.Web/Resources/tree.debug.json b/zero.Web/Resources/tree.debug.json
index 0b14e6dd..2643fbf5 100644
--- a/zero.Web/Resources/tree.debug.json
+++ b/zero.Web/Resources/tree.debug.json
@@ -9,7 +9,7 @@
     "hasChildren": true
   },
   {
-    "id": "-99",
+    "id": "recyclebin",
     "parentId": null,
     "sort": 1000,
     "name": "@recyclebin.name",